:root {
  --ink: #102029;
  --muted: #667177;
  --paper: #f1efe7;
  --paper-deep: #e5e2d7;
  --line: rgba(16, 32, 41, 0.16);
  --acid: #c5ed5d;
  --coral: #ef785f;
  --white: #fbfaf5;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.55; }
body::selection { background: var(--acid); color: var(--ink); }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .08; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 5vw, 76px); border-bottom: 1px solid var(--line); }
.wordmark { font-weight: 700; letter-spacing: -.08em; font-size: 18px; }
.wordmark-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; background: var(--ink); color: var(--acid); border-radius: 50%; font-size: 17px; letter-spacing: 0; }
.nav { display: flex; gap: 30px; margin-left: 90px; color: var(--muted); }
.nav a { padding: 29px 0 24px; border-bottom: 2px solid transparent; }
.nav a.active, .nav a:hover { color: var(--ink); border-color: var(--coral); }
.operator { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(197,237,93,.22); }
main { max-width: 1440px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 76px); }
.hero { display: flex; justify-content: space-between; align-items: flex-end; min-height: 405px; padding: 72px 0 72px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 18px; color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.06em; }
h1 { max-width: 700px; margin-bottom: 28px; font-family: var(--serif); font-size: clamp(56px, 8vw, 112px); line-height: .87; }
h1 em, h2 em { color: var(--coral); font-weight: 400; }
.lede { max-width: 540px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-stamp { display: flex; flex-direction: column; width: 190px; min-height: 155px; padding: 17px; margin-bottom: 6px; border: 1px solid var(--ink); transform: rotate(3deg); }
.stamp-label { color: var(--coral); font-size: 9px; letter-spacing: .14em; }
.hero-stamp strong { margin: auto 0; font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1; }
.stamp-rule { width: 100%; height: 1px; background: var(--ink); }
.hero-stamp small { margin-top: 9px; color: var(--muted); font-size: 9px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr); gap: clamp(34px, 6vw, 95px); padding: 75px 0 100px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 29px; }
.section-heading h2 { margin: 0; font-family: var(--serif); font-size: 51px; line-height: .95; }
.section-note { max-width: 160px; color: var(--muted); font-size: 11px; text-align: right; line-height: 1.5; }
.source-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.source-tab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 20px 18px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: .2s ease; }
.source-tab:hover, .source-tab.active { border-color: var(--ink); background: var(--ink); color: var(--white); }
.source-tab.active .tab-number { background: var(--acid); color: var(--ink); }
.tab-number { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--paper-deep); font-size: 11px; }
.source-tab strong, .source-tab small { display: block; }
.source-tab strong { font-size: 12px; }
.source-tab small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.source-tab.active small { color: #abb8b6; }
.arrow { font-size: 20px; }
.form-card { padding: clamp(22px, 3vw, 38px); background: var(--white); border: 1px solid var(--line); box-shadow: 10px 10px 0 rgba(16,32,41,.08); }
.server-form[hidden] { display: none; }
.form-intro { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 29px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.form-intro p { max-width: 360px; margin: 0; color: var(--muted); font-size: 11px; }
.form-kicker { color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.field-grid { display: grid; gap: 20px; margin-bottom: 21px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
.field-grid.three { grid-template-columns: 1fr 90px 1.5fr; }
label { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
input, select, textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); outline: none; font: 13px var(--mono); text-transform: none; letter-spacing: 0; }
input, select { height: 35px; }
textarea { min-height: 54px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--coral); box-shadow: 0 2px 0 var(--coral); }
.primary-button { display: flex; align-items: center; justify-content: space-between; min-width: 210px; padding: 14px 17px; border: 0; background: var(--ink); color: var(--white); font: 11px var(--mono); cursor: pointer; transition: .2s; }
.primary-button:hover { background: var(--coral); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.primary-button span { color: var(--acid); font-size: 18px; }
.provider-callout { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; margin: 2px 0 24px; background: #eef0e3; color: var(--muted); font-size: 10px; }
.callout-icon { color: var(--coral); font-size: 18px; line-height: 1; }
.form-status { min-height: 22px; margin-top: 20px; color: var(--muted); font-size: 11px; }
.form-status.success { color: #4a771b; }
.form-status.error { color: #ad3d2b; }
.workspace-aside { padding-top: 62px; }
.aside-block { padding: 24px 0 31px; border-top: 1px solid var(--ink); }
.aside-block h3 { margin-bottom: 31px; font-family: var(--serif); font-size: 32px; line-height: 1; }
.steps { padding: 0; margin: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.steps li > span { color: var(--coral); font-size: 10px; }
.steps strong, .steps small { display: block; }
.steps strong { font-size: 11px; }
.steps small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.live-card { margin-top: 38px; padding: 21px; border: 1px solid var(--line); background: rgba(255,255,255,.25); }
.live-header { display: flex; justify-content: space-between; align-items: center; }
.live-header .eyebrow { margin: 0; }
.live-pulse { color: #648927; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.queue-empty { display: flex; align-items: center; gap: 14px; padding: 28px 0 5px; }
.queue-mark { color: var(--coral); font-family: var(--serif); font-size: 42px; line-height: .5; }
.queue-empty p { max-width: 150px; margin: 0; color: var(--muted); font-size: 10px; }
.principles { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7vw; padding: 73px 0 94px; border-top: 1px solid var(--line); }
.principles h2 { margin: 0; font-family: var(--serif); font-size: 50px; line-height: .93; }
.principle-list { padding-top: 8px; }
.principle-list p { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; max-width: 600px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.principle-list p span { color: var(--coral); }
.principle-list strong { color: var(--ink); margin-right: 5px; }
.footer { display: flex; justify-content: space-between; padding: 23px clamp(22px, 5vw, 76px); background: var(--ink); color: #829097; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 820px) { .nav { display: none; } .hero { display: block; min-height: auto; } .hero-stamp { margin: 48px 0 0 auto; } .workspace, .principles { grid-template-columns: 1fr; } .workspace-aside { padding-top: 0; } .source-switch, .field-grid.two, .field-grid.three { grid-template-columns: 1fr; } .form-intro { display: block; } .form-intro p { margin-top: 12px; } .section-heading { align-items: start; display: block; } .section-note { margin-top: 15px; text-align: left; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; transform: none !important; } }