@import url('/design/tokens.css');
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); margin: 0; font: var(--text-base)/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,textarea,select { font: inherit; }
button,.file-button { min-height: 44px; border: 0; border-radius: var(--radius); padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font-weight: 650; cursor: pointer; }
button:hover,.file-button:hover { filter: brightness(.94); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.file-button:focus-within,select:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
input,textarea,select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); color: var(--ink); }
textarea { min-height: 174px; resize: vertical; line-height: 1.5; }
label { display: grid; gap: 6px; font-weight: 650; }
.topbar { display:flex; align-items:center; justify-content:space-between; max-width:1160px; margin:auto; padding:22px 28px; }
.wordmark { font-size:23px; font-weight:800; letter-spacing:-.05em; text-decoration:none; color:var(--ink); }
.wordmark span { color:var(--accent); }
.topbar nav { display:flex; align-items:center; gap:22px; }
.topbar nav a { color:var(--muted); text-decoration:none; font-size:14px; }
.text-button { padding:8px 10px; min-height:40px; border:1px solid var(--line); background:transparent; color:var(--ink); }
main { max-width:1160px; padding:0 28px; margin:0 auto; }
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(310px,.75fr); gap:clamp(36px,7vw,92px); align-items:center; padding:44px 0 64px; }
.eyebrow { margin:0 0 12px; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:650px; margin-bottom:20px; font-size:clamp(42px,7vw,76px); line-height:.99; letter-spacing:-.065em; }
.lede { max-width:610px; color:var(--muted); font-size:20px; line-height:1.5; }
.hero-notes { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hero-notes span,.private-pill,.demo-tag { display:inline-flex; align-items:center; min-height:32px; border:1px solid var(--line); border-radius:99px; padding:4px 11px; color:var(--muted); font-size:12px; font-weight:650; }
.example-card { padding:25px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.card-top,.panel-heading,.workbench-heading,.review-head,.review-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.demo-tag { color:var(--warn); border-color:var(--warn); }
.example-card h2 { font-size:23px; margin:8px 0 16px; letter-spacing:-.03em; }
.sample-lines { display:grid; gap:10px; list-style:none; margin:0 0 18px; padding:0; }
.sample-lines li { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
.sample-lines li span { color:var(--muted); white-space:nowrap; }
.sample-lines strong { text-align:right; }
.secondary-button { border:1px solid var(--line); background:transparent; color:var(--ink); }
.microcopy,.field-hint,.field-foot,.optional { color:var(--muted); font-size:12px; }
.microcopy { margin:12px 0 0; }
.workbench { margin:0 auto 90px; padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.workbench-heading { align-items:flex-end; margin-bottom:24px; }
.workbench-heading h2 { margin:0; font-size:30px; letter-spacing:-.045em; }
.account-status { color:var(--muted); font-size:13px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; margin:0 0 22px; border-bottom:1px solid var(--line); }
.steps li { display:flex; gap:9px; align-items:center; padding:11px 8px; color:var(--muted); font-weight:700; border-bottom:3px solid transparent; }
.steps li[aria-current="step"] { color:var(--accent); border-color:var(--accent); }
.steps span { font-size:13px; }
.privacy-banner,.review-warning { border-left:4px solid var(--warn); background:color-mix(in srgb,var(--warn) 9%,var(--surface)); padding:13px 16px; border-radius:0 var(--radius) var(--radius) 0; font-size:13px; }
.order-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.75fr); gap:28px; padding-top:25px; }
.field-block>label { margin-bottom:4px; }
.field-hint { margin-bottom:8px; }
.field-foot { display:flex; justify-content:space-between; gap:8px; margin:7px 0 20px; }
.tabular,.line-fields input[type=number] { font-variant-numeric:tabular-nums; }
.inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inline-fields label { font-size:13px; }
.inline-fields label:last-child { grid-column:1/-1; }
.optional { font-weight:400; }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:17px; }
.catalog-panel { border:1px solid var(--line); border-radius:var(--radius); padding:20px; align-self:start; }
.panel-heading { align-items:flex-start; }
.panel-heading h3 { margin:0; font-size:22px; }
.private-pill { background:var(--bg); }
.catalog-panel>p:not(.eyebrow) { color:var(--muted); font-size:14px; }
.signin-form { display:grid; gap:9px; margin-top:15px; }
.signin-form label { font-size:13px; }
.signin-form button { width:100%; }
.signin-privacy { line-height:1.55; }
.signin-privacy a,.site-footer a:not(.wordmark) { color:var(--accent); text-underline-offset:2px; }
.panel-boundary { margin:17px 0 0; padding-top:13px; border-top:1px solid var(--line); font-size:12px!important; }
.file-button { display:inline-flex; align-items:center; }
.alert { margin:18px 0; padding:12px 14px; color:var(--crit); background:color-mix(in srgb,var(--crit) 8%,var(--surface)); border-left:4px solid var(--crit); border-radius:0 var(--radius) var(--radius) 0; }
.alert[hidden],[hidden] { display:none!important; }
.review-section,.export-section { padding-top:30px; margin-top:30px; border-top:1px solid var(--line); }
.review-head { align-items:flex-end; }
.review-head h3 { margin:0; font-size:25px; letter-spacing:-.03em; }
.review-summary { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.review-warning { margin:16px 0; }
.review-rows { display:grid; gap:14px; }
.review-row { border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:var(--bg); }
.row-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:14px; }
.row-heading h4 { margin:0; font-size:14px; }
.row-source { margin:4px 0 0; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.row-state { white-space:nowrap; border:1px solid var(--warn); border-radius:99px; color:var(--warn); padding:2px 9px; font-size:11px; font-weight:750; }
.row-state.confirmed { border-color:var(--good); color:var(--good); }
.row-state.excluded { border-color:var(--muted); color:var(--muted); }
.line-fields { display:grid; grid-template-columns:1.05fr 1.5fr .7fr .8fr 1fr; gap:10px; }
.line-fields label { font-size:11px; color:var(--muted); }
.line-fields input { font-size:14px; min-width:0; }
.candidate-note { color:var(--warn); margin:10px 0 0; font-size:12px; }
.row-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.row-actions button { min-height:40px; font-size:13px; }
.row-actions .exclude-button { border:1px solid var(--line); background:transparent; color:var(--ink); }
.review-footer { position:sticky; bottom:0; background:var(--surface); padding:15px 0 0; border-top:1px solid var(--line); margin-top:18px; }
.review-footer p { margin:0; color:var(--muted); font-size:13px; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; min-width:540px; text-align:left; font-size:13px; }
th,td { padding:10px 12px; border-bottom:1px solid var(--line); }
th { background:var(--bg); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.export-buttons { margin-top:20px; }
.how-section { padding:20px 0 88px; }
.how-section>div:first-child { max-width:600px; }
.how-section h2,.price-section h2 { font-size:clamp(32px,5vw,48px); line-height:1.05; letter-spacing:-.05em; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:32px; }
.how-grid article { border-top:1px solid var(--line); padding-top:16px; }
.how-grid article>span { color:var(--accent); font-weight:800; font-variant-numeric:tabular-nums; }
.how-grid h3 { margin:13px 0 7px; font-size:19px; }
.how-grid p { color:var(--muted); font-size:14px; }
.price-section { display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:center; margin-bottom:80px; padding:34px; border-radius:var(--radius); background:var(--ink); color:var(--bg); }
.price-section .eyebrow { color:var(--accent); }
.price-section h2 { margin-bottom:15px; }
.price-value { margin-bottom:10px; font-size:42px; font-weight:800; letter-spacing:-.05em; }
.price-value span { font-size:15px; font-weight:500; letter-spacing:0; }
.price-note,.price-includes li { color:color-mix(in srgb,var(--bg) 78%,var(--ink)); font-size:14px; }
.price-includes h3 { font-size:16px; }
.price-includes ul { display:grid; gap:8px; padding-left:20px; }
.site-footer { display:grid; grid-template-columns:auto 1fr 1fr auto; gap:22px; align-items:start; padding:28px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.site-footer .wordmark { font-size:19px; color:var(--ink); }
.site-footer p { margin:0; max-width:360px; }
.site-footer span:last-child { white-space:nowrap; }
dialog { max-width:440px; width:calc(100% - 32px); border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--surface); color:var(--ink); box-shadow:0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(0,0,0,.5); }
dialog h2 { font-size:24px; line-height:1.15; }
dialog p { color:var(--muted); }
dialog menu { display:flex; justify-content:flex-end; gap:9px; padding:0; margin:20px 0 0; }
@media (max-width:850px) { .hero { grid-template-columns:1fr 340px; gap:28px; } .order-grid { grid-template-columns:1fr; } .catalog-panel { max-width:none; } .line-fields { grid-template-columns:repeat(3,1fr); } .site-footer { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .topbar { padding:16px 18px; } .topbar nav { gap:12px; } .topbar nav a { font-size:12px; } main { padding:0 16px; } .hero { grid-template-columns:1fr; padding:34px 0 40px; } h1 { font-size:48px; } .lede { font-size:17px; } .example-card { max-width:none; } .workbench { padding:20px 16px; margin-bottom:65px; } .workbench-heading { align-items:flex-start; flex-direction:column; gap:6px; } .workbench-heading h2 { font-size:25px; } .steps li { justify-content:center; padding:10px 2px; font-size:14px; } .steps span { font-size:11px; } .privacy-banner { font-size:12px; } .inline-fields { grid-template-columns:1fr; } .inline-fields label:last-child { grid-column:auto; } .line-fields { grid-template-columns:1fr 1fr; } .line-fields label:nth-child(2) { grid-column:span 2; } .row-heading { flex-direction:column; gap:8px; } .review-footer { align-items:stretch; flex-direction:column; } .review-footer button { width:100%; } .how-grid { grid-template-columns:1fr; gap:20px; } .price-section { grid-template-columns:1fr; gap:22px; padding:24px 19px; } .price-value { font-size:38px; } .site-footer { grid-template-columns:1fr; gap:12px; padding:24px 18px; } }
@media (max-width:360px) { .topbar { padding:14px 12px; } .topbar nav { gap:8px; } .topbar nav a { font-size:11px; } main { padding:0 12px; } .workbench { padding:16px 12px; } h1 { font-size:42px; } .line-fields { gap:7px; } .row-actions { display:grid; grid-template-columns:1fr; } .row-actions button { width:100%; } .steps span { font-size:10px; } }