*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --ink: #171614;
  --muted: #57534e;
  --paper: #fffefa;
  --ground: #f2f0e9;
  --line: #d9d5ca;
  --accent: #bd482b;
  --soft: #f6e7df;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.65 var(--font-sans); }
a { color: inherit; }
.use-case-nav,
.use-case-main,
.use-case-footer { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.use-case-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; border-bottom: 1px solid var(--line); }
.use-case-logo { font-size: 15px; font-weight: 650; letter-spacing: -.025em; text-decoration: none; }
.use-case-logo span,
.eyebrow,
.artifact-preview-kicker { color: var(--accent); }
.use-case-nav > a:last-child,
.primary-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 650; text-decoration: none; }
.use-case-nav > a:last-child { padding: 10px 16px; text-align: center; }
.use-case-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 96px); align-items: center; min-height: 600px; padding: 76px 0; }
.eyebrow,
.artifact-preview-kicker { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1,
h2,
.artifact-preview h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.055em; }
h1 { max-width: 760px; margin: 18px 0 24px; font-size: clamp(52px, 6vw, 80px); line-height: .94; }
.use-case-hero-copy > p { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.primary-cta { margin-top: 24px; padding: 12px 20px; }
.secondary-link { display: inline-block; margin-left: 18px; color: var(--muted); font-size: 12px; font-weight: 650; }
.artifact-preview { padding: clamp(28px, 5vw, 56px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 24px 70px rgba(38, 32, 24, .1); }
.artifact-preview h3 { margin: 12px 0 22px; font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.artifact-preview p { color: var(--muted); }
.artifact-preview table { width: 100%; margin-top: 26px; border-collapse: collapse; font-size: 12px; }
.artifact-preview th,
.artifact-preview td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.artifact-preview th { color: var(--accent); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.benefit-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.benefit-strip article { min-width: 0; padding: 28px clamp(18px, 3vw, 38px); border-right: 1px solid var(--line); }
.benefit-strip article:first-child { padding-left: 0; }
.benefit-strip article:last-child { border-right: 0; }
.benefit-strip strong { display: block; margin-bottom: 8px; }
.benefit-strip p { margin: 0; color: var(--muted); font-size: 13px; }
.use-case-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 96px); padding: clamp(76px, 9vw, 112px) 0; }
.use-case-section h2,
.closing-cta h2 { margin: 12px 0 20px; font-size: clamp(38px, 4.2vw, 56px); line-height: 1; }
.use-case-section > div:first-child p,
.closing-cta p { color: var(--muted); }
.steps { counter-reset: step; }
.steps article { position: relative; padding: 0 0 28px 52px; border-bottom: 1px solid var(--line); }
.steps article + article { padding-top: 28px; }
.steps article::before { counter-increment: step; content: "0" counter(step); position: absolute; left: 0; color: var(--accent); font-size: 11px; font-weight: 800; }
.steps p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.closing-cta { margin-bottom: 88px; padding: clamp(40px, 6vw, 66px); border: 1px solid #e8c6b8; border-radius: 20px; background: var(--soft); text-align: center; }
.closing-cta h2,
.closing-cta p { max-width: 800px; margin-right: auto; margin-left: auto; }
.use-case-footer { display: flex; justify-content: space-between; padding: 32px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.use-case-footer div { display: flex; flex-wrap: wrap; gap: 12px 18px; }

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 800px) {
  .use-case-hero,
  .use-case-section { grid-template-columns: 1fr; }
  .use-case-hero { min-height: auto; }
  .benefit-strip { grid-template-columns: 1fr; }
  .benefit-strip article,
  .benefit-strip article:first-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit-strip article:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
  .use-case-nav,
  .use-case-main,
  .use-case-footer { width: min(100% - 28px, 1180px); }
  .use-case-hero { padding: 56px 0; }
  .secondary-link { display: block; margin: 18px 0 0; }
  .use-case-section { padding: 76px 0; }
  .use-case-footer { align-items: flex-start; flex-direction: column; gap: 16px; }
}