/* Contextric site styles.
   Office annotation: highlighter, footnotes and margin notes. */

@font-face { font-family: "Funnel Display"; src: url("/fonts/funnel-display-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/onest-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url("/fonts/spline-sans-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --ground: #E8EDEA;
  --sage: #DCE4E0;
  --paper: #FFFFFF;
  --ink: #12241F;
  --text: #34443F;
  --muted: #586A64;
  --rule: #C6D1CC;
  --marker: #F7E36A;
  --pencil: #2747C4;
  --on-ink: #F1F4F2;
  --on-ink-muted: #AFC0B9;

  --display: "Funnel Display", system-ui, sans-serif;
  --body: "Onest", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body { margin: 0; background: var(--ground); color: var(--text); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--ink); margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.7rem, 5.8vw, 4.75rem); line-height: 1; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; }
h3 { font: 600 1.125rem/1.3 var(--body); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--pencil); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--pencil); outline-offset: 3px; border-radius: 2px; }
.site-header :focus-visible, .hero__text :focus-visible, .section--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--marker); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.lede { font-size: 1.25rem; line-height: 1.5; }
.note-label { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--pencil); margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { top: 1rem; }

/* Highlighter: a slightly uneven stroke that draws in left to right. */
mark { color: inherit; background: none; }
.marker, .wordmark__mark {
  background: linear-gradient(100deg, transparent 0.3em, var(--marker) 0.35em, var(--marker) calc(100% - 0.3em), transparent calc(100% - 0.2em)) no-repeat 0 62% / 100% 70%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.12em; margin: 0 -0.12em;
}
.marker { animation: draw 0.9s 0.3s cubic-bezier(0.6, 0, 0.3, 1) both; }
/* Below the hero, each section's highlight draws as it scrolls into view. */
@supports (animation-timeline: view()) {
  .section .marker { animation-timeline: view(); animation-range: entry 30% cover 35%; animation-delay: 0s; }
}
/* On the dark band the whole glyph must sit on yellow, so the stroke is full height. */
.hero .marker, .section--ink .marker { color: var(--ink); background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 0 / 100% 100%; padding: 0 0.15em; margin: 0; animation-name: draw-full; }
@keyframes draw-full { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes draw { from { background-size: 0% 70%; } to { background-size: 100% 70%; } }

/* Buttons */
.button { display: inline-block; background: var(--ink); color: var(--paper); font: 600 1rem/1 var(--body); padding: 1rem 1.4rem; border-radius: 6px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.button:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--marker); }
.button--small { padding: 0.7rem 1rem; font-size: 0.9375rem; }
.link-arrow { font-weight: 600; color: var(--ink); text-decoration-color: var(--pencil); }
.link-arrow::after { content: " \2192"; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2rem; }
.pill { display: inline-block; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; background: var(--marker); color: var(--ink); padding: 0.35rem 0.5rem; border-radius: 3px; vertical-align: 0.1em; }

/* Header */
.site-header { background: var(--ink); border-bottom: 1px solid rgba(241, 244, 242, 0.12); position: sticky; top: 0; z-index: 5; }
.site-header__inner { display: flex; align-items: center; gap: 2rem; min-height: 4.5rem; }
.wordmark { font: 700 1.6rem/1 var(--display); letter-spacing: -0.03em; color: var(--on-ink); text-decoration: none; }
/* On the dark header the whole of "text" sits on yellow. */
.site-header .wordmark__mark { color: var(--ink); background: var(--marker); padding: 0 0.08em; margin: 0 0.04em; border-radius: 2px; }
.nav { display: flex; gap: 1.75rem; margin-left: auto; }
.nav a { color: var(--on-ink-muted); font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--marker); }
.site-header .button { background: var(--marker); color: var(--ink); }
.site-header .button:hover { box-shadow: 0 4px 0 var(--paper); }
@media (max-width: 64rem) { .nav { display: none; } .site-header__inner > .button { margin-left: auto; } }

/* Photo backgrounds: a greyscale photo (::before) under a palette tint
   (::after), both behind the section's content. */
.has-photo { position: relative; isolation: isolate; overflow: hidden; }
.has-photo::before, .has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.has-photo::before { background: var(--photo) var(--photo-pos, center) / cover no-repeat; filter: grayscale(1) contrast(var(--photo-contrast, 1.05)); }

/* Hero: pallet racking, the world the Hollins Freight email comes from.
   The tint is heaviest behind the headline. */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5.5rem); background: var(--ink); color: var(--on-ink-muted); --photo: url("/images/photos/warehouse.webp"); --photo-pos: center 40%; }
.hero::after { background:
  linear-gradient(90deg, rgba(18, 36, 31, 0.96) 0%, rgba(18, 36, 31, 0.88) 40%, rgba(18, 36, 31, 0.62) 100%),
  linear-gradient(rgba(18, 36, 31, 0.2), rgba(18, 36, 31, 0.6)); }
@media (max-width: 58rem) { .hero::after { background: rgba(18, 36, 31, 0.88); } }
.hero h1 { color: var(--on-ink); }
.hero .lede { color: #CFDAD5; }
.hero .button { background: var(--marker); color: var(--ink); }
.hero .button:hover { box-shadow: 0 4px 0 var(--paper); }
.hero .link-arrow { color: var(--on-ink); text-decoration-color: var(--marker); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.hero__text .lede { max-width: 32rem; margin-top: 1.75rem; }
@media (max-width: 58rem) { .hero__grid { grid-template-columns: 1fr; } }

.case { background: var(--paper); border-radius: 10px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); overflow: hidden; }
.case__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--sage); padding: 0.35rem; gap: 0.35rem; }
.case__tabs button { font: 500 0.9375rem/1 var(--body); color: var(--muted); background: none; border: 0; border-radius: 6px; padding: 0.8rem 0.5rem; cursor: pointer; }
.case__tabs button:hover { color: var(--ink); }
.case__tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(18, 36, 31, 0.12); }

.email { padding: 1.5rem 1.75rem 1.25rem; border-bottom: 1px dashed var(--rule); }
.email__head { margin: 0 0 1rem; display: grid; gap: 0.2rem; font-size: 0.875rem; }
.email__head div { display: flex; gap: 0.75rem; }
.email__head dt { width: 4.5rem; color: var(--muted); font: 400 0.75rem/1.7 var(--mono); text-transform: uppercase; }
.email__head dd { margin: 0; color: var(--ink); font-weight: 500; }
.email__body { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); margin: 0; }

/* References in the email light up only when the agent has context. */
.ref { padding: 0 0.1em; border-radius: 2px; background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 0 / 0% 100%; transition: background-size 0.5s cubic-bezier(0.6, 0, 0.3, 1); }
.ref::after { content: attr(data-ref); font: 500 0.625rem/1 var(--mono); color: var(--pencil); vertical-align: super; margin-left: 0.15em; opacity: 0; transition: opacity 0.3s; }
/* Without context the references are plain text: no footnote space, no padding. */
[data-mode="without"] .ref { padding: 0; }
[data-mode="without"] .ref::after { font-size: 0; margin-left: 0; }
/* That can rewrap the email onto fewer lines, so main.js stacks an invisible
   copy laid out as "with context" behind it to hold the height. */
.email__text { display: grid; }
.email__text > * { grid-area: 1 / 1; }
.email__ghost { visibility: hidden; }
.email__ghost .ref { padding: 0 0.1em; }
.email__ghost .ref::after { font-size: 0.625rem; margin-left: 0.15em; }
[data-mode="with"] .ref { background-size: 100% 100%; }
[data-mode="with"] .ref::after { opacity: 1; }
[data-mode="with"] .ref:nth-of-type(2) { transition-delay: 0.15s; }
[data-mode="with"] .ref:nth-of-type(3) { transition-delay: 0.3s; }
[data-mode="with"] .ref:nth-of-type(2)::after { transition-delay: 0.15s; }
[data-mode="with"] .ref:nth-of-type(3)::after { transition-delay: 0.3s; }
/* Without context, all the generic AI picks up is the gist, which it matches
   to a help article. It takes no space with context, or in the ghost. */
.gist { border-radius: 2px; background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 0 / 0% 100%; transition: background-size 0.5s cubic-bezier(0.6, 0, 0.3, 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gist::after { content: attr(data-ref); font: 500 0 / 1 var(--mono); color: var(--pencil); vertical-align: super; opacity: 0; transition: opacity 0.3s; }
[data-mode="without"] .email__body:not(.email__ghost) .gist { background-size: 100% 100%; padding: 0 0.1em; }
[data-mode="without"] .email__body:not(.email__ghost) .gist::after { font-size: 0.625rem; margin-left: 0.15em; opacity: 1; }

/* Both replies share one grid cell, so the card is always the height of the
   longer one and switching tabs never moves the page. The inactive reply
   keeps its space but is invisible, which also hides it from screen readers. */
.case { display: grid; grid-template-columns: minmax(0, 1fr); }
.case > .reply { grid-row: 3; grid-column: 1; }
.case > .reply[hidden] { display: block; visibility: hidden; }
.reply { padding: 1.25rem 1.75rem 1.5rem; animation: rise 0.4s both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.reply__label { font: 500 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.4rem; }
.reply__text { color: var(--ink); font-size: 1rem; }
.reply__verdict { font-size: 0.875rem; color: var(--muted); margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.notes { list-style: none; counter-reset: n; margin: 0 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px dashed var(--rule); display: grid; gap: 0.55rem; font-size: 0.9375rem; }
.notes li { counter-increment: n; display: grid; grid-template-columns: 1.4rem 1fr; column-gap: 0.4rem; }
.notes li::before { content: counter(n); grid-row: span 2; font: 500 0.6875rem/1.9 var(--mono); color: var(--pencil); }
.notes__find { color: var(--ink); }
.notes__src { font: 400 0.75rem/1.4 var(--mono); color: var(--pencil); }
.notes__src::before { content: "from "; color: var(--muted); }

/* Platforms */
.platforms { padding: 1.75rem 0; background: var(--paper); }
.platforms__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem; }
.platforms .note-label { color: var(--muted); flex: none; }
.logos { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; list-style: none; margin: 0; padding: 0; }
.logos img { display: block; width: auto; height: 1.6rem; filter: grayscale(1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.logos img:hover { filter: none; opacity: 1; }
.logos .logo-aws { height: 2rem; }
.logos .logo-anthropic { height: 1rem; }
.logos .logo-hubspot { height: 1.75rem; }
.logos .logo-google-cloud { height: 1.5rem; }
@media (max-width: 52rem) { .logos { justify-content: flex-start; } }

/* Sections */
.section { padding: var(--section) 0; }
.section--sage { background: var(--sage); }
.section--ink { background: var(--ink); color: var(--on-ink-muted); }
.section--ink h2, .section--ink h3 { color: var(--on-ink); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .note-label { margin-bottom: 0.9rem; }
.note-label--on-ink { color: var(--marker); }
.section-head h2 + p { margin-top: 1.25rem; font-size: 1.125rem; }

.context-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.context-list > div { background: var(--paper); border-radius: 10px; padding: 1.75rem; }
.context-list h3 { font: 600 1.5rem/1.2 var(--display); margin: 0.6rem 0 0.6rem; letter-spacing: -0.01em; }
@media (max-width: 52rem) { .context-list { grid-template-columns: 1fr; } }

/* Process: a container port shows faintly through the dark band. */
#process { --photo: url("/images/photos/port.webp"); --photo-contrast: 1.15; }
#process::after { background: linear-gradient(rgba(18, 36, 31, 0.9), rgba(18, 36, 31, 0.97) 55%); }

/* Process: a staircase. Each step sits higher than the last, and the
   pilot is the landing where you decide whether to keep climbing. */
.stairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; counter-reset: none; }
.stair { display: flex; }
.stair:nth-child(1) { padding-top: 13rem; }
.stair:nth-child(2) { padding-top: 9.75rem; }
.stair:nth-child(3) { padding-top: 6.5rem; }
.stair:nth-child(4) { padding-top: 3.25rem; }
.stair__card { flex: 1; display: flex; flex-direction: column; background: rgba(28, 53, 48, 0.92); backdrop-filter: blur(4px); border-top: 4px solid var(--marker); border-radius: 0 0 10px 10px; padding: 1.25rem 1.25rem 1.5rem; color: var(--on-ink-muted); font-size: 0.9375rem; }
.stair__card > p { margin: 0; }
.stair__num { font: 500 2.75rem/1 var(--display); color: var(--marker); letter-spacing: -0.03em; }
.stair__card h3 { font: 600 1.3rem/1.15 var(--display); margin: 0.75rem 0 0.5rem; color: var(--on-ink); }
.stair__terms { display: flex; flex-direction: column; font: 400 0.75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-ink); margin-bottom: 0.9rem !important; padding-bottom: 0.9rem; border-bottom: 1px solid rgba(241, 244, 242, 0.15); }
.stair__terms span + span { color: var(--on-ink-muted); }

/* The pilot is optional: drawn as an outline step rather than a solid one. */
.stair--optional .stair__card { background: rgba(18, 36, 31, 0.6); border: 1.5px dashed rgba(241, 244, 242, 0.35); border-top: 4px dashed var(--marker); }

.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
.phases p:first-child { grid-column: span 3; }
.phases p:last-child { grid-column: span 2; }
.phases p { margin: 0; padding-top: 0.75rem; border-top: 1px solid rgba(241, 244, 242, 0.3); font-size: 0.9375rem; color: var(--on-ink-muted); }
.phases span { display: block; font: 600 1rem/1.4 var(--body); color: var(--on-ink); }

@media (prefers-reduced-motion: no-preference) {
  .stair { animation: climb 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
  .stair:nth-child(2) { animation-range: entry 15% cover 38%; }
  .stair:nth-child(3) { animation-range: entry 20% cover 41%; }
  .stair:nth-child(4) { animation-range: entry 25% cover 44%; }
  .stair:nth-child(5) { animation-range: entry 30% cover 47%; }
  @keyframes climb { from { opacity: 0; transform: translateY(2.5rem); } }
}

@media (max-width: 64rem) {
  .stairs { grid-template-columns: 1fr; gap: 0.75rem; }
  .stair, .stair:nth-child(n) { padding-top: 0; }
  .stair:nth-child(2) { margin-left: 1.5rem; }
  .stair:nth-child(3) { margin-left: 3rem; }
  .stair:nth-child(4) { margin-left: 4.5rem; }
  .stair:nth-child(5) { margin-left: 6rem; }
  .stair__card { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; border-radius: 0 0 10px 10px; }
  .stair__card > * { grid-column: 2; }
  .stair__num { grid-column: 1; grid-row: 1 / span 4; font-size: 2rem; }
  .stair__card h3 { margin-top: 0; }
  .phases { grid-template-columns: 1fr 1fr; }
  .phases p:nth-child(n) { grid-column: auto; }
}
@media (max-width: 40rem) {
  .stair:nth-child(n) { margin-left: 0; }
}

/* Services: margin notes carry the practical details */
.service { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); padding: 3rem 0; border-top: 1px solid var(--rule); }
.service:last-child { padding-bottom: 0; }
.service__margin { border-left: 3px solid var(--marker); padding-left: 1rem; font-size: 0.9375rem; color: var(--muted); align-self: start; }
.service__margin .note-label { margin-bottom: 0.35rem; }
.service__main h3 { font: 600 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--display); letter-spacing: -0.015em; margin-bottom: 0.75rem; }
.service__intro { font-size: 1.1875rem; color: var(--ink); max-width: 40rem; margin-bottom: 1.75rem; }
@media (max-width: 52rem) { .service { grid-template-columns: 1fr; } }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; max-width: 46rem; }
.ticks li { padding-left: 1.5rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.8rem; height: 0.35rem; background: var(--marker); }
.ticks strong { color: var(--ink); }

.courses { width: 100%; border-collapse: collapse; font-size: 0.9875rem; background: var(--paper); border-radius: 10px; overflow: hidden; }
.courses th, .courses td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ground); vertical-align: top; }
.courses thead th { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.courses tbody tr:last-child > * { border-bottom: 0; }
.courses tbody th { color: var(--ink); font-weight: 600; }
.courses tbody th span { display: block; font-weight: 400; color: var(--muted); font-size: 0.875rem; margin-top: 0.2rem; }
.courses .price { font: 500 0.9375rem/1.4 var(--mono); color: var(--ink); text-align: right; white-space: nowrap; }
@media (max-width: 40rem) {
  .courses thead { display: none; }
  .courses tr { display: grid; grid-template-columns: 1fr auto; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ground); }
  .courses th, .courses td { border: 0; padding: 0; }
  .courses td:not(.price) { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 0.875rem; }
  .courses tbody th span { display: none; }
}

.courses__note { margin: 1.25rem 0 0; font-size: 0.875rem; color: var(--muted); }
.offer { margin: 0 0 2rem; padding: 1rem 1.25rem; background: var(--paper); border-left: 4px solid var(--marker); border-radius: 0 10px 10px 0; color: var(--ink); }
.offer .note-label { margin-bottom: 0.3rem; }
.offer strong { background: var(--marker); padding: 0 0.15em; margin: 0 -0.05em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.offers { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2.5rem; }
.offers dt { font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.offers dd { margin: 0; }
@media (max-width: 40rem) { .offers { grid-template-columns: 1fr; } }


/* Examples */
.examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.example { background: var(--paper); border-radius: 10px; padding: 2rem; }
.example h3 { font: 600 1.375rem/1.25 var(--display); letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.example__desc { color: var(--muted); margin-bottom: 1.5rem; }
.example__note { margin: 1.5rem 0 0; padding: 0.9rem 1.1rem; background: var(--ground); border-left: 3px solid var(--marker); border-radius: 0 6px 6px 0; color: var(--ink); font-size: 0.9375rem; }
.flow { list-style: none; margin: 0; padding: 0; counter-reset: f; display: grid; gap: 0.6rem; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 2rem 1fr; font-size: 0.9875rem; }
.flow li::before { content: counter(f); font: 500 0.75rem/1.7 var(--mono); color: var(--pencil); }
.flow__human { color: var(--ink); font-weight: 600; }
.flow__human::after { content: "Person"; grid-column: 2; justify-self: start; margin-top: 0.35rem; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; background: var(--marker); padding: 0.35rem 0.5rem; border-radius: 3px; }
.legend { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--muted); }
@media (max-width: 52rem) { .examples { grid-template-columns: 1fr; } }

/* Founder */
.founder { display: grid; grid-template-columns: minmax(12rem, 22rem) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.founder__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.founder__text { max-width: 40rem; }
.founder__text h2 { margin-bottom: 1.5rem; }
@media (max-width: 48rem) { .founder { grid-template-columns: 1fr; } .founder__photo { max-width: 18rem; } }

/* Closing call to action on highlighter yellow */
.cta { background: var(--marker); padding: clamp(3.5rem, 7vw, 6rem) 0; color: var(--ink); --photo: url("/images/photos/paperwork.webp"); --photo-pos: center 60%; }
/* Paperwork shows through the yellow, strongest on the right, away from the text. */
.cta::before { opacity: 0.3; mix-blend-mode: multiply; }
.cta::after { background: linear-gradient(90deg, var(--marker) 30%, rgba(247, 227, 106, 0.4)); }
.cta__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem 4rem; align-items: end; }
.cta h2 { margin-bottom: 1rem; font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.cta p { max-width: 36rem; }
.cta .note-label { color: var(--ink); }
.cta__actions a:not(.button) { color: var(--ink); font-weight: 600; }
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.cta .button:hover { box-shadow: 0 4px 0 var(--paper); }
@media (max-width: 52rem) { .cta__inner { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-ink-muted); padding: 3rem 0; font-size: 0.9375rem; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--marker); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: flex-end; }
.site-footer__line { max-width: 30rem; color: var(--on-ink); }
@media (max-width: 40rem) { .site-footer__inner { grid-template-columns: 1fr; } .site-footer nav { justify-content: flex-start; } }

/* Featured example: the flow beside the email exchange it describes */
.example--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem 3rem; align-items: start; }
.thread { background: var(--ground); border-radius: 8px; padding: 1rem; display: grid; gap: 0.75rem; font-size: 0.9375rem; }
.msg { background: var(--paper); border-radius: 6px; padding: 1rem 1.25rem; box-shadow: 0 1px 0 var(--rule); color: var(--ink); }
.msg p { margin: 0 0 0.6rem; }
.msg p:last-child { margin-bottom: 0; }
.msg--reply { margin-left: 2.5rem; border-left: 3px solid var(--marker); }
.msg__head { margin: 0 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--rule); display: grid; gap: 0.1rem; font-size: 0.8125rem; }
.msg__head div { display: flex; gap: 0.75rem; }
.msg__head dt { width: 4.25rem; flex: none; font: 400 0.6875rem/1.8 var(--mono); text-transform: uppercase; color: var(--muted); }
.msg__head dd { margin: 0; font-weight: 500; }
.msg__list { margin: 0 0 0.6rem; padding-left: 1.25rem; }
.msg__list li { margin-bottom: 0.2rem; }
.msg__list li::marker { font: 500 0.75rem var(--mono); color: var(--pencil); }
.thread__status { margin: 0; font-size: 0.875rem; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0 0.25rem; }
@media (max-width: 58rem) { .example--wide { grid-template-columns: 1fr; } .msg--reply { margin-left: 1rem; } }

/* Hero intro, first load only: the agent reads the email, looks each
   reference up, then writes its draft. main.js adds .is-intro. */
.case.is-intro { animation: rise 0.6s 0.2s both; }
.is-intro .ref { animation: highlight 0.6s cubic-bezier(0.6, 0, 0.3, 1) both; }
.is-intro .ref::after { animation: appear 0.35s both; }
.is-intro .notes li { animation: slide 0.5s ease-out both; }
.is-intro .ref:nth-of-type(1), .is-intro .ref:nth-of-type(1)::after { animation-delay: 1.5s; }
.is-intro .ref:nth-of-type(2), .is-intro .ref:nth-of-type(2)::after { animation-delay: 2.2s; }
.is-intro .ref:nth-of-type(3), .is-intro .ref:nth-of-type(3)::after { animation-delay: 2.9s; }
.is-intro .notes li:nth-child(1) { animation-delay: 1.8s; }
.is-intro .notes li:nth-child(2) { animation-delay: 2.5s; }
.is-intro .notes li:nth-child(3) { animation-delay: 3.2s; }
.is-intro .reply--with .reply__label { animation: appear 0.35s 3.8s both; }
.is-intro .reply--with { animation: none; }
.is-intro .reply__verdict { opacity: 0; }
.is-intro.is-typed .reply__verdict { animation: pop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
/* The ghost holds the finished draft's height; the typed text sits over it. */
.reply__text:has(.draft__typed) { position: relative; }
.draft__ghost { opacity: 0; }
.draft__typed { position: absolute; inset: 0; }
/* After the draft: the approval request, Sam's stamp, then the work the
   agent did. During the first-load intro each appears in turn once the draft
   has finished typing; space is reserved throughout so nothing below moves. */
.stamp { display: inline-block; padding: 0.3rem 0.55rem; border: 2px solid var(--pencil); border-radius: 4px; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pencil); transform: rotate(-6deg); }
.done-log { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px dashed var(--rule); display: grid; gap: 0.45rem; font-size: 0.9375rem; color: var(--ink); }
.done-log li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.4rem; align-items: start; }
.done-log li::before { content: "\2713"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; border-radius: 50%; background: var(--ink); color: var(--marker); font-size: 0.7rem; font-weight: 700; }
.is-intro .stamp, .is-intro .done-log li { opacity: 0; }
.is-intro.is-typed .stamp { animation: stamp-in 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) 1.6s both; }
.is-intro.is-typed .done-log li { animation: msg-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.is-intro.is-typed .done-log li:nth-child(1) { animation-delay: 2.5s; }
.is-intro.is-typed .done-log li:nth-child(2) { animation-delay: 3.2s; }
.is-intro.is-typed .done-log li:nth-child(3) { animation-delay: 3.9s; }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-6deg) scale(1.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--pencil); animation: blink 0.8s steps(1) infinite; }
@keyframes highlight { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { opacity: 0; transform: translateX(-8px); } }
@keyframes pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* Email exchange plays in order when the card scrolls into view. main.js
   hides each [data-pending] item (.is-waiting), shows the writing indicator
   in its slot, then reveals it (.is-in). Hidden items keep their space. */
.thread { position: relative; }
.thread.is-waiting > [data-pending] { opacity: 0; }
.thread.is-waiting > .is-in { opacity: 1; animation: msg-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.thread.is-waiting > .msg--reply.is-in { animation-name: msg-in-reply; }
.thread.is-waiting > .thread__status.is-in { animation: pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.thread__typing { position: absolute; margin: 0; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.8rem; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 0 var(--rule); font: 500 0.75rem/1 var(--mono); color: var(--muted); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.thread__typing.is-on { opacity: 1; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--pencil); animation: typing-dot 1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes msg-in-reply { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* Text pages: privacy policy and 404 */
.page { padding-top: clamp(3rem, 6vw, 5rem); }
.prose { max-width: 44rem; }
.prose h1 { margin: 0.75rem 0 2rem; }
.prose h2 { font-size: 1.5rem; margin: 2.25rem 0 0.75rem; }