/* ==========================================================================
   Murgese Ltd website
   One stylesheet. No frameworks, no external requests. The one typeface is
   served from this domain, so the privacy notice stays true.
   Palette follows the brand assets and the application's own teal, #136F6D.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  --ink:        #101010;
  --ink-2:      #1c1c1e;
  --ink-3:      #2a2b2e;
  --ink-4:      #3a3c40;
  --grey:       #6b7280;
  --grey-2:     #8b929c;
  --grey-3:     #a8aeb7;
  --line:       #e2e8e8;
  --line-2:     #eff3f3;
  --line-dark:  rgba(255,255,255,.14);
  --paper:      #ffffff;
  --paper-2:    #f6f8f8;
  --paper-3:    #ecf1f1;

  /* Taken from the application's own sidebar, so the screenshots on this site
     belong to the page they sit on rather than to a different company. */
  --accent:      #136f6d;
  --accent-deep: #0e514f;
  --accent-tint: #e8f1f0;
  --accent-line: #bfdad8;
  --accent-dim:  #d9e3ff;
  --ok:         #14663f;
  --ok-bg:      #e9f2ed;
  --warn:       #7a5300;
  --warn-bg:    #f8f1e2;
  --bad:        #96231f;
  --bad-bg:     #f9ecec;

  /* Headings are set in Lora. A serif on a page arguing for judgement and
     restraint agrees with the words; every competitor in this market sets
     theirs in a geometric sans. Body copy stays on the system stack, which is
     what a long page of it should be read in. */
  --display: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --wrap: 1180px;
  --r: 8px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,32,32,.05);
  --shadow: 0 2px 6px rgba(16,32,32,.05), 0 18px 40px -12px rgba(16,32,32,.14);
  --shadow-lg: 0 40px 90px -20px rgba(0,0,0,.55);
}

@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }

/* A serif needs far less negative tracking than the sans did: the letterforms
   already sit close, and tightening them further closes the counters. */
h1, h2, h3, h4 {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .55em;
  line-height: 1.16;
  letter-spacing: -.008em;
}
h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.08; letter-spacing: -.016em; }
h2 { font-size: clamp(1.6rem, 1.18rem + 1.5vw, 2.4rem); line-height: 1.16; letter-spacing: -.012em; }
h3 { font-size: 1.2rem; letter-spacing: -.005em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }
p  { margin: 0 0 1.15em; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--grey-3); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin: .35em 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
code { font-family: var(--mono); font-size: .88em; background: var(--paper-3); padding: .12em .38em; border-radius: 2px; }
blockquote { margin: 1.6em 0; padding-left: 1.3em; border-left: 2px solid var(--ink); color: var(--grey); }
::selection { background: var(--ink); color: #fff; }
.section-ink ::selection, .hero ::selection { background: #fff; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: .8rem 1.3rem; text-decoration: none; }
.skip:focus { left: 0; }

/* --- Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 560px) { .wrap { padding: 0 20px; } }
.section { padding: clamp(3.5rem, 2rem + 5vw, 7rem) 0; }
.section-tight { padding: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem) 0; }
.section-alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-ink { background: var(--ink); color: #b9bcc2; }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: #fff; }
.section-ink a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.section-ink a:hover { color: #fff; text-decoration-color: #fff; }
.measure { max-width: 40rem; }
.measure-wide { max-width: 54rem; }
.centred { text-align: center; margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 1px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.grid-sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; }
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-sidebar { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* --- Typographic helpers ------------------------------------------------- */
.eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); margin: 0 0 1.1rem;
}
.section-ink .eyebrow, .hero .eyebrow { color: var(--grey-3); }
.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--grey); line-height: 1.58; letter-spacing: -.005em; }
.section-ink .lede { color: #a9aeb6; }
.small { font-size: .885rem; }
.muted { color: var(--grey); }
.rule { width: 40px; height: 2px; background: var(--ink); margin: 0 0 1.6rem; }
.section-ink .rule { background: #fff; }
.centred .rule { margin-left: auto; margin-right: auto; }
.num-tag { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--grey-3); display: block; margin-bottom: .8rem; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; line-height: 1; letter-spacing: -.005em;
  padding: .95em 1.6em; border-radius: var(--r); border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-primary:hover { background: #000; color: #fff; border-color: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); background: transparent; color: var(--accent); }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: #fff; color: #000; opacity: .88; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-outline-light:hover { border-color: #fff; color: #fff; background: transparent; }
.btn-sm { padding: .62em 1.15em; font-size: .875rem; }
.btn-lg { padding: 1.05em 2em; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dark .btn-ghost, .section-ink .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }

.more { font-weight: 600; font-size: .92rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.more::after { content: "\00a0\2192"; }
.more:hover { color: var(--accent); border-color: var(--accent); }
.section-ink .more { color: #fff; border-color: rgba(255,255,255,.5); }
.section-ink .more:hover { border-color: #fff; }

/* --- Announcement bar ---------------------------------------------------- */
.banner { background: var(--ink); color: #d3d5d9; font-size: .86rem; letter-spacing: .01em; text-align: center; padding: .7rem 0; }
.banner a { color: #fff; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The containing block for the product menu, which spans the header rather
   than hanging off one nav item. See .has-mega below. */
.header-inner { position: relative; display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.brand:hover { color: var(--ink); }
.logo { height: 30px; width: auto; display: block; }
.footer-logo .logo { height: 26px; }

.primary-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .92rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  padding: .5em .75em; border-radius: var(--r); background: none; border: 0; cursor: pointer;
  font-family: var(--sans); letter-spacing: -.005em;
}
.nav-link:hover { color: var(--ink); background: var(--paper-2); }
.nav-link.is-current { color: var(--ink); font-weight: 600; }
.caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4.5px solid currentColor; opacity: .55; }

.has-menu { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 12px); left: -10px; min-width: 350px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.has-menu.is-open .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu ul { list-style: none; margin: 0; padding: 0; }
.submenu a { display: block; padding: .6rem .8rem; border-radius: var(--r); text-decoration: none; color: var(--ink-2); }
.submenu a:hover { background: var(--paper-2); color: var(--ink); }
.submenu strong { display: block; font-weight: 600; font-size: .93rem; color: var(--ink); letter-spacing: -.01em; }
.submenu span { display: block; font-size: .82rem; color: var(--grey-2); line-height: 1.4; }
/* Support sits at the right-hand end of the bar, so its menu hangs from the
   right edge instead of running off the side of the window. */
.submenu-right { left: auto; right: -10px; min-width: 300px; }
@media (max-width: 1080px) { .submenu-right { right: auto; } }
/* --- The product rail ----------------------------------------------------
   Three products across the top of the product menu, 2 October 2026.

   Murgese's own menu below it is unchanged. The rail is a split bar rather
   than three plain words because the three are peers and the divisions say so,
   and each carries its own application icon: once a reader is scrolling a
   thirteen item list the icon is the only thing on screen saying which product
   they are inside.

   The icons are dimmed until their product is selected. They are full colour
   squares with their own dark grounds, and three of those at full strength
   above a list of links is the loudest thing in a quiet menu.
*/
/* Flex rather than three fixed tracks: the rail has to size itself to however
   many products site_products() holds. It held three on 3 October and holds
   two the same evening, and a grid of three with two items leaves a third of
   the rail empty with a divider hanging in it. */
.prail { display: flex; margin: -8px -8px 0; border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; background: var(--paper-2); }
.prail-item { flex: 1 1 0; }
.prail-item {
  display: flex; align-items: center; gap: 11px; min-width: 0; text-align: left;
  padding: 13px 16px; background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--sans); cursor: pointer;
}
.prail-item + .prail-item { border-left: 1px solid var(--line); }
.prail-item:hover { background: var(--paper); }
.prail-item[aria-selected="true"] { background: var(--paper); border-bottom-color: var(--accent); }
.prail-icon { flex: none; width: 34px; height: 34px; border-radius: 8px; opacity: .5; filter: saturate(.35); transition: opacity .18s ease, filter .18s ease; }
.prail-item:hover .prail-icon { opacity: .85; filter: saturate(.85); }
.prail-item[aria-selected="true"] .prail-icon { opacity: 1; filter: none; }
.prail-text { min-width: 0; }
.prail-text strong { display: block; font-size: .95rem; font-weight: 600; color: var(--ink-3); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prail-item:hover .prail-text strong, .prail-item[aria-selected="true"] .prail-text strong { color: var(--ink); }
.prail-meta { display: flex; align-items: center; gap: 7px; margin-top: 2px; min-width: 0; }
.prail-tag { flex: none; font-family: var(--mono); font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--line-2); color: var(--grey); }
.prail-item[aria-selected="true"] .prail-tag { background: var(--accent-tint); color: var(--accent-deep); }
.prail-line { font-size: .78rem; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppanel[hidden] { display: none; }
.submenu-group-wide { max-width: 62ch; }
.submenu-note { font-size: .88rem; color: var(--ink-2); line-height: 1.55; margin: 0 0 .6rem; padding: 0 .8rem; }
.submenu-note-quiet { color: var(--grey); }
.submenu-card-plain { align-self: start; }

@media (max-width: 1080px) {
  /* Stacked nav: the rail becomes three rows, because three products side by
     side at phone width is three truncated words. */
  .prail { display: block; margin: 0 0 .4rem; border-radius: var(--r); border: 1px solid var(--line); }
  .prail-item { border-bottom: 1px solid var(--line-2); border-left: 0; }
  .prail-item + .prail-item { border-left: 0; }
  .prail-item:last-child { border-bottom: 0; }
  .prail-item[aria-selected="true"] { border-bottom-color: var(--line-2); box-shadow: inset 3px 0 0 var(--accent); }
  .prail-line { white-space: normal; }
  .submenu-note { padding: 0; }
}

/* --- The product menu ----------------------------------------------------
   Fourteen entries in one column reached the bottom of a laptop window. The
   first answer was to flow them down and across a fixed six rows, which put
   them in three columns but made every row as tall as the tallest cell in it:
   one two-line title in the middle opened a gap beside every item either side
   of it, and the panel stood eight hundred pixels tall with a quarter of it
   empty.

   A grid row is a promise that the things in it belong together, and these do
   not. So the columns are now independent lists, each packing its own items,
   each with a name at the top. A reader picks a group before reading fourteen
   titles, which is the actual problem; the ragged white space went with it.

   Above 1080px only: the mobile menu draws these lists stacked inside a panel
   that scrolls already. */
.submenu-head {
  margin: 0 0 .35rem; padding: 0 .8rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  /* --grey rather than --grey-2: at .7rem the lighter one is about 3:1 on
     paper, which is under the threshold for text this small. */
  color: var(--grey);
}
.submenu-head-mid { margin-top: 1.25rem; }
/* Stacked, the groups run into each other: a heading needs air above it to
   read as the start of something rather than the end of the last item. The
   columns supply that separation themselves, so this is the narrow end only. */
@media (max-width: 1080px) {
  .submenu-group + .submenu-group > .submenu-head:first-child { margin-top: 1.4rem; }
  .submenu-card { margin-top: 1.2rem; }
}

/* The tour card. A link like the others, with the film's own first screen
   above it. The image carries no alt text on purpose: the words beneath it
   say the same thing, and a screen reader reading both would say it twice. */
.submenu-card {
  /* start, not the grid default of stretch: a card as tall as the longest list
     is mostly empty ground below its two lines of type. */
  display: block; align-self: start; padding: 10px; border-radius: var(--r);
  background: var(--paper-2); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink-2);
  transition: background .14s ease, border-color .14s ease;
}
.submenu-card img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  margin-bottom: .6rem; background: var(--ink);
  box-shadow: 0 1px 2px rgba(16,16,16,.16);
}
.submenu-card strong { display: block; font-weight: 600; font-size: .93rem; color: var(--ink); letter-spacing: -.01em; }
.submenu-card span { display: block; font-size: .82rem; color: var(--grey-2); line-height: 1.4; margin-top: .1rem; }
.submenu-card:hover { background: var(--accent-tint); border-color: var(--accent-line); }
.submenu-card:hover strong { color: var(--accent); }

@media (min-width: 1081px) {
  .submenu { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
  /* minmax(0, 1fr) rather than the default auto: an auto column is sized from
     its widest line, so one long description made its own column wider than
     the panel and the end of that line was clipped by the overflow rule above.
     Equal columns with a zero minimum can only wrap. */
  /* The panel spans the header's content width instead of hanging off the
     Product button.

     A fixed width anchored to that button overflowed the window: the nav is
     right-aligned inside a 1180px wrap, so as the window narrows the button
     moves left by less than the window loses, and a panel wide enough to hold
     a title on one line ran off the right edge at EVERY width. Anchoring both
     edges to the header means it cannot, at any size, and it reads as the
     header opening rather than as a box pinned to a word. */
  .has-mega { position: static; }
  /* Inset to the wrap's own gutter so the panel's edges line up with the logo
     and the Contact us button rather than sitting 28px outside both. */
  /* WIDER THAN THE WRAP WHERE THE WINDOW ALLOWS IT, AND NEVER PAST IT.
     The panel is anchored to .header-inner, which is the 1180px wrap, so on a
     1440px window it was 1124px with 158px of unused glass either side. Four
     columns of links at that width is 217px each and the titles wrap.

     --bleed is how far outside the wrap it may run: at most 64px, and never
     more than the space that actually exists outside the wrap less a 24px
     margin, which also covers a scrollbar. At 1180px and below it computes to
     zero and nothing moves. That is the whole guard, and it is arithmetic
     rather than a breakpoint, so there is no window width at which it can
     overflow. A fixed width here cost an hour on 9 September 2026. */
  .submenu-wide {
    --bleed: min(64px, max(0px, (100vw - 1180px) / 2 - 24px));
    left: calc(28px - var(--bleed));
    right: calc(28px - var(--bleed));
    min-width: 0; width: auto; padding: 18px;
  }
  /* Not equal columns. The second group holds the longest titles, and one of
     them ("Projects, tracking and currency") breaking in two costs the whole
     panel two lines of height while the others have width going spare. */
  .submenu-cols {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.22fr) minmax(0, 1.11fr) minmax(0, .85fr);
    column-gap: 12px;
  }
  /* Murgese's four tracks above are tuned to its own thirteen titles. The
     other two products have different shapes, and the override has to live
     HERE rather than beside the rail: .submenu-cols is declared inside this
     block, so a rule of the same weight written earlier in the file loses to
     it and the Consolidate panel drew in Murgese's columns with a quarter of
     the panel empty. */
  .ppanel-2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, .85fr); }
  /* Construction has five groups and thirteen pages, so it gets four columns
     of links and the card. Equal tracks, because menu_columns() has already
     made the columns the same height and a track wider than its neighbours
     would undo that. */
  .ppanel-cn { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .78fr); }
  .ppanel-1 { grid-template-columns: minmax(0, 1fr); }
  /* A hairline rather than more space: the groups are close in meaning and a
     gap wide enough to separate them on its own would waste the width. */
  .submenu-group + .submenu-group { border-left: 1px solid var(--line); padding-left: 16px; }
  .submenu-head { padding-top: .35rem; }
  .submenu-wide a { padding-top: .5rem; padding-bottom: .5rem; }
}

.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--r); padding: .55rem .6rem; cursor: pointer; }
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars span { display: block; height: 1.5px; background: var(--ink); }
.nav-toggle-bars span + span { margin-top: 4px; }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .primary-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 8px 28px 24px; max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .primary-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { padding: .85rem .2rem; border-bottom: 1px solid var(--line-2); border-radius: 0; width: 100%; justify-content: space-between; font-size: 1rem; }
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: .3rem 0 .6rem .6rem; display: none; min-width: 0; }
  .has-menu.is-open .submenu { display: block; }
  .nav-cta { padding-top: 18px; }
  .nav-cta .btn { width: 100%; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; background: var(--ink); color: #b3b6bc; overflow: hidden;
  padding: clamp(3rem, 1.5rem + 5.5vw, 5.5rem) 0 clamp(3rem, 2rem + 5vw, 5.5rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70rem 44rem at 82% -18%, rgba(19,111,109,.40), transparent 60%),
    radial-gradient(55rem 34rem at 78% -14%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(44rem 30rem at 6% 108%, rgba(255,255,255,.05), transparent 60%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 100% 36px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede { color: #a4a9b1; max-width: 44ch; }
/* The hero stacks: the words, then the screenshot across the full width.

   It used to be two columns, which left the screenshot about 590px wide. A
   whole VAT return rendered at 590px is roughly a third of the size it was
   captured at, and none of it can be read -- so the one image most likely to
   persuade anybody was the least legible thing on the site. Stacked, it gets
   the full measure of the page and the figures are readable. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; align-items: start; }
.hero-copy { max-width: 46rem; }
@media (max-width: 1000px) { .hero-grid { gap: 40px; } .hero h1 { max-width: none; } }
.hero-points { list-style: none; padding: 0; margin: 1.8rem 0 2.2rem; }
.hero-points li { display: flex; gap: .8rem; align-items: flex-start; color: #b9bcc2; font-size: .97rem; margin: .6rem 0; }
.tick { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px; position: relative; }
.tick::after { content: ""; position: absolute; left: 3px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* --- Cards --------------------------------------------------------------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.section-alt .card { background: #fff; }
.card-link { text-decoration: none; color: inherit; display: block; transition: border-color .16s ease, box-shadow .16s ease; }
.card-link:hover { border-color: var(--accent-line); box-shadow: var(--shadow); color: inherit; transform: translateY(-3px); }
.card-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--ink); }
.card-icon svg { width: 24px; height: 24px; }
.section-ink .card { background: transparent; border-color: var(--line-dark); }

/* --- Definition style feature list --------------------------------------- */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { margin: 0; padding: 1.05rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: baseline; }
.feature-list li:first-child { border-top: 1px solid var(--line); }
.feature-list .term { font-weight: 600; color: var(--ink); font-size: .97rem; letter-spacing: -.01em; }
.feature-list .desc { color: var(--grey); font-size: .95rem; }
@media (max-width: 760px) { .feature-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* --- Module blocks (the full feature listing) ---------------------------- */
/* Flex rather than a fixed four-column grid: a page with two or three modules
   left the spare columns as bordered empty cells, which reads as something
   missing. Wrapping flex items that grow means the row is always full, whatever
   the count. */
.module-index { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 0; margin-bottom: 3.5rem; }
.module-index a { flex: 1 1 220px; min-width: 0; background: var(--paper); padding: 1rem 1.1rem; text-decoration: none; color: var(--ink-2); font-size: .9rem; font-weight: 500; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.module-index a:hover { background: var(--paper-2); color: var(--ink); }
.module-index .num-tag { margin-bottom: .3rem; }
@media (max-width: 900px) { .module-index a { flex-basis: 40%; } }
@media (max-width: 520px) { .module-index a { flex-basis: 100%; } }

.module { border-top: 1px solid var(--line); padding: 3rem 0; }
/* The head sticks beside its own list, so the grid holding the two of them
   has to END where the list ends. A sticky grid item is held inside its grid
   CONTAINER, not its own row, so while the shot was a third item in this grid
   the pinned head kept travelling down over it. Keep the shot outside. */
.module-main { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px; }
.module:last-child { border-bottom: 1px solid var(--line); }
.module-head h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.module-head p { color: var(--grey); font-size: .93rem; margin: 0; }
.module-head .num-tag { margin-bottom: .6rem; }
.module-list { columns: 2; column-gap: 56px; list-style: none; padding: 0; margin: 0; }
.module-list li { break-inside: avoid; margin: 0 0 .85rem; padding-left: 1.4rem; position: relative; font-size: .94rem; color: var(--ink-2); }
.module-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--ink); }
.module-list li span { display: block; color: var(--grey); font-size: .875rem; line-height: 1.5; }
/* A screen inside a module. It sits below the head-and-list grid and takes the
   whole content width rather than the list column, because a full application
   screen needs about 1100px to be readable. Being outside .module-main is also
   what keeps the sticky head from travelling over it. */
.module-shot { margin-top: 2.4rem; }
.module-shot .shot { margin: 0; }
@media (max-width: 980px) { .module-main { grid-template-columns: minmax(0, 1fr); gap: 24px; } .module-shot { margin-top: 1.6rem; } }
@media (max-width: 700px) { .module-list { columns: 1; } }

/* --- Split blocks -------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.split.reverse .split-media { order: -1; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 36px; } .split.reverse .split-media { order: 0; } }

/* --- Tables -------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5rem; }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
table.data th, table.data td { text-align: left; padding: 1.05rem 1.1rem; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.55; }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 1px solid var(--line); }
table.data thead th { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: .7rem; }
table.data tbody tr { transition: background-color .12s ease; }
table.data tbody tr:hover { background: var(--accent-tint); }
table.data th[scope=row] { font-weight: 600; color: var(--ink); }

/* --- A data table that stacks on a phone --------------------------------- */
/* table.data has min-width: 560px, which is right for a table of short cells
   that must not lose its columns. The security table is the other kind: two
   columns, the second one a paragraph. On a 375px screen the 560px table sat
   in a 335px box, so about two fifths of every row was off to the right and
   the reader had to drag each one back to read it.

   So this is a modifier rather than a change to .data. Tables that are really
   tabular keep their columns and their sideways scroll; a table that is a list
   of headings and explanations asks for this class and becomes that list under
   600px.

   Changing display on a table element takes its role away from a screen
   reader, so the markup carries the roles explicitly. If you add a row, copy
   an existing one including role="row", role="rowheader" and role="cell". */
@media (max-width: 600px) {
  table.data.data-stack,
  table.data.data-stack tbody,
  table.data.data-stack tr,
  table.data.data-stack th,
  table.data.data-stack td { display: block; width: auto; min-width: 0; }
  table.data.data-stack tr { border-bottom: 1px solid var(--line); padding: 0 0 1.15rem; }
  table.data.data-stack tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  table.data.data-stack th[scope=row] { border-bottom: 0; padding: 1.25rem 0 .35rem; font-size: 1rem; }
  table.data.data-stack td { border-bottom: 0; padding: 0; }
  table.data.data-stack tbody tr:hover { background: none; }
}

/* --- Pricing ------------------------------------------------------------- */
/* Cards in a row match each other's height, whatever the bullets do.
   One bullet wrapping to a second line used to make one card taller than the
   one beside it, which reads as a mistake rather than as a difference in
   content. The list grows to fill the slack, so the buttons line up too. */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
@media (max-width: 820px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.price-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px;
  display: flex; flex-direction: column; height: 100%; }
.price-card .price-list { flex: 1 1 auto; }
.price-card .btn { align-self: flex-start; }
.price-card.is-featured { border-color: var(--ink); }
.price-flag { position: absolute; top: -11px; left: 36px; background: var(--ink); color: #fff; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .32rem .7rem; border-radius: 2px; }
/* The limited offer. The line in the card is the flag, the block under the
   grid is the explanation. Both disappear on their own the day it ends. */
.price-offer { margin-top: .4rem; font-size: .82rem; font-weight: 600;
                  letter-spacing: .04em; text-transform: uppercase; color: var(--brand, #0f766e); }
.offer-note { margin-top: 2.2rem; padding: 1.6rem 1.8rem; border: 1px solid var(--line, #e7e2d9);
                 border-radius: 10px; max-width: 62ch; }
.offer-note h2 { font-size: 1.15rem; margin: 0 0 .7rem; }
.offer-note p { margin: 0 0 .7rem; font-size: .94rem; }
.offer-note p:last-child { margin-bottom: 0; }
.price-amount { font-size: 3rem; color: var(--ink); line-height: 1; margin: .7rem 0 .25rem; letter-spacing: -.04em; font-weight: 600; }
.price-amount.is-text { font-size: 2.1rem; letter-spacing: -.03em; }
.price-amount .per { font-size: .92rem; color: var(--grey); font-weight: 400; letter-spacing: 0; }
.price-list { list-style: none; padding: 0; margin: 1.6rem 0; }
.price-list li { position: relative; padding-left: 1.5rem; margin: .6rem 0; font-size: .94rem; color: var(--ink-2); }
.price-list li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 5px; height: 10px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.section-ink .price-list li::before { border-color: #fff; }

/* --- Notices ------------------------------------------------------------- */
.notice { border-radius: var(--r); padding: 1.05rem 1.25rem; margin: 1.6rem 0; font-size: .94rem; border: 1px solid; }
.notice p:last-child { margin-bottom: 0; }
.notice-info { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }
.notice-success { background: var(--ok-bg); border-color: #c5ddd1; color: var(--ok); }
.notice-warning { background: var(--warn-bg); border-color: #e8d9b6; color: var(--warn); }
.notice-error { background: var(--bad-bg); border-color: #eccbc9; color: var(--bad); }

.callout { border-left: 2px solid var(--ink); padding: .4rem 0 .4rem 1.5rem; margin: 2rem 0; }
.callout p:last-child { margin-bottom: 0; }
.callout h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.section-ink .callout { border-color: #fff; }

/* --- Badges -------------------------------------------------------------- */
.badge { display: inline-block; font-size: .67rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 2px; border: 1px solid; white-space: nowrap; line-height: 1.2; }
.badge-ok { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent-line); }
.badge-test { background: var(--warn-bg); color: var(--warn); border-color: #e8d9b6; }
.badge-no { background: var(--paper-2); color: var(--grey); border-color: var(--line); }
.badge-plan { background: #eef2fb; color: #2f4a86; border-color: #ccd8ef; }

/* --- Page header --------------------------------------------------------- */
.page-head { border-bottom: 1px solid var(--line); padding: clamp(2.8rem, 2rem + 3.5vw, 5rem) 0 clamp(2.2rem, 1.6rem + 2.5vw, 3.5rem); }
.page-head h1 { margin-bottom: .5rem; }
.page-head .lede { margin-bottom: 0; }
.crumbs { font-size: .82rem; color: var(--grey-2); margin: 0 0 1.4rem; letter-spacing: .01em; }
.crumbs a { color: var(--grey); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* --- Prose --------------------------------------------------------------- */
.prose { max-width: 42rem; }
.prose h2 { margin-top: 2.8rem; font-size: 1.5rem; }
.prose h3 { margin-top: 2rem; }
.prose ul li, .prose ol li { margin: .55em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.8rem 0; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .75rem .9rem; text-align: left; vertical-align: top; }
.prose th { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-2); border-bottom: 1px solid var(--ink); }

/* --- Forms --------------------------------------------------------------- */
.form { max-width: 40rem; }
.field { margin-bottom: 1.35rem; }
.field label, .label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; letter-spacing: -.005em; }
.field .hint { display: block; font-size: .84rem; color: var(--grey-2); font-weight: 400; margin-top: .25rem; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url],
.field input[type=password], .field input[type=number], .field input[type=date], .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink-2);
  padding: .78rem .9rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease;
  /* An input and a select side by side came out about 2px different, so every
     row pairing the two sat crooked. line-height does not fix it: the browser's
     own stylesheet forces "normal" on a select and ignores ours. An explicit
     minimum height does, and in em and rem so it still holds if the font size
     changes. The arithmetic is the input's own box: one line of text, the
     padding top and bottom, and the two borders. */
  line-height: 1.45;
  min-height: calc(1.45em + 1.56rem + 2px);
}
/* A date input carries its own calendar button and comes out taller than the
   minimum above rather than matching it, so it needs the height stated rather
   than a floor. Same arithmetic, so it lands on exactly the height every other
   control has. */
.field input[type=date] { height: calc(1.45em + 1.56rem + 2px); }
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.07); }
.field input:disabled { background: var(--paper-2); color: var(--grey); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
.field .error { display: block; color: var(--bad); font-size: .85rem; margin-top: .35rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* Two fields side by side, where one label carries a hint and the other does
   not. The hint is a block, so that label is two lines tall and its input sat
   lower than its neighbour: "Twelve characters or more." under New password
   pushed that box below Repeat the new password.
   The grid already stretches both cells to the same height, so making the
   field a column and letting the label take up the slack puts every input on
   the same line whatever the labels do. Scoped to a row: a field on its own
   has nothing to line up with. */
.field-row > .field { display: flex; flex-direction: column; }
.field-row > .field > label { flex: 1 0 auto; }

/* A single input on its own, inside a table cell or a row of buttons, where a
   .field wrapper would add a margin and a block label that are both wrong.
   Every input rule above is scoped to .field, so an input outside one falls
   back to the browser's own box: that is what happened to the Accounts page,
   which was built without wrappers and looked unstyled next to every other
   screen. Same box, sized for a row rather than a form. */
.input-inline, .field-inline input, .field-inline select {
  font-family: var(--sans); font-size: .92rem; color: var(--ink-2);
  padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-inline { width: 12rem; }
/* A code span carries its own tint. Inside a pre that already has one, the
   two stack up and the first token of a command looks highlighted. */
pre code { background: none; padding: 0; font-size: inherit; }
/* A command is longer than a phone is wide, and a block that will not wrap
   pushes the whole page sideways rather than only itself. The downloads page
   prints a Get-FileHash line that ran 140px past the viewport at 390, which is
   horizontal scroll on every section of that page, not just on the command.
   Scrolling the block alone is the behaviour a command wants: wrapping a line
   somebody is about to copy invents a line break that was never in it. */
pre { max-width: 100%; overflow-x: auto; }
pre code { white-space: pre; }
.field-inline.wide input, .field-inline.wide select { width: 100%; }
.field-inline input[type=file] { padding: .42rem .5rem; background: var(--paper-2); }
.input-inline:focus, .field-inline input:focus, .field-inline select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.07);
}
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; color: var(--ink-2); font-weight: 400; }
.check input { margin-top: .32rem; flex: 0 0 auto; accent-color: var(--ink); }
.required { color: var(--bad); }

/* --- News ---------------------------------------------------------------- */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { margin: 0; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.post-list li:first-child { padding-top: 0; }
.post-meta { font-size: .78rem; color: var(--grey-2); margin-bottom: .5rem; letter-spacing: .06em; text-transform: uppercase; }
.post-list h2 { font-size: 1.45rem; margin-bottom: .5rem; }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { color: var(--accent); }
.pagination { display: flex; gap: 12px; align-items: center; margin-top: 2.5rem; }

/* --- Releases ------------------------------------------------------------ */
.release { border-left: 1px solid var(--line); padding: 0 0 2.2rem 28px; position: relative; }
.release::before { content: ""; position: absolute; left: -4px; top: .55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.release:last-child { padding-bottom: 0; }
.release h3 { margin-bottom: .25rem; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; position: relative; list-style: none; font-size: 1.05rem; color: var(--ink); font-weight: 600; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 1.7rem; width: 8px; height: 8px; border: solid var(--grey-2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .18s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-body { padding: 0 0 1.5rem; color: var(--grey); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* --- CTA ----------------------------------------------------------------- */
.cta { background: var(--ink); color: #b3b6bc; border-radius: var(--r-lg); padding: clamp(2.4rem, 1.6rem + 3.5vw, 4.5rem); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(38rem 22rem at 85% -10%, rgba(255,255,255,.08), transparent 62%); }
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #8f949c; padding: clamp(3.5rem, 2rem + 3.5vw, 5rem) 0 2.5rem; font-size: .91rem; }
/* EVERY LINK IN THE FOOTER, BECAUSE THE FOOTER IS DARK.
   The telephone number was invisible from the day it was added. The global
   rule is `a { color: var(--ink) }`, and this footer's background IS var(--ink),
   so the number was #101010 on #101010: a contrast ratio of 1 to 1. What a
   reader could see was its underline, which takes its colour from somewhere
   else, so the footer showed a short horizontal line where the number should
   be and the opening hours underneath it, belonging to nothing.

   The two columns that already had links, .footer-col and .footer-legal, had
   their own colours and were fine, which is why nobody caught it: the fault
   was in the one place a link had never been put before. So this is set on the
   footer rather than on the number, and the next link added anywhere in here
   is visible without anybody remembering. The two rules below still override
   it for their own columns. */
.site-footer a { color: #cfd3d9; text-decoration-color: #4b5058; }
.site-footer a:hover { color: #fff; text-decoration-color: currentColor; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 44px; padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-logo { color: #fff; margin-bottom: 1.2rem; }
.footer-line { max-width: 28ch; color: #85898f; }
/* The hours sit under the number they belong to, quieter than it and
   closer to it than to the line above, so the pair reads as one thing. */
.footer-hours { font-size: .84rem; color: #6f747b; margin-top: .15rem; }
.footer-col h2 { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: .5rem 0; }
.footer-col a { color: #9ba0a8; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-legal { padding-top: 2rem; color: #74787f; font-size: .84rem; }
.footer-legal p { margin: 0 0 .5rem; }
.footer-legal a { color: #9ba0a8; }
.footer-small { color: #63676d; }

/* --- Admin --------------------------------------------------------------- */
body.admin { background: var(--paper-2); }
.admin-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 900px) { .admin-shell { grid-template-columns: minmax(0, 1fr); } }
.admin-side { background: var(--ink); color: #9ba0a8; padding: 26px 20px; }
.admin-side .logo { height: 24px; }
.admin-side nav { margin-top: 32px; }
.admin-side ul { list-style: none; margin: 0; padding: 0; }
.admin-side li { margin: 1px 0; }
.admin-side a { display: block; padding: .58rem .75rem; border-radius: var(--r); color: #9ba0a8; text-decoration: none; font-size: .92rem; }
.admin-side a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-side a.is-current { background: #fff; color: var(--ink); font-weight: 600; }
.admin-side .side-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: .85rem; }
.admin-main { padding: 34px; }
@media (max-width: 640px) { .admin-main { padding: 22px 18px; } }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.admin-head h1 { font-size: 1.6rem; margin: 0; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; margin-bottom: 24px; }
.panel h2 { font-size: 1.1rem; margin-bottom: 1.1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; text-decoration: none; display: block; color: inherit; }
.stat:hover { border-color: var(--ink); color: inherit; }
.stat .n { font-size: 2.1rem; color: var(--ink); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; }
.stat .k { font-size: .74rem; color: var(--grey-2); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--ink); }
.login-card { width: 100%; max-width: 420px; background: var(--paper); border-radius: var(--r-lg); padding: 40px; }
.actions-cell { white-space: nowrap; }
.actions-cell a { margin-right: .7rem; font-size: .88rem; }
.danger { color: var(--bad); border-color: #eccbc9; }

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .cta, .banner { display: none; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .section { padding: 1rem 0; }
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Buttons on dark backgrounds ----------------------------------------
   Inside a dark band the ink button would disappear, so it inverts. These
   rules also outrank the link colouring that .section-ink applies. */
.hero .btn, .cta .btn, .section-ink .btn, .site-footer .btn { text-decoration: none; }
.hero .btn-primary, .cta .btn-primary, .section-ink .btn-primary {
  background: #fff; color: var(--ink); border-color: #fff;
}
.hero .btn-primary:hover, .cta .btn-primary:hover, .section-ink .btn-primary:hover {
  background: #fff; color: #000; border-color: #fff; opacity: .88;
}
.hero .btn-light, .cta .btn-light, .section-ink .btn-light, .site-footer .btn-light {
  background: #fff; color: var(--ink); border-color: #fff;
}
.hero .btn-light:hover, .cta .btn-light:hover, .section-ink .btn-light:hover { color: #000; opacity: .88; }
.hero .btn-ghost, .cta .btn-ghost, .section-ink .btn-ghost, .site-footer .btn-ghost,
.hero .btn-outline-light, .cta .btn-outline-light, .section-ink .btn-outline-light {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.32);
}
.hero .btn-ghost:hover, .cta .btn-ghost:hover, .section-ink .btn-ghost:hover,
.hero .btn-outline-light:hover, .cta .btn-outline-light:hover, .section-ink .btn-outline-light:hover {
  border-color: #fff; color: #fff; background: transparent;
}
.admin-side .btn-light { background: #fff; color: var(--ink); border-color: #fff; }

/* Any table inside prose stays inside its own scroller on a narrow screen. */
.prose .table-scroll { margin: 1.8rem 0; }
.prose .table-scroll table { margin: 0; min-width: 34rem; }

/* Consent checkboxes are labels too, so they need to outrank the field label. */
.field label.check, .field label.check span { font-weight: 400; }
.field label.check .required { font-weight: 600; }

/* --- Status key ---------------------------------------------------------- */
.section:has(.status-key) { padding-bottom: clamp(1.4rem, 1rem + 1.2vw, 2.4rem); }
.status-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 2.4rem 0 0; padding-top: 2.2rem; border-top: 1px solid var(--line); align-items: start; }
@media (max-width: 1040px) { .status-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.status-key > div { margin: 0; }
.status-key dt { margin: 0 0 .7rem; }
.status-key dd { margin: 0; font-size: .9rem; color: var(--grey); line-height: 1.55; }
.status-key dd strong { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .status-key { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* --- Product screenshots -------------------------------------------------- */
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}

/* The whole shot is a button, and must not look like one until it is wanted. */
.shot-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; font: inherit; color: inherit; text-align: left;
  border-radius: var(--r-lg);
}
.shot-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.shot-hint {
  position: absolute; right: 12px; bottom: 12px;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: .45rem .75rem; border-radius: var(--r);
  background: rgba(16,16,16,.82); color: #fff;
  opacity: 0; transition: opacity .16s ease;
}
.shot-open:hover .shot-hint, .shot-open:focus-visible .shot-hint { opacity: 1; }
@media (hover: none) { .shot-hint { opacity: 1; } }

/* --- The full-size viewer ------------------------------------------------ */
.shot-viewer { position: fixed; inset: 0; margin: 0; border: 0; padding: 0; background: none; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; overflow: hidden; }
.shot-viewer::backdrop { background: rgba(8,8,8,.88); }
.shot-viewer-inner {
  display: flex; flex-direction: column; gap: .9rem;
  width: 100%; height: 100%; padding: 3.2rem clamp(1rem, 4vw, 3rem) 1.4rem;
  box-sizing: border-box; align-items: center; justify-content: center;
}
.shot-viewer img {
  display: block; max-width: 100%; max-height: calc(100vh - 8.5rem);
  width: auto; height: auto; object-fit: contain;
  background: #fff; border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.shot-viewer figcaption { color: #b9bcc2; font-size: .8rem; text-align: center; }
.shot-viewer-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
  font-size: 1.35rem; line-height: 1; display: grid; place-items: center;
}
.shot-viewer-close:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.shot-viewer-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A screenshot in a split block gets the full width of the page rather than
   half of it. Half a column is roughly a third of the size the screen was
   captured at, which is below the point where any of it can be read. */
.split:has(.shot):not(:has(.shot-detail)) { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.split:has(.shot):not(:has(.shot-detail)) .split-media { order: 0; }
.split:has(.shot):not(:has(.shot-detail)).reverse .split-media { order: 0; }

/* A cropped detail keeps its column, and sits with the paragraph it
   illustrates rather than at the top of the block. */
.split:has(.shot-detail) { align-items: center; }
.shot-detail img { border-radius: var(--r-lg); }
.shot figcaption { margin-top: .8rem; font-size: .78rem; color: var(--grey-2); letter-spacing: .01em; }
.hero .shot img, .section-ink .shot img { border-color: rgba(255,255,255,.12); box-shadow: var(--shadow-lg); }
.hero .shot figcaption, .section-ink .shot figcaption { color: #7d818a; }
.shot-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
@media (max-width: 900px) { .shot-row { grid-template-columns: minmax(0,1fr); } }
.shot-row .shot figcaption { font-size: .76rem; }

/* --- Audience routes ------------------------------------------------------
   The main choice on the home page: a firm, or a business. Cards rather than
   buttons, because each one has to carry a line of explanation. */
.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 2.2rem 0 1.4rem; }
@media (max-width: 700px) { .routes { grid-template-columns: minmax(0, 1fr); } }

.route {
  position: relative; display: block; padding: 1.5rem 3rem 1.5rem 1.6rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: var(--ink); background: var(--paper);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.route:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.route strong { display: block; font-size: 1.06rem; font-weight: 600; letter-spacing: -.018em; margin-bottom: .3rem; }
.route span { display: block; font-size: .9rem; color: var(--grey); line-height: 1.5; }
.route::after {
  content: ""; position: absolute; right: 1.5rem; top: 50%; width: 8px; height: 8px;
  border: solid var(--grey-2); border-width: 1.5px 1.5px 0 0;
  transform: translateY(-50%) rotate(45deg); transition: right .16s ease, border-color .16s ease;
}
.route:hover::after { right: 1.2rem; border-color: var(--ink); }

.hero .route { background: transparent; border-color: rgba(255,255,255,.2); color: #fff; }
.hero .route:hover { border-color: #fff; background: rgba(255,255,255,.05); color: #fff; }
.hero .route span { color: #9ba0a8; }
.hero .route::after { border-color: rgba(255,255,255,.5); }
.hero .route:hover::after { border-color: #fff; }

/* A returning visitor's previous choice, marked rather than enforced. */
.route-note { display: inline-block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grey-2); border: 1px solid var(--line); border-radius: 2px; padding: .15rem .4rem; margin-bottom: .5rem; }
.hero .route-note { color: #9ba0a8; border-color: rgba(255,255,255,.25); }

.hero-aside { font-size: .92rem; color: #8f949c; }
.hero-aside a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }

/* --- Edition comparison --------------------------------------------------- */
.compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-2); font-weight: 600; border-bottom: 1px solid var(--ink); }
.compare tbody th { font-weight: 500; color: var(--ink-2); }
.compare td { text-align: center; width: 20%; }
.compare .yes { color: var(--ink); font-weight: 600; }
.compare .no { color: var(--grey-3); }


/* --- Finish -------------------------------------------------------------- */
/* Last-line orphans in body copy. Ignored by browsers that do not have it. */
p, li, figcaption, dd { text-wrap: pretty; }

/* A button that moves a hair under the pointer reads as a control. */
.btn:active { transform: translateY(1px); }

/* A card that is not a link should not pretend to be one, so only the ones
   wrapped in an anchor lift. The rest gain a slightly softer edge. */
.card { transition: border-color .16s ease; }

/* The rule above a page heading, used on the breadcrumb strip and the footer,
   sits flush against the type on small screens without this. */
@media (max-width: 640px) {
  .section { padding: clamp(2.6rem, 2rem + 3vw, 4rem) 0; }
}


/* --- The accent, applied ---------------------------------------------------
   Eyebrows, module numbers, icons and list marks were all near-black. Giving
   them the product's teal is what makes the page and the software look like
   one thing. */
.eyebrow { color: var(--accent); }
.section-ink .eyebrow, .hero .eyebrow { color: #8fb9b7; }
.num-tag { color: var(--accent); }
.card-icon { color: var(--accent); }
.module-list li::before { background: var(--accent); }
.price-list li::before { border-color: var(--accent); }
.price-card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.price-flag { background: var(--accent); }
.more { color: var(--accent); border-color: var(--accent-line); }
.more:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
a { text-decoration-color: var(--accent-line); }
.nav-link:hover { color: var(--accent); background: var(--accent-tint); }
.nav-link.is-current { color: var(--accent); }
.submenu a:hover { background: var(--accent-tint); color: var(--accent); }
.callout { background: var(--accent-tint); border-radius: 0 var(--r) var(--r) 0; padding: 1.4rem 1.6rem; }

/* --- The quick guide ----------------------------------------------------- */
/* A numbered list where the number is information: installing is a sequence
   and the steps only work in order. Everywhere else on this site a numbered
   marker would be decoration. */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 1.6rem; }
.steps li { counter-increment: step; position: relative; padding-left: 2.6rem; margin-bottom: 1rem; color: var(--ink-2); }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-deep);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
/* The two things on this page a reader must not skim past. */
.callout-warn { background: var(--warn-bg); border-color: var(--warn); }
.callout-warn h3 { color: var(--warn); }
.route { border-radius: var(--r-lg); transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s ease, background-color .18s ease; }
.hero .route:hover { background: rgba(19,111,109,.30); border-color: #4fa9a6; transform: translateY(-3px); }

/* --- Entrance motion ------------------------------------------------------
   Deliberately only two places: the screenshot in the hero, and a grid of
   cards. Applied to every section it stops reading as craft and starts
   reading as a template. Off entirely for anyone who asks their system for
   less motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(12px); }
  [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  }
}

/* The header earns a shadow once the page has moved under it. */
.site-header { transition: box-shadow .2s ease, background-color .2s ease; }
.site-header.is-stuck {
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -14px rgba(16,32,32,.28);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   Composition layer, 31 August 2026
   --------------------------------------------------------------------------
   The tokens, buttons, cards and shot component below this were sound and are
   untouched. What was missing was composition: eight consecutive sections each
   setting one 40rem paragraph against 700px of empty page, and screenshots of
   a white application floating on a white ground where they read as nothing.

   So: a window frame that makes a screenshot look like software, a hero that
   puts the product above the fold, and layouts that use the width they have.
   ========================================================================== */

/* --- A screenshot should look like an application ------------------------
   The product's own interface is white. On a white page with a hairline
   border it disappears, which is why the homepage read as three empty boxes.
   Chrome around it says "this is a running program" before a word is read. */
.frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
.frame .shot-open { box-shadow: inset 0 0 0 1px var(--line-2); }
.frame .shot { padding: 0; }
.frame-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .85rem;
  background: linear-gradient(180deg, #fbfcfc, #f1f5f5);
  border-bottom: 1px solid var(--line);
}
.frame-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d6dedd; display: block; }
.frame-title {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--grey-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame .shot img { border: 0; border-radius: 0; box-shadow: none; }
.frame .shot-open { border-radius: 0; }
.frame figcaption { padding: .6rem .85rem; border-top: 1px solid var(--line-2); background: var(--paper-2); margin: 0; }
.hero .frame,
.section-ink .frame { border-color: rgba(255,255,255,.12); background: #141516; box-shadow: var(--shadow-lg); }
.hero .frame-bar,
.section-ink .frame-bar { background: #1b1d1f; border-bottom-color: rgba(255,255,255,.1); }
.hero .frame-dots i,
.section-ink .frame-dots i { background: #3a3d40; }
.hero .frame figcaption,
.section-ink .frame figcaption { background: #141516; border-top-color: rgba(255,255,255,.08); color: var(--grey-2); }

/* --- Hero ---------------------------------------------------------------
   Words left, running software right, both above the fold. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.hero-grid .hero-copy { max-width: 38rem; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero-grid .hero-copy { max-width: 40rem; }
}

/* --- Capability grid ----------------------------------------------------- */
.caps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.cap { background: var(--paper); padding: clamp(1.35rem, 1rem + .8vw, 1.9rem); }
.cap-ico { color: var(--accent); margin-bottom: .85rem; display: block; }
.cap-ico svg { width: 22px; height: 22px; display: block; }
.cap h3, .cap h2 { margin: 0 0 .4rem; font-size: 1.04rem; font-family: var(--sans); font-weight: 650; letter-spacing: -.004em; line-height: 1.35; }
.cap p { margin: 0; font-size: .93rem; color: var(--grey); line-height: 1.6; }
/* A card whose foot has to line up with the card beside it.

   The grid already makes the boxes the same height, so the boxes were never
   the problem: the copy inside them is. Two blurbs are never the same number
   of lines, so the buttons ended up at two different heights, which reads as a
   mistake rather than as a difference in the writing. The card becomes a
   column and the block that ends it is pushed to the bottom, so the figures
   and the buttons sit on one line however long the words above them run, at
   every width and whatever the copy is changed to later. */
.cap-stack { display: flex; flex-direction: column; height: 100%; }
.cap-stack > .cap-foot { margin-top: auto; padding-top: 1rem; }

.section-alt .caps { background: var(--line); }
.section-alt .cap { background: var(--paper); }
/* An incomplete last row leaves empty cells, and because the hairlines here
   are the container's background showing through a 1px gap, an empty cell is a
   grey block rather than nothing. So the last card takes the rest of its row:
   with a three-column grid, one left over spans three and two left over span
   two apiece. Fixes it for every count rather than for today's. */
.caps > :last-child:nth-child(3n + 1) { grid-column: span 3; }
.caps > :last-child:nth-child(3n + 2) { grid-column: span 2; }
@media (max-width: 900px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps > :last-child:nth-child(3n + 1),
  .caps > :last-child:nth-child(3n + 2) { grid-column: auto; }
  .caps > :last-child:nth-child(2n + 1) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .caps { grid-template-columns: minmax(0, 1fr); }
  /* Matched selector for selector, not a shorter one: `.caps > :last-child`
     alone is less specific than the two-column rule above and loses to it. */
  .caps > :last-child:nth-child(2n + 1),
  .caps > :last-child:nth-child(3n + 1),
  .caps > :last-child:nth-child(3n + 2) { grid-column: auto; }
}

/* --- Figures -------------------------------------------------------------
   Only numbers that can be pointed at in the product or the manual. */
.figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, .6rem + 2vw, 2.5rem);
}
.figure-n {
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  letter-spacing: -.02em; color: var(--ink); display: block; margin-bottom: .45rem;
}
.section-ink .figure-n { color: #fff; }
.figure-l { font-size: .88rem; color: var(--grey); line-height: 1.5; margin: 0; }
.figures > div { border-top: 2px solid var(--ink); padding-top: .9rem; }
.section-ink .figures > div { border-top-color: rgba(255,255,255,.35); }
@media (max-width: 760px) { .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Feature rows --------------------------------------------------------
   Alternating, and wide enough that the screenshot is worth showing. */
.frow {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
}
.frow + .frow { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.frow.rev .frow-media { order: -1; }
.frow-copy { max-width: 32rem; }
@media (max-width: 900px) {
  .frow { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .frow.rev .frow-media { order: 0; }
  .frow-copy { max-width: 40rem; }
}

/* --- Small factual chips ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: .78rem; letter-spacing: .01em; color: var(--ink-3);
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: .3rem .7rem;
}
.section-ink .chips li { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #cfd3d8; }

/* --- Section heading block ----------------------------------------------
   A heading and its standfirst side by side, so the width is used and the
   reader gets the point and the qualification in one movement of the eye. */
.shead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: end; margin-bottom: clamp(1.8rem, 1.2rem + 1.6vw, 3rem); }
.shead.shead-top { align-items: start; }
.shead > :last-child { margin-bottom: 0; }
.shead h2 { margin: 0; }
.shead p { margin: 0; }
@media (max-width: 820px) { .shead { grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; } }

/* --- Heading level and heading size are different questions ---------------
   Five pages opened with a panel whose heading was an <h3> sitting directly
   under the <h1>, so the outline skipped a level. The tags are corrected to
   <h2>; these rules keep the panels looking exactly as they did, because a
   card heading should not suddenly be set at section size. */
.card h2, .price-card h2, .panel h2, .route h2 {
  font-size: 1.2rem; line-height: 1.35; letter-spacing: -.005em;
  font-family: var(--display); font-weight: 600; margin: 0 0 .5rem;
}
.card h2 { margin-bottom: .5rem; }

/* --- Contrast ------------------------------------------------------------
   The descriptions under each item in the navigation menus were set in
   --grey-2, which is 3.14:1 on white and fails WCAG AA for text at that size.
   --grey is 4.83:1 on white and 4.54:1 on the hovered ground, so it passes on
   both. The tone barely moves; the text becomes readable. */
.submenu span { color: var(--grey); }

/* --- The rest of the AA contrast pass ------------------------------------
   Every value below was measured against the ground it actually sits on
   rather than against white, which is why the dark-section figures differ
   from the light ones. Ratios in the comments are the measured result. */
.frame-title { color: var(--grey); }                 /* 4.54:1 on the frame bar */
.shot figcaption { color: var(--grey); }             /* 4.83:1 on paper */
.hero .shot figcaption,
.section-ink .shot figcaption { color: #a8aeb7; }    /* 8.52:1 on ink */
.crumbs { color: var(--grey); }                      /* 4.83:1 */
.crumbs a { color: var(--ink-3); }
.footer-small { color: #9aa0a8; }                    /* 7.4:1 on the footer ink */
.section-ink .lede, .cta .lede { color: #c9ccd2; }   /* 11.8:1 on ink */
.hero .frame-title, .section-ink .frame-title { color: #a8aeb7; }  /* 8.5:1 on the dark bar */
.hint, .field .hint { color: var(--grey); }                          /* 4.83:1 */
.footer-legal, .site-footer .small { color: #9aa0a8; }

/* --- The section block ---------------------------------------------------
   Thirty-five section heads across twelve pages set a 40rem column against
   700px of empty page, one after another, which is what made every inner page
   read as a text document rather than a designed one.

   Heading on the left, the argument on the right. The heading column is
   narrow on purpose: a short heading beside a wide paragraph is the shape a
   reader scans, and it uses the width the page already has. */
.sblock {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.8rem, 1rem + 3vw, 4.5rem);
  align-items: start;
}
.sblock + .sblock { margin-top: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem); }
.sblock-head h2 { margin: 0; }
.sblock-head .eyebrow { margin-bottom: .8rem; }
.sblock-body { max-width: 44rem; }
.sblock-body > :last-child { margin-bottom: 0; }
/* A block that opens a section carries the space under it that .measure did. */
.sblock.sblock-lead { margin-bottom: clamp(1.8rem, 1.2rem + 1.6vw, 3rem); }
@media (max-width: 860px) {
  .sblock { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .sblock + .sblock { margin-top: 2.6rem; }
  .sblock-body { max-width: 40rem; }
}

/* --- The product page ----------------------------------------------------
   Nineteen thousand pixels of reference. Three things it needed. */

/* 1. The module heading stays with its own list. At 300px it used to scroll
      away in the first second, so the back half of a long module had nothing
      on screen saying which module it was. */
@media (min-width: 981px) {
  .module-head { position: sticky; top: 92px; align-self: start; }
}

/* 2. "What it does not do" is the most distinctive thing on this page and it
      was the fourteenth bullet in a list. It is now the note the module ends
      on, in the colour the product itself uses for a refusal. */
.module-list li.wont {
  break-inside: avoid; column-span: all;
  margin: 1.4rem 0 0; padding: .85rem 1rem .9rem 1.1rem;
  border-left: 2px solid var(--bad); background: var(--bad-bg); border-radius: 0 var(--r) var(--r) 0;
}
.module-list li.wont::before { display: none; }
.module-list li.wont strong {
  display: block; color: var(--bad); font-size: .78rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem;
}
.module-list li.wont span { color: var(--ink-3); font-size: .9rem; }

/* 3. A quiet rule between the number and the name, so a module reads as a
      numbered part of a set rather than a heading that happens to have a
      figure above it. */
.module-head .num-tag { display: block; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
/* The page's closing limitation, given the weight of the argument it is. */
.callout-wont { border-left: 2px solid var(--bad); background: var(--bad-bg); max-width: none;
                display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,1.5fr);
                gap: clamp(1rem,.5rem+2vw,3rem); align-items: start; padding: 1.6rem 1.8rem; }
.callout-wont h3 { color: var(--bad); margin: 0; font-size: 1.15rem; }
.callout-wont p { margin: 0; }
@media (max-width: 820px) { .callout-wont { grid-template-columns: minmax(0,1fr); gap: .7rem; } }

/* --- Who it is for, and who it is not ------------------------------------ */
.tick-list, .cross-list { list-style: none; margin: 0; padding: 0; }
.tick-list li, .cross-list li {
  position: relative; padding-left: 1.7rem; margin: 0 0 .95rem;
  font-size: .93rem; color: var(--grey); line-height: 1.55;
}
.tick-list li:last-child, .cross-list li:last-child { margin-bottom: 0; }
.tick-list li strong, .cross-list li strong { color: var(--ink-2); font-weight: 600; }
.tick-list li::before, .cross-list li::before {
  position: absolute; left: 0; top: .05em; font-size: .95rem; font-weight: 700; line-height: 1.6;
}
.tick-list li::before { content: "\2713"; color: var(--accent); }
.cross-list li::before { content: "\2715"; color: var(--bad); }

/* --- The "you were here" chip on a route card ----------------------------
   `.route span` is more specific than `.route-note`, so the chip was being
   rendered by the rule meant for the card's description: block, .9rem, and
   with .14em of letterspacing it wrapped to two lines and pushed the card
   apart. It only became obvious once the hero went to two columns and the
   cards got narrower, but it was always wrong. */
.route .route-note {
  display: inline-block; width: auto;
  font-size: .68rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey); border: 1px solid var(--line); border-radius: 3px;
  padding: .18rem .45rem; margin: 0 0 .6rem; white-space: nowrap;
}
.hero .route .route-note { color: #a8aeb7; border-color: rgba(255,255,255,.28); }

/* --- Route cards in the hero --------------------------------------------
   Side by side inside the narrower hero column they are 247px each, which
   wraps "I keep my own books" onto two lines and runs the description to
   five. Stacked they read in one glance, and the hero had the vertical room
   going spare. Below the hero, where the column is full width, they stay in
   two. */
.hero .routes { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 1.9rem 0 1.2rem; }
.hero .route { padding: 1.15rem 3rem 1.15rem 1.4rem; }
.hero .route strong { margin-bottom: .2rem; }
.hero .route span { font-size: .88rem; }
/* The headline reads best on two lines. In the two-column hero the copy
   column is ~490px, and at the shared h1 size "Your books, on" needs about
   510px, so it broke to three. Eight per cent smaller and it holds. */
.hero-grid h1 { font-size: clamp(2.1rem, 1.35rem + 2.15vw, 3.05rem); max-width: 15ch; }
/* The cross list on a dark ground. */
.section-ink .cross-list li { color: #b9bcc2; }
.section-ink .cross-list li strong { color: #fff; }
.cta-note { margin: 1.1rem 0 0; font-size: .9rem; color: #a8aeb7; }
.cta-note a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }

/* --- Product updates -----------------------------------------------------
   Version and date in the left column so a reader can scan the release
   history without reading it, the way a changelog is actually used. */
.relnote { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
           padding: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem) 0; border-top: 1px solid var(--line); }
.relnote:last-of-type { border-bottom: 1px solid var(--line); }
.relnote-head { position: sticky; top: 92px; align-self: start; }
.relnote-v { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 .2rem; letter-spacing: -.01em; }
.relnote-d { font-size: .84rem; color: var(--grey); margin: 0; }
.relnote-s { font-size: 1.08rem; color: var(--ink-2); margin: 0 0 1.1rem; max-width: 42rem; }
.relnote-list { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.relnote-list li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: .9rem;
                   padding: .7rem 0; border-top: 1px solid var(--line-2); font-size: .93rem;
                   color: var(--grey); line-height: 1.55; }
.rel-tag { font-size: .68rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
           padding: .22rem .4rem; border-radius: 3px; align-self: start; text-align: center; }
.rel-added   { color: var(--ok);   background: var(--ok-bg); }
.rel-fixed   { color: var(--bad);  background: var(--bad-bg); }
.rel-changed { color: var(--warn); background: var(--warn-bg); }
@media (max-width: 820px) {
  .relnote { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .relnote-head { position: static; display: flex; align-items: baseline; gap: .8rem; }
  .relnote-list li { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .rel-tag { justify-self: start; }
}

/* --- The module map on the product overview ------------------------------ */
.module-map { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
              gap: 1px; background: var(--line); border: 1px solid var(--line);
              border-radius: var(--r-lg); overflow: hidden; }
.mm { background: var(--paper); padding: 1.25rem 1.35rem; text-decoration: none; color: inherit;
      display: block; transition: background .16s ease; }
.mm:hover { background: var(--paper-2); }
.mm .num-tag { display: block; margin-bottom: .45rem; }
.mm strong { display: block; font-size: 1rem; font-weight: 650; letter-spacing: -.004em; margin-bottom: .3rem; color: var(--ink); }
.mm-blurb { display: block; font-size: .875rem; color: var(--grey); line-height: 1.5; }
/* The last tile spans whatever is left of its row, so a module count that does
   not divide by three cannot leave a hole. The gap here is the container
   showing through a 1px grid gap, so an empty cell is not white space, it is a
   grey block, which is what seventeen modules in a three-column grid produced.
   Same treatment as .caps, and the breakpoint resets repeat the full selectors
   because .module-map > :last-child alone loses on specificity to the
   :nth-child rule from the wider breakpoint whatever the source order. */
.module-map > :last-child:nth-child(3n + 1) { grid-column: span 3; }
.module-map > :last-child:nth-child(3n + 2) { grid-column: span 2; }
@media (max-width: 900px) {
  .module-map { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .module-map > :last-child:nth-child(3n + 1),
  .module-map > :last-child:nth-child(3n + 2) { grid-column: auto; }
  .module-map > :last-child:nth-child(2n + 1) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .module-map { grid-template-columns: minmax(0,1fr); }
  .module-map > :last-child:nth-child(3n + 1),
  .module-map > :last-child:nth-child(3n + 2),
  .module-map > :last-child:nth-child(2n + 1) { grid-column: auto; }
}
.more-inline { font-size: .82rem; color: var(--accent); margin: .9rem 0 0; }

/* --- Where to go next, at the foot of a detail page ---------------------- */
.pager { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
         margin-top: clamp(2.5rem, 1.8rem + 2vw, 4rem); }
.pager-link { display: block; padding: 1.3rem 1.4rem; text-decoration: none; color: inherit;
              border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
              transition: border-color .16s ease, transform .16s ease; }
.pager-link:hover { border-color: var(--ink); transform: translateY(-1px); }
.pager-lab { display: block; font-size: .7rem; font-weight: 650; letter-spacing: .16em;
             text-transform: uppercase; color: var(--grey); margin-bottom: .5rem; }
.pager-link strong { display: block; font-size: 1.05rem; font-weight: 650; margin-bottom: .3rem; color: var(--ink); }
.pager-blurb { display: block; font-size: .88rem; color: var(--grey); line-height: 1.5; }
@media (max-width: 900px) { .pager { grid-template-columns: minmax(0,1fr); } }

/* --- The on-premise architecture drawing --------------------------------- */
.arch { margin: 0; }
.arch-svg { width: 100%; height: auto; display: block; border: 1px solid var(--line);
            border-radius: var(--r-lg); background: var(--paper); }
.arch-zone { font: 600 11px var(--sans); letter-spacing: .16em; fill: var(--grey); }
.arch-h { font: 650 14px var(--sans); fill: var(--ink); }
.arch-t { font: 400 13.5px var(--sans); fill: var(--ink-2); }
.arch-s { font: 400 12px var(--sans); fill: var(--grey); }
.arch-inv { fill: #ffffff; }
.arch-bad { fill: var(--bad); }
.arch figcaption { font-size: .86rem; color: var(--grey); line-height: 1.5; margin-top: 1rem; }
/* Four cards in a three-column grid leaves two empty cells. Two by two. */
.caps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.caps-2 > :last-child:nth-child(3n + 1), .caps-2 > :last-child:nth-child(3n + 2) { grid-column: auto; }
.caps-2 > :last-child:nth-child(2n + 1) { grid-column: span 2; }
@media (max-width: 700px) { .caps-2 { grid-template-columns: minmax(0, 1fr); } .caps-2 > :last-child:nth-child(2n + 1) { grid-column: auto; } }

/* A whole application screen under a capability grid: the grid's own width,
   which is the content width rather than a column of it. */
.records-shot { margin-top: 2.4rem; }
.records-shot .shot { margin: 0; }

/* ===========================================================================
   THE GUIDED TOUR  (/tour)
   ---------------------------------------------------------------------------
   The ten captures are different shapes, from 1440x240 to 752x770. Every
   version of this that let the stage take its height from the picture made
   the page jump on every step, which is the thing a reader notices instead of
   the software. So the stage is a fixed box and the picture is contained
   inside it, centred, on a tint rather than on white: a screenshot of a white
   application on a white page has no edges.
   =========================================================================== */

.tour-film {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow);
}
.tour-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.tour-film-note {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: baseline;
  justify-content: space-between;
  margin: .9rem 0 0; font-size: .875rem; color: var(--grey);
}

/* --- Route chooser ------------------------------------------------------- */
/* auto-fit rather than a fixed four: the number of routes is a content
   decision and it has already changed once. */
.tour-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 1.4rem; }
.tour-route {
  position: relative; display: flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; text-align: left;
  padding: .85rem 1rem; min-height: 52px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.tour-route:hover { border-color: var(--accent); color: var(--accent); }
.tour-route[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tour-route-key {
  flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 4px; background: var(--paper-3); color: var(--grey);
  font-size: .75rem; font-weight: 700;
}
.tour-route[aria-pressed="true"] .tour-route-key { background: rgba(255,255,255,.22); color: #fff; }
.tour-route-name { flex: 1 1 auto; }
/* A tick once every step in a route has been looked at. Quiet: it is a note to
   the reader about where they have been, not a reward. */
.tour-route.is-done .tour-route-done::after {
  content: "✓"; font-size: .8rem; color: var(--accent); font-weight: 700;
}
.tour-route[aria-pressed="true"].is-done .tour-route-done::after { color: #fff; }

/* --- The frame ----------------------------------------------------------- */
.tour-frame { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.tour-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  flex-wrap: wrap; padding: .95rem 1.15rem; border-bottom: 1px solid var(--line-2);
}
.tour-summary { margin: 0; font-size: .9rem; color: var(--grey); max-width: 46rem; }
.tour-bar-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tour-count { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--accent); white-space: nowrap; }

/*
   THE SHAPE OF THE STAGE IS SET BY THE ROUTE, NOT BY THE STEP.
   Fixing one height for all ten captures left a short, wide screen floating in
   half a screen of nothing. Sizing to each picture made the page jump under
   the reader's hands on every click. So it is the tallest picture in the
   CURRENT route: stable while somebody walks a route, and it changes only at
   the moment they deliberately chose another one. --tour-ar is written by the
   script; the fallback is for the moment before it runs.
*/
.tour-stage {
  /* Flex rather than grid, and that is not a preference. A grid item is not
     stretched under place-items:center, so max-height:100% on the picture
     never resolved and a tall capture drew at its natural size and overflowed
     a stage that had room for it. In a flex container with a definite height
     the percentage resolves. */
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-3);
  padding: clamp(14px, 2.2vw, 30px);
  aspect-ratio: var(--tour-ar, 16 / 9);
  /* width:100% is load-bearing. With an automatic inline size and a
     constrained block size, a box with an aspect ratio computes its WIDTH
     from its height instead, so the tall routes drew a 547px stage in a
     1122px frame with white either side. An explicit width stops the ratio
     being solved in that direction. */
  width: 100%;
  max-height: min(560px, 72vh);
  min-height: 240px;
  overflow: hidden;
}
.tour-shot {
  position: relative; max-width: 100%; max-height: 100%; line-height: 0;
  transform-origin: var(--tour-x, 50%) var(--tour-y, 50%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.tour-shot.is-zoomed { transform: scale(1.9); }
.tour-img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 4px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(16,32,32,.08), 0 12px 30px -14px rgba(16,32,32,.35);
  cursor: zoom-in;
}
.tour-stage.is-zoomed .tour-img { cursor: zoom-out; }

/* The marker. Pulsing, because a still circle on a screenshot reads as part of
   the screenshot, and this one is the control. */
.tour-spot {
  position: absolute; transform: translate(-50%, -50%);
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: var(--accent); color: #fff; border: 2px solid #fff;
  font-family: var(--sans); font-size: .95rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  box-shadow: 0 2px 10px rgba(16,32,32,.35);
}
.tour-spot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--accent); animation: tour-ping 2.1s ease-out infinite;
}
.tour-spot:hover, .tour-spot:focus-visible { background: var(--accent-deep); }
/* display:grid above beats the browser's own [hidden]{display:none}, so the
   marker from the previous step stayed on screen at the end of a route, over a
   picture it had nothing to do with. Said here rather than in the script,
   because the script setting .hidden is the correct thing for it to do. */
.tour-spot[hidden] { display: none; }
@keyframes tour-ping {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.tour-step {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem;
  align-items: center; padding: 1.25rem 1.15rem;
}
.tour-title { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem); margin: 0 0 .45rem; line-height: 1.25; }
.tour-copy { margin: 0; max-width: 46rem; line-height: 1.6; color: var(--ink-3); }
.tour-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.tour-dots { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0 1.15rem 1.15rem; }
.tour-dots li { flex: 1 1 0; display: flex; }
.tour-dot {
  flex: 1 1 auto; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: var(--line); cursor: pointer;
}
.tour-dot::after { content: ""; display: block; height: 14px; margin-top: -5px; } /* a real target on a thin bar */
.tour-dot.is-past { background: var(--accent-line); }
.tour-dot.is-now  { background: var(--accent); }
.tour-dot:hover   { background: var(--accent-deep); }

.tour-foot { margin: 1rem 0 0; }

/* --- The list, which is what the page is without JavaScript --------------- */
.tour-static-route { margin-bottom: 3rem; }
.tour-static-route h3 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 .4rem; }
.tour-static-step {
  margin: 1.6rem 0 0; padding: 1rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
}
.tour-static-step img { display: block; width: 100%; height: auto; border-radius: 4px; }
.tour-static-step figcaption { margin-top: .8rem; font-size: .95rem; line-height: 1.55; }
.tour-static-step figcaption strong { display: block; margin-bottom: .25rem; }
.tour-static-step figcaption span { color: var(--grey); }

@media (max-width: 860px) {
  .tour-step { grid-template-columns: 1fr; }
  .tour-actions { justify-content: flex-start; }
}
/*
   ON A PHONE A WIDE SCREENSHOT IS SCROLLED, NOT SHRUNK.
   A 1440x240 capture squeezed into a 358px column is a grey smear, and this
   site already says so about its own screenshots: a whole accounting screen
   cannot be made legible at the width of a column at any capture size. So
   below 700px the picture is sized to the height of the stage and the stage
   scrolls sideways, which keeps the text readable and lets a thumb move
   across it. A picture that is taller than it is wide fits anyway and never
   scrolls. The script scrolls the marker into view after each step, because
   a control that starts off screen may as well not be there.
*/
@media (max-width: 700px) {
  .tour-stage { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; scroll-behavior: smooth; }
  /* max-height stays and only max-width is lifted. That one asymmetry is the
     whole behaviour: a picture still may not be taller than the stage, so a
     tall one shrinks to fit as before, and a wide one is no longer allowed to
     be squeezed edge to edge, so it keeps a readable size and overflows into
     the scroll. Setting max-height:none here instead left every picture at its
     natural size, including the ones that fit. */
  .tour-shot { max-width: none; }
  .tour-img { max-width: none; }
  .tour-zoom { display: none; }  /* panning does this job better here */
}
@media (max-width: 560px) {
  .tour-stage { padding: 12px; }
  .tour-spot { width: 36px; height: 36px; }
  .tour-bar, .tour-step, .tour-dots { padding-left: .9rem; padding-right: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-shot { transition: none; }
  .tour-spot::before { animation: none; opacity: .55; }
}

/* --- The clause index on the licence page --------------------------------
   Twenty-two clauses is too many to scroll past looking for the one about
   liability, and too few to deserve a sidebar. Two columns on anything wider
   than a phone, one below that, and the numbers are the document's own. */
.legal-toc { margin: 2.5rem 0; padding: 1.5rem 1.75rem; background: var(--paper-2, #f7f6f3); border: 1px solid var(--line); border-radius: 4px; }
.legal-toc h2 { margin: 0 0 .9rem; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.legal-toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2.5rem; }
.legal-toc li { margin: 0 0 .45rem; break-inside: avoid; font-size: .9375rem; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus { text-decoration: underline; }
@media (max-width: 640px) { .legal-toc { padding: 1.25rem; } .legal-toc ol { columns: 1; } }

/* A clause jumped to from the index should not sit under the sticky header. */
.prose h2[id] { scroll-margin-top: 5rem; }

/* --- The film in the hero ------------------------------------------------
   Same slot the screenshot had: full measure of the page, 16:9 reserved
   before anything loads so the hero does not jump when the poster arrives.
   The button sits over the bottom left corner rather than the middle,
   because a play triangle in the centre of a running film is a thing to
   click by accident. */
.hero-film-wrap { margin: 0; }
/* The button anchors to the FILM, not to the figure. Anchored to the figure it
   sat over the caption line underneath, because the figure is taller than the
   video by exactly the height of the words. */
.hero-film-stage { position: relative; line-height: 0; }
.hero-film {
  display: block; width: 100%; height: auto; aspect-ratio: 1560 / 878;
  background: var(--ink);
}
.hero-film-btn {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5em 1.05em; border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px; background: rgba(12,16,22,.68); color: #fff;
  font: inherit; font-size: .8125rem; letter-spacing: .01em;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background .16s ease, border-color .16s ease;
}
.hero-film-btn:hover, .hero-film-btn:focus-visible { background: rgba(12,16,22,.86); border-color: rgba(255,255,255,.6); }
.hero-film-btn[hidden] { display: none; }
/* The caption is the screenshots' caption: same element, same rules, because
   the film now sits in the same window they do. It stays ONE line, which is
   what that band is built for; the link to the full film goes underneath the
   window rather than inside it, where a second line was overflowing the
   rounded corner. */
.hero-film-wrap figcaption { margin: 0; }
.hero-film-more { margin: .85rem 0 0; font-size: .8125rem; }
.hero-film-more a { color: #fff; }
@media (max-width: 700px) {
  .hero-film-btn { left: 10px; bottom: 10px; font-size: .78rem; }
}

/* --- Ask the manual ------------------------------------------------------
   The search box is the page, so it gets the width and the weight. Results
   are quiet: a heading, the paragraph that answers it, and where to find it
   in the book. */
/* The manual search where somebody stuck actually lands, at the top of the
   support page. Given a box of its own so it reads as the first thing to try
   rather than a form tucked under prose. */
.support-ask {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass, #b8860b);
  border-radius: 8px;
  padding: 1.8rem 2rem 1.4rem;
  background: #fff;
}
.support-ask h2 { margin-top: 0; }
.support-ask p { max-width: 60ch; }
.support-ask .answers-form { margin-bottom: 0; }
@media (max-width: 640px) {
  .support-ask { padding: 1.4rem 1.2rem 1rem; }
}

/* A heading that introduces a row of cards rather than sitting inside one. */
.section-lead { margin: 0 0 1.6rem; }

.answers-form { margin: 0 0 2.6rem; }
.answers-form label { display: block; font-weight: 600; margin-bottom: .55rem; }
.answers-row { display: flex; gap: .7rem; align-items: stretch; }
.answers-row input[type="search"] {
  flex: 1 1 auto; min-width: 0; font-size: 1.05rem; padding: .85em 1em;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink);
}
.answers-row input[type="search"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.answers-row .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 620px) { .answers-row { flex-direction: column; } .answers-row .btn { width: 100%; } }

.answers-count { font-size: 1.05rem; letter-spacing: .01em; margin: 0 0 1.4rem; color: var(--grey); font-weight: 600; }
.answer { padding: 1.4rem 0; border-top: 1px solid var(--line); }
.answer:last-of-type { border-bottom: 1px solid var(--line); }
.answer h3 { margin: 0 0 .5rem; font-size: 1.12rem; }
.answer-no { display: inline-block; min-width: 3.1em; color: var(--grey-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.answer p { margin: 0 0 .5rem; }
.answer-where { font-size: .875rem; color: var(--grey); }
.answers-next { margin-top: 2rem; }
.answer-chapter { margin: -.25rem 0 .6rem 3.1em; font-size: .85rem; color: var(--grey-2); letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 620px) { .answer-chapter { margin-left: 0; } }

/* --- Admin: filter row on the manual searches screen --------------------- */
.admin-filters { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0 0 18px; font-size: .9rem; }
.admin-filters a { text-decoration: none; color: var(--grey); border-bottom: 2px solid transparent; padding-bottom: .3rem; }
.admin-filters a:hover { color: var(--ink); }
.admin-filters a.is-current { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

/* Finding a record again. One box, above the filters, because a reference
   typed in is a thing somebody wants regardless of which filter is on. */
/* The words somebody typed, inside a search result. Not a yellow highlighter:
   a result is scanned in about a second and the eye needs a nudge, not a
   shout. */
.answer mark {
  background: rgba(184, 134, 11, .16);
  color: inherit;
  padding: 0 .08em;
  border-radius: 2px;
  font-weight: 600;
}

.admin-search { display: flex; gap: .6rem; align-items: center; margin: 0 0 18px; flex-wrap: wrap; }
.admin-search input[type="search"] {
  flex: 1 1 26rem; min-width: 14rem; padding: .55rem .8rem;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  font: inherit; font-size: .92rem; color: var(--ink);
}
.admin-search input[type="search"]:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.admin-search input[type="search"]::placeholder { color: var(--grey); }
@media (max-width: 640px) {
  .admin-search input[type="search"] { flex: 1 1 100%; }
}

/* --- Admin: answering an enquiry ---------------------------------------- */
.support-head { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; }
.standing { font-size: .8125rem; font-weight: 600; padding: .3em .8em; border-radius: 999px; white-space: nowrap; }
.standing-answered { background: #e7f1ec; color: #17553c; }
.standing-due      { background: #eef1f4; color: #3f4753; }
.standing-soon     { background: #fbf1dd; color: #7a5312; }
.standing-late     { background: #fbe6e4; color: #96261c; }

.support-assign { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.4rem; }
.support-assign label { font-weight: 600; font-size: .9rem; }
.support-assign select { padding: .45em .7em; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }

.thread { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 1px solid var(--line); }
.thread-item { padding: 1rem 0 1rem 1rem; border-bottom: 1px solid var(--line); border-left: 3px solid var(--line); }
.thread-reply { border-left-color: var(--accent, #17553c); }
.thread-note  { border-left-color: #c9a227; background: #fcfbf6; }
.thread-meta  { margin: 0 0 .45rem; font-size: .8125rem; color: var(--grey); }
.thread-body  { font-size: .95rem; }
.thread-failed { display: block; margin-top: .3rem; color: #96261c; font-weight: 600; }

.support-reply, .support-note { margin: 0 0 1.4rem; }
.support-reply label, .support-note label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .9rem; }
.support-reply textarea, .support-note textarea {
  width: 100%; padding: .7em .8em; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; font-size: .95rem; background: #fff; resize: vertical;
}
.linkish { background: none; border: 0; padding: 0; font: inherit; font-size: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linkish:hover { color: var(--accent, #17553c); }
.thread-customer { border-left-color: #6b7280; background: #fafafa; }
.standing-waiting { background: #eef1f4; color: #3f4753; }
.nav-count { display: inline-block; min-width: 1.5em; padding: 0 .4em; margin-left: .3em; border-radius: 999px; background: #c9a227; color: #1b1c1e; font-size: .72rem; font-weight: 700; text-align: center; }

/* ==========================================================================
   INTERACTIVE PIECES  (append to the end of site.css)
   Marketing thread, October 2026, for Murgese 2.9.37c.

   Shared by every file in /assets/js/mx-*.js. Each piece is an element with
   data-mx="<name>" holding its own plain content; the script for that piece
   builds the working version inside it and only then shows it, so a reader
   without JavaScript keeps the plain content and nothing jumps.
   Every colour is one of the site's own tokens. Nothing is loaded from
   anywhere else, and nothing here needs a change to the CSP.
   ========================================================================== */

.mx { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: clamp(18px, 2.4vw, 30px); margin: 0 0 2rem; }
.section-alt .mx { background: #fff; }
.mx *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx[data-mx-ready="0"] .mx-live { display: none; }
.mx-live[hidden], .mx [hidden] { display: none !important; }
.mx-static[hidden] { display: none !important; }
.mx h3.mx-title { font-family: var(--display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); line-height: 1.2; margin: 0 0 .4rem; }
.mx .mx-sub { color: var(--grey); margin: 0 0 1.2rem; max-width: 46rem; font-size: .98rem; }
.mx .eyebrow { margin-bottom: .6rem; }
.mx-note { font-size: .84rem; color: var(--grey); line-height: 1.55; margin: .8rem 0 0; }
.mx-note strong { color: var(--ink-2); }

/* Segmented choices: tabs, providers, statuses. Buttons, so they can be
   reached and pressed from the keyboard; aria-pressed says which is on. */
.mx-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; padding: 0; list-style: none; }
.mx-seg button {
  font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.2; color: var(--ink-3);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  padding: .5em 1em; cursor: pointer; min-height: 38px; text-align: left;
}
.mx-seg button:hover { border-color: var(--accent-line); color: var(--accent-deep); }
.mx-seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.mx-seg button[disabled] { opacity: .55; cursor: not-allowed; }
.mx-seg-label { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin: 0 0 .45rem; }

.mx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.mx-grid-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 900px) { .mx-grid, .mx-grid-wide { grid-template-columns: minmax(0, 1fr); } }

.mx-panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 16px; min-width: 0; }
.mx-panel-alt { background: var(--paper-2); }
.mx-panel h4 { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin: 0 0 .7rem; }

/* Form controls: the site's own .field look, sized for a calculator. */
.mx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.mx-fields .mx-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .mx-fields { grid-template-columns: minmax(0, 1fr); } }
.mx-f { display: flex; flex-direction: column; min-width: 0; }
.mx-f > span, .mx-f > label { font-size: .86rem; font-weight: 600; color: var(--ink); margin: 0 0 .35rem; }
.mx-f small { display: block; font-size: .8rem; color: var(--grey); font-weight: 400; margin-top: .3rem; line-height: 1.45; }
.mx input[type=text], .mx input[type=number], .mx input[type=date], .mx select, .mx textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink-2);
  padding: .62rem .75rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); line-height: 1.45; min-height: 44px;
}
.mx input:focus, .mx select:focus, .mx textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.07); }
.mx textarea { min-height: 96px; resize: vertical; }
.mx-money { position: relative; }
.mx-money::before { content: "\00a3"; position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--grey); pointer-events: none; }
.mx .mx-money input[type=text] { padding-left: 1.6rem; }
.mx-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; line-height: 1.45; cursor: pointer; padding: .3rem 0; }
.mx-check input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.mx-radios { display: flex; flex-direction: column; gap: 2px; }

/* Results */
.mx-out { margin-top: 1rem; }
.mx-verdict { border-radius: var(--r); padding: 14px 16px; border: 1px solid var(--line); background: var(--paper-2); margin: 0 0 12px; }
.mx-verdict strong { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: .2rem; }
.mx-verdict p { margin: 0; font-size: .94rem; }
.mx-verdict.is-ok { background: var(--ok-bg); border-color: #c4dccd; }
.mx-verdict.is-ok strong { color: var(--ok); }
.mx-verdict.is-warn { background: var(--warn-bg); border-color: #ead8b0; }
.mx-verdict.is-warn strong { color: var(--warn); }
.mx-verdict.is-bad { background: var(--bad-bg); border-color: #ecc9c7; }
.mx-verdict.is-bad strong { color: var(--bad); }
.mx-sum { width: 100%; border-collapse: collapse; font-size: .94rem; font-variant-numeric: tabular-nums; }
.mx-sum th, .mx-sum td { padding: .45rem 0; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.mx-sum td.n { text-align: right; white-space: nowrap; padding-left: 1rem; }
.mx-sum th { font-weight: 400; color: var(--ink-3); }
.mx-sum tr.mx-strong th, .mx-sum tr.mx-strong td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--ink-4); border-bottom: 0; }
.mx-sum .mx-how { display: block; font-size: .8rem; color: var(--grey); margin-top: .1rem; }
.mx-list { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.mx-list li { margin: .25rem 0; }

/* Marks used by the checker, the explorer and the reader demo */
.mx-mark { border-radius: 3px; padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mx-mark-ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 -2px 0 #9cc7ad; }
.mx-mark-bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 -2px 0 #dc9a96; }
.mx-mark-warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 -2px 0 #dcc28a; }
.mx-mark-info { background: var(--accent-tint); color: var(--accent-deep); box-shadow: inset 0 -2px 0 var(--accent-line); }
.mx-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: .18em .65em; vertical-align: .12em; border: 1px solid currentColor; }
.mx-tag-note { color: #1f5f8b; }
.mx-tag-check { color: var(--warn); }
.mx-tag-concern { color: var(--bad); }
.mx-tag-general { color: var(--grey); border-color: var(--line); }
.mx-flag { font-size: .86rem; margin: .35rem 0 0; }
.mx-flag-bad { color: var(--bad); }
.mx-flag-warn { color: var(--warn); }
.mx-flag-ok { color: var(--ok); }

/* Code, for "the request, exactly" */
.mx-code { font-family: var(--mono); font-size: .8rem; line-height: 1.55; background: var(--ink-2); color: #dfe3e6; border-radius: var(--r); padding: 14px 16px; margin: 0; max-height: 34rem; overflow: auto; white-space: pre-wrap; word-break: break-word; tab-size: 2; }
.mx-code .k { color: #9fd3cf; }
.mx-code .s { color: #f1e3b5; }
.mx-code .c { color: #8b929c; font-style: italic; }
.mx-code .hl { background: rgba(159, 211, 207, .18); border-radius: 2px; }
.mx-code:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* The checker */
.mx-figs { max-height: 26rem; overflow: auto; border-top: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.mx-figs table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mx-figs td { padding: .32rem .2rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.mx-figs td.n { text-align: right; padding-left: .8rem; }
.mx-figs td.n span { display: block; white-space: nowrap; }
.mx-figs td.n small { color: var(--grey); font-size: .78rem; }
.mx-figs tr.is-hit td { background: var(--ok-bg); }
.mx-figs tr.is-zero td { color: var(--grey-2); }
.mx-point { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 0 0 10px; }
.mx-point h5 { font-family: var(--sans); font-size: .98rem; margin: 0 0 .3rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mx-point p { margin: 0; font-size: .94rem; }
.mx-try { margin-top: 1.2rem; }
.mx-try-out { margin-top: .8rem; font-size: .98rem; line-height: 1.7; }
.mx-try-out .mx-said { padding: 10px 12px; border-radius: var(--r); background: var(--paper-2); border: 1px solid var(--line); }
.mx-finds { list-style: none; padding: 0; margin: .7rem 0 0; font-size: .9rem; }
.mx-finds li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .3rem; padding: .3rem 0; border-bottom: 1px solid var(--line-2); }
.mx-finds li::before { font-weight: 700; }
.mx-finds li.ok::before { content: "\2713"; color: var(--ok); }
.mx-finds li.bad::before { content: "\2715"; color: var(--bad); }
.mx-finds li.warn::before { content: "!"; color: var(--warn); }
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0 0; }
.mx-chips button { font: inherit; font-size: .8rem; color: var(--ink-3); background: #fff; border: 1px dashed var(--grey-3); border-radius: 999px; padding: .35em .85em; cursor: pointer; min-height: 32px; }
.mx-chips button:hover { border-color: var(--accent); color: var(--accent-deep); border-style: solid; }

/* The "what is sent" explorer */
.mx-goes { list-style: none; margin: 0; padding: 0; }
.mx-goes li { padding: .55rem 0 .55rem 1.6rem; border-bottom: 1px solid var(--line-2); position: relative; font-size: .94rem; }
.mx-goes li::before { position: absolute; left: 0; top: .55rem; font-weight: 700; }
.mx-goes.is-sent li::before { content: "\2192"; color: var(--accent); }
.mx-goes.is-kept li::before { content: "\2715"; color: var(--grey); }
.mx-goes li strong { color: var(--ink); }
.mx-goes li details { margin-top: .35rem; }
.mx-goes li summary { cursor: pointer; font-size: .84rem; color: var(--accent-deep); font-weight: 600; }
.mx-goes li .mx-code { margin-top: .4rem; max-height: 18rem; }
.mx-dest { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; padding: 12px 14px; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--r); margin: 0 0 1rem; font-size: .92rem; }
.mx-dest code { background: #fff; word-break: break-all; }
.mx-held { border: 1px dashed var(--warn); background: var(--warn-bg); color: var(--warn); border-radius: var(--r); padding: 10px 14px; font-size: .9rem; margin: 0 0 1rem; }

/* The reader demo: a page with boxes on it */
.mx-page { position: relative; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.mx-page img { width: 100%; height: auto; display: block; }
.mx-box { position: absolute; border: 2px solid var(--accent); background: rgba(19, 111, 109, .10); border-radius: 3px; pointer-events: none; transition: opacity .2s ease; }
.mx-box.is-not { border-style: dashed; border-color: var(--bad); background: rgba(150, 35, 31, .07); }
.mx-box.is-dim { opacity: .25; }
.mx-box-n { position: absolute; top: -11px; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mx-box.is-not .mx-box-n { background: var(--bad); }
@media (min-width: 901px) { .mx-read-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .mx-read-page { position: sticky; top: 96px; } }
.mx-zoom { position: relative; margin: 2px 0 10px 2.1rem; border: 1px solid var(--line); border-radius: var(--r); background-color: #fff; background-repeat: no-repeat; overflow: hidden; box-shadow: var(--shadow-sm); }
.mx-zoom-box { position: absolute; border: 2px solid var(--accent); border-radius: 3px; background: rgba(19, 111, 109, .08); }
.mx-zoom-box.is-not { border-style: dashed; border-color: var(--bad); background: rgba(150, 35, 31, .06); }
.mx-reads { list-style: none; margin: 0; padding: 0; counter-reset: rd; }
.mx-reads li { border-bottom: 1px solid var(--line-2); }
.mx-reads button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .2rem .5rem; width: 100%; padding: .55rem .3rem; cursor: pointer; border-radius: 4px; }
.mx-reads button:hover, .mx-reads button[aria-pressed="true"] { background: var(--accent-tint); }
.mx-reads button:focus-visible { outline: 2px solid var(--accent); }
.mx-reads .n { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: .15rem; }
.mx-reads .is-not .n { background: var(--bad); }
.mx-reads .lab { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); font-weight: 700; }
.mx-reads .val { font-weight: 600; color: var(--ink); word-break: break-word; }
.mx-reads .why { grid-column: 2; font-size: .86rem; color: var(--ink-3); line-height: 1.5; }
.mx-reads .is-not .val { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; }
.mx-said-list { margin: .6rem 0 0; padding: 0; list-style: none; font-size: .86rem; }
.mx-said-list li { padding: .45rem .7rem; background: var(--warn-bg); border-left: 3px solid #dcc28a; margin: 0 0 6px; border-radius: 0 4px 4px 0; color: var(--ink-3); }

/* The invoice demo */
.mx-inv { --inv-accent: #17807e; --inv-ink: #0f172a; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(14px, 3vw, 30px); font-size: .82rem; color: var(--inv-ink); font-family: var(--sans); min-width: 0; }
.mx-inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 3px solid var(--inv-accent); padding-bottom: 12px; margin-bottom: 12px; }
.mx-inv-head.is-centre { flex-direction: column; align-items: center; text-align: center; }
.mx-inv-head.is-right { flex-direction: row-reverse; }
.mx-inv-logo { width: 46px; height: 46px; border-radius: 10px; background: var(--inv-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 1.3rem; flex: 0 0 auto; }
.mx-inv-co { font-size: .78rem; line-height: 1.45; color: #475569; }
.mx-inv-co strong { display: block; color: var(--inv-ink); font-size: .95rem; }
.mx-inv-title { font-family: var(--display); font-size: 1.35rem; color: var(--inv-heading, var(--inv-accent)); margin: 0 0 6px; }
.mx-inv-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .78rem; margin-bottom: 12px; }
.mx-inv-meta dt { color: var(--inv-heading, var(--inv-accent)); font-weight: 600; }
.mx-inv-meta dd { margin: 0; }
.mx-inv-table-wrap { overflow-x: auto; }
.mx-inv table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mx-inv th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--inv-heading, var(--inv-accent)); border-bottom: 1px solid #cbd5e1; padding: 6px 4px; white-space: nowrap; }
.mx-inv td { padding: 6px 4px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
.mx-inv .r { text-align: right; white-space: nowrap; }
.mx-inv .is-forced { background: var(--warn-bg); }
.mx-inv-tot { margin: 10px 0 0 auto; width: min(260px, 100%); font-variant-numeric: tabular-nums; }
.mx-inv-tot div { display: flex; justify-content: space-between; padding: 3px 0; }
.mx-inv-tot div:last-child { font-weight: 700; border-top: 2px solid var(--inv-accent); margin-top: 3px; padding-top: 6px; }
.mx-inv-lines { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mx-inv-lines th { text-align: left; font-size: .74rem; color: var(--grey); font-weight: 600; padding: 0 4px 4px; }
.mx-inv-lines td { padding: 3px 4px; }
.mx-inv-lines input { min-height: 38px !important; padding: .35rem .5rem !important; font-size: .9rem !important; }
.mx-swatch { display: flex; align-items: center; gap: .6rem; }
.mx-swatch input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; }
.mx-swatch code { font-size: .8rem; }

/* Calculator layout */
.mx-calc .mx-grid { align-items: stretch; }
.mx-big { font-family: var(--display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.1; color: var(--ink); margin: .1rem 0 .2rem; font-variant-numeric: tabular-nums; }
.mx-big-sub { color: var(--grey); font-size: .9rem; margin: 0 0 .9rem; }
.mx-src { font-size: .78rem; color: var(--grey-2); margin: .8rem 0 0; }

/* Motion: none for those who ask for none. */
@media (prefers-reduced-motion: reduce) { .mx-box { transition: none; } }

/* Print: the plain content, without controls. */
@media print { .mx-seg, .mx-chips, .mx-try { display: none; } .mx { box-shadow: none; } }


/* --- Murgese Construction, 4 October 2026 -----------------------------------
   The product page at /construction and the site app's privacy notice at
   /privacy/site-app. Appended to site.css, as interactive.css was.

   Site tokens throughout, with one exception: the band that carries the phone
   pictures uses the product's own look (ink, the light grey ground and its
   faint blueprint grid), because the brief gives that look for product
   visuals and the pictures were taken in it. The hi-vis lime appears in the
   pictures themselves and nowhere in the site's own text, so the site's
   brand is untouched. */

/* The site app's notice: its closing lines, set off as the original sets
   them off, under a rule. */
.app-notice-foot { margin-top: 2.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .94rem; }
.app-notice-foot p { margin: 0 0 .7rem; }
.app-notice-foot p:last-child { margin-bottom: 0; }

/* --- /construction ---------------------------------------------------------- */

/* Where it stands, said once at the top, beside the one thing a reader can do
   about it. */
.cn-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.3rem 1.6rem; border: 1px solid var(--line); border-left: 3px solid var(--ink);
  border-radius: 0 var(--r) var(--r) 0; background: var(--paper-2);
}
.cn-status > div { flex: 1 1 26rem; min-width: 0; }
.cn-status-tag { margin: 0 0 .25rem; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.cn-status-text { margin: 0; color: var(--ink-3); }

/* The page's parts, as a row of plain links. */
.cn-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.cn-jump a {
  display: inline-block; padding: .38rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .86rem; color: var(--ink-3); text-decoration: none; background: var(--paper);
}
.cn-jump a:hover { border-color: var(--accent-line); background: var(--accent-tint); color: var(--accent); }
.cn-jump a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Anchored parts land below the sticky header rather than under it. */
#different, #phone, #money, #subcontractors, #winning, #project, #safety, #office, #interest { scroll-margin-top: 96px; }

/* The board the phone pictures sit on: the product's own ground, a light
   grey with a faint blueprint grid, drawn here so it costs no request. */
.cn-board {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) 0 clamp(1.8rem, 1.2rem + 2vw, 3rem);
  background-color: #e9ecef;
  background-image:
    linear-gradient(rgba(16,21,30,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,21,30,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  border-top: 1px solid #d5dade; border-bottom: 1px solid #d5dade;
}
.section-alt.cn-site { padding-bottom: 0; }
.cn-board-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.cn-board-note { margin: 0; font-size: .86rem; color: #3d4652; }
.cn-strip-nav[hidden] { display: none; }
.cn-strip-nav { display: flex; gap: .5rem; flex: none; }
.cn-strip-btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid #10151e; background: #fff; color: #10151e;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cn-strip-btn:hover:not(:disabled) { background: #10151e; color: #fff; }
.cn-strip-btn:disabled { opacity: .35; cursor: default; }
.cn-strip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The pictures in a row that scrolls on its own, never the page. */
.cn-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 26px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 4px 4px 14px; margin: 0 -4px; scroll-padding-inline: 4px;
  scrollbar-width: thin; scrollbar-color: #9aa3ad transparent;
}
.cn-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r); }
.cn-phone { scroll-snap-align: start; min-width: 0; }
.cn-phone .shot img { border: 6px solid #10151e; border-radius: 28px; box-shadow: 0 2px 6px rgba(16,21,30,.08), 0 18px 34px -16px rgba(16,21,30,.35); background: #10151e; }
.cn-phone .shot-open { border-radius: 28px; }
.cn-phone .shot-hint { right: 14px; bottom: 16px; }
.cn-phone figcaption { margin-top: .8rem; font-size: .84rem; line-height: 1.45; color: #2b333d; }
@media (max-width: 760px) {
  .cn-strip { grid-auto-columns: 62vw; gap: 18px; }
  .cn-board-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) { .cn-strip { scroll-behavior: smooth; } }

/* Register your interest: the contact form's own fields, at reading width. */
.cn-form { margin-top: 1.6rem; max-width: 40rem; }

/* --- Murgese Construction: the product's own look, 4 October 2026 -----------
   Syed asked twice for these pages to be beautiful rather than another white
   accounting page, and to look like the product. So this page alone is built
   in the product's own two colours, read off its own screens: the ink
   #10151E it draws on and the hi-vis lime #D6F545 it marks with. Nothing
   below leaves /construction, and no site token is redefined, so the rest of
   the site is untouched.

   The lime is a marker, not a surface: hairlines, numerals, the status tag
   and one button, always on ink, never as text on paper. On ink it is far
   past the contrast a reader needs; on white it would be unreadable, so it
   never goes there. */

.cn {
  --cn-ink: #10151e;
  --cn-ink-2: #1a2130;
  --cn-lime: #d6f545;
  --cn-pale: #aab4c2;
  --cn-rule: rgba(214, 245, 69, .9);
  --cn-grid: rgba(255, 255, 255, .055);
}

/* The ground the dark bands are drawn on: the product's blueprint grid, in
   CSS so it costs no request and scales with the band. */
.cn-dark {
  position: relative;
  background-color: var(--cn-ink);
  background-image:
    linear-gradient(var(--cn-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cn-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #fff;
}
.cn-dark .eyebrow { color: var(--cn-lime); }
.cn-dark h2, .cn-dark h3 { color: #fff; }
.cn-dark p { color: var(--cn-pale); }

/* ---- The opening band -------------------------------------------------- */

.cn-hero { padding: clamp(1.6rem, 1rem + 2vw, 2.4rem) 0 clamp(2.6rem, 1.8rem + 3vw, 4.4rem); }
.cn-hero .crumbs { margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.cn-hero .crumbs a { color: var(--cn-pale); }
.cn-hero .crumbs a:hover { color: var(--cn-lime); }
.cn-hero .crumbs span { color: #6c7686; }

.cn-hero-eyebrow {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1.1rem; font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cn-lime);
}
.cn-hero-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--cn-rule); opacity: .45; max-width: 7rem; }

.cn-hero h1 {
  margin: 0; color: #fff;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.8rem); line-height: 1.06; letter-spacing: -.02em;
  max-width: 24ch;
}
.cn-hero-sub {
  margin: 1.3rem 0 0; max-width: 46rem;
  font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); line-height: 1.6; color: var(--cn-pale);
}

/* Where it stands, and the one thing a reader can do about it, on the same
   line as the words that say it is not for sale. */
.cn-hero-act {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem;
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  padding-top: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.cn-hero-act > div { flex: 1 1 24rem; min-width: 0; }
.cn-dark p.cn-tag {
  display: inline-block; margin: 0 0 .45rem; padding: .22em .7em;
  background: var(--cn-lime); color: var(--cn-ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  border-radius: 3px;
}
.cn-dark .cn-hero-act p.cn-status-text { margin: 0; color: #cdd4dd; font-size: .98rem; }
.btn.cn-btn {
  background: var(--cn-lime); border-color: var(--cn-lime); color: var(--cn-ink); font-weight: 700;
}
.btn.cn-btn:hover { background: #e3ff52; border-color: #e3ff52; color: var(--cn-ink); }
.btn.cn-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The parts of the page, as pills along the foot of the band. */
.cn-hero .cn-jump { margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.cn-hero .cn-jump a {
  background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: #e4e8ee;
}
.cn-hero .cn-jump a:hover { background: var(--cn-lime); border-color: var(--cn-lime); color: var(--cn-ink); }
.cn-hero .cn-jump a:focus-visible { outline: 2px solid var(--cn-lime); outline-offset: 2px; }

/* ---- The five facts, numbered, on the ink ------------------------------ */

.cn-facts { padding: clamp(2.6rem, 1.8rem + 3vw, 4.4rem) 0; }
.cn-facts .sblock { display: block; }
.cn-facts .sblock-head { margin-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.cn-facts .sblock-head h2 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.1; }
.cn-facts .sblock-body { max-width: none; }

.cn-facts .feature-list { counter-reset: cnfact; display: grid; gap: 1.1rem; }
@media (min-width: 880px) { .cn-facts .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-facts .feature-list li {
  counter-increment: cnfact;
  display: block; margin: 0; padding: 1.5rem 1.5rem 1.7rem;
  border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r);
  background: var(--cn-ink-2);
}
.cn-facts .feature-list li:first-child { border-top: 1px solid rgba(255, 255, 255, .13); }
.cn-facts .feature-list li::before {
  content: counter(cnfact, decimal-leading-zero);
  display: block; margin-bottom: .9rem;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; color: var(--cn-lime);
}
.cn-facts .feature-list .term {
  display: block; margin-bottom: .55rem; padding-bottom: .55rem;
  color: #fff; font-size: 1.04rem; line-height: 1.25;
  border-bottom: 2px solid var(--cn-rule); width: fit-content; max-width: 100%;
}
.cn-facts .feature-list .desc { display: block; color: var(--cn-pale); font-size: .93rem; line-height: 1.6; }

/* ---- The six groups of features, as cards ------------------------------- */

.cn-sec .sblock-body { max-width: none; }
.cn-sec .feature-list { display: grid; gap: 1.1rem; }
@media (min-width: 820px) { .cn-sec .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-sec .feature-list li {
  display: block; margin: 0; padding: 1.3rem 1.4rem 1.45rem;
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
}
.cn-sec .feature-list li:first-child { border-top: 1px solid var(--line); }
.cn-sec .feature-list .term {
  display: block; margin-bottom: .5rem; padding-bottom: .5rem;
  font-size: 1rem; border-bottom: 2px solid var(--cn-ink); width: fit-content; max-width: 100%;
}
.cn-sec .feature-list .desc { display: block; line-height: 1.6; }
.section-alt .cn-sec .feature-list li { background: #fff; }

/* The site app's three rows are short, so they take a row of their own. */
@media (min-width: 900px) { .cn-sec-3 .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The group headings sit above their cards rather than beside them, so a
   card grid has the full measure to use. */
@media (min-width: 981px) {
  .cn-sec .sblock { grid-template-columns: minmax(0, 1fr); }
  .cn-sec .sblock-head { margin-bottom: 1.4rem; }
}

/* ---- Register your interest -------------------------------------------- */

.cn-interest { padding: clamp(2.8rem, 2rem + 3vw, 4.6rem) 0; }
/* The register page: the form continues the hero's band, so no gap at its top. */
.cn-interest-bare { padding-top: 0; display: flow-root; } /* flow-root: the form's top margin collapsed through the zero padding and showed white between the two dark bands */
.cn-hero-page:has(+ .cn-interest-bare) { padding-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.cn-interest .sblock { display: block; }
.cn-interest .sblock-head h2 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.1; margin-bottom: .9rem; }
.cn-interest .sblock-body { max-width: 44rem; }
.cn-interest .cn-form {
  margin-top: 1.8rem; max-width: 44rem; padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  background: #fff; border-radius: var(--r-lg); color: var(--ink);
}
.cn-interest .cn-form label { color: var(--ink); }
.cn-interest .cn-form .hint { color: var(--grey); }
.cn-interest .cn-form .btn-primary { background: var(--cn-ink); border-color: var(--cn-ink); }
.cn-interest .cn-form .btn-primary:hover { background: #000; border-color: #000; }

/* ---- The phone band, now inside the dark run ---------------------------- */

.cn-site { padding-bottom: 0; }
.cn-site .cn-board { border-top-color: #cfd5da; }

/* A band of cards on the ink: Safety and quality takes one, so the long run
   of feature sections has a dark beat in the middle rather than six white
   sections in a row. The cards are the facts band's, without its numerals. */
.cn-band { padding: clamp(2.6rem, 1.8rem + 3vw, 4.4rem) 0; }
.cn-band .sblock-head h2 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.1; }
.cn-dark.cn-sec .feature-list li {
  border-color: rgba(255, 255, 255, .13);
  background: var(--cn-ink-2);
}
.cn-dark.cn-sec .feature-list .term { color: #fff; border-bottom-color: var(--cn-rule); }
.cn-dark.cn-sec .feature-list .desc { color: var(--cn-pale); }

/* --- The Construction section's own pages ---------------------------------- */

/* A section page's band is shorter than the landing page's: no status, no
   buttons, just where you are and what the page is about. */
.cn-hero-page { padding-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.cn-hero-page h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); max-width: 20ch; }
.cn-hero-page .crumbs { margin-bottom: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }

/* The office screens, full width on the ink so the product's own ground
   carries them rather than a white page. */
.cn-gallery { padding: clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem) 0; }
.cn-figure { margin: 0 0 clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.cn-figure:last-of-type { margin-bottom: 1.4rem; }
.cn-figure picture { display: block; }
.cn-figure img {
  display: block; width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .75);
  background: var(--cn-ink-2);
}
.cn-figure figcaption {
  margin-top: .9rem; font-size: .9rem; line-height: 1.55; color: var(--cn-pale); max-width: 54rem;
}
.cn-figure-phone { max-width: 320px; }
.cn-figure-phone img { border-radius: 24px; }
/* A gallery of nothing but phone pictures: three across. It was keyed on
   :has(.cn-figure-phone), which turned any gallery with a single phone picture
   in it into three columns and shrank its office screens to a third. */
@media (min-width: 900px) {
  .cn-gallery-phones .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
  .cn-gallery-phones .cn-figure-phone { max-width: none; margin-bottom: 0; }
  .cn-gallery-phones .cn-gallery-note { grid-column: 1 / -1; }
}
/* Phone pictures among office screens. Side by side at a phone's own size,
   as many as fit; one on its own stands beside its caption, which is set a
   little larger because it has the room. */
.cn-phones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 300px));
  gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); align-items: start;
  margin: 0 0 clamp(1.8rem, 1.2rem + 2vw, 3rem);
}
.cn-phones .cn-figure-phone { margin: 0; max-width: 300px; }
@media (min-width: 900px) {
  .cn-phones-1 { display: block; }
  .cn-phones-1 .cn-figure-phone {
    display: grid; grid-template-columns: 300px minmax(0, 26rem);
    gap: clamp(1.8rem, 1rem + 2vw, 3rem); align-items: center; max-width: none;
  }
  .cn-phones-1 .cn-figure-phone figcaption { margin-top: 0; font-size: 1.05rem; color: var(--cn-paper, #f6f7f9); }
}
.cn-gallery-note { margin: 0; font-size: .86rem; color: #8c95a3; }

/* The pager and the closing panel, on the pages under /construction. */
.cn-sec .pager { margin-top: 0; }
.cn-close { max-width: 46rem; }
.cn-close h2 { margin: 0 0 .7rem; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.12; }
.cn-close p { margin: 0 0 1.1rem; }
.cn-close p:last-child { margin-bottom: 0; }

/* --- Construction's own typefaces ------------------------------------------
   The product brief names them: Archivo for headings and text, Martian Mono
   for figures. They are loaded here and used only under .cn, so the rest of
   the site keeps Lora and the system sans. This is the single thing that
   stops the Construction pages reading as Murgese in a dark coat.

   Both are SIL Open Font Licence, self-hosted like Lora, latin subset only:
   five files, 76KB in all. */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/assets/fonts/martian-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/assets/fonts/martian-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.cn {
  --cn-face: "Archivo", "Segoe UI", system-ui, sans-serif;
  --cn-figures: "Martian Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-family: var(--cn-face);
}
.cn h1, .cn h2, .cn h3, .cn h4, .cn .eyebrow, .cn .term, .cn strong, .cn .btn {
  font-family: var(--cn-face);
}
.cn h1, .cn h2, .cn h3 { font-weight: 700; letter-spacing: -.025em; }
.cn .num, .cn .cn-fig { font-family: var(--cn-figures); font-weight: 600; letter-spacing: -.02em; }

/* --- /construction: the argument, not the inventory ------------------------
   Written to a managing director paying for three systems. The page is a
   contrast, then one worked month, then what that is worth. The month is the
   part that has to carry it, so the screens are large and the words beside
   them are few. */

/* What a contractor runs today. */
.cn-three { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; background: var(--paper-2); }
.cn-three-head { max-width: 46rem; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.cn-three-head h2 { margin: 0 0 .8rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.08; }
.cn-three-head .lede { margin: 0; }
.cn-three-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.1rem; counter-reset: cnthree; }
@media (min-width: 820px) { .cn-three-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-three-list li {
  margin: 0; padding: 1.3rem 1.4rem 1.5rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
}
.cn-three-list .num { display: block; margin-bottom: .8rem; font-size: .78rem; color: var(--grey); }
.cn-three-list strong { display: block; margin-bottom: .45rem; font-size: 1.05rem; color: var(--ink); }
.cn-three-list span:last-child { color: var(--grey); font-size: .94rem; line-height: 1.55; }
.cn-three-turn { max-width: 44rem; margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); }

/* The month. */
.cn-month { padding: clamp(3rem, 2rem + 3vw, 5rem) 0 clamp(2rem, 1.4rem + 2vw, 3.4rem); }
.cn-month-head { max-width: 50rem; margin-bottom: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); }
.cn-month-head h2 { margin: 0 0 1rem; font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); line-height: 1.05; }

.cn-step { margin-bottom: clamp(2.6rem, 2rem + 2.6vw, 4.6rem); }
@media (min-width: 1081px) {
  .cn-step { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); align-items: start; }
  .cn-step-copy { position: sticky; top: 104px; }
}
.cn-step-day {
  display: flex; align-items: baseline; gap: .7rem; margin: 0 0 .7rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--cn-pale);
}
.cn-step-day .num { color: var(--cn-lime); font-size: .8rem; letter-spacing: 0; }
.cn-step-copy h3 { margin: 0 0 .9rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); line-height: 1.18; color: #fff; }
.cn-step-copy p { margin: 0 0 1rem; color: var(--cn-pale); line-height: 1.65; }
.cn-once {
  margin: 0 !important; padding: .85rem 1rem; border-left: 3px solid var(--cn-rule);
  background: rgba(214, 245, 69, .07); color: #e7ecf2 !important; font-size: .94rem; line-height: 1.55;
}
.cn-step-shot { margin: 1.4rem 0 0; }
@media (min-width: 1081px) { .cn-step-shot { margin-top: 0; } }
.cn-step-shot img {
  display: block; width: 100%; height: auto; border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 28px 70px -30px rgba(0, 0, 0, .8);
  background: var(--cn-ink-2);
}

/* What that is worth, and the way into the detail. */
.cn-replaces { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.cn-replaces .feature-list { display: grid; gap: 1.1rem; }
@media (min-width: 820px) { .cn-replaces .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-replaces .feature-list li {
  display: block; margin: 0; padding: 1.3rem 1.4rem 1.45rem; border: 1px solid var(--line);
  border-top: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
}
.cn-replaces .feature-list li:first-child { border-top: 1px solid var(--line); }
.cn-replaces .feature-list .term { display: block; margin-bottom: .5rem; padding-bottom: .5rem; font-size: 1.02rem; border-bottom: 2px solid var(--cn-ink); width: fit-content; max-width: 100%; }
.cn-replaces .feature-list .desc { display: block; line-height: 1.6; }

.cn-more { padding: clamp(2.4rem, 1.8rem + 2.4vw, 4rem) 0; background: var(--paper-2); }
.cn-more .pager { margin-top: 0; }

/* --- The hero's screen -----------------------------------------------------
   Every page in this category that sells well puts the product in the first
   screen. Ours carries the portfolio: every job, what it is worth and what it
   is forecast to make. It sits wider than the words above it and bleeds off
   the bottom of the ink band, so the eye is pulled down into the page. */
.cn-hero-shot { margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.cn-hero-shot figure { margin: 0; }
.cn-hero-shot picture { display: block; position: relative; }
.cn-hero-shot img {
  display: block; width: 100%; height: auto;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255, 255, 255, .16); border-bottom: 0;
  box-shadow: 0 -1px 0 0 var(--cn-rule), 0 40px 90px -36px rgba(0, 0, 0, .9);
  background: var(--cn-ink-2);
}
.cn-hero-shot figcaption {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 0; padding: .85rem 1rem 0;
  font-size: .86rem; line-height: 1.55; color: #8c95a3; max-width: 60rem;
}
.cn-hero-shot figcaption::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: .52rem;
  border-radius: 50%; background: var(--cn-lime);
}
@media (min-width: 1100px) {
  .cn-hero-shot { max-width: calc(var(--wrap) + 60px); }
}

/* --- What actually goes wrong ----------------------------------------------
   The problem-to-answer matrix. The left-hand phrase is the thing a
   contractor recognises; the right-hand one is the part of the program that
   handles it, and the whole card is the way in. This is the section that
   replaces the social proof we have no right to print. */
.cn-hurt { position: relative; padding: clamp(3rem, 2rem + 3vw, 5rem) 0; background: var(--paper); }
.cn-hurt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(to right, rgba(16, 21, 30, .05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, rgba(16, 21, 30, .05) 0 1px, transparent 1px 48px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
          mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.cn-hurt > .wrap { position: relative; }

.cn-hurt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 760px)  { .cn-hurt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .cn-hurt-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-hurt-list li { margin: 0; }
.cn-hurt-list a {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.5rem 1.5rem 1.6rem; background: var(--paper);
  text-decoration: none; color: inherit;
  transition: background .16s ease, color .16s ease;
}
.cn-hurt-list .num {
  display: block; margin-bottom: 1rem; font-size: .76rem; color: var(--grey-3);
  transition: color .16s ease;
}
.cn-hurt-list strong {
  display: block; margin-bottom: .7rem; font-size: 1.06rem; line-height: 1.3;
  letter-spacing: -.015em; color: var(--ink);
  transition: color .16s ease;
}
.cn-hurt-answer {
  display: block; font-size: .93rem; line-height: 1.6; color: var(--grey);
  transition: color .16s ease;
}
.cn-hurt-list a::after {
  content: "Where this is handled \2192";
  /* auto, not a fixed gap: the six cards hold two, three and four lines of
     text, and a rule that floats under each of them in a different place
     reads as a mistake. */
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-2);
  transition: color .16s ease, border-color .16s ease;
}
.cn-hurt-list a:hover, .cn-hurt-list a:focus-visible {
  background: var(--cn-ink); outline: 0;
}
.cn-hurt-list a:hover .num, .cn-hurt-list a:focus-visible .num { color: var(--cn-lime); }
.cn-hurt-list a:hover strong, .cn-hurt-list a:focus-visible strong { color: #fff; }
.cn-hurt-list a:hover .cn-hurt-answer, .cn-hurt-list a:focus-visible .cn-hurt-answer { color: var(--cn-pale); }
.cn-hurt-list a:hover::after, .cn-hurt-list a:focus-visible::after { color: var(--cn-lime); border-top-color: rgba(214, 245, 69, .35); }

/* --- The Construction Act clock --------------------------------------------
   A working tool on the page, in the product's own ink and lime, with the
   dates set in Martian Mono so they read as figures rather than prose. Dark
   form controls, so `color-scheme` is set and the browser draws its own date
   picker and spinners to match. */
.cn-clockband { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.cn-clockband .cn-month-head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }

.cn-calc { color-scheme: dark; }
.cn-calc-grid { display: grid; gap: 1.4rem; align-items: start; }
/* SIDE BY SIDE, THE TWO PANELS ARE THE SAME HEIGHT. They were top-aligned and
   left to their own heights, which differed by however much the four result
   rows happened to need: 60px on 5 October 2026, after the weekday moved under
   each date. Two boxes side by side with ragged bottoms read as two boxes that
   are not aligned, which is what was reported. Stacked below 940px there is
   nothing to line up, so start is right there. */
@media (min-width: 940px) {
  .cn-calc-grid { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 1.6rem; align-items: stretch; }
}

.cn-calc-form, .cn-calc-out {
  padding: 1.5rem 1.5rem 1.6rem; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r); background: var(--cn-ink-2);
}
.cn-calc-field { margin-bottom: 1.1rem; }
.cn-calc-field[hidden] { display: none; }
.cn-calc label {
  display: block; margin-bottom: .4rem; font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cn-pale);
}
.cn-calc-input {
  width: 100%; padding: .62rem .7rem; font: inherit; font-size: .96rem;
  color: #fff; background: #0c111a; border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
}
.cn-calc-input:focus-visible { outline: 2px solid var(--cn-lime); outline-offset: 1px; border-color: var(--cn-lime); }
.cn-calc-num { font-family: var(--cn-figures); font-weight: 600; text-align: center; }
/* No spinners. The browser draws them inside the box on hover and focus, so
   the hovered box's number slid left of centre while the other three stayed
   put: four boxes in a grid, one of them visibly out. The values are a few
   days and are typed; the arrow keys still step them, because that is the
   number input's own behaviour and does not depend on the spinner. */
.cn-calc-num { -moz-appearance: textfield; appearance: textfield; }
.cn-calc-num::-webkit-outer-spin-button,
.cn-calc-num::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.cn-calc-hint { display: block; margin-top: .4rem; font-size: .8rem; line-height: 1.5; color: #8c95a3; }

.cn-calc-legend {
  margin: 1.5rem 0 .8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cn-lime);
}
.cn-calc-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.cn-calc-day label { font-size: .7rem; letter-spacing: .09em; }
.cn-calc-day .cn-calc-hint { font-size: .74rem; }
.cn-calc-note { margin: 1.1rem 0 0; font-size: .84rem; line-height: 1.55; color: #8c95a3; }
.cn-calc-note-edit { color: var(--cn-lime); }

.cn-calc-outhead {
  margin: 0 0 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cn-pale);
}
.cn-clock { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(255, 255, 255, .1); }
.cn-clock-row {
  display: grid; gap: .3rem .9rem; margin: 0; padding: 1.05rem .1rem 1.15rem; background: var(--cn-ink-2);
  border-left: 3px solid var(--cn-rule); padding-left: 1rem;
}
@media (min-width: 620px) {
  /* THE LABEL COLUMN IS AS WIDE AS THE LONGEST LABEL, not a guessed 11.5rem.
     At 11.5rem "Final date for payment" wrapped to two lines while the other
     three did not, so that one row's first grid row was 41px tall against
     everyone else's 21px, and its explanation sat 16px lower than the three
     above it. Nothing else on the screen moved, which is why it read as one
     box out of line rather than as a wrapping label.

     max-content sizes the column to the longest label on one line, so all four
     rows are identical at every width this layout is used at, and a fifth
     label added later cannot reintroduce it. Below 620px the row is a single
     column and none of this applies. */
  /* 13rem, and the number is measured. The widest of the four labels, "Final
     date for payment", needs 196px on one line; the column was 11.5rem, which
     is 184px, so that one label wrapped to two lines while the other three did
     not. Its first grid row then stood 41px tall against everyone else's 21px
     and its explanation sat 16px lower than the three above it: one box out of
     line, for twelve pixels.

     NOT max-content, WHICH WAS TRIED AND IS WORSE HERE. Every row is its own
     grid, so a content-sized track is sized per row, and the four labels then
     got four different column widths and the dates stopped lining up with each
     other entirely. A shared track would need the list to be the grid and the
     rows to be subgrid, which is a bigger change than a measured number
     deserves. If a fifth label is ever added, measure it. */
  .cn-clock-row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: baseline; }
  .cn-clock-name { white-space: nowrap; }
  .cn-clock-what { grid-column: 2; }
}
.cn-clock-name { font-size: .78rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--cn-pale); }
/* THE WEEKDAY: BESIDE THE DATE WHEN EVERY ROW HAS ROOM, UNDER IT WHEN ANY
   ROW WOULD NOT, AND NEVER A MIXTURE.

   The four weekday strings are different lengths: "Monday, in 7 days" fits
   where "Wednesday, in 16 days" does not. Left to wrap on its own, a row whose
   string was too long dropped to two lines while its neighbours stayed on one,
   and the explanations under them stopped lining up; that was found at 1024px
   and 620px. Stacking every row fixed it but made the results panel 60px
   taller than the inputs beside it.

   So the decision is taken once, for all four rows, on the width of the panel
   they share, rather than by each row for itself. The panel is a size
   container and the rows read it. 42rem is measured: it is the narrowest
   panel in which the widest pair, "21 Oct 2026" and "Wednesday, in 16 days",
   sits on one line beside a 13rem label. Below it every row stacks. A browser
   without container queries gets the stacked layout, which is also aligned. */
.cn-calc-out { container: cn-out / inline-size; }
.cn-clock-date { display: grid; justify-items: start; gap: .1rem; }
@container cn-out (min-width: 42rem) {
  .cn-clock-date { display: flex; flex-wrap: nowrap; align-items: baseline; gap: .8rem; }
  .cn-clock-when { white-space: nowrap; }
}
.cn-clock-date strong { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: #fff; }
.cn-clock-when { font-size: .82rem; color: #8c95a3; }
.cn-clock-what { font-size: .89rem; line-height: 1.55; color: var(--cn-pale); max-width: 46rem; }
.cn-clock-off { border-left-color: rgba(255, 255, 255, .14); }
.cn-clock-off .cn-clock-na { font-family: var(--cn-face); font-weight: 600; font-size: 1rem; color: #7d8696; }
.cn-clock-off .cn-clock-what { color: #7d8696; }

.cn-calc-warn {
  margin: 0; padding: 1rem 1.1rem; border-left: 3px solid #ffb4a2;
  background: rgba(255, 180, 162, .09); color: #ffd9cf; font-size: .93rem; line-height: 1.55;
}
.cn-calc-small { margin: 1.3rem 0 0; font-size: .82rem; line-height: 1.6; color: #7d8696; max-width: 62rem; }
.cn-static p { margin: 0; color: var(--cn-pale); line-height: 1.7; max-width: 60rem; }

/* --- Three products, at the top of the home hero --------------------------
   Cards that go somewhere, not tabs that switch.

   This was a tab set first and it was wrong: the hero panel changed and the
   whole page below it stayed Murgese's, so a contractor pressed Construction
   and then read about 49 reports and seven bank statement layouts. Each
   product has a good page of its own; this is the signpost to it. Murgese's
   own card is marked as the page the reader is already on. */
.ph { margin: 0 0 clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); }
.ph-lab {
  margin: 0 0 .9rem; font-size: .76rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-3);
}
.ph-cards { display: grid; gap: .8rem; }
@media (min-width: 860px) { .ph-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }

.ph-card {
  position: relative; display: flex; flex-direction: column; gap: .8rem;
  padding: 1.1rem 1.15rem 1.2rem; border-radius: var(--r); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .02);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.ph-card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  border-radius: var(--r) var(--r) 0 0; background: var(--ph-accent, transparent);
  opacity: 0; transition: opacity .16s ease;
}
.ph-card-top { display: flex; align-items: center; gap: .75rem; }
.ph-card img { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; }
.ph-card-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ph-card strong { font-size: .95rem; line-height: 1.2; color: #d4d7dc; letter-spacing: -.01em; transition: color .16s ease; }
.ph-card-l { font-size: .84rem; line-height: 1.3; color: var(--grey); }
.ph-card-s {
  margin-left: auto; flex: 0 0 auto; padding: .2rem .45rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--grey-3); background: rgba(255, 255, 255, .07);
}
.ph-card-b { font-size: .89rem; line-height: 1.55; color: var(--grey); }
.ph-card-go {
  margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-2); transition: color .16s ease;
}

/* The two that go somewhere. */
a.ph-card:hover, a.ph-card:focus-visible {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .26); outline: 0;
}
a.ph-card:hover::before, a.ph-card:focus-visible::before { opacity: 1; }
a.ph-card:hover strong, a.ph-card:focus-visible strong { color: #fff; }
a.ph-card:hover .ph-card-go, a.ph-card:focus-visible .ph-card-go { color: var(--ph-accent); }
a.ph-card:focus-visible { box-shadow: 0 0 0 2px #fff; }

/* The one the reader is already on. Marked, not clickable, and quieter. */
.ph-card.is-here { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); }
.ph-card.is-here::before { opacity: 1; }
.ph-card.is-here strong { color: #fff; }
.ph-card.is-here .ph-card-go { color: var(--ph-accent); }

.ph-card:has(.ph-s-murgese)      { --ph-accent: #2aa6a2; }
.ph-card:has(.ph-s-consolidate)  { --ph-accent: #8aa9ff; }
.ph-card:has(.ph-s-construction) { --ph-accent: #d6f545; }
.ph-card.is-here .ph-card-s, a.ph-card:hover .ph-card-s { color: var(--ph-accent); background: rgba(255, 255, 255, .1); }

/* On a phone the cards sit above the headline, so they are compressed:
   enough to say which product is which, not enough to push the first one off
   the screen. */
@media (max-width: 859px) {
  .ph { margin-bottom: 1.8rem; }
  .ph-lab { margin-bottom: .7rem; font-size: .7rem; }
  .ph-cards { gap: .6rem; }
  .ph-card { padding: .8rem .9rem .85rem; gap: .55rem; }
  .ph-card img { width: 28px; height: 28px; border-radius: 6px; }
  .ph-card strong { font-size: .9rem; }
  .ph-card-l { font-size: .78rem; }
  .ph-card-s { font-size: .6rem; padding: .16rem .4rem; }
  /* The sentence goes. Stacked, three cards carrying it pushed the headline
     to 790px on an 844px phone, which is the first product falling off the
     screen to describe the other two. The name, the line and the status say
     which product it is, and the page it links to says the rest. */
  .ph-card-b { display: none; }
  /* And so does the footer line. On a phone the whole card is the tap target
     and the arrow says nothing the card does not. */
  .ph-card-go { display: none; }
  .ph-card { gap: 0; }
}

/* An anchor on a page with a sticky header has to clear it. */
#dates, #interest, #month { scroll-margin-top: 92px; }


/* --- Murgese Construction: the outcome pages, 4 October 2026 ---------------
   The twelve pages under /construction were rebuilt to open on what goes
   wrong rather than on a list of modules, and three pieces of furniture had
   to exist for that: the pain above the heading, hotspots over a screenshot,
   and a short silent recording. All three stay inside .cn, so nothing here
   reaches the rest of the site. */

/* ---- The pain, above the heading --------------------------------------- */
/* Set in the lime, which on ink is far past the contrast a reader needs, and
   given a rule rather than quotation marks: it is the reader's own sentence
   being said back to him, not a quotation from anybody. */
.cn-pain {
  margin: 0 0 .9rem;
  padding-left: 1rem;
  border-left: 3px solid var(--cn-lime);
  font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem);
  font-weight: 500;
  line-height: 1.45;
  max-width: 44ch;
  color: var(--cn-lime);
}
.cn-hero-page .cn-pain { margin-top: .2rem; }

/* ---- Hotspots over a screenshot ---------------------------------------- */
/* The list is the content and is laid out as a list whatever happens. The
   markers are added by cn-hotspots.js, and .is-live is set only once at least
   one of them is actually on the picture, so none of the pairing styles below
   can apply to a page where the script never ran. */
.cn-spots { display: grid; gap: 1.4rem; }
@media (min-width: 900px) {
  .cn-spots { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.8rem; align-items: start; }
}
.cn-spots-pic { position: relative; margin: 0; }
.cn-spots-pic .frame { margin: 0; }

.cn-spots-layer {
  position: absolute; inset: 0;
  pointer-events: none;
}
.cn-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--cn-ink);
  background: var(--cn-lime);
  color: var(--cn-ink);
  font-weight: 700;
  font-size: .86rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(16, 21, 30, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cn-spot:hover, .cn-spot.is-on { transform: translate(-50%, -50%) scale(1.18); }
.cn-spot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* The marker sits over a screenshot of unknown colour, so it carries its own
   halo rather than relying on what is behind it. */
.cn-spot::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid rgba(214, 245, 69, .45);
}

.cn-spots-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cn-spots-list li {
  position: relative;
  margin-bottom: .9rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r, 6px);
  background: rgba(255, 255, 255, .035);
  font-size: .94rem;
  line-height: 1.55;
  transition: border-color .12s ease, background .12s ease;
}
.cn-spots-list li:last-child { margin-bottom: 0; }
.cn-spots-list li.is-on { border-color: var(--cn-rule); background: rgba(214, 245, 69, .07); }
.cn-spots-list strong { display: block; color: #fff; margin-bottom: .2rem; font-size: 1rem; }
.cn-spot-tag {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; margin-right: .5rem;
  float: left;
  border-radius: 50%;
  background: var(--cn-lime); color: var(--cn-ink);
  font-weight: 700; font-size: .78rem; line-height: 1;
}

/* ---- A short silent recording ------------------------------------------ */
.cn-film { margin: 1.6rem 0 0; }
.cn-film-head { margin-bottom: .7rem; }
.cn-film-head strong { display: block; font-weight: 600; }
.cn-film-head span { display: block; font-size: .92rem; color: var(--ink-3); max-width: 62ch; }
.cn-dark .cn-film-head span { color: var(--cn-pale); }
.cn-film-v {
  display: block; width: 100%; height: auto;
  border-radius: var(--r, 6px);
  background: var(--cn-ink);
  border: 1px solid rgba(16, 21, 30, .16);
}
.cn-dark .cn-film-v { border-color: rgba(255, 255, 255, .14); }
.cn-film-tall .cn-film-v { max-width: 300px; margin-inline: auto; border-radius: 22px; }
/* The frame is what the play button sits over, so it is exactly the size of
   the picture. A phone film is 300px wide wherever it is. */
.cn-film-frame { position: relative; }
.cn-film-tall .cn-film-frame { max-width: 300px; margin-inline: auto; }
.cn-film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4.25rem; height: 4.25rem; border-radius: 50%;
  display: grid; place-items: center; padding: 0 0 0 .2rem;
  border: 2px solid var(--cn-ink); background: var(--cn-lime); color: var(--cn-ink);
  box-shadow: 0 0 0 6px rgba(214, 245, 69, .22), 0 14px 34px -10px rgba(0, 0, 0, .6);
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.cn-film-play svg { width: 1.7rem; height: 1.7rem; }
.cn-film-play:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 9px rgba(214, 245, 69, .28), 0 16px 38px -10px rgba(0, 0, 0, .6); }
.cn-film-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cn-film-frame.is-started .cn-film-play { display: none; }
@media (prefers-reduced-motion: reduce) { .cn-film-play { transition: none; } }
.cn-film-note { margin: .6rem 0 0; font-size: .84rem; color: var(--ink-3); }
.cn-dark .cn-film-note { color: var(--cn-pale); }

/* ---- Two screens side by side ------------------------------------------ */
.cn-two { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .cn-two { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.cn-two-col h3 { margin: 1rem 0 .3rem; font-size: 1.05rem; }
.cn-two-col p { margin: 0; font-size: .94rem; color: var(--ink-3); }

/* ---- The clock on a light band ----------------------------------------- */
/* On /construction it sits on ink. Here it follows a dark band, so it is on
   paper instead and the markup is identical: only the band around it changes. */
.cn-clockband-light { background: #f4f6f8; }

/* ---- What this is instead of ------------------------------------------- */
.cn-instead .cn-hero-sub { max-width: 62ch; }


/* --- Murgese Construction: the product home, to Drawing 01 -----------------
   Four pieces the drawing asked for and the page did not have: the frame that
   pins while the words go past, the bounded role switcher, the no-signal band
   and the way out to the tour. */

/* ---- The month: the FRAME pins, not the words --------------------------- */
/* It was the other way round, which is the inverse of what was drawn: the
   words held still and the picture slid past them. The picture is the thing
   worth looking at and the words are the commentary, so the picture holds.
   Nothing below 1081px, where the drawing specifies six plain cards. */
@media (min-width: 1081px) {
  .cn-step { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
  /* No top padding. It was there to lengthen the words so the frame had
     something to pin against, and it pushed the first line of every step 51px
     below the top of its own picture: the picture started above the heading it
     belongs to. The picture and the step's first line now share a top, and the
     padding that gives the frame its scroll distance is below the words. */
  .cn-step-copy { position: static; padding-block: 0 clamp(1rem, .5rem + 3vw, 5rem); }
  .cn-step-shot { position: sticky; top: 96px; }

  /* Zoomed to the part of the screen the words are about. A constant
     transform per step rather than one driven by the scroll position: it
     cannot fall out of step with the scroll, there is nothing to tear down at
     a breakpoint, and it works with JavaScript off. */
  .cn-step-crop { overflow: hidden; border-radius: var(--r); }
  .cn-step-zoom {
    transform: scale(var(--zs, 1));
    /* Always the top: a vertical origin cut the screen's own title in half.
       See the note beside $month in app/views/pages/construction.php. */
    transform-origin: var(--zx, 50%) 0;
    transition: transform .4s ease;
  }
}
/* The phone frame in step one is a phone, not a window. */
.cn-step-phone .cn-step-shot img {
  max-width: 290px; margin-inline: auto; border: 6px solid #0a0e14; border-radius: 30px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85);
}
@media (prefers-reduced-motion: reduce) {
  .cn-step-shot { position: static; }
  .cn-step-zoom { transform: none; transition: none; }
}

/* ---- The bounded switcher ---------------------------------------------- */
/* A radio set and CSS. No script, so it works with JavaScript off, and the
   arrow keys move through it because that is what a radio group does. One
   card changes and nothing else on the page does, which is the bound. */
.cn-roles { padding: clamp(2.6rem, 2rem + 2.6vw, 4.4rem) 0; }
.cn-role { margin-top: 1.6rem; }
.cn-role-r { position: absolute; opacity: 0; pointer-events: none; }
.cn-role-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.cn-role-tab {
  padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .9rem; font-weight: 500; cursor: pointer; background: #fff; color: var(--ink-2);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.cn-role-tab:hover { border-color: var(--cn-ink); }
.cn-role-cards { position: relative; }
.cn-role-card {
  display: none;
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  border: 1px solid var(--line); border-left: 4px solid var(--cn-ink);
  border-radius: var(--r); background: #f6f7f9;
}
.cn-role-who { margin: 0 0 .5rem; font-weight: 600; font-size: 1.05rem; color: var(--cn-ink); }
.cn-role-who span { font-weight: 400; color: var(--ink-3); font-size: .9rem; }
.cn-role-who span::before { content: "\00b7"; margin: 0 .45rem; }
.cn-role-what { margin: 0 0 .9rem; max-width: 64ch; line-height: 1.65; }
.cn-role-go { margin: 0; font-size: .94rem; font-weight: 500; }

/* Each radio shows its own card and lights its own tab. Written out rather
   than generated, because four is four. */
#cn-role-md:checked   ~ .cn-role-cards .cn-role-md,
#cn-role-qs:checked   ~ .cn-role-cards .cn-role-qs,
#cn-role-site:checked ~ .cn-role-cards .cn-role-site,
#cn-role-acc:checked  ~ .cn-role-cards .cn-role-acc { display: block; }
/* BY NAME, NOT BY POSITION. These were :nth-child(1) to (4) and they were
   off by one, so clicking Site manager lit Quantity surveyor: the tabs sit in
   a <fieldset>, whose first child is the <legend>, and :nth-child counts it.
   Each tab now carries its own class, which cannot drift when the markup
   around it changes. */
#cn-role-md:checked   ~ .cn-role-tabs .cn-role-tab-md,
#cn-role-qs:checked   ~ .cn-role-tabs .cn-role-tab-qs,
#cn-role-site:checked ~ .cn-role-tabs .cn-role-tab-site,
#cn-role-acc:checked  ~ .cn-role-tabs .cn-role-tab-acc {
  background: var(--cn-ink); border-color: var(--cn-ink); color: #fff;
}
/* The focus ring belongs on the label, because the input it belongs to is the
   thing that is actually focused and it is off the screen. */
.cn-role-r:focus-visible ~ .cn-role-tabs .cn-role-tab { outline: none; }
#cn-role-md:focus-visible   ~ .cn-role-tabs .cn-role-tab-md,
#cn-role-qs:focus-visible   ~ .cn-role-tabs .cn-role-tab-qs,
#cn-role-site:focus-visible ~ .cn-role-tabs .cn-role-tab-site,
#cn-role-acc:focus-visible  ~ .cn-role-tabs .cn-role-tab-acc {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ---- The phone with no signal ------------------------------------------ */
/* Drawing 01, block 08: the film, and phone screenshots beside it. The film
   is one column 300px wide. The other holds what it shows in words across the
   top, then the two stills and where the app stands along the bottom, so the
   words start level with the top of the film and the stills finish level with
   its foot. Before this the second column was three lines of text and the
   rest of it, 680px, was empty band. */
.cn-nosignal-grid { display: grid; gap: 2rem; align-items: stretch; margin-top: 1.8rem; }
.cn-nosignal-grid .cn-film .cn-film-note { text-align: center; }
.cn-nosignal-side {
  display: grid; gap: 1.4rem clamp(1.2rem, .8rem + 1.2vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: space-between;
}
.cn-nosignal-say, .cn-nosignal-status { grid-column: 1 / -1; }
.cn-nosignal-side h3 { margin: 0 0 .5rem; color: #fff; font-size: 1.1rem; line-height: 1.3; }
.cn-nosignal-side p { margin: 0 0 .9rem; color: var(--cn-pale); }
.cn-nosignal-side p:last-child { margin-bottom: 0; }
.cn-nosignal-phone { margin: 0; }
.cn-nosignal-phone img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14); background: var(--cn-ink-2);
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .8);
}
.cn-nosignal-phone figcaption { margin-top: .7rem; font-size: .88rem; line-height: 1.45; color: var(--cn-pale); }
/* Where the app stands goes beside the two stills only when the column is
   wide enough to give it a readable measure. This was a viewport breakpoint,
   and between 900px and about 1100px the column beside the film is narrower
   than the page: the third track came out 31px wide and the band scrolled
   sideways. The column's own width is what decides it now. */
.cn-nosignal-col { container: cn-ns / inline-size; display: flex; }
.cn-nosignal-col > .cn-nosignal-side { flex: 1; }
.cn-nosignal-side { grid-template-columns: repeat(2, minmax(0, 214px)); }
@container cn-ns (min-width: 680px) {
  .cn-nosignal-side { grid-template-columns: 214px 214px minmax(0, 1fr); }
  .cn-nosignal-status { grid-column: 3; align-self: end; }
}
@media (min-width: 900px) {
  .cn-nosignal-grid { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2rem, 1rem + 2.4vw, 3.4rem); }
}

/* ---- See it working, and a link inside a sentence ----------------------- */
.cn-seeit { padding: clamp(2.4rem, 1.8rem + 2.4vw, 4rem) 0; }
.cn-inline { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cn-jump-tools { margin-bottom: 1.4rem; }

/* The tab row is a fieldset, so its default border and padding go. */
.cn-role-tabs { border: 0; padding: 0; margin: 0 0 1.1rem; }

/* --- The Construction hero, to Drawing 01 ---------------------------------
   One sentence, two calls to action, and the portfolio bleeding off the
   bottom edge. It was four sentences, a status chip with a paragraph saying
   the same thing again, and a third call to action, which between them put
   the picture, which is the Largest Contentful Paint, below the first screen
   on a laptop and a long way below it on a phone. */

/* The band ends where the picture does: on /construction, whose hero has the
   portfolio bleeding off its foot. Every other Construction page's hero ends
   on text and keeps its own bottom padding; this rule took it away from all of
   them, so the standfirst sat on the edge of the band. */
.cn-hero { padding-bottom: 0; }
.cn-hero.cn-hero-page { padding-bottom: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem); }

.cn-hero-one { max-width: 46ch; font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem); }

.cn-hero-act {
  align-items: center;
  gap: .9rem 1.6rem;
  margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  padding-top: clamp(1.2rem, .9rem + 1.2vw, 1.7rem);
}
.cn-hero-act > div { flex: 0 1 auto; }
.cn-dark .cn-hero-act p.cn-tag { margin: 0; }
.cn-hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }

/* The second call to action. Outlined rather than filled, because two filled
   lime buttons side by side give a reader no idea which one is the thing to
   do, and the lime is a marker rather than a surface. */
.btn.cn-btn-ghost {
  background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; font-weight: 600;
}
.btn.cn-btn-ghost:hover { border-color: var(--cn-lime); color: var(--cn-lime); background: rgba(214, 245, 69, .07); }
.btn.cn-btn-ghost:focus-visible { outline: 2px solid var(--cn-lime); outline-offset: 3px; }

.cn-hero-note {
  margin: clamp(1.2rem, .9rem + 1.2vw, 1.8rem) 0 0;
  font-size: .84rem; line-height: 1.5; color: #8c95a3; max-width: 56ch;
}

/* The bleed. The picture is cut by the bottom of the band rather than by a
   crop in the file, so the whole screen is still what the alt text describes
   and what opens if anybody saves it. Capped as a share of the viewport so
   the top of the picture is always in the first screen whatever the window. */
.cn-hero-shot {
  margin-top: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  max-height: 42vh;
  overflow: hidden;
}
.cn-hero-shot picture { display: block; }
.cn-hero-shot img { border-radius: 10px 10px 0 0; }
@media (max-width: 760px) {
  /* On a phone a 42vh slice of a 1600 wide screenshot is a grey band with
     nothing readable in it. More of it, and the detail is in the pages below. */
  .cn-hero-shot { max-height: 34vh; }
}
@media (min-width: 1100px) { .cn-hero-shot { max-height: 46vh; } }



/* --- Block 05: the job at the centre, the nine around it, and a panel ------
   The ring is Drawing 01's block 05. The panel beside it is what fills the
   band, which was reported as blank: the ring alone sat in the middle of a
   thousand pixels with nothing either side. See the note in the markup.

   --ring-r IS THE ONE NUMBER. The node transform, the dashed circle and the
   stage's own size all come off it, so they cannot disagree. The stage used to
   be a square box with the circle at 64% of it, which left about a hundred
   pixels of nothing above and below the ring.

   Three layouts, by width:
     below 1000px   the nodes are a list of links; no ring, no panel
     1000 to 1179   the ring, with the panel centred underneath it
     1180 and up    the ring on the left, the panel beside it, tops level */

.cn-orbit-wrap { margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.cn-orbit-hub {
  margin: 0 0 1rem; display: inline-grid; place-items: center;
  padding: .65rem 1.3rem; border-radius: 999px;
  background: var(--cn-ink); color: #fff; font-weight: 700;
}
.cn-orbit-ring { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.cn-orbit-node a {
  display: block; padding: .6rem 1rem;
  border: 1px solid var(--cn-line, var(--line)); border-radius: 999px;
  background: #fff; color: var(--cn-ink); text-decoration: none;
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.cn-orbit-node a:hover { border-color: var(--cn-ink); }
.cn-orbit-node a:focus-visible { outline: 2px solid var(--cn-lime-ink, var(--accent)); outline-offset: 3px; }
.cn-orbit-detail { display: none; }

@media (min-width: 1000px) {
  .cn-orbit-wrap { --ring-r: 13rem; }
  .cn-orbit {
    position: relative; margin-inline: auto;
    /* Wide enough for the widest pill at the side of the ring, tall enough for
       the pills at its top and bottom, and not a pixel more. */
    width: calc(2 * var(--ring-r) + 11rem);
    height: calc(2 * var(--ring-r) + 3.4rem);
  }
  .cn-orbit::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: calc(2 * var(--ring-r)); height: calc(2 * var(--ring-r));
    transform: translate(-50%, -50%);
    border: 1px dashed var(--cn-line, var(--line)); border-radius: 50%;
  }
  .cn-orbit-hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 7.5rem; height: 7.5rem; border-radius: 50%; padding: 0;
    text-align: center; z-index: 2; margin: 0;
    box-shadow: 0 0 0 10px rgba(16, 21, 30, .05), 0 18px 40px -18px rgba(16, 21, 30, .5);
  }
  .cn-orbit-ring { display: block; }
  .cn-orbit-node {
    position: absolute; top: 50%; left: 50%;
    --angle: calc((var(--i) / var(--orbit-n)) * 360deg);
    transform:
      rotate(var(--angle)) translate(0, calc(-1 * var(--ring-r))) rotate(calc(-1 * var(--angle)))
      translate(-50%, -50%);
  }
  .cn-orbit-node a { box-shadow: 0 10px 26px -18px rgba(16, 21, 30, .5); }

  /* The node whose panel is showing. */
  .cn .cn-orbit-node.is-on a,
  .cn:not(.cn-dark) .cn-orbit-node.is-on a { background: var(--cn-ink); border-color: var(--cn-ink); color: #fff; }

  /* The panel, under the ring at this width. */
  .cn-orbit-detail { display: block; max-width: 40rem; margin: 2.4rem auto 0; }
}
@media (min-width: 1180px) {
  .cn-orbit-wrap {
    --ring-r: 14rem;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    /* Tops level: the panel's picture starts where the ring's top pill does. */
    align-items: start;
  }
  .cn-orbit { margin-inline: 0; }
  .cn-orbit-detail { margin: 0; max-width: none; }
}

/* The panel itself. */
.cn-od[hidden] { display: none; }
.cn-od-shot { margin: 0 0 1.1rem; }
/* Cut to the screen, not the program's navigation rail: the same measured
   1.187 from the right edge as the month above. See $month in the view. */
.cn-od-crop {
  overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--cn-line, var(--line));
  background: var(--cn-ink-2);
  box-shadow: 0 24px 50px -30px rgba(16, 21, 30, .55);
}
.cn-od-crop img {
  display: block; width: 100%; height: auto;
  transform: scale(1.187); transform-origin: 100% 0;
}
/* The phone, in the frame an office screen fills: the same 16 by 10, on the
   blueprint grid, standing up from the foot as if held. */
.cn-od-crop-phone {
  position: relative; aspect-ratio: 16 / 10;
  background-color: var(--cn-ink, #10151e);
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cn-od-crop-phone picture { display: block; }
.cn-od-crop .cn-od-crop-phone img, .cn-od-crop-phone img {
  position: absolute; left: 50%; top: 7%; width: 46%; height: auto;
  transform: translateX(-50%); transform-origin: 50% 0;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8);
}
.cn-od-group {
  margin: 0 0 .35rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.cn-od-pain {
  margin: 0 0 .7rem; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.cn-od-desc { margin: 0 0 .9rem; font-size: .96rem; line-height: 1.6; max-width: 56ch; }
.cn-od-go { margin: 0; font-weight: 600; }
.cn-od-note { margin: 1rem 0 0; font-size: .8rem; }
.cn:not(.cn-dark) .cn-od-group { color: var(--cn-lime-ink); }
.cn:not(.cn-dark) .cn-od-pain { color: var(--cn-fg); }
.cn:not(.cn-dark) .cn-od-desc { color: var(--cn-fg-2); }
.cn:not(.cn-dark) .cn-od-go a { color: var(--cn-lime-ink); }
.cn:not(.cn-dark) .cn-od-note { color: var(--cn-fg-3); }
@media (prefers-reduced-motion: reduce) { .cn-orbit-node a { transition: none; } }

/* Block 06 reads as five facts, not five arguments: shorter, and two across. */
.cn-facts .term { font-size: 1.04rem; }

/* --- Construction's light bands, to the product's own palette --------------
   The dark bands were the product's: ink #10151E, hi-vis lime #D6F545, the
   blueprint grid. The light ones were the website's: its paper, its white
   cards, its teal accent on the eyebrows. So half of every Construction page
   was Murgese in a dark coat and the other half was Murgese, which is the one
   thing the brief asks these pages not to be.

   The rest of the palette, read off Drawing 01 and the product brief:

     ground    #E9ECEF   the light bands, with the blueprint grid on them
     paper     #F6F7F9   anything sitting ON the ground: cards, tabs, panels
     box       #DDE1E7   a panel that has to separate from paper
     fg        #10151E   headings and anything that must be read first
     fg-2      #4A5464   body text
     fg-3      #78828F   captions, notes, the quiet line
     line      #C9CED6   rules and borders
     lime-ink  #5F7000   lime WHERE IT HAS TO BE TEXT ON LIGHT

   THE LIME NEVER GOES ON PAPER AS #D6F545. On ink it is far past the contrast
   a reader needs; on white it is about 1.3 to 1, which is not a colour, it is
   a rumour. That is what lime-ink is for, and it is the only place a reader
   sees lime on a light band.

   Scoped to .cn throughout, so no site token is redefined and nothing outside
   /construction changes. */

.cn {
  --cn-ground: #e9ecef;
  --cn-paper: #f6f7f9;
  --cn-box: #dde1e7;
  --cn-fg: #10151e;
  --cn-fg-2: #4a5464;
  /* Drawing 01 has this as #78828F. On the ground that is 3.29:1, and these
     are captions and notes rather than the drawing's margin references, so it
     is the same grey taken down 18% to clear 4.5:1 on both the ground and
     paper. The only value on these pages that is not the artefact's own, and
     it is a shade of it. */
  --cn-fg-3: #626b75;
  --cn-line: #c9ced6;
  --cn-lime-ink: #5f7000;
  --cn-grid-ink: rgba(16, 21, 30, .055);
}

/* The light bands get the ground and the same blueprint grid the dark ones
   carry, so the page reads as one drawing whichever band you are on. */
.cn:not(.cn-dark) {
  background-color: var(--cn-ground);
  background-image:
    linear-gradient(var(--cn-grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--cn-grid-ink) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--cn-fg);
}
.cn:not(.cn-dark) h2,
.cn:not(.cn-dark) h3 { color: var(--cn-fg); }
.cn:not(.cn-dark) p,
.cn:not(.cn-dark) li,
.cn:not(.cn-dark) .desc { color: var(--cn-fg-2); }
.cn:not(.cn-dark) .lede { color: var(--cn-fg-2); }
.cn:not(.cn-dark) .eyebrow { color: var(--cn-lime-ink); }
.cn:not(.cn-dark) .term { color: var(--cn-fg); }
.cn:not(.cn-dark) figcaption,
.cn:not(.cn-dark) .tiny,
.cn:not(.cn-dark) .cn-film-note { color: var(--cn-fg-3); }

/* Anything sitting on the ground is paper, not white, and its rule is the
   product's grey rather than the site's. */
.cn:not(.cn-dark) .cn-orbit-node a,
.cn:not(.cn-dark) .cn-role-tab,
.cn:not(.cn-dark) .cn-role-card,
.cn:not(.cn-dark) .cn-two-col,
.cn:not(.cn-dark) .pager-link {
  background: var(--cn-paper);
  border-color: var(--cn-line);
}
.cn:not(.cn-dark) .cn-orbit-node a:hover,
.cn:not(.cn-dark) .pager-link:hover { background: #fff; border-color: var(--cn-ink); }
.cn:not(.cn-dark) .cn-orbit::before { border-color: var(--cn-line); }
.cn:not(.cn-dark) .cn-orbit-node a { color: var(--cn-fg); }
.cn:not(.cn-dark) .cn-role-card { border-left-color: var(--cn-ink); }
.cn-clockband-light { background-color: var(--cn-ground); }

/* The free-tool pills on a light band: ink outline, not the site's accent. */
.cn:not(.cn-dark) .cn-jump a {
  background: var(--cn-paper); border-color: var(--cn-line); color: var(--cn-fg);
}
.cn:not(.cn-dark) .cn-jump a:hover { border-color: var(--cn-ink); background: #fff; color: var(--cn-ink); }

/* A link inside a sentence on a light band. lime-ink, because that is the
   product's mark and #D6F545 here would be unreadable. */
.cn:not(.cn-dark) .cn-inline,
.cn:not(.cn-dark) .cn-role-go a { color: var(--cn-lime-ink); }

/* Two things on a light band are not on the light band: the hub, which is an
   ink disc, and the status chip, which is a lime one. Both are <p>, so the
   rule that sets body colour above reached inside them and greyed their text.
   Named here rather than by making that rule cleverer. */
.cn:not(.cn-dark) .cn-orbit-hub,
.cn:not(.cn-dark) .cn-orbit-hub span { color: #fff; }
.cn:not(.cn-dark) p.cn-tag { color: var(--cn-ink); }
/* The fact cards sit ON the ground, so they are paper with the product's rule,
   like every other panel on these pages. */
.cn:not(.cn-dark) .feature-list li {
  background: var(--cn-paper);
  border-color: var(--cn-line);
}
/* Inside the no-signal band the film is one column of two, so its own top
   margin, which separates it from a paragraph everywhere else, only pushed it
   below the heading beside it. */
.cn-nosignal-grid .cn-film { margin-top: 0; }
/* The first hotspot card starts level with the window frame beside it. A
   generic list-item margin was putting it 5px lower. */
.cn-spots-list li:first-child { margin-top: 0; }

/* The selected node, hovered or not. The light-band hover rule above gives a
   pill a white background and says nothing about its text, and the selected
   node's text is white, so pointing at the selected node made it an empty
   white lozenge. Written last and with :hover named, so it wins both ways. */
/* Only where the ring and its panel are drawn. On a phone the buttons are a
   plain list with no panel, and the first one sat highlighted for nothing. */
@media (min-width: 1000px) {
  .cn:not(.cn-dark) .cn-orbit-node.is-on a,
  .cn:not(.cn-dark) .cn-orbit-node.is-on a:hover {
    background: var(--cn-ink); border-color: var(--cn-ink); color: #fff;
  }
}

/* The pill has a fixed line height so its height is known, and the stage is
   exactly two radii plus one pill tall. The top pill then touches the top of
   the stage, which is where the panel beside it starts. */
.cn-orbit-node a { line-height: 1.25; }
@media (min-width: 1000px) {
  .cn-orbit { height: calc(2 * var(--ring-r) + 2.3875rem + 2px); }
}
/* No list-item margin on the nodes. A generic one was pushing every node 6px
   below its place on the circle, so the ring sat off centre on its own hub and
   the top pill sat below the panel beside it. */
.cn-orbit-node { margin: 0; }

/* The wrapper the Construction clock sits in on its own free-tool page is
   marked .cn so the clock gets the product's type and colours, but it is not a
   band: it sits inside an ordinary white page. The light-band rule painted it
   with the blueprint ground, which made a grey box with the clock's own note
   running flush to its left edge. */
.cn.cn-tool:not(.cn-dark) { background-color: transparent; background-image: none; }

/* --- The ring turns -------------------------------------------------------
   Asked for on 5 October 2026: revolving slowly, and stopping when pointed at
   so a person can click.

   HOW. The whole ring is rotated, and every pill is rotated back by the same
   amount at the same rate, so the ring goes round and the words on it stay
   level. Two transform animations in lockstep, which the browser runs off the
   main thread, rather than a script moving nine boxes sixty times a second.
   Both pause together, so they cannot drift out of step.

   IT STOPS when the pointer is anywhere over the ring, when anything in it has
   keyboard focus, when the visitor presses Stop beneath it, and when it is
   scrolled out of sight. Under prefers-reduced-motion it never starts.

   THE RADIUS WAS RAISED FOR THIS, AND THE NUMBER IS ARITHMETIC. Nine pills on
   a circle of radius r have 2r.sin(20deg) = 0.684r between neighbouring
   centres, and once the ring turns, every pair of neighbours passes the top
   side by side. The widest pair, "Know your margin" and "Control spending",
   needs 158px between centres plus a gap. Still, the layout only avoided that
   pair touching by where the two happened to sit; at 14rem they overlapped by
   about 5px as they passed. 15.5rem clears every pair at every angle. */
@media (min-width: 1000px) {
  .cn-orbit-wrap { --ring-r: 15.5rem; }
  .cn-orbit-ring { position: absolute; inset: 0; }
  .cn-orbit-ring { animation: cn-orbit-turn 96s linear infinite; }
  .cn-orbit-node a { animation: cn-orbit-unturn 96s linear infinite; }
  .cn-orbit:hover .cn-orbit-ring,     .cn-orbit:hover .cn-orbit-node a,
  .cn-orbit:focus-within .cn-orbit-ring, .cn-orbit:focus-within .cn-orbit-node a,
  .cn-orbit.is-still .cn-orbit-ring,  .cn-orbit.is-still .cn-orbit-node a,
  .cn-orbit.is-away .cn-orbit-ring,   .cn-orbit.is-away .cn-orbit-node a {
    animation-play-state: paused;
  }
}
@media (min-width: 1180px) { .cn-orbit-wrap { --ring-r: 15.5rem; } }
@keyframes cn-orbit-turn   { to { transform: rotate(360deg); } }
@keyframes cn-orbit-unturn { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cn-orbit-ring, .cn-orbit-node a { animation: none !important; }
  .cn-orbit-pause { display: none; }
}

/* Stop and start. Small and quiet, under the ring, because it is there for
   the people who need it rather than to be noticed by everybody else. */
.cn-orbit-pause {
  display: none;
  margin: .9rem auto 0; padding: .35rem .8rem;
  font: inherit; font-size: .82rem; font-weight: 600;
  background: transparent; border: 1px solid var(--cn-line, var(--line)); border-radius: 999px;
  color: var(--cn-fg-2, var(--ink-2)); cursor: pointer;
}
.cn-orbit-pause:hover { border-color: var(--cn-ink); color: var(--cn-ink); }
.cn-orbit-pause:focus-visible { outline: 2px solid var(--cn-lime-ink, var(--accent)); outline-offset: 3px; }
@media (min-width: 1000px) { .cn-orbit-pause { display: block; } }

/* --- The spokes, and what travels along them ------------------------------
   Block 05 says everything is attached to the job, so it is drawn attached: a
   spoke from every pill to the hub. On the selected one a short mark runs from
   the pill into the hub, over and over, which is the product's argument in one
   movement: whatever happens out there lands on the one job, once.

   The mark is lime-ink, #5F7000, not the hi-vis lime. On this ground the lime
   is about 1.3 to 1 and would be invisible; lime-ink is 4.7 to 1. */
/* The turning box is absolute only where there is a ring. It was set at every
   width, and below 1000px, where the ring is a plain list of buttons, nothing
   contained it: it stretched over the whole section and drew the nine buttons
   on top of the heading and its paragraph. Seen on Syed's phone, 5 October. */
.cn-orbit-spokes { display: none; }
@media (min-width: 1000px) {
  .cn-orbit-turn { position: absolute; inset: 0; }
  /* The ring box no longer turns on its own: the box around it and the spokes
     does, so the two cannot come apart. */
  .cn-orbit-ring { animation: none; }
  .cn-orbit-turn { animation: cn-orbit-turn 96s linear infinite; }
  .cn-orbit:hover .cn-orbit-turn, .cn-orbit:focus-within .cn-orbit-turn,
  .cn-orbit.is-still .cn-orbit-turn, .cn-orbit.is-away .cn-orbit-turn { animation-play-state: paused; }

  .cn-orbit-spokes {
    display: block; position: absolute; left: 50%; top: 50%;
    width: calc(2 * var(--ring-r)); height: calc(2 * var(--ring-r));
    transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
  }
  .cn-spoke-line { stroke: var(--cn-line, #c9ced6); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .2s ease; }
  .cn-spoke.is-on .cn-spoke-line { stroke: var(--cn-ink); }
  .cn-spoke-pulse {
    stroke: var(--cn-lime-ink, #5f7000); stroke-width: 1.6; stroke-linecap: round;
    stroke-dasharray: 7 93; stroke-dashoffset: -93; opacity: 0; fill: none;
  }
  .cn-spoke.is-on .cn-spoke-pulse { opacity: 1; animation: cn-spoke-in 2.2s cubic-bezier(.45, 0, .55, 1) infinite; }
}
/* From the pill end of the spoke to the hub end. */
@keyframes cn-spoke-in { from { stroke-dashoffset: -93; } to { stroke-dashoffset: 0; } }

/* The panel eases in rather than snapping, so a reader sees it change. */
.cn-od:not([hidden]) { animation: cn-od-in .32s ease both; }
@keyframes cn-od-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cn-orbit-turn { animation: none !important; }
  .cn-spoke.is-on .cn-spoke-pulse { animation: none; opacity: 0; }
  .cn-od:not([hidden]) { animation: none; }
}
/* Measured after the first turn: at 15.5rem the tightest pass between
   neighbours was 6px, which reads as two pills touching. 16rem and a little
   less side padding on each pill leave a clear gap at every angle. And a lap
   every two minutes, which is slow enough to read a pill as it goes past.
   The ring's turn and the pills' counter-turn MUST share one duration, or the
   words stop being level; that is why it is one custom property. */
@media (min-width: 1000px) {
  .cn-orbit-wrap { --ring-r: 16rem; --orbit-lap: 120s; }
  .cn-orbit-node a { padding-inline: .85rem; animation-duration: var(--orbit-lap); }
  .cn-orbit-turn { animation-duration: var(--orbit-lap); }
}

/* ==========================================================================
   THE COMPANY HOME PAGE                                   5 October 2026
   ==========================================================================
   Three products with equal weight, each in its own colours: Murgese in the
   site's teal, Consolidate in navy and brass, Construction in its own
   Blueprint Hi-Vis (the .cn classes). Everything that moves has a finished
   state that is also the state with no script and with reduced motion:
   home.js sets data-hm-armed on a block only when it can play it, and the
   "before" styles below apply only to armed blocks that are not yet .is-in.
   See the note at the head of app/views/pages/home.php.
   ========================================================================== */
:root {
  --hm-teal: #2fb3a8;
  --hm-navy: #0f1a30;
  --hm-navy-2: #17243f;
  --hm-brass: #c9a45c;
  --hm-brass-2: #e2c88f;
  --hm-lime: #d6f545;
  --hm-ink: #10151e;
}

/* Chips: solid, so the same chip reads on a dark band and a light one. */
.hm-chip {
  display: inline-block; flex: 0 0 auto;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .42em .7em; border-radius: 999px; white-space: nowrap;
}
.hm-chip-murgese      { background: var(--accent); color: #fff; }
.hm-chip-consolidate  { background: var(--hm-brass); color: #1b1406; }
.hm-chip-construction { background: var(--hm-lime); color: var(--hm-ink); }

.hm-h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 1.35rem + 2vw, 2.75rem); line-height: 1.12; letter-spacing: -.015em;
  margin: 0 0 1rem;
}

/* ---- 1. Hero ---------------------------------------------------------- */
.hm-hero {
  position: relative; overflow: hidden;
  background: #0d0f12; color: #fff;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem);
}
/* Three faint lights behind the three panels, one per product's colour. */
.hm-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42rem 26rem at 12% 88%, rgba(47, 179, 168, .16), transparent 70%),
    radial-gradient(42rem 26rem at 50% 100%, rgba(201, 164, 92, .13), transparent 70%),
    radial-gradient(42rem 26rem at 88% 88%, rgba(214, 245, 69, .11), transparent 70%);
}
.hm-hero .wrap { position: relative; }
.hm-kicker {
  margin: 0 0 1.1rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey-3);
}
.hm-h1 {
  margin: 0; max-width: 31ch;
  font-family: var(--display); font-weight: 600; color: #fff;
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em;
}
.hm-lede { margin: 1.3rem 0 0; max-width: 60ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: #c3c8cf; }

.hm-panels { display: grid; gap: 1.2rem; margin-top: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); }
/* On a wide screen the three panels share their rows through subgrid, so the
   headings start level, the pictures start level and the links sit on one
   line, however many lines each product's words take. Without subgrid each
   panel lays out on its own and the pictures sit at the foot instead. */
@media (min-width: 980px) {
  .hm-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
  @supports (grid-template-rows: subgrid) {
    .hm-panels > .hm-panel { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .hm-panels > .hm-panel .hm-window { margin-top: 0; align-self: start; }
  }
}

.hm-panel {
  --hm-acc: var(--hm-teal);
  position: relative; display: flex; flex-direction: column;
  padding: 1.35rem 1.35rem 1.2rem; border-radius: 16px;
  background: #141a1b; border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.hm-panel::before {
  content: ""; position: absolute; left: 1.35rem; right: 1.35rem; top: -1px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--hm-acc);
}
.hm-panel-consolidate { --hm-acc: var(--hm-brass); background: var(--hm-navy); }
.hm-panel-construction {
  --hm-acc: var(--hm-lime); background-color: var(--hm-ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hm-panel:hover, .hm-panel:focus-within {
  transform: translateY(-5px); border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9);
}
.hm-panel-top { display: flex; align-items: center; gap: .75rem; }
.hm-panel-top img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.hm-panel-name { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.hm-panel-name strong { font-size: 1rem; color: #fff; line-height: 1.2; }
.hm-panel-name span { font-size: .84rem; color: var(--grey-3); }
.hm-panel-h { margin: 1.15rem 0 .55rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 1.15rem + .6vw, 1.6rem); line-height: 1.15; }
.hm-panel-h a { color: #fff; text-decoration: none; }
.hm-panel-h a:hover { text-decoration: underline; text-decoration-color: var(--hm-acc); text-underline-offset: .18em; }
.hm-panel-p { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.55; color: #b5bcc5; }
.hm-panel-construction .hm-panel-h, .hm-panel-construction .hm-panel-name strong { font-family: "Archivo", var(--sans); letter-spacing: -.02em; }

/* The window: the top of the product's best screen, filling a little more of
   itself when the panel is pointed at. Still at rest. */
.hm-window {
  margin-top: auto; border-radius: 10px; overflow: hidden;
  background: #0a0c0f; border: 1px solid rgba(255, 255, 255, .12);
}
.hm-window-bar { display: flex; gap: 5px; padding: 7px 9px; background: rgba(255, 255, 255, .06); }
.hm-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.hm-window-pic { aspect-ratio: 16 / 10; overflow: hidden; }
.hm-window-pic picture, .hm-window-pic img { display: block; width: 100%; height: 100%; }
.hm-window-pic img { object-fit: cover; object-position: top center; transform-origin: 50% 0; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.hm-panel:hover .hm-window-pic img, .hm-panel:focus-within .hm-window-pic img { transform: scale(1.07); }

.hm-panel-go { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 0; flex-wrap: wrap; }
.hm-go { color: var(--hm-acc); font-weight: 700; text-decoration: none; }
.hm-go span { display: inline-block; transition: transform .25s ease; }
.hm-go:hover span { transform: translateX(4px); }
/* Keep the product's own colour on hover: a:hover would turn it the site's
   dark teal, which barely shows on the panels' dark grounds. */
.hm-panel .hm-go:hover { color: var(--hm-acc); }
.hm-also { color: var(--grey-3); font-size: .9rem; }
.hm-also:hover { color: #fff; }

/* ---- 2. What the three share ----------------------------------------- */
.hm-share { background: var(--paper-2); padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; }
.hm-share-head { margin-bottom: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.hm-share-head .hm-h2 { margin: 0; }
/* The heading spans the band, so the facts and the drawing start on the same
   line and stretch to the same foot. */
.hm-share-grid { display: grid; gap: 1.4rem; align-items: stretch; }
@media (min-width: 980px) { .hm-share-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.6rem; } }
.hm-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 640px) { .hm-facts { grid-template-columns: 1fr 1fr; } }
.hm-facts li { margin: 0; padding: 1.25rem 1.3rem 1.35rem; background: #fff; display: flex; flex-direction: column; gap: .35rem; }
.hm-fact-n { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--accent); }
.hm-facts strong { font-size: 1.02rem; }
.hm-facts li > span:last-child { color: var(--grey); font-size: .93rem; line-height: 1.55; }

/* Where the records sit. HTML, not SVG: the words are the page's own type at
   fixed sizes and the three products are one grid row. The fork's three
   branches are at the centres of those three equal columns: with a gap g
   between them, the outer centres are (100% - 2g) / 6 in from each edge. */
.hm-where {
  --hm-g: .6rem;
  container: hm-where / inline-size;
  margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden;
}
.hm-where-title { padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .98rem; color: var(--ink); }
.hm-where-office { flex: 1 1 auto; display: flex; flex-direction: column; padding: 1.1rem 1.3rem 1.4rem; }
.hm-where-lab { margin: 0 0 .9rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-align: center; }
.hm-where-flow { margin-block: auto; display: flex; flex-direction: column; }
.hm-where-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hm-g); }
.hm-where-apps li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.hm-where-apps img { display: block; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(16, 21, 30, .7); }
.hm-where-apps span { font-weight: 700; font-size: clamp(.7rem, 3.4cqi, .9rem); line-height: 1.2; white-space: nowrap; color: var(--ink); }

/* The fork. Three branches down from the three names, a bar joining them,
   and a stem down to the computer. Each is its own element, so each carries
   its own dot. Branch centres: with a gap g between three equal columns, the
   outer centres are (100% - 2g) / 6 in from each edge. */
.hm-where-fork {
  --hm-c: calc((100% - 2 * var(--hm-g)) / 6);
  --hm-cycle: 3.6s;
  position: relative; height: 4rem; margin-top: .55rem;
}
.hm-where-fork i { position: absolute; display: block; background: #c4cfcf; }
.hm-f-b { top: 0; height: 50%; width: 2px; margin-left: -1px; }
.hm-f-b1 { left: var(--hm-c); }
.hm-f-b2 { left: 50%; }
.hm-f-b3 { left: calc(100% - var(--hm-c)); }
.hm-f-h { top: 50%; height: 2px; margin-top: -1px; }
.hm-f-hl { left: var(--hm-c); right: 50%; }
.hm-f-hr { left: 50%; right: var(--hm-c); }
.hm-f-s { top: 50%; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }

/* The records flowing. One cycle in three beats: down the branches, along
   the bar to the middle, down into the computer. The dot is the product's
   colour until the stem, where the three have become one. */
.hm-where-fork i::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  opacity: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.hm-f-b::after, .hm-f-s::after { left: -3px; top: 0; }
.hm-f-h::after { top: -3px; }
.hm-f-b1::after, .hm-f-hl::after { background: var(--accent); }
.hm-f-b2::after { background: var(--hm-brass); }
.hm-f-b3::after, .hm-f-hr::after { background: var(--hm-lime); box-shadow: 0 0 0 1.5px var(--hm-ink), 0 0 0 4px rgba(255, 255, 255, .9); }
.hm-f-s::after { background: var(--ink); }
.hm-share.is-in .hm-f-b::after { animation: hm-down var(--hm-cycle) linear infinite; }
.hm-share.is-in .hm-f-hl::after { animation: hm-right var(--hm-cycle) linear infinite; }
.hm-share.is-in .hm-f-hr::after { animation: hm-left var(--hm-cycle) linear infinite; }
.hm-share.is-in .hm-f-s::after { animation: hm-stem var(--hm-cycle) linear infinite; }
@keyframes hm-down  { 0% { top: -4px; opacity: 0; } 4% { opacity: 1; } 33% { top: calc(100% - 4px); opacity: 1; } 36%, 100% { top: calc(100% - 4px); opacity: 0; } }
@keyframes hm-right { 0%, 33% { left: -4px; opacity: 0; } 36% { opacity: 1; } 64% { left: calc(100% - 4px); opacity: 1; } 67%, 100% { left: calc(100% - 4px); opacity: 0; } }
@keyframes hm-left  { 0%, 33% { left: calc(100% - 4px); opacity: 0; } 36% { opacity: 1; } 64% { left: -4px; opacity: 1; } 67%, 100% { left: -4px; opacity: 0; } }
@keyframes hm-stem  { 0%, 64% { top: -4px; opacity: 0; } 67% { opacity: 1; } 96% { top: calc(100% - 4px); opacity: 1; } 100% { top: calc(100% - 4px); opacity: 0; } }
.hm-where-pc {
  align-self: center; width: min(100%, 18rem); box-sizing: border-box;
  display: flex; flex-direction: column; gap: .2rem; text-align: center;
  padding: .95rem 1.1rem; border-radius: 12px; background: var(--ink); color: #fff;
}
.hm-where-pc strong { font-size: 1rem; }
.hm-where-pc span { font-size: .84rem; color: #c3c8cf; line-height: 1.4; }
/* Outside the office: centred under the computer, the badge and one line. */
.hm-where-out { border-top: 1px dashed var(--grey-3); background: var(--paper-2); padding: 1rem 1.3rem 1.2rem; text-align: center; }
.hm-where-out .hm-where-lab { color: var(--grey); margin-bottom: .7rem; }
.hm-where-us { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.hm-where-us strong {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-3); font-size: .92rem;
}
.hm-where-us strong svg { color: var(--grey); flex: 0 0 auto; }
.hm-where-us span { color: var(--grey); font-size: .9rem; line-height: 1.45; max-width: 34ch; text-wrap: balance; }

/* ---- 3. The product bands, shared ------------------------------------ */
.hm-band { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; }
.hm-band-head { max-width: 50rem; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.hm-band-kicker { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; font-weight: 700; font-size: .98rem; }
.hm-band-kicker img { width: 28px; height: 28px; border-radius: 7px; }
.hm-band-lede { margin: 0; font-size: 1.08rem; line-height: 1.65; max-width: 62ch; }
.hm-band-go { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0; }
.hm-band-note { font-size: .9rem; margin-left: .4rem; }
.hm-small { font-size: .9rem; line-height: 1.6; color: var(--grey); margin: 1rem 0 0; }

/* Murgese */
.hm-band-m { background: #fff; }
.hm-band-m .hm-band-lede { color: var(--grey); }
.hm-m-grid { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 980px) { .hm-m-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.4rem; } }

.hm-fold { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.3rem 1.2rem; background: var(--paper-2); }
.hm-fold-lab { margin: 0 0 .9rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); position: relative; height: 1.1em; }
.hm-fold-lab span { position: absolute; left: 0; top: 0; transition: opacity .4s ease; }
.hm-fold-before { opacity: 0; }
.hm-fold-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; background: var(--accent-tint);
  transition: gap .7s cubic-bezier(.2, .7, .2, 1), border-color .7s ease, background-color .7s ease;
}
.hm-fold-row li {
  margin: 0; display: flex; align-items: center; gap: .75rem;
  padding: .72rem 1rem; font-size: .95rem; font-weight: 600; color: var(--accent-deep);
  border-bottom: 1px solid var(--accent-line); background: transparent;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * 70ms), border-radius .7s ease, background-color .7s ease, border-color .7s ease, color .7s ease;
}
.hm-fold-row li:last-child { border-bottom: 0; }
/* A tick, drawn: a circle with two borders of a rotated box inside it. */
.hm-tick { position: relative; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--accent); transition: background-color .7s ease; }
.hm-tick::after {
  content: ""; position: absolute; left: .36rem; top: .2rem; width: .3rem; height: .55rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.hm-fold-note { margin: .9rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--grey); }
/* Before: five separate things to buy, set apart and out of line. */
.hm-fold[data-hm-armed]:not(.is-in) .hm-fold-before { opacity: 1; }
.hm-fold[data-hm-armed]:not(.is-in) .hm-fold-after { opacity: 0; }
.hm-fold[data-hm-armed]:not(.is-in) .hm-fold-row { gap: .45rem; border-color: transparent; background: transparent; overflow: visible; }
.hm-fold[data-hm-armed]:not(.is-in) .hm-fold-row li {
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-3);
  transform: translateX(calc((var(--k) - 2) * 12px));
}
.hm-fold[data-hm-armed]:not(.is-in) .hm-tick { background: var(--grey-3); }
.hm-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; margin: 2rem 0; }
@media (min-width: 640px) { .hm-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 980px) { .hm-figs { grid-template-columns: 1fr 1fr; } }
.hm-figs > div { border-top: 2px solid var(--ink); padding-top: .7rem; }
.hm-fig-n { display: block; font-family: var(--display); font-weight: 600; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-fig-l { display: block; margin-top: .45rem; font-size: .86rem; line-height: 1.45; color: var(--grey); }

.hm-routes { display: grid; gap: .8rem; }
@media (min-width: 640px) { .hm-routes { grid-template-columns: 1fr 1fr; } }
.hm-routes a {
  display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; border-radius: var(--r);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hm-routes a:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.hm-routes strong::after { content: "\00a0\2192"; color: var(--accent); }
.hm-routes span { font-size: .88rem; color: var(--grey); line-height: 1.45; }
.hm-m-right .frame { margin: 0; }
.hm-m-right .hero-film-more { margin: .7rem 0 0; }
/* The film's link was styled for the dark hero it came from, and on the
   Murgese band's white it was white on white. */
.hm-m-right .hero-film-more a { color: var(--ink); }
.hm-m-right .hero-film-more a:hover { color: var(--accent); }

/* Consolidate: navy and brass. */
.hm-band-c { background: var(--hm-navy); color: #e7eaf0; position: relative; overflow: hidden; }
.hm-band-c::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50rem 30rem at 85% 0%, rgba(201, 164, 92, .14), transparent 70%);
}
.hm-band-c .wrap { position: relative; }
.hm-band-c .hm-h2 { color: #fff; }
.hm-band-c .hm-band-kicker { color: var(--hm-brass-2); }
.hm-band-c .hm-band-lede, .hm-band-c .hm-band-note { color: #b8c0cf; }
.btn-brass { background: var(--hm-brass); color: #1b1406; border-color: var(--hm-brass); }
.btn-brass:hover { background: var(--hm-brass-2); border-color: var(--hm-brass-2); color: #1b1406; }

.hm-flow { list-style: none; margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3rem); padding: 0; display: grid; gap: 1rem; counter-reset: hmflow; position: relative; }
@media (min-width: 900px) {
  .hm-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
  /* The thread the four steps hang on. */
  .hm-flow::before {
    content: ""; position: absolute; left: 1.3rem; right: 1.3rem; top: 1.3rem; height: 2px;
    background: linear-gradient(90deg, var(--hm-brass), var(--hm-brass-2));
    transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1);
  }
  .hm-flow[data-hm-armed]:not(.is-in)::before { transform: scaleX(0); }
}
.hm-flow li {
  margin: 0; position: relative; counter-increment: hmflow;
  display: flex; flex-direction: column; gap: .4rem;
  padding: 3.4rem 1.2rem 1.25rem; border-radius: 14px;
  background: var(--hm-navy-2); border: 1px solid rgba(201, 164, 92, .22);
  transition: opacity .6s ease calc(var(--k) * 380ms), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * 380ms), border-color .6s ease calc(var(--k) * 380ms);
}
.hm-flow li::before {
  content: counter(hmflow, decimal-leading-zero); position: absolute; left: 1.2rem; top: .62rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font: 600 .62rem var(--mono); background: var(--hm-brass); color: #1b1406;
  box-shadow: 0 0 0 5px var(--hm-navy);
}
.hm-flow li strong { color: #fff; font-size: 1.02rem; }
.hm-flow li > span:last-child { color: #aab3c3; font-size: .9rem; line-height: 1.55; }
.hm-flow[data-hm-armed]:not(.is-in) li { opacity: .25; transform: translateY(10px); border-color: rgba(201, 164, 92, .08); }
.hm-flow-tbs { position: absolute; right: 1.1rem; top: .75rem; display: flex; gap: 3px; }
.hm-flow-tbs i { width: 14px; height: 18px; border-radius: 2px; border: 1.5px solid var(--hm-brass-2); }

/* The steppers: radio buttons, one picture each. Shared by Consolidate and
   Construction. The radios are visually hidden but stay focusable, and the
   arrow keys move through them for free. */
.hm-step-r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hm-step-pic { display: none; margin: 0; }
.hm-step-r:nth-of-type(1):checked ~ .hm-step-pics .hm-step-pic-0,
.hm-step-r:nth-of-type(2):checked ~ .hm-step-pics .hm-step-pic-1,
.hm-step-r:nth-of-type(3):checked ~ .hm-step-pics .hm-step-pic-2,
.hm-step-r:nth-of-type(4):checked ~ .hm-step-pics .hm-step-pic-3,
.hm-step-r:nth-of-type(5):checked ~ .hm-step-pics .hm-step-pic-4,
.hm-step-r:nth-of-type(6):checked ~ .hm-step-pics .hm-step-pic-5 { display: block; animation: hm-in .45s ease both; }
@keyframes hm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hm-step-tab { cursor: pointer; user-select: none; }
.hm-step-r:nth-of-type(1):focus-visible ~ * .hm-step-tab-0,
.hm-step-r:nth-of-type(2):focus-visible ~ * .hm-step-tab-1,
.hm-step-r:nth-of-type(3):focus-visible ~ * .hm-step-tab-2,
.hm-step-r:nth-of-type(4):focus-visible ~ * .hm-step-tab-3,
.hm-step-r:nth-of-type(5):focus-visible ~ * .hm-step-tab-4,
.hm-step-r:nth-of-type(6):focus-visible ~ * .hm-step-tab-5 { outline: 3px solid currentColor; outline-offset: 3px; }

.hm-step-c .hm-step-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.hm-step-c .hm-step-tab {
  padding: .6rem 1rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
  color: #d5dbe5; border: 1px solid rgba(255, 255, 255, .16); transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hm-step-c .hm-step-tab span { font-family: var(--mono); font-size: .72rem; color: var(--hm-brass-2); margin-right: .3rem; }
.hm-step-c .hm-step-tab:hover { border-color: var(--hm-brass); }
.hm-step-c .hm-step-r:nth-of-type(1):checked ~ .hm-step-tabs .hm-step-tab-0,
.hm-step-c .hm-step-r:nth-of-type(2):checked ~ .hm-step-tabs .hm-step-tab-1,
.hm-step-c .hm-step-r:nth-of-type(3):checked ~ .hm-step-tabs .hm-step-tab-2,
.hm-step-c .hm-step-r:nth-of-type(4):checked ~ .hm-step-tabs .hm-step-tab-3 { background: var(--hm-brass); border-color: var(--hm-brass); color: #1b1406; }
.hm-step-c .hm-step-r:nth-of-type(1):checked ~ .hm-step-tabs .hm-step-tab-0 span,
.hm-step-c .hm-step-r:nth-of-type(2):checked ~ .hm-step-tabs .hm-step-tab-1 span,
.hm-step-c .hm-step-r:nth-of-type(3):checked ~ .hm-step-tabs .hm-step-tab-2 span,
.hm-step-c .hm-step-r:nth-of-type(4):checked ~ .hm-step-tabs .hm-step-tab-3 span { color: #1b1406; }
.hm-step-frame { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: #fff; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
.hm-step-c .hm-step-frame { aspect-ratio: 16 / 9; }
.hm-step-frame picture, .hm-step-frame img { display: block; width: 100%; height: 100%; }
.hm-step-frame img { object-fit: cover; object-position: top center; }
.hm-step-c figcaption { margin-top: .8rem; font-size: .9rem; color: #aab3c3; max-width: 70ch; }

/* Construction: its own band, in .cn colours and type. */
.hm-band-k .hm-h2 { font-family: "Archivo", var(--sans); font-weight: 700; letter-spacing: -.025em; color: #fff; }
.hm-band-k .hm-band-kicker { color: #fff; }
.hm-band-k .hm-band-lede, .hm-band-k .hm-band-note { color: var(--cn-pale); }
.btn-lime { background: var(--hm-lime); color: var(--hm-ink); border-color: var(--hm-lime); }
.btn-lime:hover { background: #e4fb7a; border-color: #e4fb7a; color: var(--hm-ink); }

.hm-line {
  --p: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 1.6rem; padding-top: .2rem;
}
/* On a phone six labels do not fit under six dots. The dots stay, each a
   44px target, and the day is printed above the step itself instead. */
@media (max-width: 699px) {
  .hm-line-day { display: none; }
  .hm-step-k .hm-step-tab { min-height: 44px; }
}
.hm-line::before, .hm-line::after { content: ""; position: absolute; top: calc(.2rem + 9px); height: 2px; left: calc(100% / 12); }
.hm-line::before { right: calc(100% / 12); background: rgba(255, 255, 255, .16); }
.hm-line::after { width: calc((100% - 100% / 6) * var(--p) / 5); background: var(--hm-lime); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.hm-step-k .hm-step-r:nth-of-type(2):checked ~ .hm-line { --p: 1; }
.hm-step-k .hm-step-r:nth-of-type(3):checked ~ .hm-line { --p: 2; }
.hm-step-k .hm-step-r:nth-of-type(4):checked ~ .hm-line { --p: 3; }
.hm-step-k .hm-step-r:nth-of-type(5):checked ~ .hm-line { --p: 4; }
.hm-step-k .hm-step-r:nth-of-type(6):checked ~ .hm-line { --p: 5; }
.hm-step-k .hm-step-tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; padding: 0 .3rem; }
.hm-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--cn-ink, #10151e); border: 2px solid rgba(255, 255, 255, .35); transition: background-color .3s ease, border-color .3s ease, transform .3s ease; }
.hm-line-day { font-family: "Martian Mono", var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cn-pale); line-height: 1.35; }
.hm-step-k .hm-step-tab:hover .hm-dot { border-color: var(--hm-lime); }
.hm-step-k .hm-step-r:nth-of-type(1):checked ~ .hm-line .hm-step-tab-0 .hm-dot,
.hm-step-k .hm-step-r:nth-of-type(2):checked ~ .hm-line .hm-step-tab-1 .hm-dot,
.hm-step-k .hm-step-r:nth-of-type(3):checked ~ .hm-line .hm-step-tab-2 .hm-dot,
.hm-step-k .hm-step-r:nth-of-type(4):checked ~ .hm-line .hm-step-tab-3 .hm-dot,
.hm-step-k .hm-step-r:nth-of-type(5):checked ~ .hm-line .hm-step-tab-4 .hm-dot,
.hm-step-k .hm-step-r:nth-of-type(6):checked ~ .hm-line .hm-step-tab-5 .hm-dot { background: var(--hm-lime); border-color: var(--hm-lime); transform: scale(1.2); box-shadow: 0 0 0 6px rgba(214, 245, 69, .18); }
.hm-step-k .hm-step-r:nth-of-type(1):checked ~ .hm-line .hm-step-tab-0 .hm-line-day,
.hm-step-k .hm-step-r:nth-of-type(2):checked ~ .hm-line .hm-step-tab-1 .hm-line-day,
.hm-step-k .hm-step-r:nth-of-type(3):checked ~ .hm-line .hm-step-tab-2 .hm-line-day,
.hm-step-k .hm-step-r:nth-of-type(4):checked ~ .hm-line .hm-step-tab-3 .hm-line-day,
.hm-step-k .hm-step-r:nth-of-type(5):checked ~ .hm-line .hm-step-tab-4 .hm-line-day,
.hm-step-k .hm-step-r:nth-of-type(6):checked ~ .hm-line .hm-step-tab-5 .hm-line-day { color: #fff; }

.hm-step-k .hm-step-pic { grid-template-columns: 1fr; gap: 1.4rem; }
.hm-step-k .hm-step-r:nth-of-type(1):checked ~ .hm-step-pics .hm-step-pic-0,
.hm-step-k .hm-step-r:nth-of-type(2):checked ~ .hm-step-pics .hm-step-pic-1,
.hm-step-k .hm-step-r:nth-of-type(3):checked ~ .hm-step-pics .hm-step-pic-2,
.hm-step-k .hm-step-r:nth-of-type(4):checked ~ .hm-step-pics .hm-step-pic-3,
.hm-step-k .hm-step-r:nth-of-type(5):checked ~ .hm-step-pics .hm-step-pic-4,
.hm-step-k .hm-step-r:nth-of-type(6):checked ~ .hm-step-pics .hm-step-pic-5 { display: grid; }
@media (min-width: 900px) { .hm-step-k .hm-step-pic { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 2.6rem; align-items: center; } }
.hm-step-n { margin: 0 0 .6rem; font-family: "Martian Mono", var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-lime); }
.hm-step-copy h3 { margin: 0 0 .7rem; color: #fff; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.2; }
.hm-step-copy p:last-child { margin: 0; color: var(--cn-pale); line-height: 1.6; }
.hm-step-k .hm-step-frame { aspect-ratio: 16 / 10; background: var(--cn-ink-2, #1a2130); }
.hm-step-k .is-phone .hm-step-frame img { object-fit: contain; object-position: center top; padding: 1rem 0 0; }

/* ---- 4. The next UK dates -------------------------------------------- */
.hm-dates { background: var(--paper-2); padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; }
.hm-dates-head { display: grid; gap: .6rem 3rem; align-items: end; margin-bottom: 1.8rem; }
@media (min-width: 900px) { .hm-dates-head { grid-template-columns: auto minmax(0, 1fr); } }
.hm-dates-head .hm-h2 { margin: 0; }
.hm-dates-head > p { margin: 0; color: var(--grey); max-width: 62ch; font-size: .96rem; line-height: 1.6; }
.hm-cal { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.hm-cal-i {
  margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: .3rem 1rem;
  padding: 1.1rem 1.15rem; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hm-cal-i:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* display: grid above beats the browser's own [hidden] rule, so home.js's
   cut to the next six showed all fourteen until this said so. */
.hm-cal-i[hidden] { display: none; }
.hm-cal-when { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.4rem; padding: .3rem .4rem; border-radius: 10px; background: var(--paper-3); }
.hm-cal-d { font-family: var(--display); font-weight: 600; font-size: 1.9rem; line-height: 1; }
.hm-cal-m { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-top: .2rem; text-align: center; }
.hm-cal-what { display: flex; flex-direction: column; gap: .2rem; }
.hm-cal-what strong { font-size: .98rem; line-height: 1.3; }
.hm-cal-what span { font-size: .85rem; color: var(--grey); line-height: 1.45; }
.hm-cal-left { grid-column: 2; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--accent); }
.hm-cal-left:empty { display: none; }
.hm-cal-i.is-next { background: var(--ink); border-color: var(--ink); color: #fff; }
.hm-cal-i.is-next .hm-cal-when { background: var(--accent); }
.hm-cal-i.is-next .hm-cal-m { color: #d4ece9; }
.hm-cal-i.is-next .hm-cal-what span { color: #b9c0c8; }
.hm-cal-i.is-next .hm-cal-left { color: #7fe0d6; }
.hm-dates-more { margin: 1.6rem 0 0; color: var(--grey); font-size: .95rem; }

/* ---- 5. Where each one stands ---------------------------------------- */
.hm-stand { background: var(--ink); color: #fff; padding: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) 0; }
.hm-stand .eyebrow { color: var(--grey-3); }
.hm-stand .hm-h2 { color: #fff; }
.hm-stand-rows { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 980px) { .hm-stand-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
.hm-stand-row { padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--line-dark); background: var(--ink-2); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.hm-stand-row strong { font-size: 1.05rem; }
.hm-stand-row p { margin: 0; color: #b9c0c8; font-size: .94rem; line-height: 1.6; }
.hm-stand-more { margin: 1.6rem 0 0; }
.hm-stand-more a { color: #fff; }

/* ---- 6. One way in for each ------------------------------------------ */
.hm-close { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; background: #fff; }
.hm-close-card { border-radius: 20px; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); background: var(--paper-2); border: 1px solid var(--line); }
.hm-close-card h2 { margin: 0 0 1.4rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.hm-close-row { display: grid; gap: .9rem; }
@media (min-width: 900px) { .hm-close-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-close-go {
  display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.15rem; border-radius: var(--r-lg);
  text-decoration: none; color: #fff; transition: transform .25s ease, box-shadow .25s ease;
}
.hm-close-go:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .55); }
/* Each tile keeps its own colours on hover. The site's a:hover (one element
   and one pseudo-class) outranks a single class, and turned the text teal:
   invisible on Murgese's teal tile, and wrong on the other two. */
.hm-close-go.hm-close-m:hover { color: #fff; }
.hm-close-go.hm-close-c:hover { color: var(--hm-brass-2); }
.hm-close-go.hm-close-k:hover { color: var(--hm-lime); }
.hm-close-go img { border-radius: 8px; flex: 0 0 auto; }
.hm-close-go > span { display: flex; flex-direction: column; gap: .25rem; }
.hm-close-go strong::after { content: "\00a0\2192"; }
.hm-close-go > span > span { font-size: .88rem; opacity: .85; line-height: 1.45; }
.hm-close-m { background: var(--accent); }
.hm-close-c { background: var(--hm-navy); color: var(--hm-brass-2); }
.hm-close-c > span > span { color: #c7cedb; }
.hm-close-k { background: var(--hm-ink); color: var(--hm-lime); }
.hm-close-k > span > span { color: var(--cn-pale, #aab4c2); }

/* ---- Easing in, for the blocks home.js arms -------------------------- */
.hm-share[data-hm-armed]:not(.is-in) .hm-facts li { opacity: 0; transform: translateY(12px); }
.hm-share .hm-facts li { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.hm-share .hm-facts li:nth-child(2) { transition-delay: .08s; }
.hm-share .hm-facts li:nth-child(3) { transition-delay: .16s; }
.hm-share .hm-facts li:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .hm-panel, .hm-window-pic img, .hm-go span, .hm-routes a, .hm-cal-i, .hm-close-go,
  .hm-fold-row, .hm-fold-row li, .hm-flow li, .hm-flow::before, .hm-share .hm-facts li, .hm-line::after, .hm-dot { transition: none; }
  .hm-panel:hover, .hm-panel:focus-within, .hm-routes a:hover, .hm-cal-i:hover, .hm-close-go:hover { transform: none; }
  .hm-panel:hover .hm-window-pic img, .hm-panel:focus-within .hm-window-pic img { transform: none; }
  .hm-share.is-in .hm-where-fork i::after { animation: none; opacity: 0; }
  .hm-step-r:checked ~ .hm-step-pics .hm-step-pic { animation: none !important; }
}

/* ==========================================================================
   THE PRODUCT STRIP, under the header on every public page but the home page.
   See the note above it in app/views/partials/layout.php. One line, not
   sticky, the product being read marked in its own colour.
   ========================================================================== */
.pstrip { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pstrip-in { display: flex; align-items: center; gap: .35rem; min-height: 44px; overflow-x: auto; scrollbar-width: none; }
.pstrip-in::-webkit-scrollbar { display: none; }
.pstrip-lab {
  flex: 0 0 auto; margin-right: .5rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey);
}
.pstrip-item {
  --ps: var(--accent);
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .7rem .28rem .32rem; border-radius: 999px; border: 1px solid transparent;
  color: var(--ink-3); text-decoration: none; font-size: .86rem; line-height: 1.2; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pstrip-consolidate { --ps: #c9a45c; }
.pstrip-construction { --ps: #9cb51c; }
.pstrip-item img { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.pstrip-item strong { font-weight: 600; }
.pstrip-line { color: var(--grey); }
.pstrip-item:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.pstrip-item.is-here { background: #fff; border-color: var(--ps); color: var(--ink); box-shadow: inset 0 -2px 0 var(--ps); }
.pstrip-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 860px) { .pstrip-line { display: none; } }
/* A phone: all three on one line, down to 360px wide, rather than the third
   running off the edge. */
@media (max-width: 520px) {
  .pstrip-lab { display: none; }
  .pstrip-in { gap: 0; justify-content: space-between; }
  .pstrip-item { gap: .32rem; padding: .25rem .45rem .25rem .25rem; font-size: .76rem; }
  .pstrip-item img { width: 18px; height: 18px; border-radius: 5px; }
}
@media (max-width: 400px) {
  .pstrip-in { padding-inline: 10px; }
  .pstrip-item { gap: .28rem; padding: .25rem .38rem .25rem .22rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) { .pstrip-item { transition: none; } }

/* ==========================================================================
   THE CONSTRUCTION PAGES' MOVING PIECES                     5 October 2026
   ==========================================================================
   One per outcome page, drawn by app/views/partials/cn_feature.php and played
   by assets/js/cn-motion.js. The "before" state applies only to a block the
   script has armed and not yet seen ([data-cn-armed]:not(.is-in)); without
   the script, or with reduced motion, every block is its finished self.
   ========================================================================== */
.cn-feat { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.cn-feat + .cn-feat { padding-top: clamp(1rem, .6rem + 1.4vw, 2rem); }
.cn-feat-head { max-width: 48rem; margin-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.cn-feat-head h2 { margin: 0 0 .8rem; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; }
.cn-feat-lede { margin: 0; font-size: 1.06rem; line-height: 1.65; color: var(--cn-fg-2); max-width: 62ch; }
.cn-feat-note { margin: 1.3rem 0 0; font-size: .92rem; color: var(--cn-fg-3, #626b75); }

/* ---- flow: steps that light in turn, a mark running along them --------- */
.cn-flow { --dot: 2.1rem; list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: .9rem; }
.cn-flow li {
  position: relative; margin: 0; display: flex; flex-direction: column; gap: .35rem;
  padding: 1.05rem 1.1rem 1.15rem calc(var(--dot) + 1.6rem);
  border-radius: 14px; background: #fff; border: 1px solid var(--cn-line, #c9ced6);
  transition: opacity .6s ease calc(var(--k) * 320ms), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * 320ms), border-color .6s ease calc(var(--k) * 320ms);
}
.cn-flow strong { font-size: 1.02rem; line-height: 1.25; color: var(--cn-fg, #10151e); }
.cn-flow-l { font-size: .92rem; line-height: 1.55; color: var(--cn-fg-2, #4a5464); }
.cn-flow-dot {
  position: absolute; left: .9rem; top: 1rem; width: var(--dot); height: var(--dot); border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
  font: 600 .68rem "Martian Mono", var(--mono); color: var(--cn-ink, #10151e);
  background: var(--cn-lime, #d6f545); border: 2px solid var(--cn-ink, #10151e);
  transition: background-color .5s ease calc(var(--k) * 320ms + 200ms);
}
/* The thread: down the left on a phone, across the top on a wide screen. */
.cn-flow::before {
  content: ""; position: absolute; z-index: 1; left: calc(.9rem + var(--dot) / 2 - 1px); top: 1.4rem; bottom: 1.4rem; width: 2px;
  background: var(--cn-ink, #10151e); opacity: .85; transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.cn-flow::after {
  content: ""; position: absolute; left: calc(.9rem + var(--dot) / 2 - 5px); top: 1.4rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cn-lime, #d6f545); box-shadow: 0 0 0 2px var(--cn-ink, #10151e); opacity: 0; z-index: 3;
}
.cn-feat.is-in .cn-flow::after { animation: cn-run-down 4.2s cubic-bezier(.45, 0, .55, 1) 1.6s infinite; }
@keyframes cn-run-down { 0% { top: 1.4rem; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 1.4rem - 10px); opacity: 0; } }
@media (min-width: 900px) {
  .cn-flow { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1rem; }
  .cn-flow li { padding: calc(var(--dot) + 1.6rem) 1.1rem 1.2rem; }
  .cn-flow-dot { left: 1.1rem; top: .95rem; }
  .cn-flow::before { left: 1.1rem; right: 1.1rem; top: calc(.95rem + var(--dot) / 2 - 1px); bottom: auto; width: auto; height: 2px; transform-origin: 0 50%; }
  .cn-flow::after { left: 1.1rem; top: calc(.95rem + var(--dot) / 2 - 5px); }
  .cn-feat.is-in .cn-flow::after { animation-name: cn-run-across; }
  @keyframes cn-run-across { 0% { left: 1.1rem; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 1.1rem - 10px); opacity: 0; } }
}
.cn-feat[data-cn-armed]:not(.is-in) .cn-flow li { opacity: .22; transform: translateY(10px); border-color: transparent; }
.cn-feat[data-cn-armed]:not(.is-in) .cn-flow::before { transform: scaleY(0); }
@media (min-width: 900px) { .cn-feat[data-cn-armed]:not(.is-in) .cn-flow::before { transform: scaleX(0); } }

/* chain: a request going up the approvers. Each approver's dot becomes a
   tick as the chain reaches it. */
.cn-flow-chain .cn-flow-dot:empty::after {
  content: ""; width: .42rem; height: .78rem; margin-top: -.18rem;
  border: solid var(--cn-ink, #10151e); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
  transition: opacity .3s ease calc(var(--k) * 320ms + 300ms);
}
.cn-feat[data-cn-armed]:not(.is-in) .cn-flow-chain .cn-flow-dot { background: #fff; }
.cn-feat[data-cn-armed]:not(.is-in) .cn-flow-chain .cn-flow-dot:empty::after { opacity: 0; }

/* ---- firewatch: the hour, counted down ---------------------------------- */
.cn-feat-firewatch { --fw: 0; }
.cn-fw { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 980px) { .cn-fw { grid-template-columns: 220px minmax(0, 1fr) 230px; gap: 3rem; } }
.cn-fw-clock { position: relative; width: 220px; max-width: 70vw; aspect-ratio: 1; margin-inline: auto; }
.cn-fw-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cn-fw-track { fill: #fff; stroke: var(--cn-line, #c9ced6); stroke-width: 9; }
.cn-fw-arc { fill: none; stroke: var(--cn-ink, #10151e); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(var(--fw) * 100); }
.cn-fw-time { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cn-fw-time > span { font: 600 2.3rem "Martian Mono", var(--mono); letter-spacing: -.02em; color: var(--cn-fg, #10151e); font-variant-numeric: tabular-nums; }
.cn-fw-time small { margin-top: .2rem; font: 600 .68rem "Martian Mono", var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-lime-ink, #5f7000); }
.cn-fw-steps { list-style: none; margin: 0; padding: 0; counter-reset: fw; display: grid; gap: .2rem; }
.cn-fw-steps li {
  counter-increment: fw; position: relative; margin: 0; padding: .7rem 0 .7rem 2.6rem; display: flex; flex-direction: column; gap: .2rem;
  border-bottom: 1px solid var(--cn-line, #c9ced6);
  transition: opacity .5s ease calc(var(--k) * 300ms), transform .5s ease calc(var(--k) * 300ms);
}
.cn-fw-steps li:last-child { border-bottom: 0; }
.cn-fw-steps li::before {
  content: counter(fw); position: absolute; left: 0; top: .75rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; font: 600 .7rem "Martian Mono", var(--mono); background: var(--cn-lime, #d6f545); color: var(--cn-ink, #10151e);
}
.cn-fw-steps strong { color: var(--cn-fg, #10151e); }
.cn-fw-steps span { font-size: .92rem; color: var(--cn-fg-2, #4a5464); }
.cn-fw-phone { margin: 0 auto; max-width: 230px; }
.cn-fw-phone img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--cn-line, #c9ced6); box-shadow: 0 24px 50px -24px rgba(16, 21, 30, .55); }
.cn-fw-phone figcaption { margin-top: .7rem; font-size: .84rem; line-height: 1.45; color: var(--cn-fg-3, #626b75); }
.cn-feat[data-cn-armed]:not(.is-in) .cn-fw-steps li { opacity: .2; transform: translateX(-8px); }

/* ---- vat: £10,000 under the reverse charge, into box 1 and box 4 -------- */
.cn-vat { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 900px) { .cn-vat { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 0; } .cn-vat-net { grid-column: 1 / -1; } }
.cn-vat-in, .cn-vat-box { border-radius: 14px; background: #fff; border: 1px solid var(--cn-line, #c9ced6); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .3rem; }
.cn-vat-in { background: var(--cn-ink, #10151e); border-color: var(--cn-ink, #10151e); }
.cn-vat-k, .cn-vat-n { font: 600 .7rem "Martian Mono", var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cn-vat-in .cn-vat-k { color: var(--cn-lime, #d6f545); }
.cn-vat-v { font: 700 2.4rem "Archivo", var(--sans); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.cn-vat-s { color: var(--cn-pale, #aab4c2); font-size: .92rem; }
.cn-vat-split { position: relative; height: 3rem; }
.cn-vat-split i { position: absolute; background: var(--cn-ink, #10151e); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .2s; }
.cn-vat-split i:first-child { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; transform-origin: 50% 0; }
.cn-vat-split i:last-child { display: none; }
@media (min-width: 900px) {
  .cn-vat-split { height: 9rem; }
  .cn-vat-split i:first-child { left: 0; right: 50%; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; transform-origin: 0 50%; }
  .cn-vat-split i:last-child { display: block; left: 50%; top: 18%; bottom: 18%; width: 2px; margin-left: -1px; }
  .cn-vat-split::before, .cn-vat-split::after { content: ""; position: absolute; left: 50%; right: 0; height: 2px; background: var(--cn-ink, #10151e); }
  .cn-vat-split::before { top: 18%; } .cn-vat-split::after { bottom: 18%; }
}
.cn-vat-boxes { display: grid; gap: .9rem; }
.cn-vat-box { border-left: 5px solid var(--cn-lime, #d6f545); }
.cn-vat-n { color: var(--cn-lime-ink, #5f7000); }
.cn-vat-t { color: var(--cn-fg-2, #4a5464); font-size: .92rem; }
.cn-vat-a { font: 700 1.9rem "Archivo", var(--sans); letter-spacing: -.02em; color: var(--cn-fg, #10151e); transition: opacity .5s ease .9s, transform .5s ease .9s; font-variant-numeric: tabular-nums; }
.cn-vat-b4 .cn-vat-a { transition-delay: 1.2s; }
.cn-vat-net { margin: 1.4rem 0 0; color: var(--cn-fg-2, #4a5464); line-height: 1.6; max-width: 70ch; }
.cn-vat-net strong { color: var(--cn-fg, #10151e); }
.cn-feat[data-cn-armed]:not(.is-in) .cn-vat-a { opacity: 0; transform: translateY(8px); }
.cn-feat[data-cn-armed]:not(.is-in) .cn-vat-split i:first-child { transform: scaleY(0); }
@media (min-width: 900px) { .cn-feat[data-cn-armed]:not(.is-in) .cn-vat-split i:first-child { transform: scaleX(0); } }

/* ---- where: the office PC, and the four things that talk to it ---------- */
.cn-where { display: grid; gap: 1rem; }
.cn-where-hub {
  border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; background: var(--cn-ink, #10151e); color: #fff;
  display: flex; flex-direction: column; gap: .4rem; text-align: center; justify-content: center;
}
.cn-where-hub strong { font-family: "Archivo", var(--sans); font-size: 1.35rem; color: var(--cn-lime, #d6f545); }
.cn-where-hub span { color: var(--cn-pale, #aab4c2); font-size: .94rem; line-height: 1.55; }
.cn-where-spokes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cn-where-spokes li {
  position: relative; margin: 0; padding: 1.1rem 1.2rem 1.2rem; border-radius: 14px; background: #fff; border: 1px solid var(--cn-line, #c9ced6);
  display: flex; flex-direction: column; gap: .35rem;
  transition: opacity .5s ease calc(var(--k) * 220ms), transform .5s ease calc(var(--k) * 220ms);
}
.cn-where-spokes strong { color: var(--cn-fg, #10151e); }
.cn-where-spokes span { font-size: .92rem; line-height: 1.55; color: var(--cn-fg-2, #4a5464); }
.cn-ws-ai { border-style: dashed !important; }
.cn-where-none { margin: .6rem 0 0; text-align: center; color: var(--cn-fg-2, #4a5464); }
.cn-where-none strong { color: var(--cn-fg, #10151e); }
@media (min-width: 980px) {
  /* The hub in the middle, two on each side, each joined to it by a line a
     dot runs along towards the PC. AI's line is dashed and carries nothing:
     it is off unless the firm switches it on. */
  .cn-where { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 3.2rem; row-gap: 1rem; }
  .cn-where-hub { grid-column: 2; grid-row: 1 / span 2; }
  .cn-where-spokes { display: contents; }
  .cn-where-spokes li { align-self: center; }
  .cn-ws-net { grid-column: 1; grid-row: 1; } .cn-ws-phone { grid-column: 1; grid-row: 2; }
  .cn-ws-connect { grid-column: 3; grid-row: 1; } .cn-ws-ai { grid-column: 3; grid-row: 2; }
  .cn-where-none { grid-column: 1 / -1; grid-row: 3; }
  .cn-where-spokes li::after {
    content: ""; position: absolute; top: 50%; width: 3.2rem; height: 2px; margin-top: -1px;
    background: linear-gradient(90deg, var(--cn-ink, #10151e), var(--cn-ink, #10151e)) no-repeat;
  }
  .cn-ws-net::after, .cn-ws-phone::after { left: 100%; }
  .cn-ws-connect::after, .cn-ws-ai::after { right: 100%; }
  .cn-ws-ai::after { background: repeating-linear-gradient(90deg, var(--cn-fg-3, #626b75) 0 5px, transparent 5px 10px); }
  .cn-where-spokes li::before {
    content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
    background: var(--cn-lime, #d6f545); box-shadow: 0 0 0 2px var(--cn-ink, #10151e); opacity: 0; z-index: 1;
  }
  .cn-ws-net::before, .cn-ws-phone::before { left: 100%; }
  .cn-ws-connect::before { right: 100%; }
  .cn-ws-ai::before { display: none; }
  .cn-feat.is-in .cn-ws-net::before, .cn-feat.is-in .cn-ws-phone::before { animation: cn-to-right 2.6s linear infinite; }
  .cn-feat.is-in .cn-ws-connect::before { animation: cn-to-left 2.6s linear infinite; }
  .cn-feat.is-in .cn-ws-phone::before { animation-delay: .9s; }
  .cn-feat.is-in .cn-ws-connect::before { animation-delay: 1.7s; }
  @keyframes cn-to-right { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(calc(3.2rem - 8px)); opacity: 0; } }
  @keyframes cn-to-left { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(calc(-3.2rem + 8px)); opacity: 0; } }
}
.cn-feat[data-cn-armed]:not(.is-in) .cn-where-spokes li { opacity: .2; transform: scale(.98); }

/* ---- the tour on See it working ---------------------------------------- */
.cn-tour { padding: clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem) 0; }
.cn-tour-r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cn-tour-nums { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.cn-tour-num {
  cursor: pointer; min-width: 2.6rem; padding: .45rem .55rem; border-radius: 999px; text-align: center;
  font: 600 .74rem "Martian Mono", var(--mono); color: var(--cn-pale, #aab4c2); border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cn-tour-num:hover { border-color: var(--cn-lime, #d6f545); color: #fff; }
.cn-tour-pic { display: none; margin: 0; }
.cn-tour-frame { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: var(--cn-ink-2, #1a2130); aspect-ratio: 16 / 10; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
.cn-tour-frame picture, .cn-tour-frame img { display: block; width: 100%; height: 100%; }
.cn-tour-frame img { object-fit: cover; object-position: top center; }
.cn-tour-pic.is-phone .cn-tour-frame img { object-fit: contain; padding: 1.2rem 0 0; }
.cn-tour-pic figcaption { display: grid; gap: .5rem 1.4rem; margin-top: 1rem; align-items: start; }
@media (min-width: 760px) { .cn-tour-pic figcaption { grid-template-columns: auto minmax(0, 1fr) auto; } }
.cn-tour-of { font: 600 .74rem "Martian Mono", var(--mono); color: var(--cn-lime, #d6f545); padding-top: .2rem; white-space: nowrap; }
.cn-tour-cap { color: #e3e7ec; line-height: 1.55; }
.cn-tour-go { display: flex; gap: .5rem; }
.cn-tour-btn {
  cursor: pointer; padding: .55rem .95rem; border-radius: 999px; font-weight: 600; font-size: .9rem; white-space: nowrap;
  color: #fff; border: 1px solid rgba(255, 255, 255, .3);
}
.cn-tour-btn:hover { border-color: #fff; }
.cn-tour-next { background: var(--cn-lime, #d6f545); color: var(--cn-ink, #10151e); border-color: var(--cn-lime, #d6f545); }
.cn-tour-next:hover { background: #e4fb7a; border-color: #e4fb7a; }

/* The tour's twelve steps, one rule per step. */
.cn-tour-r:nth-of-type(1):checked ~ .cn-tour-pics .cn-tour-pic-0,
.cn-tour-r:nth-of-type(2):checked ~ .cn-tour-pics .cn-tour-pic-1,
.cn-tour-r:nth-of-type(3):checked ~ .cn-tour-pics .cn-tour-pic-2,
.cn-tour-r:nth-of-type(4):checked ~ .cn-tour-pics .cn-tour-pic-3,
.cn-tour-r:nth-of-type(5):checked ~ .cn-tour-pics .cn-tour-pic-4,
.cn-tour-r:nth-of-type(6):checked ~ .cn-tour-pics .cn-tour-pic-5,
.cn-tour-r:nth-of-type(7):checked ~ .cn-tour-pics .cn-tour-pic-6,
.cn-tour-r:nth-of-type(8):checked ~ .cn-tour-pics .cn-tour-pic-7,
.cn-tour-r:nth-of-type(9):checked ~ .cn-tour-pics .cn-tour-pic-8,
.cn-tour-r:nth-of-type(10):checked ~ .cn-tour-pics .cn-tour-pic-9,
.cn-tour-r:nth-of-type(11):checked ~ .cn-tour-pics .cn-tour-pic-10,
.cn-tour-r:nth-of-type(12):checked ~ .cn-tour-pics .cn-tour-pic-11 { display: block; animation: hm-in .4s ease both; }
.cn-tour-r:nth-of-type(1):checked ~ .cn-tour-nums .cn-tour-num-0,
.cn-tour-r:nth-of-type(2):checked ~ .cn-tour-nums .cn-tour-num-1,
.cn-tour-r:nth-of-type(3):checked ~ .cn-tour-nums .cn-tour-num-2,
.cn-tour-r:nth-of-type(4):checked ~ .cn-tour-nums .cn-tour-num-3,
.cn-tour-r:nth-of-type(5):checked ~ .cn-tour-nums .cn-tour-num-4,
.cn-tour-r:nth-of-type(6):checked ~ .cn-tour-nums .cn-tour-num-5,
.cn-tour-r:nth-of-type(7):checked ~ .cn-tour-nums .cn-tour-num-6,
.cn-tour-r:nth-of-type(8):checked ~ .cn-tour-nums .cn-tour-num-7,
.cn-tour-r:nth-of-type(9):checked ~ .cn-tour-nums .cn-tour-num-8,
.cn-tour-r:nth-of-type(10):checked ~ .cn-tour-nums .cn-tour-num-9,
.cn-tour-r:nth-of-type(11):checked ~ .cn-tour-nums .cn-tour-num-10,
.cn-tour-r:nth-of-type(12):checked ~ .cn-tour-nums .cn-tour-num-11 { background: var(--cn-lime, #d6f545); border-color: var(--cn-lime, #d6f545); color: var(--cn-ink, #10151e); }
.cn-tour-r:nth-of-type(1):focus-visible ~ .cn-tour-nums .cn-tour-num-0,
.cn-tour-r:nth-of-type(2):focus-visible ~ .cn-tour-nums .cn-tour-num-1,
.cn-tour-r:nth-of-type(3):focus-visible ~ .cn-tour-nums .cn-tour-num-2,
.cn-tour-r:nth-of-type(4):focus-visible ~ .cn-tour-nums .cn-tour-num-3,
.cn-tour-r:nth-of-type(5):focus-visible ~ .cn-tour-nums .cn-tour-num-4,
.cn-tour-r:nth-of-type(6):focus-visible ~ .cn-tour-nums .cn-tour-num-5,
.cn-tour-r:nth-of-type(7):focus-visible ~ .cn-tour-nums .cn-tour-num-6,
.cn-tour-r:nth-of-type(8):focus-visible ~ .cn-tour-nums .cn-tour-num-7,
.cn-tour-r:nth-of-type(9):focus-visible ~ .cn-tour-nums .cn-tour-num-8,
.cn-tour-r:nth-of-type(10):focus-visible ~ .cn-tour-nums .cn-tour-num-9,
.cn-tour-r:nth-of-type(11):focus-visible ~ .cn-tour-nums .cn-tour-num-10,
.cn-tour-r:nth-of-type(12):focus-visible ~ .cn-tour-nums .cn-tour-num-11 { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cn-tour-pic { animation: none !important; }
  .cn-flow li, .cn-flow-dot, .cn-flow::before, .cn-fw-steps li, .cn-vat-a, .cn-vat-split i, .cn-where-spokes li { transition: none; }
}

/* The hotspot list was drawn for Get paid's dark band; on a light one its
   titles were white on grey. */
.cn-feat-spots .cn-spots-list li { color: var(--cn-fg-2, #4a5464); }
.cn-feat-spots .cn-spots-list strong { color: var(--cn-fg, #10151e); }

/* ==========================================================================
   MURGESE CONSOLIDATE'S OWN LOOK                            5 October 2026
   ==========================================================================
   Navy and brass, the colours it was given on the home page, on its seven
   pages: the page head (partials/cs_hero.php), its screens on navy, and brass
   where the rest of the site uses teal. Lora stays: it is an accountant's
   product and reads like the rest of the accounting site. The .cs class
   scopes all of it, so nothing else on the site changes.
   ========================================================================== */
.cs { --cs-navy: var(--hm-navy, #0f1a30); --cs-navy-2: var(--hm-navy-2, #17243f); --cs-brass: var(--hm-brass, #c9a45c); --cs-brass-2: var(--hm-brass-2, #e2c88f); --cs-brass-ink: #7d5f22; }
.cs .eyebrow { color: var(--cs-brass-ink); }
.cs a:not(.btn):not(.pager-link) { text-decoration-color: var(--cs-brass); }
.cs .feature-list .term, .cs .module-list strong { color: var(--ink); }
.cs .module-list li { border-left-color: var(--cs-brass); }

/* The page head. */
.cs-hero {
  position: relative; overflow: hidden; color: #e7eaf0; background: var(--cs-navy);
  padding: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem) 0 clamp(3rem, 2rem + 3.6vw, 5rem);
}
.cs-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48rem 28rem at 92% -10%, rgba(201, 164, 92, .18), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 32px;
}
.cs-hero .wrap { position: relative; }
.cs-hero .crumbs { margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); color: #9aa5b8; }
.cs-hero .crumbs a { color: #c7cedb; }
.cs-hero .crumbs a:hover { color: var(--cs-brass-2); }
.cs-kicker { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; font-weight: 700; color: var(--cs-brass-2); }
.cs-kicker img { width: 28px; height: 28px; border-radius: 7px; }
.cs-hero h1 { margin: 0; max-width: 24ch; font-family: var(--display); font-weight: 600; color: #fff; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.015em; }
.cs-lede { margin: 1.1rem 0 0; max-width: 64ch; font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height: 1.65; color: #c3cad6; }
.cs-go { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.6rem 0 0; }
.cs-flow { margin: clamp(2.2rem, 1.6rem + 2vw, 3.2rem) 0 0; }

/* Six screens on navy. */
.cs-band { background: var(--cs-navy); color: #e7eaf0; padding: clamp(3rem, 2rem + 3.6vw, 5rem) 0; }
.cs-band-head { margin-bottom: 1.4rem; }
.cs-band .eyebrow { color: var(--cs-brass-2); }
.cs-band h2 { margin: 0; color: #fff; font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.hm-step-c .hm-step-r:nth-of-type(5):checked ~ .hm-step-tabs .hm-step-tab-4,
.hm-step-c .hm-step-r:nth-of-type(6):checked ~ .hm-step-tabs .hm-step-tab-5 { background: var(--hm-brass); border-color: var(--hm-brass); color: #1b1406; }
.hm-step-c .hm-step-r:nth-of-type(5):checked ~ .hm-step-tabs .hm-step-tab-4 span,
.hm-step-c .hm-step-r:nth-of-type(6):checked ~ .hm-step-tabs .hm-step-tab-5 span { color: #1b1406; }
.cs-step .hm-step-frame { aspect-ratio: 16 / 9.5; }

/* The six parts, as cards. */
.cs-h2 { margin: 0 0 1.6rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.cs-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 700px) { .cs-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cs-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-parts li { margin: 0; }
.cs-parts a {
  position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: .45rem;
  padding: 1.25rem 1.3rem 2.6rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff;
  color: var(--ink); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cs-parts a:hover { border-color: var(--cs-brass); box-shadow: var(--shadow); transform: translateY(-2px); }
.cs-part-n { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--cs-brass-ink); }
.cs-parts strong { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.cs-part-d { font-size: .92rem; line-height: 1.55; color: var(--grey); }
.cs-part-go { position: absolute; left: 1.3rem; bottom: 1rem; color: var(--cs-brass-ink); font-weight: 700; transition: transform .2s ease; }
.cs-parts a:hover .cs-part-go { transform: translateX(4px); }

/* The two statements, each worked out twice. */
.cs-twice { display: grid; gap: .8rem; margin: 1.4rem 0 .4rem; }
.cs-twice-row {
  display: grid; gap: .5rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line);
}
@media (min-width: 760px) { .cs-twice-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 1rem; } }
.cs-twice-name { font-weight: 700; }
.cs-twice-way {
  position: relative; font-size: .86rem; color: var(--grey); padding: .45rem .7rem; border-radius: 8px; background: var(--paper-2); border: 1px dashed var(--line);
  transition: border-color .5s ease, background-color .5s ease, color .5s ease;
  transition-delay: calc(var(--k) * 500ms + 200ms);
}
.cs-twice-b { transition-delay: calc(var(--k) * 500ms + 500ms); }
.cs-twice-ok {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border-radius: 999px;
  background: var(--cs-navy); color: var(--cs-brass-2); font-weight: 700; font-size: .84rem; white-space: nowrap;
  transition: opacity .4s ease calc(var(--k) * 500ms + 900ms), transform .4s ease calc(var(--k) * 500ms + 900ms);
}
.cs-twice-ok::before { content: ""; width: .35rem; height: .65rem; margin: -.15rem .1rem 0 0; border: solid var(--cs-brass-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cs-twice.is-in .cs-twice-way, .cs-twice:not([data-hm-armed]) .cs-twice-way { border-style: solid; border-color: var(--cs-brass); background: #fbf6ec; color: var(--ink-3); }
.cs-twice[data-hm-armed]:not(.is-in) .cs-twice-ok { opacity: 0; transform: scale(.9); }

/* Their screens on the sub-pages, on navy. */
.cs-gallery { background: var(--cs-navy); padding: clamp(2.6rem, 2rem + 2.4vw, 4rem) 0; }
.cs-figure { margin: 0 0 clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.cs-figure img { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid rgba(201, 164, 92, .3); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); background: #fff; }
.cs-figure figcaption { margin-top: .9rem; font-size: .92rem; line-height: 1.55; color: #c7cedb; max-width: 60rem; }
.cs-gallery-note { margin: 0; font-size: .86rem; color: #9aa5b8; }
.cs .btn-ghost:hover { border-color: var(--cs-brass); }

@media (prefers-reduced-motion: reduce) {
  .cs-parts a, .cs-part-go, .cs-twice-way, .cs-twice-ok { transition: none; }
  .cs-parts a:hover { transform: none; }
}
/* Consolidate's closing panel, in its own colours. */
.cs-cta .cta { background: var(--cs-navy); background-image: radial-gradient(40rem 22rem at 100% 0, rgba(201, 164, 92, .16), transparent 70%); }
.cs-cta .cta .btn-primary { background: var(--cs-brass); border-color: var(--cs-brass); color: #1b1406; }
.cs-cta .cta .btn-primary:hover { background: var(--cs-brass-2); border-color: var(--cs-brass-2); }

/* ==========================================================================
   THE DOWNLOAD PAGES, 7 October 2026
   /downloads (Murgese), /consolidate/download and /construction/download.
   One switch across the three, one card for a published installer, one form.
   Each page keeps its product's own look: the card and the steps take
   Consolidate's navy and brass or Construction's ink and lime from the
   section they sit in. See app/lib/product_downloads.php.
   ========================================================================== */

/* ---- Which product's download page --------------------------------------- */
.dl-switch { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.dl-switch-list {
  list-style: none; margin: 0; padding: .9rem 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem;
}
.dl-switch-list li { margin: 0; min-width: 0; }
.dl-switch-item {
  position: relative; display: flex; align-items: center; gap: .75rem; height: 100%;
  padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--r);
  background: transparent; color: var(--ink); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dl-switch-item img { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; }
.dl-switch-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dl-switch-text strong { font-size: .95rem; color: var(--ink); }
.dl-switch-text span { font-size: .8rem; color: var(--grey); }
.dl-switch-item:hover { background: #fff; border-color: var(--grey-3); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.dl-switch-item.is-here { background: #fff; border-color: var(--ink); box-shadow: var(--shadow-sm); }
.dl-switch-item.is-here::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  border-radius: var(--r) var(--r) 0 0; background: var(--accent);
}
.dl-switch-consolidate-item.is-here::before { background: var(--hm-brass); }
.dl-switch-construction-item.is-here::before { background: var(--hm-lime); box-shadow: inset 0 -1px 0 rgba(16, 21, 30, .25); }
.dl-switch-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 640px) {
  .dl-switch-list { gap: .45rem; padding: .7rem 0; }
  .dl-switch-item { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .65rem .6rem; }
  .dl-switch-text strong { font-size: .84rem; }
  .dl-switch-text span { display: none; }
}

/* ---- A published installer ----------------------------------------------- */
.dl-main { padding: clamp(2.6rem, 1.8rem + 3vw, 4.4rem) 0; }
.dl-card {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: clamp(1.2rem, .8rem + 2vw, 2.4rem);
  align-items: start; margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3rem);
  padding: clamp(1.3rem, 1rem + 1.6vw, 2.2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.dl-card-mark {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  border-radius: var(--r-lg); background: var(--ink); overflow: hidden;
}
.dl-card-mark img { position: relative; width: 44%; height: auto; border-radius: 22%; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55); }
.dl-card-mark::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.dl-card-ver {
  position: absolute; left: 50%; bottom: .7rem; transform: translateX(-50%);
  padding: .14rem .5rem; border-radius: 999px; font-family: var(--mono); font-size: .74rem; font-weight: 700;
  background: rgba(255, 255, 255, .12); color: #fff; white-space: nowrap;
}
.dl-card-consolidate .dl-card-mark { background: var(--hm-navy); }
.dl-card-consolidate .dl-card-ver { background: var(--hm-brass); color: #1b1406; }
.dl-card-construction .dl-card-mark { background: var(--hm-ink); }
.dl-card-construction .dl-card-ver { background: var(--hm-lime); color: var(--hm-ink); }
.dl-card-kicker { margin: 0 0 .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.dl-card-consolidate .dl-card-kicker { color: #7d5f22; }
.dl-card-construction .dl-card-kicker { color: var(--cn-lime-ink, #5f7000); }
.dl-card-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.12; color: var(--ink); }
.dl-card-note { margin: .7rem 0 0; max-width: 60ch; color: var(--ink-3); line-height: 1.6; }
.dl-card-go { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.2rem 0 0; }
.dl-card-size { font-size: .9rem; color: var(--grey); }
.dl-card-consolidate .dl-card-btn { background: var(--hm-navy); border-color: var(--hm-navy); color: #fff; }
.dl-card-consolidate .dl-card-btn:hover { background: var(--hm-navy-2); border-color: var(--hm-navy-2); color: var(--hm-brass-2); }
.dl-card-construction .dl-card-btn { background: var(--hm-ink); border-color: var(--hm-ink); color: var(--hm-lime); }
.dl-card-construction .dl-card-btn:hover { background: #000; border-color: #000; color: #e4fb7a; }
.dl-card-facts { margin: 1.4rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.dl-card-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; align-items: baseline; }
.dl-card-facts dt { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.dl-card-facts dd { margin: 0; min-width: 0; font-size: .92rem; color: var(--ink-2); }
.dl-card-facts code { font-family: var(--mono); font-size: .86rem; overflow-wrap: anywhere; }
.dl-card-sha dd { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dl-card-sha code { flex: 1 1 18rem; padding: .35rem .5rem; border-radius: 6px; background: var(--paper-2); word-break: break-all; }
.dl-copy {
  flex: 0 0 auto; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.dl-copy:hover { border-color: var(--ink); }
.dl-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dl-card-check { margin: 1rem 0 0; font-size: .86rem; line-height: 1.6; color: var(--grey); }
.dl-card-check code { font-family: var(--mono); font-size: .82rem; overflow-wrap: anywhere; color: var(--ink-3); }
@media (max-width: 680px) {
  .dl-card { grid-template-columns: minmax(0, 1fr); }
  .dl-card-mark { width: 7.5rem; }
  .dl-card-facts > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* ---- Nothing published yet ------------------------------------------------ */
.dl-none { max-width: 46rem; margin: 0 0 clamp(2rem, 1.4rem + 2vw, 3rem); }
.dl-none h2 { margin: 0 0 .7rem; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.12; }
.dl-none p { margin: 0; line-height: 1.65; }

/* ---- From the download to a licence --------------------------------------- */
.dl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.dl-steps li {
  display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
.dl-step-n {
  display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .25rem;
  border-radius: 50%; font-family: var(--mono); font-weight: 700; font-size: .9rem;
  background: var(--ink); color: #fff;
}
.cs .dl-step-n { background: var(--hm-navy); color: var(--hm-brass-2); }
.dl-steps strong { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.dl-steps li > span:last-child { font-size: .93rem; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 860px) { .dl-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---- The form, in each product's colours ---------------------------------- */
.dl-ask .sblock-body { max-width: 44rem; }
.cs .dl-form .btn-primary { background: var(--hm-navy); border-color: var(--hm-navy); color: #fff; }
.cs .dl-form .btn-primary:hover { background: var(--hm-navy-2); border-color: var(--hm-navy-2); color: var(--hm-brass-2); }

/* ---- Construction: what there is to install ------------------------------- */
.dl-cn-go { margin-top: 1.7rem; }
.dl-main-cn .dl-card { border-color: var(--cn-line, #c9ced6); }
.dl-cn-head { max-width: 46rem; margin-bottom: 1.4rem; }
.dl-cn-head h2 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.12; }
.dl-cn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(6rem, 9rem) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
/* What travels between the two tiles: from the phone, right, to the office PC,
   left. Three marks run along a dashed wire; with reduced motion they stand
   still along it, which is the same picture without the movement. */
.dl-cn-link { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .7rem; min-width: 0; }
.dl-cn-wire {
  position: relative; display: block; width: 100%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--cn-fg, #10151e) 0 6px, transparent 6px 12px);
}
.dl-cn-wire i {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--hm-lime); box-shadow: 0 0 0 2px var(--hm-ink);
}
.dl-cn-wire i:nth-child(1) { left: 25%; }
.dl-cn-wire i:nth-child(3) { left: 75%; }
.dl-cn-link-l { font-family: var(--mono); font-size: .7rem; line-height: 1.4; text-align: center; color: var(--cn-fg-2, #4a5464); }
@media (prefers-reduced-motion: no-preference) {
  .dl-cn-wire i { animation: dl-cn-flow 3s linear infinite both; }
  .dl-cn-wire i:nth-child(1) { animation-delay: -1s; }
  .dl-cn-wire i:nth-child(3) { animation-delay: -2s; }
}
@keyframes dl-cn-flow {
  0%   { left: calc(100% - 5px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 5px; opacity: 0; }
}
.dl-cn-tile {
  position: relative; padding: 1.4rem 1.4rem 1.5rem; border: 1px solid var(--cn-line, #c9ced6); border-radius: var(--r);
  background: var(--cn-paper, #f6f7f9);
}
.dl-cn-tile h3 { margin: .9rem 0 .35rem; font-size: 1.25rem; }
.dl-cn-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 10px; background: var(--hm-ink); }
.dl-cn-ic svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--hm-lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cn:not(.cn-dark) p.dl-cn-req {
  display: inline-block; margin: 0 0 .7rem; padding: .15rem .55rem; border-radius: 6px;
  font-family: var(--mono); font-size: .78rem; font-weight: 700; color: var(--cn-fg); background: var(--cn-box, #dde1e7);
}
.dl-cn-tile p:last-child { margin: 0; line-height: 1.6; }
.cn:not(.cn-dark) p.dl-cn-more { margin: 1.2rem 0 0; font-size: .92rem; }
.dl-cn-more a { color: var(--cn-fg); text-decoration-color: var(--cn-lime-ink, #5f7000); }
@media (max-width: 760px) {
  .dl-cn-two { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  /* Stacked, the phone is below the office, so the wire stands up and the
     marks run upwards. */
  .dl-cn-link { flex-direction: row; justify-content: flex-start; gap: 1rem; padding: .2rem 0 .2rem 1.4rem; }
  .dl-cn-wire {
    flex: 0 0 2px; width: 2px; height: 4rem;
    background: repeating-linear-gradient(180deg, var(--cn-fg, #10151e) 0 6px, transparent 6px 12px);
  }
  .dl-cn-wire i, .dl-cn-wire i:nth-child(1), .dl-cn-wire i:nth-child(3) { left: 50%; }
  .dl-cn-wire i:nth-child(1) { top: 25%; }
  .dl-cn-wire i:nth-child(2) { top: 50%; }
  .dl-cn-wire i:nth-child(3) { top: 75%; }
  .dl-cn-link-l { text-align: left; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .dl-cn-wire i { animation-name: dl-cn-up; }
}
@keyframes dl-cn-up {
  0%   { top: calc(100% - 5px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 5px; opacity: 0; }
}
.cn-dark p.dl-cn-alt { margin: 1.4rem 0 0; font-size: .95rem; }
.cn-dark .dl-cn-alt a { color: var(--cn-lime); }
.dl-ask-cn .cn-form {
  margin-top: 1.8rem; max-width: 44rem; padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  background: #fff; border-radius: var(--r-lg); color: var(--ink);
}
.dl-ask-cn .cn-form label, .dl-ask-cn .cn-form .check span { color: var(--ink); }
.dl-ask-cn .cn-form .hint { color: var(--grey); }
.dl-ask-cn .cn-form .btn-primary { background: var(--cn-ink); border-color: var(--cn-ink); color: var(--cn-lime); }
.dl-ask-cn .cn-form .btn-primary:hover { background: #000; border-color: #000; }
.dl-flash { margin: 0 0 1.2rem; max-width: 44rem; }

/* ---- pair: a document in one of your companies, and its other side -------
   7 October 2026, /construction/your-companies. Two company panels and the
   wire between them. Complete at rest; armed by cn-motion.js, the offer
   shows, the wire runs and the drafted side arrives, then the steps light in
   turn. */
.cn-pair { display: grid; gap: .8rem; align-items: stretch; }
@media (min-width: 900px) { .cn-pair { grid-template-columns: minmax(0, 1fr) minmax(9rem, 13rem) minmax(0, 1fr); gap: 0; } }
.cn-pair-co {
  border-radius: 16px; padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: .8rem;
  background: var(--cn-ink, #10151e); color: #fff;
}
.cn-pair-b { background: #fff; border: 1px solid var(--cn-line, #c9ced6); color: var(--cn-fg, #10151e); }
.cn:not(.cn-dark) p.cn-pair-name { margin: 0; font: 600 .72rem "Martian Mono", var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cn-lime, #d6f545); }
.cn:not(.cn-dark) .cn-pair-b p.cn-pair-name { color: var(--cn-lime-ink, #5f7000); }
.cn-pair-doc {
  display: flex; flex-direction: column; gap: .3rem; padding: .9rem 1rem 1rem; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
}
.cn-pair-b .cn-pair-doc { background: var(--cn-paper, #f6f7f9); border: 1px dashed var(--cn-fg-2, #4a5464); }
.cn-pair-kind { font: 700 1.45rem "Archivo", var(--sans); letter-spacing: -.02em; }
.cn-pair-line { font-size: .92rem; line-height: 1.5; color: var(--cn-pale, #aab4c2); }
.cn-pair-b .cn-pair-line { color: var(--cn-fg-2, #4a5464); }
.cn-pair-state {
  align-self: flex-start; margin-top: .35rem; padding: .2rem .55rem; border-radius: 6px;
  font: 600 .72rem "Martian Mono", var(--mono); letter-spacing: .04em;
}
.cn-pair-done { background: var(--cn-lime, #d6f545); color: var(--cn-ink, #10151e); }
.cn-pair-wait { background: var(--cn-ink, #10151e); color: var(--cn-lime, #d6f545); }
.cn-pair-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.3rem 0; }
@media (min-width: 900px) { .cn-pair-link { padding: .4rem 0; } }
.cn-pair-offer {
  position: relative; z-index: 1; padding: .45rem .8rem; border-radius: 8px; text-align: center;
  font: 600 .8rem "Archivo", var(--sans); background: var(--cn-lime, #d6f545); color: var(--cn-ink, #10151e);
  box-shadow: 0 0 0 4px var(--cn-ground, #e9ecef);
  transition: opacity .45s ease .3s, transform .45s ease .3s;
}
.cn-pair-wire { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; overflow: hidden; }
.cn-pair-wire i {
  position: absolute; inset: 0; background: repeating-linear-gradient(180deg, var(--cn-ink, #10151e) 0 6px, transparent 6px 11px);
  transform-origin: 50% 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .7s;
}
@media (min-width: 900px) {
  .cn-pair-wire { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .cn-pair-wire i { background: repeating-linear-gradient(90deg, var(--cn-ink, #10151e) 0 6px, transparent 6px 11px); transform-origin: 0 50%; }
  .cn-pair-wire::after {
    content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
    border-top: 2px solid var(--cn-ink, #10151e); border-right: 2px solid var(--cn-ink, #10151e); transform: rotate(45deg);
  }
}
.cn-pair-drafted { transition: opacity .6s ease 1.3s, transform .6s ease 1.3s; }
.cn-pair-steps { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; counter-reset: cnpair; }
@media (min-width: 900px) { .cn-pair-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cn-pair-steps li {
  counter-increment: cnpair; display: flex; flex-direction: column; gap: .35rem; margin: 0;
  padding: 1rem 1.1rem 1.1rem; border-radius: 10px; background: #fff; border: 1px solid var(--cn-line, #c9ced6); border-top: 3px solid var(--cn-ink, #10151e);
  transition: opacity .5s ease calc(1.6s + var(--k) * .25s), transform .5s ease calc(1.6s + var(--k) * .25s);
}
.cn-pair-steps li::before { content: counter(cnpair, decimal-leading-zero); font: 700 .72rem "Martian Mono", var(--mono); color: var(--cn-lime-ink, #5f7000); }
.cn-pair-steps strong { color: var(--cn-fg, #10151e); font-size: 1rem; line-height: 1.3; }
.cn:not(.cn-dark) .cn-pair-steps span { font-size: .9rem; line-height: 1.55; color: var(--cn-fg-2, #4a5464); }
.cn-feat[data-cn-armed]:not(.is-in) .cn-pair-offer { opacity: 0; transform: scale(.92); }
.cn-feat[data-cn-armed]:not(.is-in) .cn-pair-wire i { transform: scaleY(0); }
@media (min-width: 900px) { .cn-feat[data-cn-armed]:not(.is-in) .cn-pair-wire i { transform: scaleX(0); } }
.cn-feat[data-cn-armed]:not(.is-in) .cn-pair-drafted { opacity: 0; transform: translateY(10px); }
@media (min-width: 900px) { .cn-feat[data-cn-armed]:not(.is-in) .cn-pair-drafted { transform: translateX(-16px); } }
.cn-feat[data-cn-armed]:not(.is-in) .cn-pair-steps li { opacity: .2; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .cn-pair-offer, .cn-pair-wire i, .cn-pair-drafted, .cn-pair-steps li { transition: none; }
}

/* ---- relay: Murgese Connect, phone to relay to office PC -----------------
   7 October 2026, /construction/murgese-connect. A sealed packet runs from
   the phone to the office PC and passes BEHIND the relay: it carries the
   connection and cannot open it. At rest, and with no script or reduced
   motion, the packet sits still between the phone and the relay. */
.cn-relay { position: relative; }
.cn-relay-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; position: relative; z-index: 2; }
.cn-relay-node {
  position: relative; margin: 0; padding: 1.2rem 1.25rem 1.3rem; border-radius: 16px;
  display: flex; flex-direction: column; gap: .35rem;
  background: #fff; border: 1px solid var(--cn-line, #c9ced6);
}
.cn-relay-node-1 { background: var(--cn-ink, #10151e); border-color: var(--cn-ink, #10151e); }
.cn-relay-ic { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .45rem; border-radius: 10px; background: var(--cn-ink, #10151e); }
.cn-relay-node-1 .cn-relay-ic { background: var(--cn-lime, #d6f545); }
.cn-relay-ic svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: var(--cn-lime, #d6f545); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cn-relay-node-1 .cn-relay-ic svg { stroke: var(--cn-ink, #10151e); }
.cn-relay-node strong { font-size: 1.12rem; color: var(--cn-fg, #10151e); }
.cn-relay-node-1 strong { color: #fff; }
.cn-relay-sub { font: 600 .74rem "Martian Mono", var(--mono); letter-spacing: .02em; color: var(--cn-lime-ink, #5f7000); overflow-wrap: anywhere; }
.cn-relay-node-1 .cn-relay-sub { color: var(--cn-lime, #d6f545); }
.cn-relay-l { font-size: .92rem; line-height: 1.55; color: var(--cn-fg-2, #4a5464); }
.cn-relay-node-1 .cn-relay-l { color: var(--cn-pale, #aab4c2); }
/* Between stacked nodes on a phone, an arrow down the middle. */
.cn-relay-node:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -1.35rem; width: 10px; height: 10px; margin-left: -5px;
  border-right: 2px solid var(--cn-ink, #10151e); border-bottom: 2px solid var(--cn-ink, #10151e); transform: rotate(45deg);
}
.cn-relay-wire { display: none; }
@media (min-width: 900px) {
  .cn-relay-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.4rem; }
  .cn-relay-node:not(:last-child)::after { left: auto; right: -3.95rem; bottom: auto; top: calc(2.7rem - 5px); margin: 0; border-bottom: 0; border-top: 2px solid var(--cn-ink, #10151e); transform: rotate(45deg); }
  .cn-relay-wire {
    display: block; position: absolute; z-index: 1; left: calc((100% - 8.8rem) / 3); right: calc((100% - 8.8rem) / 3); top: 2.7rem; height: 2px;
    background: repeating-linear-gradient(90deg, var(--cn-ink, #10151e) 0 6px, transparent 6px 11px);
  }
  /* The packet sits on the wire, under the cards: it shows in the gaps and
     goes out of sight behind each card, the relay's included. */
  .cn-relay-packet {
    position: absolute; top: 50%; left: 2.2rem; width: 30px; height: 30px; margin: -15px 0 0 -15px;
    display: grid; place-items: center; border-radius: 8px; background: var(--cn-lime, #d6f545); box-shadow: 0 0 0 2px var(--cn-ink, #10151e);
  }
  .cn-relay-packet svg { width: 18px; height: 18px; fill: none; stroke: var(--cn-ink, #10151e); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .cn-feat.is-in .cn-relay-packet { animation: cn-relay-run 5.2s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes cn-relay-run {
  0%   { left: 0%; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.cn-relay-facts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 900px) { .cn-relay-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cn-relay-facts li {
  margin: 0; padding: 1rem 1.1rem 1.1rem; border-radius: 10px; display: flex; flex-direction: column; gap: .35rem;
  background: var(--cn-paper, #f6f7f9); border: 1px solid var(--cn-line, #c9ced6); border-left: 4px solid var(--cn-lime, #d6f545);
}
.cn-relay-facts strong { color: var(--cn-fg, #10151e); }
.cn:not(.cn-dark) .cn-relay-facts span { font-size: .9rem; line-height: 1.55; color: var(--cn-fg-2, #4a5464); }
.cn-feat[data-cn-armed]:not(.is-in) .cn-relay-node { opacity: .25; transform: translateY(8px); }
.cn-relay-node { transition: opacity .5s ease calc(var(--k) * .3s), transform .5s ease calc(var(--k) * .3s); }
@media (prefers-reduced-motion: reduce) { .cn-relay-node { transition: none; } }

/* The onward link at the foot of a moving piece. */
.cn:not(.cn-dark) p.cn-feat-more { margin: 1rem 0 0; }
.cn-feat-more a { font-weight: 700; color: var(--cn-fg, #10151e); text-decoration-color: var(--cn-lime-ink, #5f7000); }
.cn-feat-more a::after { content: "\00a0\2192"; }

/* ---- Murgese Connect on /construction, 7 October 2026 -------------------
   A light band between the clock and the no-signal band: the words on the
   left, two of the subcontractor's phone screens on the right, overlapped
   like phones laid on a desk. */
.cn-connect { padding: clamp(3.2rem, 2.2rem + 4vw, 6rem) 0; overflow: hidden; }
.cn-connect-in { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 4rem); align-items: center; }
@media (min-width: 960px) { .cn-connect-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.cn-connect-text h2 { margin: 0 0 1rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; max-width: 18ch; }
.cn:not(.cn-dark) p.cn-connect-lede { margin: 0; max-width: 54ch; font-size: 1.06rem; line-height: 1.65; color: var(--cn-fg-2, #4a5464); }
.cn-connect-points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.cn:not(.cn-dark) .cn-connect-points li {
  position: relative; margin: 0; padding-left: 1.9rem; color: var(--cn-fg, #10151e); font-weight: 600; line-height: 1.45;
}
.cn-connect-points li::before {
  content: ""; position: absolute; left: 0; top: .12rem; width: 1.15rem; height: 1.15rem; border-radius: 5px;
  background: var(--cn-ink, #10151e);
}
.cn-connect-points li::after {
  content: ""; position: absolute; left: .38rem; top: .3rem; width: .36rem; height: .62rem;
  border-right: 2px solid var(--cn-lime, #d6f545); border-bottom: 2px solid var(--cn-lime, #d6f545); transform: rotate(45deg);
}
.cn-connect-go { margin: 1.8rem 0 0; }
.btn.cn-btn-dark { background: var(--cn-ink, #10151e); border-color: var(--cn-ink, #10151e); color: var(--cn-lime, #d6f545); }
.btn.cn-btn-dark:hover { background: #000; border-color: #000; color: #e3ff52; }
.btn.cn-btn-dark:focus-visible { outline: 2px solid var(--cn-ink, #10151e); outline-offset: 3px; }
.btn.cn-btn-dark::after { content: "\00a0\2192"; }
.cn-connect-phones { position: relative; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 34rem; justify-self: center; width: 100%; }
.cn-connect-phone {
  position: relative; padding: 8px; border-radius: 30px; background: var(--cn-ink, #10151e);
  box-shadow: 0 30px 60px -24px rgba(16, 21, 30, .45);
}
.cn-connect-phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
.cn-connect-phone-1 { z-index: 1; transform: rotate(-4deg) translateX(8%); }
.cn-connect-phone-2 { z-index: 2; transform: rotate(3deg) translate(-6%, 9%); }
.cn-connect-phones figcaption { grid-column: 1 / -1; margin-top: 3.8rem; font-size: .84rem; text-align: center; color: var(--cn-fg-3, #626b75); }
@media (prefers-reduced-motion: no-preference) {
  .cn-connect-phone { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .cn-connect-phones:hover .cn-connect-phone-1 { transform: rotate(-6deg) translateX(2%); }
  .cn-connect-phones:hover .cn-connect-phone-2 { transform: rotate(5deg) translate(0, 7%); }
}

/* The line under Construction's month on the home page, 7 October 2026. */
.hm-band p.hm-band-also { margin: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem) 0 0; max-width: 62rem; font-size: 1rem; line-height: 1.65; color: var(--cn-pale, #aab4c2); }
.hm-band-also a { color: #fff; font-weight: 700; text-decoration-color: var(--hm-lime); text-underline-offset: 3px; }
.hm-band-also a:hover { color: var(--hm-lime); }