/* ==========================================================================
   twofed — portfolio styles
   Plain CSS, no build step. Colours and spacing live in the tokens below.
   ========================================================================== */

/* Fonts: self-hosted Geist (SIL OFL 1.1) — no requests to third parties. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
/* The site is dark only. Print uses a light palette (see @media print below). */
:root {
  color-scheme: dark;

  --bg: #0e0e0d;
  --bg-elevated: #171715;
  --ink: #f2f0ea;
  --ink-soft: #cfcdc6;
  --muted: #9b9993;
  --line: #2a2926;
  --line-strong: #f2f0ea;
  --control: #6c6b66; /* borders of form controls: 3.6:1 on --bg (WCAG 1.4.11) */
  --accent: #ff6a3d;
  --on-accent: #121211;
  --sev-critical: #ff5a4f;
  --sev-high: #ffa033;
  --sev-medium: #e3c23d;
  --sev-low: #6c6b66;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --grid-gap: clamp(16px, 2vw, 32px);
  --section-space: clamp(88px, 12vw, 168px);
  --header-h: 64px;
  --mbar-h: 65px; /* 48px buttons + 8px padding above and below + 1px border */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Paper is white and browsers skip dark backgrounds when printing. */
/* ---------- Mobile action bar (phones only) ---------- */
.mbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--line);
  transition: transform 0.25s var(--ease);
}

.mbar .button {
  justify-content: center;
  min-width: 0;
  padding-inline: 12px;
}

/* With JavaScript the bar starts off-screen and stays out of the tab order until main.js shows it. */
.js .mbar {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.25s var(--ease), visibility 0s linear 0.25s;
}

.js .mbar.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

@media (max-width: 599px) {
  html {
    scroll-padding-bottom: calc(var(--mbar-h) + 16px);
  }

  .site-footer {
    padding-bottom: calc(28px + var(--mbar-h));
  }
}

@media (min-width: 600px) {
  .mbar {
    display: none;
  }
}

@media print {
  :root {
    color-scheme: light;

    --bg: #ffffff;
    --bg-elevated: #f3f2ee;
    --ink: #121211;
    --ink-soft: #3b3a37;
    --muted: #6c6b66;
    --line: #dcdad2;
    --line-strong: #121211;
    --accent: #ff4d12;
    --sev-critical: #d12a1f;
    --sev-high: #f08a00;
    --sev-medium: #c9a100;
    --sev-low: #9b9993;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

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

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ---------- Typography helpers ---------- */
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.label-index {
  color: var(--ink);
  margin-right: 0.75em;
}

.lead {
  font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
}

.text-link {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}

.text-link:hover {
  text-decoration-color: var(--accent);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.button .icon {
  transition: transform 0.25s var(--ease);
}

.button:hover .icon {
  transform: translate(2px, -2px);
}

.button-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.button-ghost:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.button-small {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.875rem;
}

/* ---------- Line above the header (home page): a short, temporary notice. It scrolls away; the header stays. ---------- */
.topline {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.topline-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 14px;
  padding-block: 9px;
  text-align: center;
}

.topline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.topline-link .icon {
  transition: transform 0.25s var(--ease);
}

/* Phones get the short wording, so the notice stays on one line. Only one variant is ever displayed, so screen
   readers hear one. */
.topline-short {
  display: none;
}

@media (max-width: 599px) {
  .topline-long {
    display: none;
  }

  .topline-short {
    display: inline;
  }
}

.topline-link:hover .icon {
  transform: translate(2px, -2px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-decoration: none;
}

.brand-dot {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--accent);
}

.site-nav ul {
  display: flex;
  gap: clamp(16px, 2.4vw, 36px);
}

.site-nav a {
  position: relative;
  font-size: 0.9375rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-nav a:hover {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(56px, 8vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

.hero-title {
  font-size: clamp(3rem, 8.2vw, 7.5rem);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.hero-title .muted {
  color: var(--muted);
}

/* Highlighted words: an orange marker behind dark text, like selected text. The marker is centred on the capitals and
   at most 1.05em tall, instead of filling Geist's taller 1.3em text box; in tight headlines it stays 4px shorter than
   the line, so highlights on two lines never merge (browsers without the lh unit keep 1.05em). clone repeats the marker
   and the padding on every line when a highlight wraps. */
.accent {
  padding-inline: 0.08em;
  background: linear-gradient(var(--accent), var(--accent)) center / 100% 1.05em no-repeat;
  background-size: 100% min(1.05em, calc(1lh - 4px));
  color: var(--on-accent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (forced-colors: active) {
  .accent {
    forced-color-adjust: none;
    background-image: linear-gradient(Highlight, Highlight);
    color: HighlightText;
  }
}

.hero-body {
  margin-top: clamp(36px, 4.5vw, 64px);
  row-gap: 32px;
}

.hero-kicker {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-top: 0.45em;
  opacity: 0.8;
}

/* One continuous list: each name stays whole and carries its own separator, so lines break only between names. */
.hero-kicker ul {
  line-height: 1.9;
}

.hero-kicker li {
  display: inline;
  white-space: nowrap;
}

.hero-kicker li:not(:last-child)::after {
  content: " ·";
  content: " ·" / "";
}

.hero-lead {
  grid-column: 4 / span 6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.facts {
  margin-top: clamp(72px, 10vw, 136px);
  border-top: 1px solid var(--line);
}

.fact {
  grid-column: span 3;
  padding-top: 24px;
}

.fact dt {
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.fact dd {
  margin-top: 10px;
  max-width: 16em;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--section-space);
  border-top: 1px solid var(--line);
}

.section-head {
  margin-bottom: clamp(48px, 7vw, 104px);
  row-gap: 20px;
}

.section-head .label {
  grid-column: 1 / span 3;
  padding-top: 0.9em;
}

.section-head-main {
  grid-column: 4 / -1;
}

.section-title {
  max-width: 17em;
  font-size: clamp(2.125rem, 4.6vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.section-intro {
  max-width: 36em;
  margin-top: 24px;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  color: var(--muted);
}

.content {
  grid-column: 4 / -1;
}

/* ---------- Quest (Your audit): tick what sounds like you, see which audit fits and get a WhatsApp or email draft ---------- */
/* .quest is a size container: the content column changes width at other points than the viewport, so the cards and the
   result panel follow the space they actually get. */
.quest {
  container-type: inline-size;
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

.quest fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.quest-pains-legend {
  padding: 0;
  margin-bottom: 16px;
}

/* Pain cards: native checkboxes wrapped by the whole card. Narrow: compact rows. Wider: centred cards in 2 or 3 columns,
   with the last card centred under the others. */
.pains {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.pain {
  position: relative;
  display: flex;
}

/* The input covers the whole card, so keyboard focus scrolls the full card into view. */
.pain input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.pain-box {
  flex: 1;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  grid-template-areas:
    "icon label check"
    "text text text";
  align-items: center;
  align-content: start;
  gap: 8px 12px;
  min-height: 64px;
  padding: 14px 16px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.pain-icon {
  grid-area: icon;
  width: 24px;
  height: 24px;
  color: var(--accent);
}

.pain-label {
  grid-area: label;
}

.pain-text {
  grid-area: text;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Unticked: an empty square. Ticked: a light square with a dark check and a 2px edge, so the state never relies on colour. */
.pain-check {
  grid-area: check;
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--bg);
  border: 1px solid var(--control);
  border-radius: 4px;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

@media (hover: hover) {
  .pain:hover .pain-box {
    border-color: var(--control);
  }

  .pain:hover .pain-check {
    border-color: var(--ink);
  }
}

.pain input:checked + .pain-box {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, var(--bg-elevated));
}

.pain input:checked + .pain-box .pain-check {
  background: var(--ink);
  border-color: var(--ink);
}

.pain input:checked + .pain-box .pain-check::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid var(--bg);
  border-left: 2px solid var(--bg);
  transform: rotate(-45deg);
}

.pain input:focus-visible + .pain-box {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  .pain-check,
  .pain:hover .pain-check {
    forced-color-adjust: none;
    background: Canvas;
    border-color: CanvasText;
  }

  .pain input:checked + .pain-box {
    border-color: Highlight;
  }

  .pain input:checked + .pain-box .pain-check {
    background: Highlight;
    border-color: Highlight;
  }

  .pain input:checked + .pain-box .pain-check::after {
    border-color: HighlightText;
  }

  .pain-icon {
    color: CanvasText;
  }
}

@container (min-width: 520px) {
  .pains {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .pain {
    grid-column: span 2;
  }

  .pain:last-child {
    grid-column: 2 / span 2;
  }

  .pain-box {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "icon"
      "label"
      "text";
    justify-items: center;
    gap: 6px;
    padding: 22px 20px 24px;
    text-align: center;
  }

  .pain-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
  }

  .pain-check {
    position: absolute;
    top: 14px;
    right: 14px;
  }

  .pain-text {
    font-size: 1.0625rem;
  }
}

@container (min-width: 760px) {
  .pains {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pain:last-child {
    grid-column: 3 / span 2;
  }
}

/* Result panel under the cards: the audit and its price on top, then the draft and the two send buttons. */
.quest-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-elevated);
  border-radius: 6px;
}

.quest-result-head {
  display: grid;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* The draft keeps a readable width, so the buttons don't stretch across a wide panel. */
.quest-result-send {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  max-width: 36rem;
}

.quest-reco {
  max-width: 30em;
  text-wrap: balance;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.quest-next {
  max-width: 36em;
  font-size: 0.875rem;
  color: var(--muted);
}

.quest-static-audit h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
}

.quest-audit-name {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.quest-audit-meta {
  white-space: nowrap;
}

.quest-audit-sum {
  max-width: 36em;
  margin-bottom: 12px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.quest-message {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
}

.quest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quest-actions .button {
  flex: 1 1 12rem;
  justify-content: center;
}

.quest-note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.quest-static h3 {
  margin-bottom: 12px;
}

.quest-static-audits {
  display: grid;
  gap: 28px;
}

.quest-static-audit {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.quest-static-audit h4 {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 6px;
  font: inherit;
}

.quest-static-fits {
  max-width: 36em;
  margin-bottom: 12px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.quest-static-fits .label {
  margin-right: 0.5em;
}

.quest-static-help {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.quest-static-points li {
  padding-block: 4px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.quest-static-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
}

.quest-static .quest-next,
.quest-static-help {
  margin-top: 22px;
}

.quest-static .quest-note {
  max-width: 46em;
  margin-top: 16px;
}

@media (min-width: 720px) {
  .quest-static-audits {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Price terms ---------- */
.plan-title {
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ---------- Prices ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.plan {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg-elevated);
  border-radius: 6px;
}

.plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.plan-head .label {
  white-space: nowrap;
}

/* Maintenance cards: how often the software changes sits above the plan name, so neither row wraps. */
.plan-head-cadence {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 6px;
}

.plan > p {
  margin-top: 16px;
  color: var(--ink-soft);
}

/* Audit cards: the price and the duration share one row. */
.plan-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 10px;
  margin-top: 20px;
}

.plan > .plan-price {
  margin-top: 20px;
}

.plan-price-row .label {
  white-space: nowrap;
}

.plan > .plan-price,
.plan-price-row .plan-price {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}

/* Three narrow columns: the price also scales with the card, so it shares one row with the duration.
   Browsers without container units keep the size above. */
@media (min-width: 861px) and (max-width: 1199px) {
  .plan > .plan-price,
  .plan-price-row .plan-price {
    font-size: min(clamp(2rem, 3.2vw, 2.75rem), 12cqi);
  }
}

.plan-from,
.plan-per {
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.plan-from {
  margin-right: 0.35em;
}

.plan-per {
  margin-left: 0.15em;
}

.price-group + .price-group {
  margin-top: clamp(72px, 9vw, 120px);
}

.price-group-head {
  margin-bottom: 32px;
  row-gap: 12px;
}

.price-group-head .label {
  grid-column: 1 / span 3;
  padding-top: 0.3em;
}

.price-group-head p {
  grid-column: 4 / -1;
  max-width: 36em;
  color: var(--muted);
}

/* Maintenance: its own heading and a hairline above, so it reads apart from the audits. */
.price-group-care {
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}

.price-group-intro {
  grid-column: 4 / -1;
}

.price-group-title {
  max-width: 18em;
  margin-bottom: 16px;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Terms for every price: label on the left, rows on the right. */
.price-terms {
  margin-top: clamp(56px, 7vw, 88px);
  row-gap: 16px;
}

.price-terms > .label {
  grid-column: 1 / span 3;
  padding-top: 1.1em;
}

.terms-list {
  grid-column: 4 / -1;
  max-width: 52em;
  border-top: 1px solid var(--line);
}

.terms-list div {
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.terms-list dd {
  color: var(--ink-soft);
}

.section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(64px, 8vw, 104px);
}

.plan ul {
  padding-top: 32px;
}

.plan li {
  display: flex;
  gap: 10px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}

.plan li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--accent);
}

/* The card's button sits at the bottom, so the buttons of one row line up; long labels wrap inside the button. */
.plan > .plan-cta {
  margin-top: auto;
  padding-top: 28px;
}

.plan-cta .button {
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
  border-radius: 24px;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

/* ---------- Toolbox ---------- */
.toolbox {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px var(--grid-gap);
}

.toolbox h3 {
  margin-bottom: 16px;
}

.toolbox li {
  padding-block: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 0.96875rem;
  color: var(--ink-soft);
}

/* ---------- About ---------- */
.about-statement {
  grid-column: 4 / -1;
  max-width: 20em;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.about-body {
  margin-top: clamp(40px, 6vw, 80px);
  row-gap: 48px;
}

.about-photo {
  grid-column: 1 / span 3;
}

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-elevated);
}

.about-text {
  grid-column: 4 / span 5;
  display: grid;
  align-content: start;
  gap: 20px;
  color: var(--ink-soft);
}

.about-facts {
  grid-column: 10 / -1;
}

.about-facts div {
  display: grid;
  gap: 2px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
}

.about-facts div:last-child {
  border-bottom: 1px solid var(--line);
}

.about-facts dd {
  font-size: 0.96875rem;
}

/* Work examples under "Who am I": label on the left, then cards in a row like the price plans. */
.work {
  margin-top: clamp(72px, 9vw, 120px);
}

.work-head {
  margin-bottom: 32px;
  row-gap: 12px;
}

.work-head .label {
  grid-column: 1 / span 3;
  padding-top: 0.3em;
}

.work-head p {
  grid-column: 4 / -1;
  max-width: 36em;
  color: var(--muted);
}

.work-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg-elevated);
  border-radius: 6px;
}

.work-title {
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.work-card > p:not(.label) {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.work-result {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.work-result dd {
  font-size: 0.9375rem;
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}

.work-tags li {
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq {
  border-bottom: 1px solid var(--line);
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}

.faq-icon::after {
  transform: rotate(90deg);
}

.faq details[open] .faq-icon::after {
  transform: rotate(0deg);
}

.faq summary:hover .faq-icon {
  color: var(--accent);
}

.faq-answer {
  max-width: 44em;
  padding-bottom: 28px;
  color: var(--muted);
}

/* ---------- Contact ---------- */
.contact {
  padding-bottom: clamp(64px, 8vw, 112px);
}

.contact-title {
  margin-top: 28px;
  font-size: clamp(2.75rem, 8.4vw, 7.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: clamp(32px, 5vw, 56px);
  font-size: clamp(1.5rem, 4.6vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--line);
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
}

.contact-email .icon {
  width: 0.7em;
  height: 0.7em;
  transition: transform 0.25s var(--ease);
}

.contact-email:hover {
  text-decoration-color: var(--accent);
}

.contact-email:hover .icon {
  transform: translate(4px, -4px);
}

.contact-foot {
  margin-top: clamp(40px, 6vw, 72px);
  row-gap: 24px;
  align-items: end;
}

.contact-foot p {
  grid-column: 1 / span 5;
  color: var(--muted);
}

.contact-actions {
  grid-column: 7 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 28px;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.footer-inner ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-inner a {
  text-decoration: none;
}

.footer-inner a:hover {
  color: var(--ink);
}

/* ---------- Legal / simple pages ---------- */
.page {
  padding-top: clamp(64px, 10vw, 136px);
  padding-bottom: var(--section-space);
}

.page-title {
  margin-top: 20px;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* Author and date under a page title. */
.page-byline {
  margin-top: 20px;
}

.page-byline a {
  color: var(--ink);
}

.prose {
  max-width: 44rem;
  margin-top: clamp(40px, 6vw, 72px);
  color: var(--ink-soft);
}

.prose h2 {
  margin-top: 56px;
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.prose h3 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
}

.prose p + p,
.prose p + ul,
.prose ul + p {
  margin-top: 14px;
}

.prose ul {
  list-style: disc;
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 6px;
}

.prose .prose-updated {
  margin-top: 56px;
}

.prose .legal-facts {
  margin-block: 20px;
  border-bottom: 1px solid var(--line);
}

.legal-facts div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 4px 24px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
}

.legal-facts dt {
  padding-top: 0.2em;
}

.legal-facts dd {
  color: var(--ink);
}

@media (max-width: 600px) {
  .legal-facts div {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sample audit report ---------- */
.report-notice {
  max-width: 44rem;
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: 0 6px 6px 0;
  color: var(--ink-soft);
}

.report-numbered {
  list-style: decimal;
  padding-left: 1.25em;
}

.report-numbered li + li {
  margin-top: 6px;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.table-wrap {
  margin-block: 20px;
  overflow-x: auto;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.report-table th {
  padding: 0 16px 10px 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 450;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
}

.report-table td {
  padding: 12px 16px 12px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink);
}

.report-table td:last-child,
.report-table th:last-child {
  padding-right: 0;
}

.report-table .num {
  text-align: right;
  white-space: nowrap;
}

.report-table tfoot td {
  border-top-color: var(--line-strong);
  font-weight: 500;
}

.sev {
  --sev: var(--sev-low);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.sev::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sev);
}

.sev-critical { --sev: var(--sev-critical); }
.sev-high { --sev: var(--sev-high); }
.sev-medium { --sev: var(--sev-medium); }
.sev-low { --sev: var(--sev-low); }

.prose .sev-scale {
  list-style: none;
  padding-left: 0;
}

.sev-scale li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
}

.sev-scale .sev {
  justify-self: start;
}

.finding {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.prose .finding h4 {
  margin-top: 12px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.finding-body {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 8px 20px;
  margin-top: 14px;
}

.finding-body dt {
  padding-top: 0.25em;
}

.finding-body dd {
  color: var(--ink-soft);
}

.report-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.prose .report-cta + p {
  margin-top: 20px;
}

/* Keeps an ID such as CVE-2026-109618 on one line. */
.nowrap {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .finding-body,
  .sev-scale li {
    grid-template-columns: 1fr;
  }

  .finding-body dd + dt {
    margin-top: 6px;
  }

  .report-cta .button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media print {
  .topline,
  .site-header,
  .site-footer,
  .skip-link,
  .report-cta,
  .plan-cta,
  .quest,
  .quest-static,
  .mbar {
    display: none;
  }

  .accent {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .page {
    padding-block: 0;
  }

  .finding {
    break-inside: avoid;
  }
}

.not-found {
  min-height: calc(100vh - var(--header-h) - 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.not-found p {
  margin-top: 20px;
  margin-bottom: 36px;
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .about-text {
    grid-column: 4 / span 6;
  }
}

@media (max-width: 860px) {
  .hero-kicker,
  .hero-lead,
  .section-head .label,
  .section-head-main,
  .content,
  .about-statement,
  .about-text,
  .price-group-head .label,
  .price-group-head p,
  .price-group-intro,
  .price-terms > .label,
  .terms-list,
  .about-facts,
  .about-photo,
  .work-head .label,
  .work-head p,
  .contact-foot p,
  .contact-actions {
    grid-column: 1 / -1;
  }

  .about-photo {
    max-width: 300px;
  }

  .hero-kicker,
  .section-head .label,
  .price-group-head .label,
  .price-terms > .label,
  .work-head .label {
    padding-top: 0;
  }

  .hero-kicker {
    grid-row: auto;
  }

  .terms-list div {
    grid-template-columns: minmax(0, 1fr);
  }

  .fact {
    grid-column: span 6;
    padding-bottom: 24px;
  }

  .plans,
  .work-list {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    justify-content: flex-start;
  }
}

/* Tablets: the photo sits next to the text instead of alone above it. */
@media (min-width: 600px) and (max-width: 860px) {
  .about-photo {
    grid-column: 1 / span 4;
    max-width: none;
  }

  .about-text {
    grid-column: 5 / -1;
  }
}

/* Very narrow phones: a page header with two buttons keeps only the main one. */
@media (max-width: 359px) {
  .header-actions .button-ghost:not(:last-child) {
    display: none;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 1rem;
  }

  .hero-title {
    font-size: clamp(2.25rem, 9vw, 3rem);
  }

  .header-actions .button-small {
    padding: 0 14px;
  }

  .toolbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions .button,
  .section-cta .button {
    flex: 1 1 auto;
    justify-content: center;
  }
}