/* The Pattern Systems diagnosis. One brand (13 Nov 2026): the site's own look, so the tool reads as part of
   patternsystems.ai. Monochrome ink on paper, Montserrat for headings and headline figures, Inter for everything
   else, hairlines instead of shadows. No accent colour: emphasis is weight, size and one solid ink block (the next
   step). The only colour is the red of an error. Phone first; follows the visitor's light or dark setting.
   Every colour is a token, so dark mode is the one override block after :root. */
:root {
  --paper: oklch(1 0 0);
  --paper-2: oklch(0.972 0.002 250);
  --paper-3: oklch(0.945 0.003 250);
  --ink: oklch(0.17 0.004 250);
  --ink-2: oklch(0.36 0.004 250);
  --ink-3: oklch(0.46 0.004 250);
  --line: oklch(0 0 0 / 0.12);
  --line-soft: oklch(0 0 0 / 0.07);
  --line-strong: oklch(0 0 0 / 0.26);
  --bad: #B3261E;
  --r-chip: 5px; --r-control: 10px; --r-card: 14px;
  --head: Montserrat, Inter, system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 56px;
  --gutter: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(0.145 0.003 250);
    --paper-2: oklch(0.19 0.004 250);
    --paper-3: oklch(0.24 0.004 250);
    --ink: oklch(0.965 0.002 250);
    --ink-2: oklch(0.82 0.003 250);
    --ink-3: oklch(0.70 0.003 250);
    --line: oklch(1 0 0 / 0.14);
    --line-soft: oklch(1 0 0 / 0.08);
    --line-strong: oklch(1 0 0 / 0.30);
    --bad: #FF8A80;
    color-scheme: dark;
  }
  /* The wordmark is a black SVG; invert it rather than ship a second file */
  .mark img { filter: invert(1); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; min-height: 100dvh; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--head); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-chip); }
::selection { background: var(--ink); color: var(--paper); }
.money, .tc, .row-cost, .prob-c, .part-cost, .fig-n { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.error { color: var(--bad); font-size: 14px; font-weight: 500; }
.lbl { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Bar ── */
.bar { position: sticky; top: 0; z-index: 30; height: var(--bar-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.mark { display: flex; align-items: center; min-height: 44px; }
.mark img { display: block; height: 28px; width: auto; }
.bar-stage { font-size: 14px; font-weight: 500; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Buttons and fields ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: transparent; color: var(--ink); font: 600 15px/1.2 var(--body); text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease), opacity .15s; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-lg { min-height: 54px; font-size: 16px; padding: 0 22px; }
.btn-sm { min-height: 44px; font-size: 14px; padding: 0 14px; }
.btn-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); cursor: pointer; touch-action: manipulation; }
.link-btn { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 500 14px/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { background: var(--paper-3); }
  .btn-primary:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
  .btn-icon:hover { background: var(--paper-3); color: var(--ink); }
  .link-btn:hover { text-decoration-thickness: 2px; }
}
input, textarea { width: 100%; font: 400 16px/1.45 var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-control); padding: 14px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .8; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: var(--r-control); }
input[aria-invalid="true"] { border-color: var(--bad); }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Page frame ── */
.page { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.desk-main { min-width: 0; }
.foot { display: flex; gap: 20px; justify-content: center; padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); font-size: 13px; color: var(--ink-3); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
body[data-view="chat"] .foot, body[data-view="working"] .foot { display: none; }

/* ── Entry: what you get, who it's for, how long, then the email ── */
.gate { padding: 24px 0 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.kicker { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-bottom: 10px; }
.gate h1 { font-size: clamp(29px, 7.6vw, 46px); line-height: 1.08; }
.gate-h { font: 600 13px/1.3 var(--body); letter-spacing: 0; color: var(--ink-3); margin: 20px 0 0; }
.gets li { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.gets svg { width: 22px; height: 22px; margin-top: 1px; }
.gets strong { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.gets span { display: block; font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.facts { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr; margin-top: 16px; }
.facts > div { padding: 0 12px; border-left: 1px solid var(--line); }
.facts > div:first-child { padding-left: 0; border-left: 0; }
.facts dt { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.facts dd { font-size: 14px; font-weight: 600; line-height: 1.3; }
.gate-form, .resume { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper-2); }
.resume { margin-bottom: 14px; }
.gate-form label { font-weight: 600; font-size: 15px; }
.gate-form label span { display: block; font-weight: 400; font-size: 14px; color: var(--ink-3); margin-top: 1px; }
.gate-form .small a { white-space: nowrap; }
.gate-from { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ── The interview ── */
.strip { position: sticky; top: var(--bar-h); z-index: 25; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter); border: 0; border-bottom: 1px solid var(--line-soft); background: var(--paper); color: var(--ink); font: 500 13px/1 var(--body); cursor: pointer; touch-action: manipulation; }
.strip-part { color: var(--ink-3); white-space: nowrap; }
.segs { flex: 1; display: flex; gap: 3px; min-width: 40px; }
.seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.seg.done { background: var(--ink); }
.seg.now { background: var(--ink-3); }
.strip-found { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.strip-lbl { color: var(--ink-3); }
.strip .money { font-weight: 600; font-size: 14px; }
.chat { display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - 45px); }
.thread { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px 0 20px; }
.msg { max-width: 100%; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.bot { padding-right: 24px; }
.msg.me { align-self: flex-end; max-width: 88%; padding: 11px 14px; background: var(--paper-3); border-radius: 16px 16px 4px 16px; }
.msg.problem { color: var(--bad); font-weight: 500; }
.msg.typing { padding: 6px 0; }
.dots { display: inline-flex; gap: 5px; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dot 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.composer { position: sticky; bottom: 0; z-index: 20; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line-soft); }
.composer-row { display: flex; align-items: flex-end; gap: 6px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--paper); }
.composer-row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.composer-row textarea { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; padding: 10px 8px 10px 10px; resize: none; max-height: 168px; }
.composer-row textarea:focus-visible { outline: none; }
.send { min-height: 44px; padding: 0 16px; border-radius: 10px; }
.mic.rec { background: var(--ink); color: var(--paper); }
.composer-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
.hint { font-size: 13px; color: var(--ink-3); }
.early { display: grid; gap: 12px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper-2); font-size: 15px; }
.early .acts .btn { flex: 1; }

/* The list of parts: under the strip on a phone, beside the chat on a wide screen */
.desk-side { display: none; }
.desk-side.open { display: block; position: fixed; z-index: 24; top: calc(var(--bar-h) + 44px); left: 0; right: 0; max-height: calc(100dvh - var(--bar-h) - 44px); overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--gutter) 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.map-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.map-total .lbl { display: grid; gap: 2px; }
.map-total .lbl em { font-style: normal; font-weight: 400; }
.map-total .money { font: 700 24px/1 var(--head); letter-spacing: -0.02em; white-space: nowrap; }
.map-total .per { font: 400 13px/1 var(--body); color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }
.map-list { padding-top: 6px; }
.map-row { position: relative; padding: 8px 0 8px 22px; font-size: 14px; }
.map-node { position: absolute; left: 2px; top: 14px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper); }
.map-row.done .map-node { background: var(--ink); border-color: var(--ink); }
.map-row.now .map-node { border-color: var(--ink); box-shadow: 0 0 0 3px var(--line); }
.map-row.next { color: var(--ink-3); }
.map-name { display: flex; justify-content: space-between; gap: 10px; font-weight: 500; }
.map-row.now .map-name { font-weight: 600; }
.map-tag { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-3); margin-left: 8px; }
.map-leaks { margin-top: 3px; display: grid; gap: 2px; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.map-leaks li { display: flex; justify-content: space-between; gap: 10px; }
.map-leaks .num { white-space: nowrap; }
.side-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* ── Writing the report ── */
.working { padding: 56px 0; max-width: 460px; }
.working h2 { font-size: 26px; line-height: 1.15; margin-bottom: 8px; }
.work-steps { margin-top: 26px; display: grid; gap: 14px; }
.work-steps li { position: relative; padding-left: 30px; color: var(--ink-3); transition: color .3s; }
.work-steps li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.work-steps li.done { color: var(--ink-2); }
.work-steps li.done::before { background: var(--ink); border-color: var(--ink); }
.work-steps li.now { color: var(--ink); font-weight: 600; }
.work-steps li.now::before { border-color: var(--ink); animation: pulse 1.4s infinite ease-in-out; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px var(--line); } }

/* ── The report ── */
.report { padding: 28px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.report h2 { font-size: 22px; line-height: 1.2; }
.report h3 { font: 600 16px/1.3 var(--body); }
.card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper-2); }
.card > * + * { margin-top: 12px; }

/* The headline figures: large, with the unit underneath, ruled like lines on a costed sheet */
.sum-kicker { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; overflow-wrap: anywhere; }
.sum h1 { font-size: clamp(28px, 7.4vw, 40px); line-height: 1.1; overflow-wrap: anywhere; }
.sum-who { margin-top: 8px; color: var(--ink-2); }
.figs { margin-top: 20px; border-top: 2px solid var(--ink); }
.fig { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fig-n { font: 700 clamp(34px, 10.5vw, 52px)/1 var(--head); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.fig-n small { font: 600 .42em/1 var(--body); letter-spacing: 0; }
.fig-l { font-size: 15px; color: var(--ink-2); }
.sum-note { margin-top: 12px; font-size: 14px; color: var(--ink-3); }

.cons h2 { font-size: 21px; overflow-wrap: anywhere; }
.cons h3 { margin-top: 18px; }
.cons-foot { font-size: 14px; color: var(--ink-3); }
.steps { counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding-left: 30px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; font: 600 12px/1 var(--body); font-variant-numeric: tabular-nums; }
.obs { display: grid; gap: 8px; }
.obs li { padding-left: 16px; position: relative; }
.obs li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 1.5px; background: var(--ink-3); }

/* Every problem on one screen */
.probs h2 { margin-bottom: 6px; }
.rows > li { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; text-decoration: none; }
.row-main { min-width: 0; }
.row-main strong { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.row-main span { display: block; font-size: 14px; color: var(--ink-3); }
.row-cost { text-align: right; font-weight: 600; font-size: 17px; white-space: nowrap; }
.row-cost small, .prob-c small, .part-cost small, .tc small { display: block; font: 400 12px/1.3 var(--body); color: var(--ink-3); }
.row-fix { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.row-fix em { font-style: normal; font-weight: 600; color: var(--ink); margin-right: 4px; }
.chip { display: inline-block; max-width: 100%; padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: var(--r-chip); font: 500 12px/1.4 var(--body); color: var(--ink-2); overflow-wrap: anywhere; vertical-align: 1px; }
.chip-solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.probs-foot { margin-top: 12px; font-size: 14px; }
@media (hover: hover) { .row:hover .row-main strong { text-decoration: underline; text-underline-offset: 3px; } }

/* The one solid block on the page: the next step */
.nudge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: var(--r-card); background: var(--ink); color: var(--paper); }
.nudge .btn-primary { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.nudge :focus-visible { outline-color: var(--paper); }
@media (hover: hover) { .nudge .btn-primary:hover { background: var(--paper-3); border-color: var(--paper-3); } }

/* Part by part */
.parts > h2 { margin-bottom: 4px; overflow-wrap: anywhere; }
.part { padding-top: 22px; }
.part-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.part-cost { text-align: right; font-weight: 600; white-space: nowrap; }
.part-ok { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.part-ok svg { width: 15px; height: 15px; }
.part-note { padding: 10px 0; color: var(--ink-2); font-size: 15px; border-bottom: 1px solid var(--line-soft); }
.prob { border-bottom: 1px solid var(--line); }
.prob summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; min-height: 56px; padding: 10px 0; cursor: pointer; list-style: none; touch-action: manipulation; }
.prob summary::-webkit-details-marker, .fold summary::-webkit-details-marker { display: none; }
.prob-t { font-weight: 600; font-size: 16px; line-height: 1.3; }
.prob-c { text-align: right; font-weight: 600; white-space: nowrap; }
.chev { color: var(--ink-3); transition: transform .2s var(--ease); }
details[open] > summary .chev { transform: rotate(180deg); }
.prob-body { padding: 2px 0 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.prob-body h4 { font: 600 13px/1.3 var(--body); color: var(--ink-3); margin-top: 12px; }
.said { color: var(--ink-2); }
.sum-line { font-size: 14px; padding: 10px 12px; border-radius: var(--r-control); background: var(--paper-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.build { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; margin-top: 10px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.build-tag { font-weight: 600; font-size: 14px; }
.tools { margin-top: 10px; display: grid; gap: 12px; }
.tools li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; font-size: 15px; }
.tool-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tool-name svg { width: 16px; height: 16px; }
.tool-name em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.tool-do { color: var(--ink-2); padding-left: 24px; }
.later { font-size: 14px; color: var(--ink-2); }
.first { margin-top: 10px; padding: 14px; border: 1px solid var(--ink); border-radius: var(--r-card); }
.first h4 { margin: 0 0 4px; color: var(--ink); }

/* Tools and what they cost */
.tools-cost table { width: 100%; border-collapse: collapse; }
.tools-cost td { padding: 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.tools-cost td span { display: block; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.tc { text-align: right; white-space: nowrap; padding-left: 14px !important; font-weight: 500; }
.total td { border-top: 2px solid var(--ink); }

/* The next step: the offer for businesses it fits, a lighter one for everyone else */
.next h2 { font-size: 23px; line-height: 1.2; }
.offer { padding: 24px 20px; }
.offer > h2 { font-size: clamp(22px, 5.9vw, 28px); }
.path { counter-reset: p; margin-top: 20px !important; }
.path > li { counter-increment: p; position: relative; padding: 0 0 22px 38px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.path > li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 13px/1 var(--head); }
.path > li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 32px; bottom: 6px; width: 1px; background: var(--line-strong); }
.path > li:last-child { padding-bottom: 4px; }
.path-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 26px; }
.path-h h3 { font: 700 17px/1.2 var(--head); letter-spacing: -0.01em; }
.path p { color: var(--ink-2); font-size: 15px; }
.path-sub { font-weight: 600; font-size: 13px !important; color: var(--ink-3) !important; margin-top: 6px; }
.checks { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.checks li { position: relative; padding-left: 16px; }
.checks li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 1.5px; background: var(--ink-3); }
.guar { display: flex; gap: 9px; align-items: flex-start; color: var(--ink) !important; font-weight: 500; }
.guar svg { margin-top: 2px; width: 18px; height: 18px; }
.fold { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fold summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 500; font-size: 14px; }
.fold p { padding-bottom: 14px; font-size: 14px; color: var(--ink-2); }
.offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.offer > h2 .money { white-space: nowrap; }
.offer > p:not(.lbl):not(.guar) { color: var(--ink-2); font-size: 15px; }
.offer .acts { align-items: center; gap: 10px 16px; }
.offer .acts .btn { width: 100%; }
.reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.reviews li { display: grid; gap: 8px; align-content: space-between; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper); }
.reviews blockquote { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.reviews cite { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink); }
.build-price { font-size: 15px; }
@media (min-width: 720px) {
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer .acts .btn { width: auto; }
  .offer { gap: 12px; padding: 22px 24px; }
  .offer > h2 { font-size: 24px; }
  .reviews li { padding: 12px; gap: 6px; }
  .reviews blockquote { font-size: 13.5px; }
  .reviews cite { font-size: 12.5px; }
  .offer .fold summary { min-height: 40px; }
}
.vt { margin-top: 22px !important; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding-top: 20px; border-top: 1px solid var(--line); }
.vt video { width: 96px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-control); background: var(--paper-3); }
.vt blockquote { font-size: 15px; line-height: 1.45; }
.vt cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--ink-3); }

.rate-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 340px; }
.rate-row .btn { padding: 0; }
.rate-row .btn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.report-foot { text-align: center; }

/* Cookie consent (ga.js): same choice as the Pattern Systems site */
.consent { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; display: grid; gap: 12px; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: var(--r-card); font-size: 14px; line-height: 1.45; }
.consent-acts { display: flex; gap: 8px; }
.consent-acts .btn { flex: 1; }
body[data-view="chat"] .consent { bottom: auto; top: calc(var(--bar-h) + 54px); }

/* Page not found */
.lost { padding: 72px 0; display: grid; gap: 14px; justify-items: start; max-width: 460px; }
.lost h1 { font-size: 30px; line-height: 1.15; }

/* ── Wide screens: the entry splits in two, and the list of parts sits beside the chat and the report ── */
@media (min-width: 900px) {
  :root { --gutter: 32px; --bar-h: 64px; }
  .gate { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 64px; align-items: start; padding: 64px 0 48px; }
  .gate-side { position: sticky; top: calc(var(--bar-h) + 32px); }
  .gate-form, .resume { padding: 24px; }
  .desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
  body[data-view="chat"] .desk, body[data-view="report"] .desk { grid-template-columns: minmax(0, 660px) 300px; justify-content: center; }
  body[data-view="chat"] .desk-side, body[data-view="report"] .desk-side, .desk-side.open { display: block; position: sticky; top: calc(var(--bar-h) + 28px); align-self: start; max-height: calc(100dvh - var(--bar-h) - 56px); overflow-y: auto; padding: 0; border: 0; left: auto; right: auto; background: none; z-index: auto; margin-top: 28px; }
  .strip { display: none !important; }
  .chat { min-height: calc(100dvh - var(--bar-h)); }
  .composer { margin: 0; padding-left: 0; padding-right: 0; }
  .figs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .offer { padding: 32px; }
  .offer .acts .btn { width: auto; }
  .nudge { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .report { padding-top: 40px; gap: 36px; }
  .working { padding: 96px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .bar, .foot, .strip, .composer, .rate, .consent, .desk-side, .vt video { display: none !important; }
  details > *:not(summary) { display: block !important; }
  .nudge { background: none; color: inherit; border: 1px solid; }
}

/* Long unbroken strings (a tool name, a web address in an answer) wrap inside their own box instead of widening the page */
.tool-name strong, .tools-cost td:first-child, .row-main, .row-fix, .prob-t, .map-leaks span, .map-name span:first-child, .checks li, .steps li, .obs li, .said, .part-note, .later, .build p, .card p, .card h2, .part-head h3 { min-width: 0; overflow-wrap: anywhere; }