/* Hallmark · genre: modern-minimal · macrostructure: shared marketing layout
 * design-system: design.md · designed-as-app · tone: practical · anchor hue: green
 * Layout repair: shared components, balanced columns, restrained type.
 */
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; background: var(--color-paper); }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font: 400 var(--text-base)/1.65 var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:active { opacity: 0.8; }
a[aria-disabled="true"], button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
:focus-visible { outline: var(--rule-focus) solid var(--color-focus); outline-offset: 4px; }
section[id], main[id] { scroll-margin-top: 7rem; }
.container, .nav__inner { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
.skip-link { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: var(--z-tooltip); padding: var(--space-sm); background: var(--color-ink); color: var(--color-paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.nav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); border-bottom: var(--rule-thin) solid var(--color-rule); }
.nav__inner { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; color: var(--color-ink); font: 700 1.125rem/1 var(--font-body); text-decoration: none; white-space: nowrap; }
.brand img { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-control); }
.nav__center, .nav__right, .footer__links { display: flex; align-items: center; gap: var(--space-md); }
.nav__link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 560; line-height: 1; text-decoration: none; white-space: nowrap; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-accent); text-decoration: underline; }
.button, .text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; max-width: 100%; font-size: var(--text-base); font-weight: 650; line-height: 1; white-space: nowrap; }
.button { padding: var(--space-sm) var(--space-lg); border: var(--rule-thin) solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.button:hover { background: var(--color-accent); border-color: var(--color-accent); }
.button:active, .text-link:active { transform: translateY(1px); }
.nav__right .button { min-height: 2.75rem; font-size: var(--text-sm); }
.text-link { text-decoration: underline; text-underline-offset: 0.3em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { min-width: 0; font-family: var(--font-display); font-style: normal; font-weight: 650; letter-spacing: -0.035em; overflow-wrap: anywhere; text-wrap: balance; }
h1 { max-width: 17ch; margin-bottom: var(--space-lg); font-size: var(--text-display); line-height: 1.08; }
h2 { max-width: 26ch; margin-bottom: var(--space-lg); font-size: var(--text-3xl); line-height: 1.16; }
h3 { margin-bottom: var(--space-xs); color: var(--color-ink); font: 650 var(--text-md)/1.35 var(--font-body); }
p { margin-bottom: var(--space-md); }
.label { margin-bottom: var(--space-md); color: var(--color-accent); font-size: var(--text-sm); line-height: 1.5; font-weight: 650; }
.lede { max-width: 58ch; margin-bottom: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.65; }
.hero { padding-block: var(--space-3xl); border-bottom: var(--rule-thin) solid var(--color-rule); }
.hero__layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); }
.brief, .desk-card { min-width: 0; padding: var(--space-xl); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.brief img { width: 3rem; height: 3rem; border-radius: var(--radius-control); margin-bottom: var(--space-lg); }
.brief p { margin: 0; color: var(--color-ink-2); }
.brief strong { display: block; margin-bottom: var(--space-sm); font-size: var(--text-md); color: var(--color-ink); }
.section, .cta { padding-block: var(--space-3xl); border-bottom: var(--rule-thin) solid var(--color-rule); }
.section--paper { background: var(--color-paper-2); }
.prose-grid, .split, .cta__layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: start; gap: var(--space-2xl); }
#assistants .prose-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); }
.copy-flow { max-width: 68ch; }
.copy-flow p, .system-row p, .example p, .pain-list p, .details-list p, .workflow p { color: var(--color-ink-2); }
.copy-flow p:last-child { margin-bottom: 0; }
.inline-head { font-weight: 650; color: var(--color-ink); }
.aside-list, .desk-list, .pain-list, .details-list { padding: 0; margin: 0; list-style: none; }
.aside-list li { padding-block: var(--space-md); border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-ink-2); }
.aside-list li:first-child { padding-top: 0; border: 0; }
.aside-list strong { display: block; margin-bottom: var(--space-2xs); color: var(--color-ink); font-weight: 650; }
.examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.example { padding: var(--space-xl); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.example--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); gap: var(--space-xl); }
.example p { margin: 0; }
.system-row { padding-block: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.system-row:first-child { padding-top: 0; }
.system-row:last-child { border-bottom: 0; padding-bottom: 0; }
.system-row strong { display: block; margin-bottom: var(--space-xs); font-size: var(--text-md); font-weight: 650; }
.system-row p { margin: 0; }
.desk-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.desk-card__id { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-base); font-weight: 650; }
.desk-card__id img { width: 2rem; height: 2rem; border-radius: var(--radius-control); }
.status, .tag { font-size: var(--text-xs); font-weight: 650; color: var(--color-accent); }
.desk-list li { padding-block: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.desk-list li:last-child { padding-bottom: 0; border: 0; }
.desk-list strong { display: block; color: var(--color-ink); margin-bottom: var(--space-2xs); font-size: var(--text-base); }
.desk-list span { font-size: var(--text-sm); color: var(--color-ink-2); }
.desk-list .tag { display: none; }
.pain-list li, .details-list li { padding-block: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.pain-list li:first-child, .details-list li:first-child { padding-top: 0; }
.pain-list li:last-child, .details-list li:last-child { padding-bottom: 0; border: 0; }
.pain-list p, .details-list p { margin: 0; }
.workflow { list-style: none; counter-reset: stage; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
.workflow li { counter-increment: stage; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); }
.workflow li::before { content: counter(stage, decimal-leading-zero); color: var(--color-accent); font-weight: 650; }
.workflow p { margin: 0; }
.cta { background: var(--color-paper-2); }
.form-shell { padding: var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.tally-frame { display: block; width: 100%; min-height: 30rem; border: 0; background: var(--color-paper); }
.form-fallback { margin: var(--space-md) 0 0; font-size: var(--text-sm); }
.footer { padding-block: var(--space-2xl) var(--space-xl); background: var(--color-ink); color: var(--color-paper); }
.footer__line { max-width: 30ch; margin-bottom: var(--space-xl); font: 650 var(--text-3xl)/1.2 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.footer__meta { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-footer-rule); font-size: var(--text-sm); }
.footer__links { flex-wrap: wrap; }
.footer__link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-paper); line-height: 1; white-space: nowrap; }
.footer__link:hover { color: var(--color-paper); }
@media (max-width: 56rem) {
  .hero__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xl); }
  .prose-grid, .split, .cta__layout { gap: var(--space-xl); }
  .brief, .desk-card, .example { padding: var(--space-lg); }
  .nav__center { gap: var(--space-sm); }
}
@media (max-width: 47rem) {
  .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-sm); padding-top: var(--space-sm); }
  .nav__right { grid-column: 2; grid-row: 1; }
  .nav__center { grid-column: 1 / -1; justify-content: space-between; gap: var(--space-sm); }
  .nav__link { font-size: var(--text-xs); }
  .hero__layout, .prose-grid, #assistants .prose-grid, .split, .cta__layout, .examples, .workflow { grid-template-columns: minmax(0, 1fr); }
  .hero__layout, .prose-grid, .split, .cta__layout { gap: var(--space-xl); }
  .hero, .section, .cta { padding-block: var(--space-2xl); }
  .example--wide { grid-column: auto; display: block; }
  .hero__actions { gap: var(--space-md); }
  h1 { max-width: 19ch; }
  h2 { max-width: 26ch; }
  .footer__meta { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }
  .footer__links { gap: 0 var(--space-lg); }
}
@media (max-width: 25rem) {
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button, .hero__actions .text-link { width: 100%; }
  .brand { gap: var(--space-xs); font-size: var(--text-base); }
  .nav__right .button { padding-inline: var(--space-md); }
  .form-shell { padding: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:active, .text-link:active { transform: none; }
}

/* Visual content pass: purposeful workflow diagrams and progressive disclosure.
 * Existing shared theme, header, footer and CTA rules remain unchanged. */
.assistant-map { min-width: 0; margin: 0; padding: var(--space-xl) var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); }
.assistant-map figcaption { color: var(--color-ink-2); font-size: var(--text-sm); }
.flow-art { display: block; width: 100%; height: auto; margin-block: var(--space-sm); }
.flow-connector { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 5 5; }
.arrow-tip { fill: var(--color-accent); }
.flow-orbit { fill: none; stroke: var(--color-rule); stroke-width: 1; }
.flow-node { fill: var(--color-paper); stroke: var(--color-rule-strong); stroke-width: 1; }
.flow-core { fill: var(--color-ink); }
.flow-symbol, .flow-core-symbol { fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-core-symbol { stroke: var(--color-paper); }
.approval-mark { fill: var(--color-accent); }
.approval-tick { fill: none; stroke: var(--color-accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-labels { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); padding: 0; margin: 0; text-align: center; font-size: var(--text-sm); font-weight: 650; line-height: 1.4; }
.flow-note { margin: var(--space-xl) 0 0; padding-top: var(--space-md); border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.line-icon { display: block; width: 2rem; height: 2rem; flex-shrink: 0; color: var(--color-accent); }
.split > div > .line-icon { width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-lg); }
.visual-list { list-style: none; margin: 0; padding: 0; }
.visual-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-thin) solid var(--color-rule); }
.visual-list li:first-child { padding-top: 0; }
.visual-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.visual-list p { margin: 0; color: var(--color-ink-2); }
.feature-link { display: flex; align-items: start; gap: var(--space-md); padding: var(--space-lg); margin-top: var(--space-xl); color: var(--color-ink); border: var(--rule-thin) solid var(--color-rule-strong); border-radius: var(--radius-card); text-decoration: none; }
.feature-link:hover { border-color: var(--color-accent); }
.feature-link span span, .feature-link strong { display: block; }
.feature-link strong { margin-bottom: var(--space-xs); }
.feature-link span span { font-size: var(--text-sm); color: var(--color-ink-2); }
.feature-link .feature-link__cta { margin-top: var(--space-md); color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.disclosures { min-width: 0; border-top: var(--rule-thin) solid var(--color-rule-strong); }
.disclosures details { border-bottom: var(--rule-thin) solid var(--color-rule); }
.disclosures summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-weight: 650; line-height: 1.45; list-style: none; }
.disclosures summary::-webkit-details-marker { display: none; }
.disclosures summary::after { content: '+'; flex-shrink: 0; font-size: var(--text-md); color: var(--color-accent); }
.disclosures details[open] summary::after { content: '−'; }
.disclosures summary:hover { color: var(--color-accent); }
.disclosures summary:active { opacity: 0.8; }
.disclosures summary[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.disclosures p { margin: 0; padding: 0 0 var(--space-lg); max-width: 64ch; color: var(--color-ink-2); }
.build-path { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-xl) 0 0; padding: 0; gap: var(--space-xl); }
.build-path li { position: relative; padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule-strong); }
.build-path li:not(:last-child)::after { content: '→'; position: absolute; top: var(--space-lg); right: 0; color: var(--color-accent); }
.build-path .line-icon { margin-bottom: var(--space-lg); }
.build-path p { margin: 0; color: var(--color-ink-2); }
@media (max-width: 56rem) {
  .build-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-path li:nth-child(2)::after { content: none; }
}
@media (max-width: 47rem) {
  .assistant-map { padding: var(--space-lg); }
  .flow-note { margin-top: var(--space-lg); }
  .feature-link { margin-top: var(--space-lg); }
}
@media (max-width: 25rem) {
  .flow-labels { font-size: var(--text-xs); }
  .build-path { gap: var(--space-lg); }
  .build-path p { font-size: var(--text-sm); }
}

/* People-focused photography: locally hosted, intentionally cropped, illustrative. */
.people-photo { min-width: 0; margin: var(--space-lg) 0 0; }
.people-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-2); }
.people-photo figcaption { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.5; }
.people-photo--hero { margin-top: 0; }
.people-photo--hero img { aspect-ratio: 5 / 4; }
.people-photo--fade { position: relative; isolation: isolate; }
.people-photo--fade::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  pointer-events: none;
  background: linear-gradient(to left,
    color-mix(in srgb, var(--color-paper) 4%, transparent) 0%,
    color-mix(in srgb, var(--color-paper) 6%, transparent) 36%,
    color-mix(in srgb, var(--color-paper) 30%, transparent) 60%,
    color-mix(in srgb, var(--color-paper) 82%, transparent) 84%,
    var(--color-paper) 100%);
}
.assistant-map--compact { padding: var(--space-lg) var(--space-md); }
.assistant-map--compact .flow-note { margin-top: var(--space-lg); }
@media (max-width: 47rem) {
  .people-photo--hero { max-width: 38rem; width: 100%; }
}
