/* CoverCalc Pro · Field notes visual system. Screen only; print templates keep their own layout. */
:root { --ink:#21382e; --muted:#62695e; --line:#d9d4c8; --soft:#f2eee4; --surface:#fffefa; --green:#274c3d; --green-dark:#203c32; --green-soft:#e8eee5; --paper:#f6f3eb; --accent:#b55132; --shadow:none; }
html { scroll-padding-top:24px; }
body { background:var(--paper); color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; font-size:16px; }
.page-shell, .calculator-page .page-shell { width:min(1240px,calc(100% - 72px)); max-width:1240px; padding-top:28px; }
.site-header.page-shell, .calculator-page .site-header.page-shell { width:100%; max-width:none; min-height:86px; padding:0 max(36px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:#fffefa; flex-direction:row; align-items:center; gap:24px; position:static; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:23px; font-weight:650; letter-spacing:-.9px; white-space:nowrap; }
.brand-symbol { display:grid; place-items:center; width:38px; height:38px; color:#fffefa; background:var(--green-dark); border-radius:2px; }
.brand-symbol svg { width:29px; height:29px; }
.brand-pro { margin-left:5px; font-size:10px; letter-spacing:1.5px; font-weight:750; color:var(--accent); vertical-align:top; line-height:22px; }
.site-nav, .calculator-page .site-nav { display:flex; width:auto; gap:28px; padding:0; background:transparent; border:0; border-radius:0; }
.site-nav a, .calculator-page .site-nav a { font-size:14px; font-weight:600; min-height:86px; padding:0 2px; background:transparent; color:var(--muted); border:0; border-bottom:3px solid transparent; border-radius:0; box-shadow:none; }
.site-nav a[aria-current="page"], .calculator-page .site-nav a[aria-current="page"] { color:var(--green-dark); background:transparent; border-bottom-color:var(--accent); box-shadow:none; }
.site-nav a:hover, .site-nav a:focus-visible { color:var(--accent); border-bottom-color:var(--accent); background:transparent; }
h1, .calculator-page h1 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-2px; line-height:1.05; }
h2 { letter-spacing:-.3px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:1.6px; color:var(--accent); }
.button { border-radius:3px; font-size:14px; font-weight:650; padding:12px 18px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; gap:12px; }
.button-primary { background:var(--green-dark); color:#fff; }
.button-primary:hover { background:#315b49; }
.button-secondary { background:#eeeade; color:var(--ink); }
.button-secondary:hover { background:#e4dfd0; }
.button-danger { background:#f8e9e2; }
.button:hover { transform:none; }
input, select, .input-with-unit, .planner-unit-input, .rate-input { border-radius:3px; border-color:#bbbeb1; background:#fff; }
input, select { font-size:15px; font-weight:500; }
input:focus, select:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid #b5513240; outline-offset:3px; }
.field { font-size:13px; font-weight:650; }
.field small { font-size:12px; line-height:1.5; }
.content-section { border-radius:3px; border:1px solid var(--line); box-shadow:none; padding:34px; margin-top:26px; }
.content-section h2 { font-family:Georgia,"Times New Roman",serif; font-size:29px; font-weight:400; line-height:1.2; }
.info-grid article { border-radius:0; background:transparent; padding:0 18px 0 0; border-right:1px solid var(--line); }
.info-grid article:last-child { border:0; }
.content-section p, .content-section li { line-height:1.75; }
.related-guide { background:#f1ede2; border-color:var(--accent); }
.site-footer.page-shell { padding:28px 0 36px; border-top:1px solid var(--line); margin-top:30px; font-size:13px; }
.footer-nav a { font-size:12px; font-weight:600; }
.landing-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:stretch; margin:7px 0 35px; }
.hero-intro { padding:8px 0 4px; }
.hero-intro .eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:19px; }
.hero-intro .eyebrow > span { display:inline-block; width:24px; height:1px; background:var(--accent); }
.calculator-page .hero-intro h1 { font-size:clamp(38px,4.6vw,64px); margin:0 0 16px; }
.title-dot { color:var(--accent); }
.calculator-page .hero-intro .heading-copy { color:var(--ink); font-size:22px; line-height:1.3; margin:0 0 13px; letter-spacing:-.3px; }
.hero-description { max-width:470px; color:var(--muted); font-size:14px; line-height:1.65; margin-bottom:18px; }
.hero-links { display:flex; align-items:center; flex-wrap:wrap; gap:17px; }
.hero-links .button-primary { font-size:13px; padding:11px 17px; min-height:44px; }
.hero-links > a:not(.button) { font-size:12px; text-underline-offset:4px; }
.hero-intro .tool-promise { font-size:11px; margin:17px 0 0; color:var(--muted); }
.tool-promise span { margin:0 9px; color:var(--accent); }
.hero-photo { margin:0; position:relative; min-height:305px; overflow:hidden; background:#d7dbc8; border-radius:2px; }
.hero-photo > img { position:absolute; width:200%; max-width:none; height:auto; right:0; top:50%; transform:translateY(-50%); }
.hero-photo figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:flex-end; gap:15px; padding:36px 23px 20px; color:#fff; background:linear-gradient(transparent,rgba(20,37,26,.88)); }
.hero-photo figcaption > span { font-family:Georgia,"Times New Roman",serif; font-size:22px; line-height:1.25; }
.hero-photo figcaption strong { font-weight:400; }
.hero-photo figcaption small { max-width:84px; font-size:10px; color:#edf0e4; text-align:right; }
.calculator-page .tool-card { padding:0; border:1px solid #cac9bb; border-radius:4px; background:#fffefa; box-shadow:0 7px 24px #263f3010; }
.workbench-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 28px; border-bottom:1px solid var(--line); }
.workbench-heading > div { display:flex; align-items:center; gap:12px; }
.workbench-heading h2 { margin:0; font-size:17px; font-weight:650; }
.workbench-icon { color:var(--accent); font-family:Georgia,serif; font-size:25px; line-height:1; }
.workbench-heading .method-link { font-size:11px; color:var(--muted); }
.tool-step-nav { display:grid; grid-template-columns:repeat(3,1fr); background:#f1eee4; border-bottom:1px solid var(--line); }
.tool-step-nav a { display:flex; align-items:center; justify-content:center; padding:12px 8px; gap:10px; color:var(--muted); text-decoration:none; font-size:12px; border-right:1px solid var(--line); border-bottom:2px solid transparent; }
.tool-step-nav a:last-child { border-right:0; }
.tool-step-nav a.current { background:#fffefa; color:var(--ink); border-bottom-color:var(--accent); }
.tool-step-nav b { font-weight:500; color:var(--accent); font-size:11px; }
.calculator-page .calculator-workspace { margin:0; padding:27px 28px 30px; gap:30px; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.measure-heading h2 { font-size:16px; }
.step-label { display:none; }
.material-controls { margin-top:18px; }
.calculator-page .area-row { border-top:1px solid var(--line); padding:18px 0; }
.calculator-page .area-row:first-child { border-top:0; padding-top:3px; }
.calculator-page .area-number { font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:1px; }
.calculator-page .area-row .field span { font-size:12px; }
.calculator-page input, .calculator-page select { min-height:44px; font-size:15px; border-radius:3px; }
.calculator-page .input-with-unit { border-radius:3px; border-color:#bbbeb1; }
.calculator-page .add-area { border:1px dashed #a3ac96; min-height:43px; background:#f6f5ee; font-size:13px; }
.calculator-page .optional-settings summary { font-size:12px; font-weight:600; }
.calculator-page .measurement-help { font-size:12px; }
.calculator-page .estimate-panel { background:var(--green-dark); color:#fffefa; border:0; border-radius:3px; padding:26px; top:24px; }
.estimate-panel .eyebrow { color:#e6b784; font-size:10px; }
.estimate-panel h2 { font-family:Georgia,"Times New Roman",serif; font-size:29px; font-weight:400; letter-spacing:-.5px; }
.estimate-panel .estimate-status { color:#d1ddcd; font-size:12px; line-height:1.6; min-height:38px; margin-bottom:12px; }
.estimate-panel .estimate-status.incomplete { color:#edd7b2; }
.calculator-page .estimate-panel .result-card { border-color:#ffffff2e; padding:18px 0; }
.calculator-page .estimate-panel .result-card:nth-child(odd) { padding-right:14px; }
.calculator-page .estimate-panel .result-label { color:#d4ded0; font-size:11px; font-weight:500; }
.calculator-page .estimate-panel .result-value { color:#fff9ea; font-size:24px; font-weight:500; }
.calculator-page .estimate-panel .result-card.emphasis .result-value { font-size:clamp(27px,3vw,40px); color:#f9d098; font-weight:600; line-height:1.25; }
.calculator-page .estimate-panel .result-subtext { color:#c4d2be; font-size:11px; font-weight:400; }
.estimate-panel .estimate-details { color:#c8d3c2; font-size:11px; grid-column:1/-1; }
.estimate-panel .purchase-note { color:#d3dccb; font-size:11px; }
.estimate-panel .share-note { color:#bbc8b5; font-size:10px; line-height:1.6; }
.estimate-panel .result-actions .button-primary { color:#233c2e; background:#f2cb90; }
.estimate-panel .result-actions .button-secondary { color:#f9f8ec; background:transparent; border:1px solid #849682; }
.estimate-panel .result-actions .button { font-size:11px; min-height:40px; padding:9px 10px; }
.estimate-panel button:disabled { opacity:.58; }
.estimate-panel .copy-status { color:#f0d6a6; }
.estimate-panel .field { color:#fff; }
.estimate-panel textarea { color:var(--ink); }
.comparison-section { padding:26px 28px 12px; margin:0; background:#fbf9f2; }
.comparison-section h2 { font-size:19px; }
.comparison-inputs legend { color:var(--accent); font-size:12px; font-weight:600; }
.comparison-inputs fieldset { border-radius:3px; background:#fffefa; }
.cost-comparison-table thead { background:#ece9dd; }
.cost-comparison-table th, .cost-comparison-table td { padding:13px 12px; }
.comparison-verdict { border-color:var(--accent); background:#eee8d9; color:var(--ink); }
.calculator-page .ai-tools { margin:0; padding:20px 28px; border-top:1px solid var(--line); }
.calculator-page .workflow-links { margin:0; padding:18px 28px; background:#f1eee5; gap:25px; border-top:1px solid var(--line); }
.calculator-page .workflow-links strong { font-size:13px; }
.calculator-page .workflow-links span { font-size:12px; }
.calculator-page .content-section { border-radius:3px; }
.calculator-page .notice { margin:20px 28px; }
.simple-page .prose { max-width:960px; margin-inline:auto; }
.simple-page h1 { font-size:clamp(36px,4vw,54px); }
@media(max-width:1000px) {
 .landing-hero { gap:28px; }
 .hero-links { gap:12px; }
 .hero-description { max-width:400px; }
 .calculator-page .calculator-workspace { gap:20px; padding:24px; grid-template-columns:1.1fr 1fr; }
 .calculator-page .estimate-panel { padding:21px; }
 .site-header.page-shell,.calculator-page .site-header.page-shell { padding-inline:28px; }
}
@media(max-width:760px) {
 .landing-hero { grid-template-columns:1fr .75fr; gap:24px; }
 .hero-photo { min-height:270px; }
 .hero-photo figcaption > span { font-size:18px; }
 .hero-photo figcaption small { display:none; }
 .hero-photo figcaption::after { content:'AI concept'; font-size:9px; }
 .calculator-page .hero-intro h1 { font-size:42px; }
 .calculator-page .hero-intro .heading-copy { font-size:19px; }
 .calculator-page .calculator-workspace { grid-template-columns:1fr; }
 .calculator-page .estimate-panel { position:static; }
 .site-nav,.calculator-page .site-nav { gap:18px; }
 .workbench-heading .method-link { max-width:130px; text-align:right; }
 .info-grid article { border-right:0; border-bottom:1px solid var(--line); padding:0 0 15px; }
}
@media(max-width:560px) {
 .page-shell,.calculator-page .page-shell { width:calc(100% - 32px); padding-top:18px; }
 .site-header.page-shell,.calculator-page .site-header.page-shell { min-height:0; padding:16px 16px 0; flex-direction:column; align-items:flex-start; gap:13px; }
 .brand { font-size:22px; }
 .brand-symbol { width:32px; height:32px; }
 .brand-symbol svg { width:25px; height:25px; }
 .site-nav,.calculator-page .site-nav { display:flex; width:100%; justify-content:space-between; gap:8px; padding:0; }
 .site-nav a,.calculator-page .site-nav a { min-height:39px; font-size:13px; padding:0 2px 8px; }
 .landing-hero { grid-template-columns:1fr; gap:18px; margin:0 0 23px; }
 .hero-intro { padding-top:5px; }
 .hero-intro .eyebrow { margin-bottom:12px; font-size:9px; letter-spacing:1.4px; }
 .calculator-page .hero-intro h1 { font-size:43px; letter-spacing:-1.7px; margin-bottom:12px; }
 .calculator-page .hero-intro .heading-copy { font-size:20px; }
 .hero-description { font-size:13px; max-width:370px; margin-bottom:15px; }
 .hero-links .button-primary { font-size:12px; min-height:43px; }
 .hero-links > a:not(.button) { font-size:11px; }
 .hero-intro .tool-promise { font-size:10px; margin-top:13px; }
 .hero-photo { min-height:140px; }
 .hero-photo > img { top:49%; }
 .hero-photo figcaption { padding:24px 16px 13px; }
 .hero-photo figcaption > span { font-size:19px; }
 .workbench-heading { padding:16px; gap:12px; }
 .workbench-heading h2 { font-size:14px; }
 .workbench-heading .method-link { display:none; }
 .tool-step-nav a { font-size:10px; gap:5px; padding:11px 5px; }
 .tool-step-nav b { font-size:9px; }
 .calculator-page .calculator-workspace { padding:18px 16px; gap:23px; }
 .calculator-page .measure-heading { flex-direction:row; align-items:center; }
 .calculator-page .measure-heading h2 { font-size:15px; }
 .calculator-page .text-button { font-size:11px; }
 .calculator-page .estimate-panel { padding:22px; }
 input,select,.calculator-page input,.calculator-page select { font-size:16px; min-height:46px; }
 .calculator-page .area-row .field span { font-size:12px; }
 .calculator-page .results-grid { grid-template-columns:1fr 1fr; }
 .calculator-page .estimate-panel .result-value { font-size:23px; }
 .calculator-page .estimate-panel .result-card.emphasis .result-value { font-size:32px; }
 .comparison-section { padding:22px 16px 12px; }
 .comparison-inputs .form-grid { grid-template-columns:1fr; }
 .cost-comparison-table { font-size:11px; }
 .cost-comparison-table th,.cost-comparison-table td { padding:11px 4px; overflow-wrap:anywhere; }
 .cost-comparison-table thead th { font-size:10px; }
 .calculator-page .ai-tools { padding:18px 16px; }
 .calculator-page .workflow-links { padding:15px 16px; gap:0; }
 .calculator-page .notice { margin:16px; }
 .content-section { padding:23px 20px; }
 .content-section h2 { font-size:26px; }
 .site-footer.page-shell { padding:24px 0; margin-top:20px; }
}