:root { --bg:oklch(0.984 0.011 342); --surface:oklch(0.993 0.006 342); --fg:oklch(0.145 0 0); --muted:oklch(0.56 0.015 250); --border:oklch(0.87 0 0); --accent:oklch(0.37 0.11 320); --signal:oklch(0.88 0.18 111); --display:"Space Grotesk","Avenir Next",sans-serif; --body:"Source Sans 3","Segoe UI",sans-serif; --mono:"IBM Plex Mono","Cascadia Mono",monospace; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--fg); background:var(--bg); font:17px/1.55 var(--body); }
img { display:block; max-width:100%; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--surface); outline-offset:2px; box-shadow:0 0 0 5px var(--accent); }
.workflow-shell { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
h1,h2,h3 { margin-top:0; font-family:var(--display); letter-spacing:-.055em; }
.workflow-hero { padding:105px 0 115px; }
.workflow-hero__grid { display:grid; grid-template-columns:1fr .82fr; gap:90px; align-items:center; }
.workflow-kicker { margin:0 0 18px; color:var(--accent); font:600 13px/1.2 var(--mono); }
.workflow-hero h1 { max-width:720px; margin-bottom:26px; font-size:clamp(58px,7vw,94px); line-height:.93; }
.workflow-lead { max-width:650px; margin:0; color:var(--muted); font-size:22px; }
.workflow-actions { margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.workflow-primary { min-height:54px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; color:white; background:var(--accent); text-decoration:none; font-weight:700; }
.workflow-primary:hover { background:oklch(0.31 0.11 320); }
.workflow-secondary { font-weight:700; text-underline-offset:5px; }
.workflow-visual { margin:0; padding:32px; background:var(--surface); box-shadow:16px 16px 0 oklch(0.93 0.025 320); }
.workflow-visual img { width:100%; height:auto; aspect-ratio:449/321; object-fit:contain; }
.workflow-proof { padding:36px 0; color:white; background:var(--accent); }
.workflow-proof__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; }
.workflow-proof strong { display:block; margin-bottom:5px; font-family:var(--display); }
.workflow-proof span { color:rgb(255 255 255 / .74); }
.workflow-process { padding:120px 0; }
.workflow-process h2 { max-width:850px; margin-bottom:66px; font-size:clamp(44px,6vw,72px); line-height:.98; }
.workflow-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.workflow-step { min-height:310px; padding:30px; display:flex; flex-direction:column; border-top:2px solid var(--accent); background:var(--surface); }
.workflow-step span { color:var(--accent); font:600 13px/1 var(--mono); }
.workflow-step h3 { margin:auto 0 15px; font-size:30px; line-height:1.03; }
.workflow-step p { margin:0; color:var(--muted); }
.workflow-context { padding:110px 0; background:white; }
.workflow-context__grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }
.workflow-context h2 { margin-bottom:0; font-size:clamp(42px,5.5vw,68px); line-height:.98; }
.workflow-context__copy p { margin:0 0 20px; color:var(--muted); font-size:20px; }
.workflow-next { padding:100px 0; }
.workflow-next h2 { margin-bottom:38px; font-size:clamp(40px,5vw,60px); }
.workflow-next__grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.workflow-next__card { min-height:190px; padding:28px; display:flex; flex-direction:column; border:1px solid var(--border); background:var(--surface); text-decoration:none; }
.workflow-next__card { transition:border-color .2s ease,transform .2s ease; }
.workflow-next__card:hover,.workflow-next__card:focus-visible { border-color:var(--accent); transform:translateY(-3px); }
.workflow-next__card strong { margin-top:auto; font:700 28px/1.05 var(--display); }
.workflow-next__card span { margin-top:14px; color:var(--accent); font-weight:700; }
.workflow-footer { padding:35px 0; color:white; background:oklch(0.19 0 0); }
.workflow-footer__inner { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.workflow-footer__brand { display:inline-flex; align-items:center; gap:11px; color:white; text-decoration:none; font:700 20px/1 var(--display); }
.workflow-footer__brand img { width:30px; height:31px; }
.workflow-footer__links { display:flex; gap:22px; font-size:13px; }
@media (max-width:800px) {
  .workflow-shell { width:min(calc(100% - 32px),var(--max)); }
  .workflow-hero { padding:72px 0 86px; }
  .workflow-hero__grid,.workflow-context__grid { grid-template-columns:1fr; gap:48px; }
  .workflow-visual { padding:20px; }
  .workflow-proof__grid,.workflow-steps,.workflow-next__grid { grid-template-columns:1fr; }
  .workflow-process,.workflow-context,.workflow-next { padding:78px 0; }
  .workflow-step { min-height:250px; }
  .workflow-footer__inner { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition-duration:.01ms!important; } }