/* ============================================================
   HINT — openhint.dev
   Shared design system
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper:      #F6F4EE;
  --paper-2:    #EFEBE1;
  --paper-3:    #E7E2D5;
  --ink:        #16181D;
  --ink-2:      #3C414A;
  --ink-3:      #5D626C;
  --line:       rgba(22,24,29,0.12);
  --line-2:     rgba(22,24,29,0.07);

  /* dark "compile" surface */
  --surface:    #14161A;
  --surface-2:  #1B1E24;
  --surface-3:  #23272E;
  --on-surface: #E8E4D9;
  --on-surface-mut: #8B919C;

  /* accent — core HINT / software engineering */
  --accent:        #5746E6;
  --accent-bright: #9286FF;
  --accent-soft:   rgba(87,70,230,0.10);
  --accent-line:   rgba(87,70,230,0.28);
  --accent-2:      #3FB6A8; /* teal complement */

  /* syntax tokens (used on dark surface) */
  --tok-tag:  var(--accent-bright);
  --tok-name: #EDE9DF;
  --tok-id:   #5FD0C2;
  --tok-mut:  #9DA3AE;
  --tok-body: #B6BBC4;
  --tok-str:  #D9B27C;

  --maxw: 1180px;
  --radius: 4px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Hanken Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --section-space: clamp(52px, 6vw, 82px);
}

/* Profession-family accents. */
[data-accent="delivery"] {
  --accent: #5746E6; --accent-bright: #9286FF; --accent-soft: rgba(87,70,230,.10);
  --accent-line: rgba(87,70,230,.28); --accent-2: #3FB6A8;
}
[data-accent="law-assurance"] {
  --accent: #1C7A4F; --accent-bright: #5BC48E; --accent-soft: rgba(28,122,79,.10);
  --accent-line: rgba(28,122,79,.26); --accent-2: #C49A4C;
}
[data-accent="commercial"] {
  --accent: #A34A18; --accent-bright: #E58B52; --accent-soft: rgba(163,74,24,.10);
  --accent-line: rgba(163,74,24,.28); --accent-2: #367D78;
}
[data-accent="analysis-knowledge"] {
  --accent: #176B87; --accent-bright: #65BBD3; --accent-soft: rgba(23,107,135,.10);
  --accent-line: rgba(23,107,135,.27); --accent-2: #9A6CC2;
}
[data-accent="operations-learning"] {
  --accent: #8B3D6D; --accent-bright: #D783B5; --accent-soft: rgba(139,61,109,.10);
  --accent-line: rgba(139,61,109,.27); --accent-2: #B68532;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 32px; }
.section { padding-block: var(--section-space); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.divider { border-top: 1px solid var(--line); }

/* Shared profession hub/page components. */
.crumb { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3); margin-bottom: 26px; }
.crumb a:hover { color: var(--ink); }
.profession-thesis { max-width: 54ch; margin: 24px 0 30px; }
.profession-family + .profession-family { margin-top: 64px; }
.profession-family__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.profession-card { display: flex; flex-direction: column; min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.profession-card h3 { margin: 20px 0 9px; font-size: 1.2rem; }
.profession-card p { color: var(--ink-2); font-size: .94rem; }
.profession-card small { margin-top: auto; padding-top: 18px; color: var(--accent); font-family: var(--font-mono); }
.profession-card--soon { border-style: dashed; background: transparent; }
.profession-card--soon small { color: var(--ink-3); }
.profession-card--live { transition: transform .18s, border-color .18s, box-shadow .18s; }
.profession-card--live:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 40px -30px var(--ink); }
.profession-more { margin: 26px 0; }
@media (max-width: 900px) { .profession-family__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .profession-family__grid { grid-template-columns: 1fr; } }

/* ---------- Type ---------- */
h1, h2, h3, h4, .h1, .h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); }
.display {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.03em; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.02em; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--ink-2); font-weight: 400; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  /* Not `center`: an eyebrow that wraps to two lines would centre its rule across both of them and
     leave it floating between the lines. Pinned to the first line's optical middle instead, so the
     rule sits where a reader expects it however the text breaks. */
  align-items: flex-start;
  /* Stated rather than inherited, because the rule below is offset by half of it. */
  line-height: 1.6;
  gap: 10px;
}
/* Half a line down: the same place `align-items: center` put it on a single line, and still the
   first line's middle when the text wraps. */
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.6; flex: none; margin-top: 0.8em; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
strong { font-weight: 600; color: var(--ink); }
.accent-text { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.86rem; font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(0,0,0,0.02); }
.btn--on-dark { background: var(--on-surface); color: var(--surface); }
.btn--on-dark:hover { background: #fff; transform: translateY(-1px); }
.btn--ghost-dark { border-color: rgba(255,255,255,0.18); color: var(--on-surface); }
.btn--ghost-dark:hover { border-color: rgba(255,255,255,0.4); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-2);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__primary { flex: none; }
.nav__link {
  font-size: 0.92rem; color: var(--ink-2); font-weight: 500;
  transition: color .18s ease; position: relative;
}
.nav__link:hover { color: var(--ink); }
.nav__link--active { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__menu-btn { display: none; }
.nav__github { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-family: var(--font-mono); font-size: 0.82rem; transition: color .18s; }
.nav__github:hover { color: var(--ink); }
.nav__github svg { width: 17px; height: 17px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: flex-end; gap: 5px; }
.logo__img { height: 30px; width: auto; display: block; }
.logo__dev { font-family: var(--font-mono); font-weight: 500; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--ink-3); line-height: 1; padding-bottom: 3px; }
.footer__logo .logo__img { filter: brightness(0) invert(1); }
.footer__logo .logo__dev { color: var(--on-surface-mut); }
/* legacy mark (unused) */
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -0.04em; color: var(--ink); }
.logo__word .dim { color: var(--ink-3); font-weight: 500; }

/* ---------- Code panels ---------- */
.code {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  box-shadow: 0 24px 60px -28px rgba(16,18,24,0.5), 0 2px 0 rgba(255,255,255,0.02) inset;
}
/* Profession pages use a compact <pre class="code"><code> form without the
   window chrome below. Give that form its own readable foreground and spacing
   instead of inheriting the document's near-black inline-code color. */
pre.code {
  padding: 20px 22px;
  color: var(--tok-body);
  font-size: 0.82rem;
  line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
pre.code code { color: inherit; font: inherit; }
.code__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--surface-2);
}
.code__dots { display: flex; gap: 6px; }
.code__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.code__file { font-size: 0.78rem; color: var(--on-surface-mut); letter-spacing: 0.01em; }
.code__file b { color: var(--on-surface); font-weight: 500; }
.code__bar:has(.code__tag) { padding-right: 80px; }
.code__tag {
  margin-left: auto; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-bright); padding: 3px 9px; border: 1px solid var(--accent-line);
  border-radius: 100px;
}
.code__body {
  padding: 20px 22px;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--tok-body);
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.code__body::-webkit-scrollbar { height: 8px; }
.code__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.code--scroll .code__body { max-height: 460px; overflow-y: auto; }
.code__copy {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--on-surface-mut); padding: 5px 9px; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px; transition: all .18s; text-transform: uppercase;
}
.code__copy:hover { color: var(--on-surface); border-color: rgba(255,255,255,0.3); }
.code-wrap { position: relative; }

/* A single handoff from the human to whichever coding agent is already in the repository. */
.agent-handoff {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: 28px; align-items: center;
  margin-bottom: 30px; padding: 24px;
  border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 12px;
}
.agent-handoff h3 { margin: 0 0 8px; font-size: 1.12rem; }
.agent-handoff p { margin: 0; color: var(--ink-2); font-size: 0.94rem; }
.band .agent-handoff { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.13); }
.band .agent-handoff h3 { color: var(--on-surface); }
.band .agent-handoff p { color: var(--on-surface-mut); }

@media (max-width: 760px) {
  .agent-handoff { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
}

/* syntax tokens */
.t-h   { color: var(--tok-mut); }     /* markdown # */
.t-kw  { color: var(--accent-bright); font-weight: 600; }  /* hint keyword */
.t-nm  { color: var(--tok-name); }    /* name */
.t-id  { color: var(--tok-id); }      /* {#id} */
.t-tag { color: var(--tok-tag); }     /* compiled <tag> */
.t-at  { color: var(--tok-id); }      /* attribute */
.t-mut { color: var(--tok-mut); }     /* punctuation/comment */
.t-str { color: var(--tok-str); }     /* string-ish / values */
.t-cm  { color: var(--tok-mut); font-style: italic; }
.t-bd  { color: var(--tok-body); }
.t-kw2 { color: var(--tok-tag); font-weight: 600; }  /* a language keyword in emitted code */
/* A hole marker. Deliberately the loudest token in an emitted artifact: it is the one place a
   reader is allowed to write, and the whole generated-file idea fails if it does not stand out. */
.t-hole { color: var(--tok-id); font-weight: 600; }

/* light inline code */
code.inl {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--paper-3); color: var(--ink);
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-2);
}
.on-dark code.inl { background: rgba(255,255,255,0.08); color: var(--on-surface); border-color: rgba(255,255,255,0.1); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card--hover:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(16,18,24,0.35); }

/* ---------- Footer ---------- */
.footer { background: var(--surface); color: var(--on-surface); padding-block: 72px 40px; }
.footer a { color: var(--on-surface-mut); transition: color .18s; }
.footer a:hover { color: var(--on-surface); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__col h5 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-mut); margin-bottom: 16px; font-weight: 500; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col li { font-size: 0.92rem; }
.footer__brand p { color: var(--on-surface-mut); font-size: 0.92rem; max-width: 30ch; margin-top: 16px; }
.footer__logo .logo__word { color: var(--on-surface); }
.footer__logo .logo__word .dim { color: var(--on-surface-mut); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.09); font-size: 0.82rem; color: var(--on-surface-mut); font-family: var(--font-mono); flex-wrap: wrap; }
.footer__col > h2 { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-surface-mut); margin-bottom: 16px; font-weight: 500; }
.footer__professions ul { columns: 2; column-gap: 20px; }
.footer__professions li { break-inside: avoid; margin-bottom: 8px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line);
  color: var(--ink-2); background: var(--paper);
}
.pill--soon { color: var(--ink-3); border-style: dashed; }
.pill--on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.dot-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

/* Measured claims; every tile links to the committed methodology and results. */
.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.number {
  min-width: 0;
  min-height: 136px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper);
  transition: background .18s ease;
}
.number:hover { background: var(--paper-2); }
.number strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.08;
  color: var(--accent);
  text-wrap: balance;
}
.number span { display: block; margin-top: 18px; color: var(--ink-2); font-size: 0.82rem; line-height: 1.4; }
@media (max-width: 480px) { .number { min-height: 116px; padding: 20px; } }

/* keyword chip */
.kw {
  font-family: var(--font-mono); font-size: 0.8rem;
  background: var(--surface); color: var(--accent-bright);
  padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
  display: inline-block;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 22px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nav__links { display: none; }
  .nav__github span { display: none; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav__inner { gap: 14px; }
}

/* ---------- Shared site-quality components ---------- */
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.nav__menu-btn { width: 42px; height: 42px; margin-left: auto; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid var(--line); border-radius: 6px; }
.nav__menu-btn span { display: block; width: 19px; height: 2px; background: var(--ink); }
.mobile-menu { position: fixed; z-index: 49; inset: 64px 0 0; display: none; padding: 28px 22px; background: var(--paper); flex-direction: column; gap: 10px; }
.mobile-menu a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1.08rem; }
.mobile-menu.open { display: flex; }

.profession-hero { padding-block: clamp(46px, 6vw, 76px); }
.hero__text, .hero-human, .related { min-width: 0; }
.hero-human .btn { max-width: 100%; white-space: normal; text-align: left; }
.profession-hero h1 { max-width: 19ch; margin: 16px 0 20px; font-size: clamp(2.5rem, 5.5vw, 4.8rem); }
.profession-hero > .wrap > .lede { max-width: 62ch; }
.package-note { margin-top: 14px; color: var(--ink-3); font-size: .9rem; }
.handoff { margin-top: 38px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); }
.handoff h2 { margin: 10px 0 14px; font-size: clamp(1.65rem, 3vw, 2.45rem); }
.handoff > p:not(.eyebrow) { max-width: 72ch; color: var(--ink-2); }
.handoff a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.handoff__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.copy-status { min-height: 1.5em; color: var(--accent); font-family: var(--font-mono); font-size: .78rem; }
.handoff__steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.handoff__steps div { padding-top: 16px; border-top: 1px solid var(--accent-line); }
.handoff__steps dt { font-weight: 600; }
.handoff__steps dd { margin-top: 4px; color: var(--ink-2); font-size: .92rem; }
.handoff--closing { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px 20px; }
.handoff--closing h2, .handoff--closing p { margin: 0; }
.handoff--closing .btn { grid-column: 2; grid-row: 1 / span 2; }

.section .wrap > .eyebrow + h2 { margin: 14px 0 30px; font-size: clamp(1.8rem, 3.4vw, 3rem); }
.situation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.situation { padding: 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.situation__before { min-height: 4.8em; color: var(--ink-3); font-size: .88rem; }
.situation h3 { margin: 20px 0 10px; font-size: 1.25rem; }
.situation h3::before { content: '→ '; color: var(--accent); }
.situation p:last-child { color: var(--ink-2); }
.example { background: var(--paper-2); }
.example > .wrap > p:not(.eyebrow) { max-width: 66ch; margin: -14px 0 28px; color: var(--ink-2); }
.example__grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 24px; align-items: stretch; }
.demo__src { margin-bottom: 10px; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-3); overflow-wrap: anywhere; }
.demo__src a { text-decoration: underline; text-underline-offset: 3px; }
.example__result { padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.example__result h3 { margin-bottom: 12px; }
.example__result > p { color: var(--ink-2); }
.example__result details { margin-top: 24px; }
.example__result summary, .technical > summary, .faq summary { cursor: pointer; font-weight: 600; }
.compiled { margin-top: 12px; padding: 16px; overflow-x: auto; border-radius: 6px; background: var(--surface); color: var(--tok-body); font: .76rem/1.7 var(--font-mono); }
.trust__grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 36px; align-items: start; }
.trust h2 { margin: 14px 0 24px; font-size: clamp(1.8rem, 3.4vw, 3rem); }
.trust ul { padding-left: 1.2em; display: grid; gap: 12px; }
.disclaimer { padding: 26px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); }
.disclaimer h3 { margin-bottom: 10px; }
.disclaimer p { color: var(--ink-2); }
.faq-layout { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); gap: 48px; }
.faq { border-top: 1px solid var(--line); padding: 18px 0; }
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq p { padding: 12px 24px 0 0; color: var(--ink-2); }
.technical { border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.technical > summary { padding: 22px 26px; font-family: var(--font-display); font-size: 1.25rem; }
.technical__body { display: grid; grid-template-columns: 1.2fr 1fr .6fr; gap: 32px; padding: 0 26px 28px; }
.technical__body section { min-width: 0; }
.technical__body h2 { margin-bottom: 12px; font-size: 1.2rem; }
.keyword-list { margin-top: 18px; }
.kwrow { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.kwrow code { color: var(--accent); font-family: var(--font-mono); }
.kwrow dd { color: var(--ink-2); font-size: .9rem; }
.technical__body ul { padding-left: 1.2em; }
.related__links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.related__links .card h2 { font-size: 1.15rem; }
.related__links .card p { margin-top: 8px; color: var(--ink-2); font-size: .9rem; }

.hero__grid > *, .install, .code, .code-wrap { min-width: 0; max-width: 100%; }
.install { overflow-x: auto; }
.pill { width: fit-content; }

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: flex; }
  .handoff__steps, .situation-grid, .related__links { grid-template-columns: 1fr; }
  .handoff__steps dd { max-width: 65ch; }
  .example__grid, .trust__grid, .faq-layout { grid-template-columns: 1fr; }
  .technical__body { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --section-space: 48px; }
  .profession-hero h1 { font-size: clamp(2.25rem, 12vw, 3.2rem); }
  .handoff { padding: 22px; }
  .handoff__actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .hero-human .btn { width: 100%; justify-content: center; text-align: center; }
  .handoff--closing { grid-template-columns: 1fr; }
  .handoff--closing .btn { grid-column: 1; grid-row: auto; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__professions ul { columns: 2; }
  .kwrow { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .swap-in, .swap-out { animation: none !important; transition: none !important; }
}