/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Hallmark · genre: modern-minimal · macrostructure: Narrative Workflow · theme: custom graphite/silver/periwinkle
 * enrichment: real product captures + generated brand mark · nav: N1b · footer: Ft2 · designed-as-app
 * audience: macOS developers and agent users · use: download Automic Vault · tone: technical/austere
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 */

:root {
  --brand-paper: oklch(5.5% 0.012 274);
  --brand-paper-raised: oklch(9% 0.014 274);
  --brand-paper-soft: oklch(12.5% 0.016 274);
  --brand-paper-glass: oklch(15% 0.022 274 / 0.72);
  --brand-paper-glass-hover: oklch(25% 0.055 297 / 0.82);
  --brand-ink: oklch(97% 0.008 275);
  --brand-ink-soft: oklch(78% 0.018 274);
  --brand-ink-dim: oklch(61% 0.022 274);
  --brand-rule: oklch(31% 0.025 274);
  --brand-rule-soft: oklch(22% 0.02 274);
  --brand-silver: oklch(87% 0.025 274);
  --brand-accent: oklch(78% 0.105 297);
  --brand-violet: oklch(68% 0.19 298);
  --brand-violet-soft: oklch(70% 0.16 298 / 0.17);
  --brand-danger: oklch(67% 0.2 27);
  --brand-success: oklch(72% 0.16 151);
  --brand-focus: oklch(82% 0.12 247);
  --brand-shadow: oklch(1% 0.01 274 / 0.62);
  --brand-shadow-soft: oklch(1% 0.01 274 / 0.3);
  --brand-wash: oklch(67% 0.13 297 / 0.075);
  --brand-wash-soft: oklch(67% 0.13 297 / 0.035);
  --brand-white-wash: oklch(100% 0 0 / 0.045);

  --brand-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --brand-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --brand-font-mono: "Geist Mono", ui-monospace, monospace;

  --brand-space-xs: 0.5rem;
  --brand-space-sm: 0.75rem;
  --brand-space-md: 1rem;
  --brand-space-lg: 1.5rem;
  --brand-space-xl: 2rem;
  --brand-space-2xl: 3rem;
  --brand-space-3xl: 4rem;
  --brand-space-4xl: 6rem;
  --brand-space-5xl: 8rem;

  --brand-text-xs: 0.75rem;
  --brand-text-sm: 0.875rem;
  --brand-text-md: 1rem;
  --brand-text-lg: 1.1875rem;
  --brand-text-2xl: clamp(2rem, 3.4vw, 3.75rem);
  --brand-text-display: clamp(3.15rem, 6vw, 6.8rem);

  --brand-radius-sm: 0.625rem;
  --brand-radius-md: 1rem;
  --brand-radius-lg: 1.5rem;
  --brand-radius-pill: 999px;
  --brand-rule-hair: 1px;
  --brand-rule-strong: 2px;
  --brand-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --brand-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --brand-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --brand-dur-micro: 120ms;
  --brand-dur-short: 220ms;
  --brand-max: 94rem;
  --brand-measure: 43rem;
  --brand-gutter: clamp(1.25rem, 4.6vw, 5rem);
}

html,
body {
  overflow-x: clip;
}

.brew-home {
  min-width: 0;
  color: var(--brand-ink);
  background: var(--brand-paper);
  font-family: var(--brand-font-body);
  font-size: var(--brand-text-md);
  font-weight: 400;
}

.brew-home::before {
  display: none;
}

.brew-home main,
.brew-footer {
  width: 100%;
  max-width: none;
  margin: 0;
}

.brew-home a {
  text-underline-offset: 0.2em;
}

.brew-home a:focus-visible {
  outline: var(--brand-rule-strong) solid var(--brand-focus);
  outline-offset: 4px;
}

.brew-nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--brand-space-xl);
  width: min(100%, var(--brand-max));
  min-height: 6.5rem;
  margin-inline: auto;
  padding: var(--brand-space-md) var(--brand-gutter);
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.brew-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--brand-space-sm);
  min-width: 0;
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  font-size: var(--brand-text-sm);
  font-weight: 650;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brew-brand img {
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: cover;
  filter: drop-shadow(0 0 18px var(--brand-violet-soft));
}

.brew-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brew-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
}

.brew-nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--brand-space-lg);
}

.brew-nav-links a,
.brew-github,
.brew-footer-meta a,
.brew-languages a {
  color: var(--brand-ink-soft);
  font-family: var(--brand-font-body);
  font-size: var(--brand-text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: color var(--brand-dur-micro) var(--brand-ease-out), opacity var(--brand-dur-micro) var(--brand-ease-out);
}

.brew-nav-links a:hover,
.brew-github:hover,
.brew-footer-meta a:hover,
.brew-languages a:hover {
  color: var(--brand-ink);
}

.brew-github:active {
  opacity: 0.72;
}

.brew-github[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.brew-download,
.brew-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: var(--brand-rule-hair) solid var(--brand-accent);
  border-radius: var(--brand-radius-pill);
  color: var(--brand-ink);
  background-color: var(--brand-paper-glass);
  background-image: linear-gradient(135deg, var(--brand-white-wash), transparent);
  box-shadow:
    inset 0 1px 0 var(--brand-white-wash),
    0 0 0 1px var(--brand-wash-soft),
    0 12px 30px var(--brand-shadow-soft);
  font-family: var(--brand-font-body);
  font-size: var(--brand-text-sm);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  backdrop-filter: blur(18px) saturate(125%);
  transition:
    transform var(--brand-dur-micro) var(--brand-ease-out),
    border-color var(--brand-dur-short) var(--brand-ease-out),
    background-color var(--brand-dur-short) var(--brand-ease-out),
    box-shadow var(--brand-dur-short) var(--brand-ease-out);
}

.brew-download:hover,
.brew-cta:hover {
  transform: translateY(-2px);
  border-color: var(--brand-silver);
  color: var(--brand-ink);
  background-color: var(--brand-paper-glass-hover);
  box-shadow:
    inset 0 1px 0 var(--brand-white-wash),
    0 0 28px var(--brand-wash),
    0 16px 36px var(--brand-shadow-soft);
}

.brew-download:active,
.brew-cta:active {
  transform: translateY(0) scale(0.985);
}

.brew-download[aria-disabled="true"],
.brew-cta[aria-disabled="true"],
.brew-download[data-state="loading"],
.brew-cta[data-state="loading"] {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.brew-download[data-state="error"],
.brew-cta[data-state="error"] {
  border-color: var(--brand-danger);
}

.brew-download[data-state="success"],
.brew-cta[data-state="success"] {
  border-color: var(--brand-success);
}

.brew-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.88fr);
  grid-template-areas:
    "copy capture"
    "promises promises";
  gap: clamp(2rem, 5vw, 6.5rem);
  align-items: center;
  min-height: 100svh;
  overflow: clip;
  padding: clamp(8.5rem, 13vh, 11rem) var(--brand-gutter) clamp(2rem, 5vh, 4rem);
  background:
    radial-gradient(circle at 75% 42%, var(--brand-wash), transparent 32rem),
    linear-gradient(105deg, var(--brand-paper), var(--brand-paper-raised) 58%, var(--brand-paper));
  isolation: isolate;
}

.brew-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--brand-rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-rule-soft) 1px, transparent 1px);
  background-size: 5rem 5rem;
  opacity: 0.17;
  mask-image: linear-gradient(to bottom, transparent, var(--brand-paper) 22%, var(--brand-paper) 70%, transparent);
  pointer-events: none;
}

.brew-hero-title {
  grid-area: copy;
  width: min(100%, 48rem);
  min-width: 0;
  justify-self: end;
}

.brew-kicker,
.brew-eyebrow,
.brew-stage {
  color: var(--brand-ink-dim);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.brew-kicker {
  margin-bottom: var(--brand-space-lg);
  color: var(--brand-accent);
  text-transform: uppercase;
}

.brew-stage {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-space-sm);
  margin: 0 0 var(--brand-space-md);
  color: var(--brand-silver);
}

.brew-stage::after {
  content: "";
  width: 3.5rem;
  height: var(--brand-rule-hair);
  background: var(--brand-rule);
}

.brew-hero h1 {
  max-width: 11.5ch;
  margin: 0;
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  font-size: var(--brand-text-display);
  font-style: normal;
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.brew-hero h1 span {
  display: block;
  color: var(--brand-accent);
}

.brew-hero-lede {
  max-width: 37rem;
  margin: var(--brand-space-xl) 0 0;
  color: var(--brand-ink-soft);
  font-size: var(--brand-text-lg);
  font-weight: 430;
  line-height: 1.55;
}

.brew-hero-title > p:not(.brew-kicker, .brew-hero-lede) {
  margin-top: var(--brand-space-md);
  color: var(--brand-silver);
  font-size: var(--brand-text-md);
  font-weight: 560;
}

.brew-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--brand-space-lg);
  margin-top: var(--brand-space-xl);
}

.brew-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--brand-accent);
  font-family: var(--brand-font-body);
  font-size: var(--brand-text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--brand-dur-micro) var(--brand-ease-out), transform var(--brand-dur-micro) var(--brand-ease-out);
}

.brew-text-link:hover {
  color: var(--brand-ink);
  transform: translateX(3px);
}

.brew-hero-capture {
  position: relative;
  grid-area: capture;
  width: min(100%, 43rem);
  min-width: 0;
  margin: 0;
  justify-self: start;
  isolation: isolate;
}

.brew-hero-capture::before {
  content: "";
  position: absolute;
  inset: 12% 4% 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--brand-violet-soft);
  filter: blur(64px);
  animation: brand-breathe 7s var(--brand-ease-in-out) infinite alternate;
}

.brew-hero-capture::after {
  display: none;
}

.brew-hero-capture img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--brand-radius-lg);
  background: transparent;
  box-shadow: 0 36px 100px var(--brand-shadow);
}

.brew-promises {
  grid-area: promises;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, var(--brand-max));
  margin: 0 auto;
  padding: var(--brand-space-xl) 0 0;
  border-top: var(--brand-rule-hair) solid var(--brand-rule);
}

.brew-promises li,
.brew-promises li:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--brand-space-xs) var(--brand-space-md);
  min-width: 0;
  padding: 0 var(--brand-space-xl);
  border: 0;
  border-left: var(--brand-rule-hair) solid var(--brand-rule);
}

.brew-promises li:first-child {
  padding-left: 0;
  border-left: 0;
}

.brew-promises span {
  display: block;
  grid-row: 1 / span 2;
  color: var(--brand-violet);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  font-weight: 700;
}

.brew-promises strong {
  color: var(--brand-ink);
  font-family: var(--brand-font-body);
  font-size: var(--brand-text-md);
  font-weight: 650;
}

.brew-promises small {
  color: var(--brand-ink-dim);
  font-family: var(--brand-font-body);
  font-size: var(--brand-text-sm);
  line-height: 1.45;
}

.brew-risk,
.brew-access,
.brew-feature,
.brew-capabilities,
.brew-pricing,
.brew-footer {
  padding-inline: var(--brand-gutter);
}

.brew-risk,
.brew-access,
.brew-feature,
.brew-capabilities {
  position: relative;
  overflow: clip;
  border-top: var(--brand-rule-hair) solid var(--brand-rule-soft);
  background: var(--brand-paper);
}

.brew-risk {
  padding-block: var(--brand-space-5xl);
}

.brew-split,
.brew-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
  width: min(100%, var(--brand-max));
  margin-inline: auto;
}

.brew-copy {
  width: auto;
  min-width: 0;
  margin: 0;
}

.brew-copy h2,
.brew-pricing h2,
.brew-footer-statement {
  min-width: 0;
  max-width: 15ch;
  margin: 0;
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  font-size: var(--brand-text-2xl);
  font-style: normal;
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.brew-copy p {
  max-width: var(--brand-measure);
  margin-top: var(--brand-space-lg);
  color: var(--brand-ink-soft);
  font-size: var(--brand-text-md);
  line-height: 1.68;
}

.brew-eyebrow + h2,
.brew-stage + h2,
.brew-stage + .brew-eyebrow {
  margin-top: var(--brand-space-sm);
}

.brew-how-it-works {
  margin-top: var(--brand-space-xl);
  padding: var(--brand-space-lg) 0 0;
  border: 0;
  border-top: var(--brand-rule-hair) solid var(--brand-rule);
  background: transparent;
}

.brew-how-it-works h3 {
  color: var(--brand-silver);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brew-how-it-works p {
  margin-top: var(--brand-space-sm);
}

.brew-operation-panel,
.brew-command-card,
.brew-capability-pair article,
.brew-capability-grid article {
  min-width: 0;
  border: var(--brand-rule-hair) solid var(--brand-rule);
  border-radius: var(--brand-radius-lg);
  background: linear-gradient(145deg, var(--brand-paper-soft), var(--brand-paper-raised));
  box-shadow: 0 28px 80px var(--brand-shadow-soft);
}

.brew-operation-panel {
  padding: var(--brand-space-xl);
}

.brew-operation-panel > p,
.brew-command-card > p {
  color: var(--brand-ink-dim);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brew-operation-list {
  display: grid;
  margin-top: var(--brand-space-lg);
}

.brew-operation-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--brand-space-xs) var(--brand-space-md);
  align-items: center;
  padding: var(--brand-space-lg) 0;
  border-top: var(--brand-rule-hair) solid var(--brand-rule);
}

.brew-operation-list code,
.brew-command-card code {
  color: var(--brand-ink);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-sm);
}

.brew-operation-list small {
  color: var(--brand-ink-dim);
  font-size: var(--brand-text-xs);
}

.brew-operation-result {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0.4rem 0.65rem;
  border: var(--brand-rule-hair) solid currentColor;
  border-radius: var(--brand-radius-pill);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  font-weight: 700;
}

.brew-operation-result-allow {
  color: var(--brand-success);
}

.brew-operation-result-approve {
  color: var(--brand-accent);
}

.brew-session {
  display: grid;
  gap: var(--brand-space-md);
  min-width: 0;
  margin: 0;
  padding: var(--brand-space-xl);
  border: var(--brand-rule-hair) solid var(--brand-rule);
  border-radius: var(--brand-radius-lg);
  background: linear-gradient(145deg, var(--brand-paper-soft), var(--brand-paper-raised));
  box-shadow: 0 28px 80px var(--brand-shadow-soft);
}

.brew-chat-message {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--brand-space-sm);
  min-width: 0;
}

.brew-chat-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--brand-rule-hair) solid var(--brand-rule);
  border-radius: 50%;
  color: var(--brand-ink-soft);
  background: var(--brand-paper);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  font-weight: 700;
  transform: translateY(-7px);
}

.brew-chat-message-agent .brew-chat-avatar {
  color: transparent;
  background: url("/assets/claude-icon.svg") center / cover no-repeat;
}

.brew-chat-message:is(.brew-chat-message-tool, .brew-chat-message-result) .brew-chat-avatar {
  color: var(--brand-violet);
  background: var(--brand-paper);
}

.brew-chat-message:is(.brew-chat-message-tool, .brew-chat-message-result) .brew-chat-avatar::before {
  display: none;
}

.brew-chat-body {
  min-width: 0;
}

.brew-chat-speaker {
  color: var(--brand-ink-dim);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.brew-chat-bubble {
  margin-top: var(--brand-space-xs);
  padding: var(--brand-space-sm) var(--brand-space-md);
  border: var(--brand-rule-hair) solid var(--brand-rule-soft);
  border-radius: var(--brand-radius-sm);
  background: var(--brand-paper);
  box-shadow: none;
}

.brew-chat-message-agent .brew-chat-bubble,
.brew-chat-message-tool .brew-chat-bubble,
.brew-chat-message-result .brew-chat-bubble {
  border-color: var(--brand-rule-soft);
  background: var(--brand-paper);
}

.brew-chat-message-tool .brew-chat-bubble {
  border-color: var(--brand-accent);
  background: var(--brand-paper-glass-hover);
}

.brew-chat-message-tool .brew-chat-bubble code {
  color: var(--brand-accent);
}

.brew-chat-bubble p,
.brew-chat-bubble pre,
.brew-chat-bubble code {
  color: var(--brand-ink-soft);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-sm);
  line-height: 1.55;
}

.brew-chat-bubble pre {
  overflow-x: auto;
}

.brew-chat-message-approval .brew-chat-avatar,
.brew-chat-message-approval .brew-chat-bubble {
  border-color: var(--brand-violet);
}

.brew-chat-message-approval {
  grid-template-columns: 2.5rem minmax(0, 1fr);
}

.brew-chat-message-approval .brew-chat-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-color: #000;
  color: transparent;
  background:
    url("/assets/brand-shield-v2.webp?v=3") center / 76% no-repeat,
    var(--brand-rule);
  box-shadow: 0 0 1.5rem var(--brand-shadow-soft);
  transform: translateY(-11px);
}

.brew-chat-message-approval strong {
  color: var(--brand-ink);
  font-size: var(--brand-text-sm);
}

@media (min-width: 75rem) {
  .brew-risk > .brew-split:first-child .brew-chat-message-tool .brew-chat-bubble::before,
  .brew-risk > .brew-split:first-child .brew-chat-message-tool .brew-chat-bubble::after {
    border-color: var(--brand-accent);
  }
}

.brew-exfiltration {
  width: min(100%, var(--brand-max));
  margin: calc(-1 * (var(--space-2xl) + var(--space-sm))) auto 0;
}

.brew-alert {
  width: 100%;
  margin: var(--brand-space-4xl) 0;
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--brand-space-xl);
  align-items: center;
  padding: var(--brand-space-lg) var(--brand-space-xl);
  border: var(--brand-rule-hair) solid var(--brand-danger);
  border-radius: var(--brand-radius-md);
  background: var(--brand-paper-raised);
  color: var(--brand-ink);
  box-shadow: none;
}

.brew-alert strong {
  color: var(--brand-danger);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  letter-spacing: 0.07em;
}

.brew-alert span {
  color: var(--brand-ink-soft);
  font-size: var(--brand-text-sm);
  line-height: 1.5;
}

.brew-after {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.brew-after > .brew-copy,
.brew-after > .brew-session {
  grid-column: auto;
  grid-row: auto;
  width: auto;
  max-width: none;
  margin: 0;
}

.brew-after > .brew-session {
  grid-template-columns: minmax(0, 1fr);
}

.brew-after .brew-chat-message,
.brew-after .brew-chat-divider {
  grid-column: 1;
}

.brew-after .brew-chat-message,
.brew-after .brew-session > :nth-child(-n + 3) {
  opacity: 1;
}

.brew-chat-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--brand-space-sm);
  margin: var(--brand-space-sm) 0;
  color: var(--brand-accent);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
  text-align: center;
}

.brew-chat-divider::before,
.brew-chat-divider::after {
  content: "";
  height: var(--brand-rule-hair);
  background: var(--brand-rule);
}

.brew-after .brew-chat-divider {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: 0;
  transform: none;
}

.brew-after .brew-chat-divider span {
  grid-column: 2;
  grid-row: 1;
}

.brew-after .brew-chat-divider::before,
.brew-after .brew-chat-divider::after {
  position: static;
  width: auto;
  height: var(--brand-rule-hair);
  border: 0;
  transform: none;
}

.brew-after .brew-chat-divider::before {
  grid-column: 1;
  grid-row: 1;
}

.brew-after .brew-chat-divider::after {
  grid-column: 3;
  grid-row: 1;
}

@media (min-width: 60.001rem) {
  .brew-after .brew-chat-divider {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    transform: translateY(17px);
  }

  .brew-after .brew-chat-divider span {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
    inset-inline-end: calc(100% + clamp(2.5rem, 6vw, 7rem));
    width: min(34vw, 30rem);
    color: var(--brand-accent);
    text-align: end;
  }

  .brew-after .brew-chat-divider::before {
    position: absolute;
    inset-inline-start: calc(clamp(2.5rem, 6vw, 7rem) * -1);
    inset-block-start: 50%;
    width: calc(clamp(2.5rem, 6vw, 7rem) + var(--brand-space-lg));
    height: 0;
    border-top: var(--brand-rule-hair) dashed var(--brand-accent);
    background: transparent;
    transform: translateY(-50%);
  }

  .brew-after .brew-chat-divider::after {
    position: absolute;
    inset-inline-start: var(--brand-space-lg);
    inset-inline-end: auto;
    inset-block-start: 50%;
    display: block;
    width: var(--brand-space-xs);
    height: var(--brand-space-xs);
    border-block-start: var(--brand-rule-hair) solid var(--brand-accent);
    border-inline-end: var(--brand-rule-hair) solid var(--brand-accent);
    background: transparent;
    transform: translateY(-50%) rotate(45deg);
  }
}

.brew-proof {
  margin-top: var(--brand-space-5xl);
  padding-top: var(--brand-space-4xl);
  border-top: var(--brand-rule-strong) solid var(--brand-rule);
}

.brew-access {
  padding-block: var(--brand-space-5xl);
  background:
    radial-gradient(circle at 20% 18%, var(--brand-wash-soft), transparent 28rem),
    var(--brand-paper-raised);
}

.brew-access > .brew-copy,
.brew-access-body {
  width: min(100%, var(--brand-max));
  max-width: none;
  margin-inline: auto;
}

.brew-access > .brew-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  column-gap: clamp(2.5rem, 6vw, 7rem);
  margin-bottom: var(--brand-space-3xl);
}

.brew-access > .brew-copy .brew-stage,
.brew-access > .brew-copy .brew-eyebrow,
.brew-access > .brew-copy h2 {
  grid-column: 1;
}

.brew-access > .brew-copy > p:last-child {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  margin-top: 0;
}

.brew-access-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: var(--brand-space-2xl);
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brew-access-screen img,
.brew-capture img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--brand-radius-lg);
  background: var(--brand-paper-soft);
  box-shadow: 0 32px 90px var(--brand-shadow-soft);
}

.brew-hero-capture img,
.brew-access-screen img,
.brew-capture img {
  border: 0;
}

.brew-access-ring,
.brew-access-notes::before,
.brew-access-note::before {
  display: none;
}

.brew-access-notes {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.brew-access-note {
  min-width: 0;
  padding: var(--brand-space-lg) 0;
  border-top: var(--brand-rule-hair) solid var(--brand-rule);
}

.brew-access-note:last-child {
  border-bottom: var(--brand-rule-hair) solid var(--brand-rule);
}

.brew-access-note dt {
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  font-size: var(--brand-text-lg);
  font-weight: 640;
}

.brew-access-note dd {
  margin-top: var(--brand-space-xs);
  color: var(--brand-ink-dim);
  font-size: var(--brand-text-sm);
  line-height: 1.55;
}

.brew-access-note code,
.brew-access-footnote code {
  color: var(--brand-silver);
  font-family: var(--brand-font-mono);
}

.brew-access-note sup a,
.brew-access-footnote a {
  color: var(--brand-accent);
}

.brew-access-footnote {
  max-width: 70rem;
  margin: var(--brand-space-xl) 0 0 auto;
  padding: var(--brand-space-lg) 0 0;
  border-top: var(--brand-rule-hair) solid var(--brand-rule-soft);
  color: var(--brand-ink-dim);
  font-size: var(--brand-text-xs);
  line-height: 1.6;
}

.brew-feature {
  padding-block: var(--brand-space-5xl);
}

.brew-feature:nth-of-type(even) {
  background: var(--brand-paper-raised);
}

.brew-feature-reverse {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}

.brew-feature > .brew-copy {
  align-self: center;
}

.brew-command-card {
  align-self: center;
  padding: var(--brand-space-xl);
}

.brew-command-card pre {
  overflow-x: auto;
  line-height: 2;
}

.brew-command-card code span {
  color: var(--brand-accent);
}

.brew-command-card > p {
  margin-top: var(--brand-space-xl);
  padding-top: var(--brand-space-lg);
  border-top: var(--brand-rule-hair) solid var(--brand-rule);
}

.brew-capability-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--brand-space-lg);
  align-self: center;
}

.brew-capability-pair article,
.brew-capability-grid article {
  padding: var(--brand-space-xl);
}

.brew-capability-pair h3,
.brew-capability-grid h3 {
  margin-top: var(--brand-space-md);
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  font-size: var(--brand-text-lg);
  font-weight: 650;
  line-height: 1.2;
}

.brew-capability-pair article > p:last-child,
.brew-capability-grid article > p:last-child {
  margin-top: var(--brand-space-md);
  color: var(--brand-ink-dim);
  font-size: var(--brand-text-sm);
  line-height: 1.6;
}

.brew-capability-pair code,
.brew-capability-grid code {
  color: var(--brand-silver);
  font-family: var(--brand-font-mono);
}

.brew-capabilities {
  padding-block: var(--brand-space-5xl);
  background:
    radial-gradient(circle at 80% 15%, var(--brand-wash-soft), transparent 28rem),
    var(--brand-paper-raised);
}

.brew-capabilities > .brew-copy,
.brew-capability-grid {
  width: min(100%, var(--brand-max));
  margin-inline: auto;
}

.brew-capabilities > .brew-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  margin-bottom: var(--brand-space-3xl);
}

.brew-capabilities > .brew-copy p:last-child {
  align-self: end;
  margin-top: 0;
}

.brew-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--brand-space-lg);
}

.brew-capture {
  min-width: 0;
  margin: 0;
}

.brew-capture-gate {
  width: min(100%, 39rem);
  justify-self: center;
}

.brew-capture figcaption {
  margin-top: var(--brand-space-md);
  color: var(--brand-ink-dim);
  font-family: var(--brand-font-body);
  font-size: var(--brand-text-xs);
  text-align: center;
  line-height: 1.5;
}

.brew-log-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--brand-rule-hair);
  margin-top: var(--brand-space-xl);
  padding: var(--brand-rule-hair);
  background: var(--brand-rule);
}

.brew-log-fields li,
.brew-log-fields li:nth-child(odd) {
  padding: var(--brand-space-sm) var(--brand-space-md);
  border: 0;
  color: var(--brand-ink-soft);
  background: var(--brand-paper);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
}

.brew-pricing {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: end;
  padding-block: var(--brand-space-5xl);
  border-top: var(--brand-rule-strong) solid var(--brand-accent);
  background:
    radial-gradient(circle at 72% 40%, var(--brand-wash), transparent 30rem),
    var(--brand-paper-soft);
}

.brew-pricing h2 {
  max-width: 12ch;
}

.brew-pricing p {
  max-width: 43rem;
  margin: 0;
  color: var(--brand-ink-soft);
  font-size: var(--brand-text-lg);
  line-height: 1.55;
}

.brew-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--brand-space-xl);
  align-items: center;
  padding-block: var(--brand-space-xl);
  border-top: var(--brand-rule-hair) solid var(--brand-rule);
  background: var(--brand-paper);
}

.brew-footer-statement {
  display: none;
}

.brew-footer > .brew-cta {
  grid-column: 3;
  grid-row: 1;
}

.brew-footer-meta {
  display: contents;
}

.brew-footer-meta .brew-brand {
  grid-column: 1;
  grid-row: 1;
}

.brew-footer-meta .brew-brand img {
  width: 2.75rem;
  height: 2.75rem;
}

.brew-footer-meta nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--brand-space-sm) var(--brand-space-lg);
}

.brew-footer-meta > span {
  grid-column: 1;
  grid-row: 2;
  color: var(--brand-ink-dim);
  font-family: var(--brand-font-mono);
  font-size: var(--brand-text-xs);
}

.brew-languages {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--brand-space-sm) var(--brand-space-lg);
  margin: 0;
  padding: 0;
  border: 0;
}

@keyframes brand-breathe {
  from { opacity: 0.48; transform: scale(0.96); }
  to { opacity: 0.82; transform: scale(1.04); }
}

@media (max-width: 72rem) {
  .brew-nav {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brew-nav-links {
    display: none;
  }

  .brew-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  }

  .brew-promises li,
  .brew-promises li:first-child {
    padding-inline: var(--brand-space-lg);
  }

  .brew-promises li:first-child {
    padding-left: 0;
  }

  .brew-access-diagram {
    grid-template-columns: minmax(0, 1fr);
  }

  .brew-access-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brew-access-note,
  .brew-access-note:last-child {
    padding: var(--brand-space-lg);
    border: var(--brand-rule-hair) solid var(--brand-rule);
    border-left: 0;
  }

  .brew-access-note:first-child {
    border-left: var(--brand-rule-hair) solid var(--brand-rule);
  }
}

@media (max-width: 60rem) {
  .brew-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "capture"
      "promises";
    min-height: auto;
    padding-top: 9rem;
  }

  .brew-hero-title,
  .brew-hero-capture {
    justify-self: center;
  }

  .brew-hero-title {
    width: min(100%, 48rem);
  }

  .brew-hero-capture {
    width: min(100%, 36rem);
  }

  .brew-split,
  .brew-feature,
  .brew-feature-reverse,
  .brew-pricing {
    grid-template-columns: minmax(0, 1fr);
  }

  .brew-feature-reverse .brew-capture {
    order: 2;
  }

  .brew-access > .brew-copy {
    display: block;
  }

  .brew-capabilities > .brew-copy {
    display: block;
  }

  .brew-capabilities > .brew-copy p:last-child {
    margin-top: var(--brand-space-lg);
  }

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

  .brew-access > .brew-copy > p:last-child {
    margin-top: var(--brand-space-lg);
  }

  .brew-pricing p {
    margin-top: var(--brand-space-lg);
  }

  .brew-footer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brew-footer > .brew-cta {
    grid-column: 2;
  }

  .brew-footer-meta nav {
    grid-column: 1 / 3;
    grid-row: 2;
    justify-content: flex-start;
  }

  .brew-footer-meta > span {
    grid-row: 3;
  }

  .brew-languages {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 40rem) {
  .brew-nav {
    grid-template-columns: minmax(0, 1fr);
    min-height: 5rem;
    gap: var(--brand-space-sm);
    padding-block: var(--brand-space-sm);
  }

  .brew-nav-actions {
    display: none;
  }

  .brew-nav .brew-brand span {
    overflow: visible;
    text-overflow: clip;
  }

  .brew-brand img {
    width: 2.75rem;
    height: 2.75rem;
  }

  .brew-download {
    min-height: 2.75rem;
    padding-inline: var(--brand-space-md);
  }

  .brew-hero {
    gap: var(--brand-space-xl);
    padding-top: 7rem;
  }

  .brew-kicker {
    margin-bottom: var(--brand-space-md);
  }

  .brew-hero h1 {
    max-width: 100%;
    font-size: clamp(2.5rem, 12vw, 3.25rem);
    letter-spacing: -0.045em;
    line-height: 0.98;
    text-wrap: balance;
  }

  .brew-hero-lede {
    margin-top: var(--brand-space-lg);
    font-size: var(--brand-text-md);
    line-height: 1.5;
  }

  .brew-hero-actions {
    display: grid;
    justify-items: start;
    gap: var(--brand-space-sm);
    margin-top: var(--brand-space-lg);
  }

  .brew-hero-actions .brew-cta,
  .brew-hero-actions .brew-text-link {
    width: auto;
    justify-content: flex-start;
  }

  .brew-promises {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
  }

  .brew-promises li,
  .brew-promises li:first-child {
    padding: var(--brand-space-lg) 0;
    border: 0;
    border-top: var(--brand-rule-hair) solid var(--brand-rule);
  }

  .brew-risk,
  .brew-access,
  .brew-feature,
  .brew-capabilities,
  .brew-pricing {
    padding-block: var(--brand-space-4xl);
  }

  .brew-session {
    padding: var(--brand-space-md);
  }

  .brew-operation-panel,
  .brew-command-card,
  .brew-capability-pair article,
  .brew-capability-grid article {
    padding: var(--brand-space-lg);
  }

  .brew-capability-pair,
  .brew-capability-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brew-chat-message {
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .brew-chat-avatar {
    width: 1.75rem;
    height: 1.75rem;
  }

  .brew-alert {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--brand-space-xs);
    padding: var(--brand-space-md);
  }

  .brew-chat-divider {
    grid-template-columns: minmax(0, 1fr);
  }

  .brew-chat-divider::before,
  .brew-chat-divider::after {
    display: none;
  }

  .brew-access-notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .brew-access-note,
  .brew-access-note:first-child,
  .brew-access-note:last-child {
    padding-inline: 0;
    border: 0;
    border-top: var(--brand-rule-hair) solid var(--brand-rule);
  }

  .brew-access-note:last-child {
    border-bottom: var(--brand-rule-hair) solid var(--brand-rule);
  }

  .brew-log-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .brew-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .brew-footer-meta .brew-brand {
    align-self: flex-start;
  }

  .brew-footer > .brew-cta {
    order: 2;
    width: 100%;
  }

  .brew-footer-meta nav,
  .brew-languages {
    justify-content: flex-start;
  }

  .brew-footer-meta > span {
    order: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brew-home *,
  .brew-home *::before,
  .brew-home *::after {
    scroll-behavior: auto !important;
    animation-duration: var(--brand-dur-micro) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--brand-dur-micro) !important;
  }

  .brew-hero-capture::before {
    animation: none;
  }
}