.wp-page{max-width:1120px;margin:36px auto 72px;padding:0 20px;color:#263743}.wp-heading{margin-bottom:30px}.wp-heading h1{font-size:clamp(2rem,4vw,3rem);font-weight:750;letter-spacing:-.04em}.wp-heading>p:last-child{font-size:1.15rem;color:#586974}.wp-eyebrow{color:#376c83;font-size:.75rem;font-weight:750;letter-spacing:.16em}.wp-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}.wp-card{border:1px solid #cbd5db;border-radius:18px;background:#ffffff;padding:28px;box-shadow:0 8px 28px #44392612}.wp-card h2,.wp-guide h2{font-size:1.2rem;font-weight:700;margin:24px 0 18px}.wp-section-head{display:flex;gap:12px;justify-content:space-between;align-items:center}.wp-section-head h2{margin:0}.wp-page label{display:flex;flex-direction:column;gap:7px;font-size:.85rem;font-weight:650}.wp-page input,.wp-page select{width:100%;border:1px solid #b7c7d0;border-radius:8px;padding:10px 12px;background:#ffffff;color:#263743;font:inherit}.wp-page input:focus,.wp-page select:focus,.wp-page button:focus-visible{outline:3px solid #568298;outline-offset:2px}.wp-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.wp-wall{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-bottom:16px}.wp-muted{font-size:.85rem;line-height:1.6;color:#586974;margin:16px 0}.wp-page button{border-radius:8px;padding:11px 16px;font-weight:650;cursor:pointer}.wp-primary{background:#285c73;color:white;border:1px solid #285c73}.wp-secondary{background:#edf2f5;color:#2d5266;border:1px solid #cbd5db}.wp-actions{display:flex;gap:12px;margin-top:22px}.wp-result{background:#e3edf2;position:sticky;top:24px}.wp-result h2{margin-top:0}.wp-total{font-size:5rem;line-height:1.1;font-weight:750;letter-spacing:-.06em}.wp-result dl{margin:24px 0}.wp-result dl>div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #bed0da;padding:12px 0}.wp-result dt{font-weight:400}.wp-result dd{font-weight:700;margin:0}.wp-result ul{padding-left:18px;font-size:.9rem;line-height:1.7}.wp-guide{max-width:790px;margin-top:36px;line-height:1.8}.wp-error{color:#a13226}@media(max-width:760px){.wp-layout{grid-template-columns:1fr}.wp-card{padding:20px}.wp-result{position:static}.wp-wall{gap:8px}.wp-section-head{align-items:start}.wp-page{margin-top:24px}}

/* Porcelain surfaces, slate blue accents and cool grout borders. */
.wp-heading h1 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; letter-spacing: -.035em; }
.wp-heading { border-left: 3px solid #b87858; padding-left: 22px; }
.wp-card { box-shadow: 0 8px 28px rgba(36,59,73,.07); }
.wp-result { border-top: 4px solid #678fa3; background-image: linear-gradient(rgba(65,101,122,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(65,101,122,.055) 1px, transparent 1px); background-size: 56px 56px; }
.wp-total { color: #234f65; }
.wp-primary:hover { background: #1c465c; border-color: #1c465c; }
.wp-secondary:hover:not(:disabled) { background: #e0eaf0; border-color: #aabec9; }
.wp-secondary:disabled { opacity: .45; cursor: default; }
.wp-guide { border-top: 1px solid #cbd5db; padding-top: 10px; }
/* Interface refinements */
.wp-page { margin-top: 52px; }
.wp-heading { max-width: 780px; margin-bottom: 38px; border-left: 0; padding-left: 0; }
.wp-heading h1 { font-size: clamp(2.6rem, 5vw, 4rem); margin: 10px 0 16px; }
.wp-heading > p:last-of-type { max-width: 620px; line-height: 1.7; }
.wp-tags { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; color: #526b7b; font-size: .8rem; }
.wp-tags span::before { content: '✓'; margin-right: 7px; color: #376c83; }
.wp-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; }
.wp-card { padding: 32px; border-radius: 10px; }
.wp-step { display: inline-grid; place-items: center; width: 32px; height: 32px; background: #e0eaf0; border-radius: 6px; color: #315d73; font-size: .72rem; letter-spacing: .04em; margin-right: 8px; vertical-align: middle; }
.wp-section-head > label { font-size: .75rem; color: #586974; min-width: 115px; }
.wp-section-head select { padding: 7px 10px; }
.wp-wall { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; background: #f1f5f7; padding: 16px; border: 1px solid #d9e2e7; border-radius: 12px; }
.wp-wall-title { grid-column: 1/-1; font-size: .8rem; font-weight: 750; color: #526d7c; letter-spacing: .03em; }
.wp-wall button { padding: 0; height: 46px; font-size: 1.35rem; background: transparent; }
.wp-page input { min-height: 46px; background: #ffffff; font-size: 1rem; font-variant-numeric: tabular-nums; }
.wp-page label small { font-weight: 400; font-size: .73rem; color: #586974; line-height: 1.5; }
.wp-fields { align-items: start; gap: 20px; }
.wp-divider { border-top: 1px solid #d9e2e7; margin-top: 28px; }
.wp-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.wp-presets > span { color: #586974; font-size: .75rem; margin-right: 4px; }
.wp-presets button { padding: 6px 10px; font-size: .75rem; border-radius: 10px; }
.wp-actions { padding-top: 20px; border-top: 1px solid #d9e2e7; }
.wp-primary { flex: 1; display: flex; justify-content: space-between; align-items: center; min-height: 50px; }
.wp-result { top: 90px; overflow: hidden; scroll-margin-top: 90px; }
.wp-result .wp-eyebrow { position: relative; max-width: 190px; }
.wp-result h2 { font-size: 1.05rem; }
.wp-total { font-size: clamp(4.5rem, 7vw, 6rem); font-weight: 650; margin-top: 14px; font-variant-numeric: tabular-nums; }
.wp-result-caption { color: #526b7b; margin-top: 6px; }
.wp-live-badge { display: inline-flex; align-items: center; gap: 6px; color: #234f65; font-size: .7rem; background: #f5f9fb; border: 1px solid #bed0da; border-radius: 10px; padding: 5px 9px; }
.wp-live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #426e84; }
.wp-result dl { font-size: .88rem; }
.wp-result dd { text-align: right; overflow-wrap: anywhere; }
.wp-result .wp-cut-title { border-top: 1px solid #bed0da; padding-top: 20px; font-size: .9rem; }
.wp-result ul { list-style: none; padding: 0; }
.wp-result li { background: #f1f6f8; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.wp-guide { max-width: none; margin-top: 48px; padding-top: 28px; }
.wp-guide > h2 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 2rem; font-weight: 400; margin-top: 8px; }
.wp-tips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 26px 0; font-size: .88rem; }
.wp-tips strong { color: #315d73; }
.wp-tips p { color: #586974; margin-top: 8px; }
.wp-guide details { border-top: 1px solid #cbd5db; padding: 20px 0; font-size: .9rem; }
.wp-guide summary { font-weight: 650; cursor: pointer; color: #315d73; }
.wp-guide details p:first-of-type { margin-top: 18px; }
@media(max-width:760px) {
    .wp-page { margin-top: 28px; padding: 0 16px; }
    .wp-heading { margin-bottom: 26px; }
    .wp-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
    .wp-card { padding: 22px; }
    .wp-result { position: static; }
    .wp-tips { grid-template-columns: 1fr; gap: 10px; }
    .wp-guide { margin-top: 32px; }
}
@media(max-width:400px) {
    .wp-card { padding: 16px; }
    .wp-wall { padding: 12px; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 36px; }
    .wp-fields { grid-template-columns: 1fr; }
    .wp-page label { font-size: .8rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
/* Keep unit labels on one line above their controls. */
.wp-page label { display: block; }
.wp-page label input, .wp-page label select { display: block; margin-top: 7px; }
.wp-page label small { display: block; margin-top: 7px; }
.wp-page input, .wp-page select, .wp-page button { transition: background-color .15s ease, border-color .15s ease; }
@media(prefers-reduced-motion:reduce) { .wp-page input, .wp-page select, .wp-page button { transition: none; } }
.wp-save-status { color: #586974; font-size: .75rem; line-height: 1.6; margin: 16px 0 0; }
.wp-page [hidden] { display: none !important; }
/* Corrections found during desktop and mobile browser verification. */
@media(max-width:760px) { .wp-result { position: relative; top: auto; } }
/* Educational guide and worked examples. */
.wp-guide-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: -10px 0 28px; }
.wp-guide-nav a { color: #2d5266; background: #ffffff; border: 1px solid #cbd5db; border-radius: 24px; padding: 8px 14px; text-decoration: none; font-size: .8rem; }
.wp-guide-nav a:hover, .wp-guide-nav a:focus-visible { background: #e3edf2; border-color: #568298; }
.wp-education { margin-top: 56px; line-height: 1.85; }
.wp-education > section { margin-top: 44px; padding-top: 28px; border-top: 1px solid #cbd5db; scroll-margin-top: 90px; }
.wp-education h2 { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: clamp(1.6rem,3vw,2.15rem); font-weight: 400; line-height: 1.3; color: #2d5266; margin: 0 0 20px; }
.wp-education h3 { font-size: 1.12rem; line-height: 1.5; margin: 0 0 16px; color: #2d5266; }
.wp-education p, .wp-education li { font-size: .94rem; }
.wp-education > section > p { max-width: 880px; }
.wp-education a { text-underline-offset: 3px; }
.wp-measure-steps { max-width: 880px; padding-left: 24px; }
.wp-measure-steps li { padding: 0 0 15px 8px; }
.wp-measure-steps li::marker { color: #376c83; font-weight: 700; }
.wp-content-note { background: #e3edf2; border-left: 3px solid #568298; border-radius: 0 12px 12px 0; padding: 20px 24px; max-width: 900px; margin-top: 22px; }
.wp-content-note p { margin: 8px 0 0; }
.wp-formula-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.wp-formula-grid > div { background: #ffffff; border: 1px solid #cbd5db; border-radius: 12px; padding: 20px; }
.wp-formula-grid span { font-size: .8rem; font-weight: 750; color: #376c83; }
.wp-formula-grid p { margin: 8px 0 0; }
.wp-example-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.wp-example { min-width: 0; padding: 26px; background: #ffffff; border: 1px solid #cbd5db; border-radius: 16px; }
.wp-example .wp-example-label { color: #376c83; font-size: .68rem; letter-spacing: .12em; font-weight: 750; }
.wp-example ul { padding-left: 20px; }
.wp-example li { margin-bottom: 8px; }
.wp-example-wide { margin-top: 22px; }
.wp-table-wrap { overflow-x: auto; border: 1px solid #cbd5db; border-radius: 12px; margin: 22px 0; background: #ffffff; }
.wp-education table { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.6; }
.wp-education caption { caption-side: top; padding: 14px 18px; font-size: .8rem; color: #586974; }
.wp-education th, .wp-education td { text-align: left; padding: 13px 18px; border-top: 1px solid #d9e2e7; vertical-align: top; }
.wp-education thead { background: #e3edf2; color: #2d5266; }
.wp-education tbody th { font-weight: 650; }
.wp-checklist { max-width: 880px; padding-left: 22px; }
.wp-checklist li { padding-left: 5px; margin-bottom: 13px; }
.wp-back-to-tool { display: inline-block; margin-top: 12px; font-weight: 650; }
.wp-faq details { padding: 18px 0; border-bottom: 1px solid #cbd5db; }
.wp-faq summary { font-size: .97rem; font-weight: 650; cursor: pointer; color: #2d5266; line-height: 1.6; }
.wp-faq summary:focus-visible, .wp-guide-nav a:focus-visible { outline: 3px solid #568298; outline-offset: 4px; border-radius: 4px; }
.wp-faq details p { margin: 15px 0 0; max-width: 880px; color: #526572; }
.wp-education .wp-content-date { font-size: .76rem; color: #586974; margin-top: 24px; }
@media(max-width:760px) {
    .wp-guide-nav { gap: 8px; }
    .wp-guide-nav a { font-size: .73rem; padding: 7px 11px; }
    .wp-education { margin-top: 36px; }
    .wp-education > section { margin-top: 32px; padding-top: 24px; }
    .wp-example-grid, .wp-formula-grid { grid-template-columns: minmax(0,1fr); }
    .wp-example { padding: 20px; }
    .wp-education th, .wp-education td { padding: 10px; overflow-wrap: anywhere; }
    .wp-education caption { padding: 12px 10px; }
    .wp-education table { font-size: .78rem; }
    .wp-content-note { padding: 18px; }
}

.wp-result:focus{outline:3px solid #568298;outline-offset:3px}.wp-wall button{min-height:44px}.wp-fields{margin-top:18px}

/* Keep the estimating surface clean and the tile grid subtle. */
.wp-heading h1 { font-weight: 650; }
.wp-result h2 { color: #234f65; }
#tile-form { scroll-margin-top: 85px; }
.tile-dimensions { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
#tile-total-field { margin-top: 18px; }
.tile-budget { border-top: 2px solid #678fa3; margin-top: 24px; padding-top: 24px; }
.tile-budget-total { font-size: 1.08rem; color: #234f65; }
.tile-budget-total dt { font-weight: 700; }
#tile-form h2 small { font-size: .8rem; font-weight: 400; }

/* Packaging mismatch warning */
.tile-warning { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid #b87858; border-radius: 6px; background: #fff5ec; color: #6b3a1f; font-size: .85rem; line-height: 1.55; }

/* Feet + inches surface inputs */
.tile-dim-inputs { display: flex; gap: 8px; align-items: center; }
.tile-dim-inputs > input { flex: 1 1 60%; min-width: 0; }
.tile-inch { display: flex; flex: 1 1 40%; min-width: 0; }
.tile-inch input { flex: 1; min-width: 0; width: 100%; }
.tile-inch[hidden] { display: none; }
@media (max-width: 600px) {
    .wp-wall.tile-imperial { grid-template-columns: minmax(0, 1fr) 36px; }
    .wp-wall.tile-imperial .tile-dim { grid-column: 1; }
    .wp-wall.tile-imperial > button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Print and share */
.tile-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tile-share button { flex: 1 1 140px; }
.tile-share-status { font-size: .8rem; color: #586974; line-height: 1.5; margin-top: 10px; }
.tile-share-status:empty { display: none; }
.tile-share-status input { margin-top: 8px; font-size: .8rem; min-height: 40px; }
.tile-print-summary { display: none; }
@media print {
    .tile-print-estimate .site-head, .tile-print-estimate footer, .tile-print-estimate .wp-heading, .tile-print-estimate .wp-guide-nav, .tile-print-estimate #tile-form, .tile-print-estimate .wp-education, .tile-print-estimate .tile-share, .tile-print-estimate .tile-share-status, .tile-print-estimate #cookieConsent { display: none !important; }
    .tile-print-estimate body * { visibility: hidden; }
    .tile-print-estimate #tile-result, .tile-print-estimate #tile-result * { visibility: visible; }
    .tile-print-estimate .wp-page { margin: 0; padding: 0; max-width: none; }
    .tile-print-estimate .wp-layout { display: block; }
    .tile-print-estimate .wp-result { position: static; border: 0; box-shadow: none; background: #fff; padding: 0; }
    .tile-print-estimate .wp-total { font-size: 3rem; }
    .tile-print-estimate .tile-print-summary { display: block; border-top: 2px solid #678fa3; margin-top: 20px; padding-top: 16px; font-size: .85rem; }
    .tile-print-estimate .tile-print-summary ul { padding-left: 18px; margin: 8px 0; }
    .tile-print-estimate .tile-print-summary li { background: none; border: 0; padding: 2px 0; margin: 0; list-style: disc; }
}
