/* ==== Self-hosted fonts: start ==== */
/* D-231 (2026-10-22): served from slct.studio instead of Google Fonts and Fontshare, so a page view sends no
   visitor IP address to either. General Sans (Fontshare, ITF Free Font License) and Charis SIL (SIL Open Font
   License, latin and latin-ext subsets only). Sources and licences in fonts/README.txt. */
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Charis SIL'; src: url('fonts/charis-sil-400-italic-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; 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: 'Charis SIL'; src: url('fonts/charis-sil-400-italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Charis SIL'; src: url('fonts/charis-sil-400-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; 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: 'Charis SIL'; src: url('fonts/charis-sil-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Charis SIL'; src: url('fonts/charis-sil-700-latin-ext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; 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: 'Charis SIL'; src: url('fonts/charis-sil-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ==== Self-hosted fonts: end ==== */

/* ==========================================================================
   SLCT.STUDIO SITE V3 / shared styles. Status: DRAFT.
   Direction: "operating system" (D-104, 2026-10-07). The site reads like the
   platform: a visible 12-column hairline grid, small uppercase labels in
   General Sans (no third family), numbered modules, tables with status
   cells, and a hero field of square cells with Sil drawn into it.
   Brand Guidelines v1.0, strictly: flat colour, no gradients, no shadows,
   no blur, radius 0, text-only buttons. Palette per D-101: white and black
   (Ink) lead, wine is secondary (one wine module per page: contact), Coral
   and the rest are accents and graphics only. Type: General Sans carries
   headlines and interface; Charis SIL is the voice inside them (italic
   phrases) and the expressive pieces.
   The previous "collage" site is banked in banked/site-v3-collage-2026-10-07.
   ========================================================================== */

:root {
  --oxblood: #5E0E09;
  --coral:   #F7634F;
  --mist:    #CAE1DC;
  --moss:    #1D3005;
  --tide:    #194149;
  --blush:   #F7A398;
  --ink:     #0F1B19;
  --white:   #FFFFFF;
  --rule:    #E4E8E7;   /* the grid hairline: Ink at roughly 10% on white */
  --rule-d:  #34403E;   /* the same hairline on black */
  --grey:    #5A6563;   /* secondary text on white */
  --grey-d:  #A9B3B1;   /* secondary text on black */

  --serif: 'Charis SIL', Georgia, 'Times New Roman', serif;
  --sans:  'General Sans', system-ui, -apple-system, sans-serif;
  --m:     clamp(18px, 4.4vw, 64px);
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --snap:  cubic-bezier(.7, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--coral); color: var(--ink); }
a { color: inherit; }
img, svg { display: block; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.02em; }

/* labels: General Sans small caps-style, one of its roles */
.lab { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; line-height: 1.4; }

/* the grid, always visible behind the page */
.cols { position: fixed; top: 0; bottom: 0; left: var(--m); right: var(--m); display: grid; grid-template-columns: repeat(12, 1fr); pointer-events: none; z-index: 0; }
.cols i { border-left: 1px solid var(--rule); }
.cols i:last-child { border-right: 1px solid var(--rule); }
main, .bar, .nav, .foot { position: relative; z-index: 1; }

/* ---------- status bar ---------- */
.bar { display: flex; justify-content: space-between; gap: 16px; padding: 8px var(--m); background: var(--ink); color: var(--white); }
.sq { display: inline-block; width: 7px; height: 7px; background: var(--coral); margin-right: 8px; vertical-align: 0; animation: blink 2s steps(1) infinite; }
.sq.closed { background: transparent; box-shadow: inset 0 0 0 1px var(--white); animation: none; }
@keyframes blink { 50% { background: transparent; } }

/* ---------- nav: the grid's own cells (Anna's structure: wordmark and
   links left, the call to action right) ---------- */
.nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 var(--m); background: var(--white); border-bottom: 1px solid var(--ink); }
.nav > * { padding: 15px 0 14px; font-size: 14px; text-decoration: none; }
.wm { grid-column: span 3; font-size: 16px !important; font-weight: 400; color: var(--ink); text-decoration: none; }
.wm b { font-weight: 700; }
.nls { grid-column: span 6; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 !important; }
.nl { display: block; padding: 15px 12px 14px; border-left: 1px solid var(--ink); text-decoration: none; transition: background .15s steps(1), color .15s steps(1); }
.nl:hover, .nl[aria-current] { background: var(--ink); color: var(--white); }
.ncta { grid-column: span 3; display: block; padding-left: 14px !important; background: var(--coral); color: var(--ink); font-weight: 600; border-left: 1px solid var(--ink); }
a.ncta:hover { background: var(--ink); color: var(--white); }
.ncta[aria-current] { background: var(--ink); color: var(--white); }
.nmenu { display: none; font: 600 14px/1 var(--sans); background: var(--ink); color: var(--white); border: 0; cursor: pointer; border-radius: 0; }

/* phone menu: a full sheet of grid rows */
.menu { position: fixed; inset: 0; z-index: 50; background: var(--white); display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 var(--m); border-bottom: 1px solid var(--ink); }
.menu-x { font: 600 14px/1 var(--sans); background: var(--ink); color: var(--white); border: 0; padding: 18px 22px; cursor: pointer; }
.menu-rows { flex: 1; display: flex; flex-direction: column; }
.mrow { display: flex; align-items: baseline; gap: 14px; padding: 18px var(--m); border-bottom: 1px solid var(--ink); font-size: 30px; font-weight: 600; letter-spacing: -.03em; text-decoration: none; transform: translateX(16px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease); }
.menu.open .mrow { transform: none; opacity: 1; }
.mrow:nth-child(2) { transition-delay: .04s; } .mrow:nth-child(3) { transition-delay: .08s; } .mrow:nth-child(4) { transition-delay: .12s; } .mrow:nth-child(5) { transition-delay: .16s; }
.mrow[aria-current] { background: var(--ink); color: var(--white); }
.menu-foot { padding: 16px var(--m); }

/* ---------- buttons: flat, sharp, text only ---------- */
.acts { display: flex; width: max-content; max-width: 100%; border: 1px solid var(--ink); }
.btn { display: inline-block; font: 600 14px/1 var(--sans); text-decoration: none; padding: 16px 22px; border: 0; border-radius: 0; cursor: pointer; transition: background .15s steps(1), color .15s steps(1); }
.btn.p { background: var(--ink); color: var(--white); }
.btn.p:hover { background: var(--oxblood); }
.btn.s { background: var(--white); color: var(--ink); }
.btn.s:hover { background: var(--ink); color: var(--white); }
.btn.s + .btn, .btn + .btn.s { border-left: 1px solid var(--ink); }
.btn.line { border: 1px solid var(--ink); }
.tl { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tl:hover { color: var(--coral); }

/* ---------- hero: copy left, the cell field right ---------- */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 var(--m); border-bottom: 1px solid var(--ink); min-height: calc(100vh - 82px); min-height: calc(100svh - 82px); }
.hero .txt { grid-column: 1 / span 6; padding: clamp(36px, 7vh, 88px) 24px clamp(28px, 5vh, 56px) 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.hero h1 { margin-top: 20px; font-size: clamp(40px, 5.4vw, 92px); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.hero h1 em { letter-spacing: -.03em; }
.hero .sub { font-size: clamp(16px, 1.25vw, 18px); max-width: 40ch; margin-top: 24px; }
.field { grid-column: 7 / span 6; position: relative; border-left: 1px solid var(--ink); min-height: 360px; cursor: crosshair; }
.field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.field .lab { position: absolute; left: 12px; background: var(--white); padding: 2px 4px; pointer-events: none; }
.field .ft { top: 10px; } .field .fb { bottom: 10px; }
.nojs-sil { display: none; }

/* ---------- modules ---------- */
.mod { display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 var(--m); border-bottom: 1px solid var(--ink); }
.mod > .hd { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ink); }
.mod > h2 { grid-column: 1 / span 7; font-size: clamp(32px, 3.8vw, 62px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; padding: clamp(36px, 6vh, 64px) 24px clamp(36px, 6vh, 64px) 0; }
.mod > .side { grid-column: 8 / span 5; padding: clamp(40px, 6vh, 68px) 0 clamp(36px, 6vh, 64px) 24px; border-left: 1px solid var(--ink); font-size: 17px; }
.side p + p { margin-top: 16px; }
.side .lab.gap { margin-top: 28px; }
.side .lab + p { margin-top: 8px; }
.mod .note { grid-column: 1 / -1; padding: 14px 0; font-size: 14px; border-top: 1px solid var(--ink); }
.mod.dark { background: var(--ink); color: var(--white); }
.mod.dark, .mod.dark > .hd, .mod.dark > .side, .mod.dark .grid, .mod.dark .grid > div, .mod.dark .tbl, .mod.dark .tbl li, .mod.dark .tbl li > *, .mod.dark .note { border-color: var(--rule-d); }

/* grids of cells */
.grid { grid-column: 1 / -1; display: grid; border-top: 1px solid var(--ink); }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.grid > div { padding: 16px 18px 28px; border-left: 1px solid var(--ink); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.grid > div:first-child { border-left: 0; padding-left: 0; }
.grid h3 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 8px; }
.grid p, .grid li { font-size: 15px; }
.grid ul { margin-top: 10px; } .grid li { padding: 6px 0; border-top: 1px solid var(--rule); }
.mod.dark .grid li { border-color: var(--rule-d); }
.cells { display: grid; grid-template-columns: repeat(8, 12px); gap: 2px; }
.cells i { width: 12px; height: 12px; background: var(--rule); }
.mod.dark .cells i { background: var(--rule-d); }
.cells i.on { background: var(--coral) !important; }

/* tables */
.tbl { grid-column: 1 / -1; border-top: 1px solid var(--ink); }
.tbl li { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--ink); transition: background .15s steps(1), color .15s steps(1); }
.tbl li:last-child { border-bottom: 0; }
.tbl li > * { padding: 16px 0; }
.tbl .k { grid-column: span 3; font-weight: 600; padding-right: 12px; }
.tbl .d { grid-column: span 6; padding-left: 12px; border-left: 1px solid var(--ink); }
.tbl .st { grid-column: span 3; padding-left: 12px; border-left: 1px solid var(--ink); }
.tbl .st i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; box-shadow: inset 0 0 0 1px currentColor; vertical-align: 0; }
.tbl .st.on i { background: var(--coral); box-shadow: none; animation: blink 2.4s steps(1) infinite; }
.tbl li:hover { background: var(--ink); color: var(--white); }
.mod.dark .tbl li:hover { background: var(--white); color: var(--ink); }
.tbl.rules .k { grid-column: span 3; font-weight: 500; }
.tbl.rules .d { grid-column: span 9; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.015em; }

/* method steps: each stage lights a growing strip of cells as it is read */
.steps { grid-column: 1 / -1; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--ink); align-items: start; }
.steps li:last-child { border-bottom: 0; }
.steps li > * { padding: 22px 0; }
.steps .n { grid-column: span 1; font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.steps .k { grid-column: span 3; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; padding-right: 16px; }
.steps .d { grid-column: span 6; padding-left: 12px; border-left: 1px solid var(--ink); }
.steps .sc { grid-column: span 2; display: flex; gap: 2px; padding-left: 12px; border-left: 1px solid var(--ink); }
.steps .sc i { width: 12px; height: 12px; background: var(--rule); transition: background .2s steps(1); }
.steps li.lit .sc i { background: var(--coral); }
.steps li.lit .n { color: var(--oxblood); }

/* the evidence sentence with empty slots */
.query { grid-column: 1 / -1; border-top: 1px solid var(--ink); padding: clamp(28px, 5vh, 48px) 0; font-size: clamp(24px, 2.8vw, 44px); line-height: 1.55; font-weight: 500; letter-spacing: -.02em; }
.slot { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--oxblood); color: var(--oxblood); padding: 7px 10px; vertical-align: middle; line-height: 1; margin: 0 4px; }
.slot::after { content: ""; display: inline-block; width: 7px; height: 12px; background: var(--coral); margin-left: 6px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.qfoot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--ink); padding: 14px 0; }
.qfoot p { font-size: 14px; max-width: 60ch; }

/* the three p84 posters, kept as they are composed */
.posters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.poster { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-left: 1px solid var(--ink); }
.poster:first-child { border-left: 0; }
.poster .shapes, .poster .shapes svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster p { position: absolute; left: 16px; top: 14px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.p-blush { background: var(--blush); color: var(--oxblood); }
.p-oxblood { background: var(--oxblood); color: var(--blush); }
.p-mist { background: var(--mist); color: var(--oxblood); }
.s-ox { fill: var(--oxblood); } .s-co { fill: var(--coral); } .s-bl { fill: var(--blush); } .s-mi { fill: var(--mist); }
.shapes .s { transition: transform 1s var(--snap); }
.js .shapes:not(.in) .s { transform: translateY(104%); }
.js .shapes:not(.in) .s-co { transform: translateY(-140%); }

/* simulated strip */
.sim { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid var(--rule-d); }
.sim-controls { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; padding: 24px 24px 32px 0; }
.sim-row { display: flex; flex-direction: column; margin-top: 10px; border: 1px solid var(--rule-d); }
.sim-btn { font: 500 14px/1.3 var(--sans); text-align: left; padding: 12px 14px; background: none; color: var(--white); border: 0; border-top: 1px solid var(--rule-d); border-radius: 0; cursor: pointer; }
.sim-btn:first-child { border-top: 0; }
.sim-btn:hover { background: var(--rule-d); }
.sim-btn[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.sim-note strong { font-weight: 600; letter-spacing: .1em; font-size: 12px; }
.sim-stage { grid-column: 6 / span 7; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 380px; padding: 24px; border-left: 1px solid var(--rule-d); }
.sim-statement { font-family: var(--serif); font-size: clamp(32px, 4vw, 60px); line-height: 1.06; letter-spacing: -.015em; max-width: 16ch; }
.sim-statement b { font-weight: 700; }
.sim-rail { font-size: 12px; }
.sim-oxblood { background: var(--oxblood); color: var(--blush); }
.sim-tide { background: var(--tide); color: var(--blush); }
.sim-moss { background: var(--moss); color: var(--mist); }
.sim-stage .swap { transition: opacity .25s ease, transform .25s ease; }
.sim-stage .swap.out { opacity: 0; transform: translateY(8px); }

/* ---------- contact module: the page's one wine field ---------- */
.con { display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 var(--m); background: var(--oxblood); color: var(--white); position: relative; overflow: hidden; }
.con > .hd { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.con h2 { grid-column: 1 / span 8; font-size: clamp(44px, 6.6vw, 112px); font-weight: 600; line-height: .96; letter-spacing: -.045em; padding: clamp(48px, 9vh, 96px) 0 24px; }
.con > p { grid-column: 1 / span 5; font-size: 17px; padding-bottom: 32px; }
.con .acts { grid-column: 1 / span 7; border-color: var(--white); margin-bottom: clamp(48px, 9vh, 96px); }
.con .btn.p { background: var(--white); color: var(--ink); }
.con .btn.p:hover { background: var(--coral); }
.con .btn.s { background: var(--oxblood); color: var(--white); border-color: var(--white); }
.con .btn.s:hover { background: var(--white); color: var(--ink); }
.con-sil { grid-column: 10 / span 3; grid-row: 2 / span 3; align-self: end; color: var(--coral); }
.con-sil .sil svg { width: 100%; height: auto; margin-bottom: -2px; }

/* ---------- form ---------- */
.formmod .form-side { grid-column: 1 / span 5; padding: clamp(36px, 6vh, 64px) 24px clamp(36px, 6vh, 64px) 0; }
.formmod .form-side h2 { font-size: clamp(32px, 3.8vw, 62px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; margin-bottom: 20px; }
#panel { grid-column: 6 / span 7; border-left: 1px solid var(--ink); padding: clamp(36px, 6vh, 64px) 0 clamp(36px, 6vh, 64px) 24px; }
form { display: grid; gap: 20px; }
form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
form label { display: grid; gap: 8px; }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
input, textarea { font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: 0; padding: 14px; width: 100%; -webkit-appearance: none; appearance: none; }
textarea { min-height: 160px; resize: vertical; }
input:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.bad { box-shadow: inset 0 0 0 2px var(--coral) !important; }
.send { display: flex; align-items: center; gap: 18px; }
.stat.err { color: var(--oxblood); font-weight: 600; }
.done .sil { width: 120px; color: var(--coral); margin-bottom: 28px; }
.done h2 { font-size: clamp(32px, 3.8vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.done p { margin-top: 16px; }
.done .again { display: inline-block; margin-top: 24px; font-weight: 600; }

/* ---------- Sil: one expression showing at a time ---------- */
.sil { display: block; color: var(--coral); }
.sil svg { width: 100%; height: auto; display: block; overflow: visible; }
.sil[data-x] g[class^="x-"] { display: none; }
.sil[data-x="neutral"] g.x-neutral, .sil[data-x="happy"] g.x-happy, .sil[data-x="surprised"] g.x-surprised { display: inline; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- footer: black, the mark in white (D-102) ---------- */
.foot { background: var(--ink); color: var(--white); padding: 0 var(--m); }
.foot-grid { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--rule-d); }
.fc { grid-column: span 3; padding: 14px 16px 40px; border-left: 1px solid var(--rule-d); display: grid; gap: 14px; align-content: start; }
.fc-a { grid-column: span 6; border-left: 0; padding-left: 0; }
.foot .big { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; max-width: 24ch; }
.foot .big a:hover, .foot-nav a:hover { color: var(--coral); }
.foot-nav a { text-decoration: none; font-size: 15px; }
.foot .tm { font-size: 32px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.foot .small { font-size: 13px; color: var(--grey-d); }
.foot-mark { color: var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nls { display: none; }
  .wm { grid-column: span 6; }
  .ncta { grid-column: span 4; }
  .nmenu { display: block; grid-column: span 2; }
  .hero { min-height: 0; }
  .hero .txt, .field, .mod > h2, .mod > .side, .con h2, .con > p, .con .acts, .formmod .form-side, #panel, .sim-controls, .sim-stage { grid-column: 1 / -1; }
  .hero .txt { padding-right: 0; }
  .field { min-height: 340px; border-left: 0; border-top: 1px solid var(--ink); margin: 0 calc(-1 * var(--m)); }
  .mod > h2 { padding-right: 0; padding-bottom: 20px; }
  .mod > .side, #panel, .sim-stage { border-left: 0; padding-left: 0; padding-top: 0; }
  #panel { padding-top: 0; }
  .sim-stage { padding: 20px; margin: 0 calc(-1 * var(--m)); }
  .g3, .g4 { grid-template-columns: 1fr 1fr; }
  .g3 > div:nth-child(3), .g4 > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .g3 > div:nth-child(n+3), .g4 > div:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .mod.dark .grid > div { border-top-color: var(--rule-d); }
  .tbl .k, .tbl .d, .tbl .st, .tbl.rules .k, .tbl.rules .d { grid-column: 1 / -1; border-left: 0; padding: 3px 0; }
  .tbl li { padding: 12px 0; }
  .steps .n { grid-column: span 2; } .steps .k { grid-column: span 10; }
  .steps .d { grid-column: 3 / -1; border-left: 0; padding: 0 0 10px; }
  .steps .sc { grid-column: 3 / -1; border-left: 0; padding: 0 0 22px; }
  .posters { grid-template-columns: 1fr; } .poster { border-left: 0; border-top: 1px solid var(--ink); aspect-ratio: 4 / 3; } .poster:first-child { border-top: 0; }
  .con-sil { grid-column: 8 / span 5; grid-row: auto; width: 100%; }
  .fc-a { grid-column: 1 / -1; } .fc { grid-column: span 6; } .fc:nth-child(2) { border-left: 0; padding-left: 0; }
  .bar-a { display: none; }
}
@media (max-width: 560px) {
  .ncta { display: none; }
  .wm { grid-column: span 8; } .nmenu { grid-column: span 4; }
  form .two, .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .grid > div { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--ink); min-height: 0; }
  .grid > div:first-child { border-top: 0; }
  .acts { width: 100%; } .acts .btn { flex: 1; text-align: center; }
  .qfoot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .shapes:not(.in) .s { transform: none; }
  .sq, .slot::after, .tbl .st.on i { animation: none; }
}

/* ==========================================================================
   FOOTER MARK AS A STAGE (D-063 to D-068; a brand exception: see the ledger)
   The mark keeps its width. As it scrolls into view the bottom bar rises to
   meet the top bar, scrubbed to the scroll (--p, 0 to 1). At the very end
   of the page the box closes too (286u to 228u), so the band under the logo
   goes. Closed, the window plays a short story ONCE and holds: five blocks
   drop in; Sil walks on cross, stamps, hops happy; he goes to the Coral
   block, a pixel heart pops, and he hops up to stand on top of it (D-069).
   Leaving the end, the scene stays and Sil gets scared as the bars open;
   it only resets once the mark has left the viewport (D-070); arriving again replays. The fuller story (pile, climb, throw,
   Coral logo) is banked in 02-Website-System/banked/footer-story-2026-10-03.
   Units: 1u = the mark's width / 485. Closed, the window is 326u by 80u,
   its floor 154u from the mark's top.
   ========================================================================== */
.foot-mark { margin-top: clamp(56px, 10vh, 120px); color: var(--mist); container-type: inline-size; }
/* everything is positioned from the top, so the box can animate its height
   (the band under the logo closing) without moving the bars or the floor */
.fm { --u: calc(100cqw / 485); --p: 0; position: relative; height: calc(286 * var(--u)); transition: height .6s var(--ease); }
.foot.end .fm { height: calc(228 * var(--u)); }
.fm-bar { position: absolute; left: 0; width: 100%; height: calc(114 * var(--u)); display: block; will-change: transform; }
.fm-top { top: 0; }
.fm-bot { top: calc((172 - 58 * var(--p)) * var(--u)); }
.foot.end .fm-bot { top: calc(114 * var(--u)); }
.fm::before, .fm::after { content: ''; position: absolute; top: calc(114 * var(--u) - 2px); height: 4px; background: currentColor; opacity: clamp(0, calc((var(--p) - .985) * 70), 1); z-index: 1; }
.fm::before { left: 0; width: calc(79 * var(--u)); }
.fm::after { right: 0; width: calc(80 * var(--u) - 1px); }
/* the window: from the top bar's underside (74u) to the bottom bar's recess
   top, which is 154u when closed (the bars meet at 114u; the recess sits
   40u into the bottom bar) */
.fm-stage { z-index: 1; position: absolute; left: calc(79 * var(--u)); right: calc(80 * var(--u)); top: calc(74 * var(--u)); height: calc((80 + 58 * (1 - var(--p))) * var(--u)); overflow: hidden; }
.foot.end .fm-stage { height: calc(80 * var(--u)); }
.fm-stage > * { position: absolute; bottom: 0; }

.fm-stage .piece { height: calc(var(--h) * var(--u)); opacity: 0; }
.fm-stage .piece svg { height: 100%; width: auto; display: block; }
.fm-stage .p2 { --h: 16; left: calc(150 * var(--u)); }  /* Coral */
.fm-stage .p0 { --h: 30; left: calc(196 * var(--u)); }
.fm-stage .p1 { --h: 14; left: calc(236 * var(--u)); }
.fm-stage .p3 { --h: 30; left: calc(262 * var(--u)); }
.fm-stage .p4 { --h: 32; left: calc(274 * var(--u)); display: none; }
.fm-stage .fm-heart { left: calc(140 * var(--u)); bottom: calc(40 * var(--u)); width: calc(15 * var(--u)); opacity: 0; }
.fm-stage .fm-heart svg { width: 100%; height: auto; display: block; }
.fm-sil { position: absolute; left: 0; top: 0; width: calc(42 * var(--u)); color: var(--coral); opacity: 0; z-index: 2; }
.fm-sil .x-happy, .fm-sil .x-surprised { opacity: 0; }

.foot.live .fm-stage .piece { animation: s-drop 7s linear 1 both; animation-delay: calc(var(--k) * .1s); }
.foot.live .fm-stage .fm-heart { animation: s-heart 7s linear 1 both; }
.foot.live .fm-sil { animation: s-sil 7s linear 1 both; }
.foot.live .fm-sil .x-neutral { animation: s-xn 7s steps(1) 1 both; }
.foot.live .fm-sil .x-happy { animation: s-xh 7s steps(1) 1 both; }

@keyframes s-drop {
  0% { opacity: 1; transform: translateY(calc(-110 * var(--u))); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  8% { transform: translateY(0); animation-timing-function: ease-out; }
  10% { transform: translateY(calc(-4 * var(--u))); }
  12%, 100% { opacity: 1; transform: translateY(0); }
}
/* Sil's top-left on the mark; on the floor his top is at 122.6u */
@keyframes s-sil {
  0%, 16% { opacity: 1; transform: translate(calc(37 * var(--u)), calc(122.6 * var(--u))); clip-path: inset(0 0 0 100%); }
  22% { transform: translate(calc(79 * var(--u)), calc(122.6 * var(--u))); clip-path: inset(0 0 0 0); }
  30% { transform: translate(calc(130 * var(--u)), calc(122.6 * var(--u))); }
  32% { transform: translate(calc(126 * var(--u)), calc(122.6 * var(--u))); }
  34% { transform: translate(calc(134 * var(--u)), calc(122.6 * var(--u))); }
  36% { transform: translate(calc(126 * var(--u)), calc(122.6 * var(--u))); }
  38% { transform: translate(calc(130 * var(--u)), calc(122.6 * var(--u))); }
  42% { transform: translate(calc(130 * var(--u)), calc(110 * var(--u))); }
  45% { transform: translate(calc(130 * var(--u)), calc(122.6 * var(--u))); }
  56%, 70% { transform: translate(calc(186 * var(--u)), calc(122.6 * var(--u))); }
  /* up onto the Coral block: its top is 16u above the floor */
  75% { transform: translate(calc(205 * var(--u)), calc(92 * var(--u))); }
  80% { transform: translate(calc(219.5 * var(--u)), calc(106.6 * var(--u))); }
  82% { transform: translate(calc(219.5 * var(--u)), calc(104 * var(--u))); }
  84%, 100% { opacity: 1; transform: translate(calc(219.5 * var(--u)), calc(106.6 * var(--u))); clip-path: inset(0 0 0 0); }
}
@keyframes s-heart {
  0%, 56% { opacity: 0; transform: scale(0); }
  59% { opacity: 1; transform: scale(1.25); }
  62% { transform: scale(1); }
  70% { opacity: 1; transform: translateY(calc(-12 * var(--u))); }
  76%, 100% { opacity: 0; transform: translateY(calc(-20 * var(--u))); }
}
/* leaving the end (D-070): the scene stays; it rides down with the floor
   as the bars reopen, and Sil is scared (Surprised, trembling) until you
   come back, or until the mark leaves the viewport and everything resets */
/* Sil's keyframes put his feet at 153u; the closed floor is 154u, so the
   cast sits 1u lower, plus however far the floor has dropped while open */
.fm-cast { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateY(calc((1 + 58 * (1 - var(--p))) * var(--u))); }
.foot.end .fm-cast { transform: translateY(var(--u)); }
.foot.scared .fm-sil .x-neutral, .foot.scared .fm-sil .x-happy { opacity: 0 !important; }
.foot.scared .fm-sil .x-surprised { opacity: 1 !important; }
.foot.scared .fm-sil svg { animation: scared .42s linear infinite; }
@keyframes scared {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(calc(-1.5 * var(--u)), calc(-1 * var(--u))); }
  40% { transform: translate(calc(1.5 * var(--u)), 0); }
  60% { transform: translate(calc(-1 * var(--u)), calc(-2.5 * var(--u))); }
  80% { transform: translate(calc(1 * var(--u)), 0); }
}
/* the joint stays patched for as long as the bars are closed */
.foot.end .fm::before, .foot.end .fm::after { opacity: 1; }
@keyframes s-xn { 0%, 39% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes s-xh { 0%, 39% { opacity: 0; } 40%, 100% { opacity: 1; } }
.foot .shell { padding-bottom: clamp(28px, 4vh, 48px); }
@media (prefers-reduced-motion: reduce) {
  .fm { --p: 0 !important; }
  .foot.live .fm-stage *, .foot.live .fm-sil, .foot.scared .fm-sil svg { animation: none !important; }
}


/* D-102: the mark is white on the black footer (after the stage block, which set Mist) */
.foot-mark { color: var(--white); margin-top: clamp(40px, 8vh, 96px); }

/* ==========================================================================
   HOME STORY (D-105): the portal tabs, how it is built, the studio,
   pricing, key information
   ========================================================================== */
.fig { display: block; font-size: clamp(40px, 4.4vw, 72px); font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.mod > .hd.sub { border-top: 1px solid var(--ink); margin-top: 0; }
.mod.dark > .hd.sub { border-color: var(--rule-d); }

/* the portal: tabs down the left, a pane of copy and a mock screen */
.ptabs { grid-column: 1 / span 3; display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.ptab { display: flex; align-items: baseline; gap: 12px; text-align: left; font: 600 clamp(18px, 1.5vw, 22px)/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 18px 12px 18px 0; cursor: pointer; transition: background .15s steps(1), color .15s steps(1), padding .2s var(--ease); }
.ptab:hover { padding-left: 10px; }
.ptab[aria-selected="true"] { background: var(--ink); color: var(--white); padding-left: 12px; }
.ppanes { grid-column: 4 / span 9; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.ppane { display: grid; grid-template-columns: 5fr 7fr; min-height: 420px; }
.ppane[hidden] { display: none; }
.pcopy { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pcopy h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.pcopy p { font-size: 15px; }
.pstat { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--ink); }
.pstat span { display: block; font-size: 13px; margin-top: 8px; color: var(--grey); }
.screen { border-left: 1px solid var(--ink); background: #F3F5F4; padding: 22px; display: flex; gap: 12px; min-height: 100%; animation: scr-in .45s var(--ease); }
@keyframes scr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen .bar { display: block; height: 14px; background: var(--ink); margin-bottom: 8px; }
.screen .bar.thin { height: 8px; background: var(--grey); }
.w60 { width: 60%; } .w40 { width: 40%; }
.blockrow { display: flex; gap: 6px; margin-top: auto; }
.blockrow i { flex: 1; height: 54px; background: var(--oxblood); }
.blockrow i:nth-child(2) { background: var(--coral); } .blockrow i:nth-child(3) { background: var(--mist); }
.scr-side { display: flex; flex-direction: column; gap: 6px; width: 64px; flex: none; }
.scr-side i { aspect-ratio: 16 / 9; background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.scr-side i:first-child { box-shadow: inset 0 0 0 2px var(--coral); }
.scr-main { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.slide { flex: 1; background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); padding: 18px; display: flex; flex-direction: column; min-height: 220px; }
.brief { background: var(--ink); color: var(--white); padding: 10px 12px; }
.scr-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-content: start; }
.card { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; gap: 5px; }
.card i { height: 40%; background: var(--mist); } .card b { height: 6px; width: 60%; background: var(--ink); }
.card.hot { box-shadow: inset 0 0 0 2px var(--coral); } .card.hot i { background: var(--oxblood); }
.scr-brand { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.sw { grid-column: 1 / -1; display: flex; } .sw i { flex: 1; height: 64px; }
.aa { display: flex; gap: 18px; align-items: baseline; font-size: 64px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.aa .serif { font-family: var(--serif); font-weight: 400; }
.scr-brand .rules li { padding: 6px 0; border-bottom: 1px solid var(--ink); }
.scr-web { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.chrome { display: flex; gap: 5px; align-items: center; background: var(--ink); color: var(--white); padding: 7px 10px; }
.chrome i { width: 7px; height: 7px; background: var(--grey-d); } .chrome span { margin-left: 8px; }
.page { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); padding: 16px; display: flex; flex-direction: column; min-height: 130px; }
.ask { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); padding: 12px; }
.ask p { font-size: 14px; margin: 6px 0 10px; }
.push { display: inline-block; background: var(--coral); color: var(--ink); padding: 6px 8px; }
.scr-share { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.link { display: flex; background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); padding: 14px; } .link b { color: var(--oxblood); }
.vers li { padding: 10px 12px; border-bottom: 1px solid var(--ink); } .vers li.on { background: var(--ink); color: var(--white); }

/* the four figures under the portal */
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.stats > div { padding: 18px 18px 26px; border-left: 1px solid var(--ink); display: flex; flex-direction: column; gap: 22px; }
.stats > div:first-child { border-left: 0; padding-left: 0; }

/* services and pricing */
.tbl.svc .st i { display: none; }
.prices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.price { padding: 18px 18px 24px; border-left: 1px solid var(--ink); display: flex; flex-direction: column; gap: 18px; }
.price:first-child { border-left: 0; padding-left: 0; }
.price .amt b { display: block; font-size: clamp(30px, 2.8vw, 46px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; margin-top: 6px; }
.price p { font-size: 15px; }
.price ul { margin-top: auto; } .price li { font-size: 14px; padding: 7px 0; border-top: 1px solid var(--rule); }
.price .btn { align-self: flex-start; box-shadow: inset 0 0 0 1px var(--ink); }
.price.dark { background: var(--ink); color: var(--white); padding-left: 18px; }
.price.dark li { border-color: var(--rule-d); }
.price.dark .btn.s { background: var(--white); color: var(--ink); } .price.dark .btn.s:hover { background: var(--coral); }

/* four facts in a row */
.info4 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
.info4 > div { padding: 18px 18px 30px; border-left: 1px solid var(--ink); display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.info4 > div:first-child { border-left: 0; padding-left: 0; }
.info4 b { font-size: clamp(30px, 2.8vw, 46px); font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-top: auto; }
.info4 p { font-size: 14px; }

@media (max-width: 960px) {
  .ptabs { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ptab { flex: none; border-right: 1px solid var(--ink); padding: 14px; font-size: 16px; }
  .ppanes { grid-column: 1 / -1; border-left: 0; margin: 0 calc(-1 * var(--m)); }
  .ppane { grid-template-columns: 1fr; }
  .pcopy { padding: 20px var(--m); }
  .screen { border-left: 0; border-top: 1px solid var(--ink); min-height: 280px; }
  .stats, .prices, .info4 { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3), .prices > div:nth-child(3), .info4 > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats > div:nth-child(n+3), .prices > div:nth-child(n+3), .info4 > div:nth-child(n+3) { border-top: 1px solid var(--ink); }
  .price.dark { padding-left: 18px !important; }
}
@media (max-width: 560px) {
  .stats, .prices, .info4 { grid-template-columns: 1fr; }
  .stats > div, .prices > div, .info4 > div { border-left: 0 !important; padding-left: 0; border-top: 1px solid var(--ink); }
  .stats > div:first-child, .prices > div:first-child, .info4 > div:first-child { border-top: 0; }
  .info4 > div { min-height: 0; }
  .scr-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* ==========================================================================
   FEWER LINES (D-106, Nathan: "remove like majority of the lines, it's
   overbearing"). Kept: one rule between sections, the nav underline, faint
   row lines in lists. Gone: the background column grid, every vertical
   divider, the rules under section labels and above grids.
   ========================================================================== */
.cols { display: none; }
.nl, .ncta { border-left: 0; }
.hero, .mod { border-bottom-color: var(--rule); }
.mod.dark { border-bottom-color: var(--ink); }
.field, .mod > .side, #panel, .screen, .ppanes, .sim-stage, .sim { border-left: 0; border-top: 0; }
.field { border-left: 0; }
.mod > .hd, .con > .hd { border-bottom: 0; padding-top: 22px; }
.mod > .hd.sub { border-top: 0; padding-top: 40px; }
.grid, .stats, .prices, .info4, .posters, .tbl, .steps, .ptabs, .query, .qfoot, .mod .note { border-top: 0; }
.grid, .stats, .prices, .info4, .posters { column-gap: clamp(16px, 2vw, 32px); }
.grid > div, .stats > div, .price, .info4 > div, .poster { border-left: 0 !important; padding-left: 0; padding-right: 0; }
.price.dark { padding: 22px !important; }
.tbl li, .steps li { border-bottom-color: var(--rule); }
.mod.dark .tbl li { border-bottom-color: var(--rule-d); }
.tbl .d, .tbl .st, .steps .d, .steps .sc { border-left: 0; }
.ptab { border-bottom-color: var(--rule); border-right: 0; }
.pstat { border-top: 0; }
.price li, .grid li { border-top-color: var(--rule); }
.mod.dark .grid li { border-top-color: var(--rule-d); }
.foot-grid { border-bottom: 0; }
.fc { border-left: 0; padding-left: 0; }
.sim-row, .sim-btn { border-color: var(--rule-d); }
@media (max-width: 960px) {
  .field { border-top: 0; }
  .stats > div, .prices > div, .info4 > div, .g3 > div, .g4 > div, .poster { border-top: 0 !important; }
  .grid, .stats, .prices, .info4 { row-gap: 28px; }
}
@media (max-width: 560px) { .grid > div { border-top: 0; } }

/* ==========================================================================
   MORE AIR (D-107, Nathan: "much more whitespace, it's so crowded";
   reference tines.com): bigger section padding, centred section intros
   ========================================================================== */
.mod { padding-bottom: clamp(72px, 12vh, 160px); }
.mod > .hd { padding-top: 28px; }
.mod > h2 { padding-top: clamp(56px, 10vh, 128px); padding-bottom: clamp(40px, 7vh, 88px); }
.mod > .side { padding-top: clamp(64px, 10.5vh, 136px); padding-bottom: clamp(40px, 7vh, 88px); }
.mod > .hd.sub { padding-top: clamp(64px, 10vh, 120px); padding-bottom: 20px; }
.grid > div, .stats > div, .price, .info4 > div { padding-top: 0; }
.grid, .prices, .info4 { row-gap: 48px; }
.tbl li > * { padding-top: 22px; padding-bottom: 22px; }
.query { padding: clamp(40px, 7vh, 72px) 0; }
.con h2 { padding-top: clamp(80px, 14vh, 168px); }
.con .acts { margin-bottom: clamp(80px, 14vh, 168px); }
.centre { grid-column: 1 / -1; text-align: center; padding: clamp(64px, 12vh, 152px) 0 clamp(48px, 8vh, 96px); }
.centre h2 { font-size: clamp(36px, 4.6vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -.045em; max-width: 16ch; margin: 0 auto; }
.centre p { font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; margin: 28px auto 0; color: var(--grey); }

/* ==========================================================================
   THE PORTAL WINDOW (D-107): an example of the product in the brand. Sharp,
   flat, a brand-block band behind the prompt; the sidebar switches the view
   ========================================================================== */
.pw { grid-column: 1 / -1; border: 1px solid var(--ink); background: var(--white); max-width: 1240px; width: 100%; margin: 0 auto; text-align: left; }
.pw-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.pw-mark { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--grey); }
.pw-mark svg { width: 26px; height: auto; color: var(--oxblood); }
.pw-me { display: flex; align-items: center; gap: 10px; }
.pw-me i { width: 14px; height: 14px; box-shadow: inset 0 0 0 1px var(--ink); }
.pw-me b { width: 26px; height: 26px; display: grid; place-items: center; background: var(--tide); color: var(--white); font-size: 11px; }
.pw-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 560px; }
.pw-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--rule); }
.pw-nav { display: flex; align-items: center; gap: 12px; font: 500 14px/1 var(--sans); color: var(--ink); background: none; border: 0; border-radius: 0; padding: 11px 10px; text-align: left; cursor: pointer; }
.pw-nav::before { content: ""; width: 10px; height: 10px; flex: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.pw-nav:hover { background: #F3F5F4; }
.pw-nav.on { background: var(--ink); color: var(--white); }
.pw-nav.on::before { background: var(--coral); box-shadow: none; }
.pw-sp { margin: 22px 10px 8px; color: var(--grey); }
.pw-space { font-size: 14px; padding: 8px 10px; color: var(--grey); }
.pw-main { display: flex; flex-direction: column; min-width: 0; }
.pw-band { position: relative; height: 230px; background: var(--mist); overflow: hidden; display: grid; place-items: center; padding: 24px; }
.pw-art { position: absolute; inset: 0; }
.pw-art svg { width: 100%; height: 100%; display: block; }
.pw-ask { position: relative; width: min(560px, 100%); background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); padding: 14px 16px 12px; display: grid; gap: 8px; }
.pw-q { font-size: 15px; color: var(--grey); min-height: 3.1em; }
.pw-q::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--ink); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.pw-go { display: flex; justify-content: space-between; align-items: center; }
.pw-chip { padding: 5px 8px; box-shadow: inset 0 0 0 1px var(--rule-d); }
.pw-send { width: 26px; height: 26px; background: var(--ink); position: relative; }
.pw-send::after { content: ""; position: absolute; left: 9px; top: 8px; width: 8px; height: 8px; border-top: 2px solid var(--white); border-right: 2px solid var(--white); transform: rotate(-45deg); }
.pw-view { padding: 18px 22px 10px; }
.pw-view[hidden] { display: none; }
.pw-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.pw-tabs span { font-size: 13px; font-weight: 500; padding: 7px 10px; color: var(--grey); }
.pw-tabs span.on { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.pw-tabs i { font-style: normal; font-size: 11px; margin-left: 6px; padding: 1px 6px; background: #EEF1F0; }
.pw-head, .pw-rows li { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.1fr) 28px; gap: 16px; align-items: center; }
.pw-head { color: var(--grey); padding: 0 8px 10px; border-bottom: 1px solid var(--rule); }
.pw-rows li { padding: 12px 8px; border-bottom: 1px solid var(--rule); font-size: 13px; transition: background .15s steps(1); }
.pw-rows li:last-child { border-bottom: 0; }
.pw-rows li:hover { background: #F3F5F4; }
.pw-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pw-name .th { width: 34px; height: 34px; flex: none; }
.pw-name > span { min-width: 0; flex: 1; }   /* the title wrapper may shrink, so the long row title ellipses inside its column instead of running under the avatar (QA round three) */
.pw-name b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-name small { display: block; font-size: 12px; color: var(--grey); margin-top: 3px; }
.dot { display: inline-block; width: 6px; height: 6px; background: var(--moss); margin-right: 6px; vertical-align: 1px; }
.dot.off { background: none; box-shadow: inset 0 0 0 1px var(--grey); }
.pw-col { color: var(--grey); }
.pw-av { width: 24px; height: 24px; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--blush); color: var(--oxblood); }
.pw-av:empty { background: none; }
.pw-copies { grid-column: 1 / -1; max-width: 1240px; width: 100%; margin: 0 auto; padding-top: clamp(40px, 7vh, 72px); }
.pw-copy { display: grid; grid-template-columns: 1fr 1fr auto; gap: 40px; align-items: end; }
.pw-copy[hidden] { display: none; }
.pw-copy h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.pw-copy p { font-size: 15px; }
.pw-copy .pstat { margin: 0; padding: 0; text-align: right; }
.portal .stats { max-width: 1240px; width: 100%; margin: clamp(72px, 12vh, 140px) auto 0; }
@media (max-width: 960px) {
  .pw-body { grid-template-columns: 1fr; }
  .pw-side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 10px; scrollbar-width: none; }
  /* QA 2026-10-21: the strip scrolls; a fade at the right edge says so while areas sit off screen (site.js sets .more) */
  .pw-side.more { -webkit-mask-image: linear-gradient(90deg, var(--ink) 84%, transparent); mask-image: linear-gradient(90deg, var(--ink) 84%, transparent); }
  .pw-sp, .pw-space { display: none; }
  .pw-nav { flex: none; }
  .pw-head, .pw-rows li { grid-template-columns: minmax(0, 1fr) 24px; }
  .pw-head span:nth-child(2), .pw-head span:nth-child(3), .pw-rows .pw-col { display: none; }
  .pw-copy { grid-template-columns: 1fr; gap: 14px; }
  .pw-copy .pstat { text-align: left; }
  .centre { text-align: left; } .centre h2, .centre p { margin-left: 0; }
}
@media (max-width: 560px) { .pw-band { height: 200px; padding: 14px; } .pw-view { padding: 14px 12px 6px; } .pw { margin: 0 calc(-1 * var(--m)); width: auto; border-left: 0; border-right: 0; } }

/* ==========================================================================
   D-108 / FOLD 2 AS A PINNED STORY: the steps and the window stay on screen;
   scrolling walks the five areas (desktop); clicking jumps to one
   ========================================================================== */
:root { --navh: 49px; }
.pstage { grid-column: 1 / -1; position: relative; height: calc(100vh + var(--n) * 62vh); }
.pstick { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 3.5vw, 64px); align-items: center; }
.psteps { display: flex; flex-direction: column; }
.pstep { position: relative; padding: 4px 0 2px; }
.pstep-h { display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; cursor: pointer; padding: 12px 0; font: 600 clamp(20px, 1.7vw, 26px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--grey-d); transition: color .3s var(--ease); }
.pstep-h:hover { color: var(--ink); }
.pstep.on .pstep-h { color: var(--ink); }
.pstep-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.pstep-b > div { overflow: hidden; }
.pstep.on .pstep-b { grid-template-rows: 1fr; }
.pstep-b h3 { font-size: 15px; font-weight: 600; margin: 2px 0 6px; }
.pstep-b p { font-size: 14px; color: var(--grey); max-width: 40ch; }
.pstep-b .pstat { margin: 18px 0 16px; color: var(--ink); }
.pstep-b .fig { font-size: clamp(40px, 4vw, 64px); }
.pbar { display: block; height: 2px; background: var(--rule); }
.pbar b { display: block; height: 100%; width: 0; background: var(--coral); }
.pstick .pw { grid-column: auto; max-width: none; margin: 0; }
.pstick .pw-body { min-height: 0; }
.pstick .pw-band { height: clamp(150px, 22vh, 210px); }
.pstick .pw-rows li { padding: 10px 8px; }
.pw-view.gen .pw-rows li { animation: rowin .55s var(--ease) both; }
.pw-view.gen .pw-rows li:nth-child(2) { animation-delay: .12s; }
.pw-view.gen .pw-rows li:nth-child(3) { animation-delay: .24s; }
.pw-view.gen .pw-rows li:nth-child(4) { animation-delay: .36s; }
@keyframes rowin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pw-view.gen .pw-rows li:first-child { box-shadow: inset 3px 0 0 var(--coral); }
.portal .stats { margin-top: clamp(40px, 8vh, 96px); }
@media (max-width: 960px), (max-height: 620px) {
  .pstage { height: auto; }
  .pstick { position: static; height: auto; grid-template-columns: 1fr; gap: 28px; }
  .pbar { display: none; }
}

/* ==========================================================================
   D-108 / FOLD 3: points stepping across a dark page, Sil drawn in words
   ========================================================================== */
.built > .hd { border-bottom: 0; }
.bwrap { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, 1fr); min-height: clamp(720px, 110vh, 1080px); }
.tart { position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--m)); width: 62%; pointer-events: auto; }
.tart canvas { width: 100%; height: 100%; display: block; }
.btext { grid-column: 1 / span 7; position: relative; z-index: 1; padding: clamp(56px, 10vh, 128px) 0 clamp(40px, 6vh, 80px); pointer-events: none; }
.btext a, .btext button { pointer-events: auto; }
.btext h2 { font-size: clamp(36px, 4.6vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -.045em; max-width: 13ch; }
.blede { font-size: clamp(16px, 1.3vw, 19px); max-width: 46ch; margin-top: 28px; color: var(--grey-d); }
.stagger { margin-top: clamp(56px, 9vh, 104px); display: flex; flex-direction: column; gap: clamp(36px, 6vh, 64px); }
.stagger li { margin-left: calc(var(--k) * clamp(40px, 9vw, 150px)); max-width: 36ch; }
.stagger h3 { font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.stagger p { font-size: 16px; color: var(--grey-d); }
.stagger p b { color: var(--white); font-weight: 600; }
@media (max-width: 960px) {
  .bwrap { min-height: 0; display: block; }
  .tart { position: relative; right: auto; width: auto; height: 340px; margin: 0 calc(-1 * var(--m)); }
  .btext { padding-top: 24px; }
  .stagger li { margin-left: calc(var(--k) * 18px); }
}

/* ==========================================================================
   NO CODED LABELS (D-109, Nathan: "remove all bits like it, dead AI give
   away"): the [NN] kickers, section label rows, field captions and
   bracketed footer heads are gone from the markup; what labels remain
   (stat captions, form fields, the example portal's interface, statuses)
   are set as ordinary sentence-case text, not spaced capitals
   ========================================================================== */
.lab { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.bar { font-size: 12px; justify-content: flex-end; gap: 28px; }
.mod > .hd, .con > .hd { display: none; }
.fh { display: block; font-size: 13px; color: var(--grey); }
.mod.dark .fh, .foot .fh { color: var(--grey-d); }
.grid .fh { margin-bottom: 10px; }
.pname { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.stagger h3 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.02em; text-transform: none; color: var(--white); }
.stagger p b { display: block; color: var(--grey-d); font-weight: 400; }
.gtitle { grid-column: 1 / -1; font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.03em; padding: clamp(64px, 10vh, 120px) 0 20px; }
.slot { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.tbl.rules .k { font-weight: 600; }
.mrow { gap: 0; }

/* D-110: fold 3's word picture is a full-height panel that sticks while the
   fold scrolls past; Sil is drawn smaller inside it */
.bwrap { align-items: start; }
.tart { position: sticky; top: var(--navh); grid-column: 6 / -1; grid-row: 1; height: calc(100vh - var(--navh)); width: auto; right: auto; bottom: auto; margin-right: calc(-1 * var(--m)); }
.btext { grid-row: 1; }
@media (max-width: 960px) {
  .tart { position: relative; top: auto; height: 340px; margin: 0 calc(-1 * var(--m)); }
}

/* D-111: the word panel is narrower (the last four columns) and the text
   keeps to the first six, so the two never overlap; a smaller step */
.tart { grid-column: 7 / -1; }
.btext { grid-column: 1 / span 6; }
.stagger li { margin-left: calc(var(--k) * clamp(20px, 3.4vw, 56px)); max-width: 34ch; }

/* D-112: the copy runs right up to the word panel (each point is as wide as
   its step leaves it, ending a gap short of the panel), the opening phrase
   runs on in the same paragraph, and the panel keeps its side-by-side,
   sticky layout down to 761px wide */
.btext { padding-right: clamp(28px, 3.4vw, 56px); }
.stagger li { max-width: none; }
.stagger p b { display: inline; color: var(--white); font-weight: 500; }
.blede { max-width: none; }
@media (max-width: 960px) and (min-width: 761px) {
  .bwrap { display: grid; min-height: clamp(720px, 110vh, 1080px); }
  .tart { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); margin: 0 calc(-1 * var(--m)) 0 0; grid-column: 7 / -1; }
  .btext { grid-column: 1 / span 6; padding-top: clamp(56px, 10vh, 128px); }
  .stagger li { margin-left: calc(var(--k) * 16px); }
}

/* D-113: the copy goes back to a readable measure; the panel moves left to
   meet it instead (columns 6 to 12) */
.stagger li { max-width: 36ch; margin-left: calc(var(--k) * clamp(16px, 2.6vw, 40px)); }
.blede { max-width: 46ch; }
.btext { grid-column: 1 / span 5; padding-right: 24px; }
.tart { grid-column: 6 / -1; }
@media (max-width: 960px) and (min-width: 761px) { .tart { grid-column: 7 / -1; } .btext { grid-column: 1 / span 6; } }

/* D-114: the four points share one width, set so the last step ends at the
   column edge; the word field's left edge fades in, in flat steps (canvas) */
.stagger { --step: clamp(16px, 2.6vw, 40px); }
.stagger li { margin-left: calc(var(--k) * var(--step)); width: calc(100% - 3 * var(--step)); max-width: none; }
@media (max-width: 760px) { .stagger { --step: 14px; } }

/* ==========================================================================
   D-116 / FOLD 2 CENTRED: the area row with story-style progress bars sits
   above a centred window; the current area's copy is a black card over the
   window's bottom-right corner, sliding in fresh for each area
   ========================================================================== */
.pstick { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: clamp(16px, 2.6vh, 28px); }
.pseg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(760px, 100%); }
.pseg-b { display: flex; flex-direction: column; gap: 10px; text-align: left; background: none; border: 0; border-radius: 0; padding: 0 0 4px; cursor: pointer; font: 600 15px/1 var(--sans); letter-spacing: -.01em; color: var(--grey-d); transition: color .25s var(--ease); }
.pseg-b:hover, .pseg-b.on { color: var(--ink); }
.pseg-b .pbar { display: block; height: 2px; background: var(--rule); }
.pseg-b .pbar span { display: block; height: 100%; width: 0; background: var(--coral); }
.pwrap { position: relative; width: min(1120px, calc(100% - 48px)); }
.pstick .pw { width: 100%; }
.pstick .pw-band { height: clamp(116px, 19vh, 196px); }
.pstick .pw-rows li { padding: 9px 8px; }
.pcard { position: absolute; right: -40px; bottom: -36px; width: min(360px, 42%); background: var(--ink); color: var(--white); padding: 22px 24px 20px; z-index: 3; }
.pc h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.pc p { font-size: 14px; color: var(--grey-d); margin-top: 8px; }
.pc .pstat { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rule-d); color: var(--white); display: flex; align-items: baseline; gap: 12px; }
.pc .fig { font-size: 40px; }
.pc .pstat span { margin: 0; color: var(--grey-d); }
.pc.in { animation: cardin .5s var(--ease) both; }
@keyframes cardin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-height: 760px) and (min-width: 961px) { .pstick .pw-rows li:nth-child(4) { display: none; } .pstick .pw-band { height: 108px; } }
@media (max-width: 960px), (max-height: 620px) {
  .pwrap { width: 100%; }
  .pcard { position: static; width: auto; margin-top: 0; }
  .pseg { width: 100%; overflow-x: auto; grid-template-columns: repeat(5, minmax(96px, 1fr)); scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) { .pc.in { animation: none; } }

/* D-117: the window and the area row run the full content width, so their
   edges line up with the page's side padding like every other section */
.pwrap { width: 100%; }
.pseg { width: 100%; }
.pcard { right: 28px; bottom: -32px; }

/* ==========================================================================
   NAV: Anna's islands (D-103), after passionfroot.me, brought into the
   D-104 site on Anna's word (2026-10-11). Two floating rounded blocks over a
   see-through bar: the wordmark and three links left, Send enquiry and Menu
   right. Over a dark section each block turns to frosted glass; site.js sets
   .on-dark per block. BRAND EXCEPTION: rounded corners and blur (the
   guidelines say radius 0, no blur). Replaces the .bar strip and .nav grid.
   ========================================================================== */
.hb { position: sticky; top: 0; z-index: 30; padding: 12px var(--m) 0; pointer-events: none; }
.hb-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; }
.hb-isle { pointer-events: auto; display: flex; align-items: center; gap: 18px; min-height: 52px; padding: 6px 6px 6px 18px; background: var(--white); color: var(--ink); border: 1px solid rgba(15, 27, 25, .12); border-radius: 14px; transition: background .35s var(--ease), border-color .35s var(--ease); }
.hb-isle-r { padding: 6px; gap: 6px; }
.hb .wm { font-size: 16px; color: var(--ink); transition: color .35s var(--ease); display: inline-block; padding: 13px 0; margin: -13px 0; }   /* the whole island's height taps */
.hb-nav { position: relative; display: flex; gap: 2px; }
.hb-link { position: relative; z-index: 1; font: 500 15px/1 var(--sans); padding: 12px 14px; text-decoration: none; color: var(--ink); border-radius: 9px; transition: color .35s var(--ease); }
.hb-ind { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--coral); border-radius: 9px; z-index: 0; transition: left .45s var(--ease), width .45s var(--ease); }
.hb-cta { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sans); padding: 12px 16px; text-decoration: none; background: var(--oxblood); color: var(--white); border-radius: 9px; transition: background .3s var(--ease), color .3s var(--ease); }
.hb-cta:hover, .hb-cta[aria-current] { background: var(--coral); color: var(--ink); }
.hb-arr { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .3s var(--ease); }
.hb-cta:hover .hb-arr { transform: translateX(3px); }
.hb-menu { display: none; font: 500 14px/1 var(--sans); background: none; color: var(--ink); border: 1px solid var(--ink); border-radius: 9px; padding: 11px 16px; cursor: pointer; transition: color .35s var(--ease), border-color .35s var(--ease), background .3s var(--ease); }
.hb-menu:hover { background: var(--ink); color: var(--white); }
/* glass over dark sections */
.hb-isle.on-dark { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
/* phones (D-148): the dark islands without the live blur, which phones redraw badly while scrolling and
   which made the page catch each time the islands changed over a dark section; a steady Ink glass instead */
@media (max-width: 760px) { .hb-isle.on-dark { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(15, 27, 25, .9); } }   /* .62 let the text below read through the wordmark and Menu (QA 2026-10-21) */
.hb-isle.on-dark .wm, .hb-isle.on-dark .hb-link { color: var(--white); }
.hb-isle.on-dark .hb-menu { color: var(--white); border-color: var(--white); }
.hb-isle.on-dark .hb-menu:hover { background: var(--white); color: var(--ink); }
/* the link under the Coral block reads Ink; the current page's link goes back to
   its block's text colour while another link holds the Coral block */
.hb-link[aria-current], .hb-link.hot, .hb-isle.on-dark .hb-link[aria-current], .hb-isle.on-dark .hb-link.hot { color: var(--ink); }
.hb-nav:has(.hot) .hb-link[aria-current]:not(.hot) { color: var(--ink); }
.hb-isle.on-dark .hb-nav:has(.hot) .hb-link[aria-current]:not(.hot) { color: var(--white); }
/* the hero filled the screen under the old 82px of bar and nav */
.hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
@media (max-width: 860px) {
  .hb-nav { display: none; }
  .hb-isle { padding-right: 18px; }
  .hb-isle-r { padding: 6px; }
  .hb-menu { display: inline-block; }
}
@media (max-width: 520px) { .hb-cta { display: none; } }


/* ==========================================================================
   HOME HERO: "Sil builds the system" (Anna, 2026-10-11), concept 2 of
   _process/hero-concepts-2026-10-11. Replaces the cell field on the home
   page only. Sil is drawn from the guidelines vectors, never rasterised.
   The brand's pieces (headline, type, palette, mark, shapes, copy) float
   loose and can be dragged; Sil assembles them into a deck, a post or a
   page. Prefixed cb- so nothing collides. Rounded corners and soft shadows
   are part of Anna's nav exception.
   ========================================================================== */
.cb-board { position: absolute; inset: 0 0 64px; }
.cb-frame { position: absolute; border: 1px solid rgba(15, 27, 25, .14); background: var(--white); border-radius: 6px; opacity: 0; transform: scale(.97); transition: all .7s var(--ease); }
.cb-board.cb-built .cb-frame { opacity: 1; transform: none; }
.cb-pc { position: absolute; transition: left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), transform .8s var(--ease), border-radius .8s var(--ease), font-size .8s var(--ease), box-shadow .3s; transition-delay: calc(var(--d, 0) * 45ms); user-select: none; }
.cb-board:not(.cb-built) .cb-pc { cursor: grab; box-shadow: 0 1px 0 rgba(15, 27, 25, .04), 0 10px 30px -12px rgba(15, 27, 25, .25); }
.cb-board:not(.cb-built) .cb-pc:active { cursor: grabbing; }
.cb-pc.cb-dragging { transition: none !important; z-index: 5; }
.cb-pc .cb-tag { position: absolute; left: 0; top: -20px; font-size: 11px; color: var(--grey); white-space: nowrap; transition: opacity .3s; }
.cb-board.cb-built .cb-pc .cb-tag { opacity: 0; }
.cb-p-type { z-index: 3; background: var(--white); border-radius: 10px; display: grid; place-items: center; font-family: var(--serif); color: var(--ink); overflow: hidden; }
.cb-p-head { z-index: 3; background: transparent; color: var(--ink); font-weight: 600; letter-spacing: -.03em; line-height: 1; display: flex; align-items: flex-end; }
.cb-board:not(.cb-built) .cb-p-head { background: var(--white); border-radius: 10px; padding: 12px 14px; align-items: center; }
.cb-p-sw { display: flex; gap: 0; border-radius: 10px; overflow: hidden; }
.cb-p-sw i { flex: 1; }
.cb-p-mark { background: var(--white); border-radius: 10px; display: grid; place-items: center; color: var(--coral); }
.cb-p-mark svg { width: 62%; }
.cb-p-shape { background: var(--mist); border-radius: 10px; overflow: hidden; }
.cb-p-shape svg { width: 100%; height: 100%; display: block; }
.cb-p-body { background: var(--white); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.cb-p-body i { display: block; height: 5px; border-radius: 3px; background: rgba(15, 27, 25, .16); }
.cb-p-body i:last-child { width: 60%; }
.cb-sil { position: absolute; width: 21%; color: var(--coral); transition: left .9s var(--ease), top .9s var(--ease), transform .4s var(--ease); z-index: 4; cursor: pointer; }
.cb-sil svg { display: block; width: 100%; height: auto; }
.cb-sil.cb-hop { animation: cb-hop .5s var(--ease); }
@keyframes cb-hop { 40% { transform: translateY(-14%) scale(1.04, .97); } }
.cb-ctrl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cb-seg { display: inline-flex; background: rgba(15, 27, 25, .05); border-radius: 12px; padding: 4px; gap: 2px; }
.cb-seg button { font: 500 13px/1 var(--sans); border: 0; background: none; color: var(--ink); padding: 10px 14px; border-radius: 9px; cursor: pointer; }
.cb-seg button[aria-pressed="true"] { background: var(--white); box-shadow: 0 1px 2px rgba(15, 27, 25, .12); }
.cb-check { position: absolute; font-size: 12px; background: var(--ink); color: var(--white); padding: 7px 10px; border-radius: 8px; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease), left 0s .3s, top 0s .3s; white-space: nowrap; z-index: 6; }
.cb-check::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--coral); margin-right: 8px; vertical-align: 1px; }
.cb-board.cb-built .cb-check.cb-ok { opacity: 1; transform: none; }

.cb-stage { grid-column: 7 / span 6; position: relative; align-self: center; height: min(72vh, 640px); margin: 48px 0; }
.cb-board .cb-pc, .cb-seg button, .cb-check { font-family: var(--sans); }
.cb-p-type { font-family: var(--serif); }
/* stacks at the same width as the hero copy (960px), centred under it */
@media (max-width: 960px) { .cb-stage { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: none; height: clamp(440px, 72vw, 600px); margin: 8px 0 48px; } }   /* fills the column, so the chip bar shares the headline's edges (QA 2026-10-21; was capped at 720px) */
.cb-hint { font-size: 12px; color: var(--grey); }
@media (hover: hover) and (pointer: fine) { .cb-board:not(.cb-built) .cb-pc { touch-action: none; } }
@media (pointer: coarse) { .cb-board:not(.cb-built) .cb-pc { cursor: default; } }
/* deck and web page read as different things (Anna, 2026-10-11): the deck is a
   16:9 title slide on warm paper, image bleeding off its edge, with a slide
   counter and a strip of thumbnails; the web page sits in a browser window */
.cb-chrome, .cb-count, .cb-thumbs { opacity: 0; transition: opacity .4s var(--ease) .5s; pointer-events: none; }
.cb-chrome { position: absolute; left: 0; right: 0; top: 0; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid rgba(15, 27, 25, .1); background: #FAFAF8; border-radius: 6px 6px 0 0; }
.cb-chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(15, 27, 25, .16); }
.cb-chrome b { margin: 0 auto; font: 500 11px/1 var(--sans); color: var(--grey); background: rgba(15, 27, 25, .05); padding: 5px 40px; border-radius: 6px; }
.cb-m-web .cb-chrome { opacity: 1; }
.cb-count { position: absolute; left: 26%; bottom: 6%; font: 500 11px/1 var(--sans); color: var(--grey); }
.cb-m-deck .cb-count { opacity: 1; }
.cb-m-deck .cb-frame { background: #F4F1EC; border-radius: 4px; overflow: hidden; }
.cb-m-deck .cb-p-shape { border-radius: 0; }
.cb-m-deck .cb-p-head { font-size: inherit; }
.cb-thumbs { position: absolute; left: 4%; top: 63%; width: 56%; display: flex; gap: 2%; }
.cb-thumbs i { flex: 1; aspect-ratio: 16 / 9; border-radius: 3px; background: #F4F1EC; box-shadow: inset 0 0 0 1px rgba(15, 27, 25, .12); }
.cb-thumbs i:nth-child(2) { background: var(--ink); } .cb-thumbs i:nth-child(3) { background: var(--mist); } .cb-thumbs i:nth-child(4) { background: var(--oxblood); }
.cb-thumbs i.on { box-shadow: 0 0 0 2px var(--coral); }
.cb-m-deck .cb-thumbs { opacity: 1; }
.cb-m-deck .cb-p-type, .cb-m-deck .cb-p-body, .cb-m-deck .cb-p-mark { background: transparent; }
/* background themes (Anna, 2026-10-11): the deck's thumbnails set the ground
   for every output; type, copy lines and the image panel follow it */
.cb-built .cb-frame { background: var(--cb-bg, #F4F1EC); transition: all .7s var(--ease), background .4s var(--ease); }
.cb-m-deck .cb-frame { background: var(--cb-bg, #F4F1EC); }
.cb-built .cb-p-head, .cb-built .cb-p-type { color: var(--cb-fg, #0F1B19); transition-property: left, top, width, height, transform, border-radius, font-size, color; }
.cb-built .cb-p-type, .cb-built .cb-p-body, .cb-built .cb-p-mark { background: transparent; box-shadow: none; }
.cb-built .cb-p-body i { background: var(--cb-fg, #0F1B19); opacity: .22; }
.cb-built .cb-p-shape { background: var(--cb-panel, #CAE1DC); }
.cb-built .cb-count { color: var(--cb-fg, #0F1B19); opacity: .55; }
.cb-m-deck .cb-thumbs { pointer-events: auto; }
.cb-th { flex: 1; aspect-ratio: 16 / 9; border-radius: 3px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(15, 27, 25, .12); transition: transform .2s var(--ease), box-shadow .2s; }
.cb-th:hover { transform: translateY(-2px); }
.cb-th:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cb-th[data-t="paper"] { background: #F4F1EC; } .cb-th[data-t="ink"] { background: #0F1B19; } .cb-th[data-t="mist"] { background: #CAE1DC; }
.cb-th[data-t="oxblood"] { background: #5E0E09; } .cb-th[data-t="blush"] { background: #F7A398; }
.cb-th.on { box-shadow: 0 0 0 2px var(--coral); }
/* built outputs line up (Anna, 2026-10-11): every piece starts on the same
   left edge, copy lines are not indented, the mark sits on the left of its
   box and the type specimen on the right, both on one centre line; the slide
   counter belongs to the deck only */
.cb-built .cb-count { opacity: 0; }
.cb-m-deck .cb-count { opacity: .55; }
.cb-built .cb-p-body { padding: 0; gap: 7px; }
.cb-built .cb-p-mark { place-items: center start; }
.cb-built .cb-p-mark svg { width: 100%; max-height: 100%; }
.cb-board .cb-p-type { font-family: var(--serif); }
.cb-built .cb-p-type { place-items: center start; line-height: 1; }
.cb-m-post .cb-p-type { place-items: center end; }
.cb-built .cb-p-sw { border-radius: 999px; }
.cb-m-post .cb-p-shape { border-radius: 8px; }
/* a chip that matches the background still shows: each gets a faint ring in the type colour */
.cb-built .cb-p-sw i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cb-fg, #0F1B19) 22%, transparent); }
/* the controls read as a prompt, as the portal does (Anna, 2026-10-12; concept
   B of _process/hero-controls-2026-10-12): "Sil, make a" then the outputs as
   chips, and Start over */
.cb-board { bottom: 76px; }
.cb-ask { height: 60px; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; background: var(--white); border: 1px solid rgba(15, 27, 25, .12); border-radius: 16px; box-shadow: 0 14px 30px -22px rgba(15, 27, 25, .5); }
.sil-ask { font: 500 15px/1 var(--sans); color: var(--grey); white-space: nowrap; }
.cb-ask .cb-seg { flex: 1; display: flex; background: none; padding: 0; gap: 4px; }
.cb-ask .cb-seg button { font-size: 14px; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(15, 27, 25, .14); background: var(--white); box-shadow: none; }
.cb-ask .cb-seg button:hover { border-color: var(--ink); }
.cb-ask .cb-seg button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); box-shadow: none; }
.cb-ask .cb-seg button[data-m="loose"] { margin-left: auto; border-color: transparent; color: var(--grey); }
.cb-ask .cb-seg button[data-m="loose"]:hover { color: var(--ink); }
.cb-ask .cb-seg button[data-m="loose"][aria-pressed="true"] { background: rgba(15, 27, 25, .06); color: var(--ink); border-color: transparent; }
@media (max-width: 560px) { .sil-ask { display: none; } .cb-ask { padding-left: 6px; } .cb-ask .cb-seg button { padding: 10px 11px; font-size: 13px; } }

/* ==========================================================================
   PRICING (Anna, 2026-10-12): concept 2 of _process/pricing-concepts-2026-10-12.
   A row of tabs picks one offer; one panel in a light wash of a brand colour
   (Blush, Mist, Tide, Oxblood over white) holds a small white object that
   shows the offer, and beside it the price, description and inclusions.
   Sil peeks over the panel. Prefixed pp-. Rounded corners and soft shadows
   are part of Anna's exception (D-120).
   ========================================================================== */
.pp-head { grid-column: 1 / -1; text-align: center; max-width: 820px; margin: 0 auto; }
.pp-head h2, .pp-head p { text-wrap: balance; }   /* DRAFT 2026-10-14: no one-word last line */
.pp-head h2 { grid-column: auto; }
.pp-head p { color: var(--grey); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; max-width: 56ch; margin: 18px auto 0; }
.pp-tabs { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 40px; }
.pp-seg { display: inline-flex; background: #F2F2EF; border-radius: 14px; padding: 4px; gap: 2px; flex-wrap: wrap; justify-content: center; }
.pp-tab { font: 500 14px/1 var(--sans); border: 0; background: none; color: var(--ink); padding: 12px 16px; border-radius: 10px; cursor: pointer; }
.pp-tab[aria-pressed="true"] { background: var(--white); box-shadow: 0 1px 2px rgba(15, 27, 25, .12); }
.pp-panel { grid-column: 1 / -1; position: relative; width: 100%; max-width: 1100px; margin: 28px auto 0; border-radius: 26px; padding: clamp(32px, 5vw, 64px); transition: background .6s var(--ease); }
.pp-pane { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pp-pane.on { display: grid; }
.no-js .pp-pane, html:not(.js) .pp-pane { display: grid; padding: 24px 0; }
.pp-objwrap { display: grid; place-items: center; min-height: 320px; }
.pp-pane.on .pp-objwrap > * { animation: pp-pop .55s var(--ease); }
@keyframes pp-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.pp-info h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3vw, 44px); letter-spacing: -.02em; }
.pp-pre { font-size: 13px; color: var(--grey); margin-top: 18px; }
.pp-amt { font-size: clamp(36px, 3.4vw, 54px); font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-top: 6px; }
.pp-d { color: var(--grey); font-size: 16px; line-height: 1.55; margin-top: 18px; max-width: 42ch; }
.pp-info ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.pp-info li { display: flex; gap: 10px; align-items: center; font-size: 15px; border: 0; padding: 0; }
.pp-info li .pp-ck { color: var(--coral); }
.pp-info .btn { display: inline-block; margin-top: 30px; border-radius: 10px; }
.pp-ck { width: 12px; height: 12px; flex: none; }
.pp-peek { position: absolute; right: 7%; top: -46px; width: 96px; color: var(--coral); transition: transform .5s var(--ease); }
.pp-peek svg { display: block; width: 100%; height: auto; }
.pp-panel:hover .pp-peek { transform: translateY(-6px) rotate(-4deg); }
.pp-note { grid-column: 1 / -1; text-align: center; color: var(--grey); font-size: 13px; margin-top: 24px; }
/* D-236: the starter offer note on the Brand and Website panels */
.pp-offer { margin-top: 18px; max-width: 44ch; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.5; color: var(--grey); }
.pp-offer b { color: var(--ink); font-weight: 600; }
.pp-offer a { display: inline-block; margin-top: 4px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the white objects */
.pp-o { background: var(--white); border-radius: 16px; box-shadow: 0 1px 0 rgba(15, 27, 25, .04), 0 18px 40px -26px rgba(15, 27, 25, .35); width: min(270px, 100%); min-height: 270px; padding: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; position: relative; }
.pp-opre { font-size: 12px; color: var(--grey); margin-top: 4px; }
.pp-oamt { font-size: 34px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.pp-mark { width: 52px; color: var(--coral); position: absolute; left: 22px; top: 22px; }
.pp-aa { position: absolute; right: 22px; top: 18px; font-family: var(--serif); font-size: 24px; }
.pp-chips { display: flex; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; margin-top: 30px; }
.pp-chips i { flex: 1; }
.pp-o-starter .pp-chips { margin-top: 64px; height: 10px; } .pp-o-starter .pp-bar { margin-top: 10px; height: 26px; border: 1px solid rgba(15, 27, 25, .08); border-radius: 6px; } .pp-o-starter .pp-oamt { margin-top: 2px; }
.pp-o-web { padding: 0 0 22px; overflow: hidden; justify-content: flex-start; }
.pp-bar { display: flex; gap: 4px; align-items: center; width: 100%; height: 30px; padding: 0 12px; border-bottom: 1px solid rgba(15, 27, 25, .08); background: #FAFAF8; }
.pp-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(15, 27, 25, .18); }
.pp-bar b { margin: 0 auto; font: 500 10px/1 var(--sans); color: var(--grey); background: rgba(15, 27, 25, .05); padding: 5px 18px; border-radius: 5px; }
.pp-pg { position: relative; display: block; width: 100%; height: 104px; padding: 16px 18px; text-align: left; }
.pp-pg > span { display: block; border-radius: 3px; }
.pp-l1 { width: 52%; height: 10px; background: var(--ink); } .pp-l2 { width: 38%; height: 6px; background: rgba(15, 27, 25, .18); margin-top: 9px; }
.pp-hero { position: absolute; right: 18px; top: 16px; width: 34%; height: 70px; background: var(--mist); }
.pp-hero::after { content: ""; position: absolute; right: 10px; top: 10px; width: 34%; height: 50%; background: var(--coral); }
.pp-msg { align-self: flex-end; background: var(--ink); color: var(--white); font-size: 14px; line-height: 1.35; padding: 10px 13px; border-radius: 14px 14px 4px 14px; text-align: left; max-width: 90%; }
.pp-ok { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 500; background: rgba(15, 27, 25, .06); padding: 6px 9px; border-radius: 7px; }
.pp-stack { position: relative; width: min(340px, 100%); height: 270px; display: grid; place-items: center; }
.pp-ghost { position: absolute; top: 26px; width: 52%; min-height: 218px; opacity: .55; box-shadow: none; }
.pp-ghost.l { left: 0; } .pp-ghost.r { right: 0; }
.pp-ghost b { font-family: var(--serif); font-weight: 400; color: var(--grey); font-size: 15px; }
.pp-ghost.l b { margin-right: 54%; } .pp-ghost.r b { margin-left: 54%; }
.pp-o-portal { z-index: 1; }
.pp-ask { font-size: 14px; color: var(--grey); border: 1px solid rgba(15, 27, 25, .14); border-radius: 999px; padding: 8px 12px; }
.pp-ask b { color: var(--white); background: var(--ink); font-weight: 500; padding: 3px 8px; border-radius: 999px; margin-left: 2px; }
@media (max-width: 820px) { .pp-pane { grid-template-columns: 1fr; } .pp-objwrap { min-height: 290px; } .pp-peek { width: 76px; top: -36px; } }
/* the panel washes: brand colours mixed over white, so no new colour is introduced */
.pp-panel[data-tint="coral"] { background: color-mix(in srgb, var(--coral) 14%, var(--white)); }   /* D-221: the starter pack */
.pp-panel[data-tint="blush"] { background: color-mix(in srgb, var(--blush) 30%, var(--white)); }
.pp-panel[data-tint="mist"] { background: color-mix(in srgb, var(--mist) 50%, var(--white)); }
.pp-panel[data-tint="tide"] { background: color-mix(in srgb, var(--tide) 14%, var(--white)); }
.pp-panel[data-tint="oxblood"] { background: color-mix(in srgb, var(--oxblood) 11%, var(--white)); }
/* pricing sizing matches the concept (Anna, 2026-10-12): its own headline
   scale and air above and below, since the heading sits in .pp-head rather
   than being a direct .mod > h2 */
.mod.pp { padding-top: clamp(72px, 12vh, 140px); padding-bottom: clamp(72px, 12vh, 140px); }
.pp-head h2 { padding: 0; font-size: clamp(34px, 4vw, 60px); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; }
.pp-head h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
/* "Most popular" on the creative portal (Anna, 2026-10-12), the way SaaS
   pricing flags its lead plan: a Coral badge on the tab and on the panel,
   and a Coral edge round the panel while it shows */
.pp-tab[data-pop] { display: inline-flex; align-items: center; gap: 8px; }
.pp-tab[data-pop]::after { content: "Most popular"; font: 600 10.5px/1 var(--sans); letter-spacing: .01em; background: var(--coral); color: var(--white); padding: 5px 7px; border-radius: 999px; }
.pp-badge { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--sans); background: var(--coral); color: var(--white); padding: 7px 10px; border-radius: 999px; margin-bottom: 16px; }
.pp-panel { transition: background .6s var(--ease), box-shadow .4s var(--ease); }
.pp-panel[data-tint="oxblood"] { box-shadow: inset 0 0 0 2px var(--coral); }
@media (max-width: 560px) { .pp-tab[data-pop]::after { content: "Popular"; } }
/* "Popular" (Anna, 2026-10-12): the tab badge sits on the tab's top corner
   like a ribbon instead of inside the button, so the tab matches the others */
.pp-tab[data-pop] { display: inline-block; position: relative; }
.pp-tab[data-pop]::after { content: "Popular"; position: absolute; right: -6px; top: -12px; font: 600 10px/1 var(--sans); letter-spacing: .01em; background: var(--coral); color: var(--white); padding: 5px 7px; border-radius: 999px; box-shadow: 0 0 0 2px var(--white); pointer-events: none; }
.pp-seg { overflow: visible; }
.pp-tabs { padding-top: 6px; }
@media (max-width: 560px) { .pp-tab[data-pop]::after { content: "Popular"; } }

/* ==========================================================================
   HOW IT IS BUILT, the points (Anna, 2026-10-12; concept C of
   _process/built-concepts-2-2026-10-12). Replaces the D-108 stagger: an
   editorial list, text only. A short Coral rule, a serif title at about half
   the section headline so it never competes with it, the lead line in italic
   serif, the text in grey, and generous space between points. The word field
   with Sil, the headline, the lede and the guarantees are unchanged.
   ========================================================================== */
.btext .bl-list { list-style: none; padding: 0; max-width: min(540px, 100%); margin-top: clamp(64px, 10vh, 120px); display: flex; flex-direction: column; gap: clamp(64px, 11vh, 120px); }
.bl-list li::before { content: ""; display: block; width: 28px; height: 2px; background: var(--coral); margin-bottom: 26px; }
.bl-list h3 { font-family: var(--serif); font-weight: 400; color: var(--white); text-transform: none; letter-spacing: -.02em; margin: 0; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.05; }
.bl-sub { font-family: var(--serif); font-style: italic; color: var(--white); font-size: clamp(17px, 1.25vw, 19px); margin-top: 12px; }
.bl-d { color: var(--grey-d); font-size: 16px; line-height: 1.6; margin-top: 12px; max-width: 42ch; }
/* a little more room after "Sil, make a" (Anna, 2026-10-12): 8px gap + 6px = 14px */
.sil-ask { margin-right: 6px; }

/* ==========================================================================
   WHAT WE GUARANTEE (Anna, 2026-10-12; concept 2 of
   _process/guarantees-concepts-2026-10-12, after Linear): the five
   guarantees as tall columns with hairlines between them, a small
   Guaranteed tag at the top and the promise as a statement at the foot.
   Static: no sticky or scroll effects, since the fold above has one.
   Replaces the three-column .tbl. Prefixed gq-.
   ========================================================================== */
.gq { grid-column: 1 / -1; padding: clamp(80px, 12vh, 140px) 0 clamp(40px, 6vh, 64px); }
.gq-title { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.03em; }
.gq-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--grey-d); }
.gq-tag i { width: 6px; height: 6px; background: var(--coral); }
.gq-cols { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .12); }
.gq-cols li { display: flex; flex-direction: column; min-height: clamp(280px, 34vh, 360px); padding: 22px 22px 6px; border-left: 1px solid rgba(255, 255, 255, .12); }
.gq-cols li:first-child { border-left: 0; padding-left: 0; }
.gq-cols h4 { margin-top: auto; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--white); }
.gq-cols p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--grey-d); }
@media (max-width: 1100px) { .gq-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gq-cols li:nth-child(4) { border-left: 0; padding-left: 0; } .gq-cols li { min-height: 240px; border-bottom: 1px solid rgba(255, 255, 255, .12); } }
@media (max-width: 640px) { .gq-cols { grid-template-columns: 1fr; } .gq-cols li { border-left: 0; padding-left: 0; min-height: 0; padding-bottom: 26px; } .gq-cols h4 { margin-top: 28px; } }

/* guarantees, aligned and interactive (Anna, 2026-10-12, after tines.com):
   every column has the same padding, the heading sits on the same left line,
   and a shared row grid (subgrid) puts every tag, title and sentence on the
   same line whatever their length. A soft spotlight follows the pointer, a
   Coral bar slides along the top to the column you are on, that column
   brightens and the others step back. Touch and keyboard do the same. */
.gq-title { padding-left: 24px; }
.gq-cols { position: relative; grid-template-rows: auto minmax(clamp(90px, 14vh, 150px), 1fr) auto auto; isolation: isolate; }
.gq-cols li, .gq-cols li:first-child { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; min-height: 0; padding: 24px 24px 30px; border-left: 1px solid rgba(255, 255, 255, .12); outline: none; transition: opacity .35s var(--ease), background .35s var(--ease); cursor: default; }
.gq-cols li:first-child { border-left: 0; }
.gq-cols .gq-tag { grid-row: 1; align-self: start; transition: color .3s var(--ease); }
.gq-cols .gq-tag i { transition: transform .35s var(--ease); }
.gq-cols h4 { grid-row: 3; margin-top: 0; align-self: start; }  /* titles start on one line even when one wraps further */
.gq-cols p { grid-row: 4; margin-top: 12px; transition: color .3s var(--ease); }
/* spotlight and the sliding bar (placed by site.js) */
.gq-cols::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(202, 225, 220, .09), transparent 60%); }
.gq-cols.live::after { opacity: 1; }
.gq-bar { position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--coral); transition: left .45s var(--ease), width .45s var(--ease), opacity .3s; opacity: 0; pointer-events: none; }
.gq-cols.live .gq-bar { opacity: 1; }
.gq-cols.live li { opacity: .5; }
.gq-cols.live li.on { opacity: 1; background: rgba(255, 255, 255, .025); }
.gq-cols li.on .gq-tag { color: var(--white); }
.gq-cols li.on .gq-tag i { transform: scale(1.35); }
.gq-cols li.on p { color: rgba(255, 255, 255, .78); }
.gq-cols li:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
@media (max-width: 1100px) {
  /* two rows of columns; each row keeps its tags, titles and sentences on shared lines */
  .gq-cols { grid-template-rows: repeat(2, auto minmax(60px, 1fr) auto auto); }
  .gq-cols li, .gq-cols li:first-child { grid-row: span 4; grid-template-rows: subgrid; padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
  .gq-cols li:nth-child(3n + 1) { border-left: 0; }
  /* QA 2026-10-21: five items make three and two, so a rule under each cell stopped two thirds
     across; the rules now belong to the rows and run edge to edge */
  .gq-cols { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .gq-cols li { border-bottom: 0; }
  .gq-cols li:nth-child(-n + 3) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 640px) {
  .gq-cols { grid-template-rows: none; border-bottom: 0; }
  .gq-cols li, .gq-cols li:nth-child(-n + 3) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .gq-cols li, .gq-cols li:first-child { grid-row: auto; border-left: 0; padding: 22px 0 26px; grid-template-rows: auto 20px auto auto; }
  .gq-title { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .gq-cols li, .gq-bar, .gq-cols::after, .gq-cols .gq-tag i { transition: none; } }
/* the dim has to outrank the fade-in (.js .reveal.in sets opacity 1) */
.js .gq-cols.live li.reveal.in { opacity: .5; }
.js .gq-cols.live li.reveal.in.on { opacity: 1; }

/* ==========================================================================
   PORTAL, PLAYED BACK (Anna, 2026-10-12; concept A of
   _process/portal-concepts-2026-10-12, after tines.com). Replaces the
   scroll-pinned story: a tighter title, then the window (1040px at most) on
   a Mist stage with brand shapes peeking out, under a playback bar (Pause,
   the current step, a five-part progress line, a timer). Prefixed pxa-/pbk.
   ========================================================================== */
/* the section without the pin: everything flows */
.pbk { grid-column: 1 / -1; position: relative; }
.pbk .pw { width: 100%; max-width: none; margin: 0; }
.pbk .pw-band { height: clamp(120px, 17vh, 170px); }
.pbk .pw-rows li { padding: 9px 8px; }
.portal .centre { padding: clamp(56px, 9vh, 104px) 0 clamp(28px, 4vh, 44px); }
.portal .stats { margin-top: clamp(56px, 8vh, 96px); }

.pxa-stage { position: relative; width: min(1180px, 100%); margin: 0 auto; padding: 18px clamp(18px, 3vw, 44px) clamp(44px, 6vw, 72px); border-radius: 28px;
  background: color-mix(in srgb, var(--mist) 45%, var(--white)); overflow: visible; }
.pxa-shapes { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; pointer-events: none; }
.pxa-shapes i { position: absolute; display: block; }
.pxa-shapes i:nth-child(1) { left: -14px; top: 38%; width: 64px; height: 110px; background: var(--oxblood); }
.pxa-shapes i:nth-child(2) { left: 22px; top: 62%; width: 40px; height: 40px; background: var(--coral); }
.pxa-shapes i:nth-child(3) { right: -10px; top: 18%; width: 70px; height: 70px; background: var(--coral); }
.pxa-shapes i:nth-child(4) { right: 30px; top: 46%; width: 44px; height: 120px; background: var(--oxblood); }
.pxa-shapes i:nth-child(5) { left: 30%; bottom: -16px; width: 140px; height: 36px; background: var(--oxblood); }
.pxa-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; width: min(1040px, 100%); margin: 0 auto 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(15, 27, 25, .08); border-radius: 14px; padding: 8px 14px 8px 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pxa-play { font: 600 12px/1 var(--sans); border: 0; background: var(--ink); color: var(--white); border-radius: 9px; padding: 9px 12px; cursor: pointer; min-width: 64px; }
.pxa-label { font-size: 13px; font-weight: 500; white-space: nowrap; min-width: 120px; }
.pxa-track { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pxa-seg { height: 18px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; }
/* QA 2026-10-21: the segments are tapped to jump to an area; 40px tall to the finger, the
   negative margin keeps the bar its old height and the 3px line centred */
.pxa-seg { height: 40px; margin: -11px 0; }
@media (pointer: coarse) { .pxa-play { padding: 13px 14px; } .pxa-bar { padding-top: 4px; padding-bottom: 4px; } }
.pxa-seg span { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(15, 27, 25, .15); overflow: hidden; }
.pxa-seg span b { display: block; height: 100%; width: 0; background: var(--coral); }
.pxa-seg:hover span { background: rgba(15, 27, 25, .28); }
.pxa-time { font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pxa-stage .pwrap { position: relative; z-index: 1; width: min(1040px, 100%); margin: 0 auto; }
.pxa-stage .pw { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(15, 27, 25, .45); }
.pxa-stage .pcard { right: -24px; bottom: -40px; }
@media (max-width: 960px) { .pxa-label, .pxa-time { display: none; } .pxa-stage .pcard { position: static; margin-top: 14px; width: auto; } }

/* portal, more alive (Anna, 2026-10-12): guide cursor, rising card, moving blocks */
.pxa-shapes { transition: transform .6s var(--ease); }
.pxa-shapes i { transition: left 1.1s var(--ease), top 1.1s var(--ease), width 1.1s var(--ease), height 1.1s var(--ease); }
.pxa-pop { position: absolute; z-index: 4; left: max(6px, calc((100% - min(1040px, 100%)) / 2 - 64px)); top: 52%; display: grid; grid-template-columns: auto; gap: 4px; min-width: 210px; max-width: 250px; background: var(--white); border-radius: 14px; padding: 14px 16px; box-shadow: 0 22px 44px -22px rgba(15, 27, 25, .45), 0 0 0 1px rgba(15, 27, 25, .06); opacity: 0; transform: translateY(18px) scale(.96); pointer-events: none; }
.pxa-pop.up { animation: pxa-rise .7s var(--ease) .15s forwards; }
@keyframes pxa-rise { to { opacity: 1; transform: none; } }
.pxa-pop-k { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--grey); }
.pxa-pop-k::before { content: ""; width: 7px; height: 7px; background: var(--coral); }
.pxa-pop b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pxa-pop small { font-size: 12.5px; color: var(--grey); }
.pxa-cursor { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; transition: transform .75s cubic-bezier(.6, 0, .25, 1); }
.pxa-cursor svg { width: 22px; height: 22px; display: block; fill: var(--coral); stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(15, 27, 25, .25)); transform-origin: 4px 2px; }
.pxa-cursor em { position: absolute; left: 18px; top: 18px; font: 600 11px/1 var(--sans); font-style: normal; color: var(--white); background: var(--coral); padding: 4px 7px; border-radius: 6px; white-space: nowrap; }
.pxa-cursor.click svg { animation: pxa-click .35s var(--ease); }
@keyframes pxa-click { 40% { transform: scale(.78); } }
@media (max-width: 960px) { .pxa-pop, .pxa-cursor { display: none; } }  /* the card under the window says the same on small screens */
@media (prefers-reduced-motion: reduce) { .pxa-shapes, .pxa-shapes i { transition: none; } .pxa-pop.up { animation: none; opacity: 1; transform: none; } }

/* Sil's little world behind the portal window (Anna, 2026-10-12) */
.pxa-stage { padding-bottom: clamp(118px, 10vw, 150px); }
.pxw { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; pointer-events: none; z-index: 0; }
.pxw-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: flex-end; }
.pxw-ground i { flex: 1; background: var(--oxblood); }
.pxw-ground i:nth-child(3n) { background: color-mix(in srgb, var(--oxblood) 82%, var(--ink)); }
.pxw-stack { position: absolute; bottom: 40px; display: flex; flex-direction: column-reverse; align-items: center; gap: 0; width: 60px; }
.pxw-stack.l { left: 10px; } .pxw-stack.r { right: 10px; }
.pxw-stack i { display: block; height: 26px; animation: pxw-drop .5s cubic-bezier(.34, 1.45, .64, 1); }
.pxw-stack i.go { animation: pxw-gone .45s var(--ease) forwards; }
@keyframes pxw-drop { from { transform: translateY(-40px); opacity: 0; } }
@keyframes pxw-gone { to { transform: scale(.4); opacity: 0; } }
.pxw-seeds b { position: absolute; left: var(--x); bottom: 56px; width: var(--s); height: var(--s); background: var(--white); opacity: 0; animation: pxw-seed 9s linear infinite; animation-delay: var(--d); }
.pxw-seeds b:nth-child(3n) { background: var(--blush); } .pxw-seeds b:nth-child(4n) { background: var(--mist); }
@keyframes pxw-seed { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translateY(-420px) rotate(90deg); opacity: 0; } }
.pxw-sil { position: absolute; left: 0; bottom: 38px; width: 70px; color: var(--coral); transition-property: transform; transition-timing-function: linear; }
.pxw-sil svg { display: block; width: 100%; height: auto; transform: translateY(70px); transition: transform .7s cubic-bezier(.34, 1.45, .64, 1); }
.pxw-sil.up svg { transform: none; }
.pxw-sil.flip svg { transform: scaleX(-1); }
.pxw-sil.up.walk svg { animation: pxw-step .32s ease-in-out infinite alternate; }
.pxw-sil.up.flip.walk svg { animation-name: pxw-step-f; }
@keyframes pxw-step { from { transform: translateY(0); } to { transform: translateY(-5px) rotate(-3deg); } }
@keyframes pxw-step-f { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-5px) rotate(-3deg); } }
.pxw-sil.up.hop svg { animation: pxw-hop .5s var(--ease); }
@keyframes pxw-hop { 40% { transform: translateY(-16px) scale(1.04, .96); } }
.pxa-stage .pxa-bar, .pxa-stage .pwrap { position: relative; z-index: 2; }
@media (max-width: 640px) { .pxw-stack { display: none; } .pxw-sil { width: 54px; } }
@media (prefers-reduced-motion: reduce) { .pxw-seeds { display: none; } .pxw-sil svg { transition: none; } }
.pxa-stage .pcard { top: auto; bottom: 18px; right: -24px; }  /* inside the window's corner: clear of the prompt above and Sil's ground below */

/* ==== D-127 portal valley: start ==== */
/* The portal fold runs edge to edge into Sil's pixel valley (from
   _process/portal-scroll-6-2026-10-12): the window stands up as it meets the
   copy, Sil walks the path toward you as you scroll, crosses the bridge and
   leaps into the letter Sil; a stepped Ink curtain rises into the dark fold. */
.portal { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 560px) { .portal#portal { scroll-margin-top: calc(var(--navh, 64px) - 32px); } }   /* the hero's plain #portal link: the section's top padding is shorter than the nav here, so the heading would land under it (QA round three) */
.hero { border-bottom: 0; }
.portal .centre { padding-bottom: clamp(8px, 1.5vh, 16px); position: relative; z-index: 3; }
.pxa-stage { width: auto; margin: 0 calc(-1 * var(--m)); border-radius: 0; background: none; padding: clamp(20px, 3vh, 36px) var(--m) clamp(220px, 28vh, 320px); perspective: 1600px; perspective-origin: 50% 10%; }
.pxa-stage .pwrap { transform-origin: 50% 0%; will-change: transform, opacity; }
.pxa-stage .pxa-bar { will-change: transform, opacity; }
.pxw { border-radius: 0; inset: -16vh 0 0 0; }
/* the sky: white into a clean light Mist, never into Ink */
.pxw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, color-mix(in srgb, var(--mist) 42%, var(--white)) 24%, color-mix(in srgb, var(--mist) 42%, var(--white)) 100%); }
.portal .stats { display: none; }
.built { margin-top: 0; }
.pxe-sil.jumping { opacity: 0; }
.sil-jumper { position: fixed; left: 0; top: 0; z-index: 25; color: var(--coral); pointer-events: none; transform-origin: 0 0; display: none; }
.sil-jumper svg { display: block; width: 100%; height: auto; }

.pxw-ground i { background: var(--oxblood) !important; }
.pxw-ground { height: 60px; }
.pxc-curtain { position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 3; background: var(--ink); pointer-events: none;
  clip-path: polygon(0 34px, 7% 34px, 7% 12px, 15% 12px, 15% 40px, 24% 40px, 24% 0, 33% 0, 33% 26px, 44% 26px, 44% 8px, 55% 8px, 55% 36px, 64% 36px, 64% 4px, 74% 4px, 74% 30px, 85% 30px, 85% 14px, 93% 14px, 93% 38px, 100% 38px, 100% 100%, 0 100%); }

.pxw::before { display: none; }
.pxw-ground, .pxw-sil, .pxw-stack { display: none !important; }
.pxa-stage { padding-bottom: clamp(360px, 46vh, 480px); }
.pxm { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
/* the sky and clouds come in from the top on a smooth fade, not a hard dither */
.pxm-sky, .pxm-clouds { -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .25) 14%, #000 42%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .25) 14%, #000 42%); }
.pxm-clouds { width: 200%; animation: pxm-drift 220s linear infinite; }
@keyframes pxm-drift { to { transform: translateX(-50%); } }
.pxe-sil { position: absolute; left: 0; bottom: 0; width: 74px; color: var(--coral); transform-origin: 50% 100%; pointer-events: auto; cursor: pointer; z-index: 2; }
.pxe-sil svg { display: block; width: 100%; height: auto; transform-origin: 50% 100%; }
.pxe-sil.walk svg { animation: pxv-step .34s ease-in-out infinite alternate; }
.pxe-sil.hop svg { animation: pxv-hop .5s cubic-bezier(.3, .7, .4, 1); }
.pxe-sil.jumping { opacity: 0; pointer-events: none; }
@keyframes pxv-step { from { transform: translateY(0) rotate(2deg); } to { transform: translateY(-6%) rotate(-2deg); } }
@keyframes pxv-hop { 45% { transform: translateY(-40%) scale(1.04, .96); } }
.pxe-sil svg { margin-bottom: 11%; }
.pxe-sil .lg { position: absolute; bottom: 2%; width: 6.5%; height: 14%; background: var(--coral); transform-origin: 50% 0; }
.pxe-sil .lg::after { content: ""; position: absolute; bottom: 0; left: -45%; width: 190%; height: 32%; background: var(--coral); }
.pxe-sil .lg.l { left: 40%; } .pxe-sil .lg.r { left: 53.5%; }
.pxe-sil .shadow { position: absolute; left: 18%; right: 18%; bottom: -4%; height: 8%; background: color-mix(in srgb, var(--tide) 30%, transparent); border-radius: 50%; z-index: -1; }
@media (prefers-reduced-motion: reduce) { .pxm-clouds { animation: none; } .pxe-sil.walk svg, .pxe-sil.hop svg { animation: none; } }

@media (min-width: 761px) { .built .tart { top: 0; height: 100vh; } }
.pxm-rays { opacity: .55; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%); }
.pxk { position: absolute; width: 4px; height: 4px; background: var(--white); pointer-events: none; animation: pxk 3.2s ease-in-out infinite; opacity: 0; }
.pxk::before, .pxk::after { content: ""; position: absolute; background: var(--white); }
.pxk::before { left: -4px; right: -4px; top: 0; bottom: 0; } .pxk::after { top: -4px; bottom: -4px; left: 0; right: 0; }
.pxk.s { transform: scale(.5); }
@keyframes pxk { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .pxk { animation: none; opacity: .6; } }
/* ==== D-127 portal valley: end ==== */

/* ==== D-128 studio code: start ==== */
/* The studio section as a code editor (from _process/studio-concepts-2026-10-12,
   concept 5): each file types a few lines and the piece beside it builds in
   step with them. */
.sv { position: absolute; inset: 0; overflow: hidden; }
.sv * { box-sizing: border-box; }
.sv .sv-in { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
/* identity */
.sv-id { background: color-mix(in srgb, var(--blush) 30%, var(--white)); }
.sv-mk { position: absolute; left: 9%; top: 22%; width: 42%; color: var(--oxblood); overflow: visible; }
.sv-mk path { opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.sv-mk .sv-a { transform: translateY(-45%); } .sv-mk .sv-b { transform: translateY(45%); transition-delay: .12s; }
.sv-id.s1 .sv-mk path { opacity: 1; transform: none; }
.sv-aa { position: absolute; right: 9%; top: 17%; font: italic 400 clamp(38px, 5.4vw, 88px)/1 var(--serif); color: var(--ink); }
.sv-aa b { display: block; margin-top: .1em; font: 600 .62em/1 var(--sans); letter-spacing: -.03em; }
.sv-id.s2 .sv-aa { opacity: 1; transform: none; }
.sv-sw { position: absolute; left: 9%; right: 9%; bottom: 12%; height: 18%; display: flex; gap: 5%; }
.sv-sw i { flex: 1; min-width: 0; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s var(--ease); }
.sv-sw i:nth-child(1) { background: var(--oxblood); } .sv-sw i:nth-child(2) { background: var(--coral); transition-delay: .08s; } .sv-sw i:nth-child(3) { background: var(--mist); transition-delay: .16s; } .sv-sw i:nth-child(4) { background: var(--ink); transition-delay: .24s; }
.sv-id.s3 .sv-sw i { opacity: 1; transform: none; }
/* websites */
.sv-web { background: color-mix(in srgb, var(--mist) 70%, var(--white)); }
.sv-br { position: absolute; left: 50%; top: 11%; bottom: 11%; width: 80%; margin-left: -40%; background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--ease); }
.sv-web.s1 .sv-br { opacity: 1; transform: none; }
.sv-bar { height: 9%; border-bottom: 1.5px solid var(--ink); display: flex; align-items: center; gap: 5px; padding: 0 8px; } .sv-bar i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); }
.sv-pg { padding: 6%; display: flex; flex-direction: column; gap: 6%; height: 91%; }
.sv-nav { height: 6%; display: flex; justify-content: space-between; } .sv-nav::before, .sv-nav::after { content: ""; background: var(--rule); transition: background .6s; } .sv-nav::before { width: 22%; } .sv-nav::after { width: 36%; }
.sv-web.s2 .sv-nav::before { background: var(--oxblood); }
.sv-hero { flex: 0 0 34%; position: relative; background: var(--oxblood); }
.sv-hero::after { content: ""; position: absolute; left: 8%; bottom: 18%; width: 46%; height: 14%; background: var(--blush); }
.sv-cards { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.sv-cards i { flex: 1 1 64px; min-height: 36px; background: var(--mist); } .sv-cards i:nth-child(2) { background: var(--blush); }
.sv-cards .sv-x { display: none; background: var(--coral); }
.sv-web .sv-hero, .sv-web .sv-cards { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); } .sv-web .sv-cards { transition-delay: .15s; }
.sv-web.s3 .sv-hero, .sv-web.s3 .sv-cards { opacity: 1; transform: none; }
.sv-web.s4 .sv-br { animation: sv-resp 2.6s var(--ease) .2s 1; }
@keyframes sv-resp { 0%, 100% { width: 80%; margin-left: -40%; } 35%, 65% { width: 32%; margin-left: -16%; } }
/* design systems */
.sv-sys { background: var(--white); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 7%; padding: 11% 9%; }
.sv-sys > span { display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--rule); opacity: 0; transform: scale(.94); transition: opacity .4s, transform .5s var(--ease); }
.sv-sys > span:nth-child(2) { transition-delay: .06s; } .sv-sys > span:nth-child(3) { transition-delay: .12s; } .sv-sys > span:nth-child(4) { transition-delay: .18s; } .sv-sys > span:nth-child(5) { transition-delay: .24s; } .sv-sys > span:nth-child(6) { transition-delay: .3s; }
.sv-sys.s1 > span { opacity: 1; transform: none; }
.sv-acc { background: var(--rule); transition: background .45s var(--ease); }
.sv-sys > span:nth-child(2) .sv-acc { transition-delay: .1s; } .sv-sys > span:nth-child(3) .sv-acc { transition-delay: .2s; } .sv-sys > span:nth-child(4) .sv-acc { transition-delay: .3s; } .sv-sys > span:nth-child(5) .sv-acc { transition-delay: .4s; } .sv-sys > span:nth-child(6) .sv-acc { transition-delay: .5s; }
.sv-sys.s2 .sv-acc { background: var(--coral); }
.sv-btn { width: 70%; height: 28%; border-radius: 99px; }
.sv-inp { width: 74%; height: 26%; border: 1.5px solid var(--ink); position: relative; } .sv-inp .sv-acc { position: absolute; left: 10%; top: 25%; bottom: 25%; width: 2px; animation: vg-caret .9s steps(1) infinite; }
.sv-tg { width: 46%; height: 26%; border-radius: 99px; position: relative; } .sv-tg::after { content: ""; position: absolute; right: 6%; top: 12%; bottom: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--white); }
.sv-tag { padding: 6% 12%; font: 600 11px/1 var(--sans); color: var(--white); }
.sv-crd { width: 66%; height: 66%; border: 1.5px solid var(--ink); background: var(--white); } .sv-crd .sv-acc { display: block; height: 30%; }
.sv-sl2 { width: 74%; height: 5px; background: var(--rule); position: relative; } .sv-sl2 .sv-acc { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; } .sv-sl2::after { content: ""; position: absolute; left: 60%; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--ink); }
/* creative portals */
.sv-por { background: var(--ink); }
.sv-pr { position: absolute; left: 9%; right: 9%; top: 12%; background: var(--white); padding: 4% 5%; font: 500 clamp(11px, 1.2vw, 15px)/1.3 var(--sans); color: var(--ink); }
.sv-pr small { display: block; color: var(--grey); font-size: .8em; margin-bottom: .4em; }
.sv-pr span { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; padding-right: 2px; border-right: 2px solid var(--coral); transition: max-width 1.1s steps(30); }
.sv-por.s1 .sv-pr { opacity: 1; transform: none; } .sv-por.s2 .sv-pr span { max-width: 100%; }
.sv-sl { position: absolute; left: 50%; bottom: 25%; width: 26%; aspect-ratio: 1.5; margin-left: -13%; opacity: 0; transform: translateY(30%); transition: opacity .45s, transform .7s var(--ease); }
.sv-sl::after { content: ""; position: absolute; left: 10%; top: 14%; width: 50%; height: 12%; background: currentColor; }
.sv-sl:nth-child(2) { background: var(--blush); color: var(--oxblood); --r: -14deg; --x: -95%; } .sv-sl:nth-child(3) { background: var(--mist); color: var(--tide); --r: -5deg; --x: -32%; transition-delay: .08s; }
.sv-sl:nth-child(4) { background: var(--coral); color: var(--white); --r: 5deg; --x: 32%; transition-delay: .16s; } .sv-sl:nth-child(5) { background: var(--oxblood); color: var(--blush); --r: 14deg; --x: 95%; transition-delay: .24s; }
.sv-por.s3 .sv-sl { opacity: 1; transform: translateX(var(--x)) rotate(var(--r)); }
.sv-ok { position: absolute; right: 9%; bottom: 8%; font: 600 11px/1 var(--sans); color: var(--ink); background: var(--mist); padding: 6px 9px; }
.sv-por.s4 .sv-ok { opacity: 1; transform: none; }
/* maintenance: request, preview, publish, seen */
.sv-mnt { background: color-mix(in srgb, var(--mist) 45%, var(--white)); }
.sv-site { position: absolute; left: 6%; top: 13%; width: 50%; bottom: 13%; background: var(--white); border: 1.5px solid var(--ink); padding: 8% 6% 0; }
.sv-logo { display: block; height: 8%; width: 36%; background: var(--oxblood); margin-bottom: 11%; }
.sv-site h4 { margin: 0; font: 600 clamp(12px, 1.4vw, 18px)/1.2 var(--sans); color: var(--ink); }
.sv-hrs { display: grid; margin-top: 6%; font: 400 clamp(12px, 1.3vw, 16px)/1.5 var(--sans); }
.sv-old { color: var(--ink); text-decoration-color: var(--coral); transition: color .4s, opacity .4s, max-height .5s var(--ease); max-height: 2em; overflow: hidden; }
.sv-new { color: var(--ink); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, background .6s; justify-self: start; padding: 0 3px; margin-left: -3px; }
.sv-mnt.s2 .sv-old { text-decoration: line-through; color: var(--grey); }
.sv-mnt.s2 .sv-new { max-height: 2em; opacity: 1; background: color-mix(in srgb, var(--blush) 55%, var(--white)); }
.sv-mnt.s3 .sv-old { max-height: 0; opacity: 0; }
.sv-mnt.s3 .sv-new { background: transparent; }
.sv-state { position: absolute; right: 5%; top: 4%; font: 600 10px/1 var(--sans); padding: 5px 7px; transition: opacity .3s; }
.sv-state.live { background: var(--ink); color: var(--white); } .sv-state.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-right: 5px; vertical-align: 1px; }
.sv-state.prev { background: color-mix(in srgb, var(--blush) 55%, var(--white)); color: var(--oxblood); opacity: 0; }
.sv-mnt.s2 .sv-state.prev { opacity: 1; } .sv-mnt.s2 .sv-state.live { opacity: 0; }
.sv-mnt.s3 .sv-state.prev { opacity: 0; } .sv-mnt.s3 .sv-state.live { opacity: 1; animation: sv-nudge .5s var(--ease); }
/* the thread: your request, then the studio's reply */
.sv-th { position: absolute; left: 60%; right: 5%; top: 13%; bottom: 13%; display: flex; flex-direction: column; gap: 6%; font: 500 clamp(10px, 1.05vw, 13px)/1.35 var(--sans); }
.sv-th small { display: block; font-size: .82em; margin-bottom: .35em; }
.sv-msg { align-self: flex-end; width: 92%; background: var(--coral); color: var(--white); padding: 7% 8%; }
.sv-msg small { opacity: .85; }
.sv-mnt.s1 .sv-msg { opacity: 1; transform: none; }
.sv-rep { align-self: flex-start; width: 92%; background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); padding: 7% 8%; }
.sv-rep small { color: var(--grey); } .sv-rep small::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tide); margin-right: 5px; vertical-align: 0; }
.sv-mnt.s4 .sv-rep { opacity: 1; transform: none; }
@keyframes sv-nudge { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sv *, .sv { transition: none !important; animation: none !important; } }
.vgl { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--ease); } .vgl.on { opacity: 1; }
@keyframes vg-caret { 50% { opacity: 0; } }
.st5-win { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 56px); border: 1.5px solid var(--ink); background: var(--ink); }
.st5-tabs { display: flex; overflow-x: auto; border-bottom: 1.5px solid color-mix(in srgb, var(--white) 14%, var(--ink)); }
.st5-tabs button { flex: none; background: none; border: 0; border-right: 1px solid color-mix(in srgb, var(--white) 12%, var(--ink)); color: color-mix(in srgb, var(--white) 50%, var(--ink)); font: 500 13px/1 ui-monospace, 'SF Mono', Menlo, monospace; padding: 14px 18px; cursor: pointer; position: relative; }
.st5-tabs button.on { color: var(--white); background: color-mix(in srgb, var(--white) 6%, var(--ink)); }
.st5-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--coral); }
.st5-ed { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(320px, 30vw, 440px); }
.st5-ed pre { margin: 0; padding: clamp(18px, 2.4vw, 36px); font: 400 clamp(13px, 1.15vw, 16px)/1.7 ui-monospace, 'SF Mono', Menlo, monospace; color: color-mix(in srgb, var(--white) 70%, var(--ink)); white-space: pre-wrap; counter-reset: ln; }
.st5-ed .f { color: var(--blush); } .st5-ed .s { color: var(--coral); } .st5-ed .k { color: var(--mist); } .st5-ed .c { color: color-mix(in srgb, var(--white) 38%, var(--ink)); font-style: italic; }
.st5-ed .car { display: inline-block; width: 8px; height: 1.1em; background: var(--coral); vertical-align: -2px; animation: vg-caret .9s steps(1) infinite; }
.st5-ed { position: relative; overflow: hidden; }
.st5-out { position: relative; background: var(--white); overflow: hidden; }
.st5-ed .sl8 { color: var(--coral); background: color-mix(in srgb, var(--coral) 16%, transparent); }
.st5-ed .silc { position: relative; display: inline-block; width: 2px; height: 1.25em; margin-left: 1px; background: var(--coral); vertical-align: -.25em; }
.st5-ed .silc b { position: absolute; left: 0; bottom: 100%; margin-bottom: 2px; font: 600 10px/1 var(--sans); font-style: normal; background: var(--coral); color: var(--white); padding: 3px 5px; border-radius: 3px 3px 3px 0; white-space: nowrap; }
.st5-ed .sl8.done { background: none; transition: background .6s; }
.st5-ed pre.in { animation: st5-in .35s var(--ease); }
@keyframes st5-in { from { opacity: 0; transform: translateY(6px); } }
.st5-ed.sil-typing .car { display: none; }
.st5-out .vgl { transition: opacity .5s var(--ease); }
.st5-cap { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: baseline; padding: 16px clamp(18px, 2.4vw, 36px); background: var(--white); border-top: 1.5px solid var(--ink); }
.st5-cap h3 { margin: 0; font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; } .st5-cap p { margin: 0; color: var(--grey); font-size: 15px; }
@media (max-width: 860px) { .st5-ed { grid-template-columns: 1fr; } .st5-out { aspect-ratio: 4 / 3; } .st5-cap { grid-template-columns: 1fr; gap: 4px; } }
.st5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ==== D-128 studio code: end ==== */

/* ==== D-130 two doors: start ==== */
/* The home page's closing section as two doors (from _process/
   contact-concepts-2026-10-12, concept 4): Oxblood, about a screen tall. */
.cx { background: var(--oxblood); color: var(--white); padding: clamp(120px, 17vh, 220px) var(--m); min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); align-content: center; margin-top: clamp(64px, 10vh, 140px); }
.cx h2 { font-size: clamp(44px, 6.6vw, 112px); font-weight: 600; line-height: .96; letter-spacing: -.045em; margin: 0; }
.cx h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.cx .lead { font-size: 18px; line-height: 1.5; color: color-mix(in srgb, var(--white) 82%, var(--oxblood)); margin: 24px 0 0; max-width: 40ch; }
.cx .mail { display: inline-block; margin-top: 28px; color: var(--white); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--white) 40%, transparent); text-underline-offset: 4px; }
.cx .mail:hover { text-decoration-color: var(--coral); }
.cx label { display: block; font-size: 12px; letter-spacing: .02em; color: color-mix(in srgb, var(--white) 66%, var(--oxblood)); }
.cx input, .cx textarea { width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid color-mix(in srgb, var(--white) 35%, var(--oxblood)); color: var(--white); font: 400 17px/1.4 var(--sans); padding: 10px 0 10px; outline: none; border-radius: 0; transition: border-color .25s; }
.cx input::placeholder, .cx textarea::placeholder { color: color-mix(in srgb, var(--white) 42%, var(--oxblood)); }
.cx input:focus, .cx textarea:focus { border-bottom-color: var(--white); }
.cx textarea { resize: none; min-height: 72px; }
.cx .go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--white); color: var(--ink); border: 0; font: 600 16px/1 var(--sans); padding: 18px 26px; cursor: pointer; transition: background .25s; }
.cx .go:hover { background: var(--coral); color: var(--white); }
.cx .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cx .chip { border: 1.5px solid color-mix(in srgb, var(--white) 40%, var(--oxblood)); background: transparent; color: var(--white); font: 500 14px/1 var(--sans); padding: 10px 14px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cx .chip:hover { border-color: var(--white); }
.cx .chip[aria-pressed="true"] { background: var(--white); color: var(--oxblood); border-color: var(--white); }
.cx .done { display: none; }
.cx .sent .done { display: block; } .cx .sent .form-body { display: none; }
.cx .done h3 { font: 600 clamp(24px, 2.4vw, 34px)/1.15 var(--sans); letter-spacing: -.03em; margin: 0; }
.cx .done p { margin: 10px 0 0; color: color-mix(in srgb, var(--white) 75%, var(--oxblood)); }
.cx .note { font-size: 12px; color: color-mix(in srgb, var(--white) 50%, var(--oxblood)); margin-top: 14px; }
@media (max-width: 860px) { .cx { grid-template-columns: 1fr; } .cx > * { grid-column: 1 / -1 !important; } }
.cx4 .l { grid-column: 1 / span 5; align-self: start; position: sticky; top: 120px; }
.cx4 .open { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 14px; color: color-mix(in srgb, var(--white) 80%, var(--oxblood)); }
.cx4 .open i { width: 9px; height: 9px; border-radius: 50%; background: var(--blush); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blush) 60%, transparent); }
.cx4 .open.is i { background: var(--coral); animation: cx4-pulse 2s infinite; }
@keyframes cx4-pulse { 70% { box-shadow: 0 0 0 10px transparent; } }
.cx4 .doors { grid-column: 7 / -1; display: grid; gap: 14px; align-self: center; }
.cx4 .door { border: 1.5px solid color-mix(in srgb, var(--white) 32%, var(--oxblood)); transition: border-color .3s, background .3s; }
.cx4 .door:hover, .cx4 .door.on { border-color: var(--white); }
.cx4 .door.on { background: color-mix(in srgb, var(--white) 6%, var(--oxblood)); }
.cx4 .door { scroll-margin-top: calc(var(--navh, 64px) + 16px); }   /* site.js brings a newly opened door back under the nav when the one above it collapses (QA round three) */
.cx4 .dh { display: grid; grid-template-columns: 1fr; width: 100%; text-align: left; background: none; border: 0; color: var(--white); padding: clamp(20px, 2.4vw, 32px); cursor: pointer; font-family: var(--sans); }
.cx4 .dh b { font: 600 clamp(24px, 2.4vw, 36px)/1.1 var(--sans); letter-spacing: -.03em; }
.cx4 .dh .d { grid-column: 1; margin-top: 8px; font-size: 16px; line-height: 1.45; color: color-mix(in srgb, var(--white) 75%, var(--oxblood)); max-width: 44ch; }
.cx4 .dh .cta { grid-column: 1; margin-top: 18px; font-weight: 600; font-size: 15px; }
.cx4 .dh .cta .arr { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.cx4 .dh:hover .cta .arr { transform: translateX(5px); }
.cx4 .door.on .dh .cta { display: none; }
.cx4 .db { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.cx4 .db > * { overflow: hidden; padding: 0 clamp(20px, 2.4vw, 32px) 0 calc(clamp(20px, 2.4vw, 32px) + 40px); }
.cx4 .door.on .db { grid-template-rows: 1fr; } .cx4 .door.on .db > * { padding-bottom: clamp(20px, 2.4vw, 32px); }
.cx4 .db .go { margin-top: 24px; }
.cx4 .sent .done { padding-bottom: 24px; }
.cx > .hd { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--white) 22%, var(--oxblood)); margin-bottom: clamp(40px, 6vh, 72px); align-self: start; }
.cx4 .db label { margin-top: 18px; } .cx4 .db label:first-child { margin-top: 0; }
.cx .stat { margin: 12px 0 0; font-size: 14px; min-height: 1.2em; } .cx .stat.err { color: var(--blush); }
.cx input.bad { border-bottom-color: var(--blush); }
/* Fixes from Nathan's launch test (D-134), 2026-10-14:
   1. a picked choice now reads clearly: bold, a Coral bar under it, and the
      unpicked ones in that row step back;
   2. a sent door's "Thank you." kept its bottom padding while the door was
      closed, so a strip of it showed below the door's edge. */
.cx .chip[aria-pressed="true"] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--coral); }
.cx .chips:has(.chip[aria-pressed="true"]) .chip:not([aria-pressed="true"]) { opacity: .55; }
.cx .chips:has(.chip[aria-pressed="true"]) .chip:not([aria-pressed="true"]):hover { opacity: 1; }
.cx4 .door:not(.on) .db > * { padding-top: 0 !important; padding-bottom: 0 !important; }
/* ==== D-130 two doors: end ==== */

/* ==== D-130 sil: start ==== */
/* Sil rises from the section's bottom edge, says something kind, and a pixel
   heart floats up while he hops, happy. Again when you point at him or a
   form is sent. */
.cx4 { position: relative; overflow: hidden; }
.cx-sil { position: absolute; left: var(--m); bottom: 0; width: clamp(108px, 10vw, 156px); color: var(--coral); cursor: pointer; z-index: 2; transform: translateY(105%); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.cx-sil .sil { display: block; transform-origin: 50% 100%; }
.cx-sil .sil svg { display: block; width: 100%; height: auto; }
.cx-sil .sil g[class^="x-"] { display: none; }
.cx-sil .sil[data-x="neutral"] .x-neutral, .cx-sil .sil[data-x="happy"] .x-happy { display: inline !important; }
.cx4.hi .cx-sil { transform: translateY(16%); }
.cx-say { position: absolute; left: 92%; bottom: 74%; background: var(--white); color: var(--oxblood); font: 600 15px/1.2 var(--sans); padding: 10px 14px; border-radius: 14px 14px 14px 2px; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 0 100%; transition: opacity .35s .55s, transform .45s .55s cubic-bezier(.3, 1.5, .5, 1); }
.cx4.hi .cx-say { opacity: 1; transform: none; }
.cx-heart { position: absolute; left: 66%; bottom: 66%; width: 30px; color: var(--coral); opacity: 0; pointer-events: none; }
.cx-heart .sh { fill: var(--white); fill-opacity: .55; }
.cx-heart.h2 { width: 18px; left: 14%; bottom: 74%; color: var(--blush); }
.cx-sil.love .cx-heart { animation: cx-heart 1.7s ease-out forwards; }
.cx-sil.love .cx-heart.h2 { animation-delay: .3s; }
.cx-sil.love .sil { animation: cx-hop .55s cubic-bezier(.3, .7, .4, 1) 2; }
@keyframes cx-heart { 0% { opacity: 0; transform: translateY(0) scale(.4); } 14% { opacity: 1; transform: translateY(-10px) scale(1.15); } 100% { opacity: 0; transform: translateY(-96px) scale(1); } }
@keyframes cx-hop { 40% { transform: translateY(-14%) scale(1.04, .96); } }
@media (prefers-reduced-motion: reduce) { .cx-sil, .cx-say { transition: none; } .cx-sil.love .cx-heart, .cx-sil.love .sil { animation: none; } }
/* ==== D-130 sil: end ==== */

/* ==== D-131 footer spacing: start ==== */
/* Narrow screens: the closing section's left column no longer sticks, so it
   cannot slide over the two doors (D-130 fix). */
@media (max-width: 860px) { .cx4 .l { position: static; } .cx4 .doors { margin-top: 40px; } .cx-sil { left: auto; right: calc(var(--m) + 120px); } }
/* Footer spacing: room above the columns so it no longer butts against the
   section before it, and a tighter, even gap down to the mark */
.foot { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(24px, 3vw, 40px); }
.fc .nw { white-space: nowrap; }
.foot .fc { padding-top: 0; padding-bottom: clamp(32px, 4vw, 56px); }
.foot .fc:not(.fc-a) { padding-left: clamp(16px, 2vw, 28px); }
.foot .foot-mark { margin-top: clamp(40px, 6vw, 80px); }
/* Footer mark on scroll: the box keeps its full height at the end. Shrinking it
   (D-064) shortened the page at the very moment the end was reached, so the
   browser pulled the scroll back, the mark reopened and it flickered between
   closed and open. The bars still close by their own positions. */
.foot.end .fm { height: calc(286 * var(--u)); }
/* Footer mark, reversed (Anna, 2026-10-12): it arrives closed, as the logo,
   and opens as you scroll to the end, revealing the window (Sil's scene and
   Stack it). Same --p as D-064 (0 entering, 1 at the end); only the direction
   of the bars flips. */
.fm-bot { top: calc((114 + 58 * var(--p)) * var(--u)); }
.foot.end .fm-bot { top: calc(172 * var(--u)); }
.fm-stage { height: calc((80 + 58 * var(--p)) * var(--u)); }
.foot.end .fm-stage { height: calc(138 * var(--u)); }
.fm::before, .fm::after { opacity: clamp(0, calc((.015 - var(--p)) * 70), 1); }
.foot.end .fm::before, .foot.end .fm::after { opacity: 0; }
.fm-cast { transform: translateY(calc((1 + 58 * var(--p)) * var(--u))); }
.foot.end .fm-cast { transform: translateY(calc(59 * var(--u))); }
.fm { overflow: hidden; }   /* nothing moved inside it may lengthen the page */
/* ==== D-131 footer spacing: end ==== */

/* ==== D-132 footer stack: start ==== */
/* The footer mark's window as "Stack it" (from _process/footer-concepts-
   2026-10-12, concept 1): click to drop blocks, Sil watches, a full stack
   topples. Event-driven: nothing runs until you touch it. */
.foot.ix .fm-stage .piece, .foot.ix .fm-stage .fm-heart, .foot.ix .fm-cast { opacity: 0 !important; animation: none !important; }
.foot.ix .fm-stage { z-index: 3; }
.foot.ix .fx { touch-action: pan-y; }
.fx { position: absolute; inset: 0; z-index: 3; cursor: pointer; overflow: hidden; touch-action: manipulation; }
.fx-sil { position: absolute; left: 0; bottom: 0; height: 40%; color: var(--coral); transform-origin: 50% 100%; pointer-events: none; z-index: 2; }
.fx-sil svg { display: block; height: 100%; width: auto; transform-origin: 50% 100%; }
.fx-sil g[class^="x-"] { display: none; }
.fx-sil[data-x="happy"] .x-happy, .fx-sil[data-x="surprised"] .x-surprised, .fx-sil[data-x="neutral"] .x-neutral { display: inline; }
.fx-sil.walk svg { animation: fx-step .26s ease-in-out infinite alternate; }
.fx-sil.hop svg { animation: fx-hop .5s cubic-bezier(.3, .7, .4, 1); }
@keyframes fx-step { from { transform: translateY(0) rotate(3deg); } to { transform: translateY(-8%) rotate(-3deg); } }
@keyframes fx-hop { 40% { transform: translateY(-30%) scale(1.04, .96); } }
.fx-heart { position: absolute; width: 7%; aspect-ratio: 7 / 6; color: var(--coral); pointer-events: none; animation: fx-up 1.4s ease-out forwards; z-index: 3; }
.fx-heart svg { display: block; width: 100%; height: 100%; }
@keyframes fx-up { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: 1; transform: translateY(-10%) scale(1.1); } 100% { opacity: 0; transform: translateY(-160%) scale(1); } }
.fx-say { position: absolute; bottom: 46%; max-width: calc(100% - 12px); background: var(--white); color: var(--ink); font: 600 clamp(11px, 1.3vw, 16px)/1.15 var(--sans); padding: 8px 12px; border-radius: 12px 12px 12px 2px; text-wrap: balance; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 5; }
.fx-say.flip { border-radius: 12px 12px 2px 12px; }
.fx-say.mid { border-radius: 12px; text-align: center; }
.fx-say.on { opacity: 1; }
.fx-hint { position: absolute; left: 3%; top: 8%; font: 500 clamp(10px, 1.1vw, 13px)/1 var(--sans); color: color-mix(in srgb, var(--mist) 70%, transparent); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fx *, .fx-sil svg { animation: none !important; transition: none !important; } }
.fx-blk { position: absolute; background: var(--mist); transition: top .55s cubic-bezier(.3, 1.3, .5, 1); z-index: 1; }
.fx-blk.c { background: var(--coral); }
.fx-blk.fall { transition: transform .9s cubic-bezier(.5, 0, .9, .5), opacity .9s; opacity: 0; }
.fx-sil { transition: left .6s cubic-bezier(.3, .8, .4, 1), bottom .3s; }
.fx-n { position: absolute; right: 3%; top: 8%; font: 600 clamp(10px, 1.1vw, 13px)/1 var(--sans); color: var(--mist); pointer-events: none; }
/* ==== D-132 footer stack: end ==== */

/* ==========================================================================
   D-133 UNDER CONSTRUCTION: platform, method and evidence show a centred
   page with a live loading bar of brand cells; Sil rides the leading edge
   ========================================================================== */
.soon { min-height: calc(100vh - var(--navh, 64px)); min-height: calc(100svh - var(--navh, 64px)); display: grid; place-items: center; padding: clamp(96px, 16vh, 160px) var(--m) clamp(64px, 12vh, 120px); text-align: center; }
.soon-in { width: min(720px, 100%); display: flex; flex-direction: column; align-items: center; }
.soon-k { font-size: 14px; color: var(--grey); margin-bottom: 18px; }
.soon h1 { font-size: clamp(40px, 6vw, 88px); font-weight: 600; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.soon h1 em { white-space: nowrap; }   /* QA 2026-10-21: "built." no longer sits alone on line two */
.soon-p { font-size: clamp(16px, 1.3vw, 19px); color: var(--grey); max-width: 48ch; margin-top: 24px; }
.soon-bar { position: relative; width: min(560px, 100%); margin-top: clamp(64px, 10vh, 104px); }
.soon-cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.soon-cells i { aspect-ratio: 1 / 1; background: var(--rule); transition: background .12s steps(1); }
.soon-cells i.on { background: var(--coral); }
.soon-cells i.on.hot { background: var(--oxblood); }
.soon-sil { position: absolute; bottom: calc(100% + 4px); left: 0; width: clamp(34px, 4.4vw, 46px); transform: translateX(-50%); transition: left .22s var(--ease); }
.soon-sil .sil { color: var(--coral); }
.soon-sil.hop .sil { animation: soonhop .5s var(--ease); }
@keyframes soonhop { 40% { transform: translateY(-14px); } }
.soon-state { position: relative; display: flex; align-items: center; margin-top: 18px; font-size: 14px; color: var(--grey); min-height: 1.5em; }
.soon-dot { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: 7px; height: 7px; background: var(--coral); animation: blink 1s steps(1) infinite; }   /* out of the flow, so the message alone is centred (QA 2026-10-21) */
.soon .acts { margin-top: clamp(48px, 8vh, 80px); }
@media (prefers-reduced-motion: reduce) { .soon-sil, .soon-sil.hop .sil, .soon-dot { transition: none; animation: none; } }

/* ---------- hero audit, 2026-10-14 (language draft only) ----------
   Two agent passes on the hero: spacing at five widths, and every control
   and animation. Fixes tested in the browser before they landed here. */
/* the board runs from the headline's top to the buttons' bottom */
@media (min-width: 961px) { .hero .cb-stage { align-self: stretch; height: auto; margin: calc(clamp(36px, 7vh, 88px) + 20px) 0 clamp(28px, 5vh, 56px); } }
/* no single-word last line at tablet and phone */
.hero h1 { text-wrap: balance; }
/* the sub-line at a comfortable measure */
.hero .sub { max-width: 50ch; }
/* the output buttons stay on one line where the board is narrow */
@media (min-width: 961px) and (max-width: 1180px) { .cb-ask { padding-left: 14px; } .cb-ask .cb-seg { gap: 2px; } .cb-ask .cb-seg button { white-space: nowrap; padding: 10px; font-size: 13px; } }
/* 44px touch targets without changing how anything looks */
@media (pointer: coarse) { .cb-ask .cb-seg button { min-height: 44px; } .cb-th { position: relative; } .cb-th::after { content: ""; position: absolute; inset: -12px 0; } .hb-menu, .hb-cta, .menu-x { position: relative; } .hb-menu::after, .hb-cta::after, .menu-x::after { content: ""; position: absolute; inset: -4px; } }
/* reduced motion: the builder snaps instead of travelling */
@media (prefers-reduced-motion: reduce) { .cb-pc, .cb-frame, .cb-sil, .cb-check, .cb-chrome, .cb-count, .cb-thumbs, .cb-th, .hb-ind, .mrow { transition: none !important; } .cb-sil.cb-hop { animation: none; } }

/* ---------- button motion, 2026-10-14 (language draft only) ----------
   The buttons used a stepped transition (.15s steps(1)): nothing moved for
   150ms, then the colour jumped, which read as lag. Every button now eases;
   the hero's two buttons fill with a wipe from the left on hover and drain
   back out to the right on leave, and press in a touch on click. */
.btn { transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.hero .acts .btn { position: relative; isolation: isolate; overflow: hidden; transition: color .35s var(--ease), transform .15s var(--ease); }
.hero .acts .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease); }
.hero .acts .btn:hover::before, .hero .acts .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.hero .acts .btn:active { transform: scale(.985); }
.hero .acts .btn.p, .hero .acts .btn.p:hover { background: var(--ink); color: var(--white); }
.hero .acts .btn.p::before { background: var(--oxblood); }
.hero .acts .btn.s, .hero .acts .btn.s:hover { background: var(--white); color: var(--ink); }
.hero .acts .btn.s::before { background: var(--ink); }
.hero .acts .btn.s:hover, .hero .acts .btn.s:focus-visible { color: var(--white); }
@media (prefers-reduced-motion: reduce) { .hero .acts .btn::before { transition: none; } .hero .acts .btn:active { transform: none; } }

/* ---------- the portal copy reads itself in, 2026-10-14 (language draft) ---------- */
.wd-on .wd { opacity: .14; transition: opacity .18s linear; }

/* ---------- the valley in brand shapes, 2026-10-14 (language draft) ----------
   Sil drawn in the scene's own pixels: the canvas carries his walk; the vector
   copy is hidden here and only used by the leap into the letter Sil. His legs
   and shadow lose their soft edges to match. */
.pxe-sil > svg { display: none; }
.pxe-sil .pxe-pix { display: block; width: 100%; height: auto; image-rendering: pixelated; transform-origin: 50% 100%; margin-bottom: 11%; }
.pxe-sil.walk .pxe-pix { animation: pxv-step .34s steps(2) infinite alternate; }
.pxe-sil.hop .pxe-pix { animation: pxv-hop .5s steps(5); }
.pxe-sil .lg { width: 7.5%; height: 13%; }
.pxe-sil .lg::after { left: -50%; width: 200%; height: 34%; }
.pxe-sil .shadow { border-radius: 0; height: 6%; left: 22%; right: 22%; background: color-mix(in srgb, var(--tide) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .pxe-sil.walk .pxe-pix, .pxe-sil.hop .pxe-pix { animation: none; } }

/* the portal changes height as it plays through its areas; Chrome's scroll
   anchoring then moved the page to compensate, so the page lurched by hundreds
   of pixels while someone was reading. Off for the whole page (2026-10-14). */
html { overflow-anchor: none; }

/* ---------- narrow widths, 2026-10-14 (language draft) ----------
   While the portal window is still tipped back in 3D its near edge projects
   wider than the page (to 816px on an 800px screen), so the page could slide
   sideways and clip the playback bar. Clip the overflow at the stage only:
   clipping the whole page (html) stopped the letter field below from pinning,
   so the code vanished as you scrolled. The second section stays centred
   down to phone width. */
.pxa-stage { overflow-x: clip; }
@media (max-width: 960px) and (min-width: 561px) {
  #portal .centre { text-align: center; }
  #portal .centre h2, #portal .centre p { margin-left: auto; margin-right: auto; }
}

/* ---------- guarantees: draw and rise, 2026-10-15 (language draft) ---------- */
.gq-draw { border-top-color: transparent; }
.gq-draw::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(255, 255, 255, .16); transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); z-index: 1; }
.gq-draw.in::before { transform: scaleX(1); }
.gq-draw > li { position: relative; border-left-color: transparent !important; }
.gq-draw > li + li::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .12); transform: scaleY(0); transform-origin: top center; transition: transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(.3s + var(--i) * .12s); }
.gq-draw.in > li + li::before { transform: scaleY(1); }
.gq-draw > li > * { opacity: 0; transform: translateY(22px); filter: blur(4px); transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), filter .55s cubic-bezier(.22, 1, .36, 1), color .3s var(--ease); transition-delay: calc(.15s + var(--i) * .07s + var(--k) * .06s); }
.gq-draw.in > li > * { opacity: 1; transform: none; filter: none; }
.gq-draw .gq-tag i { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) calc(.35s + var(--i) * .07s); }
.gq-draw.in .gq-tag i { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .gq-draw *, .gq-draw::before, .gq-draw > li::before { transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; } }

/* ---------- the portal as one journey, 2026-10-15 (language draft) ----------
   Area changes flow instead of cutting: the views share one space (so the
   window keeps a steady height) and the old one slides out left as the new
   one slides in from the right, its rows settling after; the caption cards
   crossfade with a slight rise; the nav highlight glides (site.js). */
.pxa-stage .pw-main { display: grid; grid-template-rows: auto 1fr; }
.pxa-stage .pw-band { grid-row: 1; grid-column: 1; }
.pxa-stage .pw-view, .pxa-stage .pw-view[hidden] { display: block; grid-row: 2; grid-column: 1; transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.pxa-stage .pw-view[hidden] { visibility: hidden; opacity: 0; transform: translateX(36px); pointer-events: none; transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s .6s; }
.pxa-stage .pw-view[hidden].leaving { transform: translateX(-36px); }
.pxa-stage .pw-view.gen .pw-rows li { animation-delay: .18s; }
.pxa-stage .pw-view.gen .pw-rows li:nth-child(2) { animation-delay: .28s; }
.pxa-stage .pw-view.gen .pw-rows li:nth-child(3) { animation-delay: .38s; }
.pxa-stage .pw-view.gen .pw-rows li:nth-child(4) { animation-delay: .48s; }
.pxa-stage .pcard { display: grid; }
.pxa-stage .pcard .pc, .pxa-stage .pcard .pc[hidden] { display: block; grid-row: 1; grid-column: 1; transition: opacity .55s cubic-bezier(.22, 1, .36, 1) .1s, transform .7s cubic-bezier(.22, 1, .36, 1) .1s, visibility 0s; }
.pxa-stage .pcard .pc[hidden] { visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1), visibility 0s .5s; }
.pxa-stage .pcard .pc.in { animation: none; }
.pw-side.glide { position: relative; }
.pw-side.glide .pw-ind { position: absolute; left: 0; top: 0; background: var(--ink); z-index: 0; pointer-events: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1), width .6s cubic-bezier(.22, 1, .36, 1), height .6s cubic-bezier(.22, 1, .36, 1); }
.pw-side.glide .pw-nav { position: relative; z-index: 1; transition: color .4s cubic-bezier(.22, 1, .36, 1); }
.pw-side.glide .pw-nav.on { background: none; }
.pw-side.glide .pw-nav::before { transition: background .4s, box-shadow .4s; }
@media (prefers-reduced-motion: reduce) { .pxa-stage .pw-view, .pxa-stage .pcard .pc, .pw-side.glide .pw-ind, .pw-side.glide .pw-nav { transition: none !important; } }

/* ---------- the studio editor, smoother, 2026-10-15 (language draft) ---------- */
.st5-win { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(15, 27, 25, .45); }
.st5-tabs.glide { position: relative; }
.st5-tabs.glide .st5-ind { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--white) 6%, var(--ink)); border-top: 2px solid var(--coral); z-index: 0; pointer-events: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1), width .6s cubic-bezier(.22, 1, .36, 1); }
.st5-tabs.glide button { position: relative; z-index: 1; transition: color .4s cubic-bezier(.22, 1, .36, 1); }
.st5-tabs.glide button.on { background: none; }
.st5-tabs.glide button.on::after { display: none; }
@keyframes st5-in { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.st5-ed pre.in { animation: st5-in .6s cubic-bezier(.22, 1, .36, 1); }
.st5-out .vgl { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); transform: scale(.98); }
.st5-out .vgl.on { transform: none; }
.st5-cap.swap h3, .st5-cap.swap p { animation: st5-cap .6s cubic-bezier(.22, 1, .36, 1) both; }
.st5-cap.swap p { animation-delay: .06s; }
@keyframes st5-cap { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .st5-tabs.glide .st5-ind, .st5-out .vgl { transition: none; } .st5-ed pre.in, .st5-cap.swap h3, .st5-cap.swap p { animation: none; } }

/* ---------- the studio intro: one statement, 2026-10-15 (language draft) ----------
   Concept A of _process/studio-intro-concepts-2-2026-10-15, in the site's own
   type: the section heading style, the portal section's paragraph, the
   guarantees' Coral tag and the square button pair. */
.st5 .si { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); will-change: transform; }
.st5 .si.sa { padding: clamp(56px, 9vh, 104px) 0 clamp(48px, 7vh, 88px); }
.sa-tag { grid-column: 1 / span 3; align-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: .9em; font-size: 12px; color: var(--grey); }
.sa-tag i { width: 6px; height: 6px; background: var(--coral); }
.sa-r { grid-column: 4 / -1; }
.sa-h { font-size: clamp(36px, 4.6vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -.045em; max-width: 19ch; text-wrap: balance; }
.sa-h em { letter-spacing: -.03em; }
.sa-h .pale .w { color: color-mix(in srgb, var(--ink) 24%, var(--white)); transition: color .25s linear; }
.sa-h .pale .w.ink { color: var(--ink); }
.sa-p { font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; margin-top: 28px; color: var(--grey); }
.sa-p + .sa-p { margin-top: 1em; }   /* D-184: the studio text is two paragraphs */
.sa-acts { margin-top: 32px; }
.st5 .st5-win { transform-origin: 50% 0; will-change: transform; }
@media (max-width: 860px) { .st5 .si > * { grid-column: 1 / -1 !important; } .sa-tag { margin: 0 0 20px; } }


/* ==== Pricing pixel sky: start ==== */
/* From _process/pricing-colour-concepts-2026-10-15, concept D (Anna, 2026-10-15):
   as the pricing section reaches the middle of the screen, the valley's own pixel
   sky fades in behind it, its clouds drifting one by one, and the price panels
   become frosted cards. It fades back out as you scroll away. */
#pricing, #pricing .pp-panel, #pricing .pp-seg, #pricing .pp-tab { transition: background-color .9s cubic-bezier(.22, 1, .36, 1), color .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s cubic-bezier(.22, 1, .36, 1), border-color .6s cubic-bezier(.22, 1, .36, 1); }
#pricing .pp-head h2, #pricing .pp-head p, #pricing .pp-info h3, #pricing .pp-info li, #pricing .pp-d, #pricing .pp-amt, #pricing .pp-pre, #pricing .pp-note, #pricing .pp-info .btn { transition: color .6s cubic-bezier(.22, 1, .36, 1), background-color .6s cubic-bezier(.22, 1, .36, 1); }

#pricing { position: relative; isolation: isolate; }
/* the gradient flows (Anna, 2026-10-15): a long eased fade in at the top and out at the
   bottom; the sky keeps square pixels and sits on its horizon at the bottom, as in the
   valley; above it a soft wash in the sky's own colours, so there is no top edge */
#pricing .pp-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--g, 0);
  background: linear-gradient(to bottom, var(--white) 0%, color-mix(in srgb, var(--mist) 22%, var(--white)) 45%, color-mix(in srgb, var(--mist) 42%, var(--white)) 100%);
  --fade: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.22) 14%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.8) 34%, #000 44%, #000 64%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 93%, transparent 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade); }
#pricing .pp-sky i { position: absolute; top: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; image-rendering: pixelated; }
#pricing .pp-sky .sky { width: 100%; }
/* clouds drift one by one (Anna, 2026-10-15): each cloud is cut out of the valley's
   cloud layer and gets its own speed, depth and gentle bob, so they never move as a block */
#pricing .pp-sky .pc { position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; will-change: transform; }
#pricing.dk .pp-panel { background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 30px 60px -36px rgba(15, 27, 25, .35); }
#pricing.dk .pp-seg { background: rgba(255, 255, 255, .6); }
/* ==== Pricing pixel sky: end ==== */

/* ==== Contact and footer, one room: start ==== */
/* From _process/contact-footer-concepts-2-2026-10-15, concept A (Anna, 2026-10-15):
   the contact section no longer cuts off into the ink footer. The footer turns oxblood
   too, so the two are one continuous space; a fine line runs where the section ends
   and Sil stands whole on it, instead of being sliced by the edge. */
.foot { background: var(--oxblood); }
.cx4::after { content: ""; position: absolute; left: var(--m); right: var(--m); bottom: 0; height: 1px; background: color-mix(in srgb, var(--white) 26%, var(--oxblood)); }
.cx4.hi .cx-sil { transform: none; }
/* ==== Contact and footer, one room: end ==== */

/* ==== Phone fixes: start ==== */
/* Phone pass (Anna, 2026-10-15), three things seen at 375px wide:
   1. the pricing tabs wrapped, leaving "Creative portal" alone on a second line:
      they now stay on one line, a touch smaller, down to 320px;
   2. Sil's "A person reads every one." ran off the right edge: on phones Sil goes back
      to the left margin (as on desktop), so the bubble has room beside him;
   3. the footer's Dublin column sat under the first column, indented out of line: the
      first column now runs full width, with Pages and Dublin side by side under it. */
@media (max-width: 560px) {
  .pp-seg { flex-wrap: nowrap; white-space: nowrap; }
  .pp-tab { font-size: 13px; padding: 11px clamp(7px, 2.4vw, 12px); }
  /* QA 2026-10-21: a fifth tab (Starter pack, D-221) made the row wider than a phone, so the
     page scrolled sideways. The row stays on one line and scrolls inside the column instead,
     from margin to margin; centred while it fits (auto margins), started at the left once it
     does not; the open tab is slid into view (site.js) */
  .pp-tabs { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); padding: 12px var(--m) 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pp-tabs::-webkit-scrollbar { display: none; }
  /* QA round two, 2026-10-21: at rest the last tab and its badge were cut at the screen edge with
     nothing to say the row scrolls; the right edge now fades while tabs sit off screen, as the
     portal strip does (site.js sets .more) */
  .pp-tabs.more { -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, var(--ink) calc(100% - 48px), transparent); }
  .pp-seg { flex: none; margin: 0 auto; }
  .cx-sil { left: var(--m); right: auto; }
}
/* the same footer columns on tablets (QA 2026-10-21: at 820 Dublin wrapped under the email, indented) */
@media (max-width: 960px) {
  .foot .fc-a { grid-column: 1 / -1; }
  .foot .fc:nth-child(2) { grid-column: 1 / span 6; padding-left: 0; }
  .foot .fc:nth-child(3) { grid-column: 7 / -1; }
}
@media (max-width: 400px) { .cx-say { font-size: 13px; padding: 8px 11px; } }   /* still fits beside him at 320px */
/* 4. Sil peeking over the price panel reached up into the tab bar, his head just under the
      "Popular" badge: a little more room under the tabs, and he is a touch smaller, so there
      is clear space between them */
@media (max-width: 560px) { .pp-tabs { margin-bottom: 24px; } .pp-peek { width: 68px; top: -32px; } }
/* the Popular badge sits inside its own tab on narrow phones, so it no longer hangs past the tab */
@media (max-width: 420px) { .pp-tab[data-pop]::after { right: 2px; } }
/* ==== Phone fixes: end ==== */


/* ==== Contact curtain: start ==== */
/* From _process/contact-envelop-concepts-2026-10-15, concept A (Anna, 2026-10-15): like the
   valley into the dark section, an oxblood curtain with a stepped, block-built top edge rises
   from the bottom of the screen over the pricing section, just ahead of the contact section,
   and becomes it. The text and the two doors slide up into place as each comes up the screen. */
.env-on #contact { z-index: 2; }
.env-on .foot { position: relative; z-index: 3; }
/* what is inside the contact section rises into place piece by piece as each piece
   comes up the screen (scroll-linked, so the inline values drive it, not transitions) */
.env-on #contact .l > * { transition: none !important; will-change: transform, opacity; }
.env-on #contact .door { transition: border-color .3s, background .3s; will-change: transform, opacity; }
.env-layer { position: fixed; inset: 0; z-index: 1; pointer-events: auto;   /* hit-testable where it shows, so the menu reads it as dark */ background: var(--oxblood); visibility: hidden; }

.env-layer.curtain { top: auto; height: 0; clip-path: polygon(0 34px, 7% 34px, 7% 12px, 15% 12px, 15% 40px, 24% 40px, 24% 0, 33% 0, 33% 26px, 44% 26px, 44% 8px, 55% 8px, 55% 36px, 64% 36px, 64% 4px, 74% 4px, 74% 30px, 85% 30px, 85% 14px, 93% 14px, 93% 38px, 100% 38px, 100% 100%, 0 100%); }
/* ==== Contact curtain: end ==== */


/* ==== Phone flow: guarantees: start ==== */
/* Guarantees on phones (Anna, 2026-10-15). On an iPhone the five promises stack, but
   the draw and rise kept its desktop pieces: the hairline that draws down between
   columns sat right against the left edge of every item after the first, and the
   blur as the text rose smeared it at the sides. On phones the list is now plain
   rules: a fixed top rule and a divider under each item, no drawn lines, no blur.
   Each item simply fades and rises on its own as it comes up the screen (site.js
   marks it gq-in), so nothing is cut and nothing plays off screen. Desktop unchanged. */
@media (max-width: 560px) {
  .gq-draw { border-top-color: rgba(255, 255, 255, .12); }
  .gq-draw::before, .gq-draw > li + li::before { content: none; }
  .gq-draw > li > *, .gq-draw.in > li > * { opacity: 0; transform: translateY(14px); filter: none;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1), color .3s var(--ease); transition-delay: calc(var(--k) * .07s); }
  .gq-draw > li.gq-in > *, .gq-draw.in > li.gq-in > * { opacity: 1; transform: none; }
  .gq-draw .gq-tag i { transform: none; transition: transform .35s var(--ease); }
}
/* ==== Phone flow: guarantees: end ==== */

/* ==== Phone flow: built seam: start ==== */
/* The dark section on phones (Anna, 2026-10-15), from an iPhone at 375px wide:
   1. "a white line every time you scroll above the robot": the valley's pale pink sky
      runs right down to the bottom edge of the stage, under the dark ground and the
      ink curtain, and that edge sits on a fraction of a pixel. The valley layers move
      as separate layers on iOS, so while scrolling their bottom edges slip by a hair
      and the sky showed through as a light line between the curtain and the dark
      section. A strip of ink now sits across the seam, 3px above it and 1px below,
      above the valley and the curtain, so the edge is ink on ink however it rounds.
   2. "the code cuts off": on phones the letter field is a 340px band, not pinned, so
      the code started and stopped on hard straight lines as it scrolled by. It now
      fades in from the ink at the top and out at the bottom, clear of Sil.
   3. Spacing: the copy keeps the full width (the gap kept for the desktop panel goes),
      and the space between points and at the end of the section is fixed instead of
      a share of the screen height, so it does not shift as the address bar moves. */
@media (max-width: 560px) {
  .built .tart::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 4px; background: var(--ink); z-index: 4; pointer-events: none; }
  .built .tart canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 64px), transparent 100%); }
  .built { padding-bottom: 72px; }
  .built .btext { padding: 20px 0 48px; }
  .built .btext .bl-list { margin-top: 64px; gap: 64px; }
}
/* ==== Phone flow: built seam: end ==== */

/* ==== Phone flow: portal: start ==== */
/* Phone flow for the second section (Anna, 2026-10-15): on a phone the spacing here was
   set in vh, which some in-app browsers change as the address bar shows and hides, so
   the section changed length under your finger. On phones it is set in pixels instead,
   and tidied: a little less air above the heading, the playback bar closer to the copy,
   the same gap above and below the window, and the valley kept at 360px. The window's
   scale-in for phones is in site.js ("Phone flow: portal"). */
@media (max-width: 560px) {
  .portal .centre { padding: 56px 0 8px; }
  .pxa-stage { padding: 20px var(--m) 360px; }
  .pxw { inset: -120px 0 0 0; }
  .pxa-stage .pxa-bar { margin-bottom: 14px; }
}
/* ==== Phone flow: portal: end ==== */

/* ==== Phone flow: studio and perf: start ==== */
/* The contact curtain, moved rather than resized (Anna, 2026-10-15): it is always a screen
   and 48px tall and site.js slides it up by transform, so it no longer lays the page out
   on every frame of the rise. Its edge lands exactly where the old height put it, at every
   width. */
.env-layer.curtain { top: -48px; bottom: 0; height: auto; will-change: transform; }
/* Phone pass on spacing and touch (Anna, 2026-10-15), at 375px and 320px:
   1. the price panel kept 32px inside an 18px gutter, so its content sat 50px in and the
      card inside it was cramped: 24px inside on phones;
   2. the pricing tabs, the contact chips and the footer's page links were 35, 37 and 25px
      tall: now at least 40px to tap, the footer links without moving the column's first
      and last line;
   3. the contact section's email link and the footer's email were 25 to 28px tall: a
      larger tap area around each, with no change to how they look. */
@media (max-width: 560px) {
  .pp-panel { padding: 24px; }
  .pp-tab { min-height: 40px; }
  .cx .chip { min-height: 40px; }
  .cx .mail { position: relative; }
  .cx .mail::after { content: ""; position: absolute; inset: -8px 0; }
}
@media (max-width: 560px), (max-width: 960px) and (pointer: coarse) {   /* footer tap areas on touch tablets too (QA 2026-10-21) */
  .foot-nav { margin: -8px 0; }
  .foot-nav a { display: block; padding: 8px 0; line-height: 24px; }
  .foot .big a { position: relative; }
  .foot .big a::after { content: ""; position: absolute; inset: -8px 0; }
}
/* ==== Phone flow: studio and perf: end ==== */

/* ==== Desktop polish: built and studio: start ==== */
/* Desktop pass on "Built like a system" and the studio (Anna, 2026-10-15), at 1440, 1280
   and 1024 wide. Phones (560px and under) are left as they are.
   1. The heading kept to the copy column less its 24px gap, a hair too narrow under about
      1400px, so it broke as "Built like a / system, so it never / forgets the brand.". It
      may now run into that gap (its 13ch measure still holds), so it reads "Built like a
      system, / so it never forgets / the brand." at every desktop width, as at 1440.
   2. The letter field stopped on a hard straight line as it let go at the end of the copy:
      its last 120px now fade into the ink, as on phones.
   3. Guarantees in two rows (1100px and under): the fourth lost its 24px inset to an older
      rule, so it sat 24px left of the one above it, and still drew a hairline down its left
      edge at the section margin. Both fixed.
   4. Editor tabs: a hover state, and the focus ring drawn inside the tab, since the tab row
      and the rounded window clip anything outside it.
   5. The caption's title column keeps one width (12em, the longest title), so the line
      beside it no longer jumps left and right at every tab; site.js keeps the caption at
      the height of its tallest text, so the window stops changing height between tabs. */
@media (min-width: 961px) { .btext h2 { margin-right: -24px; } }
@media (min-width: 761px) {
  .built .tart canvas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 120px), transparent 100%); }
}
@media (max-width: 1100px) and (min-width: 641px) {
  .gq-cols li:nth-child(4) { padding-left: 24px; }
  .gq-draw > li:nth-child(3n + 1)::before { content: none; }
}
@media (hover: hover) and (min-width: 561px) {
  .st5-tabs button:not(.on):hover { color: color-mix(in srgb, var(--white) 82%, var(--ink)); }
}
@media (min-width: 561px) { .st5-tabs button:focus-visible { outline-offset: -2px; } }
@media (min-width: 861px) { .st5-cap h3 { min-width: 12em; } }
/* ==== Desktop polish: built and studio: end ==== */

/* ==== Desktop polish: type scale: start ==== */
/* One type scale for the home page (Anna, 2026-10-15). The headings had grown
   their own clamp() values block by block: the pricing H2 ran smaller than
   the other section H2s, the contact H2 ran larger than the hero H1, the
   sub-heads ranged from 33 to 43px, ledes from 16 to 19px, tags at 12px.
   Each role now has one size. Scoped to 561px and up: phones keep their own
   pass (Phone fixes, Phone flow). Sizes at 1440 / 1280 / 1024 wide:

   role      token        clamp                      1440   1280   1024   lh    tracking  used by
   display   --t-display  clamp(40px, 5.4vw, 92px)   77.8   69.1   55.3   .98   -.045em   hero H1, contact H2 (the closing statement)
   h2        --t-h2       clamp(36px, 4.6vw, 76px)   66.2   58.9   47.1   1     -.045em   portal, built, studio, pricing H2
   h3        --t-h3       clamp(26px, 2.4vw, 36px)   34.6   30.7   26     1.1   -.03em    What we guarantee, the built points (serif),
                                                                                         the offer names (serif), the two doors
   h4        --t-h4       clamp(19px, 1.5vw, 22px)   21.6   19.2   19     1.15  -.02em    guarantee titles, editor caption, portal card
   lede      --t-lede     clamp(16px, 1.3vw, 19px)   18.7   16.6   16     1.55  0         every section's opening paragraph, hero sub
   body      16px                                                         1.55  0         the built points, offer and door descriptions
   small     15px                                                         1.55  0         guarantee text, editor caption, offer lists
   ui        14px                                                                         buttons, portal card text, open status
   caption   13px                                                         1.55  0         tags, form labels, price notes, footer heads
   em        Charis SIL italic at the same size as the line; -.03em on display and h2 (the sans is -.045em), -.02em below.
   The illustrations (hero board, portal window, editor) keep their own small
   interface sizes, 11 to 13px. */
:root { --t-display: clamp(40px, 5.4vw, 92px); --t-h2: clamp(36px, 4.6vw, 76px); --t-h3: clamp(26px, 2.4vw, 36px); --t-h4: clamp(19px, 1.5vw, 22px); --t-lede: clamp(16px, 1.3vw, 19px); }
@media (min-width: 561px) {
  .hero h1, .cx h2 { font-size: var(--t-display); line-height: .98; letter-spacing: -.045em; }
  #portal .centre h2, .btext h2, .sa-h, .pp-head h2 { font-size: var(--t-h2); line-height: 1; letter-spacing: -.045em; }
  .hero h1 em, .cx h2 em, #portal .centre h2 em, .btext h2 em, .sa-h em, .pp-head h2 em { letter-spacing: -.03em; }
  .gq-title, .cx4 .dh b { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.03em; }
  .bl-list h3, .pp-info h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.02em; }   /* serif; .pp-info h3 sat on a 67px line */
  .gq-cols h4, .st5-cap h3, .pc h3 { font-size: var(--t-h4); line-height: 1.15; letter-spacing: -.02em; }
  .hero .sub, #portal .centre p, .blede, .sa-p, .pp-head p, .cx .lead, .bl-sub { font-size: var(--t-lede); line-height: 1.55; }
  .bl-d, .pp-d, .cx4 .dh .d { font-size: 16px; line-height: 1.55; }
  .gq-cols p { font-size: 15px; }
  .gq-tag, .sa-tag, .cx label { font-size: 13px; }
  .cb-pc .cb-tag { font: 500 12px/1 var(--sans); letter-spacing: 0; }   /* the hero piece labels inherited their piece's type: the headline's weight and tight tracking */
}
/* ==== Desktop polish: type scale: end ==== */

/* ==== Desktop polish: global UI: start ==== */
/* Global pass on desktop (Anna, 2026-10-15). */
/* 1. Section rhythm: every section's heading now sits the same distance below
   the section's top edge, and every section ends the same distance below its
   last line (was 81, 90, 81 and 108px at the top; 108 to 192px at the foot).
   The portal runs into the valley and the contact section is centred in the
   screen, so both keep their own bottom. Phones keep their pixel spacing. */
:root { --sec-y: clamp(72px, 12vh, 140px); }
@media (min-width: 561px) {
  .portal .centre, .st5 .si.sa { padding-top: var(--sec-y); }
  .mod.pp { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
  #built, #studio { padding-bottom: var(--sec-y); }
  .built .gq { padding-bottom: 0; }
}
@media (min-width: 761px) { .built .btext { padding-top: var(--sec-y); } }   /* below 761px the word field sits above the copy */
/* 2. Buttons: every .btn presses in a touch, as the hero's do; a focused button
   in a pair sits above its neighbour so its whole ring shows; the studio's pair
   fills with the same wipe as the hero's pair, so the one component behaves
   the same in both places. */
.btn { transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .15s var(--ease); }
.btn:active { transform: scale(.985); }
.acts .btn:focus-visible { position: relative; z-index: 1; }
.sa-acts .btn { position: relative; isolation: isolate; overflow: hidden; transition: color .35s var(--ease), transform .15s var(--ease); }
.sa-acts .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease); }
.sa-acts .btn:hover::before, .sa-acts .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.sa-acts .btn.p, .sa-acts .btn.p:hover { background: var(--ink); color: var(--white); }
.sa-acts .btn.p::before { background: var(--oxblood); }
.sa-acts .btn.s, .sa-acts .btn.s:hover { background: var(--white); color: var(--ink); }
.sa-acts .btn.s::before { background: var(--ink); }
.sa-acts .btn.s:hover, .sa-acts .btn.s:focus-visible { color: var(--white); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } .sa-acts .btn::before { transition: none; } }
/* 3. Keyboard: a skip link (markup in build_language_draft.py); the guarantees,
   which take focus, show the same Coral ring as everything else (their own
   rule had switched it off for a faint 1px line); the contact fields thicken
   their underline when focused; and a closed door's fields leave the tab
   order, so Tab no longer walks through 17 controls nobody can see. */
.skip { position: absolute; left: var(--m); top: 12px; z-index: 60; transform: translateY(-200%); background: var(--ink); color: var(--white); font: 500 15px/1 var(--sans); padding: 14px 16px; border-radius: 9px; text-decoration: none; }
.skip:focus { transform: none; }
main:focus { outline: none; }   /* the skip link's target (tabindex -1), so focus lands there in every browser */
.gq-cols li:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
.cx input:focus-visible, .cx textarea:focus-visible { box-shadow: 0 1.5px 0 var(--white); }
.cx4 .db { visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s .5s; }
.cx4 .door.on .db { visibility: visible; transition: grid-template-rows .5s var(--ease), visibility 0s; }
/* 4. Nav: over the oxblood contact section and footer, the Oxblood "Send enquiry"
   lost its edge and read as plain text in the glass island; on any dark ground
   it now keeps a fine light edge. Its colours are unchanged. */
.hb-isle.on-dark .hb-cta:not(:hover) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
/* over an Oxblood surface the Oxblood pill vanished (QA 2026-10-21): site.js adds .on-ox there */
.hb-isle.on-ox .hb-cta:not(:hover) { background: var(--coral); color: var(--ink); box-shadow: none; }
.hb-isle.on-ox .hb-cta:hover { background: var(--white); color: var(--ink); }
.hb-cta[aria-current] { cursor: default; }
/* ==== Desktop polish: global UI: end ==== */

/* ==== Desktop polish: pricing to footer: start ==== */
/* Desktop pass on pricing, contact and the footer (Anna, 2026-10-15), at 1440, 1280
   and 1024 wide. Phones (560px and under) are left as they are. */
/* 1. Pricing: the panel took the height of whichever offer was showing (543, 568 or
      611px at 1440), so choosing a tab moved everything below it, the curtain too.
      The four offers now share one space, so the panel keeps the tallest height. */
@media (min-width: 821px) {
  .js .pp-panel { display: grid; }
  .js .pp-pane { display: grid; grid-area: 1 / 1; visibility: hidden; }
  .js .pp-pane.on { visibility: visible; }
}
/* 2. Pricing: the section's hairline ran under the faded edge of the pixel sky, a hard
      line across the soft fade just before the curtain rises; the curtain is the edge. */
@media (min-width: 561px) { #pricing { border-bottom-color: transparent; } }
/* 3. Contact: "overflow: hidden" (for Sil rising from the edge) made the section a scroll
      box, so the left column's "sticky" never stuck and was pushed 47 to 74px below the
      doors instead. "clip" cuts Sil off the same way without that, so the open line lines
      up with the first door and the column stays in view beside a long open form. */
@media (min-width: 861px) { .cx4 { overflow: hidden; overflow: clip; } }
/* 4. Contact: each door is a form, which the site sets as a grid with a 20px gap, so a
      closed door had 20px more space under its last line than over its first. */
@media (min-width: 561px) { .cx4 .door { gap: 0; } }
/* 5. Contact: the open/closed dot was squeezed into an oval (6 by 9px) when the line
      wrapped; it keeps its shape and sits on the first line; no single word ends the
      line or the lede. */
.cx4 .open i { flex: none; }
@media (min-width: 561px) {
  .cx4 .open { align-items: flex-start; }
  .cx4 .open i { margin-top: 6px; }
  .cx4 .open span, .cx .lead { text-wrap: pretty; }
}
/* 6. Contact: a field left empty drew the contact page's Coral box around itself; here
      it is a thicker Blush underline, matching the fields' underline style. */
.cx input.bad, .cx textarea.bad { box-shadow: 0 1.5px 0 var(--blush) !important; }
/* 7. Footer: Pages and Dublin now sit on the same columns as the doors above, so the
      contact section and footer read as one room (they were 14 to 18px out of line). */
@media (min-width: 961px) {
  .foot-grid { column-gap: clamp(16px, 2vw, 32px); }
  .foot .fc:not(.fc-a) { padding-left: 0; }
}
/* ==== Desktop polish: pricing to footer: end ==== */

/* ==== Desktop polish: hero and portal: start ==== */
/* Desktop pass on the hero and the portal section (Anna, 2026-10-15), at 1440, 1280 and
   1024 wide. Phones (560px and under) are left as they are.
   1. Hero board, pieces loose: only three of the six labels showed. Typeface, Palette and
      Brand shapes clip to their rounded corners, and that clipped the label above them too.
      Loose, those pieces no longer clip; the image and the end chips round their own
      corners. (site.js also moves the type and copy pieces a touch, so their labels clear
      the board's top edge and the image.) The brand check chip, invisible at the board's
      top left while the pieces are loose, no longer blocks dragging the headline piece.
   2. The hero filled the screen plus 1px: the nav is 65px tall, not 64.
   3. The output chips and the portal's Play button press in a touch, as the buttons do,
      and their hover eases; Play takes the primary button's Oxblood hover.
   4. Portal window: the brief card ran 20 to 30px out of the bottom of the Mist band at
      every desktop height, cutting its Brief tag and send button in half. The band now
      grows to fit the card, 16px clear above and below; the window keeps its height.
   5. The "Just drafted" card hung 6px from the screen edge at 1024 wide. It now stops 24px
      outside the window, as the caption card on the right does; wider, it is unchanged.
   6. The caption card's titles no longer leave one word on a line ("email.", "one place."),
      and the card text and the section's lede wrap more evenly. */
@media (min-width: 561px) {
  .cb-board:not(.cb-built) .cb-p-type, .cb-board:not(.cb-built) .cb-p-sw, .cb-board:not(.cb-built) .cb-p-shape { overflow: visible; }
  .cb-board:not(.cb-built) .cb-p-shape svg { border-radius: 10px; }
  .cb-board:not(.cb-built) .cb-p-sw i:first-of-type { border-radius: 10px 0 0 10px; }
  .cb-board:not(.cb-built) .cb-p-sw i:last-child { border-radius: 0 10px 10px 0; }
  .cb-check { pointer-events: none; }   /* hidden at the board's top left while loose, it took the press meant for the headline piece */
  .cb-ask .cb-seg button { transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .15s var(--ease); }
  .cb-ask .cb-seg button:active { transform: scale(.97); }
  .pxa-play { transition: background-color .3s var(--ease), transform .15s var(--ease); }
  .pxa-play:hover { background: var(--oxblood); }
  .pxa-play:active { transform: scale(.96); }
  .pxa-stage .pw-band { height: auto; min-height: clamp(120px, 17vh, 170px); padding-top: 16px; padding-bottom: 16px; }
  .pc h3 { text-wrap: balance; }
  .pc p, #portal .centre p { text-wrap: pretty; }
}
@media (min-width: 961px) {
  .hero { min-height: calc(100vh - 65px); min-height: calc(100svh - 65px); }
  .pxa-pop { left: max(calc(var(--m) - 24px), calc(50% - 584px)); }
}
@media (prefers-reduced-motion: reduce) { .cb-ask .cb-seg button:active, .pxa-play:active { transform: none; } }
/* Phones too (Anna, 2026-10-15): the same three hero labels were hidden and the brief card was cut
   off in the portal window's band, so fixes 1 and 4 apply at every width */
@media (max-width: 560px) {
  .cb-board:not(.cb-built) .cb-p-type, .cb-board:not(.cb-built) .cb-p-sw, .cb-board:not(.cb-built) .cb-p-shape { overflow: visible; }
  .cb-board:not(.cb-built) .cb-p-shape svg { border-radius: 10px; }
  .cb-board:not(.cb-built) .cb-p-sw i:first-of-type { border-radius: 10px 0 0 10px; }
  .cb-board:not(.cb-built) .cb-p-sw i:last-child { border-radius: 0 10px 10px 0; }
  .cb-check { pointer-events: none; }
  .pxa-stage .pw-band { height: auto; min-height: 120px; padding-top: 14px; padding-bottom: 14px; }
}
/* ==== Desktop polish: hero and portal: end ==== */

/* ==== Phone menu, island drop: start ==== */
/* The phone menu (860px and under), from _process/menu-concepts-2026-10-15, concept B (Anna,
   2026-10-15). It replaces the square D-104 sheet and the rounded full-width panel tried after it.
   The Menu island opens into a small card under it, top right, over a lightly dimmed page: quiet
   rows with an arrow each, the current page marked with a Coral square, and Send enquiry as the
   last row (the nav hides it under 520px), with the studio's open line beneath. Tap outside the
   card or press Escape to close; it fades out. */
.menu { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; }
.menu-panel { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; transform: none; opacity: 1; color: inherit; }
.mrow { border-radius: 0; background: none; }
.mrow[aria-current] { background: none; }
.menu-foot { border-top: 0; }

.menu { padding: 12px var(--m); background: rgba(15, 27, 25, .2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.menu.open { opacity: 1; }
.menu-panel { margin-left: auto; width: min(300px, 100%); background: var(--white); color: var(--ink); border: 1px solid rgba(15, 27, 25, .12); border-radius: 14px; padding: 6px; box-shadow: 0 24px 48px -20px rgba(15, 27, 25, .45); transform-origin: calc(100% - 40px) 26px; transform: scale(.86); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .25, 1.05), opacity .2s ease; }
.menu.open .menu-panel { transform: none; opacity: 1; }
.menu-top { min-height: 52px; padding: 0 0 0 12px; border: 0; }
.menu-top .wm { font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }   /* QA 2026-10-21: a 44px tap target */
.menu-x { font: 500 14px/1 var(--sans); background: var(--ink); color: var(--white); border: 1px solid var(--ink); border-radius: 9px; padding: 11px 16px; }
.menu-rows { gap: 0; padding: 6px 0; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 12px; border-radius: 9px; font: 500 17px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); transform: translateY(6px); opacity: 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, background .2s ease; }
.mrow::after { content: "\2192"; font-weight: 400; color: var(--grey); transition: transform .25s ease, color .25s ease; }
.mrow:hover { background: color-mix(in srgb, var(--mist) 45%, var(--white)); }
.mrow:hover::after { transform: translateX(3px); color: var(--ink); }
.menu.open .mrow { transform: none; opacity: 1; }
.menu.open .mrow:nth-child(1) { transition-delay: .06s; } .menu.open .mrow:nth-child(2) { transition-delay: .09s; } .menu.open .mrow:nth-child(3) { transition-delay: .12s; } .menu.open .mrow:nth-child(4) { transition-delay: .15s; } .menu.open .mrow:nth-child(5) { transition-delay: .18s; }
.mrow[aria-current] { background: color-mix(in srgb, var(--coral) 12%, var(--white)); }
.mrow[aria-current]::before { content: ""; width: 8px; height: 8px; background: var(--coral); margin-right: -4px; }
.mrow[aria-current] { justify-content: flex-start; } .mrow[aria-current]::after { margin-left: auto; }
.menu-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 0 0; border-top: 1px solid rgba(15, 27, 25, .1); margin-top: 2px; }
.menu-cta { justify-content: space-between; padding: 15px 12px; font-size: 16px; border-radius: 9px; }
.menu-foot .lab { order: 2; padding: 4px 12px 8px; color: var(--grey); }
.mrow:focus-visible, .menu-x:focus-visible, .menu-cta:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .menu, .menu-panel, .mrow { transition: none; } }
/* fixes after Anna's look on a phone (2026-10-15): the old sheet's ink rule under each row
   still showed (curved by the corners), the current row kept the old white text on the light
   Coral tint, and Send enquiry had lost its button styles with the panel it came from */
.menu .mrow { border-bottom: 0; }
.menu .mrow[aria-current] { color: var(--ink); }
.menu-cta { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1 var(--sans); text-decoration: none; background: var(--oxblood); color: var(--white); transition: background .3s var(--ease), color .3s var(--ease); }
.menu-cta:hover, .menu-cta[aria-current] { background: var(--coral); color: var(--ink); }
.menu-cta .hb-arr { transition: transform .3s var(--ease); }
.menu-cta:hover .hb-arr { transform: translateX(3px); }
/* ==== Phone menu, island drop: end ==== */

/* ==== Contact column stays put: start ==== */
/* Anna, 2026-10-15: the left column (open line, heading, lede) slid down the page as you scrolled,
   because it is sticky (D-130) and the desktop pass made sticky work again. It now scrolls with
   the page like everything else, at every width. */
.cx4 .l { position: static; }
/* ==== Contact column stays put: end ==== */

/* ==== Code band soft edges, small screens: start ==== */
/* Anna, 2026-10-15: "the text cuts off". From 561 to 760px wide (large phones on their side,
   small tablets) the letter field is also an unpinned band, but it kept hard top and bottom
   edges: the code started and stopped on straight lines. It now fades in and out like the
   phone band, and gets the same ink strip over the seam with the valley. */
@media (min-width: 561px) and (max-width: 760px) {
  .built .tart::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 4px; background: var(--ink); z-index: 4; pointer-events: none; }
  .built .tart canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 80px), transparent 100%); }
}
/* ==== Code band soft edges, small screens: end ==== */
/* every phone width (Nathan, 2026-10-21): a shorter field, the letter Sil near its top, close to where he lands from the bridge, the heading close behind; a short top fade */
@media (max-width: 760px) {
  .built .tart { height: 300px; }   /* phones (2026-10-21): shorter, the letter Sil near the top, the heading close behind */
  /* D-245 (Anna, 2026-10-25): his head sat in the top fade, on the seam with the valley, which showed as a light line on
     iPhones. The field is taller, he sits clear of the fade (site.js), and an Ink strip covers the seam under the fade */
  .built .tart { height: 380px; }
  /* the code rises out of the valley's dark ground: the field starts 26px up, inside the dark band under the trees, and
     fades in over those 26px, so there is no straight line where the letters begin (Nathan, 2026-10-21) */
  .built .tart { margin-top: -26px; z-index: 2; }
  .built .tart::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 22px; height: 8px; background: var(--ink); z-index: 4; pointer-events: none; }
  .built .tart canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 64px), transparent 100%); }
}


/* ==== Contact page, the conversation: start ==== */
/* The contact page as a conversation (Anna, 2026-10-16), from _process/contact-page-concepts-
   2026-10-16, concept D. The homepage closes on "Start with a conversation."; this page starts one:
   Sil asks four short questions, the answers build one short Netlify form ("contact"), and the
   thank-you is a receipt with the reply promise from the live Dublin clock. Facts to confirm with
   Nathan before launch: the reply promise (today / tomorrow morning) and the 30-minute demo. */
main { --pad: clamp(18px, 4.4vw, 64px); }
.k-l { display: block; font: 500 13px/1.3 var(--sans); margin: 18px 0 8px; color: inherit; }
.k-h { font-weight: 400; opacity: .62; margin-left: 6px; }
.k-in { width: 100%; font: 400 16px/1.4 var(--sans); color: inherit; background: transparent; border: 0; border-bottom: 1.5px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 35%, transparent); padding: 10px 0; border-radius: 0; outline: none; transition: border-color .25s var(--ease); }
.k-in:focus { border-bottom-color: currentColor; border-bottom-width: 2px; }
.k-in::placeholder { color: inherit; opacity: .45; }
.k-in.bad { border-bottom-color: var(--blush); border-bottom-width: 2px; }
/* the underline is the whole field: the site-wide boxed-form rings (input:focus, .bad) stay off it (QA 2026-10-21) */
.k-in:focus, .k-in.bad { box-shadow: none !important; }
.k-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .k-two { grid-template-columns: 1fr; } }
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chip { font: 500 14px/1 var(--sans); color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; padding: 11px 15px; min-height: 40px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); }
.k-chip:hover { border-color: currentColor; }
.k-chip:active { transform: scale(.97); }
.k-chip[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.k-chips.bad .k-chip { border-color: var(--blush); }
.k-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; font: 600 15px/1 var(--sans); padding: 17px 20px; border: 0; border-radius: 10px; cursor: pointer; background: var(--coral); color: var(--ink); transition: background .25s var(--ease), transform .12s var(--ease); }
.k-go:hover { background: var(--white); }
.k-go:active { transform: scale(.98); }
.k-arr { transition: transform .25s var(--ease); } .k-go:hover .k-arr { transform: translateX(4px); }
.k-small { font-size: 13px; opacity: .7; margin-top: 12px; }
.k-err { font-size: 13px; color: var(--blush); min-height: 1.2em; margin-top: 10px; }
.k-chip:focus-visible, .k-go:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.k-done { display: none; }
.k-sent > :not(.k-done):not(.k-keep) { display: none !important; }
.k-sent .k-done { display: block; animation: k-in .6s var(--ease) both; }
@keyframes k-in { from { opacity: 0; transform: translateY(10px); } }
.k-rcpt { margin-top: 18px; padding: 16px 0 0; border-top: 1px dashed color-mix(in srgb, currentColor 35%, transparent); font-size: 14px; line-height: 1.6; }
.k-rcpt dt { opacity: .6; font-size: 12px; margin-top: 8px; } .k-rcpt dd { margin: 2px 0 0; }
.k-live { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; }
.k-live i { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--blush); }
.k-live.open i { background: var(--coral); animation: cx4-pulse 2s infinite; }
.k-live b { font-weight: 600; }
.k-eye { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--sans); }
.k-eye::before { content: ""; width: 9px; height: 9px; background: var(--coral); }
.k-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: s; }
.k-steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; }
.k-steps li::before { content: "0" counter(s); grid-row: span 2; font: 500 12px/1.9 var(--sans); color: var(--coral); }
.k-steps b { font-weight: 600; }
.k-steps span { opacity: .72; font-size: 15px; line-height: 1.5; }
.k-faq details { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.k-faq details:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.k-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 17px/1.3 var(--sans); }
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after { content: "+"; font-weight: 400; transition: transform .3s var(--ease); }
.k-faq details[open] summary::after { transform: rotate(45deg); }
.k-faq p { padding: 0 0 18px; opacity: .75; max-width: 62ch; line-height: 1.55; }

.kd { background: var(--oxblood); color: var(--white); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 80px); padding: clamp(120px, 16vh, 180px) var(--pad) clamp(64px, 9vh, 110px); min-height: 100svh; align-items: start; }
.kd h1 { font-size: var(--t-display); font-weight: 600; line-height: .98; letter-spacing: -.045em; margin: 22px 0 0; }
.kd h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.kd-sub { font-size: var(--t-lede); line-height: 1.55; max-width: 44ch; margin: 22px 0 20px; color: color-mix(in srgb, var(--white) 80%, var(--oxblood)); }
.kd .k-live { color: color-mix(in srgb, var(--white) 86%, var(--oxblood)); }
.kd-side { position: sticky; top: 110px; }
.kd-price { font-size: 14px; opacity: .7; margin-top: 28px; max-width: 40ch; line-height: 1.5; }
.kd-mail { margin-top: 14px; } .kd-mail a { color: var(--white); }
.kd-chat { background: color-mix(in srgb, var(--white) 4%, var(--oxblood)); border: 1.5px solid color-mix(in srgb, var(--white) 20%, var(--oxblood)); border-radius: 20px; padding: clamp(18px, 2.4vw, 32px); min-height: 520px; display: flex; flex-direction: column; }
.kd-log { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.kd-log li { max-width: 82%; padding: 13px 16px; border-radius: 18px; line-height: 1.45; font-size: 16px; animation: kd-pop .45s var(--ease) both; }
.kd-log li.s { align-self: flex-start; background: var(--white); color: var(--oxblood); border-bottom-left-radius: 4px; display: flex; gap: 10px; align-items: flex-end; }
.kd-log li.s .kd-av { flex: none; width: 30px; color: var(--coral); margin-left: -2px; }
.kd-log li.s .kd-av svg { display: block; width: 100%; height: auto; }
.kd-log li.s .sil g[class^="x-"] { display: none; } .kd-log li.s .sil[data-x="happy"] .x-happy { display: inline !important; }
.kd-log li.u { align-self: flex-end; background: var(--coral); color: var(--ink); border-bottom-right-radius: 4px; font-weight: 500; }
.kd-log li.t { align-self: flex-start; background: var(--white); color: var(--oxblood); padding: 14px 16px; }
.kd-log li.t i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: currentColor; opacity: .3; animation: kd-dot 1s infinite; }
.kd-log li.t i:nth-child(2) { animation-delay: .15s; } .kd-log li.t i:nth-child(3) { animation-delay: .3s; }
@keyframes kd-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes kd-dot { 50% { opacity: 1; transform: translateY(-2px); } }
.kd-ans { border-top: 1px solid color-mix(in srgb, var(--white) 16%, var(--oxblood)); padding-top: 16px; }
.kd-q { animation: k-in .4s var(--ease) both; }
.kd-ok, .kd-skip { margin-top: 14px; font: 600 14px/1 var(--sans); padding: 13px 16px; border-radius: 999px; border: 0; cursor: pointer; background: var(--white); color: var(--oxblood); display: inline-flex; gap: 10px; }
.kd-skip { background: none; color: var(--white); border: 1px solid color-mix(in srgb, var(--white) 40%, transparent); }
.kd-ok:disabled { opacity: .4; cursor: default; }   /* the topics' carry-on, until one is picked (Anna, 2026-10-18) */
.kd-row { display: flex; gap: 8px; }
.kd .k-done { background: var(--white); color: var(--oxblood); border-radius: 16px; padding: 20px; }
.kd .k-done b, .kd .k-rcpt dd, .kd-log li.u { overflow-wrap: anywhere; }   /* a long email or URL breaks inside its card or bubble, not past it (QA 2026-10-21) */
.kd .k-thanks { font-size: var(--t-h4); font-weight: 600; margin-bottom: 8px; }
.kd-chat.k-sent .kd-log, .kd-chat.k-sent { display: flex; }
.kd-chat.k-sent > .kd-log { display: flex !important; }
@media (max-width: 900px) { .kd { grid-template-columns: 1fr; } .kd-side { position: static; } .kd-chat { min-height: 460px; } }
@media (prefers-reduced-motion: reduce) { .kd-log li, .kd-q { animation: none; } }
/* ==== Contact page, the conversation: end ==== */

/* ==== Contact page intro, in the homepage's terms: start ==== */
/* Anna, 2026-10-16: the intro beside Sil's conversation felt out of proportion, with a Coral square
   above and a dot below. It now reads like the homepage's closing section: the live open line on
   top (the same dot, size and colour as .cx4 .open), the heading at the section-heading size so it
   breaks in two even lines in the narrower column, the lede at the homepage measure, and the prices
   and email as one quiet block under a fine rule. */
.kd-side .k-live { margin: 0 0 28px; font-size: 14px; color: color-mix(in srgb, var(--white) 80%, var(--oxblood)); }
.kd-side .k-live i { width: 9px; height: 9px; margin-top: 5px; }
.kd-side .k-live [data-live-promise] { color: var(--white); }
.kd h1 { font-size: var(--t-h2); line-height: 1; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.kd-sub { font-size: var(--t-lede); line-height: 1.55; max-width: 40ch; margin: 24px 0 0; color: color-mix(in srgb, var(--white) 82%, var(--oxblood)); }
.kd-facts { margin-top: clamp(32px, 5vh, 48px); padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--white) 18%, var(--oxblood)); display: grid; gap: 10px; max-width: 40ch; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--white) 72%, var(--oxblood)); }
.kd-facts a { color: var(--white); text-underline-offset: 4px; }
.kd { align-items: start; }
.kd-chat { margin-top: 2px; }
/* ==== Contact page intro, in the homepage's terms: end ==== */


/* ==== Contact page, chat first: start ==== */
/* From _process/contact-intro-concepts-2026-10-16, concept B (Anna, 2026-10-16): a short centred
   intro (the live open line, the heading, one line), Sil's conversation centred under it like a
   messaging page, and the prices and email as one small line beneath it. */
.kd.vb { display: block; }
.vb-head { max-width: 720px; margin: 0 auto clamp(36px, 6vh, 64px); text-align: center; }
.vb-head .k-live { justify-content: center; margin: 0 0 26px; font-size: 14px; color: color-mix(in srgb, var(--white) 80%, var(--oxblood)); }
.vb-head .k-live > span { text-align: left; }
.vb-head .k-live [data-live-promise] { color: var(--white); }
.kd.vb h1 { font-size: var(--t-display); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.kd.vb h1 em { letter-spacing: -.03em; }
.vb-head .kd-sub { margin: 22px auto 0; text-align: center; }
.kd.vb .kd-chat { max-width: 720px; margin: 0 auto; min-height: 0; }   /* sized to the conversation, no empty hole at first view (QA 2026-10-21) */
.vb-facts { max-width: 720px; margin: 22px auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 14px; color: color-mix(in srgb, var(--white) 70%, var(--oxblood)); }
.vb-facts a { color: var(--white); text-underline-offset: 4px; display: inline-block; padding: 12px 0; margin: -12px 0; }
/* ==== Contact page, chat first: end ==== */


/* ==== Contact page, Dublin at dusk: start ==== */
/* From _process/contact-bg-concepts-2026-10-16, concept B (Anna, 2026-10-16): behind Sil's
   conversation, the pricing sky's pixel world at home on the oxblood. A dusk sky in clean stepped
   bands with a few stars, and a pixel skyline along the bottom, two rows deep, whose windows light
   and go out one by one; the studio's own window is lit Coral while the studio is open (Dublin
   clock). Square 4px pixels, brand colours mixed into the oxblood. Reduced motion: drawn once. */
.kd.kbg-on { position: relative; isolation: isolate; overflow: hidden; }
.kbg { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; image-rendering: pixelated; display: block; }
.kd.kbg-on .kd-chat { background: color-mix(in srgb, var(--oxblood) 82%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* the skyline stands below the last line of text, never behind it: room for its tallest block */
.kd.kbg-on { padding-bottom: calc(clamp(64px, 9vh, 110px) + 170px); }
/* ==== Contact page, Dublin at dusk: end ==== */


/* ==== Footer game, On brand: start ==== */
/* The footer window's game (Anna, 2026-10-16): see site.js "footer game: On brand". */
.g-hud { position: absolute; right: 3%; top: 8%; font: 600 clamp(12px, 1.1vw, 13px)/1 var(--sans); color: var(--mist); pointer-events: none; z-index: 4; text-align: right; text-shadow: 0 1px 2px rgba(15, 27, 25, .55); }
.g-hint { position: absolute; left: 3%; top: 8%; max-width: calc(94% - 7em); text-wrap: balance; font: 500 clamp(12px, 1.1vw, 13px)/1.2 var(--sans); color: var(--mist); pointer-events: none; z-index: 4; transition: opacity .4s; text-shadow: 0 1px 2px rgba(15, 27, 25, .55); }
.g-lives { max-width: none; line-height: 1; }
/* QA round 2: the score and lives sit on their own plate, so a white or Mist piece falling past them does not swallow the text */
.g-hud, .g-lives { background: color-mix(in srgb, var(--oxblood) 88%, transparent); padding: 4px 7px; margin-top: -4px; border-radius: 6px; text-shadow: none; }   /* the margin keeps the text where it sat, clear of the end-of-game bubble in a phone-sized window */
.g-lives { padding-right: 4px; }   /* the hearts carry 3px of letter-spacing after the last one */
.g-lives:empty { display: none; }
.g-b { position: absolute; z-index: 1; }
.g-fall { transition: transform .9s cubic-bezier(.5, 0, .9, .5), opacity .9s; opacity: 0; }
/* ==== Footer game, On brand: end ==== */




/* ==== Platform page, the story: start ==== */
/* The Platform page (Anna, 2026-10-16, third draft), generated by v3-build/platform_body.py: concept D of
   _process/platform-story-concepts-2026-10-16 (D-144), B's build with three parts of C. The page reads as
   a story as you scroll: white promise; one portal window pinned beside six chapters that builds itself,
   the ground behind changing with each step; an Oxblood ledger; then pixel dissolves between every surface
   (Ink, Mist, white, Tide, Oxblood). No line backgrounds (Anna: they do not suit the brand).
   The portal window (.cw) is one component: one frame for every company, as the real portal shell is one
   shell that loads a brand as data; per company only the brand changes, through custom properties. The
   client colours below belong to the imagined companies; they are illustrations and the page says so
   beside every window. Earlier drafts: _process/platform-page-v1-2026-10-16, platform-page-v2-2026-10-16. */
.cm-hero, .cm-use, .cm-index, .cm-three, .cm-close { padding-left: var(--m); padding-right: var(--m); }
.cm-hero h1, .cm-use h2, .cm-index h2, .cm-three h2, .cm-close h2, .bx-ledger h2, .cx-one h2 { font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.cm-hero h1 em, .cm-use h2 em, .cm-index h2 em, .cm-three h2 em, .cm-close h2 em, .bx-ledger h2 em, .cx-one h2 em, .cm-nb em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.cm-k { font-size: 13px; color: var(--grey); }
.cm-cap { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--grey); margin-top: 12px; }
@keyframes cm-blink { 50% { opacity: 0; } }
@keyframes cm-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes cm-pulse { 70% { box-shadow: 0 0 0 8px transparent; } }

/* 1 hero: the promise, and a portal that arrives already built */
.cm-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: calc(100svh - 65px); padding-top: clamp(40px, 8vh, 90px); padding-bottom: clamp(56px, 10vh, 110px); }
.cm-hero h1 { font-size: var(--t-display); line-height: .98; margin-top: 16px; }
.cm-sub { font-size: var(--t-lede); line-height: 1.55; color: var(--grey); max-width: 44ch; margin: 24px 0 30px; }
.cm-win .cw-main { padding-bottom: 80px; }
.js .cm-win .asm { opacity: 0; transform: translateY(14px); }
.js .cm-win .cw-side.asm { transform: translateX(-16px); }
.js .cm-win.in .asm { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .cm-win.in .cw-top { transition-delay: .15s; } .js .cm-win.in .cw-side { transition-delay: .25s; } .js .cm-win.in .cw-ask { transition-delay: .45s; } .js .cm-win.in .cw-sh { transition-delay: .6s; }
.js .cm-win.in .t1 { transition-delay: .7s; } .js .cm-win.in .t2 { transition-delay: .8s; } .js .cm-win.in .t3 { transition-delay: .9s; } .js .cm-win.in .cw-sil { transition-delay: 1.15s; }

/* the portal window: one component, themed per company */
.cw { --cw-bg: #FFFFFF; --cw-fg: var(--ink); --cw-mute: var(--grey); --cw-line: rgba(15, 27, 25, .1); --cw-side: var(--ink); --cw-sidefg: rgba(255, 255, 255, .7); --cw-sidehd: #FFFFFF; --cw-sideon: rgba(255, 255, 255, .1); --cw-sideonfg: #FFFFFF; --cw-acc: var(--coral); --cw-accfg: var(--ink); --cw-r: 12px; --cw-tr: 8px; --cw-hf: var(--sans); --cw-hw: 600; --cw-hs: -.03em; --cw-t1: var(--oxblood); --cw-t1f: #FFFFFF; --cw-t2: var(--mist); --cw-t2f: var(--ink); --cw-t3: var(--coral); --cw-t3f: var(--ink); --cw-ask: #FFFFFF; --cw-of: var(--sans); --cw-ow: 600; --cw-os: -.03em; --cw-or: 8px;
  font-family: var(--sans); font-size: 13px; line-height: 1.4; background: var(--cw-bg); color: var(--cw-fg); border-radius: var(--cw-r); overflow: hidden; border: 1px solid var(--cw-line); box-shadow: 0 40px 80px -48px rgba(15, 27, 25, .45); text-align: left; transition: background .5s var(--ease), color .5s var(--ease), border-radius .5s var(--ease); }
/* per company: only the brand changes (the accent on the mark and the avatar, and the work itself: its colours,
   type and corners). The portal frame is the same for every client, as the real portal shell is (D-002 is open). */
.cw[data-co="arch"] { --cw-acc: #B8532C; --cw-accfg: #F2EDE4; --cw-t1: #221F1B; --cw-t1f: #F2EDE4; --cw-t2: #B8532C; --cw-t2f: #F2EDE4; --cw-t3: #D8CDBA; --cw-t3f: #221F1B; --cw-of: var(--serif); --cw-ow: 400; --cw-os: -.01em; --cw-or: 0px; }
.cw[data-co="food"] { --cw-acc: #E3B23C; --cw-accfg: #12372B; --cw-t1: #12372B; --cw-t1f: #F8F3E7; --cw-t2: #E3B23C; --cw-t2f: #12372B; --cw-t3: #D6E3C8; --cw-t3f: #12372B; --cw-of: var(--sans); --cw-ow: 700; --cw-os: -.02em; --cw-or: 14px; }
.cw[data-co="adv"] { --cw-acc: #4F8FD6; --cw-accfg: #FFFFFF; --cw-t1: #111E33; --cw-t1f: #FFFFFF; --cw-t2: #E9EEF6; --cw-t2f: #111E33; --cw-t3: #4F8FD6; --cw-t3f: #FFFFFF; --cw-of: var(--sans); --cw-ow: 400; --cw-os: 0; --cw-or: 3px; }
.cw-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--cw-line); font-size: 12px; color: var(--cw-mute); }
.cw-dom { display: flex; align-items: center; gap: 10px; }
.cw-mk { display: inline-flex; flex-direction: column; justify-content: space-between; width: 16px; height: 12px; } .cw-mk i { display: block; height: 4px; background: var(--cw-acc); }
.cw[data-co="arch"] .cw-mk { width: 13px; height: 13px; box-shadow: inset 0 0 0 2px var(--cw-acc); } .cw[data-co="arch"] .cw-mk i { display: none; }
.cw[data-co="food"] .cw-mk { width: 13px; height: 13px; border-radius: 50%; background: var(--cw-acc); } .cw[data-co="food"] .cw-mk i { display: none; }
.cw[data-co="adv"] .cw-mk { width: 18px; height: 10px; justify-content: flex-end; } .cw[data-co="adv"] .cw-mk i { height: 2px; } .cw[data-co="adv"] .cw-mk i:first-child { display: none; }
.cw-me { width: 22px; height: 22px; border-radius: var(--cw-tr); background: var(--cw-acc); color: var(--cw-accfg); display: grid; place-items: center; font-weight: 600; font-size: 11px; }
.cw-body { display: grid; grid-template-columns: 172px 1fr; min-height: 380px; }
.cw-side { background: var(--cw-side); color: var(--cw-sidefg); padding: 16px 12px; display: flex; flex-direction: column; font-size: 13px; transition: background .5s var(--ease), color .5s var(--ease); }
.cw-co { color: var(--cw-sidehd); font: var(--cw-hw) 14px/1.2 var(--cw-hf); letter-spacing: var(--cw-hs); margin: 2px 10px 14px; }
.cw-navs { display: grid; gap: 2px; }
.cw-nv { display: block; padding: 8px 10px; border-radius: var(--cw-tr); }
.cw-nv.on { background: var(--cw-sideon); color: var(--cw-sideonfg); }
.cw-sp { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin: 18px 10px 6px; opacity: .7; }
.cw-s { display: block; padding: 6px 10px; } .cw-s::before { content: "# "; opacity: .55; }
.cw-main { position: relative; padding: 20px 20px 18px; min-width: 0; }
.cw-ask { position: relative; background: var(--cw-ask); border: 1px solid var(--cw-line); border-radius: var(--cw-tr); padding: 12px 14px 44px; }
.cw-q { font-size: 11.5px; color: var(--cw-mute); }
.cw-t { font: 500 clamp(14px, 1.25vw, 17px)/1.4 var(--sans); margin-top: 6px; min-height: 2.8em; }
.cw-t i { display: inline-block; width: 2px; height: 1.1em; background: var(--cw-acc); vertical-align: -3px; margin-left: 2px; animation: cm-blink 1s steps(1) infinite; }
.cw-go { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: var(--cw-tr); background: var(--cw-fg); color: var(--cw-bg); }
.cw-sh { font-size: 11.5px; color: var(--cw-mute); margin: 18px 0 8px; }
.cw-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cw-tile { aspect-ratio: 16 / 10; border-radius: var(--cw-or); padding: 10px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; transition: background .5s var(--ease), color .5s var(--ease); }
.cw-tile b { font: var(--cw-ow) 14px/1.15 var(--cw-of); letter-spacing: var(--cw-os); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cw-tile small { font-size: 11px; opacity: .7; }
.cw-tile.t1 { background: var(--cw-t1); color: var(--cw-t1f); } .cw-tile.t2 { background: var(--cw-t2); color: var(--cw-t2f); } .cw-tile.t3 { background: var(--cw-t3); color: var(--cw-t3f); }
/* your company's Recent row runs Coral, Mist, then Oxblood last (Anna, 2026-10-18); Mist stays second, where Sil stands on phones */
.cw[data-co="you"] .cw-tile.t1 { background: var(--coral); color: var(--ink); } .cw[data-co="you"] .cw-tile.t3 { background: var(--oxblood); color: var(--white); }
.cw-sil { position: absolute; right: 18px; bottom: 0; width: 60px; color: var(--coral); }
.cw-sil svg { display: block; width: 100%; height: auto; } .cw-sil .sil g[class^="x-"] { display: none; } .cw-sil .x-happy { display: inline !important; }
/* the three panes of a day's use */
.cw-use { display: grid; min-height: 380px; }
.cw-pane { grid-area: 1 / 1; animation: cm-in .5s var(--ease) both; } .cw-pane[hidden] { display: none; }
/* the day's use keeps all three panes in one grid cell, so the window holds the tallest pane's height and the
   page below it no longer jumps on every step (D-147); hidden panes stay out of the accessibility tree */
.cw-use .cw-pane[hidden] { display: block; visibility: hidden; animation: none; }
.cw-hint { margin-top: 14px; font-size: 12.5px; color: var(--cw-mute); max-width: 44ch; }
.cw-draft { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.cw-page { aspect-ratio: 16 / 10; background: var(--cw-t1); color: var(--cw-t1f); border-radius: var(--cw-or); padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; transition: background .5s var(--ease), color .5s var(--ease); }
.cw-pm { width: 20px; height: 14px; background: var(--cw-acc); margin-bottom: auto; }
.cw-page b { font: var(--cw-ow) clamp(18px, 1.8vw, 26px)/1.05 var(--cw-of); letter-spacing: var(--cw-os); } .cw-page small { font-size: 12px; opacity: .75; }
.cw-l { height: 4px; width: 60%; background: currentColor; opacity: .3; margin-top: 8px; } .cw-l.s { width: 38%; margin-top: 0; }
.cw-dh { font-size: 11.5px; color: var(--cw-mute); margin-bottom: 8px; }
.cw-dec ul { display: grid; } .cw-dec li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--cw-line); font-size: 12.5px; }
.cw-dec li span::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--cw-acc); margin-right: 8px; vertical-align: 1px; }
.cw-dec li em { font: 400 12px/1.4 var(--sans); color: var(--cw-mute); text-align: right; margin-left: auto; }
.cw-btns { display: flex; flex-wrap: wrap; gap: 6px; } .cw-btn { font-size: 12px; font-weight: 500; padding: 8px 11px; border-radius: var(--cw-tr); border: 1px solid var(--cw-line); } .cw-btn.go { background: var(--cw-fg); color: var(--cw-bg); border-color: var(--cw-fg); }
.cw-sent { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--cw-mute); } .cw-sent i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cw-acc); animation: cm-pulse 2s infinite; }

/* pixel canvases: drawn at a coarse pixel by site.js and scaled up with hard edges, the home page valley's recipe */
.px { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.px-drift { width: 200%; animation: px-drift 260s linear infinite; }
@keyframes px-drift { to { transform: translateX(-50%); } }
.px-ly { position: absolute; inset: 0; pointer-events: none; }

/* the build: six chapters left, the pinned stage right; the window builds itself as they are read */
.bx-run { --bx-bg: color-mix(in srgb, var(--ink) 5%, var(--white)); position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); padding: 0 var(--m); background: var(--bx-bg); transition: background-color .9s var(--ease); }
.bx-run[data-step="1"], .bx-run[data-step="3"] { --bx-bg: var(--white); }
.bx-run[data-step="2"] { --bx-bg: color-mix(in srgb, var(--mist) 55%, var(--white)); }
.bx-run[data-step="4"] { --bx-bg: color-mix(in srgb, var(--blush) 32%, var(--white)); }
.bx-run[data-step="5"] { --bx-bg: var(--mist); }   /* the team signs in on a flat Mist ground, edge to edge, no shapes (Anna, 2026-10-18) */
.bx-chapters { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.bx-ch { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 8vh 0; }
.bx-ch .cm-k { margin-bottom: 14px; }
.bx-h { font-size: var(--t-h2); font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; } .bx-h em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.bx-h3 { font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.03em; }   /* no step number of its own: the counter above the window is the one count (QA round two) */
.bx-p { color: var(--grey); font-size: var(--t-lede); line-height: 1.55; margin-top: 20px; max-width: 44ch; }
.bx-ch { opacity: .35; transition: opacity .5s var(--ease); } .bx-ch.on { opacity: 1; }
.bx-sw { grid-column: 2; grid-row: 1; }
.bx-stage { position: sticky; top: var(--navh, 64px); height: calc(100vh - var(--navh, 64px)); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bx-count { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 6px; font: 500 13px/1 var(--sans); color: var(--grey); font-variant-numeric: tabular-nums; }
.bx-count b { color: var(--ink); font-weight: 600; } .bx-count span { margin-left: 14px; color: var(--ink); }
.bx-win { position: relative; z-index: 1; }
.bx-cc { position: relative; z-index: 1; margin-top: 0; }

/* the window, built in stages */
#cw-run .cw-nv, #cw-run .cw-sp, #cw-run .cw-s, #cw-run .cw-co, #cw-run .cw-mk, #cw-run .cw-me, #cw-run [data-cw="dom"] { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.bx-run:not(.g3) #cw-run .cw-nv, .bx-run:not(.g3) #cw-run .cw-sp, .bx-run:not(.g3) #cw-run .cw-s { opacity: 0; transform: translateX(-8px); }
.bx-run.g3 #cw-run .cw-nv:nth-child(2) { transition-delay: .08s; } .bx-run.g3 #cw-run .cw-nv:nth-child(3) { transition-delay: .16s; } .bx-run.g3 #cw-run .cw-nv:nth-child(4) { transition-delay: .24s; } .bx-run.g3 #cw-run .cw-nv:nth-child(5) { transition-delay: .32s; }
.bx-run:not(.g4) #cw-run .cw-co, .bx-run:not(.g4) #cw-run .cw-mk, .bx-run:not(.g4) #cw-run .cw-me, .bx-run:not(.g4) #cw-run [data-cw="dom"] { opacity: 0; transform: translateY(4px); }
#cw-run .cw-tile { transition: background-color .8s steps(6), color .3s steps(2) .5s, outline-color .3s; outline: 1.5px dashed transparent; outline-offset: -1.5px; }
#cw-run .cw-tile.t2 { transition-delay: .12s, .62s, 0s; } #cw-run .cw-tile.t3 { transition-delay: .24s, .74s, 0s; }
.bx-run:not(.g2) #cw-run .cw-tile { background-color: transparent; color: transparent; outline-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.bx-run:not(.g5) #cw-run .cw-t span { display: none; }   /* out of the flow, not just unseen, so the empty field's caret sits at its start (QA 2026-10-21, round three) */
#cw-run .cw-sil { transition: opacity .4s var(--ease), transform .6s var(--ease); }
.bx-run:not(.g5) #cw-run .cw-sil { opacity: 0; transform: translateY(24px); }
#cw-run .cw-main { padding-bottom: 70px; }

/* the set-up checklist: our work ticks it off */
.bx-todo { position: absolute; left: auto; right: calc(100% - 172px); bottom: -26px; width: min(270px, 52%); background: var(--white); border: 1px solid rgba(15, 27, 25, .12); border-radius: 10px; padding: 14px 16px; font: 13px/1.35 var(--sans); box-shadow: 0 24px 48px -32px rgba(15, 27, 25, .45); transition: opacity .5s var(--ease), transform .6s var(--ease); z-index: 3; }
.bx-th { font-weight: 600; margin-bottom: 8px; }
.bx-todo ol { display: grid; gap: 1px; }
.bx-todo li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; color: var(--ink); transition: color .3s; }
.bx-todo li i { width: 12px; height: 12px; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .3s steps(2), box-shadow .3s; }
.bx-todo li span { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px; transition: background-size .45s var(--ease); }
.bx-todo li em { font: 500 11px/1 var(--sans); color: var(--coral); opacity: 0; transition: opacity .3s .25s; }
.bx-todo li.done { color: var(--grey); } .bx-todo li.done i { background: var(--coral); box-shadow: none; } .bx-todo li.done span { background-size: 100% 1.5px; } .bx-todo li.done em { opacity: 1; }
.bx-tdone { display: none; font-weight: 600; }
.bx-run.g5 .bx-todo ol, .bx-run.g5 .bx-th { display: none; } .bx-run.g5 .bx-tdone { display: block; }
.bx-run.g5 .bx-todo { transform: translateY(6px); }

.bx-msub { display: none; }
.bx-measure #cw-run, .bx-measure #cw-run * { transition: none !important; }
@media (max-width: 760px), (max-width: 960px) and (max-height: 600px) {
  .bx-run { grid-template-columns: 1fr; }
  .bx-sw, .bx-chapters { grid-column: 1; grid-row: 1; }
  /* phones (D-147): the whole screen is the stage. The chapter being read is shown under the window
     (.bx-msub, filled by site.js), so the words never scroll underneath it. The chapters in the page
     flow stay for screen readers and give the scroll its length, but are not painted. */
  .bx-stage { height: calc(var(--vh1, 1svh) * 100 - var(--navh, 64px)); z-index: 2; padding: 14px 0 14px; justify-content: center; gap: 10px; }   /* centred, so spare height splits above and below (2026-10-21) */
  .bx-ch { min-height: calc(var(--vh1, 1svh) * 70); padding: 0; opacity: 0 !important; pointer-events: none; }
  .bx-ch[data-i="1"] { min-height: calc(var(--vh1, 1svh) * 116); }   /* the stage pins late on phones, so the first chapter needs the extra length to hold as long as the rest (2026-10-21) */
  .bx-count span { display: none; }
  /* the set-up checklist under the window (2026-10-21): without it the stripped window read as broken, and
     the space it fills was empty at the foot of the screen; two columns, the ticks without "Done by us" */
  .bx-todo { position: relative; left: auto; right: auto; bottom: auto; width: 100%; margin-top: 10px; padding: 10px 14px 12px; font-size: 12.5px; }
  .bx-todo ol { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 14px; }
  .bx-todo li { grid-template-columns: 12px 1fr; gap: 7px; padding: 2px 0; } .bx-todo li em { display: none; } .bx-todo li i { width: 10px; height: 10px; }
  .bx-run.g5 .bx-todo { transform: none; }
  .bx-msub { display: block; position: relative; z-index: 2; transition: opacity .25s var(--ease), transform .35s var(--ease); }
  .bx-msub.swap { opacity: 0; transform: translateY(8px); }
  .bx-msub .cm-k { margin-bottom: 8px; }
  .bx-msub .bx-h { font-size: clamp(30px, 8.4vw, 40px); }
  .bx-msub .bx-h3 { font-size: clamp(22px, 6vw, 28px); }
  .bx-msub .bx-p { font-size: 15px; line-height: 1.5; margin-top: 10px; max-width: 46ch; }
  /* the empty app collapses to a slim bar instead of an empty dark band */
  #cw-run .cw-navs, #cw-run .cw-co { max-height: 140px; overflow: hidden; transition: max-height .5s var(--ease), margin .5s var(--ease), opacity .35s var(--ease), transform .45s var(--ease); }
  .bx-run:not(.g3) #cw-run .cw-navs { max-height: 0; }
  .bx-run:not(.g4) #cw-run .cw-co { max-height: 0; margin: 0; }
  /* a more compact window, so it needs less scaling to leave room for the words */
  #cw-run .cw-main { padding: 14px 14px 18px; }
  #cw-run .cw-ask { padding-bottom: 42px; }
  #cw-run .cw-t { min-height: 2.6em; }
  #cw-run .cw-sh { margin: 12px 0 6px; }
  #cw-run .cw-tile { aspect-ratio: 16 / 8; }
  #cw-run .cw-sil { width: 40px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .bx-msub { transition: none; } }
@media (prefers-reduced-motion: reduce) { .bx-run, .bx-run *, .bx-ledger .cm-ledger li span { transition: none !important; } }
/* one window (D-146): the hero is the build's first chapter, so there is only ever one portal window.
   It starts finished on a white ground with no checklist or count, strips back at "No blank canvas"
   and builds up again. On phones the hero keeps its own section above the build. */
.bx-mhero { display: none; }
.bx-hero-ch { min-height: calc(100vh - var(--navh, 64px)); padding: 0 0 6vh; opacity: 1; }
.bx-hero-ch h1 { font-size: var(--t-display); font-weight: 600; letter-spacing: -.045em; line-height: .98; text-wrap: balance; margin-top: 16px; } .bx-hero-ch h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.bx-run[data-step="h"] { --bx-bg: var(--white); }
.bx-count { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.bx-run[data-step="h"] .bx-count, .bx-run[data-step="h"] .bx-todo { opacity: 0; transform: translateY(10px); pointer-events: none; }
.bx-run:not(.g2) #cw-run .cw-tile { transition-duration: 1s, .3s, .3s; }   /* stripping back is a little slower than building */
/* the combined hero and build hold on every screen wider than a phone (D-148): the phone layout, with its own
   hero section, is only for phones and short landscape screens */
@media (max-width: 760px), (max-width: 960px) and (max-height: 600px) { .bx-mhero { display: grid; } .bx-hero-ch { display: none; } }
/* narrow desktop windows and tablets: the same scene, the window fitted to the narrower column */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 601px) {
  .bx-run { gap: clamp(20px, 3vw, 40px); }
  #cw-run .cw-body { grid-template-columns: 132px 1fr; }
  #cw-run .cw-shelf { grid-template-columns: 1fr 1fr; } #cw-run .cw-tile.t3 { display: none; }
  .bx-todo { right: calc(100% - 132px); width: min(240px, 62%); }   /* its right edge on the sidebar seam, clear of Recent and the tiles (QA 2026-10-21) */
  .bx-hero-ch h1 { font-size: clamp(36px, 5.4vw, 60px); }
  .bx-hero-ch .acts .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
}
/* the checklist floats inside the window's lower corner, clear of the illustration caption under it (D-148) */
.bx-todo { bottom: 14px; }
/* narrow desktop windows and tablets: the chapter column is too narrow to float the checklist over its edge, so it
   sits under the window in two columns, clear of the chapter being read (QA 2026-10-21, round three). The stage holds
   from the top so the window does not jump when the list folds to its last line. */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 601px) {
  .bx-stage { justify-content: flex-start; padding-top: max(4px, calc((100vh - var(--navh, 64px) - 690px) / 2)); }
  .bx-todo { position: relative; left: auto; right: auto; bottom: auto; width: 100%; margin-top: 10px; padding: 12px 16px; }
  .bx-todo ol { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 20px; }
  .bx-todo li { padding: 3px 0; }
}
/* too short for the window and the list together: the list goes, as on phones, and the stage centres again */
@media (min-width: 761px) and (max-width: 970px) and (min-height: 601px) and (max-height: 759px), (min-width: 971px) and (max-width: 1100px) and (min-height: 601px) and (max-height: 699px) {
  .bx-todo { display: none; } .bx-stage { justify-content: center; padding-top: 0; }
}


/* the ledger rows */
.cm-ledger { margin-top: clamp(48px, 8vh, 80px); display: grid; }
.cm-ledger li { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; }
.cm-ledger li span:first-child { color: var(--grey); } .cm-ledger li span:last-child { font-weight: 500; }
.cm-ledger .cm-lh { font-size: 13px; border-top: 0; padding-bottom: 6px; } .cm-ledger .cm-lh span { color: var(--grey); font-weight: 400; }

/* the ledger, on Oxblood: what you would do is struck out, what we do writes itself in */
.bx-ledger { background: var(--oxblood); color: var(--white); padding: var(--sec-y) var(--m); }
.bx-ledger h2 { font-size: var(--t-h2); max-width: 18ch; }
.bx-ledger .cm-ledger li { border-top-color: color-mix(in srgb, var(--white) 16%, transparent); }
.bx-ledger .cm-ledger .cm-lh span { color: color-mix(in srgb, var(--blush) 80%, var(--oxblood)); }
.bx-ledger .cm-ledger li:not(.cm-lh) span:first-child { color: color-mix(in srgb, var(--blush) 78%, var(--oxblood)); justify-self: start; align-self: start; background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px; transition: background-size .7s var(--ease) .25s; }
.bx-ledger .cm-ledger li.in:not(.cm-lh) span:first-child { background-size: 100% 1.5px; }
.bx-ledger .cm-ledger li:not(.cm-lh) span:last-child { clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(14) .7s; }
@media (max-width: 760px) { .bx-ledger .cm-ledger li:not(.cm-lh) span:last-child { transition: clip-path .45s steps(9) .1s; } }   /* phones: half-typed lines read as clipped text while scrolling (2026-10-21) */
.bx-ledger .cm-ledger li.in:not(.cm-lh) span:last-child { clip-path: inset(0 0 0 0); }

@media (max-width: 640px) { .bx-ledger .cm-ledger li { grid-template-columns: 1fr; gap: 6px; } }


/* labels and lines shared by the sections below */
.cm-n { font-size: 13px; color: var(--coral); }
.cm-nb { margin-top: clamp(40px, 7vh, 72px); font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.03em; }
.cm-oh { max-width: 64ch; } .cm-k-ill { color: var(--grey-d); margin-bottom: 16px; } .cm-oh > p:last-child { color: var(--grey-d); font-size: var(--t-lede); line-height: 1.55; margin-top: 22px; }
.cm-ih { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-d); margin-top: 26px; } .cm-inside > .cm-ih:first-child { margin-top: 6px; }
.cm-tools { margin-top: 8px; } .cm-tools li { padding: 10px 0; border-top: 1px solid var(--rule-d); font-size: 16px; font-weight: 500; } .cm-tools li:first-child { border-top: 0; }
.cm-ip { margin-top: 8px; color: var(--grey-d); line-height: 1.55; font-size: 15px; }


/* 5 your team just uses it: ask, draft, send */
.cm-use { padding-top: var(--sec-y); padding-bottom: var(--sec-y); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cm-use h2 { font-size: var(--t-h2); } .cm-ut > p { color: var(--grey); font-size: var(--t-lede); line-height: 1.55; margin-top: 22px; max-width: 44ch; }
.cm-stepper { margin-top: clamp(28px, 4vh, 44px); display: grid; border-top: 1px solid var(--rule); }
.cm-step { position: relative; width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 16px 0 18px; background: none; border: 0; border-bottom: 1px solid var(--rule); cursor: pointer; font-family: var(--sans); color: var(--grey); transition: color .3s var(--ease); }
.cm-step .cm-n { grid-row: 1 / span 2; padding-top: 3px; color: var(--grey); transition: color .3s var(--ease); }
.cm-step b { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; } .cm-step small { font-size: 14px; margin-top: 3px; }
.cm-step .cm-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.cm-step:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
.cm-stepper li.on .cm-step { color: var(--ink); } .cm-stepper li.on .cm-n { color: var(--coral); }
.cm-note { margin-top: 22px; color: var(--grey); font-size: 15px; line-height: 1.55; max-width: 44ch; }

/* 6 only the tools your company needs: the index, with what runs today */
.cm-index { background: color-mix(in srgb, var(--mist) 26%, var(--white)); padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.cm-xh { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; } .cm-index h2 { font-size: var(--t-h2); } .cm-xh p { color: var(--grey); font-size: var(--t-lede); line-height: 1.55; }
.cm-ixl { margin-top: clamp(36px, 6vh, 56px); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); }
.cm-ix { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; border-top: 1px solid rgba(15, 27, 25, .14); }
.cm-ix b { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; } .cm-ix p { grid-column: 1; color: var(--grey); font-size: 15px; line-height: 1.5; max-width: 40ch; }
.cm-st { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; color: var(--grey); padding-top: 5px; }
.cm-st i { width: 8px; height: 8px; flex: none; }
.cm-st-run { color: var(--ink); } .cm-st-run i { background: var(--coral); } .cm-st-build i { box-shadow: inset 0 0 0 1.5px var(--ink); } .cm-st-named i { box-shadow: inset 0 0 0 1px var(--grey); opacity: .6; } .cm-st-scope i { background: var(--mist); box-shadow: inset 0 0 0 1px var(--ink); }
.cm-xn { margin-top: 24px; font-size: 14px; color: var(--grey); }

/* 7 private, growing, quiet about the AI */
.cm-three { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.cm-three h2 { font-size: var(--t-h3); max-width: 30ch; } .cm-three ul { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--rule); }
.cm-three li { padding-top: 20px; } .cm-three li::before { content: ""; display: block; width: 8px; height: 8px; background: var(--coral); margin-bottom: 14px; }
.cm-three b { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; } .cm-three p { color: var(--grey); line-height: 1.55; margin-top: 8px; }

/* 8 close */
.cm-close { position: relative; background: var(--oxblood); color: var(--white); padding-top: clamp(96px, 16vh, 180px); padding-bottom: clamp(96px, 16vh, 180px); text-align: center; }
.cm-close h2 { font-size: var(--t-display); line-height: .98; max-width: 18ch; margin: 0 auto; } .cm-close p { color: color-mix(in srgb, var(--white) 80%, var(--oxblood)); font-size: var(--t-lede); line-height: 1.55; max-width: 44ch; margin: 22px auto 30px; }
.cm-close .acts { margin: 0 auto; border: 0; }
.cm-close::after { content: ""; position: absolute; left: var(--m); right: var(--m); bottom: 0; height: 1px; background: color-mix(in srgb, var(--white) 26%, var(--oxblood)); }   /* the same foot rule as the home page's contact (.cx4::after), so the footer reads as its own room (QA 2026-10-21) */
/* D-181: the Platform page's buttons as the home page's (Anna, 2026-10-19): square, the fill wiping in from the
   left on hover, a press on click. On Oxblood the close takes the home page's dark-surface button (.con), white
   with Coral, in place of the rounded Coral one. */
.bx-mhero .acts .btn, .bx-hero-ch .acts .btn, .sk-hero .acts .btn, .cm-close .acts .btn { position: relative; isolation: isolate; overflow: hidden; transition: color .35s var(--ease), transform .15s var(--ease); }
.bx-mhero .acts .btn::before, .bx-hero-ch .acts .btn::before, .sk-hero .acts .btn::before, .cm-close .acts .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease); }
.bx-mhero .acts .btn:hover::before, .bx-hero-ch .acts .btn:hover::before, .sk-hero .acts .btn:hover::before, .cm-close .acts .btn:hover::before,
.bx-mhero .acts .btn:focus-visible::before, .bx-hero-ch .acts .btn:focus-visible::before, .sk-hero .acts .btn:focus-visible::before, .cm-close .acts .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.bx-mhero .acts .btn.p, .bx-mhero .acts .btn.p:hover, .bx-hero-ch .acts .btn.p, .bx-hero-ch .acts .btn.p:hover, .sk-hero .acts .btn.p, .sk-hero .acts .btn.p:hover { background: var(--ink); color: var(--white); }
.bx-mhero .acts .btn.p::before, .bx-hero-ch .acts .btn.p::before, .sk-hero .acts .btn.p::before { background: var(--oxblood); }
.bx-mhero .acts .btn.s, .bx-mhero .acts .btn.s:hover, .bx-hero-ch .acts .btn.s, .bx-hero-ch .acts .btn.s:hover, .sk-hero .acts .btn.s, .sk-hero .acts .btn.s:hover { background: var(--white); color: var(--ink); }
.bx-mhero .acts .btn.s::before, .bx-hero-ch .acts .btn.s::before, .sk-hero .acts .btn.s::before { background: var(--ink); }
.bx-mhero .acts .btn.s:hover, .bx-mhero .acts .btn.s:focus-visible, .bx-hero-ch .acts .btn.s:hover, .bx-hero-ch .acts .btn.s:focus-visible, .sk-hero .acts .btn.s:hover, .sk-hero .acts .btn.s:focus-visible { color: var(--white); }
.cm-close .acts .btn.p, .cm-close .acts .btn.p:hover { background: var(--white); color: var(--ink); }
.cm-close .acts .btn.p::before { background: var(--coral); }
/* phones (Anna, 2026-10-25, D-245): the two white boxes side by side squeezed "See the starter pack" onto two lines.
   They stack instead, full width and the same height: the first white, the second an outline on the Oxblood. */
@media (max-width: 560px) {
  .cm-close .acts { flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }
  .cm-close .acts .btn { flex: none; padding: 19px 22px; white-space: nowrap; }
  .cm-close .acts .btn.s { border-left: 0; background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 55%, var(--oxblood)); }
  .cm-close .acts .btn.s::before { background: var(--white); }   /* the fill sweeps in white, the label turns Ink */
  .cm-close .acts .btn.s:hover, .cm-close .acts .btn.s:focus-visible { background: transparent; color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .bx-mhero .acts .btn::before, .bx-hero-ch .acts .btn::before, .sk-hero .acts .btn::before, .cm-close .acts .btn::before { transition: none; } }

/* phones (D-147): the three steps sit directly above the window they play, not above the note; a shorter page
   tile keeps the steady window from leaving a large blank under the Ask pane */
@media (max-width: 960px) { .cx-use .cm-ut { display: flex; flex-direction: column; } .cx-use .cm-stepper { order: 1; } }
@media (max-width: 640px) {
  .cw-use .cw-page { aspect-ratio: 16 / 7; }
  /* the window keeps the Draft pane's height so the page below does not jump as the steps play (D-147): a tighter
     Draft pane; the Ask pane sits at the top of it, where a request box would be, and the spare room falls
     below the hint (QA round two, 2026-10-21) */
  .cw-use .cw-draft { gap: 12px; } .cw-use .cw-dec li { padding: 5px 0; }
  .cw-use .cw-pane[data-step="0"] { align-self: center; }   /* centred in the room the Draft pane needs, not a block of white below it (2026-10-21) */
}
/* the phone hero's two buttons stay on one line each (D-147) */
/* phones (D-148): section spacing in pixels and the hero sized with the steady unit, so nothing changes
   length under the finger when the address bar slides */
@media (max-width: 760px) {
  .bx-mhero { min-height: calc(var(--vh1, 1svh) * 100 - 65px); padding-top: 56px; padding-bottom: 72px; }
  .bx-ledger, .cx-one, .cm-use, .cm-index, .cm-three, .rc, .sk-what, .sk-how { --sec-y: 88px; }
  .sk-hero { padding-top: 56px; padding-bottom: 72px; }
  .cm-close { padding-top: 112px; padding-bottom: 112px; }
}
@media (max-width: 400px) { .bx-mhero .acts .btn, .sk-hero .acts .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; } }
@media (max-width: 340px) { .bx-mhero .acts, .sk-hero .acts { flex-direction: column; } }
/* C's surfaces and motion, after the base section rules they override */
/* the dissolves: the next surface's colour eats up into the last one as you scroll (site.js) */
.cx-seam { position: relative; height: 140px; margin: -1px 0; z-index: 1; }
.cx-seam canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
/* one system underneath, on Ink: the three companies slide past one at a time while the page holds */
.cx-one { background: var(--ink); color: var(--white); padding: var(--sec-y) 0 calc(var(--sec-y) * .8); }
.cx-one > .cm-oh, .cx-one > .cm-nb { padding: 0 var(--m); }
.cx-one h2 { font-size: var(--t-h2); }
.cx-one .cm-oh { max-width: calc(64ch + 2 * var(--m)); } .cx-one .cm-oh > p:last-child { max-width: 58ch; }
.cx-h { position: relative; height: 300vh; margin-top: clamp(24px, 4vh, 48px); }
.cx-hs { position: sticky; top: var(--navh, 64px); height: calc(100vh - var(--navh, 64px)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.cx-hbar { display: flex; align-items: center; gap: 24px; padding: 0 var(--m); }
.cx-hns { display: flex; gap: 22px; flex-wrap: wrap; }
.cx-hn { background: none; border: 0; padding: 4px 0; font: 600 clamp(15px, 1.3vw, 18px)/1.2 var(--sans); color: var(--grey-d); cursor: pointer; letter-spacing: -.01em; transition: color .3s var(--ease); }
.cx-hn.on, .cx-hn:hover { color: var(--white); } .cx-hn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cx-hp { flex: 1; height: 2px; background: var(--rule-d); position: relative; min-width: 60px; } .cx-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--coral); transform-origin: left; transform: scaleX(0); }
.cx-track { display: flex; gap: 5vw; padding: 0 var(--m); will-change: transform; }
.cx-panel { flex: none; width: min(1180px, calc(100vw - 2 * var(--m))); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.cx-panel .cw { box-shadow: none; border: 0; }   /* border 0, not transparent: the white window showed through a transparent border as a hairline beside the dark sidebar (D-147) */
.cx-pk { font-size: 13px; color: var(--grey-d); } .cx-pi h3 { font: 600 clamp(18px, 1.6vw, 24px)/1.15 var(--sans); letter-spacing: -.02em; margin: 4px 0 18px; }
.cx-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .cx-pg .cm-ih:first-child { margin-top: 0; } .cx-pg .cm-ih { margin-top: 18px; }
.cx-pg .cm-tools li { font-size: 15px; padding: 8px 0; } .cx-pg .cm-ip { font-size: 14px; }
.cx-one .cm-nb { margin-top: clamp(24px, 4vh, 48px); }
/* D-220: the connections. Every mark in its owner's colours on a white tile; the Platform page shows them as a field
   of square tiles with the copy in a hole in the middle (after Lattice), the Integrations page as cards (after Circle) */
.lc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lc-t { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--white); flex: none; }
.lc { display: block; width: 30px; height: 30px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.la { padding: 0 var(--m); margin-top: clamp(48px, 8vh, 96px); }
.la-stack { display: grid; } .la-stack > * { grid-area: 1 / 1; }
.la-field { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 9%, var(--ink) 91%, transparent); mask-image: linear-gradient(to right, transparent, var(--ink) 9%, var(--ink) 91%, transparent); }   /* fades out at both sides, after Lattice: about one column and its gap, so only the outer tiles dissolve (QA 2026-10-21) */
.la-field > li { position: relative; aspect-ratio: 1; background: var(--white); display: flex; align-items: center; justify-content: center; cursor: default; opacity: .55; filter: saturate(.3); transition: opacity .35s var(--ease), filter .35s var(--ease); }   /* muted until hovered, and never fully in colour */
.la-field > li:hover { opacity: .95; filter: saturate(.7); }
.la-field > li.e { background: rgba(255, 255, 255, .04); opacity: 1; filter: none; }
.la-field > li .lc-t { width: 100%; height: 100%; background: transparent; }
.la-field > li .lc { width: 42%; height: 42%; }
.la-field > li .la-n { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font: 500 11px/1.2 var(--sans); color: var(--grey); white-space: nowrap; opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.la-field > li:hover .la-n { opacity: 1; }
.la-over { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 10px; pointer-events: none; }   /* above the masked field, or the field takes the clicks */
.la-copy { pointer-events: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 6%; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 48px rgba(255, 255, 255, .07), inset 0 0 48px rgba(255, 255, 255, .03); background: rgba(255, 255, 255, .02); }   /* a light border glow round the copy, on Nathan's ask */
.la-copy p.cm-k { color: var(--grey-d); }
.la-copy p:not(.cm-k) { color: var(--white); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; margin-top: 12px; }
.la-copy .btn { margin-top: 22px; }   /* the white button, Ink on hover would vanish here, so Oxblood */
.la-copy .btn.s:hover { background: var(--oxblood); color: var(--white); }
/* touch screens have no hover: the marks rest at the hovered brightness, and a tap does not leave one tile lit
   with its name showing (QA 2026-10-21) */
@media (hover: none) {
  .la-field > li, .la-field > li:hover { opacity: .8; filter: saturate(.7); }
  .la-field > li:hover .la-n { opacity: 0; }
}
/* stacked (QA 2026-10-21): the copy and its button lead and the field follows as a solid sample of the marks,
   without the empty cells; tablets show six rows of eight, phones six rows of four (the marks past those are
   flagged in platform_body.py), and See all integrations carries the rest */
@media (max-width: 960px) {
  .la-stack { display: flex; flex-direction: column; } .la-field > li { grid-area: auto !important; } .la-field > li.e { display: none; }
  .la-field { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 5%, var(--ink) 95%, transparent); mask-image: linear-gradient(to right, transparent, var(--ink) 5%, var(--ink) 95%, transparent); }
  .la-field > li.la-m48 { display: none; } .la-field > li { order: var(--o, 99); }   /* the best-known marks lead (QA round two) */
  .la-over { display: block; order: -1; margin: 0 0 24px; } .la-copy { padding: 20px; } .la-copy p:not(.cm-k) { max-width: 58ch; }
}
@media (max-width: 600px) {
  .la-field { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; -webkit-mask-image: none; mask-image: none; } .la-field > li.la-m24 { display: none; }
  .la { margin-top: 48px; } .la-over { margin-bottom: 20px; }
}
/* D-221: the starter pack's landing page, starter.html (the home page shows it as the first pricing tab) */
.sk-hero h1 em, .sk-what h2 em, .sk-how h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.sk-note { margin-top: 14px; font-size: 14px; color: var(--grey-d); }
.sk-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.sk-lists h3 { font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; }
.sk-lists ul { list-style: none; margin: 12px 0 0; padding: 0; }
.sk-lists li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.4; } .sk-lists li:first-child { border-top: 0; }
.sk-lists .pp-ck { flex: none; width: 14px; height: 14px; margin-top: 5px; color: var(--coral); }
.sk-hero { padding: clamp(48px, 9vh, 112px) var(--m) clamp(40px, 6vh, 72px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sk-ht { min-width: 0; }   /* no cap on the column: a 66ch cap tracked the 16px body font and broke the display H1 into four lines from about 1520px (QA round two); the copy carries its own measure below */
/* the first fold's graphic (option D, before and after): the small website as it starts and in the brand, Sil at the corner */
.sk-art { position: relative; }
.sk-art { padding-bottom: 28px; }
.shd { position: relative; aspect-ratio: 5 / 4; }
.shd-o { position: absolute; width: 56%; background: var(--white); border: 1px solid rgba(15, 27, 25, .14); border-radius: 8px; box-shadow: 0 1px 0 rgba(15, 27, 25, .04), 0 18px 40px -26px rgba(15, 27, 25, .35); }
.shd-before { left: 0; top: 4%; } .shd-after { right: 0; bottom: 4%; z-index: 1; }
.shd-o .pp-bar { border-radius: 8px 8px 0 0; }
.shd-pg { display: block; padding: 14px 14px 16px; overflow: hidden; border-radius: 0 0 8px 8px; }
.shd-pg b { display: block; font: 600 clamp(12px, 1.2vw, 17px)/1.1 var(--sans); letter-spacing: -.03em; margin-bottom: 8px; }
.shd-before .shd-pg b { font: 400 clamp(12px, 1.2vw, 17px)/1.1 Georgia, serif; color: rgba(15, 27, 25, .55); }
.shd-pg i { display: block; height: 5px; width: 72%; border-radius: 3px; background: rgba(15, 27, 25, .16); margin-top: 6px; } .shd-pg i.s { width: 48%; }
.shd-box { display: block; margin-top: 10px; width: 100%; aspect-ratio: 16 / 7; background: rgba(15, 27, 25, .08); }
.shd-mk { display: block; width: 24px; color: var(--coral); margin-bottom: 10px; } .shd-mk svg { display: block; width: 100%; }
.shd-hero { display: block; margin-top: 10px; width: 100%; aspect-ratio: 16 / 7; background: var(--mist); overflow: hidden; } .shd-hero svg { width: 100%; height: 100%; display: block; }
.shd-o small { position: absolute; left: 12px; bottom: -22px; font: 500 11px/1 var(--sans); color: var(--grey); }
/* the arrow hangs above the after window and Sil under the before window's caption, so neither drifts as the box
   changes shape (QA round two): the windows' heights come from their content, not from the box */
.shd-arrow { position: absolute; left: 57%; bottom: calc(100% + 10px); width: 20%; transform: translate(-50%, -50%) rotate(35deg); color: var(--coral); z-index: 2; } .shd-arrow svg { width: 100%; display: block; }
.shd-sil { position: absolute; left: 4%; top: calc(100% + 32px); width: 39%; max-width: 150px; color: var(--coral); z-index: 2; }
@media (max-width: 960px) { .sk-hero { grid-template-columns: 1fr; } .sk-art { width: 100%; max-width: 520px; justify-self: start; } .shd { aspect-ratio: 4 / 3; } }   /* on the copy's left edge like the other stacked heroes (QA round two) */
@media (max-width: 420px) { .shd { aspect-ratio: 1 / 1; } }   /* phones: the windows keep their content height as the box narrows, so the box squares up to keep the arrow off the after window */
.sk-hero h1 { font: 600 var(--t-display)/.98 var(--sans); letter-spacing: -.045em; margin-top: 16px; text-wrap: balance; }
.sk-hero .cm-sub { margin-top: 24px; color: var(--grey); font-size: var(--t-lede); line-height: 1.55; max-width: 35rem; text-wrap: pretty; }   /* rem, not ch: both paragraphs share one measure though the second is set smaller (QA round two) */
.sk-hero .sk-sub2 { margin-top: 14px; font-size: 16px; }
.sk-hero .sk-note { color: var(--grey); } .sk-hero .acts { margin-top: 28px; }
.sk-what, .sk-how { padding: var(--sec-y) var(--m); }
.sk-how { background: color-mix(in srgb, var(--mist) 26%, var(--white)); }
.sk-what h2, .sk-how h2 { font: 600 var(--t-h2)/1 var(--sans); letter-spacing: -.045em; }
.sk-what .sk-lists { margin-top: clamp(28px, 5vh, 48px); gap: 24px; }
.sk-what .sk-lists ul { border-top: 1px solid var(--ink); } .sk-what .sk-lists li { font-size: 16px; line-height: 1.55; padding: 12px 0; border-color: var(--ink); } .sk-what .sk-lists li:first-child { border-top: 0; }
.sk-what .sk-lists h3, .sk-steps b, .rc-opt .rc-n { display: block; font: 600 var(--t-h4)/1.15 var(--sans); letter-spacing: -.02em; }
.sk-steps { list-style: none; margin: clamp(28px, 5vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sk-steps li { border-top: 1px solid var(--ink); padding-top: 18px; }
.sk-steps p { margin-top: 10px; color: var(--grey); font-size: 16px; line-height: 1.55; max-width: 60ch; text-wrap: pretty; } .sk-steps b { text-wrap: balance; }
.sk-lists li, .rc-lede, .sk-how + .cm-close p { text-wrap: pretty; }   /* no one-word last lines (QA round two) */
.sk-grow { margin-top: clamp(40px, 7vh, 64px); padding-top: 18px; border-top: 1px solid var(--rule); color: var(--grey); font-size: 15px; line-height: 1.55; max-width: 60ch; text-wrap: pretty; }   /* a closing note under a light rule, smaller than the step bodies, so it does not read as a fourth step (QA round two) */
@media (max-width: 720px) { .sk-steps { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sk-lists { grid-template-columns: 1fr; } }
/* D-221: Anna's receipt (concept 3 of _process/pricing-concepts-2026-10-12) on the starter page: tick what you
   need, the receipt adds it up, Sil holds it. Rounded corners and the soft shadow fall under D-120 like the pricing panel */
.rc { padding: var(--sec-y) var(--m); background: color-mix(in srgb, var(--mist) 26%, var(--white)); }
.rc-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rc h2 { font: 600 var(--t-h2)/1 var(--sans); letter-spacing: -.045em; } .rc h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.rc-lede { margin-top: 18px; color: var(--grey); font-size: var(--t-lede); line-height: 1.55; max-width: 56ch; }
.rc-opts { display: grid; gap: 12px; margin-top: 36px; }
.rc-opt { display: grid; grid-template-columns: 28px 1fr auto; gap: 16px; align-items: start; border: 1px solid rgba(15, 27, 25, .14); border-radius: 16px; padding: 20px 22px; cursor: pointer; transition: border-color .2s, background-color .3s var(--ease); text-align: left; background: var(--white); font: inherit; color: inherit; width: 100%; }
@media (hover: hover) { .rc-opt:hover { border-color: rgba(15, 27, 25, .4); } }   /* QA 2026-10-21: a tap on a phone left the hover border on an unticked card */
.rc-opt[aria-pressed="true"] { border-color: var(--ink); }
.rc-opt:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.rc-box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(15, 27, 25, .3); display: grid; place-items: center; color: var(--white); margin-top: 2px; transition: background-color .2s, border-color .2s; }
.rc-box::after { content: ""; width: 5px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }   /* the tick drawn in CSS: no svg inside a button (C4) */
.rc-opt[aria-pressed="true"] .rc-box { background: var(--ink); border-color: var(--ink); } .rc-opt[aria-pressed="true"] .rc-box::after { opacity: 1; }
.rc-opt .rc-d { display: block; color: var(--grey); font-size: 15px; line-height: 1.5; margin-top: 6px; }
.rc-pr { text-align: right; white-space: nowrap; } .rc-pr small { display: block; font-size: 12px; color: var(--grey); } .rc-pr b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.rc-builders { margin-top: -4px; padding: 0 22px 10px 66px; transition: opacity .3s var(--ease); }
.rc-opt[data-k="website"][aria-pressed="false"] + .rc-builders { opacity: .45; }
.rc-builders p { font-size: 15px; color: var(--grey); line-height: 1.5; } .rc-builders a { color: var(--ink); display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: 500; }
.rc-builders ul { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rc-builders li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.rc-builders .lc-t { width: 32px; height: 32px; border: 1px solid var(--rule); } .rc-builders .lc { width: 18px; height: 18px; }
.rc-col { position: sticky; top: calc(var(--navh, 64px) + 24px); }
.rc-receipt { background: var(--white); border-radius: 18px; padding: 30px 28px 28px; position: relative; margin-top: 70px; box-shadow: 0 1px 0 rgba(15, 27, 25, .04), 0 18px 40px -26px rgba(15, 27, 25, .35); }
.rc-receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: radial-gradient(circle at 8px 0, var(--white) 7px, transparent 7.5px) 50% 0 / 16px 10px repeat-x; }
.rc-mk { width: 46px; color: var(--coral); display: block; }
.rc-receipt h4 { font: 500 13px/1.3 var(--sans); color: var(--grey); margin-top: 18px; }
.rc-lines { list-style: none; margin: 12px 0 0; padding: 0; min-height: 40px; }
.rc-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 10px 0; border-top: 1px dashed rgba(15, 27, 25, .2); animation: rc-in .4s var(--ease); }
@keyframes rc-in { from { opacity: 0; transform: translateY(-4px); } }
.rc-lines .rc-empty { color: var(--grey); border-top: 0; animation: none; }
.rc-tot { border-top: 1.5px solid var(--ink); margin-top: 6px; padding-top: 16px; }
.rc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .rc-row + .rc-row { margin-top: 8px; }
.rc-tot small { font-size: 13px; color: var(--grey); } .rc-tot b { font-size: clamp(26px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.035em; } .rc-tot .rc-m b { font-size: 18px; }
.rc-row[hidden] { display: none; }
.rc-tot b.rc-nil { font-size: 18px; color: var(--grey); }
.rc-receipt .btn { display: block; text-align: center; margin-top: 22px; }
.rc-holder { position: absolute; right: 22px; top: -62px; width: 92px; color: var(--coral); }
.rc-receipt { scroll-margin-top: calc(var(--navh, 64px) + 80px); }   /* the phone bar's target: the nav and the 62px Sil holder both clear it (QA round two) */
.rc-holder.bump { animation: rc-bump .45s var(--ease); }
@keyframes rc-bump { 40% { transform: translateY(-10px) rotate(4deg); } }
.rc-foot { margin-top: 20px; font-size: 14px; color: var(--grey); }
/* under 800px the receipt drops below the options, so a sticky bar under them carries the running total */
.rc-bar { display: none; }
@media (max-width: 800px) {
  .rc-wrap { grid-template-columns: 1fr; } .rc-col { position: static; }
  .rc-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 48px; margin-top: 12px; padding: 14px 18px; border-radius: 12px; background: var(--ink); color: var(--white); font-size: 15px; text-decoration: none; }
  .rc-bar span { color: color-mix(in srgb, var(--white) 70%, var(--ink)); } .rc-bar b { font-weight: 600; text-align: right; }
  .rc-bar { transition: opacity .25s var(--ease); } .rc-bar.rc-bar-off { opacity: 0; pointer-events: none; }   /* fades once the receipt itself is on screen, so the total is not shown twice (site.js) */
}
@media (max-width: 600px) {
  .rc-opt { grid-template-columns: 22px 1fr; gap: 6px 14px; padding: 18px; }
  .rc-pr { grid-column: 2; grid-row: 2; text-align: left; display: flex; gap: 8px; align-items: baseline; } .rc-pr small { display: inline; }
  .rc-builders { padding-left: 54px; padding-right: 18px; }
  .rc-builders ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
}
@media (max-width: 380px) { .rc-builders { padding-left: 18px; } }   /* two columns of tile and name need the width: Squarespace spilled past the gutter (QA round two) */
@media (max-width: 340px) { .rc-builders { padding-right: 0; } .rc-builders ul { column-gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .rc-lines li { animation: none; } .rc-holder.bump { animation: none; } }
/* the starter page's later folds, rebuilt by hand (Nathan, 2026-10-21: "after the first two folds it needs work"):
   "What you get" as three cards, each topped by an object from the pricing panel; "How it starts" with the tools
   grid's pixel icons */
.sk-what { background: color-mix(in srgb, var(--mist) 26%, var(--white)); }
.sk-how { background: var(--white); }
@media (min-width: 961px) { .sk-what { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; } .sk-what h2 { grid-column: 1; } .sk-lede { grid-column: 2; margin-top: 0; } .sk-cards, .sk-total { grid-column: 1 / -1; } }   /* heading and lede side by side, the cards across the full width (2026-10-21) */
.sk-lede { margin-top: 16px; color: var(--grey); font-size: var(--t-lede); line-height: 1.55; max-width: 56ch; }
.sk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 5vh, 48px); }
.sk-card { background: var(--white); border: 1px solid rgba(15, 27, 25, .12); display: flex; flex-direction: column; }
.sk-card-opt { border-style: dashed; border-color: rgba(15, 27, 25, .28); }
.sk-ob { position: relative; height: 150px; background: color-mix(in srgb, var(--mist) 45%, var(--white)); overflow: hidden; }
.sk-ob-brand .sk-obmk { position: absolute; left: 22px; top: 22px; width: 54px; color: var(--coral); }
.sk-aa { position: absolute; right: 24px; top: 16px; font: 400 40px/1 var(--serif); color: var(--ink); }
.sk-chips { position: absolute; left: 22px; right: 22px; bottom: 24px; display: flex; height: 14px; border-radius: 999px; overflow: hidden; } .sk-chips i { flex: 1; }
.sk-ob-web { padding: 16px 18px 0; }
.sk-ob-web .pp-bar { border-radius: 6px 6px 0 0; border: 1px solid rgba(15, 27, 25, .1); border-bottom: 0; background: #FAFAF8; }
.sk-pg { display: block; background: var(--white); border: 1px solid rgba(15, 27, 25, .1); border-top: 0; padding: 12px 14px; height: 100%; }
.sk-pmk { display: block; width: 22px; color: var(--coral); margin-bottom: 8px; } .sk-pmk svg { display: block; width: 100%; }
.sk-pg i { display: block; height: 5px; width: 62%; border-radius: 3px; background: rgba(15, 27, 25, .16); margin-top: 5px; } .sk-pg i.s { width: 40%; }
.sk-phero { position: absolute; right: 30px; top: 46px; width: 38%; height: 56px; background: var(--mist); overflow: hidden; } .sk-phero svg { width: 100%; height: 100%; display: block; }
.sk-ob-care { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 0 22px; }
.sk-msg { background: var(--white); border: 1px solid rgba(15, 27, 25, .12); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font: 500 14px/1.35 var(--sans); max-width: 92%; }
.sk-ok { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--sans); color: var(--ink); background: color-mix(in srgb, var(--coral) 16%, var(--white)); padding: 7px 10px; border-radius: 999px; }
.sk-ok .pp-ck { width: 12px; height: 12px; color: var(--coral); }
.sk-ct { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sk-ct h3 { font: 600 var(--t-h4)/1.15 var(--sans); letter-spacing: -.02em; }
.sk-pr { margin-top: 4px; font-size: 14px; color: var(--grey); }
.sk-ct ul { list-style: none; margin: 14px 0 0; padding: 0; }
.sk-ct li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.4; text-wrap: pretty; }
.sk-ct .pp-ck { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--coral); }
.sk-total { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: 6px 16px; margin-top: 16px; padding: 18px 22px; background: var(--ink); color: var(--white); }
.sk-total span { font-size: 15px; color: var(--grey-d); } .sk-total b { font: 600 clamp(22px, 2vw, 28px)/1 var(--sans); letter-spacing: -.03em; }
.sk-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.sk-steps li .cx-tg-ic { width: 48px; height: 48px; grid-row: 1 / span 2; }
.sk-steps li b, .sk-steps li p { grid-column: 2; }
@media (max-width: 960px) { .sk-cards { grid-template-columns: 1fr 1fr; } .sk-card-opt { grid-column: 1 / -1; flex-direction: row; } .sk-card-opt .sk-ob { width: 42%; height: auto; min-height: 150px; flex: none; } }
@media (max-width: 600px) { .sk-cards { grid-template-columns: 1fr; gap: 12px; } .sk-card-opt { flex-direction: column; } .sk-card-opt .sk-ob { width: auto; min-height: 0; height: 130px; } .sk-ob { height: 130px; } .sk-total { padding: 16px 18px; } }
.ig-hero { padding: clamp(40px, 8vh, 90px) var(--m) clamp(28px, 4vh, 48px); }   /* the sticky .hb already holds its own height in the flow, so no --navh here; no section cap: the lede (64ch) and search (640px) carry their own, so the chips get the full width (QA round two) */
.ig-hero h1 { font: 600 var(--t-display)/.98 var(--sans); letter-spacing: -.045em; margin-top: 16px; text-wrap: balance; }
.ig-hero .cm-sub { margin-top: 22px; color: var(--grey); font-size: var(--t-lede); line-height: 1.55; max-width: 64ch; }
.ig-search { display: flex; align-items: center; gap: 12px; max-width: 640px; margin-top: clamp(24px, 4vh, 40px); padding: 0 18px; border: 1px solid var(--ink); color: var(--grey); }
.ig-search svg { width: 20px; height: 20px; flex: none; }
.ig-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 500 16px/1.2 var(--sans); padding: 16px 0; }
.ig-search input::placeholder { color: var(--grey); } .ig-search:focus-within { outline: 2px solid var(--coral); outline-offset: 2px; }
.ig-search input:focus, .ig-search input:focus-visible { box-shadow: none; outline: 0; }   /* the coral ring on the label is the one focus mark */
.ig-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ig-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }   /* gap and chip padding sized so all eleven sit on one row at 1440 (QA round two) */
.ig-chip { background: none; border: 1px solid var(--rule); color: var(--grey); font: 500 14px/1.2 var(--sans); padding: 11px 12px; min-height: 40px; cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); }
.ig-chip:hover { color: var(--ink); border-color: var(--ink); } .ig-chip.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.ig-chip:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.ig-count { margin: 14px 0 0; font-size: 14px; color: var(--grey); } .ig-count:empty { margin: 0; }   /* how many a chip or the search leaves, read out as it changes */
.ig-list { padding: 0 var(--m) var(--sec-y); }
.ig-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ig-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 14px; align-items: center; align-content: start; padding: 22px; border: 1px solid var(--rule); transition: border-color .3s var(--ease); }
.ig-card:hover { border-color: var(--ink); }
.ig-card .lc-t { background: color-mix(in srgb, var(--mist) 26%, var(--white)); }
.ig-card > div b { display: block; font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; }
.ig-card > div small { display: block; margin-top: 3px; font-size: 13px; color: var(--grey); }
.ig-card p { grid-column: 1 / -1; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--grey); }
.ig-card[hidden] { display: none; }
/* 2026-10-21: the hero in two columns with a tile cluster beside the heading; the cards grouped under category headings */
.ig-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: center; }
.ig-ht, .ig-tools { min-width: 0; } .ig-tools { grid-column: 1 / -1; }
.ig-field { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 100%); mask-image: linear-gradient(to right, transparent, #000 22%, #000 100%); }
.ig-field li { position: relative; aspect-ratio: 1; background: var(--white); border: 1px solid var(--rule); overflow: hidden; }
.ig-field li.e { background: color-mix(in srgb, var(--mist) 30%, var(--white)); border-color: transparent; }
.ig-field .lc-t { position: absolute; inset: 0; width: auto; height: auto; display: grid; place-items: center; background: transparent; } .ig-field .lc { width: 46%; height: 46%; }   /* pinned inside the square tile (the mark wrapper's own 56px height stretched the tile) */
.ig-group + .ig-group { margin-top: clamp(36px, 6vh, 56px); }
.ig-group[hidden] { display: none; }
.ig-gh { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--ink); }
@media (max-width: 960px) { .ig-hero { grid-template-columns: 1fr; } .ig-art { margin-top: 28px; max-width: 560px; } }
@media (max-width: 600px) { .ig-field { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .ig-field li:nth-child(n+25) { display: none; } }
.ig-none { margin: 32px 0 0; color: var(--grey); font-size: 15px; } .ig-none[hidden] { display: none; }
.ig-named { margin-top: 28px; font-size: 14px; color: var(--grey); max-width: 72ch; line-height: 1.55; }
@media (max-width: 960px) { .ig-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ig-cards { grid-template-columns: 1fr; gap: 8px; }
  /* phones (2026-10-21): one compact row per tool, the mark beside the name and line; the category is the heading above */
  .ig-card { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px; }
  .ig-card .lc-t { width: 44px; height: 44px; grid-row: 1 / span 2; } .ig-card .lc { width: 24px; height: 24px; }
  .ig-card > div b { font-size: 16px; padding-top: 2px; } .ig-card > div small { display: none; }
  .ig-card p { grid-column: 2; font-size: 14px; line-height: 1.45; }
  /* one sideways row of chips instead of six wrapped ones, so the list starts on the first screen (QA round two) */
  .ig-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--m)); margin-right: calc(-1 * var(--m)); padding: 0 var(--m) 4px; scrollbar-width: none; scroll-padding-inline: var(--m); }
  .ig-chips::-webkit-scrollbar { display: none; }
  .ig-chip { flex: none; white-space: nowrap; }
}

/* your team just uses it, on Mist: pixel clouds over the top, the copy lights up as it is read */
.cx-use { position: relative; background: var(--mist); padding-top: calc(var(--sec-y) + 150px); overflow: hidden; }
.cx-clouds { position: absolute; left: 0; right: 0; top: 0; height: 300px; pointer-events: none; z-index: 0; }
.cx-use > .cm-ut, .cx-use > .cm-uw { position: relative; z-index: 1; }
.cx-use .cm-ut > p, .cx-use .cm-note, .cx-use .cm-cap, .cx-use .cm-step { color: color-mix(in srgb, var(--ink) 72%, var(--tide)); }
.cx-use .cm-stepper, .cx-use .cm-step { border-color: color-mix(in srgb, var(--tide) 22%, transparent); }
.cx-wd { opacity: .16; transition: opacity .3s linear; } .cx-wd.on { opacity: 1; }

/* the index on white, the promises on Tide */
.cx-index { background: var(--white); }
.cx-index .cm-ix { border-top-color: rgba(15, 27, 25, .12); }
.cx-three { background: var(--tide); color: var(--white); }
.cx-three h2 { font-size: clamp(36px, 4.2vw, 64px); max-width: 22ch; } .cx-three ul { border-top-color: color-mix(in srgb, var(--white) 18%, transparent); }
.cx-three p { color: color-mix(in srgb, var(--white) 76%, var(--tide)); } .cx-three li::before { background: var(--blush); }

@media (max-width: 960px) { .cx-panel { grid-template-columns: 1fr; } .cx-hs { justify-content: flex-start; padding-top: 16px; } }
/* landscape phones and short tablets (761 to 960 wide, or any short screen): a single-column panel is
   taller than the pinned frame and was cut off, so the companies stack there too (D-147) */
@media (min-width: 761px) and (max-width: 960px) and (max-height: 899px), (min-width: 761px) and (max-height: 559px) {
  .cx-h { height: auto; } .cx-hs { position: static; height: auto; overflow: visible; padding-top: 0; } .cx-track { flex-direction: column; gap: 56px; transform: none !important; }
  .cx-panel { width: 100%; } .cx-hbar { display: none; }
}
@media (max-width: 760px) {
  .cx-h { height: auto; } .cx-hs { position: static; height: auto; overflow: visible; } .cx-track { flex-direction: column; gap: 56px; transform: none !important; }
  .cx-panel { width: 100%; } .cx-hbar { display: none; } .cx-pg { grid-template-columns: 1fr; } .cx-seam { height: 100px; }
}
@media (prefers-reduced-motion: reduce) { .cx-wd { transition: none; } }

@media (max-width: 960px) {
  .cm-hero, .cm-use, .cm-xh { grid-template-columns: 1fr; }
  .cm-hero { min-height: 0; } .cm-ixl { grid-template-columns: 1fr; } .cm-three ul { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cw-body, .cw-use { grid-template-columns: 1fr; min-height: 0; }
  .cw-side { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px; } .cw-co { width: 100%; margin: 0 0 8px; } .cw-navs { display: flex; flex-wrap: wrap; } .cw-nv { padding: 6px 8px; font-size: 12px; } .cw-sp, .cw-sps { display: none; }
  .cw-shelf { grid-template-columns: 1fr 1fr; } .cw-tile.t3 { display: none; } .cw-draft { grid-template-columns: 1fr; } .cw-sil { width: 48px; } .cm-win .cw-main { padding-bottom: 64px; }
  .cm-ledger li { grid-template-columns: 1fr; gap: 6px; } .cm-ledger .cm-lh { display: none; }
  .cm-cap { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cm-win .asm { opacity: 1; transform: none; transition: none; } .cw, .cw-side, .cw-tile, .cw-page { transition: none; } .cw-pane { animation: none; } .cw-t i, .cw-sent i { animation: none; }
}
/* phones (D-148): the gaps inside the sections in pixels, not vh, so nothing moves when the address bar slides */
@media (max-width: 760px) {
  .cm-ledger { margin-top: 56px; } .cm-nb, .cx-one .cm-nb { margin-top: 40px; } .cm-stepper { margin-top: 28px; } .cm-ixl { margin-top: 40px; } .cx-h { margin-top: 32px; }
}
/* D-150: the slct mark on the "yourcompany.slct.studio" window, Oxblood as on the home page portal */
.cw-mk.cw-slct { display: block; width: 22px; height: 13px; color: var(--oxblood); }
.cw-mk.cw-slct svg { display: block; width: 100%; height: 100%; }
/* D-150: Sil breaks out of the window and parachutes into the ledger, landing beside its heading (site.js) */
.bx-ledger { position: relative; }
.bx-spot { position: absolute; top: calc(var(--sec-y) - 6px); right: calc(var(--m) + 6vw); width: 64px; z-index: 2; pointer-events: none; }
.bx-para { position: fixed; left: 0; top: 0; width: 64px; z-index: 25; pointer-events: none; color: var(--coral); visibility: hidden; transform-origin: 50% 0; will-change: transform; }
.bx-para.on { visibility: visible; }
.bx-para.landed { position: absolute; transform: none !important; }
.bx-para .sil { width: 100%; }
.bx-chute { position: absolute; left: 50%; bottom: 86%; width: 170%; transform: translateX(-50%) scaleY(var(--c, 0)); transform-origin: 50% 100%; opacity: var(--co, 0); }
.bx-chute svg { display: block; width: 100%; height: auto; }
.bx-chute .ch1 { fill: var(--coral); } .bx-chute .ch2 { fill: var(--blush); } .bx-chute .ch3 { stroke: var(--blush); stroke-width: 1.4; fill: none; }
.bx-run.sil-out #cw-run .cw-sil { opacity: 0 !important; transition: none; }
@media (max-width: 760px) { .bx-spot { top: 22px; right: calc(var(--m) + 20px); width: 46px; } .bx-para { width: 46px; } }   /* in from the edge, so the 170% canopy stays on screen (QA 2026-10-21) */
/* D-158: "One system underneath" gets a right side: Sil keeps three flat pieces of a brand in the air, then
   heads each into its slot in a "Your brand" frame (site.js). The intro becomes two columns; on phones the
   art follows the words. The engine places Sil and the blocks by transform. */
.cx-one .cm-oh { max-width: none; display: grid; grid-template-columns: minmax(0, 64ch) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); align-items: center; }
.cx-one .cm-oh > :not(.cx-jg) { grid-column: 1; }
.cx-jg { grid-column: 2; grid-row: 1 / span 3; position: relative; min-width: 0; }
.cx-jg-stage { position: relative; container-type: inline-size; aspect-ratio: 10 / 7.6; overflow: clip; }
.cx-jg-ground { position: absolute; left: 0; right: 0; bottom: 3cqw; height: 2px; background: color-mix(in srgb, var(--mist) 28%, transparent); }
.cx-jg-sil { position: absolute; left: 0; bottom: 3cqw; width: 26%; will-change: transform; transform: translateX(17cqw); }
.cx-jg-sil .sil { color: var(--coral); transform-origin: 50% 100%; }
.cx-jg-b { position: absolute; left: 0; bottom: 0; will-change: transform; }
.cx-jg-sq { width: 9cqw; height: 9cqw; background: var(--blush); }
.cx-jg-bar { width: 15cqw; height: 6cqw; background: var(--mist); }
.cx-jg-aa { width: 9cqw; height: 9cqw; background: var(--white); color: var(--ink); display: grid; place-items: center; font: 400 5cqw/1 var(--serif); }
.cx-jg-frame { position: absolute; left: 55%; bottom: 40cqw; width: 42%; height: 21cqw; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 3cqw 3cqw; outline: 1.5px dashed color-mix(in srgb, var(--mist) 45%, transparent); outline-offset: -1.5px; transition: outline-color .3s steps(2), background-color .4s steps(3); }
.cx-jg-frame::before { content: "Your brand"; position: absolute; left: 0; bottom: calc(100% + 10px); font: 500 clamp(10px, 1.9cqw, 13px)/1 var(--sans); color: var(--grey-d); transition: color .3s; }
.cx-jg-frame.full { outline: 1.5px solid var(--mist); background: color-mix(in srgb, var(--mist) 8%, transparent); }
.cx-jg-frame.full::before { content: "Your brand, built in"; color: var(--white); }
.cx-jg-slot { outline: 1.5px dashed color-mix(in srgb, var(--mist) 35%, transparent); outline-offset: -1.5px; }
.cx-jg-frame.full .cx-jg-slot { outline-color: transparent; }
.cx-jg-s0 { width: 9cqw; height: 9cqw; } .cx-jg-s1 { width: 15cqw; height: 6cqw; } .cx-jg-s2 { width: 9cqw; height: 9cqw; }
/* before the script places them (and without it): the pieces sit in the frame */
.cx-jg-sq { transform: translate(58cqw, -43cqw); } .cx-jg-bar { transform: translate(68.5cqw, -43cqw); } .cx-jg-aa { transform: translate(85cqw, -43cqw); }
@media (max-width: 960px), (max-width: 1100px) and (max-height: 600px) {   /* tablets too: two columns left the scene a thumbnail (QA 2026-10-21) */
  .cx-one .cm-oh { grid-template-columns: minmax(0, 1fr); }
  .cx-jg { grid-column: 1; grid-row: auto; order: 9; margin-top: 40px; width: 100%; max-width: 480px; }
}
/* D-169: the tools as a grid of tall cells, three across, a hairline on each column's left (tools grid concept
   B of _process/platform-tools-grid-concepts-2026-10-18): a pixel icon at the top, a breath, then the name and
   what the team can do; names line up across a row. The icon builds pixel by pixel when the cell comes up
   (each rect has its own delay, --d) and again on hover; site.js marks the cell in. Without the script, or
   under reduced motion, everything is simply there. Two across on tablets, one on phones. */
.cx-index .cx-ixk { margin-top: clamp(36px, 6vh, 56px); }
.cx-tg { list-style: none; margin: clamp(20px, 3vh, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-tg > li { position: relative; display: flex; flex-direction: column; padding: 40px clamp(20px, 2.6vw, 40px) 64px; border-left: 1px solid rgba(15, 27, 25, .12); transition: background-color .3s var(--ease); }
.cx-tg > li:hover { background: color-mix(in srgb, var(--mist) 22%, var(--white)); }
.cx-tg-ic { display: block; width: 64px; height: 64px; }   /* four times the 16 by 16 drawing, so every pixel stays square */
.cx-tg-ic .i { fill: var(--ink); } .cx-tg-ic .o { fill: var(--coral); }
.cx-tg b { display: block; padding-top: 72px; font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; }
.cx-tg p { margin-top: 12px; color: var(--grey); font-size: 15.5px; line-height: 1.6; max-width: 36ch; }
.js .cx-tg rect { opacity: 0; transition: opacity 0s linear var(--d); }
.js .cx-tg > li.in rect { opacity: 1; }
.js .cx-tg > li.rb rect { transition: none; opacity: 0; }   /* the rebuild on hover starts from empty */
.js .cx-tg b, .js .cx-tg p { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) .3s, transform .6s var(--ease) .3s; }
.js .cx-tg > li.in b, .js .cx-tg > li.in p { opacity: 1; transform: none; }
@media (max-width: 960px) { .cx-tg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-tg > li:last-child:nth-child(odd) { grid-column: 1 / -1; } .cx-tg > li:last-child:nth-child(odd) p { max-width: 58ch; } }   /* an odd last cell spans the row (QA 2026-10-21) */
@media (max-width: 760px) {
  /* phones (2026-10-21): compact rows, the icon beside the name and line, not a tall desktop cell each */
  .cx-tg { grid-template-columns: minmax(0, 1fr); }
  .cx-tg > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; border-left: 0; border-top: 1px solid rgba(15, 27, 25, .12); padding: 20px 0 22px; }
  .cx-tg-ic { width: 48px; height: 48px; grid-row: 1 / span 2; }
  .cx-tg b { padding-top: 2px; grid-column: 2; font-size: 18px; }
  .cx-tg p { grid-column: 2; margin-top: 6px; font-size: 15px; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) { .js .cx-tg rect, .js .cx-tg b, .js .cx-tg p { transition: none; opacity: 1; transform: none; } }
/* D-171: "Private to you. Built to grow. Quiet about the AI.", one promise at a time (scroll concept C of
   _process/platform-three-scroll-concepts-2026-10-19). On desktop the section is held in place while you scroll
   through it: the heading's three phrases take turns, and with each its promise comes forward (earlier ones stay
   half lit, later ones dim), a Coral line filling the rule up to it; then it lets go. Smooth eases, no steps.
   site.js adds .held (desktop, motion allowed); without it, stacked, or under reduced motion, it is as before. */
@media (min-width: 961px) {
  .cx-three.held { padding-top: 0; padding-bottom: 0; height: 280vh; }
  .cx-three.held .cx3-hold { position: sticky; top: var(--navh, 64px); height: calc(100vh - var(--navh, 64px)); display: flex; flex-direction: column; justify-content: center; }
  .cx-three.held .cx3-ph { opacity: .26; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
  .cx-three.held .cx3-ph.on { opacity: 1; }
  .cx-three.held ul { position: relative; }
  .cx-three.held ul::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: var(--fill, 0px); background: var(--coral); transition: width .6s cubic-bezier(.22, 1, .36, 1); }
  .cx-three.held li { opacity: .3; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }   /* brightness only, so the three stay in line (QA round two) */
  .cx-three.held li::before { transform-origin: 0 50%; transition: background-color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .cx-three.held li.on { opacity: 1; }
  .cx-three.held li.on::before { background: var(--coral); transform: scale(1.5); }
  .cx-three.held li.done { opacity: .62; }
}
/* D-173: the joins (Anna, 2026-10-19). The pixel dissolves stay into and out of "Your team just uses it"; into
   "Private to you" the Tide rises instead as one flat panel with a straight top edge, eased with the scroll
   (site.js sets --r from 1 to 0); into the close there is no join at all, a straight cut. */
.cx-rise { position: relative; height: 140px; margin: -1px 0; z-index: 1; background: var(--a); overflow: hidden; }
.cx-rise i { position: absolute; left: 0; right: 0; top: 0; bottom: -2px; background: var(--b); transform: translateY(calc(var(--r, 1) * 100%)); will-change: transform; }
@media (max-width: 760px) { .cx-rise { height: 100px; } }
/* ==== Platform page, the story: end ==== */

/* ==== Method page, the order of work: start ==== */
/* The Method page (2026-10-18, D-174; restructured under D-180 after mistral.ai/research), generated by
   v3-build/method_body.py. A split hero with a framed Mist panel on the right, where the stack of the five
   things builds itself on load and Sil hops up it; two category cards and a featured card; the five steps
   as hairline rows with a "Start with" rail that marks what comes in as it is; a six-cell hairline grid
   with brand-shape icons; a horizontal card carousel of rules and terms; two tiles; an Oxblood band. The
   site's palette and type throughout; sentence-case labels. */
.mh-hero, .mh-starts, .mh-steps, .mh-own, .mh-rules, .mh-tiles2 { padding-left: var(--m); padding-right: var(--m); }
.mh-hero h1, .mh-starts h2, .mh-steps h2, .mh-own h2, .mh-rules h2, .mh-tiles2 h2, .mh-band h2 { font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.mh-hero h1 em, .mh-starts h2 em, .mh-steps h2 em, .mh-own h2 em, .mh-rules h2 em, .mh-tiles2 h2 em, .mh-band h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.mh-sh { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; margin-bottom: clamp(28px, 4vh, 44px); }
.mh-sh h2 { font-size: var(--t-h2); } .mh-sh p { color: var(--grey); font-size: var(--t-lede); line-height: 1.55; max-width: 46ch; }
.mh-ck { display: block; font-size: 13px; color: var(--grey); }
.mh-more { display: inline-block; margin-top: auto; padding-top: 18px; font: 600 14px/1 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* 1 the hero: copy left, the framed panel right */
.mh-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: calc(100svh - 65px); padding-top: clamp(40px, 8vh, 90px); padding-bottom: clamp(48px, 8vh, 90px); border-bottom: 1px solid var(--rule); }
.mh-hero h1 { font-size: var(--t-display); line-height: .98; margin-top: 16px; }
.mh-sub { color: var(--grey); font-size: var(--t-lede); line-height: 1.55; max-width: 44ch; margin: 24px 0 30px; }
.mh-w { display: inline-block; }
.js .mh-w { opacity: 0; transform: translateY(.5em); animation: mh-rise .7s var(--ease) forwards; animation-delay: calc(.08s + var(--i, 0) * .07s); }
@keyframes mh-rise { to { opacity: 1; transform: none; } }
.mh-panel { position: relative; background: var(--mist); outline: 2px solid var(--coral); outline-offset: -2px; padding: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 16px; overflow: hidden; }
.mh-tiles { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.mh-panel .md-art { position: relative; width: min(100%, calc((100svh - 65px - 200px) / .76)); margin: 0 auto; }
.mh-pcap { position: relative; margin-top: 10px; font-size: 12.5px; color: color-mix(in srgb, var(--ink) 70%, var(--tide)); text-align: right; }
/* the stack: Sil on the ground; the blocks slide in under him, a stepped base, each named for its step */
.md-art .sil { color: var(--coral); }
.fa-stage { position: relative; container-type: inline-size; aspect-ratio: 10 / 7.6; overflow: clip; }
.fa-ground { position: absolute; left: 0; right: 0; bottom: 3cqw; height: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.fa-l { position: absolute; left: 50%; height: 7cqw; display: flex; align-items: center; padding: 0 2.4cqw; font: 500 clamp(11px, 2.1cqw, 14px)/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; transform: translateX(-50%) translateX(var(--from)); opacity: 0; transition: transform .45s cubic-bezier(.3, .7, .4, 1), opacity .2s; }
.fa-l.in { transform: translateX(-50%); opacity: 1; }
.fa-l0 { bottom: 3cqw; width: 86%; background: var(--ink); color: var(--white); --from: -70cqw; }
.fa-l1 { bottom: 10cqw; width: 72%; background: var(--tide); color: var(--white); --from: 70cqw; }
.fa-l2 { bottom: 17cqw; width: 58%; background: var(--white); color: var(--ink); --from: -70cqw; }
.fa-l3 { bottom: 24cqw; width: 46%; background: var(--blush); color: var(--ink); --from: 70cqw; }
.fa-l4 { bottom: 31cqw; width: 36%; background: var(--oxblood); color: var(--white); --from: -70cqw; }
.fa-sil { position: absolute; left: 37%; width: 26%; bottom: calc(3cqw + var(--lv, 0) * 7cqw); transition: bottom .45s cubic-bezier(.3, 1.5, .5, 1); }
.fa-sil .sil { transform-origin: 50% 100%; }
.fa-sil.hop .sil { animation: fa-hop .55s cubic-bezier(.3, .7, .4, 1); }
@keyframes fa-hop { 0% { transform: none; } 20% { transform: scale(1.08, .86); } 50% { transform: translateY(-40%) scale(.95, 1.06); } 82% { transform: scale(1.06, .9); } 100% { transform: none; } }
html:not(.js) .fa-l { transform: translateX(-50%); opacity: 1; } html:not(.js) .fa-sil { --lv: 5; } html:not(.js) .mh-w { opacity: 1; }

/* 2 where a project starts: two category cards and the featured one */
.mh-starts { padding-top: var(--sec-y); padding-bottom: var(--sec-y); border-bottom: 1px solid var(--rule); }
.mh-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mh-cat { display: flex; flex-direction: column; background: var(--white); padding: 24px 24px 22px; text-decoration: none; min-height: 240px; transition: background .15s steps(1), color .15s steps(1); }
.mh-cat h3, .mh-feat h3 { font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.03em; margin-top: 14px; }
.mh-cat p, .mh-feat p { color: var(--grey); font-size: 16px; line-height: 1.55; margin-top: 12px; max-width: 46ch; }
.mh-cat:hover, .mh-feat:hover { background: var(--ink); color: var(--white); } .mh-cat:hover p, .mh-cat:hover .mh-ck, .mh-feat:hover p, .mh-feat:hover .mh-ck { color: var(--grey-d); }
.mh-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; margin-top: 1px; border: 1px solid var(--rule); border-top: 0; padding: 24px; text-decoration: none; transition: background .15s steps(1), color .15s steps(1); }
.mh-feat h3 { max-width: 20ch; } .mh-feat .mh-more { grid-column: 1 / -1; padding-top: 10px; }

/* 3 the order of work: the rail and the rows */
.mh-steps { padding-top: var(--sec-y); padding-bottom: var(--sec-y); border-bottom: 1px solid var(--rule); }
.mh-list { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.mh-rail { position: sticky; top: calc(var(--navh, 64px) + 24px); }
.mh-rk { font-size: 13px; color: var(--grey); }
.mh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mh-chip { font: 500 14px/1 var(--sans); background: var(--white); color: var(--ink); border: 1px solid var(--ink); padding: 10px 13px; cursor: pointer; border-radius: 0; transition: background .15s steps(1), color .15s steps(1); }
.mh-chip:hover, .mh-chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.mh-chip:focus-visible, .mh-arr:focus-visible, .mh-track:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.mh-rn { margin-top: 16px; font-size: 14px; color: var(--grey); line-height: 1.5; max-width: 26ch; }
.mh-rows { border-top: 1px solid var(--ink); }
.mh-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) auto; gap: 16px 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: start; transition: opacity .3s var(--ease); scroll-margin-top: calc(var(--navh, 64px) + 24px); }
.mh-row h3 { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; }
.mh-rt p { font-size: 16px; line-height: 1.55; max-width: 60ch; }
.mh-rg { margin-top: 10px; color: var(--grey); font-size: 15px; } .mh-rg span { display: block; font-size: 13px; margin-bottom: 2px; }
.mh-tag { font: 500 12.5px/1 var(--sans); color: var(--ink); white-space: nowrap; padding: 7px 9px; border: 1px solid var(--rule); margin-top: 2px; }
.mh-row.pre { opacity: .5; } .mh-row.pre .mh-tag { border-style: dashed; color: var(--grey); }
.mh-row.here .mh-tag { background: var(--coral); border-color: var(--coral); }

/* 4 what is yours: the grid of cells */
.mh-own { padding-top: var(--sec-y); padding-bottom: var(--sec-y); border-bottom: 1px solid var(--rule); }
.mh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mh-cell { background: var(--white); padding: 22px 22px 24px; min-height: 240px; display: flex; flex-direction: column; }
.mh-ic { display: block; width: 44px; height: 44px; margin-bottom: auto; } .mh-ic svg { width: 100%; height: 100%; display: block; }
.mh-cell.mh-mist .mh-ic { color: var(--mist); } .mh-cell.mh-blush .mh-ic { color: var(--blush); } .mh-cell.mh-ox .mh-ic { color: var(--oxblood); }
.mh-who { display: block; font-size: 13px; color: var(--grey); margin-top: 28px; }
.mh-cell h3 { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; margin-top: 6px; }
.mh-cell p { color: var(--grey); font-size: 15px; line-height: 1.5; margin-top: 8px; }

/* 5 what we hold the work to: the carousel */
.mh-rules { padding-top: var(--sec-y); padding-bottom: var(--sec-y); border-bottom: 1px solid var(--rule); overflow: hidden; }
.mh-sh-row { align-items: end; } .mh-nav { display: flex; gap: 6px; justify-self: end; }
.mh-arr { font: 600 14px/1 var(--sans); background: var(--white); color: var(--ink); border: 1px solid var(--ink); width: 40px; height: 40px; cursor: pointer; border-radius: 0; transition: background .15s steps(1), color .15s steps(1); }
.mh-arr:hover { background: var(--ink); color: var(--white); } .mh-arr[disabled] { opacity: .3; cursor: default; }
.mh-track { position: relative; display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--m); scrollbar-width: none; margin: 0 calc(-1 * var(--m)); padding: 0 var(--m); background: var(--rule); }   /* positioned, so the cards' offsets are the track's own; the snap points sit at the gutter */ .mh-track::-webkit-scrollbar { display: none; }
.mh-card { flex: none; width: min(360px, 78vw); scroll-snap-align: start; min-height: 300px; padding: 22px 22px 24px; display: flex; flex-direction: column; background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mh-card::before { content: ""; display: block; height: 96px; margin: -22px -22px 22px; }
.mh-card.mh-mist::before { background: var(--mist); } .mh-card.mh-blush::before { background: var(--blush); } .mh-card.mh-tide::before { background: var(--tide); } .mh-card.mh-white::before { background: var(--white); border-bottom: 1px solid var(--rule); }
.mh-card h3 { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; margin-top: 8px; }
.mh-card p { color: var(--grey); font-size: 15px; line-height: 1.5; margin-top: 8px; }
.mh-dots { display: flex; gap: 6px; margin-top: 18px; } .mh-dots i { width: 18px; height: 3px; background: var(--rule); } .mh-dots i.on { background: var(--ink); }

/* 6 the two tiles */
.mh-tiles2 { padding-top: var(--sec-y); padding-bottom: var(--sec-y); text-align: center; }
.mh-tiles2 h2 { font-size: var(--t-h2); max-width: 20ch; margin: 0 auto; } .mh-tiles2 > p { color: var(--grey); font-size: var(--t-lede); margin: 16px auto 0; max-width: 44ch; }
.mh-tl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: clamp(28px, 4vh, 44px); }
.mh-tile { display: grid; place-items: center; min-height: 180px; background: var(--white); text-decoration: none; font: 600 var(--t-h3)/1.1 var(--sans); letter-spacing: -.03em; transition: background .15s steps(1), color .15s steps(1); }
.mh-tile:hover { background: var(--ink); color: var(--white); }

/* 7 the band */
.mh-band { background: var(--oxblood); color: var(--white); padding: clamp(64px, 10vh, 120px) var(--m); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; }
.mh-band h2 { font-size: var(--t-display); line-height: .98; max-width: 14ch; }
.mh-band p { color: color-mix(in srgb, var(--white) 80%, var(--oxblood)); font-size: var(--t-lede); line-height: 1.55; max-width: 40ch; }
.mh-band .mh-cta { display: inline-block; margin-top: 22px; background: var(--coral); color: var(--ink); } .mh-band .mh-cta:hover { background: var(--white); }

@media (max-width: 960px) {
  .mh-hero { grid-template-columns: 1fr; min-height: 0; } .mh-panel .md-art { width: 100%; }
  .mh-sh, .mh-feat, .mh-band { grid-template-columns: 1fr; align-items: start; }
  .mh-list { grid-template-columns: 1fr; } .mh-rail { position: static; }
  .mh-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .mh-starts, .mh-steps, .mh-own, .mh-rules, .mh-tiles2 { --sec-y: 72px; }
  .mh-cats, .mh-grid, .mh-tl { grid-template-columns: 1fr; } .mh-cat, .mh-cell { min-height: 0; }
  .mh-row { grid-template-columns: 1fr; gap: 10px; } .mh-tag { justify-self: start; }
  .mh-hero { padding-top: 56px; padding-bottom: 48px; }
}
@media (max-width: 400px) { .mh-hero .acts .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .js .mh-w { animation: none; opacity: 1; transform: none; } .fa-l, .fa-sil, .mh-row { transition: none; } .fa-sil.hop .sil { animation: none; } }
/* ==== Method page, the order of work: end ==== */


/* ==== Process page (D-216): start ==== */
/* Ported from _process/process-page-three-2026-10-20 (the concept files named below), with .px renamed .pr-sec
   and the page-wide rules scoped to .pr-page, so nothing here reaches another page. */

/* ---- from base.css (the grid, type roles, buttons) ---- */
/* The Process page concepts (D-196): what all three share.
   One grid: twelve columns between the page margins (var(--m)), the same as the site's hairline columns,
   with one gutter. Every block in every concept starts and ends on a column line. */
:root { --gut: clamp(16px, 2vw, 32px); --nav: 88px; }
.pr-sec { padding: var(--sec-y) var(--m); position: relative; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }

/* type roles, as the Platform page's */
.px-k { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey); }
.px-k i { width: 7px; height: 7px; background: var(--coral); flex: none; }
.px-h1, .px-h2, .px-h3 { font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.px-h1 em, .px-h2 em, .px-h3 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.px-h1 { font-size: var(--t-display); line-height: .98; }
.px-h2 { font-size: var(--t-h2); }
.px-h3 { font-size: var(--t-h3); letter-spacing: -.035em; line-height: 1.05; }
.px-h4 { font: 600 var(--t-h4)/1.2 var(--sans); letter-spacing: -.02em; }
.px-lede { font-size: var(--t-lede); line-height: 1.55; color: var(--grey); }
.px-p { line-height: 1.6; color: var(--grey); }
.px-dark { background: var(--ink); color: var(--white); }
.px-dark .px-lede, .px-dark .px-p, .px-dark .px-k { color: var(--grey-d); }
.px-mist { background: var(--mist); }
.px-mist .px-lede, .px-mist .px-p, .px-mist .px-k { color: color-mix(in srgb, var(--ink) 72%, var(--mist)); }

/* buttons: the home page's, square, the fill wiping in from the left (D-181) */
.pr-sec .acts .btn, .px-btn { position: relative; isolation: isolate; overflow: hidden; transition: color .35s var(--ease), transform .15s var(--ease); }
.pr-sec .acts .btn::before, .px-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease); }
.pr-sec .acts .btn:hover::before, .pr-sec .acts .btn:focus-visible::before, .px-btn:hover::before, .px-btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.pr-sec .acts .btn.p, .pr-sec .acts .btn.p:hover { background: var(--ink); color: var(--white); }
.pr-sec .acts .btn.p::before { background: var(--oxblood); }
.pr-sec .acts .btn.s, .pr-sec .acts .btn.s:hover { background: var(--white); color: var(--ink); }
.pr-sec .acts .btn.s::before { background: var(--ink); }
.pr-sec .acts .btn.s:hover, .pr-sec .acts .btn.s:focus-visible { color: var(--white); }
.pr-sec .acts .btn:active { transform: scale(.98); }
.px-dark .acts { border-color: var(--white); }
.px-dark .acts .btn.p, .px-dark .acts .btn.p:hover { background: var(--white); color: var(--ink); }
.px-dark .acts .btn.p::before { background: var(--coral); }

/* the close: the Platform page's (.cm-close), Oxblood */
.px-close { background: var(--oxblood); color: var(--white); text-align: center; padding: clamp(96px, 16vh, 180px) var(--m); }
.px-close .px-h1 { max-width: 16ch; margin: 0 auto; }
.px-close p { color: color-mix(in srgb, var(--white) 80%, var(--oxblood)); font-size: var(--t-lede); line-height: 1.55; max-width: 44ch; margin: 22px auto 30px; }
.px-close .acts { margin: 0 auto; border: 0; }
.px-close .acts .btn.p, .px-close .acts .btn.p:hover { background: var(--white); color: var(--ink); }
.px-close .acts .btn.p::before { background: var(--coral); }

/* staggered children: base.js sets --i on each child of [data-stagger] */
.js [data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-stagger].in > * { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .pr-sec { --sec-y: 80px; }
  .g12 { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .g12 > * { grid-column: 1 / -1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-sec .acts .btn::before, .px-btn::before { transition: none; }
  .js [data-stagger] > * { opacity: 1; transform: none; transition: none; }
}

/* ---- from a.css (the pinned scene of the stages) ---- */
/* Process concept A, "One window" (D-196). Classes pa-. On base.css's twelve columns. */

/* the window, in the Platform page's language */
.pa-win { position: relative; background: var(--white); color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 27, 25, .08), 0 1px 0 rgba(15, 27, 25, .05), 0 30px 60px -32px rgba(15, 27, 25, .4); }
.pa-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid rgba(15, 27, 25, .1); font-size: 12px; color: var(--grey); }
.pa-dom { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.pa-mark { display: block; width: 22px; height: 13px; fill: var(--oxblood); flex: none; }
.pa-tt { font-weight: 600; color: var(--ink); margin-left: auto; }
.pa-me { width: 22px; height: 22px; border-radius: 8px; background: var(--coral); color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 11px; flex: none; }
.pa-arr { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s var(--ease); }
.pa-tick { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the thread: the enquiry and the reply */
.pa-thread { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3vw, 36px); }
.pa-msg p { font: 500 clamp(15px, 1.25vw, 18px)/1.4 var(--sans); letter-spacing: -.01em; }
.pa-who { display: block; font-size: 12px; color: var(--grey); margin-bottom: 6px; }
.pa-you { align-self: flex-start; max-width: 34ch; padding: 16px 18px; background: #F3F5F4; border-radius: 14px 14px 14px 4px; }
.pa-us { align-self: flex-end; display: flex; align-items: flex-end; gap: 12px; }
.pa-us > div { max-width: 32ch; padding: 16px 18px; background: var(--ink); color: var(--white); border-radius: 14px 14px 4px 14px; }
.pa-us .pa-who { color: var(--grey-d); }
.pa-av { width: 44px; flex: none; order: 2; }
.pa-car { display: none; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: pa-blink 1s steps(1) infinite; }
.pa-you.typing .pa-car { display: inline-block; }
@keyframes pa-blink { 50% { opacity: 0; } }

/* 1 hero */
.pa-hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--nav) + 16px); }
.pa-hg { width: 100%; align-items: center; }
.pa-ht { grid-column: 1 / 7; }
.pa-ht .px-h1 { margin-top: 18px; }
.pa-ht .px-lede { max-width: 44ch; margin: 24px 0 32px; }
.pa-hw { grid-column: 7 / 13; }
.pa-hwin .pa-thread { min-height: clamp(300px, 40vh, 400px); justify-content: center; background: linear-gradient(rgba(15, 27, 25, .045) 1px, transparent 1px) 0 0 / 100% 40px; }
.pa-cap { margin-top: 12px; font-size: 12.5px; color: var(--grey); }
.js .pa-hwin .pa-us { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .pa-hwin.pa-done .pa-us { opacity: 1; transform: none; }
.js .pa-hwin .pa-av .sil { transform: scale(.6); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .25s; }
.js .pa-hwin.pa-done .pa-av .sil { transform: none; }

/* 2 three ways in: the home page's pricing pattern */
.pa-wh { max-width: 62ch; margin: 0 auto; text-align: center; }
.pa-wh .px-lede { margin: 20px auto 0; max-width: 54ch; }
.pa-tabs { display: flex; justify-content: center; margin-top: 40px; }
.pa-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; background: #F2F2EF; border-radius: 14px; }
.pa-tab { position: relative; font: 500 14px/1 var(--sans); color: var(--ink); background: none; border: 0; border-radius: 10px; padding: 13px 16px; cursor: pointer; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.pa-tab[aria-pressed="true"] { background: var(--white); box-shadow: 0 1px 2px rgba(15, 27, 25, .12); }
.pa-tp { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(15, 27, 25, .08); overflow: hidden; opacity: 0; transition: opacity .25s var(--ease); }
.pa-tpi { display: block; height: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left center; }
.pa-ways.auto .pa-tab[aria-pressed="true"] .pa-tp { opacity: 1; }
.pa-panel { margin-top: 28px; border-radius: 26px; padding: clamp(32px, 5vw, 72px); transition: background-color .6s var(--ease); }
.pa-panel[data-tint="blush"] { background: color-mix(in srgb, var(--blush) 30%, var(--white)); }
.pa-panel[data-tint="mist"] { background: color-mix(in srgb, var(--mist) 50%, var(--white)); }
.pa-panel[data-tint="tide"] { background: color-mix(in srgb, var(--tide) 14%, var(--white)); }
.pa-panel[data-tint="oxblood"] { background: color-mix(in srgb, var(--oxblood) 11%, var(--white)); }
.pa-pane { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gut); align-items: center; }
.pa-pane.on { display: grid; }
.js .pa-pane.on .pa-o { animation: pa-pop .6s var(--ease) both; }
.js .pa-pane.on .pa-oi > * { animation: pa-up .6s var(--ease) both; }
.js .pa-pane.on .pa-oi > :nth-child(2) { animation-delay: .06s; } .js .pa-pane.on .pa-oi > :nth-child(3) { animation-delay: .12s; } .js .pa-pane.on .pa-oi > :nth-child(4) { animation-delay: .18s; } .js .pa-pane.on .pa-oi > :nth-child(5) { animation-delay: .24s; }
@keyframes pa-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pa-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pa-ow { display: flex; justify-content: center; }
.pa-o { width: min(300px, 100%); aspect-ratio: 1; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--white); border-radius: 18px; box-shadow: 0 1px 0 rgba(15, 27, 25, .04), 0 22px 44px -28px rgba(15, 27, 25, .4); }
.pa-o-brand .pa-mark { width: 84px; height: auto; }
.pa-aa { font: 400 52px/1 var(--serif); }
.pa-chips { display: flex; gap: 6px; } .pa-chips i { width: 24px; height: 24px; border-radius: 6px; }
.pa-o-web { justify-content: flex-start; align-items: stretch; padding: 16px; }
.pa-bar { display: flex; align-items: center; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid rgba(15, 27, 25, .08); }
.pa-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(15, 27, 25, .18); }
.pa-bar b { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--grey); }
.pa-pg { display: flex; flex-direction: column; gap: 9px; flex: 1; padding-top: 8px; }
.pa-l1 { height: 12px; width: 62%; background: var(--ink); border-radius: 3px; }
.pa-l2 { height: 8px; width: 84%; background: var(--rule); border-radius: 3px; }
.pa-blk { flex: 1; border-radius: 8px; background: linear-gradient(90deg, var(--mist) 60%, var(--coral) 60%); }
.pa-o-plat { align-items: stretch; }
.pa-ask { padding: 16px; border-radius: 12px; background: #F3F5F4; font-size: 15px; line-height: 1.4; }
.pa-ask b { font-weight: 600; color: var(--oxblood); }
.pa-ok { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tide); }
.pa-q { font: 400 110px/.9 var(--serif); color: var(--oxblood); }
.pa-qs { width: 64px; }
.pa-oi .px-h3 { margin-top: 12px; } .pa-oi .px-h3:first-child { margin-top: 0; }
.pa-price { margin-top: 8px; font: italic 400 var(--t-h4)/1.3 var(--serif); color: var(--grey); }
.pa-oi .px-p { margin-top: 16px; max-width: 44ch; }
.pa-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.pa-link:hover .pa-arr { transform: translateX(4px); }
.pa-notes { list-style: none; margin-top: clamp(40px, 6vh, 64px); }
.pa-notes li { grid-column: span 6; padding-top: 20px; border-top: 1px solid var(--rule); }
.pa-notes li::before, .pa-keep li::before { content: ""; display: block; width: 8px; height: 8px; margin-bottom: 14px; background: var(--coral); }
.pa-notes .px-p { margin-top: 8px; max-width: 46ch; }

/* 3 the journey: chapters beside a pinned window */
.pa-jh { grid-column: 1 / 8; }
.pa-jh .px-lede { margin-top: 22px; max-width: 52ch; }
.pa-scene { margin-top: clamp(24px, 4vh, 48px); align-items: stretch; }
.pa-chs { grid-column: 1 / 6; }
.pa-ch { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.js .pa-ch { opacity: .28; transition: opacity .5s var(--ease); }
.js .pa-ch.on { opacity: 1; }
.pa-n { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.pa-n::before { content: ""; width: 7px; height: 7px; background: var(--coral); }
.pa-ch .px-h3 { margin-top: 16px; }
.pa-ch .px-p { margin-top: 14px; max-width: 42ch; }
.pa-dl { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(15, 27, 25, .15); max-width: 42ch; }
.pa-dl dt { font-size: 12.5px; color: color-mix(in srgb, var(--ink) 62%, var(--mist)); }
.pa-dl dd { margin: 4px 0 14px; line-height: 1.5; }
.pa-dl dd:last-child { margin-bottom: 0; }
.js .pa-nj { display: none; }
.pa-stage { grid-column: 6 / 13; }
.pa-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-top: 64px; }
html:not(.js) .pa-sticky { position: static; height: auto; padding-top: 48px; }
.pa-sbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pa-kds { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .5); }
.pa-kd { font: 500 13px/1 var(--sans); color: var(--ink); background: none; border: 0; border-radius: 9px; padding: 10px 13px; cursor: pointer; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.pa-kd.on { background: var(--white); box-shadow: 0 1px 2px rgba(15, 27, 25, .12); }
.pa-count { font-size: 13px; }
.pa-count b { font-weight: 600; }
.pa-names span { display: none; margin-left: 10px; color: color-mix(in srgb, var(--ink) 62%, var(--mist)); }
.pa-names span.on { display: inline; }
.pa-jwin { display: flex; flex-direction: column; height: clamp(400px, 60vh, 560px); }
.pa-aps { position: relative; flex: 1; }
.pa-ap { position: absolute; inset: 0; padding: clamp(20px, 3vw, 36px); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s linear .45s; }
.pa-ap.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .1s, transform .55s var(--ease) .1s, visibility 0s; }
.pa-ap .pa-thread { padding: 0; height: 100%; justify-content: center; }
.pa-gotbar { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; border-top: 1px solid rgba(15, 27, 25, .1); background: color-mix(in srgb, var(--mist) 22%, var(--white)); }
html:not(.js) .pa-gotbar { display: none; }
.pa-gl { flex: none; font-size: 12px; color: var(--grey); }
.pa-got { display: none; font-weight: 500; font-size: 14.5px; line-height: 1.4; }
.pa-got.on { display: inline; animation: pa-up .45s var(--ease); }
.pa-got a { color: inherit; text-underline-offset: 3px; }
.pa-jn { grid-column: 1 / 8; margin-top: 32px; }

/* the artefacts */
.pa-dh { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.pa-check { list-style: none; }
.pa-check li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(15, 27, 25, .08); font-size: 15px; }
.pa-box { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1.5px solid rgba(15, 27, 25, .22); border-radius: 7px; background: var(--white); color: var(--ink); }
.pa-box .pa-tick { stroke-dasharray: 14; stroke-dashoffset: 14; }
.pa-ap.on .pa-box { animation: pa-boxon .3s var(--ease) both; animation-delay: calc(.45s + var(--n) * .45s); }
.pa-ap.on .pa-box .pa-tick { animation: pa-draw .35s var(--ease) both; animation-delay: calc(.55s + var(--n) * .45s); }
@keyframes pa-boxon { to { background: var(--coral); border-color: var(--coral); } }
@keyframes pa-draw { to { stroke-dashoffset: 0; } }
.pa-rows { list-style: none; }
.pa-rows li { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(15, 27, 25, .08); }
.pa-rows span { font-size: 14px; color: var(--grey); }
.pa-rows i { flex: 1; border-bottom: 1px dotted rgba(15, 27, 25, .25); }
.pa-rows b { font-weight: 500; font-size: 14.5px; }
.pa-ap.on .pa-rows li { animation: pa-up .5s var(--ease) both; animation-delay: calc(.2s + var(--n) * .12s); }
.pa-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--grey); }
.pa-agree { flex: none; padding: 9px 14px; border-radius: 8px; background: var(--ink); color: var(--white); font-weight: 600; }
.pa-ap.on .pa-agree { animation: pa-press .5s var(--ease) 1.3s both; }
@keyframes pa-press { 40% { transform: scale(.92); } 100% { transform: none; background: var(--coral); color: var(--ink); } }
.pa-canvas { position: relative; height: 100%; }
.pa-art { position: absolute; inset: 0; border-radius: 10px; background: #F6F3F0; overflow: hidden; }
.pa-art span { position: absolute; border-radius: 4px; }
.pa-a1 { left: 8%; top: 12%; width: 42%; height: 9%; background: var(--ink); }
.pa-a2 { left: 8%; top: 26%; width: 34%; height: 4%; background: rgba(15, 27, 25, .2); }
.pa-a3 { right: 8%; top: 12%; width: 36%; height: 58%; background: var(--blush); }
.pa-a4 { left: 8%; bottom: 10%; width: 42%; height: 32%; background: var(--mist); }
.pa-pin { position: absolute; display: flex; align-items: center; gap: 8px; }
.pa-pin0 { left: 22%; top: 30%; } .pa-pin1 { left: 48%; top: 62%; }
.pa-pin b { width: 26px; height: 26px; flex: none; border-radius: 50% 50% 50% 4px; background: var(--coral); display: grid; place-items: center; font-size: 12px; box-shadow: 0 4px 10px -4px rgba(15, 27, 25, .5); }
.pa-pin span { padding: 8px 12px; border-radius: 8px; background: var(--white); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: 0 10px 24px -14px rgba(15, 27, 25, .55); }
.pa-ap.on .pa-pin { animation: pa-drop .6s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(.45s + var(--n) * .7s); }
@keyframes pa-drop { from { opacity: 0; transform: translateY(-16px) scale(.9); } to { opacity: 1; transform: none; } }
.pa-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--mist) 60%, var(--white)); font-size: 12px; font-weight: 600; color: var(--tide); }
.pa-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: pa-blink 1.6s steps(1) infinite; }

/* 4 after (Ink) */
.pa-ah { grid-column: 1 / 8; }
.pa-ah .px-lede { margin-top: 22px; max-width: 52ch; }
.pa-left { list-style: none; margin-top: clamp(40px, 7vh, 72px); }
.pa-cell { grid-column: span 4; position: relative; padding: 36px 0 8px; border-top: 1px solid var(--rule-d); }
.pa-cell + .pa-cell::before { content: ""; position: absolute; left: calc(var(--gut) / -2); top: 0; bottom: 0; border-left: 1px solid var(--rule-d); }
.pa-cell .cx-tg-ic { display: block; width: 48px; height: 48px; }
.pa-cell .cx-tg-ic .i { fill: var(--white); } .pa-cell .cx-tg-ic .o { fill: var(--coral); }
.pa-cell b { display: block; padding-top: 40px; }
.pa-cell .px-p { margin-top: 10px; max-width: 36ch; }
.js .pa-cell rect { opacity: 0; transition: opacity 0s linear var(--d); }
.js .pa-cell.in rect { opacity: 1; }
.js .pa-cell b, .js .pa-cell .px-p { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) .35s, transform .6s var(--ease) .35s; }
.js .pa-cell.in b, .js .pa-cell.in .px-p { opacity: 1; transform: none; }
.pa-keep { list-style: none; margin-top: clamp(56px, 9vh, 96px); }
.pa-keep li { grid-column: span 4; padding-top: 20px; border-top: 1px solid var(--rule-d); }
.pa-keep .px-p { margin-top: 8px; max-width: 40ch; }

/* tablets and phones: one column; the window sticks under the nav and the chapters pass beneath it */
@media (max-width: 960px) {
  .pa-hero { min-height: 0; padding-bottom: 72px; }
  .pa-hw { margin-top: 44px; }
  .pa-pane { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pa-o { width: min(240px, 100%); }
  .pa-notes li + li, .pa-keep li + li { margin-top: 28px; }
  .pa-scene { margin-top: 24px; }
  .pa-stage { order: -1; position: sticky; top: 60px; z-index: 3; margin: 0 calc(var(--m) * -1); padding: 14px var(--m) 12px; background: var(--mist); }
  .pa-stage.stuck { box-shadow: 0 -60px 0 var(--mist); }   /* fills the band under the nav islands while the window is pinned (site.js sets .stuck) */
  .pa-sticky { position: static; height: auto; padding-top: 0; gap: 10px; }
  .pa-count { display: none; }
  .pa-jwin { height: 300px; }
  .pa-top { padding: 8px 12px; }
  .pa-ap { padding: 16px 18px; }
  .pa-ap .pa-msg p { font-size: 14px; }
  .pa-ap .pa-you, .pa-ap .pa-us > div { padding: 11px 13px; }
  .pa-ap .pa-av { width: 32px; }
  .pa-check li, .pa-rows li { padding: 7px 0; font-size: 13.5px; }
  .pa-dh { margin-bottom: 6px; font-size: 14px; }
  .pa-foot { margin-top: 10px; }
  .pa-gotbar { padding: 10px 14px; gap: 10px; }
  /* D-197: the proposal's last row ran under the strip on phones; the strip already says it, so the row goes */
  .pa-aps { overflow: hidden; }
  .pa-foot { display: none; }
  .pa-got { font-size: 13.5px; }
  .pa-ch { min-height: 0; justify-content: flex-start; padding: 48px 0 56px; }   /* chapters pack under the pinned window */
  .pa-cell + .pa-cell::before { display: none; }
  .pa-cell + .pa-cell { margin-top: 8px; }
}
@media (max-width: 560px) {
  .pa-gl { display: none; }
  .pa-kd { padding: 9px 10px; }
  .pa-dom > span { display: none; }
  .pa-jwin { height: 320px; }
  .pa-check li, .pa-rows li { padding: 6px 0; font-size: 13px; }
  .pa-box { width: 18px; height: 18px; border-radius: 6px; }
  .pa-pin span { font-size: 12px; padding: 6px 9px; }
}
@media (max-width: 400px) { .pa-ht .acts .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; } }

@media (prefers-reduced-motion: reduce) {
  .js .pa-hwin .pa-us, .js .pa-hwin .pa-av .sil { opacity: 1; transform: none; transition: none; }
  .pa-ap, .pa-ap.on, .js .pa-ch { transition: none; }
  .js .pa-pane.on .pa-o, .js .pa-pane.on .pa-oi > *, .pa-got.on, .pa-ap.on .pa-rows li, .pa-ap.on .pa-pin { animation: none; }
  .pa-ap.on .pa-box, .pa-ap.on .pa-box .pa-tick, .pa-ap.on .pa-agree { animation-duration: 1ms; animation-delay: 0s; }
  .pa-live i, .pa-car { animation: none; }
  .js .pa-cell rect, .js .pa-cell b, .js .pa-cell .px-p { opacity: 1; transform: none; transition: none; }
}

/* ---- from d.css (the hero, the spacing system) ---- */
/* The Process page, combined (D-197): the hero in the Platform page's layout (site.css .cm-hero), its window
   the enquiry on slct.studio (D-199): a browser bar over the contact page's own front desk (site.css
   .kd-chat, .kd-log, .k-chip), sized for the hero. Classes pd- and pq-. */

/* the buttons, as the Platform page's hero (D-181): square, the fill wiping in from the left */
.pd-hero .acts .btn { position: relative; isolation: isolate; overflow: hidden; transition: color .35s var(--ease), transform .15s var(--ease); }
.pd-hero .acts .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--ease); }
.pd-hero .acts .btn:hover::before, .pd-hero .acts .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.pd-hero .acts .btn.p, .pd-hero .acts .btn.p:hover { background: var(--ink); color: var(--white); }
.pd-hero .acts .btn.p::before { background: var(--oxblood); }
.pd-hero .acts .btn.s, .pd-hero .acts .btn.s:hover { background: var(--white); color: var(--ink); }
.pd-hero .acts .btn.s::before { background: var(--ink); }
.pd-hero .acts .btn.s:hover, .pd-hero .acts .btn.s:focus-visible { color: var(--white); }

/* the window: a browser on slct.studio/contact */
.pq { position: relative; border-radius: 16px; background: var(--oxblood); color: var(--white); box-shadow: 0 1px 0 rgba(15, 27, 25, .06), 0 30px 60px -30px rgba(15, 27, 25, .45); }
.pq-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 16px 16px 0 0; background: var(--white); color: var(--grey); border: 1px solid rgba(15, 27, 25, .1); border-bottom: 0; }
.pq-dots { display: inline-flex; gap: 6px; } .pq-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(15, 27, 25, .14); }
.pq-url { flex: 1; max-width: 300px; margin: 0 auto; padding: 5px 12px; border-radius: 8px; background: rgba(15, 27, 25, .05); font-size: 12px; text-align: center; }
/* the contact page's .kd-chat, under its own name: site.js runs the real form on any .kd-chat */
.pd-hero .pq-chat { display: flex; flex-direction: column; height: clamp(400px, 52vh, 480px); border-radius: 0 0 16px 16px; background: color-mix(in srgb, var(--white) 4%, var(--oxblood)); padding: 20px clamp(16px, 2vw, 24px) 18px; }
.pd-hero .kd-log { justify-content: flex-end; overflow: hidden; margin-bottom: 14px; gap: 10px; -webkit-mask-image: linear-gradient(transparent, #000 48px); mask-image: linear-gradient(transparent, #000 48px); }
.pd-hero .kd-log li { font-size: clamp(13px, 1.05vw, 15px); padding: 10px 13px; flex: none; }
.pd-hero .kd-log li.s .kd-av { width: 24px; }
.pd-hero .kd-log li.pq-p span b { display: block; font-size: 11.5px; font-weight: 600; opacity: .7; margin-bottom: 2px; }
.pd-hero .kd-log li.pq-p .pq-mk { width: 22px; color: var(--oxblood); margin-bottom: 3px; }
.pd-hero .kd-log li.pq-p .pq-mk svg { display: block; width: 100%; height: auto; }
.pd-hero .kd-ans { padding-top: 12px; }
.pd-hero .pq-chips { gap: 6px; }
.pd-hero .k-chip { font-size: 12.5px; padding: 8px 11px; min-height: 0; cursor: default; }
.pq-comp { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pq-in { flex: 1; min-width: 0; min-height: 38px; display: flex; align-items: center; border-bottom: 1.5px solid color-mix(in srgb, var(--white) 35%, transparent); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.pq-t { overflow: hidden; text-overflow: ellipsis; }
.pq-car { flex: none; width: 2px; height: 1.1em; margin-left: 2px; background: var(--coral); opacity: 0; }
.pq-in.on .pq-car { opacity: 1; animation: cm-blink 1s steps(1) infinite; }
.pd-hero .pq-go { margin-top: 0; padding: 10px 14px; font-size: 13px; transition: transform .2s var(--ease), background-color .25s var(--ease); }
.pd-hero .pq-go.press { transform: scale(.92); background: var(--coral); color: var(--ink); }
.pd-hero .pq-chips .k-chip { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); }
.pd-hero .pq-chips .k-chip.tap { transform: scale(.94); }

@media (max-width: 960px) {
  .pd-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 56px; padding-bottom: 72px; }
  .pd-hero .cm-hw { margin-top: 12px; }
  .pd-hero .pq-chat { height: 420px; }
}
/* phones: the studio card sits inside the browser bar, beside the address, and the window drops a little so
   Sil's hops (lowered in site.js on narrow windows) stay clear of the buttons above */
@media (max-width: 560px) {
  .pd-hero { padding-bottom: 36px; }
  .pd-hero .cm-hw { margin-top: 32px; }
  .pd-hero .pq-chat { height: 400px; }
  .pq-url { max-width: none; margin: 0 136px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pq-bar { padding-top: 14px; padding-bottom: 14px; }   /* a taller bar, so the studio card sits inside it with room above and below (QA round two) */
  .pd-hero .h3-desk { top: 7px; right: 10px; padding: 6px 10px 7px; }
}
@media (max-width: 400px) { .pd-hero .acts .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .pd-hero .acts .btn::before { transition: none; } .pq-in.on .pq-car { animation: none; } }

/* D-206: "Three ways in", chosen by the visitor: what each option leaves you with, in place of a price */
.pd-ways .pd-lk { margin-top: 22px; font-size: 13px; color: var(--grey); }
.pd-ways .pd-leave { list-style: none; margin-top: 8px; max-width: 44ch; }
.pd-ways .pd-leave li { position: relative; padding: 9px 0 9px 20px; border-top: 1px solid rgba(15, 27, 25, .1); line-height: 1.45; }
.pd-ways .pd-leave li:last-child { border-bottom: 1px solid rgba(15, 27, 25, .1); }
.pd-ways .pd-leave li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; background: var(--coral); }
.pd-ways .pa-link { margin-top: 20px; }
.pd-ways .pa-pane[data-tint="oxblood"] .pd-lk { color: inherit; opacity: .7; }

/* D-208 (Anna): "make the spacing better on this and everything". One system for every heading on the page:
   the serif phrase always starts its own line, so a heading reads as two clean lines (sans, then serif) and
   never breaks inside the serif phrase; one gap from heading to intro; intros balanced so no word is left
   alone on the last line; section heads wide enough for the serif line to sit on one line. */
.pr-page .px-h2 em, .pr-page .px-close .px-h1 em, .pr-page .cm-hero h1 em { display: block; }
.pr-page .px-h2, .pr-page .px-close .px-h1 { max-width: none; line-height: 1.02; }
.pr-page .px-h2 + .px-lede, .pr-page .px-close .px-h1 + p, .pr-page .cm-hero h1 + .cm-sub { margin-top: 28px; }
.pr-page .px-lede, .pr-page .cm-sub, .pr-page .px-close p { text-wrap: balance; }
.pr-page .px-p, .pr-page .pd-leave li { text-wrap: pretty; }
.pa-wh { max-width: min(100%, 980px); }
.pa-wh .px-lede { max-width: 50ch; }
.pd-ways .w4-cards { margin-top: clamp(44px, 7vh, 72px); }
.w4-more { margin-top: 36px; }
.w4-unsure { margin-top: clamp(32px, 5vh, 48px); }
@media (max-width: 960px) {
  .pr-page .px-h2 + .px-lede, .pr-page .px-close .px-h1 + p, .pr-page .cm-hero h1 + .cm-sub { margin-top: 20px; }
  .pd-ways .w4-cards { margin-top: 32px; }
}

/* D-215: the Platform-style close follows this page's heading rule: the serif phrase starts its own line */
.pr-page .cm-close h2 em { display: block; }

/* ---- from h3.css (Sil delivers) ---- */
/* Hero motion 3, Sil delivers (D-198, D-199). Sil on the browser bar, the note he carries, and the studio's
   card on the window's corner. Classes h3-. */
.h3-sil { position: absolute; left: 0; top: 0; z-index: 5; width: 54px; color: var(--coral); pointer-events: none; will-change: transform; }
.h3-sil .sil { transform-origin: 50% 100%; }
.h3-sil svg { display: block; width: 100%; height: auto; }
.h3-sil .sil g[class^="x-"] { display: none; } .h3-sil .sil .x-happy { display: inline !important; }
.h3-note { position: absolute; left: 50%; bottom: 84%; width: 30px; height: 22px; margin-left: -15px; padding: 5px 5px 0; background: var(--coral); border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 27, 25, .18), 0 4px 10px -4px rgba(15, 27, 25, .4); display: flex; flex-direction: column; gap: 3px; opacity: 0; transform: translateY(14px) scale(.4) rotate(-8deg); transition: opacity .3s var(--ease), transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.h3-note i { height: 2px; background: rgba(15, 27, 25, .45); } .h3-note i:last-child { width: 60%; }
.h3-note.h3-held { opacity: 1; transform: rotate(-6deg); }
.h3-note.h3-drop { opacity: 0; transform: translateY(24px) scale(.6) rotate(4deg); transition: opacity .4s var(--ease) .1s, transform .5s var(--ease); }
.pd-hero .kd-log li.h3-took { opacity: .55; transition: opacity .4s var(--ease); }

/* the studio, on the window's top right corner */
.h3-desk { position: absolute; top: -26px; right: 18px; z-index: 4; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px 10px; border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px rgba(15, 27, 25, .1), 0 12px 24px -14px rgba(15, 27, 25, .5); font-size: 12px; line-height: 1.2; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.h3-desk b { font-weight: 600; }
.h3-st { display: flex; align-items: center; gap: 6px; color: var(--grey); }
.h3-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--mist); transition: background .3s var(--ease); }
.h3-st em { font-style: normal; }
.h3-desk.h3-busy { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--coral), 0 14px 26px -14px rgba(15, 27, 25, .5); }
.h3-desk.h3-busy .h3-st i { background: var(--coral); animation: h3-blink 1s var(--ease) infinite; }
.h3-desk.h3-done .h3-st i { background: var(--coral); }
@keyframes h3-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .h3-note, .h3-desk { transition: none; } .h3-desk.h3-busy .h3-st i { animation: none; } }

/* ---- from w4.css (three ways in) ---- */
/* "Three ways in", concept 2 refined (D-207). Three cards joined by "+", each illustration acting out what you
   get when the card plays (.play: on hover or focus, and once as it comes into view); a "Not sure yet?" row
   with Sil; a swipeable row on phones. Classes w4-. */
.w4-cards { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; margin-top: clamp(32px, 5vh, 56px); }
.w4-plus { align-self: center; justify-self: center; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: var(--ink); font: 600 18px/1 var(--sans); margin-top: -40%; }
.w4-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--white); border: 1px solid var(--rule); outline: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease); }
.w4-card:hover, .w4-card:focus-visible { transform: translateY(-6px); box-shadow: 0 28px 44px -32px rgba(15, 27, 25, .5); border-color: rgba(15, 27, 25, .2); }
.w4-card:focus-visible { box-shadow: 0 0 0 2px var(--coral), 0 28px 44px -32px rgba(15, 27, 25, .5); }
.w4-art { display: flex; justify-content: center; align-items: center; height: clamp(220px, 19vw, 270px); }
.w4-card[data-tint="blush"] .w4-art { background: color-mix(in srgb, var(--blush) 30%, var(--white)); }
.w4-card[data-tint="mist"] .w4-art { background: color-mix(in srgb, var(--mist) 50%, var(--white)); }
.w4-card[data-tint="tide"] .w4-art { background: color-mix(in srgb, var(--tide) 14%, var(--white)); }
.w4-tx { padding: 24px clamp(20px, 2vw, 28px) 28px; display: flex; flex-direction: column; flex: 1; }
.w4-tx .px-p { margin-top: 10px; }
.w4-tx .pa-link { margin-top: auto; padding-top: 20px; }

/* the illustrations: white objects in the card's tint */
.w4-o { width: 72%; max-width: 210px; aspect-ratio: 1; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--white); border-radius: 16px; box-shadow: 0 1px 0 rgba(15, 27, 25, .06), 0 18px 34px -24px rgba(15, 27, 25, .45); }
.w4-mk { width: 64px; height: auto; fill: var(--oxblood); overflow: visible; }
.w4-ma, .w4-mb { transition: transform .5s var(--ease); }
.w4-aa { font: 400 42px/1 var(--serif); color: var(--ink); }
.w4-sw { display: flex; gap: 5px; } .w4-sw i { width: 20px; height: 20px; border-radius: 5px; }
.w4-sw i:nth-child(1) { background: var(--oxblood); } .w4-sw i:nth-child(2) { background: var(--coral); } .w4-sw i:nth-child(3) { background: var(--mist); } .w4-sw i:nth-child(4) { background: var(--ink); }
.w4-card.play .w4-ma { animation: w4-up 1.6s var(--ease); } .w4-card.play .w4-mb { animation: w4-down 1.6s var(--ease); }
.w4-card.play .w4-aa { animation: w4-face 1.6s steps(1); }
.w4-card.play .w4-sw i { animation: w4-pop .6s cubic-bezier(.34, 1.5, .64, 1) both; }
.w4-card.play .w4-sw i:nth-child(2) { animation-delay: .12s; } .w4-card.play .w4-sw i:nth-child(3) { animation-delay: .24s; } .w4-card.play .w4-sw i:nth-child(4) { animation-delay: .36s; }
@keyframes w4-up { 30%, 60% { transform: translateY(-34px); } }
@keyframes w4-down { 30%, 60% { transform: translateY(34px); } }
@keyframes w4-face { 0% { font-family: var(--serif); font-style: normal; } 33% { font-family: var(--sans); font-weight: 600; letter-spacing: -.04em; } 66% { font-family: var(--serif); font-style: italic; } 100% { font-family: var(--serif); font-style: normal; } }
@keyframes w4-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }

.w4-o-web { justify-content: flex-start; align-items: stretch; padding: 12px; gap: 0; }
.w4-bar { display: flex; align-items: center; gap: 4px; padding-bottom: 9px; border-bottom: 1px solid rgba(15, 27, 25, .08); }
.w4-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(15, 27, 25, .18); }
.w4-bar b { margin-left: 6px; font-size: 10px; font-weight: 500; color: var(--grey); }
.w4-view { position: relative; flex: 1; overflow: hidden; }
.w4-page { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.w4-l1 { height: 11px; width: 62%; background: var(--ink); border-radius: 3px; }
.w4-l2 { height: 7px; width: 84%; background: var(--rule); border-radius: 3px; } .w4-l2.s { width: 56%; }
.w4-hero { height: 58px; border-radius: 7px; background: linear-gradient(90deg, var(--mist) 60%, var(--coral) 60%); } .w4-hero.b { background: var(--blush); }
.w4-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .w4-row i { height: 30px; border-radius: 5px; background: color-mix(in srgb, var(--mist) 55%, var(--white)); }
.w4-card.play .w4-page { animation: w4-scroll 2.6s var(--ease); }
@keyframes w4-scroll { 40%, 60% { transform: translateY(-46%); } }

.w4-o-plat { align-items: stretch; justify-content: center; }
.w4-ask { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: #F3F5F4; min-height: 84px; }
.w4-q { font-size: 10.5px; color: var(--grey); }
.w4-t { font-size: 14px; line-height: 1.35; color: var(--ink); }
.w4-t::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--coral); animation: cm-blink 1s steps(1) infinite; }
.w4-ok { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--tide); transition: opacity .35s var(--ease), transform .45s cubic-bezier(.34, 1.5, .64, 1); }
.w4-tk { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.w4-card.typing .w4-ok { opacity: 0; transform: scale(.8); }

/* the line under the cards, the dots (phones only) and the "Not sure yet?" row */
.w4-more { margin-top: 26px; text-align: center; color: var(--grey); font-size: var(--t-lede); }
.w4-more em { font-family: var(--serif); color: var(--ink); }
.w4-dots { display: none; }
.w4-unsure { display: flex; align-items: center; gap: 20px; margin-top: clamp(28px, 4vh, 44px); padding: 22px clamp(20px, 2.4vw, 32px); border-radius: 18px; background: color-mix(in srgb, var(--oxblood) 8%, var(--white)); }
.w4-sil { flex: none; width: 48px; color: var(--coral); } .w4-sil svg { display: block; width: 100%; height: auto; }
.w4-ut { flex: 1; } .w4-ut .px-p { margin-top: 4px; }
.w4-go { flex: none; }

@media (max-width: 960px) {
  .w4-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: clamp(28px, 4vh, 40px) calc(var(--m) * -1) 0; padding: 4px var(--m) 14px; scrollbar-width: none; }
  .w4-cards::-webkit-scrollbar { display: none; }
  .w4-card { flex: 0 0 82%; scroll-snap-align: center; }
  .w4-card:hover { transform: none; }
  .w4-plus { display: none; }
  .w4-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
  .w4-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(15, 27, 25, .2); transition: background .25s var(--ease), width .25s var(--ease); }
  .w4-dots i.on { width: 18px; border-radius: 4px; background: var(--ink); }
  .w4-unsure { flex-wrap: wrap; } .w4-go { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .w4-card, .w4-ok { transition: none; } .w4-card:hover { transform: none; }
  .w4-card.play .w4-ma, .w4-card.play .w4-mb, .w4-card.play .w4-aa, .w4-card.play .w4-sw i, .w4-card.play .w4-page, .w4-t::after { animation: none; }
}

/* D-210 (Anna): the cards, made seamless. One type scale inside the card (title, then description, then the
   list, each a step quieter), one 8px spacing rhythm (8 / 16 / 24 / 32), the same padding as the art above,
   and the "+" joins seated on the line where the illustration meets the text. */
.w4-cards { --art: clamp(220px, 19vw, 260px); --pad: clamp(24px, 2.2vw, 32px); }
.w4-art { height: var(--art); }
.w4-plus { align-self: start; margin-top: calc(var(--art) - 15px); width: 30px; height: 30px; font-size: 17px; box-shadow: 0 0 0 4px var(--white); }
.w4-tx { padding: var(--pad) var(--pad) calc(var(--pad) + 4px); }
.w4-tx .px-h3 { font-size: clamp(22px, 1.75vw, 28px); line-height: 1.1; letter-spacing: -.03em; }
.w4-tx .px-p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; max-width: 40ch; }
.w4-tx .pd-lk { margin-top: 24px; font-size: 12.5px; letter-spacing: .01em; }
.w4-tx .pd-leave { margin-top: 8px; max-width: none; }
.w4-tx .pd-leave li { padding: 10px 0 10px 18px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.w4-tx .pd-leave li::before { top: 17px; width: 6px; height: 6px; }
.w4-tx .pa-link { padding-top: 24px; font-size: 14px; }
.w4-o { width: 70%; max-width: 200px; }
/* the three descriptions take the same height, so the lists below them start on one line across the cards */
@media (min-width: 961px) { .w4-tx .px-p { min-height: 6.4em; } }
@media (max-width: 960px) {
  .w4-cards { --art: 210px; --pad: 24px; }
  .w4-tx .px-h3 { font-size: 24px; }
}
/* tablets: a narrower card, so more of the next one shows */
@media (min-width: 561px) and (max-width: 960px) { .w4-card { flex-basis: 58%; } }

/* ---- from j.css (how we work, stage by stage) ---- */
/* The Process page, the five stages reworked (D-213). On concept A's pinned scene (a.css): the three versions
   of every chapter and window, and the window visuals. A piece (.j-a) plays when its window is shown, after its
   own delay (--d); switching the kind shows that kind's version and plays it again. Classes j-. */

/* one kind at a time: the scene says which (data-kind) */
.j-journey .pa-scene[data-kind="brand"] [data-k]:not([data-k="brand"]):not(.pa-kd),
.j-journey .pa-scene[data-kind="web"] [data-k]:not([data-k="web"]):not(.pa-kd),
.j-journey .pa-scene[data-kind="plat"] [data-k]:not([data-k="plat"]):not(.pa-kd) { display: none; }
html:not(.js) .j-journey .j-v[data-k]:not([data-k="brand"]), html:not(.js) .j-journey .j-art[data-k]:not([data-k="brand"]) { display: none; }
.j-journey .j-v { animation: j-fade .45s var(--ease); }
.j-journey .pa-ch .px-p { margin-top: 14px; }
.j-journey .pa-kds { background: rgba(255, 255, 255, .6); }
.j-journey .pa-kd { padding: 11px 15px; font-weight: 600; }
.j-journey .pa-kd.on { background: var(--ink); color: var(--white); }
.j-tt span { font-weight: 600; }
.j-journey .pa-ap { display: flex; align-items: center; justify-content: center; }
.j-art { width: 100%; }

/* pieces enter when their window is on */
.js .j-a { opacity: 0; transform: translateY(10px); }
.js .pa-ap.on .j-a { animation: j-in .55s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes j-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes j-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes j-pop { 0% { opacity: 0; transform: scale(.6) rotate(-8deg); } 70% { opacity: 1; transform: scale(1.08) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-4deg); } }

.j-lab { font-size: 12px; color: var(--grey); margin: 0 0 10px; }
.j-ttl { font-weight: 600; font-size: 15px; }
.j-tk { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }

/* 04 brand: three routes, one recommended, then applied */
.j-bd { max-width: 480px; margin: 0 auto; }
.j-bd > .j-lab { margin-bottom: 16px; }   /* room for the Recommended badge, which rises 10px above the routes (QA round two) */
.j-routes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.j-route { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px 10px; border-radius: 12px; border: 1px solid var(--rule); background: var(--white); transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.j-rm { display: flex; flex-direction: column; gap: 4px; width: 46px; } .j-rm i { height: 9px; }
.r0 .j-rm i { background: var(--oxblood); } .r0 .j-rm i + i { width: 70%; }
.r1 .j-rm i { background: var(--coral); border-radius: 5px; } .r1 .j-rm i + i { margin-left: 30%; }
.r2 .j-rm i { background: var(--tide); } .r2 .j-rm i:first-child { width: 40%; }
.j-rt { font-size: 26px; line-height: 1; color: var(--ink); }
.j-rt.serif { font-family: var(--serif); } .j-rt.sans { font-family: var(--sans); font-weight: 600; letter-spacing: -.04em; } .j-rt.mono { font-family: ui-monospace, Menlo, monospace; font-size: 22px; }
.j-rs { display: flex; gap: 4px; } .j-rs b { width: 12px; height: 12px; border-radius: 3px; }
.r0 .j-rs b:nth-child(1) { background: var(--oxblood); } .r0 .j-rs b:nth-child(2) { background: var(--blush); } .r0 .j-rs b:nth-child(3) { background: var(--ink); }
.r1 .j-rs b:nth-child(1) { background: var(--coral); } .r1 .j-rs b:nth-child(2) { background: var(--mist); } .r1 .j-rs b:nth-child(3) { background: var(--ink); }
.r2 .j-rs b:nth-child(1) { background: var(--tide); } .r2 .j-rs b:nth-child(2) { background: var(--mist); } .r2 .j-rs b:nth-child(3) { background: var(--blush); }
.j-route small { font-size: 11px; color: var(--grey); }
.js .pa-ap.on .j-route.r0, .js .pa-ap.on .j-route.r2 { animation: j-in .55s var(--ease) both, j-dim .5s var(--ease) 1.5s forwards; animation-delay: var(--d), 1.5s; }
.js .pa-ap.on .j-route.r1 { animation: j-in .55s var(--ease) both, j-pick .5s var(--ease) 1.4s forwards; animation-delay: var(--d), 1.4s; }
@keyframes j-dim { to { opacity: .38; transform: scale(.96); } }
@keyframes j-pick { to { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 16px 24px -18px rgba(15, 27, 25, .5); } }
.j-rec { position: absolute; left: 50%; top: -10px; translate: -50% 0; padding: 4px 9px; border-radius: 999px; background: var(--coral); color: var(--ink); font: 600 11px/1 var(--sans); white-space: nowrap; z-index: 1; }
/* 04 website: wireframe, design, then a comment moves the booking up, then the phone */
.j-wd { position: relative; max-width: 470px; margin: 0 auto; padding-bottom: 28px; }
.j-desk { display: grid; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--white); width: 78%; }
.j-wbar { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(15, 27, 25, .07); font-size: 10.5px; color: var(--grey); }
.j-wbar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(15, 27, 25, .18); } .j-wbar b { margin-left: 6px; font-weight: 500; }
.j-wb { display: block; border-radius: 5px; background: rgba(15, 27, 25, .08); }
.j-wb.w1 { height: 12px; width: 60%; } .j-wb.w2 { height: 8px; width: 82%; } .j-wb.w3 { height: 70px; } .j-wb.w4 { height: 40px; }
.j-wcta { display: inline-block; justify-self: start; padding: 7px 12px; border-radius: 6px; background: rgba(15, 27, 25, .08); color: transparent; font: 600 11px/1 var(--sans); }
.js .pa-ap.on .j-desk .j-wb.w1 { animation: j-ink .5s var(--ease) 1s forwards; }
.js .pa-ap.on .j-desk .j-wb.w3 { animation: j-hero .5s var(--ease) 1.15s forwards; }
.js .pa-ap.on .j-desk .j-wb.w4 { animation: j-mist .5s var(--ease) 1.3s forwards; }
.js .pa-ap.on .j-desk .j-wcta { animation: j-cta .5s var(--ease) 1.2s forwards, j-up .7s var(--ease) 2.5s forwards; }
@keyframes j-ink { to { background: var(--ink); } }
@keyframes j-hero { to { background: linear-gradient(90deg, var(--mist) 60%, var(--coral) 60%); } }
@keyframes j-mist { to { background: color-mix(in srgb, var(--mist) 55%, var(--white)); } }
@keyframes j-cta { to { background: var(--ink); color: var(--white); } }
@keyframes j-up { to { transform: translate(10px, -68px); box-shadow: 0 6px 14px -6px rgba(15, 27, 25, .5); } }   /* onto the top of the hero image */
.j-pin { position: absolute; left: 62%; top: 44%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 999px; background: var(--white); box-shadow: 0 10px 20px -12px rgba(15, 27, 25, .5); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.j-pin b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); font-size: 11px; }
.js .pa-ap.on .j-pin { animation: j-in .5s var(--ease) both, j-out .4s var(--ease) 3s forwards; animation-delay: var(--d), 3s; }
@keyframes j-out { to { opacity: 0; transform: translateY(-6px); } }
.j-phone { position: absolute; right: 0; bottom: 0; width: 26%; display: grid; gap: 7px; padding: 14px 9px; border-radius: 16px; border: 1px solid var(--rule); background: var(--white); box-shadow: 0 16px 28px -18px rgba(15, 27, 25, .5); }
.j-phone .j-wb.w1 { width: 70%; background: var(--ink); } .j-phone .j-wb.w3 { height: 54px; background: linear-gradient(90deg, var(--mist) 60%, var(--coral) 60%); }
.j-phone .j-wcta.s { background: var(--ink); color: var(--white); }
.j-wstate { display: flex; gap: 6px; margin-top: 12px; } .j-wstate span { font-size: 11.5px; padding: 4px 8px; border-radius: 999px; background: rgba(15, 27, 25, .06); color: var(--grey); }
.js .pa-ap.on .j-wstate span:nth-child(1) { animation: j-chip .3s var(--ease) .2s forwards, j-unchip .3s var(--ease) 1s forwards; }
.js .pa-ap.on .j-wstate span:nth-child(2) { animation: j-chip .3s var(--ease) 1s forwards, j-unchip .3s var(--ease) 3s forwards; }
.js .pa-ap.on .j-wstate span:nth-child(3) { animation: j-chip .3s var(--ease) 3s forwards; }
@keyframes j-chip { to { background: var(--ink); color: var(--white); } }
@keyframes j-unchip { to { background: rgba(15, 27, 25, .06); color: var(--grey); } }

/* 04 platform: rules lock in, templates appear, a test brief becomes an on-brand draft */
.j-pd { max-width: 460px; margin: 0 auto; }
.j-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.j-rule { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12.5px; font-weight: 600; }
.j-lk { width: 11px; height: 11px; fill: none; stroke: var(--coral); stroke-width: 1.4; }
.j-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.j-tile { display: block; padding: 22px 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--mist) 50%, var(--white)); font-size: 11.5px; font-weight: 600; text-align: center; }
.j-brief { display: block; padding: 10px 12px; border-radius: 10px; background: #F3F5F4; font-size: 14px; }
.j-brief small { display: block; font-size: 10.5px; color: var(--grey); margin-bottom: 4px; }
.j-draft { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.j-dpg { display: block; width: 92px; height: 56px; border-radius: 6px; background: var(--oxblood); position: relative; }
.j-dpg::before { content: ""; position: absolute; left: 10px; top: 10px; width: 20px; height: 6px; background: var(--coral); }
.j-dpg::after { content: ""; position: absolute; left: 10px; bottom: 10px; width: 52px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .8); }
.j-dok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tide); }

.j-avs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.j-av { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.j-av i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); font: 600 15px/1 var(--sans); font-style: normal; }
.j-av:nth-child(1) i { background: var(--coral); } .j-av:nth-child(3) i { background: var(--blush); }
.j-av small { font-size: 11.5px; color: var(--grey); }
.j-onb { display: block; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 600; }
.j-onb small { display: block; font-size: 11px; font-weight: 500; color: var(--grey-d); margin-bottom: 4px; }
.j-sil { display: flex; align-items: flex-end; gap: 8px; margin-top: 12px; }
.j-sil .sil { width: 40px; color: var(--coral); } .j-sil svg { display: block; width: 100%; height: auto; }
.j-say { padding: 7px 10px; border-radius: 10px 10px 10px 3px; background: var(--white); font-size: 13px; font-weight: 500; box-shadow: 0 6px 14px -10px rgba(15, 27, 25, .5); }

/* D-237 (Anna, 2026-10-25): each stage on its own tinted canvas, under a rail that says where you are */
.j-journey .pa-ap { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; background-color: var(--jw); background-image: radial-gradient(rgba(15, 27, 25, .075) 1px, transparent 1.3px); background-size: 16px 16px; }
.j-journey .pa-ap[data-i="0"] { --jw: color-mix(in srgb, var(--blush) 18%, var(--white)); }
.j-journey .pa-ap[data-i="1"] { --jw: color-mix(in srgb, var(--mist) 42%, var(--white)); }
.j-journey .pa-ap[data-i="2"] { --jw: color-mix(in srgb, var(--blush) 10%, #F7F6F2); }
.j-journey .pa-ap[data-i="3"] { --jw: color-mix(in srgb, var(--mist) 26%, var(--white)); }
.j-journey .pa-ap[data-i="4"] { --jw: color-mix(in srgb, var(--coral) 12%, var(--white)); }
.j-journey .j-art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 2.6vw, 34px); }
.j-rail { display: flex; align-items: center; gap: 14px; padding: 11px clamp(16px, 2.4vw, 26px); border-bottom: 1px solid rgba(15, 27, 25, .06); background: rgba(255, 255, 255, .6); font-size: 12px; color: var(--grey); white-space: nowrap; }
.j-rn { font-weight: 600; color: var(--ink); }
.j-rsg { display: flex; gap: 4px; flex: 1; max-width: 200px; }
.j-rsg i { position: relative; flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(15, 27, 25, .1); }
.j-rsg i.d { background: var(--ink); }
.j-rsg i.c::after { content: ""; position: absolute; inset: 0; background: var(--coral); transform-origin: left center; }
.js .pa-ap.on .j-rsg i.c::after { animation: j-grow 1.4s var(--ease) .2s both; }
.j-rnm { margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.j-card { background: var(--white); border-radius: 14px; box-shadow: 0 0 0 1px rgba(15, 27, 25, .06), 0 1px 0 rgba(15, 27, 25, .04), 0 24px 44px -30px rgba(15, 27, 25, .5); }
.j-mk { display: block; width: 28px; height: auto; }
.j-fi { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }

/* 01 the first call: two of you on a call, the agenda ticked off as it is talked through */
.jc { width: 100%; max-width: 600px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: auto 1fr; gap: 14px; }
.jc-vid { position: relative; display: grid; gap: 8px; }
.jc-tile { position: relative; display: grid; place-items: center; height: 96px; border-radius: 12px; overflow: hidden; }
.jc-tile.you { background: var(--coral); }
.jc-tile.you i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); font: 600 17px/1 var(--sans); font-style: normal; color: var(--ink); }
.jc-tile.us { background: var(--ink); color: var(--coral); }
.jc-tile.us .j-mk { width: 44px; }
.jc-tile small { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(15, 27, 25, .28); color: var(--white); font-size: 10.5px; font-weight: 600; }
.jc-tile.us small { background: rgba(255, 255, 255, .14); }
.jc-wave { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.jc-wave b { width: 3px; height: 100%; border-radius: 2px; background: var(--ink); transform-origin: bottom; transform: scaleY(.3); }
.js .pa-ap.on .jc-wave b { animation: jc-talk .5s ease-in-out infinite alternate; }
.jc-wave b:nth-child(2) { animation-delay: .15s !important; } .jc-wave b:nth-child(3) { animation-delay: .3s !important; } .jc-wave b:nth-child(4) { animation-delay: .08s !important; }
@keyframes jc-talk { to { transform: scaleY(1); } }
.jc-live { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 10.5px; font-weight: 600; }
.jc-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: jc-blink 1.6s ease-in-out infinite; }
@keyframes jc-blink { 50% { opacity: .25; } }
.jc-card { grid-column: 2; grid-row: 1 / 3; padding: 18px 18px 16px; }
.jc-card ol { list-style: none; margin: 0; padding: 0; }
.jc-card li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(15, 27, 25, .07); font-size: 14.5px; }
.jc-n { position: relative; width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--mist) 60%, var(--white)); font: 600 11px/1 var(--sans); }
.jc-n .j-tk { position: absolute; inset: 0; margin: auto; color: var(--white); opacity: 0; }
.js .pa-ap.on .jc-n { animation: jc-done .35s var(--ease) forwards; animation-delay: var(--t); }
.js .pa-ap.on .jc-n .j-tk { animation: j-fade .3s var(--ease) forwards; animation-delay: var(--t); }
@keyframes jc-done { to { background: var(--ink); color: transparent; } }
.jc-next { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 13px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 600; }
.jc-next .j-tk { color: var(--coral); }
.jc-shared { padding: 14px 14px 10px; }
.jc-file { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; color: var(--ink); }
.jc-file .j-fi { color: var(--oxblood); }

/* 02 what we found: three pinned findings draw into the opportunity */
.jb { width: 100%; max-width: 600px; }
.jb-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jb-note { position: relative; display: block; min-height: 124px; padding: 22px 14px 14px; border-radius: 4px; font: italic 400 17px/1.3 var(--serif); color: var(--ink); box-shadow: 0 16px 24px -18px rgba(15, 27, 25, .55); }
.jb-note small { display: block; margin-bottom: 8px; font: 600 11px/1 var(--sans); color: rgba(15, 27, 25, .55); }
.jb-pin { position: absolute; left: 50%; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--oxblood); box-shadow: 0 3px 4px -1px rgba(15, 27, 25, .4); }
.jb-note.n0 { background: color-mix(in srgb, var(--blush) 55%, var(--white)); transform: rotate(-2deg); }
.jb-note.n1 { background: var(--white); transform: rotate(1.5deg); }
.jb-note.n2 { background: color-mix(in srgb, var(--mist) 80%, var(--white)); transform: rotate(-1deg); }
.jb-note.n1 .jb-pin { background: var(--coral); } .jb-note.n2 .jb-pin { background: var(--tide); }
.js .pa-ap.on .jb-note.n0 { animation-name: j-in0; } .js .pa-ap.on .jb-note.n1 { animation-name: j-in1; } .js .pa-ap.on .jb-note.n2 { animation-name: j-in2; }
@keyframes j-in0 { from { opacity: 0; transform: translateY(-14px) rotate(-6deg); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes j-in1 { from { opacity: 0; transform: translateY(-14px) rotate(5deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@keyframes j-in2 { from { opacity: 0; transform: translateY(-14px) rotate(-5deg); } to { opacity: 1; transform: rotate(-1deg); } }
.jb-lines { display: block; width: 100%; height: 44px; overflow: visible; }
.jb-lines path { fill: none; stroke: var(--coral); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.js .jb-lines path { stroke-dashoffset: 1; }
.js .pa-ap.on .jb-lines path { animation: j-draw .6s var(--ease) forwards; animation-delay: calc(1.15s + var(--n) * .12s); }
@keyframes j-draw { to { stroke-dashoffset: 0; } }
.jb-opp { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: var(--ink); color: var(--white); font: 600 19px/1.25 var(--sans); letter-spacing: -.01em; }
.jb-opp small { display: block; margin-bottom: 5px; font: 500 11.5px/1 var(--sans); letter-spacing: 0; color: var(--coral); }
.jb-spark { width: 26px; height: 26px; flex: none; fill: var(--coral); }
.js .pa-ap.on .jb-opp { animation: j-in .55s var(--ease) both, jb-glow 1.2s var(--ease) both; animation-delay: var(--d), calc(var(--d) + .3s); }
.js .pa-ap.on .jb-spark { animation: jb-turn .9s var(--ease) both; animation-delay: 2s; }
@keyframes jb-glow { 0% { box-shadow: 0 0 0 0 rgba(247, 99, 79, .55); } 100% { box-shadow: 0 0 0 14px rgba(247, 99, 79, 0); } }
@keyframes jb-turn { from { transform: rotate(-90deg) scale(.4); } to { transform: none; } }

/* 03 the proposal: one document, the plan on a timeline, signed and stamped */
.jp { position: relative; width: 100%; max-width: 560px; }
.jp-sheet { position: absolute; inset: 0; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px rgba(15, 27, 25, .06); }
.jp-sheet.s1 { transform: rotate(2.4deg) translate(10px, 8px); } .jp-sheet.s2 { transform: rotate(-1.6deg) translate(-8px, 10px); opacity: .7; }
.jp-doc { position: relative; padding: 0 20px 18px; overflow: hidden; }
.jp-head { display: flex; align-items: center; gap: 12px; margin: 0 -20px; padding: 14px 20px; background: var(--oxblood); color: var(--white); }
.jp-head .j-mk { color: var(--coral); }
.jp-head b { display: block; font-size: 15px; } .jp-head small { display: block; margin-top: 2px; font-size: 11.5px; color: rgba(255, 255, 255, .65); }
.jp-sub { margin-left: auto; max-width: 20ch; text-align: right; font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, .65); }
.jp-axis { display: grid; grid-template-columns: 44% 1fr; gap: 12px; padding: 12px 0 2px; font-size: 10.5px; color: var(--grey); }
.jp-axis span:last-child { display: flex; justify-content: space-between; } .jp-axis i { font-style: normal; }
.jp-row { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(15, 27, 25, .07); font-size: 14px; }
.jp-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(15, 27, 25, .05); }
.jp-bar i { position: absolute; top: 0; bottom: 0; border-radius: 5px; transform-origin: left center; }
.jp-row:nth-of-type(1) .jp-bar i { background: var(--oxblood); } .jp-row:nth-of-type(2) .jp-bar i { background: var(--coral); } .jp-row:nth-of-type(3) .jp-bar i { background: var(--tide); } .jp-row:nth-of-type(4) .jp-bar i { background: var(--blush); }
.js .pa-ap.on .jp-bar i { animation: j-grow .7s var(--ease) both; animation-delay: calc(var(--d) + .2s); }
.jp-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 14px; }
.jp-line { display: block; width: 150px; border-bottom: 1px solid var(--ink); }
.jp-line svg { display: block; width: 100%; height: 34px; }
.jp-line path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.js .jp-line path { stroke-dashoffset: 1; }
.js .pa-ap.on .jp-line path { animation: j-draw .9s ease-in-out forwards; animation-delay: 1.6s; }
.jp-sign small { display: block; margin-top: 6px; font-size: 11px; color: var(--grey); }
.jp-stamp { flex: none; padding: 7px 13px; border: 2px solid var(--oxblood); border-radius: 6px; color: var(--oxblood); font: 700 14px/1 var(--sans); letter-spacing: .02em; transform: rotate(-4deg); }
.js .pa-ap.on .jp-stamp { animation-name: j-pop; }

/* 04: the white cards on the canvas */
.j-bd { width: 100%; max-width: 520px; }
.j-route { box-shadow: 0 18px 30px -26px rgba(15, 27, 25, .5); }
.jd-lab { margin: 16px 0 8px; }
.jd-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jd-app { display: flex; flex-direction: column; gap: 6px; }
.jd-app small { font-size: 11px; color: var(--grey); }
.jd-o { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 78px; padding: 12px; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 22px -18px rgba(15, 27, 25, .55); }
.jd-cardm .jd-o { background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 14px 22px -18px rgba(15, 27, 25, .55); }
.jd-cardm .j-mk { width: 26px; color: var(--coral); margin-bottom: 4px; }
.jd-cardm i { display: block; height: 5px; width: 60%; border-radius: 3px; background: var(--ink); } .jd-cardm i + i { width: 40%; background: var(--rule); }
.jd-post .jd-o { background: var(--coral); }
.jd-post b { font: 600 28px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); } .jd-post i { display: block; height: 5px; width: 50%; border-radius: 3px; background: var(--ink); }
.jd-sign .jd-o { align-items: center; background: var(--ink); color: var(--coral); }
.jd-sign .j-mk { width: 40px; }
.j-wd { width: 100%; max-width: 500px; }
.j-desk { box-shadow: 0 24px 40px -30px rgba(15, 27, 25, .5); }
.j-pd { width: 100%; max-width: 480px; padding: 18px; }
.j-tile { position: relative; padding: 30px 6px 9px; }
.j-tile i { position: absolute; left: 50%; top: 9px; width: 26px; height: 15px; margin-left: -13px; border-radius: 3px; background: var(--white); box-shadow: 0 0 0 1px rgba(15, 27, 25, .08); }
.j-tile.t0 i { background: var(--oxblood); } .j-tile.t2 i { width: 17px; height: 17px; margin-left: -8px; top: 8px; background: var(--coral); }

/* 05 handover: what you keep, set out */
.jh { width: 100%; max-width: 600px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); align-items: center; gap: 22px; }
.jh-book { position: relative; height: 170px; }
.jh-pg { position: absolute; left: 50%; top: 50%; width: 136px; height: 104px; margin: -52px 0 0 -68px; border-radius: 8px; box-shadow: 0 18px 28px -18px rgba(15, 27, 25, .55); }
.jh-pg.p0 { background: var(--blush); rotate: -12deg; translate: -34px 10px; } .jh-pg.p1 { background: var(--mist); rotate: 9deg; translate: 34px 8px; }
.jh-pg.p2 { display: flex; flex-direction: column; justify-content: space-between; padding: 12px; background: var(--oxblood); color: var(--coral); }
.jh-pg.p2 b { color: var(--white); font-size: 13px; }
.jh-list { padding: 16px 18px 8px; }
.jh-list ul { list-style: none; margin: 0; padding: 0; }
.jh-it { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid rgba(15, 27, 25, .07); font-size: 14px; }
.jh-it:last-child { border-bottom: 0; }
.jh-it .j-tk { margin-left: auto; color: var(--coral); }
.jh-ic { width: 26px; height: 26px; flex: none; border-radius: 7px; background: color-mix(in srgb, var(--mist) 70%, var(--white)); position: relative; }
.jh-ic.i0 { background: var(--oxblood); } .jh-ic.i1 { background: linear-gradient(135deg, var(--coral) 50%, var(--mist) 50%); } .jh-ic.i2 { background: var(--blush); } .jh-ic.i3 { background: var(--ink); }
.jh-ic::after { content: ""; position: absolute; inset: 8px 7px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.jh-web { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.jl-site { position: relative; display: grid; gap: 9px; padding: 12px; }
.jl-hero { display: grid; gap: 7px; padding: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--mist) 62%, var(--coral) 62%); }
.jl-h1 { display: block; height: 11px; width: 58%; border-radius: 4px; background: var(--ink); } .jl-h2 { display: block; height: 7px; width: 44%; border-radius: 4px; background: rgba(15, 27, 25, .35); }
.jl-cta { justify-self: start; margin-top: 4px; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--white); font: 600 10.5px/1 var(--sans); }
.jl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .jl-row i { display: block; height: 30px; border-radius: 6px; background: rgba(15, 27, 25, .06); }
.jl-lv { position: absolute; right: 12px; top: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--coral); font: 600 11.5px/1 var(--sans); }
.jl-lv i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: jc-blink 1.6s ease-in-out infinite; }
.jt { width: 100%; max-width: 460px; padding: 18px; }

@media (max-width: 960px) {
  .j-journey .pa-jwin { height: 360px; }   /* room for the fullest window under the rail */
  .j-journey .pa-kd { padding: 9px 12px; min-height: 40px; font-size: 13px; }   /* a 40px tap target */
  .j-journey .j-art { align-items: flex-start; padding: 12px 14px; }
  .j-rail { gap: 10px; padding: 8px 14px; font-size: 11px; } .j-rsg { max-width: none; }
  .j-lab { margin-bottom: 6px; }
  .j-card { border-radius: 12px; }
  .jc { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 8px; }
  .jc-vid { grid-template-columns: 1fr 1fr; } .jc-tile { display: flex; align-items: center; justify-content: flex-start; gap: 9px; height: 52px; padding: 0 10px; } .jc-tile.you i { width: 30px; height: 30px; font-size: 13px; } .jc-tile.us .j-mk { width: 30px; }
  .jc-tile small { position: static; padding: 0; background: none !important; } .jc-tile.you small { color: var(--ink); }
  .jc-live { display: none; }
  .jc-card { grid-column: auto; grid-row: auto; padding: 10px 12px; } .jc-card li { padding: 6px 0; font-size: 12.5px; gap: 10px; } .jc-n { width: 20px; height: 20px; font-size: 10px; } .jc-next { margin-top: 8px; padding: 6px 10px; font-size: 12px; }
  .jc-shared { display: none; }
  .jb-notes { gap: 8px; } .jb-note { min-height: 92px; padding: 16px 8px 8px; font-size: 13px; } .jb-note small { font-size: 9.5px; margin-bottom: 5px; }
  .jb-lines { height: 26px; } .jb-opp { gap: 10px; padding: 11px 12px; font-size: 14.5px; } .jb-spark { width: 20px; height: 20px; }
  .jp-sheet { display: none; } .jp-doc { padding: 0 12px 10px; } .jp-head { margin: 0 -12px; padding: 9px 12px; } .jp-head .j-mk { width: 22px; } .jp-sub { display: none; }
  .jp-axis { display: none; } .jp-row { grid-template-columns: 54% 1fr; gap: 8px; padding: 6px 0; font-size: 12px; } .jp-bar { height: 8px; }
  .jp-sign { margin-top: 8px; } .jp-line { width: 110px; } .jp-line svg { height: 24px; } .jp-stamp { padding: 5px 10px; font-size: 12px; }
  .j-routes { gap: 6px; } .j-route { padding: 18px 4px 8px; gap: 5px; } .j-bd > .j-lab { margin-bottom: 14px; } .j-rt { font-size: 18px; } .j-rm { width: 32px; } .j-rm i { height: 6px; }
  .jd-lab { margin: 10px 0 5px; } .jd-apps { gap: 6px; } .jd-o { height: 50px; padding: 8px; gap: 4px; } .jd-cardm .j-mk { width: 18px; margin-bottom: 0; } .jd-post b { font-size: 18px; } .jd-sign .j-mk { width: 28px; } .jd-app small { font-size: 10px; }
  .j-desk { gap: 5px; padding: 8px; } .j-wb.w3 { height: 40px; } .j-wb.w4 { height: 20px; } .js .pa-ap.on .j-desk .j-wcta { animation: j-cta .5s var(--ease) 1.2s forwards, j-upm .7s var(--ease) 2.5s forwards; } @keyframes j-upm { to { transform: translate(6px, -38px); } }
  .j-phone { padding: 8px 6px; gap: 5px; } .j-phone .j-wb.w3 { height: 32px; }
  .j-pd { padding: 10px 12px; } .j-tiles, .j-rules { margin-bottom: 8px; } .j-tile { padding: 24px 4px 6px; font-size: 10.5px; } .j-tile i { top: 6px; } .j-rule { padding: 5px 8px; font-size: 11px; } .j-brief { padding: 8px 10px; font-size: 12.5px; } .j-dpg { width: 70px; height: 42px; }
  .jh, .jh-web { grid-template-columns: minmax(0, 1fr); gap: 8px; } .jh-book { height: 74px; } .jh-pg { width: 84px; height: 62px; margin: -31px 0 0 -42px; padding: 8px; } .jh-pg.p0 { translate: -26px 4px; } .jh-pg.p1 { translate: 26px 4px; } .jh-pg.p2 b { font-size: 10.5px; } .jh-pg .j-mk { width: 18px; }
  .jh-list { padding: 8px 12px 2px; } .jh-it { padding: 5px 0; font-size: 12.5px; gap: 9px; } .jh-ic { width: 20px; height: 20px; border-radius: 5px; } .jh-ic::after { inset: 6px 5px; }
  .jh-web .jl-site { gap: 6px; padding: 8px; } .jl-hero { padding: 9px; gap: 5px; } .jl-row { display: none; }
  .jt { padding: 12px; } .j-av i { width: 32px; height: 32px; font-size: 12px; } .j-avs { margin-bottom: 8px; } .j-sil { margin-top: 6px; } .j-sil .sil { width: 28px; }
}
@media (max-width: 560px) {
  .j-pin { left: auto; right: 0; top: 40%; }   /* the website's comment pin hangs from the window's right edge, inside the pane */
  .j-rnm { display: none; } .j-rsg { max-width: 120px; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .j-a { opacity: 1; transform: none; }
  .js .pa-ap.on .j-a, .js .pa-ap.on .j-route, .js .pa-ap.on .jp-bar i, .js .pa-ap.on .j-desk *, .js .pa-ap.on .j-wstate span, .j-journey .j-v,
  .js .pa-ap.on .jc-wave b, .js .pa-ap.on .j-rsg i.c::after, .jc-live i, .jl-lv i, .js .pa-ap.on .jb-spark { animation: none; }
  .js .pa-ap.on .jc-n { animation: none; background: var(--ink); color: transparent; } .js .pa-ap.on .jc-n .j-tk { animation: none; opacity: 1; }
  .js .jb-lines path, .js .jp-line path { stroke-dashoffset: 0; animation: none; }
  .js .pa-ap.on .j-pin { animation: none; opacity: 1; }
}
/* ==== Process page (D-216): end ==== */

/* ==== Platform build on phones, checklist first: start ==== */
/* Nathan, 2026-10-21 (concept C of _process/platform-build-phone-concepts-2026-10-21): below 761px the pinned build is
   hidden and this section shows instead. The chapters scroll normally under a slim sticky checklist bar that ticks off
   as they are read; the window appears once, finished, after the last chapter. */
.bxp { display: none; }
@media (max-width: 760px), (max-width: 960px) and (max-height: 600px) {
  .bx-run { display: none !important; }
  .bxp { display: block; padding: 48px var(--m) var(--sec-y); background: color-mix(in srgb, var(--mist) 26%, var(--white)); scroll-margin-top: var(--navh, 64px); }
  .bxp-bar { position: sticky; top: calc(var(--navh, 64px) + 8px); z-index: 3; background: var(--white); border: 1px solid rgba(15, 27, 25, .12); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px -18px rgba(15, 27, 25, .35); }
  .bxp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; } .bxp-top span { color: var(--grey); } .bxp-top em { font-style: normal; color: var(--ink); font-weight: 600; }
  .bxp-prog { display: block; height: 3px; background: rgba(15, 27, 25, .1); margin: 8px 0; } .bxp-prog b { display: block; height: 100%; width: 0; background: var(--coral); transition: width .5s var(--ease); }
  .bxp-tk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .bxp-tk li { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: center; font-size: 12.5px; line-height: 1.3; padding: 2px 0; color: var(--ink); transition: color .3s; }
  .bxp-tk li i { width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .3s steps(2), box-shadow .3s; }
  .bxp-tk li span { background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px; transition: background-size .45s var(--ease); }
  .bxp-tk li.done { color: var(--grey); } .bxp-tk li.done i { background: var(--coral); box-shadow: none; } .bxp-tk li.done span { background-size: 100% 1.5px; }
  .bxp-list { list-style: none; margin: 32px 0 0; padding: 0 0 12vh; display: grid; gap: 22vh; }
  .bxp .cm-k { font-size: 13px; color: var(--grey); margin-bottom: 8px; }
  .bxp .bx-h { font: 600 clamp(30px, 8.4vw, 44px)/1 var(--sans); letter-spacing: -.045em; } .bxp .bx-h em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
  .bxp .bx-h3 { font: 600 clamp(22px, 6vw, 30px)/1.1 var(--sans); letter-spacing: -.03em; }
  .bxp .bx-p { margin-top: 10px; color: var(--grey); font-size: 15.5px; line-height: 1.55; max-width: 46ch; }
  .bxp-win { margin-top: 20px; }
  .bxp-win .cw-main { padding: 14px 14px 18px; } .bxp-win .cw-ask { padding-bottom: 42px; } .bxp-win .cw-sh { margin: 12px 0 6px; }
  .bxp-win .cw-shelf { grid-template-columns: 1fr 1fr; } .bxp-win .cw-tile { aspect-ratio: 16 / 8; } .bxp-win .cw-tile.t3 { display: none; } .bxp-win .cw-sil { width: 40px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .bxp-tk li, .bxp-tk li i, .bxp-tk li span, .bxp-prog b { transition: none; } }
/* ==== Platform build on phones, checklist first: end ==== */

/* ==== Pricing page: start ==== */
/* D-227 (Nathan, 2026-10-21): the home page's pricing panel is the page, under its own hero; then the questions about
   price, the four things that are always true, the close */
.pz-q h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.pz-q { padding: clamp(56px, 9vh, 104px) var(--m) clamp(40px, 6vh, 72px); min-height: calc(100svh - var(--navh, 64px)); display: flex; flex-direction: column; justify-content: center; background: color-mix(in srgb, var(--mist) 42%, var(--white)); }   /* continues the pricing sky's last colour, so there is no edge between them; the full screen (Nathan, 2026-10-21); contents centred so the spare room sits above the heading, not under the list (D-230) */
.mod.pp + .pz-q { margin-top: -2px; position: relative; }   /* overlaps the sky's antialiased foot, which showed as a hairline on phones */ .mod.pp:has(+ .pz-q) { padding-bottom: clamp(72px, 9vh, 96px) !important; border-bottom: 0 !important; }
.pz-q h2 { font: 600 var(--t-h2)/1 var(--sans); letter-spacing: -.045em; }
/* the questions as "the index" (D-239, concept B of _process/faq-concepts-2026-10-25): a numbered index beside a
   white card that turns over to the answer picked. D-241 (Anna, 2026-10-25): on a blue sky with pixel clouds
   drifting across it (site.js paints both, in the platform page's pixel style); its top runs out of the pricing
   sky's mist, so there is no edge. The gradient is the sky until the script paints, and without script. On the
   blue the marks are Oxblood, not Coral, and the quiet text is darker. */
.pz-q.pzi { position: relative; isolation: isolate; background: linear-gradient(to bottom, color-mix(in srgb, var(--mist) 42%, var(--white)) 0%, #BFDDF0 18%, #A3CDEA 55%, #C6E1F2 100%); }
.pzi-sky { z-index: -1; }
.pzi-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
@media (min-width: 901px) { .pzi-h h2 em { display: block; } }   /* "about price." on its own line beside the card */
.pzi-h > p { margin-top: 16px; color: rgba(15, 27, 25, .72); font-size: 17px; line-height: 1.5; max-width: 34ch; }
.pzi-ix { position: relative; list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0 0 0 18px; }
.pzi-ix::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: rgba(15, 27, 25, .16); }
.pzi-mark { position: absolute; left: 0; top: 0; width: 2px; height: 44px; border-radius: 1px; background: var(--oxblood); z-index: 1; transition: transform .5s var(--ease), height .5s var(--ease); }
.pzi-q { display: flex; gap: 14px; width: 100%; padding: 12px 0; border: 0; background: none; text-align: left; font: 500 clamp(16px, 1.25vw, 18px)/1.35 var(--sans); color: rgba(15, 27, 25, .72); cursor: pointer; transition: color .25s, transform .35s var(--ease); }
.pzi-q b { min-width: 20px; font: 600 12px/1.9 var(--sans); color: rgba(15, 27, 25, .5); transition: color .25s; }
.pzi-q:hover { color: var(--ink); }
.pzi-q[aria-pressed="true"] { color: var(--ink); font-weight: 600; transform: translateX(4px); } .pzi-q[aria-pressed="true"] b { color: var(--oxblood); }
.pzi-q:focus-visible, .pzi-nav button:focus-visible, .pzi-d summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.pzi-card { position: sticky; top: calc(var(--navh, 64px) + 32px); min-height: 380px; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 48px); border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px rgba(15, 27, 25, .06), 0 44px 80px -50px rgba(15, 27, 25, .55); }
.pzi-n { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--grey); } .pzi-n b { color: var(--coral); }
.pzi-pane { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 0; }
.pzi-pane h3 { font: 600 15px/1.4 var(--sans); color: var(--oxblood); }
.pzi-pane p { margin-top: 14px; font: 400 clamp(22px, 2.2vw, 32px)/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.pzi-pane.swap { animation: pzi-in .55s var(--ease) both; }
@keyframes pzi-in { from { opacity: 0; transform: translateY(14px); } }
.pzi-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .pzi-foot a { font-size: 14px; color: var(--oxblood); }
.pzi-nav { display: flex; gap: 8px; }
.pzi-nav button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: 600 14px/1 var(--sans); border: 1px solid rgba(15, 27, 25, .15); background: var(--white); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pzi-nav button:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* the cards: phones, and the page without script */
.pzi-acc { display: none; margin-top: 28px; }
.pzi-d { margin-bottom: 10px; border-radius: 14px; background: rgba(255, 255, 255, .72); transition: background .3s, box-shadow .3s; }
.pzi-d.on, html:not(.js) .pzi-d[open] { background: var(--white); box-shadow: 0 24px 40px -30px rgba(15, 27, 25, .5); }
.pzi-d summary { display: flex; gap: 12px; padding: 16px; list-style: none; cursor: pointer; font: 600 16px/1.35 var(--sans); }
.pzi-d summary::-webkit-details-marker { display: none; }
.pzi-d summary b { min-width: 18px; font: 600 12px/1.9 var(--sans); color: var(--oxblood); }
.pzi-a { overflow: hidden; }
.pzi-a p { padding: 0 16px 18px 46px; font: 400 19px/1.4 var(--serif); color: var(--ink); }
html:not(.js) .pzi-ix, html:not(.js) .pzi-card { display: none; }
html:not(.js) .pzi-in { grid-template-columns: minmax(0, 1fr); } html:not(.js) .pzi-acc { display: block; max-width: 760px; }
@media (max-width: 900px) {
  .pzi-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pzi-ix, .pzi-card { display: none; } .pzi-acc { display: block; }
}
@media (prefers-reduced-motion: reduce) { .pzi-pane.swap, .pzi-sky .px-drift { animation: none; } .pzi-mark, .pzi-q { transition: none; } }
/* the questions as "the dark sheet" (D-240, concept C of _process/faq-concepts-2026-10-25): an Ink sheet with rounded
   top corners rises over the mist the sky ends on */
.pz-q.pzc { display: block; min-height: 0; padding: clamp(8px, 2vh, 24px) 0 0; }
.pzc-sheet { min-height: calc(100svh - var(--navh, 64px)); padding: clamp(64px, 10vh, 112px) var(--m) clamp(72px, 11vh, 120px); border-radius: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0 0; background-color: var(--ink); background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px); background-size: 20px 20px; color: var(--white); }
.pzc-in { max-width: 1100px; margin: 0 auto; }
.pzc-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pzc-hd h2 em { color: var(--coral); }
.pzc-hd p { max-width: 32ch; color: var(--grey-d); font-size: 15px; line-height: 1.5; }
.pzc-list { margin-top: clamp(36px, 6vh, 64px); border-top: 1px solid var(--rule-d); }
.pzc-d { position: relative; border-bottom: 1px solid var(--rule-d); }
.pzc-d::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--coral); transition: width .6s var(--ease); }
.pzc-d.on::before, html:not(.js) .pzc-d[open]::before { width: 100%; }
.pzc-d summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 24px 0; list-style: none; cursor: pointer; }
.pzc-d summary::-webkit-details-marker { display: none; }
.pzc-d summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.pzc-d summary b { font: 500 13px/1 var(--sans); color: var(--grey-d); transition: color .3s; }
.pzc-d summary span { font: 600 clamp(18px, 1.7vw, 24px)/1.3 var(--sans); letter-spacing: -.015em; transition: transform .35s var(--ease); }
.pzc-d summary:hover span { transform: translateX(6px); }
.pzc-x { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-d); color: var(--white); transition: background .35s, border-color .35s, color .35s, transform .45s var(--ease); }
.pzc-x::before, .pzc-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; border-radius: 1px; background: currentColor; }
.pzc-x::after { transform: rotate(90deg); }
.pzc-d.on .pzc-x, html:not(.js) .pzc-d[open] .pzc-x { transform: rotate(45deg); background: var(--coral); border-color: var(--coral); color: var(--ink); }
.pzc-d.on summary b, html:not(.js) .pzc-d[open] summary b { color: var(--coral); }
.pzc-a { overflow: hidden; }
.pzc-a p { max-width: 72ch; padding: 0 56px 28px 68px; color: #D5DCDA; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.pzc-more { margin-top: 28px; color: var(--grey-d); font-size: 15px; } .pzc-more a { margin-left: 6px; color: var(--white); }
@media (prefers-reduced-motion: reduce) { .pzc-d::before, .pzc-x, .pzc-d summary span { transition: none; } }
@media (max-width: 640px) {
  .pzc-d summary { grid-template-columns: 32px minmax(0, 1fr) 36px; padding: 18px 0; } .pzc-x { width: 34px; height: 34px; }
  .pzc-a p { padding: 0 8px 22px 44px; }
}
/* the questions as cards (D-243, concept B of _process/faq-concepts-2-2026-10-25, "Oxblood when open"): the heading
   on the left, sticky on desktop; white cards on the mist the pricing sky ends on; the open card turns Oxblood */
.pz-q.pzk { display: block; padding-top: clamp(64px, 11vh, 128px); padding-bottom: clamp(72px, 12vh, 136px); }
.pzk-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.pzk-hd { position: sticky; top: calc(var(--navh, 64px) + 48px); }
.pzk-hd h2 { text-wrap: balance; }
@media (min-width: 861px) { .pzk-hd h2 em { display: block; } }
.pzk-hd p { margin-top: 18px; max-width: 30ch; color: var(--grey); font-size: 16px; line-height: 1.55; }
.pzk-list { display: grid; gap: 12px; }
.pzk-d { border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px rgba(15, 27, 25, .05); transition: background .45s var(--ease), color .45s, box-shadow .45s, transform .35s var(--ease); }
.pzk-d:not(.on):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(15, 27, 25, .05), 0 14px 26px -20px rgba(15, 27, 25, .4); }
.pzk-d.on, html:not(.js) .pzk-d[open] { background: var(--oxblood); color: var(--white); box-shadow: 0 30px 50px -32px rgba(94, 14, 9, .7); }
.pzk-d summary { position: relative; display: block; padding: 22px 64px 22px 26px; list-style: none; cursor: pointer; font: 600 17px/1.35 var(--sans); }
.pzk-d summary::-webkit-details-marker { display: none; }
.pzk-d summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 18px; }
.pzk-chev { position: absolute; right: 26px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .45s var(--ease), margin .45s var(--ease), color .3s; }
.pzk-d.on .pzk-chev, html:not(.js) .pzk-d[open] .pzk-chev { transform: rotate(225deg); margin-top: -2px; color: var(--coral); }
.pzk-a { overflow: hidden; }
.pzk-a p { max-width: 62ch; padding: 0 64px 24px 26px; color: color-mix(in srgb, var(--blush) 55%, var(--white)); font-size: 16px; line-height: 1.6; }
.pzk-more { margin-top: 26px; text-align: center; color: var(--grey); font-size: 15px; } .pzk-more a { margin-left: 4px; color: var(--oxblood); }
@media (prefers-reduced-motion: reduce) { .pzk-d, .pzk-chev { transition: none; } .pzk-d:not(.on):hover { transform: none; } }
@media (max-width: 860px) {
  .pzk-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pzk-hd { position: static; }
  .pzk-d summary { padding: 18px 52px 18px 18px; font-size: 16px; } .pzk-chev { right: 20px; } .pzk-a p { padding: 0 22px 20px 18px; font-size: 15.5px; }
}
#pricing:has(+ .pz-q) .pp-sky { opacity: 1 !important; -webkit-mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.22) 14%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.8) 34%, #000 44%); mask-image: linear-gradient(transparent 0%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.22) 14%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.8) 34%, #000 44%); }   /* the pricing page keeps its sky on, and its foot is not faded out, so it runs straight into the questions below in the same colour; the home page's scroll-driven sky is unchanged */
/* ==== Pricing page: end ==== */

/* ==== Privacy page: start ==== */
/* D-231 (2026-10-22): plain prose in one readable column; headings on the left on wide screens */
.pv { padding: clamp(40px, 8vh, 96px) var(--m) var(--sec-y); }
.pv h1 { font: 600 var(--t-display)/.98 var(--sans); letter-spacing: -.045em; text-wrap: balance; max-width: 16ch; }
.pv h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.pv-lede { margin-top: 22px; color: var(--grey); font-size: var(--t-lede); line-height: 1.55; max-width: 60ch; }
.pv-body { margin-top: clamp(40px, 7vh, 80px); border-top: 1px solid var(--ink); }
.pv-s { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 48px; padding: clamp(24px, 4vh, 40px) 0; border-bottom: 1px solid var(--rule); }
.pv-s h2 { font: 600 clamp(20px, 1.7vw, 26px)/1.15 var(--sans); letter-spacing: -.02em; }
.pv-t { max-width: 68ch; font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.6; color: var(--ink); }
.pv-t p + p, .pv-t ul + p, .pv-t p + ul { margin-top: 14px; }
.pv-t ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pv-t li { padding-left: 18px; position: relative; } .pv-t li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--coral); }
.pv-t b { font-weight: 600; }
.pv-t a { color: inherit; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }
@media (max-width: 760px) { .pv-s { grid-template-columns: 1fr; gap: 12px; } }
/* ==== Privacy page: end ==== */

/* ==== Starter page, round three: start ==== */
/* D-235 (Nathan, 2026-10-23). The receipt: a square foot under its scalloped tear, and a drop shadow that follows the
   scallops (a box shadow stopped at the rounded corners, so the tear looked stuck on). */
.rc-receipt { border-radius: 18px 18px 0 0; box-shadow: none; filter: drop-shadow(0 1px 0 rgba(15, 27, 25, .05)) drop-shadow(0 16px 22px rgba(15, 27, 25, .13)); }
/* the builders: one grid of equal chips, the hosting line and the link together under it */
.rc-builders .rc-bl { font-size: 14px; }
.rc-builders ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }   /* chips sized to their names: all five on one line where they fit, no lone orphan */
.rc-builders li { height: 42px; padding: 0 11px 0 6px; gap: 8px; background: var(--white); border: 1px solid var(--rule); border-radius: 10px; font-size: 14px; white-space: nowrap; }
.rc-builders .lc-t { width: 30px; height: 30px; border: 0; border-radius: 7px; background: color-mix(in srgb, var(--mist) 35%, var(--white)); display: grid; place-items: center; }
.rc-builders .rc-bh { font-size: 14px; } .rc-builders .rc-bh a { white-space: nowrap; }
@media (max-width: 760px) { .rc-builders ul { display: flex; } }   /* overrides the older two-column phone grid: chips sized to their names, Squarespace no longer spills */
/* the hero, option G of _process/starter-hero-concepts-2026-10-23: the pricing stage at hero size */
.skg { position: relative; aspect-ratio: 1 / 1; border-radius: 28px; background: color-mix(in srgb, var(--coral) 14%, var(--white)); display: grid; place-items: center; margin-top: 56px; }
.skg-obj { width: min(360px, 74%); min-height: 0; aspect-ratio: 1 / 1.02; padding: clamp(22px, 2.4vw, 34px); transform: rotate(-2deg); animation: skg-float 6s var(--ease) infinite alternate; }
.skg-obj .pp-aa { font-size: clamp(40px, 4vw, 58px); } .skg-obj .pp-oamt { font-size: clamp(34px, 3.4vw, 48px); }
.skg-peek { position: absolute; right: 12%; top: -62px; width: clamp(88px, 9vw, 128px); color: var(--coral); animation: skg-peek 4.5s ease-in-out infinite; }
.skg-peek svg { display: block; width: 100%; height: auto; }
.skg-tag { position: absolute; background: var(--white); border-radius: 999px; padding: 10px 16px; font: 500 14px/1 var(--sans); color: var(--grey); box-shadow: 0 14px 30px -20px rgba(15, 27, 25, .4); }
.skg-tag b { color: var(--ink); font-weight: 600; margin-left: 6px; }
.skg-tag-a { left: 6%; bottom: 14%; transform: rotate(-4deg); } .skg-tag-b { right: 6%; bottom: 7%; transform: rotate(3deg); }
@keyframes skg-float { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(-1deg) translateY(-10px); } }
@keyframes skg-peek { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-8px) rotate(-5deg); } }
@media (max-width: 960px) { .skg { margin-top: 48px; } .skg-peek { top: -48px; } }
@media (prefers-reduced-motion: reduce) { .skg-obj, .skg-peek { animation: none; } }
/* the contact chat when it arrives from the receipt: the pack sits in Sil's first line */
.kd-pack { display: inline-block; margin-top: 6px; font-weight: 600; }
/* ==== Starter page, round three: end ==== */

/* ==== Platform page, the Connections screen (D-247): start ==== */
/* Concept C of _process/integrations-concepts-2026-10-25: the connections as the portal's own Connections screen, copy
   beside it, on the Ink of "One system underneath". The switches turn on one by one when it is seen (.seen, site.js);
   the last stays off. Without script, or with reduced motion, they show their end state. */
.pcs { padding: clamp(80px, 12vh, 140px) var(--m) clamp(40px, 6vh, 72px); }
.pcs-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pcs-copy .cm-k { color: var(--grey-d); }
.pcs-copy h3 { margin-top: 14px; font: 600 clamp(32px, 3.6vw, 52px)/1.02 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.pcs-copy h3 em { display: block; font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.pcs-p { margin-top: 18px; max-width: 44ch; color: #C9D1CF; font-size: 17px; line-height: 1.6; }
.pcs-acts { margin-top: 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pcs-count { font-size: 14px; color: var(--grey-d); }
.pcs-win { border-radius: 14px; overflow: hidden; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.pcs-top { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--grey); }
.pcs-me { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--coral); color: var(--ink); font-weight: 600; font-size: 11px; }
.pcs-body { display: grid; grid-template-columns: 34% 1fr; min-height: 420px; }
.pcs-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; background: var(--ink); color: rgba(255, 255, 255, .66); font-size: 13px; }
.pcs-side p { padding: 0 10px 12px; color: var(--white); font-weight: 600; font-size: 14px; }
.pcs-g { padding: 9px 10px; border-radius: 8px; } .pcs-g.on { background: rgba(255, 255, 255, .1); color: var(--white); }
.pcs-main { padding: 18px 20px 10px; }
.pcs-h { font-weight: 600; font-size: 16px; } .pcs-h small { display: block; margin-top: 4px; font-weight: 400; font-size: 12.5px; color: var(--grey); }
.pcs-list { list-style: none; margin: 12px 0 0; padding: 0; }
.pcs-r { display: grid; grid-template-columns: 38px 1fr auto 40px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(15, 27, 25, .07); }
.pcs-t { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
.pcs-t .lc-t { width: 38px; height: 38px; background: transparent; } .pcs-t .lc { width: 20px; height: 20px; }
.pcs-nm b { display: block; font-size: 14px; } .pcs-nm small { font-size: 12px; color: var(--grey); }
.pcs-st { font-size: 12px; color: var(--grey); text-align: right; } .pcs-on { display: none; color: var(--ink); font-weight: 600; }
.pcs-sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(15, 27, 25, .14); transition: background .35s var(--ease); }
.pcs-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .35s var(--ease); }
.pcs-r:not(.off) .pcs-sw, .pcs-r:not(.off) .pcs-sw::after { transition-delay: calc(.4s + var(--i) * .35s); }
.pcs-fig.seen .pcs-r:not(.off) .pcs-sw, html:not(.js) .pcs-r:not(.off) .pcs-sw { background: var(--coral); }
.pcs-fig.seen .pcs-r:not(.off) .pcs-sw::after, html:not(.js) .pcs-r:not(.off) .pcs-sw::after { transform: translateX(16px); }
.pcs-fig.seen .pcs-r:not(.off) .pcs-on, html:not(.js) .pcs-r:not(.off) .pcs-on { display: inline; animation: pcs-in .3s var(--ease) both; animation-delay: calc(.4s + var(--i) * .35s); }
.pcs-fig.seen .pcs-r:not(.off) .pcs-of, html:not(.js) .pcs-r:not(.off) .pcs-of { display: none; }
@keyframes pcs-in { from { opacity: 0; } }
.pcs-cap { margin-top: 14px; font-size: 13px; color: var(--grey-d); }
@media (prefers-reduced-motion: reduce) { .pcs-sw, .pcs-sw::after { transition: none !important; } .pcs-fig.seen .pcs-r .pcs-on { animation: none; } }
@media (max-width: 860px) { .pcs-in { grid-template-columns: minmax(0, 1fr); } .pcs-body { grid-template-columns: 1fr; min-height: 0; } .pcs-side { display: none; } .pcs-main { padding: 14px 14px 6px; } }
/* ==== Platform page, the Connections screen (D-247): end ==== */