/* AuditSahi marketing site. Self-contained: the site has its own ground, type and controls and does not load
   app.css. Bone ground, ink type, one deep green accent, a serif inside the sans sentence for the words that
   carry the meaning. Rounded panels on a steady grid. Colour inside the drawings is only ever a status mark.
   These tokens are the design system the app adopts next. */

:root {
  --bone: #f2efe6;
  --bone-2: #e9e5d8;
  --bone-3: #dcd7c6;
  --paper: #fbf9f3;
  --ink: #1b1a17;
  --ink-2: #4f4d45;
  --ink-3: #615e56;
  --line: rgba(27, 26, 23, 0.16);
  --line-s: rgba(27, 26, 23, 0.46);
  --green: #116b48;
  --green-ink: #0d5438;
  --green-soft: rgba(17, 107, 72, 0.10);
  --amber: #b8821a;
  --amber-soft: rgba(184, 130, 26, 0.14);
  --red: #b5341f;
  --red-soft: rgba(181, 52, 31, 0.10);
  --sans: "Inter", system-ui, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: var(--sans);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 180ms var(--ease);
  --r: 12px;
  --r-panel: 22px;
  --bar: 72px;
  --gutter: 40px;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; background: var(--bone); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
h3 { font-size: 18px; letter-spacing: -0.012em; line-height: 1.3; }
ol, ul { margin: 0; padding: 0; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--bar) + 24px); }

/* The serif inside the sentence. Regular weight, not italic: formal, not decorative. */
.s { font-family: var(--serif); font-style: normal; font-weight: 400; letter-spacing: -0.012em; font-size: 1.05em; }
.s.green { color: var(--green); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.needs { background: var(--amber-soft); color: #6b4a06; padding: 1px 6px; border-radius: 4px; font-size: 0.9em; font-weight: 500; }

/* Controls */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line-s); background: transparent; color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t); }
.btn:hover { background: var(--bone-2); border-color: var(--ink); }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--bone); }
.btn.primary:hover { background: var(--green-ink); border-color: var(--green-ink); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ico-arrow { width: 16px; height: 16px; transition: transform var(--t); }
.btn:hover .ico-arrow { transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.chip.accent { border-color: transparent; background: var(--green-soft); color: var(--green-ink); }
.chip.ok { border-color: transparent; background: var(--green-soft); color: var(--green-ink); }
.chip.crit { border-color: transparent; background: var(--red-soft); color: var(--red); }
.chip.warn { border-color: transparent; background: var(--amber-soft); color: #6b4a06; }
.meter { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bone-3); }
.meter span { display: block; height: 100%; }
.meter .m-cov { background: var(--green); }
.meter .m-par { background: #d9a84a; }
.meter .m-mis { background: #c9b9a8; }
input[type=email], input[type=text] { width: 100%; padding: 12px 16px; border: 1px solid var(--line-s); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; }
input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }

/* The panel: the one container shape on the site */
.panel { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 10; height: var(--bar); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 0 var(--gutter); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(27, 26, 23, 0.08); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.brand svg { color: var(--green); }
.sahi { color: var(--green); }
/* On a green ground the name takes the text colour around it, or Sahi would vanish. */
.btn.primary .sahi, .ba-tag-after .sahi, .band.deep .sahi, .shot-btn.green .sahi { color: inherit; }
/* Navigation as underlined tabs: the line sits on the bar's bottom edge, grey on hover, ink when active. */
.sitenav { display: flex; gap: 28px; justify-self: center; align-self: stretch; }
.sitenav a { position: relative; display: flex; align-items: center; color: var(--ink-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: color var(--t); }
.sitenav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink-3); transform: scaleX(0); transform-origin: left; transition: transform var(--t), background var(--t); }
.sitenav a:hover { color: var(--ink); }
.sitenav a:hover::after { transform: scaleX(1); }
.sitenav a.active { color: var(--ink); }
.sitenav a.active::after { transform: scaleX(1); background: var(--ink); }
.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.bar-right .btn { padding: 8px 16px; font-size: 14px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-s); display: grid; place-items: center; align-content: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 16px; height: 1.5px; background: var(--ink); margin: 2.5px 0; }
.menu-list { position: absolute; right: 0; top: calc(100% + 10px); min-width: 260px; padding: 8px; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 40px -24px rgba(27, 26, 23, 0.4); }
.menu-list a { padding: 11px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.menu-list a:hover { background: var(--bone-2); }
.menu-list a:nth-last-child(2) { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; }
.menu-list a:last-child { color: var(--green-ink); }

/* Page rhythm */
.site-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: 104px 0; border-top: 1px solid var(--line); }
.band.first { border-top: 0; padding-top: 24px; }
.label { font-size: 15px; font-weight: 500; color: var(--ink-3); margin-bottom: 16px; }
.sec-head { max-width: 760px; margin: 0 0 56px; }
.sec-head.centre { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.035em; line-height: 1.08; }
.sec-head p:not(.label) { margin-top: 20px; font-size: 17px; color: var(--ink-2); max-width: 56ch; }
.sec-head.centre p:not(.label) { margin-left: auto; margin-right: auto; }
.more { margin-top: 36px; }
.more a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.more a:hover .ico-arrow { transform: translateX(3px); }

/* Inner page opening */
.page-hero { padding: 72px 0 56px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.page-hero h1 { font-size: clamp(38px, 5vw, 66px); letter-spacing: -0.04em; line-height: 1.02; max-width: 15ch; }
.page-hero p { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.page-hero .meta { font-size: 14px; color: var(--ink-3); margin-top: 14px; }

/* ---------------- Home: hero ---------------- */
.hero { padding: 56px 0 0; }
.hero-copy { max-width: 880px; }
.hero h1 { font-size: clamp(42px, 5.8vw, 78px); line-height: 1; letter-spacing: -0.04em; max-width: 14ch; }
.lede { margin-top: 28px; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-actions .btn { padding: 13px 24px; font-size: 15.5px; }
.hero-foot { margin-top: 18px; color: var(--ink-3); font-size: 14px; max-width: 60ch; }

/* The drawing: a ring of twelve tiles, the year, with the audit pack in the middle */
.hero-panel { margin: 48px 0 0; padding: 84px 40px 24px; overflow: hidden; }
.draw { position: relative; }
.draw::before { content: ""; position: absolute; inset: -40px; pointer-events: none;
  background:
    repeating-linear-gradient(30deg, rgba(27, 26, 23, 0.06) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-30deg, rgba(27, 26, 23, 0.06) 0 1px, transparent 1px 30px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%); }
.iso { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.hero-panel .draw { max-width: 900px; margin: 0 auto; }
.iso .b polygon { stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; stroke-opacity: 0.85; vector-effect: non-scaling-stroke; }
.iso .rule { fill: none; stroke: var(--ink); stroke-opacity: 0.32; stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.iso .guide { fill: none; stroke: var(--ink); stroke-opacity: 0.22; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.callouts { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.callout { position: absolute; transform: translate(-50%, -50%); }
.callout::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.callout::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 44px; background: var(--ink); transform: translateY(-100%); }
.callout span { position: absolute; left: 0; bottom: 44px; transform: translateX(-50%); white-space: nowrap; padding: 7px 12px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper); font-size: 13px; font-weight: 500; line-height: 1.2; }
.callout.co-pack::after { height: 58px; }
.callout.co-pack span { bottom: 58px; background: var(--ink); color: var(--bone); }
.draw-key { margin-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); position: relative; }
.draw-key span { display: inline-flex; align-items: center; gap: 8px; }
.draw-key i { width: 14px; height: 6px; border: 1px solid var(--ink); display: inline-block; }
.k-done i { background: #1e7f58; }
.k-due i { background: #e9c46a; }
.k-next i { background: var(--paper); }

/* The before and after: one organisation, today and with AuditSahi, a handle between them */
.glow { position: absolute; left: 50%; top: 52%; width: 70vw; max-width: 900px; height: 520px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(17, 107, 72, 0.16), rgba(17, 107, 72, 0) 70%); }
.hero { position: relative; }
.ba { position: relative; z-index: 1; margin: 48px 0 0; padding: 0; overflow: hidden; }
.ba-after, .ba-before { position: relative; }
.ba-after { padding: 28px; background: var(--paper); }
.ba-after .shot { pointer-events: none; }
.ba-before { position: absolute; inset: 0; background: var(--bone); padding: 40px 32px; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-before .draw { height: 100%; display: flex; align-items: center; justify-content: center; }
.ba-before .iso { max-width: 760px; width: 100%; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); color: var(--bone); box-shadow: 0 0 0 4px var(--paper); }
.ba-handle span::before, .ba-handle span::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-left: 1.5px solid var(--bone); border-bottom: 1.5px solid var(--bone); }
.ba-handle span::before { left: 11px; transform: translateY(-50%) rotate(45deg); }
.ba-handle span::after { right: 11px; transform: translateY(-50%) rotate(-135deg); }
.ba-tag { position: absolute; top: 14px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--ink); color: var(--bone); pointer-events: none; }
.ba-tag-before { left: 14px; }
.ba-tag-after { right: 14px; background: var(--green); color: #fff; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba-range:focus-visible ~ .ba-handle span { outline: 2px solid var(--green); outline-offset: 3px; }
.ba figcaption { position: relative; padding: 14px 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); background: var(--paper); }
.ba .ba-range { bottom: 48px; height: auto; }
/* Without scripts the range does nothing and the split stays at the middle. The before drawing is complete from the first paint. */
.js .ba .iso .b polygon { stroke-dashoffset: 0; fill-opacity: 1; transition: none; }
.js .ba .iso .rule { opacity: 1; transition: none; }

/* The year: five parts beside the drawing of the year */
.year { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 56px; align-items: stretch; }
.flow.vertical { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
.flow.vertical::before { display: none; }
.flow.vertical li { padding: 18px 0 18px 36px; border-top: 1px solid var(--line); }
.flow.vertical li::before { display: none; }
.flow.vertical li:first-child { border-top: 0; padding-top: 0; }
.flow.vertical .n { position: absolute; margin-left: -36px; margin-bottom: 0; }
.flow.vertical li { position: relative; }
.flow.vertical h3 { font-size: 17px; }
.flow.vertical p { font-size: 14px; }
.year-art { margin: 0; padding: 48px 32px 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.year-art .draw { flex: 1 1 auto; display: flex; align-items: center; }
.year-art .draw .iso { width: 100%; height: auto; }
.year-art .draw-key { padding: 0 8px; }

/* The claim as one deep green section, bled to both edges */
.band.deep { background: var(--green-ink); color: var(--bone); box-shadow: 0 0 0 100vmax var(--green-ink); clip-path: inset(0 -100vmax); border-top: 0; }
.band.deep .label { color: rgba(242, 239, 230, 0.6); }
.band.deep .sec-head p:not(.label) { color: rgba(242, 239, 230, 0.78); }
.band.deep .s.green { color: #9fe0c0; }
.band.deep .backing li { border-top-color: rgba(242, 239, 230, 0.3); }
.band.deep .backing p { color: rgba(242, 239, 230, 0.72); }
.backing.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
.band.deep + .band { border-top: 0; }

/* Who it is for: three short cards, each to its own page */
.who-card { display: flex; flex-direction: column; padding: 28px 28px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); color: var(--ink); transition: border-color var(--t), transform var(--t); }
.who-card:hover { text-decoration: none; border-color: var(--ink); }
.who-card h3 { font-size: 20px; letter-spacing: -0.02em; }
.who-card p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); flex: 1 1 auto; }
.who-card .more-in { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.who-card:hover .ico-arrow { transform: translateX(3px); }

/* ---------------- Numbers that are true ---------------- */
.figures { margin-top: 72px; padding: 40px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.figure .n { display: block; font-family: var(--serif); font-size: clamp(48px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.figure p { margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 34ch; }

/* ---------------- Problem and what AuditSahi does instead ---------------- */
.ps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 0.5fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.ps .label { margin: 0; font-size: 28px; font-weight: 500; color: var(--ink); letter-spacing: -0.025em; line-height: 1.2; }
.ps-arrow { align-self: center; height: 1px; background: var(--ink); position: relative; transform-origin: left center; }
.ps-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg); }
.pills { display: flex; flex-wrap: wrap; gap: 14px 10px; padding-top: 8px; max-width: 540px; }
.pill { display: inline-block; padding: 10px 14px; border: 1px solid var(--ink); border-radius: 8px; font-size: 15px; line-height: 1.3; background: var(--bone); }
.pill.t1 { transform: rotate(-3deg); }
.pill.t2 { transform: rotate(2deg); }
.pill.t3 { transform: rotate(-1.5deg); }
.ps-solution { grid-column: 3; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 42ch; padding-top: 8px; }
.ps-solution strong { color: var(--ink); font-weight: 500; }

/* ---------------- How it works: a line with five points on it ---------------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-top: 36px; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); }
.flow li { list-style: none; position: relative; }
.flow li::before { content: ""; position: absolute; left: 0; top: -41px; width: 9px; height: 9px; border-radius: 50%; background: var(--bone); border: 1px solid var(--ink); }
.flow li:last-child::before { background: var(--green); border-color: var(--green); }
.flow .n { display: block; font-family: var(--serif); font-size: 15px; color: var(--ink-3); margin-bottom: 14px; }
.flow h3 { font-size: 19px; letter-spacing: -0.02em; }
.flow p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.flow-note { margin-top: 44px; font-size: 16px; color: var(--ink-2); max-width: 60ch; }

/* The How it works page. Without scripts, on a phone or under reduced motion: each step is a quiet section with
   its own icon and heading on the left. With scripts on a wide screen a rail built from those headings sticks
   on the left and crossfades as each step scrolls into view, and the per-step headings hide. */
.hiw-ico { display: block; width: 132px; height: 132px; margin-bottom: 24px; color: var(--ink); }
.hiw-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hiw-wrap { position: relative; }
.hiw-rail { display: none; }
.hiw-wrap.sticky { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 72px; align-items: start; }
.hiw-wrap.sticky .hiw-rail { display: block; position: sticky; top: calc(var(--bar) + 48px); min-height: 320px; }
.hiw-wrap.sticky .hiw-side { display: none; }
.hiw-wrap.sticky .hiw li { grid-template-columns: minmax(0, 1fr); }
.hiw-wrap.sticky .hiw li:first-child { border-top: 0; padding-top: 8px; }
.hiw-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); pointer-events: none; }
.hiw-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.hiw-slide .n { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink-3); margin-bottom: 18px; }
.hiw-slide h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.03em; line-height: 1.08; max-width: 14ch; }

/* The How it works page: each step as its own quiet section */
.hiw { list-style: none; }
.hiw li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; padding: 64px 0; border-top: 1px solid var(--line); }
.hiw .n { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink-3); margin-bottom: 18px; }
.hiw h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.03em; line-height: 1.08; max-width: 14ch; }
.hiw .body > p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.hiw .body > p + p { margin-top: 16px; }
.hiw .detail { margin-top: 28px; padding: 22px 26px; }
.hiw .detail h4 { font-size: 13.5px; font-weight: 500; color: var(--ink-3); margin-bottom: 12px; }
.hiw .detail ul { list-style: none; display: flex; flex-direction: column; }
.hiw .detail li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.hiw .detail li:first-child { border-top: 0; padding-top: 0; }
.hiw .detail li span:last-child { color: var(--ink-3); white-space: nowrap; }
.hiw .detail .cl { font-size: 12.5px; }
.hiw .draw { padding: 28px 24px 12px; }
.hiw .draw .iso { max-width: 520px; margin: 0 auto; }

/* ---------------- It writes your policies ---------------- */
.pol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.pol h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.035em; line-height: 1.08; max-width: 14ch; }
.pol .lead { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.pol-list { list-style: none; padding: 22px 26px; counter-reset: pol; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.pol-list li { counter-increment: pol; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 500; align-items: baseline; }
.pol-list li:nth-child(-n+2) { border-top: 0; }
.pol-list li::before { content: counter(pol); font-family: var(--serif); font-size: 15px; color: var(--ink-3); }
.pol-foot { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); padding: 0 26px 18px; }
.pol-inline { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.pol-inline li { display: block !important; min-width: 0; }
.pol-inline li span { white-space: normal !important; color: var(--ink); }
.standards { margin-top: 40px; padding: 26px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; }
.standards h3 { font-size: 19px; letter-spacing: -0.02em; }
.standards p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.standards .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.standards .tags span { font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); background: var(--bone); }

/* ---------------- The claim ---------------- */
.claim .sec-head { max-width: 860px; }
.claim .sec-head h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; }
.claim-panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px 56px; align-items: center; padding: 40px 48px; overflow: hidden; }
.draw-readers .iso { max-width: 560px; margin: 0 auto; }
.backing { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.backing li { padding-top: 14px; border-top: 1px solid var(--ink); }
.backing h3 { font-size: 16.5px; }
.backing p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ---------------- The product, as it is: a white app window on the bone page ----------------
   The tokens here are the blueprint for the app restyle. One typeface (Geist), a wide scale from 10px pale
   labels to a 96px figure, four greys and one green, separation by whitespace rather than borders, and one
   soft shadow under the window. Colour means one thing: green is covered, or the action. */
.shot { --ui: "Geist", "Inter", system-ui, sans-serif; --w-ink: #141412; --w-2: #6b6964; --w-3: #9d9a92; --w-4: #e4e2dc; --w-5: #f1f0ec; --w-line: #ebe9e3;
  margin: 0; font-family: var(--ui); font-size: 12px; line-height: 1.4; color: var(--w-ink); letter-spacing: -0.005em; }
.shot .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.shot small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--w-3); }
.shot-win { display: grid; grid-template-columns: 184px minmax(0, 1fr); background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 20, 18, 0.06), 0 30px 70px -36px rgba(20, 20, 18, 0.45); }
.shot-side { display: flex; flex-direction: column; gap: 22px; padding: 20px 16px; border-right: 1px solid var(--w-line); }
.shot-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; letter-spacing: -0.02em; padding: 0 6px; }
.shot-brand svg { color: var(--green); }
.shot-org { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--w-5); }
.shot-org small { text-transform: none; letter-spacing: 0; font-size: 10px; }
.shot-org span { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 500; font-size: 11.5px; }
.shot-org i { flex: 0 0 auto; width: 5px; height: 5px; border-right: 1.5px solid var(--w-3); border-bottom: 1.5px solid var(--w-3); transform: rotate(45deg) translateY(-2px); }
.shot-nav { display: flex; flex-direction: column; gap: 1px; }
.shot-nav span, .shot-nav b { padding: 6px 10px; border-radius: 6px; font-weight: 500; font-size: 11.5px; color: var(--w-2); }
.shot-nav b { background: var(--w-ink); color: #fff; }
.shot-user { margin-top: auto; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: center; padding: 0 6px; }
.shot-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--w-ink); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.shot-user strong { display: block; font-size: 11.5px; font-weight: 600; }
.shot-user small { text-transform: none; letter-spacing: 0; }
.shot-main { padding: 18px 28px 24px; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.shot-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.shot-crumb { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--w-3); min-width: 0; flex-wrap: wrap; }
.shot-crumb i { width: 5px; height: 5px; border-right: 1px solid var(--w-3); border-top: 1px solid var(--w-3); transform: rotate(45deg); }
.shot-crumb strong { color: var(--w-ink); font-weight: 600; font-size: 12px; }
.shot-tag { padding: 2px 8px; border-radius: 999px; background: var(--w-5); color: var(--w-2); font-size: 10px; font-weight: 500; }
.shot-btn { padding: 6px 12px; border-radius: 7px; font-size: 11.5px; font-weight: 500; background: var(--w-5); white-space: nowrap; }
.shot-btn.dark { background: var(--w-ink); color: #fff; }
.shot-btn.green { background: var(--green); color: #fff; }
/* The one dominant figure, with every obligation drawn as a tick beneath it */
.shot-lead b { display: block; font-size: 96px; font-weight: 600; letter-spacing: -0.06em; line-height: 0.95; margin: 2px 0 14px; }
.shot-lead b i { font-style: normal; font-size: 0.42em; letter-spacing: -0.02em; color: var(--w-3); margin-left: 2px; }
.shot-ticks { display: flex; gap: 2px; height: 18px; }
.shot-ticks i { display: block; flex: 1 1 0; min-width: 0; background: var(--w-4); border-radius: 1px; }
.shot-ticks i.c { background: var(--green); }
.shot-ticks i.p { background: var(--w-3); }
.shot-ticks.sm { height: 8px; gap: 1.5px; }
.shot-keys { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 10.5px; color: var(--w-2); }
.shot-keys span { display: inline-flex; align-items: center; gap: 5px; }
.shot-keys i { width: 6px; height: 6px; border-radius: 1px; background: var(--w-4); }
.shot-keys i.c { background: var(--green); }
.shot-keys i.p { background: var(--w-3); }
.shot-keys .r { margin-left: auto; color: var(--w-3); }
.shot-keys .r + .r { margin-left: 0; }
/* Three quiet columns separated by air */
.shot-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-top: 22px; border-top: 1px solid var(--w-line); }
.shot-cols section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shot-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.shot-book span { font-size: 11.5px; }
.shot-book em { font-style: normal; font-size: 10.5px; color: var(--w-3); }
.shot-polnum { display: flex; align-items: baseline; gap: 8px; }
.shot-polnum b { font-size: 34px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.shot-polnum span { font-size: 11px; color: var(--w-2); }
.shot-pol { display: flex; gap: 3px; }
.shot-pol i { display: block; width: 16px; height: 16px; border-radius: 3px; background: var(--w-4); }
.shot-pol i.a { background: var(--green); }
.shot-pollist { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.shot-pollist span { padding-left: 12px; position: relative; }
.shot-pollist span::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.shot-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 10px; text-align: center; max-width: 190px; }
.shot-cal s { text-decoration: none; color: var(--w-3); font-size: 9px; padding-bottom: 2px; }
.shot-cal b, .shot-cal i { display: grid; place-items: center; height: 20px; border-radius: 4px; font-weight: 500; color: var(--w-2); }
.shot-cal b.today { background: var(--w-ink); color: #fff; }
.shot-next { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.shot-next b { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.shot-next span { font-size: 11.5px; }
.shot-next em { font-style: normal; font-size: 10.5px; color: var(--w-3); }
.shot-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--w-line); }
.shot-foot-note { font-size: 10.5px; color: var(--w-3); }
.compact .shot-cols section:nth-child(3), .compact .shot-foot { display: none; }
.compact .shot-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }

/* Detail one click away: a plain details element styled as a quiet row */
.fold { margin-top: 18px; border-top: 1px solid var(--line); }
.fold summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-size: 15px; font-weight: 500; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: ""; width: 8px; height: 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); transition: transform var(--t); flex: 0 0 auto; }
.fold[open] summary::after { transform: rotate(225deg); }
.fold > div, .fold > p { padding: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
.fold.inline { margin-top: 6px; border-top: 0; }
.fold.inline summary { padding: 4px 0; font-size: 13.5px; color: var(--ink-3); justify-content: flex-start; gap: 8px; }
.fold.inline summary::after { width: 6px; height: 6px; }
.fold.inline > p { padding: 6px 0 4px; font-size: 14.5px; }
.page-hero.short { padding-bottom: 36px; }
.trust.tight li { padding: 18px 0; }
.ca-list li { align-items: start; }

/* ---------------- For CA firms ---------------- */
.ca { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; }
.ca h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.035em; line-height: 1.08; max-width: 14ch; }
.ca .lead { font-size: 17px; color: var(--ink-2); max-width: 48ch; margin-top: 20px; }
.ca-list { list-style: none; margin-top: 32px; display: flex; flex-direction: column; }
.ca-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.ca-list li:last-child { border-bottom: 1px solid var(--line); }
.ca-list .n { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink-3); padding-top: 1px; }
.ca-list h3 { font-size: 17px; }
.ca-list p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); max-width: 54ch; }
.ca-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.clients { padding: 24px 28px 22px; }
.clients-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.clients ul { list-style: none; }
.clients li { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.clients li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clients strong { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.clients li span:not(.num) { font-size: 13.5px; color: var(--ink-2); }
.clients .num { flex: 0 0 auto; font-family: var(--serif); font-size: 18px; }
.clients-foot { margin-top: 14px; font-size: 13px; color: var(--ink-3); }

/* ---------------- Who it is for, and the entity groups ---------------- */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.who article { padding: 28px 28px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); display: flex; flex-direction: column; }
.who h3 { font-size: 20px; letter-spacing: -0.02em; }
.who p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); flex: 1 1 auto; }
.who .rules { margin-top: 18px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.who .rules li { font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); }
.who-foot { margin: 28px 0 0; font-size: 14.5px; color: var(--ink-3); max-width: 70ch; }
.groups { list-style: none; }
.groups li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 64px; padding: 44px 0; border-top: 1px solid var(--line); }
.groups h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 1.1; }
.groups .sub { margin-top: 10px; font-size: 14.5px; color: var(--ink-3); }
.groups p { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.groups table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.groups th, .groups td { text-align: left; padding: 9px 12px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.groups th { font-weight: 500; color: var(--ink-3); border-top: 0; padding-top: 0; font-size: 13px; }
.groups td:first-child { font-weight: 500; }

/* ---------------- Pricing: one panel per audience ---------------- */
.ptabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bone-3); margin: 0 0 40px; max-width: 100%; }
.ptabs a { padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background var(--t), color var(--t); }
.ptabs a:hover { color: var(--ink); }
.ptabs a.active, body[data-persona="business"] .ptabs a[data-persona="business"], body[data-persona="regulated-entities"] .ptabs a[data-persona="regulated-entities"], body[data-persona="ca-firms"] .ptabs a[data-persona="ca-firms"] { background: var(--ink); color: var(--bone); }
.persona { display: none; }
body[data-persona="business"] .persona[data-persona="business"], body[data-persona="regulated-entities"] .persona[data-persona="regulated-entities"], body[data-persona="ca-firms"] .persona[data-persona="ca-firms"] { display: block; }
.persona-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px 48px; align-items: center; padding: 28px 32px; margin-bottom: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); }
.persona-art { position: relative; }
.persona-art .iso { width: 100%; height: auto; }
/* The persona marks are complete from the first paint; they do not draw themselves. */
.js .persona .iso .b polygon { stroke-dashoffset: 0; fill-opacity: 1; transition: none; }
.js .persona .iso .rule { opacity: 1; transition: none; }
.persona-head h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.03em; }
.persona-head p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.pricing-foot { padding: 32px 0 80px; }
.pricing-foot .who-foot { margin-top: 24px; }

/* ---------------- Pricing, rendered from the data block ---------------- */
.pricing-note { font-size: 15px; color: var(--ink-2); }
.plans { margin-top: 0; }
.plan-group { margin: 44px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.plans > .plan-group:first-child { margin-top: 0; }
.plan-group-note { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-2); max-width: 72ch; }
.plans-row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; grid-template-rows: auto auto auto 1fr auto; }
.plan { grid-row: span 5; display: grid; grid-template-rows: subgrid; align-content: start; gap: 0; padding: 26px 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); }
.plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.plan-head h3 { font-size: 17px; }
.plan-tag { align-self: center; }
.plan-price { display: block; margin-top: 14px; font-family: var(--serif); font-size: 36px; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.plan-period { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13px; }
.plan-desc { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.plan-cta { margin-top: 22px; justify-content: center; width: 100%; }
.plan.plan-hi { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.plan.plan-hi .plan-price { color: var(--green-ink); }
.adviser { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 40px; align-items: start; padding: 26px; margin-top: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); }
.adviser h3 { font-size: 17px; }
.adviser .plan-desc { margin-top: 10px; padding-top: 0; border-top: 0; max-width: 60ch; }
.adviser-rates { display: flex; gap: 36px; }
.adviser-rate { text-align: right; }
.adviser-rate .plan-price { margin-top: 0; font-size: 30px; }
.adviser-rate .plan-period { max-width: 22ch; margin-left: auto; }
.plans-includes { margin-top: 18px; max-width: 76ch; font-size: 14.5px; color: var(--ink-2); }
.extras { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.extra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 24px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); }
.extra .plan-desc { margin-top: 10px; padding-top: 0; border-top: 0; }
.extra-side { text-align: right; }
.extra-side .plan-price { margin-top: 0; font-size: 30px; }
.extra-side .plan-period { max-width: 20ch; margin-left: auto; }

/* ---------------- How we work ---------------- */
.trust { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.trust li { padding: 22px 0 26px; border-top: 1px solid var(--ink); }
.trust h3 { font-size: 17px; }
.trust p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.prose { max-width: 720px; }
.prose p { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prose p + p { margin-top: 18px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.03em; margin: 56px 0 18px; }
.prose h3 { font-size: 18px; margin: 32px 0 10px; }
.prose ul, .prose ol { margin: 14px 0 0 1.2em; }
.prose li { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin-top: 8px; }
.prose a { border-bottom: 1px solid var(--line-s); }
.prose a:hover { border-color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.prose th { color: var(--ink-3); font-weight: 500; font-size: 13.5px; border-top: 0; padding-top: 0; }
.prose td:first-child { color: var(--ink); font-weight: 500; }
.notice { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 8px; background: var(--amber-soft); color: #6b4a06; font-size: 14px; font-weight: 500; margin-top: 18px; }

/* ---------------- Resources and articles ---------------- */
.res-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.res-list article { height: 100%; display: flex; flex-direction: column; padding: 28px 28px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); transition: border-color var(--t); }
.res-list article:hover { border-color: var(--ink); }
.res-list .kind { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.res-list h3 { font-size: 21px; letter-spacing: -0.022em; line-height: 1.2; }
.res-list p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); flex: 1 1 auto; }
.res-list .foot { margin-top: 22px; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; }
.article { max-width: 720px; }
.article .page-hero { grid-template-columns: 1fr; padding-bottom: 32px; }
.article h1 { max-width: 20ch; }
.article .standfirst { font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.article .byline { margin-top: 18px; font-size: 14px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; }
.article .prose { padding-top: 32px; border-top: 1px solid var(--ink); }
.clause { margin: 22px 0; padding: 18px 22px; border-left: 2px solid var(--ink); background: var(--paper); border-radius: 0 12px 12px 0; }
.clause p { font-size: 16px; color: var(--ink); }
.clause .ref { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.sources { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 15px; margin: 0 0 10px; letter-spacing: 0; }
.sources li { font-size: 14px; color: var(--ink-2); margin-top: 6px; word-break: break-word; }
.sources a { border-bottom: 1px solid var(--line-s); }
.unverified { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--amber-soft); color: #6b4a06; font-size: 12px; font-weight: 500; }
.verified { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--green-soft); color: var(--green-ink); font-size: 12px; font-weight: 500; }
.art-foot { margin-top: 56px; padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.art-foot p { font-size: 15px; color: var(--ink-2); max-width: 52ch; }

/* Newsletter */
.newsletter { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 64px; align-items: center; padding: 44px 48px; }
.nl-copy h2 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.08; }
.nl-copy p { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.nl-form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.nl-row { display: flex; gap: 10px; }
.nl-row input { flex: 1 1 auto; min-width: 0; }
.nl-consent { display: flex !important; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 14px; font-weight: 400 !important; color: var(--ink-2); }
.nl-consent input { margin: 4px 0 0; accent-color: var(--green); }
.nl-status { margin-top: 12px; font-size: 14px; color: var(--green-ink); min-height: 1.4em; }

/* ---------------- Closer and footer ---------------- */
.closer { margin: 0 0 40px; padding: 72px 48px; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-panel); }
.closer h2 { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -0.035em; line-height: 1.04; max-width: 18ch; margin: 0 auto; }
.closer p { margin: 20px auto 0; max-width: 50ch; font-size: 16px; color: var(--ink-2); }
.closer-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* The footer sits on a ground half a shade darker than the page, carried to both edges of the window. */
.site-foot { max-width: 1200px; margin: 0 auto; padding: 56px var(--gutter) 48px; background: #ede9de; box-shadow: 0 0 0 100vmax #ede9de; clip-path: inset(0 -100vmax); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, max-content); gap: 40px 48px; }
.foot-brand p { margin-top: 16px; font-size: 14.5px; color: var(--ink-2); max-width: 36ch; }
.foot-brand p.faint { margin-top: 10px; font-size: 13.5px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 { font-size: 14px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.foot-col a { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.foot-col a:hover { color: var(--ink); }
.foot-line { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); line-height: 1.7; }

/* ==================================================================== */
/* Motion. Transform, opacity, fill-opacity and stroke-dashoffset only.  */
/* Safety net: anything a script will reveal also gets `safety-show`,    */
/* which puts it on screen 1.2s after load regardless. The script adds   */
/* `obs` to <html> once its observers exist, which cancels the safety.   */
/* If the script never runs, nothing stays hidden.                       */
/* ==================================================================== */
@keyframes safety-show { to { opacity: 1; transform: none; fill-opacity: 1; stroke-dashoffset: 0; } }
.noobs .reveal > *, .noobs .iso polygon, .noobs .ps-arrow, .noobs .backing li, .noobs .figure, .noobs .callout, .noobs .flow li {
  opacity: 1 !important; transform: none !important; animation: none !important; fill-opacity: 1 !important; stroke-dashoffset: 0 !important; }
.noobs .callout { transform: translate(-50%, -50%) !important; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal > *, .js .iso polygon, .js .ps-arrow, .js .backing li, .js .figure, .js .callout, .js .flow li { animation: safety-show 1ms linear 1.2s forwards; }
  .js.obs .reveal > *, .js.obs .iso polygon, .js.obs .ps-arrow, .js.obs .backing li, .js.obs .figure, .js.obs .callout, .js.obs .flow li { animation: none; }

  /* The one page-load moment: the sentence arrives, then the drawing draws itself, then the callouts. */
  .hero-copy > *, .page-hero > * { animation: rise 600ms var(--ease) both; }
  .hero-copy > *:nth-child(2), .page-hero > *:nth-child(2) { animation-delay: 80ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 160ms; }
  .hero-copy > *:nth-child(n+4) { animation-delay: 240ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .js .iso .b polygon { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
    transition: stroke-dashoffset 480ms var(--ease) calc(var(--i) * 22ms), fill-opacity 320ms var(--ease) calc(var(--i) * 22ms + 200ms); }
  .js .iso.in .b polygon { stroke-dashoffset: 0; fill-opacity: 1; }
  .js .iso .rule { opacity: 0; transition: opacity 400ms var(--ease) 900ms; }
  .js .iso.in .rule { opacity: 1; }
  .js .callout { opacity: 0; transform: translate(-50%, -40%); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
  .js .iso.in ~ .callouts .callout { opacity: 1; transform: translate(-50%, -50%); }
  .js .iso.in ~ .callouts .callout:nth-child(1) { transition-delay: 1200ms; }
  .js .iso.in ~ .callouts .callout:nth-child(2) { transition-delay: 1350ms; }
  .js .iso.in ~ .callouts .callout:nth-child(3) { transition-delay: 1500ms; }
  .js .iso.in ~ .callouts .callout:nth-child(4) { transition-delay: 1700ms; }

  /* Drawings inside a section appear complete with their section; only the home hero draws itself. */
  .js .reveal .b polygon { transition-delay: calc(var(--i) * 14ms), calc(var(--i) * 14ms + 120ms); }
  .js .reveal.in .b polygon { stroke-dashoffset: 0; fill-opacity: 1; }
  .js .reveal.in .rule { opacity: 1; transition-delay: 500ms; }

  .js .reveal > * { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
  .js .reveal.in > * { opacity: 1; transform: none; }
  .js .reveal.in > *:nth-child(2) { transition-delay: 60ms; }
  .js .reveal.in > *:nth-child(n+3) { transition-delay: 120ms; }

  .js .figure, .js .backing li, .js .flow li { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
  .js .reveal.in .figure, .js .reveal.in .backing li, .js .reveal.in .flow li { opacity: 1; transform: none; }
  .js .reveal.in .figure:nth-child(2), .js .reveal.in .backing li:nth-child(2), .js .reveal.in .flow li:nth-child(2) { transition-delay: 100ms; }
  .js .reveal.in .figure:nth-child(3), .js .reveal.in .backing li:nth-child(3), .js .reveal.in .flow li:nth-child(3) { transition-delay: 200ms; }
  .js .reveal.in .backing li:nth-child(4), .js .reveal.in .flow li:nth-child(4) { transition-delay: 300ms; }
  .js .reveal.in .flow li:nth-child(5) { transition-delay: 400ms; }

  .js .ps-arrow { transform: scaleX(0); transition: transform 900ms var(--ease) 200ms; }
  .js .reveal.in .ps-arrow { transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@supports not (grid-template-rows: subgrid) {
  .plans-row { grid-template-rows: none; }
  .plan { grid-row: auto; display: flex; flex-direction: column; }
  .plan-desc { flex: 1 1 auto; }
}

/* ---------------- Narrower screens ---------------- */
@media (max-width: 1180px) {
  .sitenav { display: none; }
  .menu { display: block; }
  .topbar { grid-template-columns: auto 1fr; }
}
@media (max-width: 1100px) {
  .plans-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .plan { grid-row: auto; display: flex; flex-direction: column; }
  .plan-desc { flex: 1 1 auto; }
  .adviser { grid-template-columns: 1fr; }
  .adviser-rates { justify-content: flex-start; }
  .adviser-rate { text-align: left; }
  .adviser-rate .plan-period { margin-left: 0; }
  .claim-panel { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .res-list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .bar-right .bar-signin { display: none; }
  .hero { padding-top: 56px; }
  .hero-panel { padding: 24px 20px 20px; }
  .callouts { display: none; }
  .figures { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .ps { grid-template-columns: 1fr; gap: 20px; }
  .ps-arrow { width: 1px; height: 56px; margin: 4px 0 4px 4px; transform-origin: top center; }
  .ps-arrow::after { right: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }
  .js .ps-arrow { transform: scaleY(0); }
  .ps-solution { grid-column: auto; }
  .page-hero, .ca, .hiw li, .groups li, .newsletter, .pol, .standards, .persona-head, .year { grid-template-columns: 1fr; }
  .backing.four { grid-template-columns: 1fr 1fr; }
  .ba-after { padding: 12px; }
  .ba-before { padding: 24px 12px; }
  .glow { height: 60vw; }
  .persona-art { max-width: 200px; }
  .page-hero { padding: 48px 0 40px; }
  .flow { grid-template-columns: 1fr; gap: 28px; padding-top: 0; }
  .flow::before, .flow li::before { display: none; }
  .flow li { padding-top: 20px; border-top: 1px solid var(--line); }
  .who { grid-template-columns: 1fr; gap: 16px; }
  .trust { grid-template-columns: 1fr; gap: 0; }
  .trust li { padding: 18px 0 20px; }
  .extras { grid-template-columns: 1fr; }
  .backing, .backing.four { grid-template-columns: 1fr; gap: 20px; }
  .band { padding: 72px 0; }
  .sec-head { margin-bottom: 36px; }
  .closer { padding: 56px 24px; }
  .shot-win { grid-template-columns: 1fr; }
  .shot-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--w-line); }
  .shot-nav, .shot-user { display: none; }
  .shot-org { flex: 1 1 200px; }
  .shot-cols, .compact .shot-cols { grid-template-columns: 1fr; gap: 26px; }
  .shot-lead b { font-size: 72px; }
  .newsletter { padding: 32px 24px; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .bar-right .btn.primary { display: none; }
  .plans-row { grid-template-columns: 1fr; }
  .adviser-rates { flex-direction: column; gap: 14px; }
  .extra { grid-template-columns: 1fr; }
  .extra-side { text-align: left; }
  .extra-side .plan-period { margin-left: 0; max-width: none; }
  .ps .label { font-size: 24px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero h1, .page-hero h1 { max-width: none; }
  .claim-panel { padding: 24px 20px; }
  .clients li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .pol-list, .pol-inline { grid-template-columns: 1fr; }
  .pol-list { padding: 16px 18px; }
  .pol-list li:nth-child(2) { border-top: 1px solid var(--line); }
  .pol-foot { padding: 0 18px 14px; }
  .ptabs { display: flex; }
  .ptabs a { flex: 1 1 auto; text-align: center; padding: 9px 8px; font-size: 13.5px; }
  .res-list { grid-template-columns: 1fr; }
  .shot-main { padding: 14px 16px 18px; gap: 20px; }
  .shot-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .shot-lead b { font-size: 60px; }
  .shot-ticks { height: 14px; gap: 1px; }
  .shot-keys .r { margin-left: 0; }
  .shot-need { grid-template-columns: minmax(0, 1fr) 44px; }
  .shot-mini { display: none; }
  .nl-row { flex-direction: column; }
  .nl-row .btn { justify-content: center; }
  .art-foot { padding: 22px 20px; }
  .groups td, .groups th { padding-right: 8px; font-size: 13px; }
  .hiw li { padding: 44px 0; }
  .hiw-ico { width: 108px; height: 108px; margin-bottom: 16px; }
  .hiw .detail li { flex-direction: column; gap: 2px; }
  .hiw .detail li span:last-child { white-space: normal; }
  .hiw .draw { padding: 16px 8px 4px; overflow: hidden; }
  .prose table, .groups table { display: block; overflow-x: auto; }
}

/* On a phone an article table becomes one block per row, so no column is cut off. The header row is hidden
   because each row then reads top to bottom, the first cell as its title. */
@media (max-width: 600px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose table { overflow: visible; }
  .prose tr:first-child:has(th) { display: none; }
  .prose tr { border-top: 1px solid var(--line); padding: 10px 0; }
  .prose td { border-top: 0; padding: 2px 0; }
}

/* The wordmark is one word: kept together inside flex rows, which would otherwise put a gap between its halves. */
.wm { white-space: nowrap; }

/* A marked blank in a draft, as a person sees it: what is missing, highlighted, never a value. */
.needed { background: #fff3c4; color: #5a4300; padding: 1px 6px; border-radius: 4px; font-weight: 500; }

/* A page heading on deep green, full bleed, like the claim on the home page. Used on How it works. */
.page-hero.deep { background: var(--green-ink); color: var(--bone); box-shadow: 0 0 0 100vmax var(--green-ink); clip-path: inset(0 -100vmax); padding-bottom: 72px; margin-bottom: 96px; }
.page-hero.deep .label { color: rgba(242, 239, 230, 0.6); }
.page-hero.deep p { color: rgba(242, 239, 230, 0.82); }
.page-hero.deep .s { color: #fff; font-weight: 500; }
.page-hero.deep .sahi { color: inherit; }
@media (max-width: 760px) { .page-hero.deep { margin-bottom: 56px; } }

/* Pricing: the enquiry form for paid plans, and the second button on a paid card. */
.plan-acts { display: flex; flex-direction: column; gap: 8px; align-self: end; }
.plan-acts .plan-cta + .plan-cta { margin-top: 0; }
.enquiry { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: start; padding: 44px 48px; margin-bottom: 40px; scroll-margin-top: 96px; }
.enq-copy h2 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.08; }
.enq-copy p { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 44ch; }
.enq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 18px; }
.enq-grid .full { grid-column: 1 / -1; }
.enq-form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.enq-form input, .enq-form select, .enq-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.enq-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .enquiry { grid-template-columns: 1fr; padding: 28px 20px; } .enq-grid { grid-template-columns: 1fr; } }