/* Instrumenta Design System — Colour system
   ==================================================================
   Industrial, instrument-panel palette. Cool slate neutrals, a
   steel instrument-blue primary, a restrained signal-amber accent
   (survey marks / hi-vis), and functional monitoring status colours.
   Base ramps first, semantic aliases below. */

:root {
  /* ---- Neutrals — cool slate ("instrument ink") ---- */
  --slate-950: #0B1116;
  --slate-900: #111A21;
  --slate-850: #16212A;
  --slate-800: #1C2935;
  --slate-700: #283744;
  --slate-600: #3A4B5A;
  --slate-500: #556677;
  --slate-400: #768494;
  --slate-300: #97A4B1;
  --slate-200: #BEC8D1;
  --slate-150: #D4DBE1;
  --slate-100: #E4E9ED;
  --slate-50:  #F2F5F7;
  --white:     #FFFFFF;
  --black:     #05090C;

  /* ---- Primary — steel instrument blue ---- */
  --blue-950: #08222F;
  --blue-900: #0D2E40;
  --blue-800: #123B53;
  --blue-700: #174D6B;
  --blue-600: #1E6286;   /* primary action */
  --blue-500: #2A789F;
  --blue-400: #4791B6;
  --blue-300: #79B0CC;
  --blue-200: #ABCEE0;
  --blue-100: #D6E7F0;
  --blue-50:  #EDF4F8;

  /* ---- Accent — signal amber (survey / hi-vis, used sparingly) ---- */
  --amber-700: #8F4E12;
  --amber-600: #B5681B;
  --amber-500: #D98A2B;   /* accent */
  --amber-400: #E9A24A;
  --amber-300: #F2BE7E;
  --amber-100: #FBEBD3;

  /* ---- Functional monitoring status ---- */
  --status-nominal:  #2E8B6F;   /* within limits / online   */
  --status-nominal-bg: #E6F2EE;
  --status-warning:  #C77F17;   /* approaching threshold     */
  --status-warning-bg: #FBEED6;
  --status-alert:    #BD3D29;   /* exceedance / fault        */
  --status-alert-bg: #FAE3DE;
  --status-offline:  #768494;   /* no data / stale feed      */
  --status-offline-bg: #EDF0F3;

  /* ---- Geological-strata neutrals (chart series, abstract motif) ---- */
  --strata-1: #3A4B5A;
  --strata-2: #1E6286;
  --strata-3: #2E8B6F;
  --strata-4: #C77F17;
  --strata-5: #8F6A4B;
  --strata-6: #6B5A7A;

  /* ================================================================
     SEMANTIC ALIASES — reference these in product UI
     ================================================================ */

  /* Surfaces — light document/dashboard context (default) */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-raised:  var(--white);
  --surface-inverse: var(--slate-900);

  /* Surfaces — dark instrument context */
  --surface-dark-page:   var(--slate-950);
  --surface-dark-card:   var(--slate-850);
  --surface-dark-raised: var(--slate-800);

  /* Text */
  --text-strong:   var(--slate-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-400);
  --text-inverse:  var(--slate-50);
  --text-on-accent: var(--white);
  --text-link:     var(--blue-600);

  /* Text on dark */
  --text-dark-strong: var(--slate-50);
  --text-dark-body:   var(--slate-200);
  --text-dark-muted:  var(--slate-400);

  /* Brand */
  --brand-primary:    var(--blue-600);
  --brand-primary-hover: var(--blue-700);
  --brand-primary-press: var(--blue-800);
  --brand-ink:        var(--slate-900);
  --brand-accent:     var(--amber-500);
  --brand-accent-hover: var(--amber-600);

  /* Borders / hairlines */
  --border-hairline: var(--slate-150);
  --border-default:  var(--slate-200);
  --border-strong:   var(--slate-300);
  --border-dark:     var(--slate-700);
  --border-focus:    var(--blue-500);

  /* Field */
  --field-bg:      var(--white);
  --field-border:  var(--slate-300);
  --field-text:    var(--slate-900);
  --field-placeholder: var(--slate-400);
}

/* ================================================================
   DARK THEME — [data-theme="dark"]
   Grafana-dark context. Remaps semantic aliases onto the slate-dark
   surface set. Base ramps (--blue-*, --slate-*, etc.) are unchanged.
   ================================================================ */


/* Instrumenta Design System — Typography tokens
   ==================================================================
   IBM Plex Sans for UI/headings/body, IBM Plex Mono for data &
   technical labels, IBM Plex Serif for long-form documents.
   Tight tracking on display, slightly open tracking on mono labels. */

:root {
  /* ---- Families ---- */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---- Type scale (px) ---- */
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-base: 15px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 35px;
  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-6xl: 72px;

  /* ---- Line heights ---- */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-label:  0.08em;   /* mono eyebrow / section labels */
  --tracking-caps:   0.12em;   /* all-caps survey-mark labels   */

  /* ---- Semantic roles ---- */
  --type-display-font:   var(--font-sans);
  --type-display-weight: var(--weight-semibold);
  --type-display-tracking: var(--tracking-tight);

  --type-heading-font:   var(--font-sans);
  --type-heading-weight: var(--weight-semibold);

  --type-body-font:   var(--font-sans);
  --type-body-weight: var(--weight-regular);
  --type-body-leading: var(--leading-relaxed);

  --type-data-font:   var(--font-mono);   /* readings, values, tags */
  --type-data-weight: var(--weight-medium);

  --type-label-font:    var(--font-mono); /* eyebrows, kickers      */
  --type-label-weight:  var(--weight-medium);
  --type-label-tracking: var(--tracking-caps);
}

/* instrumenta.io site styles. Tokens come from tokens/colors.css and tokens/typography.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); background: var(--white); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--text-link); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.cta a:focus-visible, .section.dark a:focus-visible, .page-hero a:focus-visible, .hero a:focus-visible, .footer a:focus-visible { outline-color: var(--amber-400); }
h1, h2, h3, h4 { color: var(--text-strong); font-weight: 600; margin: 0; line-height: var(--leading-snug); }
h1, h2 { text-wrap: balance; }
p { margin: 0; }
p + p { margin-top: 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.skip { position: absolute; left: 12px; top: -48px; padding: 8px 12px; background: var(--white); color: var(--text-strong); border: 1px solid var(--border-strong); z-index: 10; }
.skip:focus { top: 12px; }

/* Header */
.masthead { position: sticky; top: 0; z-index: 5; background: var(--white); border-bottom: 1px solid var(--border-default); }
.masthead > .container { min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 40px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: #111A21; text-decoration: none; font-size: 20px; font-weight: 600; letter-spacing: 0.042em; line-height: 1; }
.wordmark svg { width: 32px; height: 32px; }
.wordmark b { color: var(--amber-500); font-weight: 600; }
.nav { display: flex; gap: 0 36px; }
.nav > a { position: relative; display: block; padding: 26px 0; color: var(--text-strong); text-decoration: none; font-size: var(--text-base); font-weight: 500; }
.nav > a:hover { color: var(--text-link); }
.nav > a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--amber-500); }
.masthead .btn { margin-left: auto; }
.closing-action { margin-top: 20px; }
/* Consultation request form (Enquiries) */
.enquiry { max-width: 640px; }
.enquiry .field { margin-bottom: 20px; }
.enquiry label { display: block; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; }
.enquiry .opt { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-left: 8px; }
.enquiry .hint { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 6px; }
.enquiry input, .enquiry textarea, .enquiry select { width: 100%; font: inherit; color: var(--text-body); background: var(--white); border: 1px solid var(--slate-400); border-radius: 2px; padding: 10px 12px; }
.enquiry textarea { resize: vertical; }
.enquiry input:focus-visible, .enquiry textarea:focus-visible, .enquiry select:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; border-color: var(--text-strong); }
.enquiry .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry .form-actions { margin-top: 28px; }
.enquiry .form-note { margin-top: 16px; font-size: var(--text-sm); color: var(--text-muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 2px; background: var(--brand-primary); color: var(--white); font-weight: 600; font-size: var(--text-base); text-decoration: none; border: 2px solid var(--brand-primary); }
.btn::after { content: "→"; content: "→" / ""; }
.masthead .btn::after { content: none; }
.btn:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.btn-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--text-strong); border-color: var(--white); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-link); text-decoration: none; }
.more::after { content: "→"; content: "→" / ""; }
.more:hover { text-decoration: underline; }

/* Hero (home) */
.hero { background-color: var(--slate-950); background-image: linear-gradient(rgba(151, 164, 177, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(151, 164, 177, .06) 1px, transparent 1px); background-size: 40px 40px; color: var(--slate-200); overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.nw { white-space: nowrap; }
.hero .kicker { color: var(--amber-400); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: 20px; }
.hero h1 { color: var(--white); font-size: clamp(40px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 24px; max-width: 16ch; }
.hero .standfirst { color: var(--slate-100); font-size: clamp(18px, 2vw, 22px); line-height: 1.45; margin-bottom: 32px; max-width: 56ch; }
.hero .goal { color: var(--slate-300); max-width: 56ch; margin-bottom: 32px; }
.hero-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; max-width: 56ch; }
.hero-list li { position: relative; padding-left: 24px; }
.hero-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; background: var(--amber-500); }
.hero-list a { color: var(--slate-100); text-decoration: none; border-bottom: 1px solid rgba(233, 162, 74, 0.45); }
.hero-list a:hover { color: var(--white); border-bottom-color: var(--amber-400); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Page hero (inner pages) */
.page-hero { background-color: var(--slate-950); background-image: linear-gradient(rgba(151, 164, 177, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(151, 164, 177, .05) 1px, transparent 1px); background-size: 40px 40px; color: var(--slate-200); }
.page-hero .container { padding-top: 40px; padding-bottom: clamp(48px, 6vw, 72px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--slate-400); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--slate-600); }
.crumbs a { color: var(--slate-300); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.page-hero h1 { color: var(--white); font-size: clamp(36px, 5.5vw, 56px); letter-spacing: -0.025em; margin-bottom: 16px; }
.page-hero .lead { color: var(--slate-200); font-size: clamp(18px, 2vw, 22px); line-height: 1.45; max-width: 60ch; }
.page-hero .with-icon { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.page-hero .with-icon .icon { width: 56px; height: 56px; color: var(--amber-400); flex: none; }
.page-hero .with-icon h1 { margin: 0; }
.page-hero.has-photo .container { padding-top: 40px; padding-bottom: clamp(72px, 9vw, 120px); }
.page-hero.has-photo .container > div { max-width: 720px; }
.page-hero.product .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 72px); align-items: center; padding-bottom: clamp(56px, 7vw, 96px); }
.page-hero.product .key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-hero.service .key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .page-hero.service .key-facts, .page-hero.product .key-facts { grid-template-columns: 1fr; } }
.hero-shot { margin: 0; }
.page-hero.product .actions { margin: 24px 0 0; }
.hero-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--slate-600); border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); background: #f4f6f8; }
@media (max-width: 1000px) { .page-hero.product .container { grid-template-columns: 1fr; } .hero-shot { order: 2; } }
/* Photographs: hero background under a dark scrim, so text keeps its contrast */
.has-photo { background-color: var(--slate-950); background-image: linear-gradient(90deg, rgba(11, 17, 22, 0.92) 0%, rgba(11, 17, 22, 0.78) 50%, rgba(11, 17, 22, 0.25) 100%), var(--img); background-size: cover; background-position: center; }
.has-photo h1, .has-photo .lead, .has-photo .standfirst { text-shadow: 0 1px 16px rgba(11, 17, 22, 0.6); }
.hero.has-photo .container { grid-template-columns: minmax(0, 700px); min-height: clamp(540px, 74vh, 740px); }
.key-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, max-content)); column-gap: 32px; margin: 28px 0 0; border-top: 1px solid var(--slate-700); }
.key-facts div { padding: 12px 0 0; }
.key-facts dt { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--slate-400); }
.key-facts dd { margin: 4px 0 0; color: var(--white); font-weight: 500; }

/* Sections */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section.tint { background: var(--slate-50); }
.section.dark { background: var(--slate-900); color: var(--slate-300); }
.section.dark h2, .section.dark h3 { color: var(--white); }
.section.dark .more { color: var(--amber-400); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 46px); letter-spacing: -0.022em; }
.section-head h2::before { content: ""; display: block; width: 48px; height: 4px; margin-bottom: 20px; background: var(--amber-500); }
.section-head p { margin-top: 16px; font-size: var(--text-lg); line-height: 1.55; }
.section-head .more { margin-top: 16px; }

/* Cards */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(6, 1fr); }
.grid-5 > * { grid-column: span 2; }
.grid-5 > :nth-child(n+4) { grid-column: span 3; }
.card { position: relative; display: flex; flex-direction: column; padding: 32px; background: var(--white); border: 1px solid var(--border-default); border-radius: 2px; transition: border-color 120ms ease, box-shadow 120ms ease; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card:has(h3 a):hover { border-color: var(--text-strong); box-shadow: 0 8px 24px rgba(11, 17, 22, 0.08); }
.card:has(a:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.card h3 a:focus-visible { outline: none; }
.card .icon { width: 48px; height: 48px; color: var(--text-strong); margin-bottom: 24px; }
.card h3 { font-size: var(--text-xl); margin-bottom: 12px; }
.card p { flex: 0 0 auto; }
.card .problem-line { margin-top: auto; padding-top: 16px; }
.card > p:not(.eyebrow):not(.problem-line) { flex: 1 0 auto; }
.card .more { margin-top: 24px; display: block; }
.card .more::after { margin-left: 6px; }
.card-art { margin: -32px -32px 24px; background: var(--slate-950); overflow: hidden; }
.card-art img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 300ms ease; }
.card:hover .card-art img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card:hover .card-art img { transform: none; } }
.card.feature { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.solutions-grid .feature { grid-row: span 7; }
.solutions-grid:has(> :only-child) { grid-template-columns: minmax(0, 600px); }
.services-grid .feature { grid-row: span 6; }
.card.feature .problem-line { margin-top: 16px; }
.card.feature > .icon { justify-self: start; }

/* Product screens */
.screens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
.screens-1 { grid-template-columns: minmax(0, 1fr); }
.screens-3 > figure:first-child { grid-column: 1 / -1; max-width: 800px; }
.screens figure { margin: 0; }
.screens img { width: 100%; height: auto; border: 1px solid var(--slate-700); border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); background: var(--slate-950); }
.screens figcaption { margin-top: 12px; font-size: var(--text-sm); color: var(--text-muted); max-width: 70ch; }
.dark .screens figcaption { color: var(--slate-300); }

/* Slide show: one screen at a time, advancing every 6 s and pausing on hover. Choosing a dot stops
   the autoplay and shows that screen. With reduced motion there is no autoplay. No JavaScript. */
.slides { --step: 6s; }
.slides-frame { position: relative; display: grid; }
.slide { grid-area: 1 / 1; margin: 0; opacity: 0; animation: slide calc(var(--step) * var(--n)) infinite; animation-delay: calc(var(--step) * var(--i)); }
.slide img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; object-position: top; background: #f4f6f8; border: 1px solid var(--slate-700); border-radius: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.slide figcaption { margin-top: 14px; font-size: var(--text-base); color: var(--slate-200); max-width: 70ch; }
.slide-no { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--amber-400); }
@keyframes slide { 0% { opacity: 0; visibility: visible; } 3% { opacity: 1; } 16.6% { opacity: 1; } 19.6% { opacity: 0; } 100% { opacity: 0; } }
.slides:hover .slide, .slides:focus-within .slide { animation-play-state: paused; }
.slides-dots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.slides-dots label { cursor: pointer; position: relative; display: block; border: 1px solid var(--slate-700); border-radius: 3px; overflow: hidden; opacity: 0.55; transition: opacity 0.2s; background: #f4f6f8; }
.slides-dots label:hover { opacity: 0.85; }
.slides-dots label img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: top left; }
.slides-dots label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--amber-500); opacity: 0; animation: slide calc(var(--step) * var(--n)) infinite; animation-delay: calc(var(--step) * var(--i)); }
.slides:hover .slides-dots label::after, .slides:focus-within .slides-dots label::after { animation-play-state: paused; }
.slides input:focus-visible ~ .slides-dots { outline: 2px solid var(--amber-400); outline-offset: 6px; }
/* A chosen dot: stop autoplay, show that screen only. */
.slides:has(input:checked) .slide, .slides:has(input:checked) .slides-dots label::after { animation: none; opacity: 0; }
.slides:has(input:nth-of-type(1):checked) .slide:nth-child(1), .slides:has(input:nth-of-type(1):checked) .slides-dots label:nth-child(1)::after { opacity: 1; }
.slides:has(input:nth-of-type(2):checked) .slide:nth-child(2), .slides:has(input:nth-of-type(2):checked) .slides-dots label:nth-child(2)::after { opacity: 1; }
.slides:has(input:nth-of-type(3):checked) .slide:nth-child(3), .slides:has(input:nth-of-type(3):checked) .slides-dots label:nth-child(3)::after { opacity: 1; }
.slides:has(input:nth-of-type(4):checked) .slide:nth-child(4), .slides:has(input:nth-of-type(4):checked) .slides-dots label:nth-child(4)::after { opacity: 1; }
.slides:has(input:nth-of-type(5):checked) .slide:nth-child(5), .slides:has(input:nth-of-type(5):checked) .slides-dots label:nth-child(5)::after { opacity: 1; }
.slides:has(input:nth-of-type(6):checked) .slide:nth-child(6), .slides:has(input:nth-of-type(6):checked) .slides-dots label:nth-child(6)::after { opacity: 1; }
.slides:has(input:nth-of-type(7):checked) .slide:nth-child(7), .slides:has(input:nth-of-type(7):checked) .slides-dots label:nth-child(7)::after { opacity: 1; }
.slides:has(input:nth-of-type(8):checked) .slide:nth-child(8), .slides:has(input:nth-of-type(8):checked) .slides-dots label:nth-child(8)::after { opacity: 1; }
.slides:has(input:nth-of-type(1):checked) .slides-dots label:nth-child(1) { opacity: 1; }
.slides:has(input:nth-of-type(2):checked) .slides-dots label:nth-child(2) { opacity: 1; }
.slides:has(input:nth-of-type(3):checked) .slides-dots label:nth-child(3) { opacity: 1; }
.slides:has(input:nth-of-type(4):checked) .slides-dots label:nth-child(4) { opacity: 1; }
.slides:has(input:nth-of-type(5):checked) .slides-dots label:nth-child(5) { opacity: 1; }
.slides:has(input:nth-of-type(6):checked) .slides-dots label:nth-child(6) { opacity: 1; }
.slides:has(input:nth-of-type(7):checked) .slides-dots label:nth-child(7) { opacity: 1; }
.slides:has(input:nth-of-type(8):checked) .slides-dots label:nth-child(8) { opacity: 1; }
@keyframes thumb { 0% { opacity: 0.55; } 3% { opacity: 1; } 16.6% { opacity: 1; } 19.6% { opacity: 0.55; } 100% { opacity: 0.55; } }
.slides:not(:has(input:checked)) .slides-dots label { animation: thumb calc(var(--step) * var(--n)) infinite; animation-delay: calc(var(--step) * var(--i)); }
.slides:hover .slides-dots label, .slides:focus-within .slides-dots label { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .slide, .slides-dots label, .slides-dots label::after { animation: none; }
  .slides:not(:has(input:checked)) .slides-dots label:first-child { opacity: 1; }
  .slides:not(:has(input:checked)) .slide:first-child, .slides:not(:has(input:checked)) .slides-dots label:first-child::after { opacity: 1; }
}
@media print { .slides-frame { display: block; } .slide { opacity: 1; animation: none; margin-bottom: 24px; } .slides-dots { display: none; } }

/* Status */

/* Problem and solution */
.ps { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.ps-block { padding: 32px 0; }
.ps-block p:not(.ps-label) { font-size: var(--text-lg); line-height: 1.6; }
.ps-block.solution { background: var(--slate-50); padding: 32px; border-left: 3px solid var(--brand-primary); }
.ps-block.ps-short { display: flex; flex-direction: column; justify-content: flex-start; }
.ps-block.ps-short p:not(.ps-label) { margin-block: auto; }
.ps-block.ps-short p:not(.ps-label) { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35; color: var(--text-strong); }
h2.ps-label { line-height: inherit; }
.ps-block > .more { display: inline-flex; margin-top: 16px; }
.ps-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.caps .cap { padding: 24px; background: var(--white); border: 1px solid var(--border-default); border-top: 3px solid var(--slate-900); border-radius: 2px; }
.caps .idx { display: block; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--amber-700); margin-bottom: 12px; }
.caps .cap h3 { font-size: var(--text-lg); margin-bottom: 8px; }
.link-row { display: flex; flex-wrap: wrap; gap: 16px; }
.link-card { flex: 1 1 300px; display: flex; gap: 20px; padding: 24px; border: 1px solid var(--border-default); border-radius: 2px; color: var(--text-body); text-decoration: none; background: var(--white); }
.link-card:hover { border-color: var(--text-strong); box-shadow: 0 8px 24px rgba(11, 17, 22, 0.08); }
.link-card .icon { width: 40px; height: 40px; flex: none; color: var(--text-strong); }
.link-card strong { display: block; color: var(--text-strong); margin-bottom: 4px; }
.link-card span span { font-size: var(--text-sm); line-height: var(--leading-normal); }
.row-title { font-size: var(--text-lg); margin: 40px 0 16px; }
.feature .problem-line { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); font-size: var(--text-sm); }
.feature .problem-line span { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.split-list { display: grid; grid-template-columns: minmax(0, 5fr) 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.split-list .section-head { position: sticky; top: 104px; margin-bottom: 0; }
.receive { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 20px; border-top: 3px solid var(--text-strong); }
.receive .ticks { grid-column: 2 / -1; border-top: 0; }
.receive .ticks li:first-child { padding-top: 0; }
.receive .ticks li:first-child::before { top: 9px; }
.receive h3 { font-size: var(--text-lg); }

/* Feature blocks */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border-default); }
.ticks li { position: relative; padding: 16px 0 16px 32px; border-bottom: 1px solid var(--border-default); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 25px; width: 10px; height: 10px; background: var(--slate-900); }
.dark .ticks li::before { background: var(--amber-500); }
.dark .ticks, .dark .ticks li { border-color: var(--slate-700); color: var(--slate-200); }
.dark .steps li { border-top-color: var(--amber-500); }
.dark .steps li::before { color: var(--amber-400); }
.dark .steps p { color: var(--slate-300); }
.dark .receive { border-top-color: var(--slate-600); }
.related { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: start; }
.related .row-title { margin-top: 0; }
.related > div { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 16px; }
.related .link-row { display: contents; }
.related .row-title { margin-bottom: 0; }
.related .link-card { flex: none; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps li { counter-increment: step; padding-top: 20px; border-top: 3px solid var(--text-strong); }
.steps li::before { content: "0" counter(step); display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.steps h3 { font-size: var(--text-lg); margin-bottom: 8px; }

/* SAFER band */
.safer-band h3 b { color: var(--amber-600); font-weight: 600; }
.safer-band h3 a { color: inherit; text-decoration: none; }
.safer-band h3 a:hover, .safer-band h3 a:focus-visible { text-decoration: underline; }
.dark .safer-band h3 b { color: var(--amber-400); }
.fail-test { font-weight: 600; color: var(--text-strong); margin: 14px 0 4px; }
.safer-cols h4 + .fail-test { margin-top: 0; }
.safer-q { font-family: var(--font-sans); font-size: var(--text-md); font-style: italic; color: var(--text-strong); border-left: 2px solid var(--amber-600); padding-left: 10px; margin-bottom: 8px; }
.dark .safer-q { color: var(--white); border-left-color: var(--amber-500); }
.safer-questions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
.safer-questions li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border-default); }
.safer-questions .letter { font-family: var(--font-mono); font-size: 32px; line-height: 1; color: var(--amber-600); }
.dark .safer-questions .letter { color: var(--amber-500); }
.safer-phrase { font-weight: 400; font-size: var(--text-sm); color: var(--text-muted); }
.dark .safer-phrase { color: var(--slate-400); }
.safer-questions strong { display: block; color: var(--text-strong); margin-bottom: 4px; }
.safer-questions p { font-size: var(--text-lg); }
.dark .safer-questions { border-top-color: var(--slate-700); }
.dark .safer-questions li { border-bottom-color: var(--slate-700); }
.dark .safer-questions strong { color: var(--white); }
.dark .safer-questions p { color: var(--slate-200); }
.safer-letters { border-top: 3px solid var(--text-strong); }
.safer-letter { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 64px 0; border-bottom: 2px solid var(--text-strong); scroll-margin-top: 104px; }
.safer-letter > .letter { position: sticky; top: 104px; align-self: start; }
.safer-letter .letter, .safer-letter h3 b, .safer-index .letter { color: var(--amber-600); }
.safer-letter .letter { font-family: var(--font-mono); font-size: 88px; line-height: 1; color: var(--amber-500); }
.safer-letter .ps-label { margin-bottom: 8px; }
.safer-letter h3 { font-size: var(--text-2xl); margin-bottom: 8px; }
.safer-letter h3 b { color: var(--amber-500); font-weight: 600; }
.safer-meaning { font-size: var(--text-md); line-height: 1.65; color: var(--text-body); max-width: 70ch; }
.safer-open { font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); margin-bottom: 8px; max-width: 62ch; }
.safer-letter .safer-q + .safer-open { margin-top: 16px; }
.safer-meaning { margin-top: 12px; }
.safer-letter > div > p:not([class]) { margin-top: 12px; max-width: 70ch; }
.safer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.safer-cols h4 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; color: var(--text-strong); margin: 0 0 8px; }
.mlabel-on { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.safer-cols ul, .safer-points { margin: 0; padding-left: 1.1em; }
.safer-points { margin-top: 6px; }
.safer-cols li + li { margin-top: 6px; }
.safer-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.safer-examples.n1 { grid-template-columns: 1fr; max-width: 70ch; }
.safer-examples.n2, .safer-examples.n4 { grid-template-columns: repeat(2, 1fr); }
.safer-examples > div { background: var(--white); border: 1px solid var(--border-default); border-top: 3px solid var(--amber-600); padding: 16px 20px; }
.safer-letter dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; margin: 28px 0 0; padding-top: 20px; border-top: 1px dashed var(--border-default); }
.safer-letter dl > div:last-child { background: var(--white); padding: 16px 20px; border-top: 3px solid var(--text-strong); margin-top: -20px; }
.safer-letter .safer-q { font-family: var(--font-sans); font-size: var(--text-lg); font-style: italic; letter-spacing: 0; color: var(--text-strong); padding-left: 12px; border-left: 2px solid var(--amber-500); margin: 8px 0 0; }
.safer-index { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 3px solid var(--amber-500); margin-bottom: 8px; }
.safer-index a { display: block; padding: 16px 16px 16px 0; color: var(--text-strong); font-weight: 600; text-decoration: none; }
.safer-index a + a { padding-left: 16px; border-left: 1px solid var(--border-default); }
.safer-index a:hover, .safer-index a:focus-visible { text-decoration: underline; }
.safer-index .letter { display: block; font-family: var(--font-mono); font-size: 32px; font-weight: 400; line-height: 1; color: var(--amber-500); margin-bottom: 8px; }
.safer-letter dt { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.safer-letter dd { margin: 0; }
#letters { scroll-margin-top: 80px; }
.band-title { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--amber-400); margin: 40px 0 0; }
.section-head + .band-title { margin-top: 0; }
.band-title + .safer-band { margin-top: 12px; }
.safer-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 3px solid var(--amber-500); }
.dark .safer-band div + div { border-left-color: var(--slate-700); }
.dark .safer-band p { color: var(--slate-200); }
.safer-band div { padding: 32px 24px 16px 0; }
.safer-band div + div { padding-left: 24px; border-left: 1px solid var(--border-default); }
.safer-band .letter { display: block; font-family: var(--font-mono); font-size: 88px; font-weight: 400; line-height: 1; color: var(--amber-500); margin-bottom: 20px; }
.safer-band h3 { font-size: var(--text-xl); margin-bottom: 8px; }
.safer-band p { font-size: var(--text-md); }

/* Tables */
table { width: 100%; border-collapse: collapse; border-top: 3px solid var(--text-strong); }
th { text-align: left; padding: 12px 24px 12px 0; border-bottom: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
td { vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--border-default); }
td:last-child, th:last-child { padding-right: 0; }
td.stage { width: 9rem; }
td.stage strong { display: block; font-size: var(--text-lg); color: var(--text-strong); }
td strong { color: var(--text-strong); }
.mlabel { display: none; color: var(--text-muted); }
.editions-phone { display: none; }
.editions-phone h3 { font-size: var(--text-lg); margin: 28px 0 8px; }
@media (max-width: 640px) { table.editions { display: none; } .editions-phone { display: block; } }

/* Call to action band */
.cta { background: var(--blue-700); color: var(--blue-100); border-top: 4px solid var(--amber-500); }
.cta .btn-light { background: var(--white); color: var(--text-strong); }
.cta .btn-light:hover { background: var(--amber-400); border-color: var(--amber-400); color: var(--text-strong); }
.cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.cta h2 { color: var(--white); font-size: clamp(28px, 3.8vw, 40px); margin-bottom: 8px; }
.cta p { max-width: 60ch; }
.cta p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* Facts and contact */
.facts { margin: 0; border-top: 3px solid var(--text-strong); }
.facts div { display: grid; grid-template-columns: 10rem 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-default); }
.facts dt { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding-top: 4px; }
.facts dd { margin: 0; color: var(--text-strong); }
.big-link { font-family: var(--font-mono); font-size: clamp(20px, 3vw, 28px); font-weight: 500; color: var(--text-strong); overflow-wrap: anywhere; }
a.big-link:hover { color: var(--text-link); }
.big-link.on-dark { display: inline-block; margin-top: 24px; color: var(--white); }
a.big-link.on-dark:hover { color: var(--amber-400); }
.row-title.first { margin-top: 0; }

/* Footer */
.footer { background: var(--slate-950); color: var(--slate-300); font-size: var(--text-sm); }
.footer .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.footer .wordmark { color: var(--white); margin-bottom: 16px; }
.footer .wordmark svg path { stroke: var(--white); }
.footer h2 { color: var(--white); font-size: var(--text-base); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer ul a, .footer .legal a { display: inline-block; padding: 4px 0; }
.footer .cols .btn { margin-top: 24px; }
.footer .cols > div:first-child p { max-width: 36ch; }
.footer a { color: var(--slate-300); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer .legal { border-top: 1px solid var(--slate-800); padding-top: 24px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--slate-400); }

/* Responsive */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .safer-band .letter { font-size: 64px; }
  .receive { grid-template-columns: 1fr 1fr; }
  .receive .ticks { grid-column: 2; }
}
@media (max-width: 960px) {
  .hero .container, .split, .ps, .split-list, .receive, .related, .page-hero.has-photo .container { grid-template-columns: 1fr; }
  .receive .ticks { grid-column: auto; }
  td.stage { width: 7rem; }
  .split-list .section-head { position: static; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 > *, .grid-5 > :nth-child(n+4) { grid-column: auto; }
  .grid-3 > :last-child:nth-child(odd), .grid-5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
      .grid-3 { grid-template-columns: 1fr 1fr; }
  .safer-band { grid-template-columns: 1fr; }
  .safer-band div, .safer-band div + div { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--border-default); }
  .safer-band .letter { grid-row: 1 / span 3; margin: 0; font-size: 36px; }
  .safer-band div > :not(.letter) { grid-column: 2; }
  .dark .safer-band div { border-bottom-color: var(--slate-700); }
}
@media (max-width: 860px) {
  .safer-letter > .letter { top: 24px; }
  .masthead { position: static; }
  .masthead > .container { min-height: 60px; gap: 0 20px; padding-top: 0; }
  .masthead .btn { padding: 8px 14px; font-size: var(--text-sm); margin: 10px 0 10px auto; }
  .nav { order: 3; width: auto; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; gap: 0 24px; border-top: 1px solid var(--border-hairline); margin: 0 calc(-1 * clamp(20px, 4vw, 40px)); padding: 0 clamp(20px, 4vw, 40px); }
  .nav > a { padding: 12px 0; font-size: var(--text-sm); white-space: nowrap; }
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@media (max-width: 640px) {
  .safer-letter { grid-template-columns: 40px 1fr; gap: 16px; padding: 40px 0; }
  .safer-letter > .letter { position: static; }
  .safer-letter dl > div:last-child { margin-top: 8px; }
  .safer-index { margin-bottom: 0; }
  .safer-index a:last-child { border-bottom: 0; }
  .safer-index a, .safer-index a + a { padding: 8px 0; }
  .safer-examples, .safer-examples.n2, .safer-examples.n4 { grid-template-columns: 1fr; }
  .safer-index { grid-template-columns: 1fr; }
  .safer-index a, .safer-index a + a { padding: 10px 0; border-left: 0; border-bottom: 1px solid var(--border-default); display: flex; gap: 12px; align-items: baseline; }
  .safer-index .letter { font-size: 24px; margin: 0; width: 28px; }
  .safer-letter .letter { font-size: 32px; font-weight: 500; line-height: 1.1; }
  .safer-letter dl, .safer-cols { grid-template-columns: 1fr; gap: 16px; }
    .grid-2, .grid-3, .grid-4, .grid-5, .steps, .screens { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; gap: 32px; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr, td { display: block; width: auto !important; }
  tr { padding: 16px 0; border-bottom: 1px solid var(--border-default); }
  td { padding: 0; border: 0; }
  td + td { margin-top: 8px; }
  .mlabel { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: 4px; }
  .has-photo { background-image: linear-gradient(rgba(11, 17, 22, 0.8), rgba(11, 17, 22, 0.9)), var(--img); }
  .hero.has-photo .container { min-height: 0; }
  .page-hero .with-icon { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-hero h1 { font-size: 32px; }
  .safer-band div:last-child { border-bottom: 0; }
  .hero .kicker { font-size: 11px; letter-spacing: 0.04em; }
  .hero-note { display: none; }
  .hero .actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .page-hero .with-icon { gap: 14px; }
  .page-hero .with-icon .icon { width: 40px; height: 40px; }
  .page-hero.product .with-icon { flex-direction: row; align-items: center; }
  .slides-dots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .safer-band .letter { font-size: 32px; font-weight: 500; line-height: 1.1; align-self: start; }
  .ps-block.solution { padding: 24px; }
        .facts div { grid-template-columns: 1fr; gap: 2px; }
}
@media print {
  .skip, .nav, .masthead .btn, .cta { display: none; }
  .masthead { position: static; }
  .hero, .page-hero, .footer { background: none; color: #000; }
  .hero h1, .page-hero h1, .page-hero .lead, .hero .standfirst { color: #000; }
  .card { break-inside: avoid; }
  .safer-band .letter { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .footer .cols { display: none; }
  .section.dark { background: none; }
  .section.dark, .section.dark h2, .section.dark h3, .section.dark p, .section.dark li, .section.dark dd { color: #000; }
  .footer .wordmark svg path { stroke: #000; }
  .footer .legal { color: #000; }
  .section.dark .ticks li, .section.dark .steps li::before, .section.dark .more, .page-hero .eyebrow { color: #000; }
  .btn-light { display: none; }
}

.eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.page-hero .eyebrow, .hero .eyebrow { color: var(--amber-400); }
.when { margin: 0; padding-left: 18px; }
.when li { margin-top: 4px; }
.hero-note { margin-top: 24px; color: var(--slate-400); font-size: var(--text-sm); }
p.big-link.on-dark { display: block; user-select: all; margin-bottom: 16px; }

/* Statement: one short paragraph set large */
.statement { max-width: 72ch; }
.statement .big, .prose .big { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: var(--text-strong); }
.statement .big + p, .prose .big + p { margin-top: 20px; font-size: var(--text-lg); }
.solution-summary .big { margin-bottom: 20px; }

/* Prose pages */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -0.02em; margin-bottom: 20px; }
.prose h2::before { content: ""; display: block; width: 48px; height: 4px; margin-bottom: 20px; background: var(--amber-500); }
.prose h3 { font-size: var(--text-xl); margin: 32px 0 8px; }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: var(--text-lg); line-height: 1.6; }
.prose p + p { margin-top: 16px; }
.prose-cols { display: grid; grid-template-columns: minmax(0, 5fr) 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.prose-cols .section-head { margin-bottom: 0; }
.prose-cols .prose { max-width: none; }
.solution-summary { max-width: 70ch; }
.solution-summary h2 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 12px; }
.solution-summary h2 a { color: inherit; text-decoration: none; }
.solution-summary h2 a:hover { text-decoration: underline; }
.solution-summary p + p { margin-top: 16px; }
.solution-summary .more { margin-top: 24px; }

/* What goes wrong: six groups, each one SAFER question in plain words */
.problem-groups { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 40px 40px; }
.problem-group { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
.problem-group h3 { font-size: var(--text-xl); align-self: end; padding-bottom: 12px; border-bottom: 3px solid var(--text-strong); margin-bottom: 4px; }
.problem-group h3 a { color: inherit; text-decoration: none; }
.problem-group h3 a:hover { text-decoration: underline; }
.problem-group ul { list-style: none; margin: 0; padding: 0; align-self: start; }
.problem-group li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border-default); color: var(--text-strong); text-decoration: none; }
.problem-group li a span { display: block; line-height: 1.45; }
.problem-group em { display: block; margin-top: 6px; font-style: normal; font-size: var(--text-sm); font-weight: 600; color: var(--text-link); }
.problem-group em::after { content: " →"; }
.problem-group li a:hover span { text-decoration: underline; }

/* What we do: one ruled list */
.offer-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--text-strong); }
.offer-list li a { display: grid; grid-template-columns: 15rem 1fr auto; gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--border-default); color: var(--text-body); text-decoration: none; }
.offer-list strong { color: var(--text-strong); }
.offer-list em { font-style: normal; font-size: var(--text-sm); font-weight: 600; color: var(--text-link); white-space: nowrap; }
.offer-list em::after { content: " →"; }
.offer-list li a:hover strong { text-decoration: underline; }

/* Services page: the five services in order */
.service-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--text-strong); }
.service-list li { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--border-default); scroll-margin-top: 96px; }
.service-list .icon { width: 48px; height: 48px; color: var(--text-strong); }
.service-list h3, .service-list h2 { font-size: var(--text-2xl); margin-bottom: 8px; }
.service-list h3 a, .service-list h2 a { color: inherit; text-decoration: none; }
.service-list h3 a:hover, .service-list h2 a:hover { text-decoration: underline; }
.service-list p { font-size: var(--text-lg); max-width: 70ch; }
.service-list .choose { margin-top: 8px; font-size: var(--text-sm); color: var(--text-muted); }
.service-list .more { margin-top: 12px; }

/* SAFER band and letters: show what each letter does */
.safer-band .stage, .safer-letter .stage { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.dark .safer-band .stage { color: var(--amber-400); }
.safer-band h3 { font-size: var(--text-lg); }
.safer-band .safer-q { margin: 8px 0 12px; }
.safer-fail span { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--slate-400); margin-bottom: 4px; }
.safer-band .safer-fail { font-size: var(--text-sm); color: var(--slate-300); }
.safer-letter > div > h4 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; color: var(--text-strong); margin: 28px 0 -16px; }
.safer-index a { display: flex; gap: 12px; align-items: baseline; }
.safer-index a span strong { display: block; font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; }

/* Phone and tablet widths for the parts above (after them, so they win) */
@media (max-width: 960px) {
  .problem-groups { grid-template-columns: 1fr 1fr; }
  .problem-group { display: block; }
  .prose-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .problem-groups, .offer-list li a { grid-template-columns: 1fr; }
  .problem-group { display: block; }
  .offer-list li a { gap: 4px; }
  .service-list li { grid-template-columns: 1fr; gap: 12px; }
  .service-list .icon { display: none; }
  .safer-index a span strong { display: inline; margin-right: 8px; }
}

/* Quotations of the framework's own statements */
.safer-quote { margin: 16px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--amber-500); }
.safer-quote p { font-weight: 600; color: var(--text-strong); max-width: 62ch; }
.safer-quote p + p { margin-top: 8px; }
.safer-quote .safer-q { font-weight: 400; font-style: italic; border: 0; padding: 0; margin: 0 0 8px; }
.safer-quote footer { margin-top: 8px; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.safer-quote.big p { font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; max-width: 72ch; }
.statement .safer-quote + p { margin-top: 24px; font-size: var(--text-lg); }
.safer-letter > div > h4 { margin: 28px 0 8px; }
.safer-letter .safer-meaning { margin-top: 0; }
.safer-letter > div > h4 + .safer-examples { margin-top: 0; }

/* SAFER landing: the five jobs */
.jobs { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--text-strong); }
.jobs li { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border-default); scroll-margin-top: 96px; }
.jobs .letter { font-family: var(--font-mono); font-size: 56px; line-height: 1; color: var(--amber-500); }
.jobs .stage { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin: 0 0 4px; }
.jobs h3 { font-size: var(--text-2xl); margin-bottom: 8px; }
.jobs h3 a { color: inherit; text-decoration: none; }
.jobs h3 a:hover { text-decoration: underline; }
.jobs p { max-width: 70ch; }
.jobs .note { margin-top: 8px; font-size: var(--text-sm); color: var(--text-muted); }
.jobs .more { margin-top: 12px; }
.prose h2 + h2 { margin-top: 0; }
.prose h2:not(:first-child) { margin-top: 48px; }
.prose .ticks { margin-top: 16px; }
.prose .next { margin-top: 32px; }
@media (max-width: 640px) { .jobs li { grid-template-columns: 1fr; gap: 8px; } .jobs .letter { font-size: 32px; } }

.prose ol.plain, .prose ul.plain { margin: 12px 0 20px; padding-left: 1.4em; font-size: var(--text-lg); line-height: 1.6; }
.prose .plain li + li { margin-top: 6px; }
.prose .plain strong { color: var(--amber-700); }

/* Framework tables */
.prose.wide { max-width: none; }
.prose.wide > p, .prose.wide > ul.plain, .prose.wide > ol.plain { max-width: 70ch; }
.prose table { margin: 20px 0 8px; font-size: var(--text-md); }
.prose table + h2 { margin-top: 56px; }
.prose td ul { margin: 0; padding-left: 1.1em; }
.prose td li + li { margin-top: 6px; }
.prose td.stage { width: 11rem; }
.prose td.stage strong { font-size: var(--text-md); }
.letter-cell { width: 4rem; font-family: var(--font-mono); font-size: 32px; line-height: 1; color: var(--amber-500); }
.framework td:nth-child(3) { min-width: 18rem; }
.jobs-table { margin-top: 0; }
.jobs-table td.stage { width: 14rem; }
.jobs-table td.stage .letter { display: block; font-family: var(--font-mono); font-size: 32px; line-height: 1; color: var(--amber-500); margin-bottom: 8px; }
.jobs-table td.stage strong { display: block; font-size: var(--text-xl); }
.jobs-table td.stage strong a { color: inherit; text-decoration: none; }
.jobs-table td.stage strong a:hover { text-decoration: underline; }
.jobs-table td.stage { color: var(--text-muted); font-size: var(--text-sm); }
.jobs-table td ul { margin: 0; padding-left: 1.1em; }
.jobs-table td li + li { margin-top: 6px; }
.jobs-table tr { scroll-margin-top: 96px; }
@media (max-width: 640px) {
  .letter-cell { display: none !important; }
  .prose td.stage, .jobs-table td.stage { width: auto; }
  .jobs-table td.stage .letter { display: inline; margin-right: 10px; font-size: 24px; }
  .jobs-table td.stage strong { display: inline; }
}
.in-use td.stage { width: 8rem; }
.framework td:nth-child(3) { min-width: 0; }
.belongs td.stage, .trace td.stage { width: 7rem; }
.framework td:nth-child(2) { width: 7rem; }
.framework td:nth-child(4) { width: 7rem; }

/* Framework pages generated from docs/SAFER-FRAMEWORK.md */
.prose.wide h3 { font-size: var(--text-xl); margin: 32px 0 8px; }
.prose table.fw { margin: 16px 0 24px; }
.prose table.fw + p { margin-top: 0; }
table.fw td.stage { width: 12rem; }
table.fw td.code { width: 3.5rem; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--amber-700); }
table.fw td.letter-cell { width: 4rem; }
.prose .next .more + .more { margin-left: 24px; }
table.fw td.problem { width: 62%; }
@media (max-width: 640px) { table.fw td.stage, table.fw td.code, table.fw td.problem { width: auto; } }

/* SAFER landing: stage rows, discipline picker, use tiles */
.stage-rows { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--text-strong); }
.stage-rows li { display: grid; grid-template-columns: 56px 48px 1fr auto; gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--border-default); }
.stage-rows .letter { font-family: var(--font-mono); font-size: 48px; line-height: 1; color: var(--amber-500); }
.stage-rows .icon { width: 40px; height: 40px; color: var(--text-strong); margin-top: 4px; }
.stage-rows h3 { font-size: var(--text-2xl); margin-bottom: 6px; }
.stage-rows h3 a { color: inherit; text-decoration: none; }
.stage-rows h3 a:hover { text-decoration: underline; }
.stage-rows p { max-width: 70ch; }
.stage-rows .must { margin-top: 6px; color: var(--text-body); }
.stage-rows .must strong { color: var(--amber-700); }
.stage-rows .more { white-space: nowrap; margin-top: 8px; font-size: var(--text-sm); }
.disciplines { border-top: 3px solid var(--text-strong); }
.discipline { border-bottom: 1px solid var(--border-default); }
.discipline summary { cursor: pointer; padding: 16px 0; font-size: var(--text-lg); font-weight: 600; color: var(--text-strong); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.discipline summary::-webkit-details-marker { display: none; }
.discipline summary::after { content: "+"; font-family: var(--font-mono); color: var(--amber-600); font-size: 20px; }
.discipline[open] summary::after { content: "−"; }
.discipline table { margin: 0 0 20px; border-top: 1px solid var(--border-default); }
.discipline td.stage { width: 11rem; color: var(--text-muted); font-size: var(--text-sm); }
.uses .card h3 { font-size: var(--text-xl); }
.uses .card .eyebrow { margin-top: 16px; }
.after { margin-top: 32px; }
@media (max-width: 960px) {
}
@media (max-width: 640px) {
  .stage-rows li { grid-template-columns: 40px 1fr; gap: 8px 16px; }
  .stage-rows .icon { display: none; }
  .stage-rows .letter { font-size: 32px; }
  .stage-rows .more { display: none; }
  .discipline td.stage { width: auto; }
}
.statement + .section-head { margin-top: 48px; }

/* The SAFER cycle diagram */
.cycle { margin: 40px auto 56px; max-width: 900px; }
.cycle svg { width: 100%; height: auto; display: block; font-family: var(--font-sans); }
.cycle-arc { fill: none; stroke: var(--slate-400); stroke-width: 3; }
.cycle-arc.cycle-loop { stroke: var(--amber-500); }
#cycle-arrow path { fill: var(--slate-400); }
.cycle-loop + text, .cycle-loop-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--amber-700); }
.cycle-node circle { fill: var(--white); stroke: var(--amber-500); stroke-width: 4; transition: stroke-width 120ms ease; }
.cycle-node:hover circle, .cycle-node:focus circle { stroke-width: 7; }
.cycle-node:hover .cycle-name { text-decoration: underline; }
.cycle-letter { font-family: var(--font-mono); font-size: 44px; fill: var(--amber-600); }
.cycle-name { font-size: 24px; font-weight: 600; fill: var(--text-strong); }
.cycle-quality { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--amber-700); }
.cycle-line { font-size: 15px; fill: var(--text-body); }
.cycle-centre { font-family: var(--font-mono); font-size: 40px; fill: var(--text-strong); letter-spacing: 0.06em; }
.cycle-centre-sub { font-size: 16px; fill: var(--text-muted); }
@media (max-width: 640px) { .cycle { margin: 24px auto 32px; } .cycle-line, .cycle-quality, .cycle-centre-sub, .cycle-loop + text, .cycle-loop-label { display: none; } .cycle-name { font-size: 36px; } }
.prose.wide h3 + .ticks { margin-top: 8px; }

/* Services index grouped */
.service-list h3 { font-size: var(--text-2xl); margin-bottom: 8px; }

/* Problems table, grouped by stage: a header row per stage, equal rows beneath */
table.fw.routes thead th:last-child, table.fw.routes td:last-child { width: 16rem; }
table.fw.routes tr.group th { padding: 36px 0 10px; text-align: left; border-bottom: 2px solid var(--text-strong); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: inherit; color: var(--text-strong); }
table.fw.routes tr.group th a { color: var(--text-strong); text-decoration: none; }
table.fw.routes tr.group th a:hover { text-decoration: underline; }
table.fw.routes tr.group th .sub { margin-left: 14px; font-weight: 400; color: var(--text-muted); font-size: var(--text-base); }
table.fw.routes td { border-bottom: 1px solid var(--border-hairline, var(--border-default)); vertical-align: top; }
table.fw.routes td:first-child { color: var(--text-strong); }
@media (max-width: 640px) {
  table.fw.routes tr.group th { padding-top: 28px; }
  table.fw.routes tr.group th .sub { display: block; margin: 2px 0 0; }
  table.fw.routes thead th:last-child, table.fw.routes td:last-child { width: auto; }
}
.statement.who { margin-top: 32px; }
.statement.who p { font-size: var(--text-lg); line-height: 1.6; }
.statement.who table.fw { margin-top: 20px; }
.firm-facts { margin-top: 48px; }
.statement.who table.fw td.stage { width: 12rem; }

/* Right-hand header links: a second nav on desktop; on a phone the same links sit at the end of the one scrolling row */
.nav-right { margin-left: auto; }
.nav .phone-only { display: none; }
.masthead .phone-enquire { display: none; }
@media (max-width: 960px) { .nav-right { display: none; } .nav .phone-only { display: block; } .masthead .phone-enquire { display: inline-flex; } }
@media (min-width: 861px) and (max-width: 960px) { .masthead > .container { flex-wrap: nowrap; gap: 0 24px; } .nav { gap: 0 24px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .masthead .phone-enquire { flex: none; } }
table.fw td.stage .sub { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--amber-700); margin-top: 2px; }
.prose.wide h3 + table.fw { margin-top: 8px; }

/* Capability statement: printable */
.capability h2 { margin-top: 40px; }
@media print {
  .capability h2 { margin-top: 20px; break-after: avoid; }
  .capability table, .capability dl { break-inside: avoid; }
  .page-hero .crumbs { display: none; }
}

/* Home: brand line on the SAFER band, service group cards, closing row */
.section.dark .kicker { color: var(--amber-400); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: 16px; }
.caps.groups .cap h3 a { color: inherit; text-decoration: none; }
.caps.groups .cap { position: relative; padding-bottom: 52px; }
.caps.groups .cap h3 a::after { content: ""; position: absolute; inset: 0; }
.caps.groups .cap::after { content: "→"; position: absolute; left: 24px; bottom: 20px; font-weight: 600; color: var(--text-link); }
.caps.groups .cap:hover { border-color: var(--text-strong); box-shadow: 0 8px 24px rgba(11, 17, 22, 0.08); }
.caps.groups .cap:has(a:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.caps.groups .cap h3 a:focus-visible { outline: none; }
.caps.groups .cap h3 a:hover { text-decoration: underline; }
.closing-row { max-width: 70ch; font-size: var(--text-lg); line-height: 1.55; }
#problems .next { margin-top: 20px; }
.service-list .deliver { margin-top: 8px; font-size: var(--text-md); color: var(--text-body); }
.service-list .deliver strong { color: var(--text-strong); font-weight: 600; }