/* Manrope, self-hosted. Google Fonts sends every visitor's IP to a third
   party on every page load, which is the wrong shape for a site whose
   proposition is showing what others do not show, and for an Australian
   Privacy Act disclosure. Variable, weights 200-800 in one file per subset. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lucent1 marketing site
   Palette values are read from the committed SVG assets in /assets and
   recorded in PRODUCT.md. Do not sample them from a render. */

:root {
  /* Brand */
  --paper:      #FFFFFF;
  --slate:      #334155;
  --lime:       #84CC16;   /* dark surfaces only, 1.98:1 on Paper */
  --deep-lime:  #4D7C0F;   /* light surfaces, 4.99:1 on Paper */

  /* Derived neutrals, mixes of Deep Slate and Paper */
  --slate-75:   #667080;   /* 5.01:1 on Paper */
  --slate-20:   #D6D9DD;   /* 7.31:1 on Deep Slate */
  --hairline:   #E7E8EB;   /* non-text only */

  /* Surface-dependent roles. Redefined inside the dark band. */
  --ground:     var(--paper);
  --ink:        var(--slate);
  --ink-muted:  var(--slate-75);
  --accent:     var(--deep-lime);
  --focus:      var(--deep-lime);

  /* Type scale, fluid. Manrope only, headings in the light weights. */
  --t--1:  clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --t-0:   clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --t-1:   clamp(1.15rem, 1.08rem + 0.34vw, 1.38rem);
  --t-2:   clamp(1.40rem, 1.24rem + 0.78vw, 1.95rem);
  --t-3:   clamp(1.85rem, 1.50rem + 1.72vw, 3.05rem);
  --t-4:   clamp(1.80rem, 0.90rem + 5.39vw, 5.75rem);
  --t-fig: clamp(3.00rem, 2.10rem + 4.50vw, 5.25rem);

  /* Spacing scale */
  --s-1:  0.5rem;
  --s-2:  0.75rem;
  --s-3:  1rem;
  --s-4:  1.5rem;
  --s-5:  2.25rem;
  --s-6:  3.5rem;
  --s-7:  5.5rem;
  --s-8:  8rem;

  --measure: 66ch;
  --page-max: 66rem;
  --page-pad: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
  --rail: clamp(2.75rem, 1rem + 11vw, 14rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Anchor targets clear the sticky numeral rather than landing under it. */
:target, .clause__body > :is(h1, h2) { scroll-margin-top: var(--s-6); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-weight: 250;
  letter-spacing: -0.021em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

::selection { background: var(--deep-lime); color: var(--paper); }
.band ::selection { background: var(--lime); color: var(--slate); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

main:focus:not(:focus-visible) { outline: none; }

/* Visually hidden, still announced. Tracking is reset because these carry
   sentences, not the bare digits the display tracking was set for. */
.u-sr {
  letter-spacing: normal;
  word-spacing: normal;
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s-3);
  background: var(--slate);
  color: var(--paper);
  padding: var(--s-2) var(--s-3);
  z-index: 10;
}
.skip:focus { left: var(--s-3); }

/* ---------- Masthead ---------- */

/* The masthead is chrome, and chrome is Deep Slate. White on a white hero
   made the header disappear into the page. Tokens are redefined at the
   element so everything inside recolours correctly, the same mechanism the
   inverted section uses. Paper on Deep Slate is 10.35:1, Slate 20 is
   7.31:1. No Lime here: the accent belongs to the mechanism, and the Lime
   in the logotype is part of the asset, which 1.4.3 exempts. */
.masthead {
  background: var(--slate);
  --ground:    var(--slate);
  --ink:       var(--paper);
  --ink-muted: var(--slate-20);
  color: var(--paper);
  border-bottom: 0;
}

.masthead__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s-4) var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}

.masthead__logo { display: inline-flex; align-items: center; min-height: 44px; }
.masthead__logo img { display: block; width: 176px; height: auto; }

.masthead__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

.masthead__nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--paper);
  text-decoration: none;
  font-size: var(--t--1);
  letter-spacing: 0.01em;
}
.masthead__nav a:hover { color: var(--slate-20); text-decoration: underline; text-underline-offset: 0.3em; }

/* Announced by aria-current, and shown. Weight and a rule, not colour, so
   the signal never depends on hue. */
.masthead__nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom: 1px solid var(--paper);
}
.colophon__nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
}

/* ---------- Clause structure ---------- */

.clause { border-bottom: 1px solid var(--hairline); }
.clause--close { border-bottom: 0; }

.clause__grid,
.band > .clause__grid {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s-7) var(--page-pad);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
}

.clause--open .clause__grid { padding-block: var(--s-8) var(--s-7); }

.clause__num {
  grid-column: 1;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  line-height: 1.9;
  margin: 0;
}

.clause__body { grid-column: 2; min-width: 0; }

.clause__body > * + * { margin-top: var(--s-4); }
.clause__body > h2 + * { margin-top: var(--s-5); }

h2 { font-size: var(--t-2); max-width: var(--measure); }

.prose { max-width: var(--measure); text-wrap: pretty; }
.prose--lead { font-size: var(--t-1); font-weight: 300; letter-spacing: -0.008em; line-height: 1.45; max-width: 52ch; }

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

/* Breaks at its own comma into two lines. Measured at the shipped weight
   and tracking: "Software distribution," is 8.85em and "Software
   distribution, built" is 11.7em, so a cap between the two forces the
   break at the comma at every font size. `ch` did not bite, because it
   resolved wider than the column and let the container choose. `balance`
   is off because it strands "Software" on a line of its own. */
.display {
  font-size: var(--t-4);
  font-weight: 200;
  letter-spacing: -0.034em;
  line-height: 1.0;
  max-width: 10em;
  text-wrap: wrap;
}

/* About's opening has no comma to break at, and at 1440 "Software
   distribution" measures 792px against a 770px column, so no cap can hold
   the first line: the container takes the break and strands "era." alone on
   line four. `balance` is the only device that keeps the break off the
   container for this string, and it is scoped to it rather than applied to
   `.display`, because on the homepage's string it strands "Software"
   instead. Measured on the shipped text at 375, 768, 1024 and 1440. */
.display--balance { text-wrap: balance; }

.lede {
  text-wrap: pretty;
  font-size: var(--t-1);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.008em;
  max-width: 44ch;
}

.standfirst {
  font-size: var(--t--1);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.clause--open .clause__body > .lede { margin-top: var(--s-5); }


/* ---------- The numbering, made functional ---------- */

/* The numeral sticks while its own clause is on screen, so the reader
   always knows which one they are in. --ground is redefined inside the
   band, so this picks up the right backdrop on both surfaces for free. */
/* The clause title shows beside the numeral on a phone, where the rail
   index is hidden and the numeral is otherwise the only orientation across
   a very long page. The string already existed for screen readers; showing
   it to sighted users costs nothing. */
.clause__label { display: none; }

.clause__num {
  position: sticky;
  top: 0;
  align-self: stretch;
  background: var(--ground);
  padding-block: var(--s-2);
  z-index: 2;
}

/* Desktop jump index. Lives in the rail the clauses already reserve, so it
   costs no measure. No active state and no JavaScript: it is a jump list,
   not a progress indicator. It passes behind the one inverted band rather
   than fighting it for contrast, which is why it needs no extra colour. */
.railnav { display: none; }

@media (min-width: 46.0625rem) {
  .railnav {
    display: block;
    position: sticky;
    top: var(--s-7);
    height: 0;
    z-index: 0;
  }
  .railnav__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-pad);
  }
  .railnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 2.75rem;
  }
  /* Navigation, not the page's own voice: lighter and unspaced, so it never
     reads as a second clause numeral even when one lands on its baseline. */
  .railnav__list a {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    min-height: 44px;
    padding-block: var(--s-1);
    font-size: var(--t--1);
    font-weight: 400;
    letter-spacing: normal;
    color: var(--slate-75);
    text-decoration: none;
  }
  .railnav__label { display: none; }

  /* The title only appears where the rail is wide enough to hold it. */
  /* The title only appears where the rail is wide enough to hold it beside
     the clause numeral. 2.75rem is reserved on the right for the numeral's
     glyphs plus its inset, so the two never share horizontal space. */
  @media (min-width: 64rem) {
    .railnav__list { width: calc(var(--rail) - 2.75rem); }
    .railnav__label { display: block; line-height: 1.25; }
    .railnav__list a { align-items: flex-start; }
  }
  .railnav__list a:hover { color: var(--deep-lime); }
  .railnav__list a:focus-visible { outline-offset: 2px; }

  /* The numeral sits at the inner edge of the rail so its glyphs never
     land on the index. Its cell still spans the rail, so it drops its
     backdrop and stops taking pointer events, otherwise it would paint
     over the index and swallow clicks meant for it. */
  .clause__num {
    text-align: right;
    padding-right: var(--s-3);
    background: none;
    pointer-events: none;
    color: var(--ink);
  }

  /* The band is the one inversion; it covers the index instead of
     hosting it, which keeps every colour inside its own surface. */
  .band { position: relative; z-index: 1; }
}

.onward { font-size: var(--t--1); }
.onward a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Audience lanes ---------- */

.lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

/* Parity is the invariant: identical treatment, no ranking, at every width. */
.lane {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.lane__title {
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lane__promise { text-wrap: pretty; font-size: var(--t-1); font-weight: 300; line-height: 1.4; letter-spacing: -0.008em; }
.lane__support { color: var(--ink-muted); }
.lane__more { margin-top: auto; font-size: var(--t--1); }
.lane__more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- The inverted band ---------- */

/* On the inverted band the accent belongs to the figure carrying the argument,
   so links there take the band's ink and rely on the underline for affordance.
   Without this a single cross-reference would put Lime on the page twice. */
.band a { color: var(--ink); text-decoration-thickness: 1px; }
.band a:hover { text-decoration-thickness: 2px; }

.band {
  background: var(--slate);
  --ground:    var(--slate);
  --ink:       var(--paper);
  --ink-muted: var(--slate-20);
  --accent:    var(--lime);
  --focus:     var(--lime);
  color: var(--paper);
}

.band .prose { color: var(--ink-muted); }

.band__assert {
  font-size: var(--t-2);
  font-weight: 250;
  letter-spacing: -0.021em;
  line-height: 1.28;
  max-width: 30ch;
  color: var(--paper);
}
.clause__body > .band__assert + .band__assert { margin-top: var(--s-3); }

/* The quote block. The vendor base cost is the largest figure on the band,
   because it is the number the legacy model does not show. The Lucent1 1%
   is deliberately the smallest: it is the ethos, and it never leads. */
.quote { margin: var(--s-6) 0 0; }

/* A sentence, so it is set as one. Uppercase is reserved for the row
   labels, which are labels. */
.quote__caption {
  font-size: var(--t-0);
  color: var(--ink-muted);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink-muted);
}

/* Under the WCAG 1.4.12 text-spacing overrides the tabular figures, which
   must not break mid-number, push past a phone's width. The table scrolls
   in its own focusable region rather than widening the document. */
.quote__scroll { overflow-x: auto; }
.quote__scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.quote__table {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin-top: var(--s-5);
}

.quote__row > * { padding-block: var(--s-3); vertical-align: baseline; }

.quote__label {
  text-align: left;
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-right: var(--s-5);
}

.quote__amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  color: var(--ink);
}

.quote__amount--base {
  font-size: var(--t-fig);
  font-weight: 250;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.quote__row--base .quote__label { color: var(--ink); }

.quote__amount--fee { font-size: var(--t-1); font-weight: 500; color: var(--accent); }
.quote__amount--part { font-size: var(--t-1); font-weight: 400; color: var(--ink-muted); }

.quote__row--total > * { border-top: 1px solid var(--ink-muted); padding-top: var(--s-4); }
.quote__amount--total {
  font-size: var(--t-3);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.quote__row--total .quote__label { color: var(--ink); font-size: var(--t-0); letter-spacing: 0.02em; }

.quote__notes { margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.quote__note { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
.quote__note dt {
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.quote__note dd { margin: 0; color: var(--ink-muted); max-width: 54ch; text-wrap: pretty; }

/* ---------- Stated rows, claims and limits in one treatment ---------- */

.stated { margin-bottom: 0; }

.stated__row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  padding-bottom: var(--s-4);
}
/* The rule belongs between rows, so it is declared on the adjacent sibling
   rather than on every row and then cancelled on the first. */
.stated__row + .stated__row { border-top: 1px solid var(--hairline); padding-top: var(--s-4); }

.stated__term {
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stated__def { margin: 0; max-width: var(--measure); text-wrap: pretty; }

/* ---------- The single action ---------- */

.closer {
  font-size: var(--t-3);
  font-weight: 200;
  letter-spacing: -0.026em;
  max-width: 22ch;
}

/* Real vertical padding rather than relying on min-height to do it, so a
   wrapped or longer label can never sit flush against the fill. */
.action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s-2) var(--s-5);
  background: var(--slate);
  color: var(--paper);
  text-decoration: none;
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.action:hover { background: var(--deep); }
/* On the deep ground the fill inverts rather than going lighter slate on
   darker slate, which would not carry. */
.sec--deep .action, .foot .action { background: var(--paper); color: var(--slate); }
.sec--deep .action:hover, .foot .action:hover { background: var(--slate-20); }



/* ---------- The rate, Pricing only ---------- */

/* Larger than --t-fig, which is the largest figure elsewhere. On every other
   surface the rate is a small component of a worked example, correctly,
   because there the vendor base cost is the argument. Here it is the
   subject. aria-hidden because the gloss beneath states it in words. */
.rate {
  font-size: clamp(5rem, 2rem + 14vw, 13rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-5);
}

/* The One Appearance Rule: the rate above already carries the page's single
   Lime, so the same figure inside the worked example below it renders in the
   band's ink instead. Elsewhere the table's fee row is the only accent on
   its page and keeps it. */
.rate ~ .quote .quote__amount--fee { color: var(--ink); font-weight: 400; }

.rate__gloss {
  font-size: var(--t-1);
  font-weight: 300;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 34ch;
  margin-top: var(--s-4) !important;
}

/* ---------- Pillars and objections ---------- */

.pillar__close {
  font-size: var(--t-1);
  font-weight: 300;
  letter-spacing: -0.008em;
  line-height: 1.4;
  max-width: 40ch;
  text-wrap: pretty;
}

/* Speech set as speech. The question is the sceptic's, not ours, so it is
   given its own voice through weight and scale rather than a second face,
   which the One Family Rule does not permit. */
.exchange + .exchange { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--hairline); }

/* The question is the sceptic's, so it is set smaller, lighter and muted:
   someone else speaking. The answer is ours and is the darker, larger
   voice, which on a page arguing transparency is the right way round.
   Three axes of difference, none of them a second typeface. */
.exchange__q {
  font-size: var(--t-1);
  font-weight: 300;
  letter-spacing: -0.008em;
  line-height: 1.4;
  max-width: 34ch;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.exchange__a {
  max-width: var(--measure);
  text-wrap: pretty;
  color: var(--ink);
}
.exchange__q + .exchange__a { margin-top: var(--s-4); }
.exchange__a + .exchange__a { margin-top: var(--s-3); }

/* ---------- Enquiry form (Operate) ---------- */

/* DOM order is fields, terms, submit. On mobile that source order renders
   as-is, so the terms accompany the ask directly above the button. On
   desktop the grid lifts the terms into column two and drops the submit
   below the fields, from the same markup, with no duplication and no JS.
   Because DOM order is the mobile order, it is also the assistive-tech
   order at every width. */
.enquiry { display: grid; gap: var(--s-6); margin-top: var(--s-6); }

.enquiry__fields { display: grid; gap: var(--s-5); align-content: start; }

/* 60rem, not the site's 46rem. At 737px the fixed terms column measured
   272px against a 282px field column, which is the competition the device
   exists to avoid. Fractional tracks mean it can never approach parity. */
@media (min-width: 60rem) {
  .enquiry {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-6);
    align-items: start;
  }
  .enquiry__fields { grid-column: 1; grid-row: 1; }
  .enquiry__terms  { grid-column: 2; grid-row: 1; }
  .enquiry__act    { grid-column: 1; grid-row: 2; }
}

/* Every field is drawn at rest, so the form reads complete before anyone
   types into it. Labels are always visible; a placeholder never does a
   label's job. */
.field { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0; min-width: 0; }

.field__label {
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0;
}

.field__help { font-size: var(--t--1); color: var(--ink-muted); max-width: 52ch; margin: 0; text-wrap: pretty; }

/* A field boundary is a meaningful control edge, not decoration, so it
   takes Slate 75 at 5.01:1 rather than the decorative Hairline at 1.23:1.
   WCAG 1.4.11 wants 3:1 for the boundary of a user interface component. */
.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--s-2) 0;
  border: 0;
  border-bottom: 1px solid var(--slate-75);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  appearance: none;
}
.field__input--area { min-height: 7rem; resize: vertical; line-height: 1.6; }
.field__input:hover { border-bottom-color: var(--ink); }
.field__input:focus-visible { border-bottom-color: var(--ink); border-bottom-width: 2px; padding-bottom: calc(var(--s-2) - 1px); }

/* Native controls, sized up. accent-color keeps the checked state in ink
   rather than browser blue, and keeps the submit the only chromatic
   element on the page. */
.field--choice { display: grid; gap: var(--s-2); }
.field--choice .field__label { margin-bottom: var(--s-2); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  cursor: pointer;
}
.choice input[type="radio"] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0;
  accent-color: var(--slate);
  flex: none;
}

.enquiry__terms { border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.terms__title {
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-4);
}
.enquiry__terms .stated__row { display: block; padding-bottom: var(--s-3); }
.enquiry__terms .stated__row + .stated__row { padding-top: var(--s-3); }
.enquiry__terms .stated__term { margin-bottom: var(--s-1); }

button.action { border: 0; cursor: pointer; font-family: inherit; }

/* ---------- Colophon ---------- */

.colophon { border-top: 1px solid var(--hairline); background: var(--paper); }

.colophon__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s-6) var(--page-pad) var(--s-7);
}

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
}

.colophon__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
}

.colophon__nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--t--1);
  color: var(--slate);
  text-decoration: none;
}
.colophon__nav a:hover { color: var(--deep-lime); }

/* The address is inline in a sentence, which WCAG 2.5.8 exempts from the
   target-size minimum. PRODUCT.md's 44px rule carries no such exception,
   so the padding satisfies the stricter of the two without breaking the
   line it sits in. */
.colophon__contact {
  margin-top: var(--s-4);
  font-size: var(--t-0);
}
.colophon__contact a {
  display: inline-block;
  padding-block: var(--s-2);
}

.colophon__legal {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--t--1);
  color: var(--slate-75);
  max-width: var(--measure);
}

/* ---------- Adaptation ---------- */

@media (max-width: 46rem) {
  /* The masthead was taking 24% of the fold before the message started. */
  .masthead__inner { padding-block: var(--s-2); gap: var(--s-2) var(--s-4); }
  .masthead__nav ul { gap: var(--s-1) var(--s-4); }
  .masthead__logo img { width: clamp(128px, 34vw, 160px); }

  .clause__grid,
  .band > .clause__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--s-6);
  }
  .clause--open .clause__grid { padding-block: var(--s-4) var(--s-6); }

  .clause__num {
    grid-column: 1;
    margin-bottom: var(--s-3);
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
  }
  .clause__label {
    display: inline;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .clause__body { grid-column: 1; }

  /* Lanes stack, and stay identical. Neither becomes the default. */
  .lanes { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }

  .stated__row,
  .quote__note { grid-template-columns: minmax(0, 1fr); }
  .stated__term,
  .stated__def,
  .quote__note dt,
  .quote__note dd { grid-column: 1; }
  .quote__label { padding-right: var(--s-3); }

  .action { display: flex; justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  a, .action { transition: color 120ms ease, background-color 120ms ease, text-decoration-thickness 120ms ease; }
  .field__input { transition: border-bottom-color 120ms ease; }
}

/* ==========================================================================
   v2 surface system. Added for the homepage rebuild.

   The prohibitions on containment, surfaces, elevation and rounding were
   lifted once the brand existed. The core idea is three grounds rather than
   two: Paper, a tinted paper for alternating sections, and the deep ground
   that carries the one inversion and the footer. A reader sees the shape of
   the page before reading a word, which hairlines alone never delivered.

   Contrast measured on the tinted ground before anything shipped on it:
   Deep Slate 9.65:1, Slate 75 4.69:1, Deep Lime 4.65:1. All pass AA.
   The ledger surface stays exactly Deep Slate, so Lime keeps its measured
   5.24:1 and the never-on-Paper rule is untouched.

   Radius is the logo mark's own curve. The mark is 452.67 square with an
   89.1 corner, 19.7% of the side, which at the sizes interface elements
   actually appear resolves to the 6, 10 and 14px scale below.
   ========================================================================== */

:root {
  --tint:       #F5F6F7;
  --edge:       #E4E6EA;
  --deep:       #2A3648;
  --deep-edge:  #46536A;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;

  --lift: 0 1px 2px rgba(51, 65, 85, 0.04), 0 6px 16px rgba(51, 65, 85, 0.05);

  --shell: 76rem;
  /* The old container. The masthead and the eight pages not yet rebuilt
     still use it; sections on the rebuilt homepage use --shell. */
  --shell-pad: clamp(1.25rem, 0.6rem + 5.5vw, 6rem);
  --sec-pad: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem);
}

/* ---------- Sections ---------- */

.sec { background: var(--ground); }
.sec__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  padding-block: var(--sec-pad);
}

.sec--tint { background: var(--tint); --ground: var(--tint); }

.sec--deep {
  background: var(--deep);
  --ground:    var(--deep);
  --ink:       var(--paper);
  --ink-muted: var(--slate-20);
  --accent:    var(--lime);
  --focus:     var(--lime);
  --edge:      var(--deep-edge);
  color: var(--paper);
}
/* On deep ground the accent belongs to the figure carrying the argument, so
   links take the ground's ink and rely on the underline. */
.sec--deep a { color: var(--ink); }

/* ---------- Section header ---------- */

.sec__head { max-width: 46rem; }

.sec__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 var(--s-3);
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.sec__eyebrow b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sec__eyebrow span { letter-spacing: 0.02em; }

.sec__title {
  font-size: var(--t-2);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.sec__lead {
  font-size: var(--t-1);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.008em;
  max-width: 46ch;
  margin: var(--s-4) 0 0;
  color: var(--ink);
  text-wrap: pretty;
}
.sec__body { max-width: var(--measure); margin: var(--s-4) 0 0; text-wrap: pretty; }
.sec__head + .grid, .sec__head + .ledger-wrap, .sec__head + .onward { margin-top: var(--s-6); }

/* ---------- Hero ---------- */

/* Two columns from 60rem: the headline holds the left, the lede and the
   note hold the right. A single left-aligned text block in a shell this
   wide leaves the right half empty, which reads as a mistake rather than
   as asymmetry. */
.hero .sec__inner { padding-block: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem) var(--sec-pad); }
.hero__grid { display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 72rem) {
  /* The headline column is sized so the string breaks at its own comma at
     every width, rather than leaving the break to the column. Measured:
     "Software distribution," is 8.85em and "Software distribution, built"
     is 11.7em, so a column between the two forces the comma break. */
  .hero__grid { grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); gap: var(--s-6); }
  .hero__aside { padding-bottom: 0.35rem; }
}

.hero__title {
  font-size: clamp(1.80rem, 1.4375rem + 3.1vw, 4.25rem);
  font-weight: 200;
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin: 0;
  max-width: 10em;
  text-wrap: wrap;
}
.hero__lede {
  font-size: var(--t-1);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.008em;
  max-width: 40ch;
  margin: 0;
  text-wrap: pretty;
}
.hero__note {
  margin: var(--s-4) 0 0;
  font-size: var(--t--1);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* ---------- Cards ---------- */

.grid { display: grid; gap: var(--s-4); }
/* Explicit column counts rather than auto-fit. Auto-fit ran the four cards
   three across at 1195, which broke the pairing the content has. */
.grid--2 { grid-template-columns: minmax(0, 1fr); }
.grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  padding: clamp(1.375rem, 1rem + 1.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.sec--deep .card { background: var(--slate); }

.card__title {
  margin: 0;
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--ink);
}
.card__body { margin: 0; color: var(--ink); text-wrap: pretty; }
.card__more { margin: auto 0 0; padding-top: var(--s-3); font-size: var(--t--1); }
.card__more a { display: inline-flex; align-items: center; min-height: 44px; }

/* The two audience cards, held in enforced parity. Identical in every
   respect but their words, at every width. */
.card--lane { gap: var(--s-3); }
.card--lane .card__title { font-size: var(--t-1); font-weight: 300; letter-spacing: -0.014em; }
.card--lane .card__support {
  margin: 0;
  font-size: var(--t--1);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* ---------- The ledger ---------- */

.ledger-wrap { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 60rem) {
  .ledger-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--s-6); }
}

.ledger {
  background: var(--slate);
  border: 1px solid var(--deep-edge);
  border-radius: var(--r-3);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  overflow-x: auto;
}
.ledger__caption {
  margin: 0 0 var(--s-4);
  font-size: var(--t--1);
  color: var(--slate-20);
}
.ledger__table { width: 100%; border-collapse: collapse; }

/* Every row is the same height and every label sits on its figure's
   baseline. The previous ledger centred labels against figures of three
   different sizes, so baselines drifted by up to 23px and only agreed on
   the middle row by accident. */
.ledger__row > * {
  padding-block: var(--s-3);
  vertical-align: baseline;
  border-bottom: 1px solid var(--deep-edge);
}
.ledger__row:last-child > * { border-bottom: 0; padding-bottom: 0; }
.ledger__row--total > * { border-bottom: 0; border-top: 1px solid var(--slate-20); padding-top: var(--s-4); }

.ledger__label {
  text-align: left;
  font-size: var(--t--1);
  font-weight: 500;
  /* 0.04em, not 0.06. Longer ledger labels such as "Initial term, 36
     months" are read as running text at the wider value. */
  letter-spacing: 0.04em;
  color: var(--slate-20);
  white-space: nowrap;
  padding-right: var(--s-4);
}
.ledger__figure {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--t-2);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--paper);
  white-space: nowrap;
}
/* The vendor base cost is the number the legacy model does not show, so it
   keeps the rank. Weight and colour carry it now, not a 4:1 size gap. */
.ledger__figure--base { font-weight: 400; }
.ledger__figure--fee { color: var(--lime); }
/* One Appearance holds per page, not per component. Where the accent is
   already spent, on Pricing's rate figure and on How it Works' first
   ledger, later fee rows take the ground's ink instead. */
.ledger__figure--fee-spent { color: var(--ink); font-weight: 400; }
.ledger__figure--total { font-weight: 500; }
.ledger__row--total .ledger__label { color: var(--paper); }

.ledger__notes { margin: 0; display: grid; gap: var(--s-4); }
.ledger__notes > div { display: grid; gap: 0.35rem; }
.ledger__notes dt {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ledger__notes dd { margin: 0; font-size: var(--t--1); line-height: 1.55; color: var(--ink-muted); }

/* ---------- Assertions on the deep ground ---------- */

.assert {
  font-size: var(--t-1);
  font-weight: 250;
  letter-spacing: -0.014em;
  line-height: 1.3;
  max-width: 34ch;
  margin: var(--s-5) 0 0;
  color: var(--paper);
}

/* ---------- The close ---------- */

.close__title {
  font-size: var(--t-3);
  font-weight: 200;
  letter-spacing: -0.026em;
  line-height: 1.08;
  max-width: 20ch;
  margin: 0;
  text-wrap: balance;
}

/* The masthead measures itself against the old container. On a page using
   the v2 shell it must line up with the sections beneath it, so the shell
   is opted into per page with .shell-page on <body>. The eight pages not
   yet rebuilt are untouched. */
.shell-page .masthead__inner {
  max-width: var(--shell);
  padding-inline: var(--shell-pad);
}

/* ---------- Footer ---------- */

.foot {
  background: var(--slate);
  --ground:    var(--slate);
  --ink:       var(--paper);
  --ink-muted: var(--slate-20);
  color: var(--paper);
}
.foot a { color: var(--paper); }
.foot__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 46rem) {
  .foot__inner { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-6); }
}
.foot__brand img { width: 132px; height: auto; }
.foot__contact { margin: var(--s-3) 0 0; font-size: var(--t--1); color: var(--slate-20); }
.foot__contact a { text-decoration-thickness: 1px; }

.foot__col h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--slate-20);
  max-width: none;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot__col li + li { margin-top: -2px; }
.foot__col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--t--1);
  text-decoration: none;
}
.foot__col a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.foot__legal {
  border-top: 1px solid var(--deep-edge);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--slate-20);
  max-width: none;
}
@media (min-width: 46rem) { .foot__legal { grid-column: 1 / -1; } }

/* ==========================================================================
   v2, part two. Components the inner pages need.
   ========================================================================== */

/* A section whose content is prose rather than cards has the same shape
   problem the homepage hero had: a left-aligned column in a full-width
   band, with the right half empty. Split puts the title on the left and
   the prose on the right so the section occupies its own width. */
.sec--split .sec__head { max-width: none; }
@media (min-width: 72rem) {
  .sec--split .sec__head {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .sec--split .sec__eyebrow,
  .sec--split .sec__title { grid-column: 1; }
  .sec--split .sec__eyebrow { margin-bottom: var(--s-3); }
  .sec--split .sec__prose { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .sec--split .sec__prose > * { max-width: 46ch; }
  .sec--split .sec__prose > * + * { margin-top: var(--s-4); }
}
.sec__prose { margin-top: var(--s-4); }
.sec__prose > :first-child { margin-top: 0; }
.sec__prose > * + * { margin-top: var(--s-4); }
.sec__prose p { text-wrap: pretty; max-width: var(--measure); }
.sec--split + .sec--split { border-top: 1px solid var(--edge); }

/* ---------- Statistics ---------- */

/* Figures carried inside running prose are unreadable at four or six to a
   paragraph. The figure leads, its own words follow it, and the source
   keeps its attribution above the set. */
.stats { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
                            .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stat {
  border-top: 2px solid var(--ink);
  padding-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stat__fig {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 250;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__of { margin: 0; font-size: var(--t--1); line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
.stats__source { margin: var(--s-4) 0 0; font-size: var(--t--1); line-height: 1.55; max-width: 60ch; color: var(--ink-muted); }

/* ---------- Question and answer ---------- */

/* The sceptic's voice. A card so a reader can see where one question ends
   and the next begins, which a stack of hairlines never showed. */
.qa { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 60rem) { .qa--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa__item {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  padding: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
}
.sec--tint .qa__item { background: var(--paper); }
.sec--deep .qa__item { background: var(--slate); }
.qa__q {
  margin: 0 0 var(--s-3);
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--ink);
  max-width: none;
}
.qa__a { margin: 0; color: var(--ink); text-wrap: pretty; }
.qa__a + .qa__a { margin-top: var(--s-3); }

/* ---------- Callout ---------- */

.callout {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--edge);
  font-size: var(--t-1);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.35;
  max-width: 34ch;
  color: var(--ink);
}

/* ---------- The rate, Pricing clause 02 ---------- */

.rate-figure {
  font-size: clamp(4.5rem, 1.5rem + 11vw, 10rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.rate-gloss { margin: var(--s-4) 0 0; font-size: var(--t-1); font-weight: 300; max-width: 34ch; color: var(--ink); }

/* ---------- Close ---------- */

.sec--close .sec__inner { display: grid; gap: var(--s-5); }
@media (min-width: 72rem) {
  .sec--close .sec__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-7); align-items: end; }
  .sec--close .close__head { grid-column: 1; }
  .sec--close .close__act { grid-column: 2; padding-bottom: 0.5rem; }
}
.close__act > * + * { margin-top: var(--s-5); }
.close__act p { max-width: 40ch; }

/* ---------- Contact, brought onto the shell without changing the form ---------- */

.sec--form .sec__inner { padding-block: clamp(2.5rem, 1.4rem + 4vw, 4.5rem) var(--sec-pad); }
.enquiry__fields, .enquiry__terms {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  padding: clamp(1.375rem, 1rem + 1.6vw, 2rem);
}
.enquiry__terms { background: var(--tint); }

/* The homepage headline is four words. The audience pages open on full
   sentences of 116 and 125 characters, which at the homepage's size ran to
   six lines. Long headlines take their own scale and the full content
   width, and the hero stops being two columns, because there is nothing
   left to put beside a headline that wide. Measured to land in three lines
   at 1195 and 1440. */
.hero__title--long {
  font-size: clamp(1.5rem, 1.05rem + 2.2vw, 3rem);
  letter-spacing: -0.024em;
  line-height: 1.08;
  max-width: 39ch;
}
@media (min-width: 72rem) {
  .hero--long .hero__grid { display: block; }
  .hero--long .hero__aside { margin-top: var(--s-5); max-width: 46ch; }
}


/* ---------- Question and answer, expanded on demand ----------

   Native <details>/<summary>. No JavaScript, keyboard and screen reader
   accessible by default, and the answers stop costing a screen of height
   each while closed. */

.qa__item {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
}
.sec--deep .qa__item { background: var(--slate); }

.qa__q {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) clamp(1rem, 0.7rem + 1.1vw, 1.5rem);
  min-height: 44px;
  margin: 0;
  font-size: var(--t-0);
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  max-width: none;
}
.qa__q::-webkit-details-marker { display: none; }

/* The marker is drawn rather than typed, so it needs no glyph and no icon
   font. A plus that becomes a minus, in currentColor. */
.qa__q::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: auto;
  margin-top: 0.45em;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  opacity: 0.65;
}
.qa__item[open] .qa__q::after {
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat;
  opacity: 1;
}
.qa__q:hover { color: var(--ink); }
.qa__q:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-2); }

.qa__body {
  padding: 0 clamp(1rem, 0.7rem + 1.1vw, 1.5rem) var(--s-3);
  border-top: 1px solid var(--edge);
  padding-top: var(--s-3);
  margin-top: var(--s-1);
}
.sec--deep .qa__body { border-top-color: var(--deep-edge); }
.qa__body .qa__a { margin: 0; color: var(--ink); text-wrap: pretty; }
.qa__body .qa__a + .qa__a { margin-top: var(--s-3); }

@media (prefers-reduced-motion: no-preference) {
  .qa__item[open] .qa__body { animation: qa-open 160ms ease-out; }
  @keyframes qa-open { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
}