.lab-page { --lab-ink:#14362e; --lab-muted:#5b6d65; --lab-line:#dbe3dc; padding-bottom:36px; }
.lab-intro { padding-top:36px; padding-bottom:38px; }
.lab-intro .eyebrow { margin-bottom:16px; }
.lab-intro h1 { font-size:clamp(40px,5.2vw,67px); line-height:1.06; letter-spacing:-.055em; max-width:850px; }
.lab-intro h1 em { font-style:normal; color:#49725b; }
.lab-intro > p:not(.eyebrow) { max-width:760px; font-size:18px; line-height:1.7; margin:23px 0 18px; }
.lab-benefits { display:flex; flex-wrap:wrap; gap:8px 24px; color:#3c5c4d; font-size:13px; }
.lab-benefits span::before { content:"✓"; margin-right:7px; }
.lab-workspace { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.lab-input-panel,.lab-preview,.lab-result,.lab-progress { border-radius:16px; }
.lab-input-panel { background:white; border:1px solid var(--lab-line); padding:30px; box-shadow:0 10px 36px #163e2e06; min-width:0; }
.lab-panel-top,.lab-section-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.lab-panel-top h2 { font-size:23px; line-height:1.3; letter-spacing:-.035em; }
.lab-step { display:grid; place-items:center; width:30px; height:30px; flex:none; border:1px solid #b8cbbf; border-radius:50%; font:12px/1 monospace; color:#476353; }
#lab-form > label:not(.lab-consent) { display:block; font-size:14px; font-weight:650; color:var(--lab-ink); margin:22px 0 9px; }
#lab-form > label:first-child { margin-top:0; }
#lab-form label > span:not(:only-child) { font-weight:400; color:var(--lab-muted); }
#lab-form textarea,#lab-form input:not([type=checkbox]) { display:block; width:100%; min-width:0; padding:13px 15px; font:400 16px/1.6 Manrope,"Segoe UI",sans-serif; background:#fafcf9; border:1px solid #b9c9bd; border-radius:8px; color:#18392e; box-shadow:none; }
#lab-form textarea { resize:vertical; min-height:160px; max-height:420px; }
#lab-form input::placeholder,#lab-form textarea::placeholder { color:#728077; opacity:1; font-size:15px; }
#lab-form input:focus,#lab-form textarea:focus { outline:2px solid #2c785b; outline-offset:2px; background:white; }
.lab-field-meta { display:flex; gap:12px; justify-content:space-between; font-size:11px; line-height:1.55; color:#67766c; margin-top:8px; }
#lab-count { white-space:nowrap; }
.lab-examples { margin:21px 0 8px; }
.lab-examples > span { font-size:12px; color:var(--lab-muted); }
.lab-examples > div { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.lab-examples button { border:1px solid var(--lab-line); border-radius:5px; padding:7px 10px; min-height:38px; font-size:12px; line-height:1.5; text-align:left; }
.lab-examples button:hover { border-color:#51816a; background:#edf5ed; }
.lab-privacy { font-size:11px; line-height:1.6; margin:10px 0 19px; }
#lab-form .lab-consent { display:flex; align-items:flex-start; gap:12px; font-size:14px; line-height:1.6; color:#42574a; margin:0 0 21px; padding-block:6px; min-height:44px; cursor:pointer; font-weight:400; }
#lab-form .lab-consent input { flex:none; appearance:auto; width:20px; height:20px; margin:2px 0 0; accent-color:#235244; }
.lab-consent a { text-decoration:underline; text-underline-offset:3px; }
.lab-submit { width:100%; justify-content:space-between; padding:14px 20px; font-size:15px; }
.lab-limit { font-size:11px; color:var(--lab-muted); line-height:1.55; margin:13px 0 0; }
.lab-preview { background:#153d33; color:#eef7ef; padding:32px; display:flex; flex-direction:column; min-width:0; }
.lab-preview-top { display:flex; align-items:center; gap:12px; font-size:17px; font-weight:700; margin-bottom:40px; line-height:1.4; }
.lab-preview-top small { font-size:11px; color:#b7ccbd; font-weight:400; }
.lab-preview h2 { font-size:clamp(30px,3.4vw,44px); letter-spacing:-.04em; line-height:1.14; margin-bottom:20px; }
.lab-preview > p { color:#c1d3c6; font-size:14px; line-height:1.7; }
.lab-preview-flow { list-style:none; padding:0; margin:4px 0 28px; }
.lab-preview-flow li { display:flex; gap:18px; padding:19px 0; border-top:1px solid #446457; }
.lab-preview-flow li > span { font:12px/1.7 monospace; color:#b3ce91; }
.lab-preview-flow strong { display:block; font-size:14px; font-weight:650; }
.lab-preview-flow small { display:block; font-size:12px; line-height:1.6; color:#afc7b8; margin-top:4px; }
.lab-preview .lab-preview-note { font-size:11px; line-height:1.7; padding-top:20px; border-top:1px solid #446457; margin:auto 0 0; }
.lab-message { grid-column:1/-1; padding:20px 24px; background:#f7f0df; border:1px solid #ddcba4; border-radius:8px; font-size:14px; }
.lab-message a { text-decoration:underline; margin-left:8px; }
.lab-recovery { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; padding:0 4px 12px; }
.lab-recovery button { padding:12px 18px; border:1px solid #2c785b; border-radius:6px; color:#173e32; font-weight:650; }
.lab-recovery p { font-size:12px; margin:0; }
.lab-page button:focus-visible,.lab-page a:focus-visible { outline:2px solid #2c785b; outline-offset:4px; }
.lab-page button:disabled { opacity:.6; cursor:not-allowed; }
.lab-has-result .lab-intro { padding-block:24px; }
.lab-has-result .lab-intro h1,.lab-has-result .lab-intro > p:not(.eyebrow),.lab-has-result .lab-benefits { display:none; }
.lab-has-result .lab-intro .eyebrow { margin:0; }
.lab-result-nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:16px 0 0; }
.lab-result-nav a,.lab-result-nav button { padding:10px 13px; border:1px solid #dbe3dc; border-radius:6px; font-size:12px; line-height:1.4; text-decoration:none; }
.lab-result-nav a:hover,.lab-result-nav button:hover { background:#eff5ed; border-color:#6a8c75; }
.lab-result-nav button { margin-left:auto; }
.lab-result section { scroll-margin-top:110px; }
.lab-result code { font: .92em/1.6 Consolas,monospace; background:#e4ece1; color:#244f39; border:1px solid #cfdcc9; border-radius:4px; padding:1px 4px; overflow-wrap:anywhere; }
.lab-progress { grid-column:1/-1; padding:60px 28px; text-align:center; border:1px solid var(--lab-line); background:white; }
.lab-progress h2 { font-size:26px; margin:20px 0 12px; }
.lab-progress p { max-width:520px; margin:0 auto 12px; font-size:14px; }
.lab-progress .lab-limit { font-size:11px; }
.lab-pulse { width:32px; height:32px; border:2px solid #dbe6dc; border-top-color:#235244; border-radius:50%; margin:auto; animation:lab-spin 1.2s linear infinite; }
@keyframes lab-spin { to { transform:rotate(360deg); } }
.lab-result { grid-column:1/-1; border:1px solid var(--lab-line); background:white; padding:36px; min-width:0; overflow-wrap:anywhere; }
.lab-result-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.lab-result-heading .eyebrow { margin-bottom:12px; }
.lab-result-heading h2 { font-size:clamp(27px,3vw,39px); max-width:820px; line-height:1.2; }
.lab-result-label { white-space:nowrap; padding:6px 10px; border:1px solid #c8d8c6; font-size:11px; border-radius:4px; color:#526d4c; }
.lab-result-summary { font-size:17px; line-height:1.75; margin:24px 0 16px; max-width:960px; }
.lab-result-disclosure { font-size:12px; color:#69766c; padding-bottom:27px; border-bottom:1px solid var(--lab-line); }
.lab-analysis-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; padding:30px 0; align-items:start; }
.lab-result h3 { font-size:20px; letter-spacing:-.025em; line-height:1.35; margin:0 0 17px; }
.lab-cause { margin-bottom:20px; }
.lab-cause strong { font-size:14px; }
.lab-cause p { font-size:14px; line-height:1.7; margin:5px 0 0; }
.lab-first-check { background:#f0f5ed; border-left:3px solid #5c885d; border-radius:0 8px 8px 0; padding:24px; }
.lab-first-check .eyebrow { margin-bottom:9px; }
.lab-first-check p { font-size:14px; line-height:1.75; margin-bottom:17px; }
.lab-first-check > div { border-top:1px solid #d4dfcd; padding-top:16px; }
.lab-first-check strong { font-size:12px; }
.lab-first-check > div p { margin:5px 0 0; font-size:13px; }
.lab-section-heading { border-top:1px solid var(--lab-line); padding-top:28px; margin-bottom:12px; }
.lab-section-heading h3 { margin:0; }
.lab-plan ol { list-style:none; padding:0; margin:0; counter-reset:resolution; }
.lab-plan li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; padding:20px 0; border-bottom:1px solid #e4e9e3; counter-increment:resolution; }
.lab-plan li::before { content:counter(resolution,decimal-leading-zero); font:12px/1.8 monospace; color:#69806a; }
.lab-plan li strong { display:block; font-size:14px; line-height:1.6; }
.lab-plan li p { margin:7px 0; font-size:15px; line-height:1.75; }
.lab-plan li .lab-step-check { color:#446348; font-size:13px; margin-bottom:0; }
.lab-followthrough { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:30px 0 12px; }
.lab-result ul { padding-left:18px; margin:0; color:#526158; font-size:14px; line-height:1.7; }
.lab-result li { margin-bottom:9px; }
.lab-facts { border-top:1px solid var(--lab-line); border-bottom:1px solid var(--lab-line); padding:17px 0; font-size:13px; }
.lab-facts summary { cursor:pointer; font-weight:650; }
.lab-facts ul { margin-top:15px; }
.lab-facts p { font-size:12px; margin:13px 0 0; }
.lab-result-actions { display:flex; flex-wrap:wrap; gap:10px 24px; padding:20px 0 27px; }
.lab-result-actions button { font-size:13px; padding:7px 0; text-decoration:underline; text-underline-offset:5px; }
#lab-action-status { font-size:12px; align-self:center; }
.lab-convert { background:#173e32; padding:30px; border-radius:10px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; color:white; }
.lab-convert .eyebrow { color:#bad39e; margin-bottom:12px; }
.lab-convert h3 { font-size:27px; line-height:1.2; margin-bottom:20px; }
.lab-convert p { color:#d0dfd1; font-size:14px; line-height:1.8; max-width:660px; }
.lab-convert .lab-convert-detail { font-size:12px; margin-bottom:0; color:#b1c9b8; }
.lab-convert .button { font-size:13px; }
.lab-saved-note { font-size:11px; margin:17px 0 0; color:#69776c; }
.lab-bottom { padding-top:60px; padding-bottom:45px; display:flex; align-items:center; justify-content:space-between; gap:35px; }
.lab-bottom h2 { font-size:29px; margin-bottom:18px; }
.lab-bottom .eyebrow { margin-bottom:12px; }
.lab-bottom p:not(.eyebrow) { font-size:14px; max-width:650px; margin:0; }
.lab-bottom > a { flex:none; font-size:13px; }
@media(max-width:850px) { .lab-workspace { grid-template-columns:1fr; } .lab-preview { display:none; } .lab-result-heading { flex-direction:column; gap:12px; } .lab-convert { grid-template-columns:1fr; } .lab-convert .button { justify-self:start; } .lab-bottom { display:block; } .lab-bottom > a { margin-top:24px; } }
@media(max-width:600px) { .lab-page .wrap { padding-left:20px; padding-right:20px; } .lab-intro { padding-top:25px; padding-bottom:28px; } .lab-intro h1 { font-size:40px; } .lab-intro > p:not(.eyebrow) { font-size:15px; margin-top:19px; } .lab-benefits { gap:7px 14px; font-size:11px; } .lab-input-panel { padding:22px 18px; } .lab-panel-top h2 { font-size:20px; } .lab-field-meta { display:block; } #lab-count { display:block; margin-top:3px; } .lab-result { padding:24px 18px; } .lab-result-summary { font-size:15px; } .lab-analysis-grid,.lab-followthrough { grid-template-columns:1fr; gap:23px; } .lab-first-check { padding:20px; } .lab-plan li p { font-size:14px; } .lab-convert { padding:24px 20px; } .lab-convert .button { width:100%; justify-content:space-between; } .lab-bottom { padding-top:40px; } }
@media(prefers-reduced-motion:reduce) { .lab-pulse { animation:none; } }
@media(max-width:600px) { .lab-result-nav a,.lab-result-nav button { min-height:44px; display:flex; align-items:center; } .lab-examples button,.lab-result-actions button { min-height:44px; } .lab-result-nav button { margin-left:0; } }