@import url('/ui-primitives.css');
@import url('/design-tokens.css');
:root{ --black:var(--palette-ink-17); --paper:var(--color-surface); --soft:var(--palette-accent-subtle-35); --line:var(--palette-border-17); --muted:var(--palette-muted-7); }
*{ box-sizing:border-box; }
body{ margin:0; color:var(--black); background:var(--paper); font-family:var(--font-body); }
.lab-body{ background:var(--palette-accent-subtle-36); }
.lab-nav{ height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--palette-border-18); background:var(--palette-accent-subtle-37); }
.lab-nav a{ color:var(--palette-ink-3); text-decoration:none; font-weight:700; }
.lab-nav > div{ display:flex; align-items:center; gap:20px; font-size:13px; }
.lab-brand{ display:flex; align-items:center; gap:10px; font:700 20px 'Manrope'; }
.lab-brand span,.mini-mark{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--client-accent,var(--palette-ink-3)); color:var(--palette-surface-1); }
.lab-badge{ padding:5px 10px; border:1px solid var(--palette-border-4); border-radius:999px; text-transform:uppercase; font-size:10px; letter-spacing:.1em; }
.lab-shell{ width:min(1440px,100%); margin:auto; }
.lab-intro{ display:grid; grid-template-columns:1fr auto; gap:70px; padding:76px 46px 56px; border-bottom:1px solid var(--palette-border-18); }
.lab-kicker,.intake-eyebrow{ color:var(--palette-muted-8); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.lab-intro h1{ margin:14px 0 22px; font:600 clamp(50px,6vw,88px)/.95 'Manrope'; letter-spacing:-.07em; }
.lab-intro p{ max-width:720px; color:var(--palette-muted-9); font-size:18px; line-height:1.6; }
.lab-stat{ display:grid; grid-template-columns:auto auto; align-content:center; gap:4px 14px; min-width:230px; }
.lab-stat strong{ font:600 44px 'Manrope'; }
.lab-stat span{ align-self:center; color:var(--palette-muted-10); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.lab-grid{ display:grid; grid-template-columns:380px minmax(0,1fr); min-height:920px; }
.lab-controls{ padding:28px; border-right:1px solid var(--palette-border-18); }
.control-card{ padding:24px; border:1px solid var(--palette-border-18); background:var(--palette-accent-subtle-37); }
.control-card + .control-card{ margin-top:18px; }
.control-card h2{ margin:8px 0 20px; font:600 24px 'Manrope'; letter-spacing:-.04em; }
.mode-list{ display:grid; gap:8px; }
.mode-button > span{ grid-row:1/3; color:var(--palette-muted-11); font-size:11px; }
.mode-button strong{ font-size:14px; }
.mode-button small{ color:var(--palette-muted-8); }
.merchant-card > p{ color:var(--palette-muted-12); font-size:11px; line-height:1.5; }
.merchant-list{ display:grid; gap:8px; }
.merchant-item{ display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--palette-border-1); }
.merchant-item > span{ display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--palette-border-4); border-radius:8px; font-weight:700; }
.merchant-item strong,.merchant-item small{ display:block; }
.merchant-item strong{ font-size:12px; }
.merchant-item small{ color:var(--palette-muted-11); font-size:9px; }
.merchant-item i{ color:var(--palette-muted-11); font-size:9px; font-style:normal; }
.merchant-item i.ready{ color:var(--palette-ink-3); font-weight:700; }
.lab-preview{ padding:28px; background:var(--palette-accent-soft-9); }
.preview-bar{ height:48px; display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; padding:0 16px; border:1px solid var(--palette-border-7); border-bottom:0; border-radius:14px 14px 0 0; background:var(--palette-accent-subtle-37); color:var(--palette-muted-8); font-size:11px; }
.preview-bar > div{ display:flex; gap:5px; }
.preview-bar i{ width:8px; height:8px; border:1px solid var(--palette-border-19); border-radius:50%; }
.preview-bar > span:last-child{ text-align:right; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.preview-stage{ min-height:820px; padding:32px; border:1px solid var(--palette-border-7); background:var(--palette-surface-1); }
.policy-section{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:38px; padding:84px 46px; border-top:1px solid var(--palette-border-18); background:var(--palette-accent-subtle-37); }
.policy-intro h2{ margin:10px 0 18px; font:600 44px/1 'Manrope'; letter-spacing:-.05em; }
.policy-intro p{ color:var(--palette-muted-13); line-height:1.6; }
.policy-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.policy-button strong{ font:600 15px 'Manrope'; }
.policy-button small{ color:var(--palette-muted-14); line-height:1.45; }
.policy-flow{ grid-column:2; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:stretch; padding-top:18px; border-top:1px solid var(--palette-border-8); }
.policy-flow>.lab-kicker,.policy-flow>p{ grid-column:1/-1; }
.policy-flow>p{ margin:4px 0 0; color:var(--palette-muted-15); }
.policy-flow-step{ display:flex; gap:10px; align-items:center; min-height:64px; padding:14px; border-radius:12px; background:var(--palette-accent-subtle-24); }
.policy-flow-step i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--palette-ink-3); color:var(--palette-surface-1); font-size:10px; font-style:normal; }
.policy-flow-step strong{ font-size:12px; }
.launch-panel,.headless-panel{ display:grid; place-items:start; align-content:center; min-height:700px; max-width:620px; margin:auto; }
.launch-panel h2,.headless-panel h2{ margin:12px 0; font:600 48px/1.03 'Manrope'; letter-spacing:-.05em; }
.launch-panel p,.headless-panel p{ color:var(--palette-muted-16); line-height:1.6; }
.lab-primary{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; margin-top:18px; padding:0 22px; border:1px solid var(--palette-border-4); border-radius:999px; background:var(--palette-ink-3); color:var(--palette-surface-1); text-decoration:none; font-weight:700; cursor:pointer; }
.headless-panel pre{ width:100%; overflow:auto; padding:20px; border:1px solid var(--palette-border-7); background:var(--palette-accent-subtle-35); font:12px/1.8 monospace; }
.api-output{ min-height:150px; }
.infra-section{ padding:84px 46px; border-top:1px solid var(--palette-border-18); background:var(--palette-ink-17); color:var(--palette-surface-1); }
.infra-section h2{ margin:10px 0 42px; font:600 46px 'Manrope'; letter-spacing:-.05em; }
.infra-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--palette-muted-10); }
.infra-grid article{ min-height:250px; padding:24px; background:var(--palette-ink-17); }
.infra-grid article > span{ font-size:11px; }
.infra-grid h3{ margin:80px 0 10px; font:600 20px 'Manrope'; }
.infra-grid p{ color:var(--palette-canvas-4); font-size:13px; line-height:1.6; }
.intake-frame-body{ --client-accent:var(--palette-ink-3); --client-radius:20px; --client-font:system-ui,sans-serif; min-height:100vh; background:var(--palette-surface-1); font-family:var(--client-font); }
.intake-app{ width:min(720px,100%); margin:auto; padding:24px; }
.intake-loading{ min-height:600px; display:grid; place-items:center; align-content:center; gap:14px; }
.spinner{ width:24px; height:24px; border:2px solid var(--palette-border-1); border-top-color:var(--client-accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to { transform:rotate(360deg); } }
.intake-header{ display:flex; align-items:center; justify-content:space-between; padding:4px 2px 24px; }
.intake-brand{ display:grid; grid-template-columns:38px auto; column-gap:10px; align-items:center; }
.intake-brand .mini-mark,.intake-brand .client-logo{ grid-row:1/3; }
.client-logo{ width:38px; height:38px; object-fit:contain; border-radius:8px; }
.intake-brand strong{ font:700 16px var(--client-font); }
.intake-brand small{ color:var(--palette-muted-11); font-size:9px; }
.secure-pill{ padding:6px 10px; border:1px solid var(--client-accent); border-radius:999px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.intake-card{ padding:34px; border:1px solid var(--client-accent); border-radius:var(--client-radius); box-shadow:8px 8px 0 var(--client-accent); }
.intake-card h1{ margin:10px 0; font:600 clamp(32px,6vw,48px)/1.02 var(--client-font); letter-spacing:-.055em; }
.intake-description{ margin:0 0 28px; color:var(--palette-muted-17); line-height:1.55; }
.intake-progress{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0; margin:0 0 34px; list-style:none; }
.intake-progress li{ display:grid; grid-template-columns:24px 1fr; gap:6px; align-items:center; color:var(--palette-muted-18); }
.intake-progress li > span{ display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--palette-border-8); border-radius:50%; font-size:10px; }
.intake-progress li small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.intake-progress li.active,.intake-progress li.complete{ color:var(--client-accent); }
.intake-progress li.active > span,.intake-progress li.complete > span{ border-color:var(--client-accent); background:var(--client-accent); color:var(--palette-surface-1); }
.intake-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.intake-field{ display:grid; gap:7px; }
.intake-field.full{ grid-column:1/-1; }
.intake-field > label{ font-size:12px; font-weight:700; }
.field-help{ color:var(--palette-muted-11); font-size:10px; }
.choice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.choice-card{ display:flex; gap:9px; align-items:center; min-height:50px; padding:12px; border:1px solid var(--palette-border-7); border-radius:10px; cursor:pointer; font-size:12px; }
.checkbox-field > label{ display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
.intake-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:26px; }
.wide{ width:100%; margin-top:10px; }
.intake-status{ min-height:20px; margin:10px 0 0; color:var(--palette-muted-10); font-size:11px; text-align:right; }
.privacy-note{ color:var(--palette-muted-11); font-size:9px; text-align:center; }
.quote-summary{ display:grid; grid-template-columns:1fr auto; gap:7px; margin:24px 0; padding:20px; border:1px solid var(--palette-border-4); border-radius:12px; }
.quote-summary strong{ font:600 28px 'Manrope'; }
.quote-summary small{ grid-column:1/-1; color:var(--palette-muted-8); }
.sandbox-notice{ display:grid; gap:4px; margin-bottom:18px; padding:16px; border-radius:12px; background:var(--palette-accent-subtle-38); font-size:12px; }
.sandbox-notice span{ color:var(--palette-muted-8); }
.complete-card{ text-align:center; }
.complete-mark{ display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:var(--palette-ink-3); color:var(--palette-surface-1); font-size:28px; }
.completion-details{ margin:26px 0; border-top:1px solid var(--palette-border-5); }
.completion-details div{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--palette-border-5); font-size:12px; }
.completion-details dt{ color:var(--palette-muted-8); }
.completion-details dd{ margin:0; font-weight:700; }
@media(max-width:900px){.lab-intro,.lab-grid,.policy-section{grid-template-columns:1fr}
.policy-flow{grid-column:1}
.lab-stat{display:none}
.lab-controls{border-right:0}
.infra-grid{grid-template-columns:1fr 1fr}
.lab-preview{padding:14px}
.preview-stage{padding:12px}}
@media(max-width:600px){.lab-intro{padding:52px 20px}
.lab-intro h1{font-size:52px}
.lab-controls{padding:14px}
.policy-section{padding:60px 20px}
.policy-list,.policy-flow{grid-template-columns:1fr}
.infra-section{padding:60px 20px}
.infra-grid{grid-template-columns:1fr}
.preview-bar{grid-template-columns:1fr}
.preview-bar>span{display:none}
.intake-app{padding:12px}
.intake-card{padding:22px;box-shadow:4px 4px 0 var(--palette-ink-3)}
.intake-field-grid,.choice-grid{grid-template-columns:1fr}
.intake-field.full{grid-column:auto}
.intake-progress li small{display:none}
.intake-progress{gap:24px}
.intake-actions{flex-direction:column-reverse}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Published presentation values are enumerated by the server. */
.intake-frame-body[data-layout=single] .intake-field-grid{grid-template-columns:1fr}
.intake-frame-body[data-density=compact] .intake-card{padding:20px}
.intake-frame-body[data-density=compact] .intake-field-grid{gap:12px}
.intake-frame-body .primary-button{color:var(--client-foreground,var(--palette-surface-1))}
.intake-frame-body .mini-mark,.intake-frame-body .intake-progress li.active>span,.intake-frame-body .intake-progress li.complete>span{color:var(--client-foreground,var(--palette-surface-1))}
.intake-frame-body .intake-progress li.active,.intake-frame-body .intake-progress li.complete{color:var(--palette-ink-3)}
.intake-frame-body :focus-visible{outline:3px solid var(--ui-focus-ring,Highlight);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.intake-frame-body *{animation:none!important;scroll-behavior:auto!important}}

.intake-field-grid fieldset.intake-field{min-width:0;border:0;margin:0;padding:0}
.intake-field-grid fieldset.intake-field legend{font-weight:600;padding:0;margin-bottom:8px}