:root{--ink:#1b3029;--muted:#607167;--green:#245f49;--deep:#183b30;--lime:#dceaa8;--paper:#f7f8f4;--white:#fff;--line:#d9e1da;--soft:#edf2eb;--error:#a43131;color-scheme:light dark;font-family:system-ui,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,summary{touch-action:manipulation}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #86b878;outline-offset:3px}.wrap{max-width:1200px;margin:auto;padding-left:28px;padding-right:28px}.site-header{background:var(--paper);border-bottom:1px solid var(--line)}.header-inner{height:76px;display:flex;align-items:center;gap:40px}.brand{display:inline-flex;align-items:center;gap:10px;font-family:system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.9px;white-space:nowrap}.brand-mark{background:var(--green);color:#fff;display:grid;place-items:center;border-radius:8px;width:34px;height:34px;font-size:28px;font-weight:400;line-height:1}.brand-small{font-weight:500;color:var(--green);padding-left:4px}.desktop-nav{display:flex;gap:29px;margin-left:auto;font-size:13px;font-weight:600}.desktop-nav a[aria-current="page"],.mobile-menu nav a[aria-current="page"]{color:var(--green);text-decoration:underline;text-underline-offset:4px}.desktop-nav a:hover,.footer-grid a:hover,.text-link:hover{color:var(--green);text-decoration:underline;text-underline-offset:4px}.mobile-menu{display:none}.hero{min-height:300px;display:grid;grid-template-columns:1.3fr .7fr;align-items:end;padding-top:60px;padding-bottom:50px;gap:65px}.eyebrow{font-size:10px!important;font-weight:800!important;letter-spacing:.14em;color:var(--green)!important;margin:0 0 15px!important}.eyebrow-line{display:inline-block;width:22px;height:2px;background:var(--green);vertical-align:middle;margin-right:8px}.hero h1,.page-heading h1{font-family:system-ui,sans-serif;font-size:clamp(38px,5vw,64px);letter-spacing:-.06em;line-height:1.07;margin:0;font-weight:700}.hero h1 em{font-style:normal;color:#5c8068}.hero-copy>p:not(.eyebrow){font-size:17px;line-height:1.65;color:var(--muted);max-width:460px;margin:20px 0}.hero-notes{display:flex;gap:24px;font-size:12px;font-weight:600;color:#526b59}.hero-side{border-left:1px solid #cbd8cc;padding-left:28px;max-width:330px;color:var(--muted);font-size:14px;line-height:1.65}.hero-label{font-size:9px;letter-spacing:.1em;font-weight:800;color:var(--green)}.hero-side a{display:flex;justify-content:space-between;border-bottom:1px solid #99b0a0;padding:12px 0;font-weight:700;color:var(--green)}.home-tool{padding-bottom:70px}.tool-intro{display:flex;justify-content:space-between;gap:25px;align-items:end;margin:0 0 20px}.tool-intro h2,.section-heading h2,.worksheet-callout h2{font:700 27px/1.2 system-ui,sans-serif;letter-spacing:-.035em;margin:0}.tool-intro p:not(.eyebrow){color:var(--muted);font-size:14px;margin:9px 0 0}.tool-intro>a{font-size:12px;font-weight:700;color:var(--green);white-space:nowrap;padding-bottom:3px}.calculator{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden;box-shadow:0 12px 32px #203b2410}.calc-main{padding:30px}.calc-result{background:#e9f1e9;padding:30px;display:flex;flex-direction:column;gap:16px;border-left:1px solid var(--line)}.result-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.pill{border-radius:3px;background:#d4e5ce;color:#28573e;padding:5px 7px;font-size:9px;font-weight:800;letter-spacing:.08em}.result-caption,.field-label,.mini-label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:#5a7061}.result-value{font:700 46px/1 system-ui,sans-serif;letter-spacing:-.055em;color:var(--deep);font-variant-numeric:tabular-nums}.result-value small{font:600 16px system-ui,sans-serif;letter-spacing:0}.result-summary{color:#5b7462;font-size:13px;line-height:1.55;margin:0}.result-breakdown{border-top:1px solid #c9d9cb;margin-top:4px;padding-top:12px}.result-line{display:flex;justify-content:space-between;gap:15px;padding:7px 0;color:#496251;font-size:13px}.result-line strong{color:var(--ink);font-variant-numeric:tabular-nums}.calc-actions{margin-top:auto;display:grid;gap:8px}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:46px;border-radius:6px;border:1px solid #bed0c0;padding:10px 15px;font-size:13px;font-weight:700;text-align:center;color:var(--green);background:transparent}.button:hover{background:#e0ebe0}.button.primary{background:var(--green);color:#fff;border-color:var(--green)}.button.primary:hover{background:#194d3a}.button.subtle{background:var(--white);border-color:var(--line);color:var(--ink)}.calc-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-bottom:22px;border-bottom:1px solid var(--line)}.calc-top h3{margin:0;font:700 18px system-ui,sans-serif;letter-spacing:-.03em}.calc-top p{font-size:12px;color:var(--muted);margin:5px 0 0}.example-tag{font-size:10px;color:#607360;background:var(--soft);padding:6px 8px;border-radius:3px;font-weight:700;white-space:nowrap}.shape-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 23px}.shape-button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:10px 12px;font-size:12px;font-weight:600}.shape-button.selected{background:#eaf2e8;color:var(--green);border-color:#8faf98}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label{font-size:12px;font-weight:700}.input-group{display:flex;align-items:center;border:1px solid #cbd7cd;border-radius:6px;background:var(--white);overflow:hidden}.input-group:focus-within{outline:2px solid #a0c6a7;outline-offset:1px}.input-group input{min-width:0;width:100%;border:0;padding:13px 12px;background:transparent;color:var(--ink);outline:0;font-variant-numeric:tabular-nums}.input-group span{font-size:12px;color:var(--muted);padding:0 12px}.field select,.field>input{min-height:46px;border:1px solid #cbd7cd;border-radius:6px;padding:10px;background:var(--white);color:var(--ink);width:100%}.measure-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.helper{font-size:12px;color:var(--muted);line-height:1.5}.row-controls{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:20px 0 0}.link-button{border:0;padding:5px 0;background:transparent;color:var(--green);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}.error{color:var(--error);font-size:12px;font-weight:600;min-height:16px;margin:10px 0 0}.room{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.room-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.room-head strong{font-size:14px}.room-name{border:0;border-bottom:1px solid var(--line);padding:5px 0;width:160px;background:transparent;color:var(--ink);font-weight:700}.section-block{padding:12px 0;border-top:1px solid var(--line)}.section-block:first-of-type{border:0}.section-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.inline-options{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-options select{max-width:150px;padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--white);color:var(--ink)}.section-title{font-size:12px;font-weight:700;color:var(--muted)}.add-button{margin-top:20px;width:100%;border:1px dashed #a5bca9;background:transparent;border-radius:6px;color:var(--green);font-size:13px;font-weight:700;min-height:45px}.add-button:hover{background:var(--soft)}.notice{background:#f1f5e9;border-radius:5px;padding:13px;color:#53674f;font-size:12px;line-height:1.5}.page-heading{padding-top:36px;padding-bottom:30px}.breadcrumb,.breadcrumb-current,.crumb-separator{font-size:12px;color:var(--muted)}.crumb-separator{margin:0 8px}.page-heading .eyebrow{margin-top:38px!important}.page-heading h1{font-size:clamp(32px,4vw,48px)}.page-heading>p:not(.eyebrow){color:var(--muted);font-size:16px;line-height:1.6;max-width:650px}.reading-layout{display:grid;grid-template-columns:260px minmax(0,690px);gap:60px;padding-top:70px;padding-bottom:70px}.article-kicker{font-size:10px;letter-spacing:.1em;font-weight:800;color:var(--green)}.article-kicker p{font:400 14px/1.6 system-ui,sans-serif;letter-spacing:0;color:var(--muted);max-width:170px}.article h2{font:700 27px/1.25 system-ui,sans-serif;letter-spacing:-.04em;margin:0 0 16px}.article h3{font:700 18px system-ui,sans-serif;margin:28px 0 10px}.article p{line-height:1.75;color:#506359;font-size:15px}.article a:not(.text-link){text-decoration:underline;color:var(--green)}.example{margin:25px 0;padding:20px 24px;background:#eaf0e7;border-left:3px solid #83a67b}.example span{display:block;color:var(--green);font-size:10px;letter-spacing:.12em;font-weight:800;margin-bottom:8px}.example strong{font:700 19px system-ui,sans-serif}.example p{margin:6px 0 0;font-size:13px}.text-link{display:inline-block;margin-top:12px;color:var(--green);font-size:13px;font-weight:800}.explore{padding-top:50px;padding-bottom:75px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px}.section-heading>p{color:var(--muted);font-size:14px;max-width:290px;line-height:1.55}.tool-links{display:grid;grid-template-columns:1fr 1fr;margin-top:25px;border-top:1px solid var(--line)}.tool-links a{position:relative;padding:21px 36px 21px 0;border-bottom:1px solid var(--line)}.tool-links a:nth-child(odd){margin-right:30px}.tool-links a span{display:block;font:700 15px system-ui,sans-serif}.tool-links a small{display:block;color:var(--muted);margin-top:7px;font-size:12px}.tool-links a b{position:absolute;right:7px;top:24px;font-size:16px;color:var(--green)}.tool-links a:hover span{text-decoration:underline;text-underline-offset:4px}.conversion-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:10px;letter-spacing:.08em;font-weight:800;color:var(--muted)}.conversion-links a{font-size:12px;letter-spacing:0;color:var(--green);text-decoration:underline}footer{background:var(--deep);color:#eaf2ea;padding:55px 0 22px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}.footer-grid>div{display:flex;flex-direction:column;align-items:start;gap:11px}.footer-grid b{font-size:10px;letter-spacing:.12em;color:#abc2ae;margin-bottom:7px}.footer-grid a:not(.brand){font-size:12px;color:#d7e6d9}.footer-brand .brand-mark{background:#d7e9b5;color:var(--deep)}.footer-brand .brand-small{color:#b9d5b9}.footer-grid p{font-size:13px;line-height:1.6;color:#b8d0bd}.footer-bottom{border-top:1px solid #426154;margin-top:45px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#b1c6b5}.worksheet-callout{display:grid;grid-template-columns:1.2fr .8fr;gap:45px;background:#e8f0e7;padding:35px;border-radius:10px}.worksheet-callout p:not(.eyebrow){max-width:400px;color:var(--muted);line-height:1.6}.worksheet-callout .button{margin-top:10px}.micro{font-size:11px}.sheet-preview{background:white;max-width:270px;width:100%;padding:24px;justify-self:center;box-shadow:0 12px 32px #1f3e2b18;transform:rotate(2deg)}.sheet-mini-label{font-size:8px;letter-spacing:.12em;color:var(--green);font-weight:800}.sheet-mini-title{font:700 20px/1.2 system-ui,sans-serif;margin:12px 0}.mini-grid{height:100px;background-image:linear-gradient(#dde7dc 1px,transparent 1px),linear-gradient(90deg,#dde7dc 1px,transparent 1px);background-size:12px 12px}.mini-lines{height:30px;border-bottom:1px solid #cbd8cc}.calc-result .button{width:100%}noscript{display:block;padding:20px;color:var(--error)}




.inline-result{display:none;background:var(--soft);padding:12px 14px;margin-top:18px;border-radius:6px;font-size:13px;color:var(--green);font-weight:700}.diagram{margin:18px 0;padding:15px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}.diagram svg{display:block;width:100%;max-width:300px;height:130px;margin:auto}.diagram figcaption{font-size:11px;color:var(--muted);margin-top:8px;text-align:center}.wall-block{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.opening-row{margin-top:12px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:6px}.opening-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px;font-weight:700}
.calc-top h2{margin:0;font:700 18px system-ui,sans-serif;letter-spacing:-.03em}.area-diagram{--diagram-fill:#d6e7d3;margin:0 0 12px;padding:12px;border:1px solid #c9d9cb;border-radius:6px;text-align:center}.area-diagram svg{display:block;height:78px;width:100%;margin:auto}.area-diagram figcaption{font-size:11px;font-weight:700;color:var(--green)}.area-diagram figcaption span{display:block;font-size:10px;font-weight:400;color:#4f6855;margin-top:3px}
#calculator-root[data-tool="area"]:empty{min-height:780px}.example-tag{color:#4f654f}.result-summary{color:#4f6855}


@media(prefers-color-scheme:dark){:root{--ink:#e5eee6;--muted:#adc0b0;--green:#a5cda5;--deep:#d7ead9;--lime:#bad29b;--paper:#17221d;--white:#223129;--line:#41574a;--soft:#2b3c30;--error:#ffb0a5}.brand-mark,.button.primary{background:#a5cda5;color:#173222;border-color:#a5cda5}.calc-result,.worksheet-callout,.example{background:#293d30}.result-value{color:#e7f2e2}.result-summary,.result-line,.article p,.notice{color:#bdd0c0}.pill{background:#425b45;color:#e3f2dd}.shape-button.selected,.notice{background:#314737}.hero h1 em{color:#a0c2a6}.input-group,.field select,.field>input,.inline-options select{background:#223129}.footer-grid a:not(.brand){color:#d7e6d9}footer{background:#102019;color:#eaf2ea}.sheet-preview{color:#203228;background:#f7faf5}.button:hover{background:#425b45}}
img.brand-mark{display:block;width:34px;height:34px;flex:none;object-fit:contain;border-radius:8px}
@media(prefers-color-scheme:dark){.area-diagram{--diagram-fill:#405c46;border-color:#526c56}.area-diagram figcaption span{color:var(--muted)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Match the static first paint to the calculator until the app becomes active. */
.static-preview{pointer-events:none;user-select:none}

.shape-picker{--diagram-fill:#d6e7d3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}.shape-option{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;column-gap:8px;min-height:58px;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--white);color:var(--ink);text-align:left;cursor:pointer}.shape-option:hover{border-color:#8faf98;background:var(--soft)}.shape-option:focus-visible{outline:3px solid #8faf98;outline-offset:2px}.shape-option.selected{border-color:var(--green);background:#eaf2e8;box-shadow:inset 0 0 0 1px var(--green)}.shape-option svg{width:28px;height:28px;overflow:visible}.shape-option svg g{fill:var(--diagram-fill);stroke:var(--green);stroke-width:1.8;stroke-linejoin:round}.shape-option span{display:grid;gap:3px;min-width:0}.shape-option strong{font-size:11px;line-height:1.2}.shape-option small{font-size:9px;line-height:1.2;color:var(--muted)}.area-diagram{--diagram-fill:#d6e7d3;--diagram-grid:#dfe8de;--diagram-ink:#516a58}.area-diagram svg{height:122px}.area-shape{fill:var(--diagram-fill);stroke:var(--green);stroke-width:1.6;stroke-linejoin:round}.area-shape .diagram-cutout{fill:none;stroke:var(--diagram-ink);stroke-width:1.3;stroke-dasharray:3 2}.dimension-line{fill:none;stroke:var(--diagram-ink);stroke-width:1.1}.area-diagram figcaption{line-height:1.45}.area-diagram figcaption span{font-weight:400}

@media(prefers-color-scheme:dark){.shape-picker{--diagram-fill:#405c46}.shape-option.selected{background:#2c4132}.area-diagram{--diagram-fill:#405c46;--diagram-grid:#34483a;--diagram-ink:#c4d6c5}}


/* Readable tables and no-JavaScript calculator summaries in editorial pages. */
.article table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:20px 0 26px;font-size:14px;line-height:1.5;color:var(--ink)}
.article th,.article td{padding:11px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.article th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--green);background:var(--soft)}
.article tr:last-child td{border-bottom:0}
.static-calculator-fallback{margin:0 0 22px;padding:18px 20px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font-size:14px;line-height:1.65}
.static-calculator-fallback p{margin:0 0 10px;color:var(--muted)}
.static-calculator-fallback p:last-child{margin-bottom:0}
.static-calculator-fallback strong{color:var(--ink)}
.static-calculator-fallback a{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.input-group input, .field select, .field > input, .inline-options select { font-size: 15px; }

.project-actions > summary { display: none; }
.shape-more { display: none; }

/* Responsive system: preserve the full desktop workspace while giving phone users a task-first flow. */
@media (max-width: 1023px) {
  .wrap { padding-inline: 24px; }
  .header-inner { gap: 20px; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; margin-left: auto; position: relative; }
  .mobile-menu summary { list-style: none; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 12px 35px #142c1b20; }
  .mobile-menu nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; font-size: 14px; }
  .calculator { grid-template-columns: minmax(0, 1fr); }
  .calc-result { border-left: 0; border-top: 1px solid var(--line); padding: 24px 30px; }
  .calc-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-actions .primary { grid-column: 1 / -1; }
  .reading-layout { grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .worksheet-callout { gap: 28px; padding: 30px; }
}

@media (max-width: 767px) {
  .wrap { padding-inline: 20px; }
  .header-inner { height: 60px; gap: 12px; }
  .brand { gap: 8px; font-size: 15px; }
  .brand-mark { width: 32px; height: 32px; }

  /* Homepage: lead with the calculator task rather than a marketing hero. */
  .home-page .hero { display: block; min-height: 0; padding-block: 12px 8px; }
  .home-page .hero .eyebrow, .home-page .hero-copy > p:not(.eyebrow), .home-page .hero-notes, .home-page .hero-side { display: none; }
  .home-page .hero h1 { max-width: 18ch; font-size: clamp(28px, 7.6vw, 34px); line-height: 1.02; text-wrap: balance; }
  .home-page .home-tool { padding-bottom: 36px; }
  .home-page .tool-intro { display: flex; justify-content: flex-end; align-items: center; margin: 0 0 6px; }
  .home-page .tool-intro > div { display: none; }
  .home-page .tool-intro > a { display: inline-flex; align-items: center; min-height: 40px; margin: 0; font-size: 12px; }

  .calculator { display: block; overflow: visible; border-radius: 10px; }
  .calc-main { min-width: 0; padding: 18px 16px 20px; border-radius: 10px 10px 0 0; }
  .calc-result { min-width: 0; padding: 20px 16px; border-radius: 0 0 10px 10px; }
  .calc-top { align-items: flex-start; flex-wrap: wrap; gap: 7px 10px; padding-bottom: 12px; }
  .calc-top > div { min-width: 0; flex: 1 1 170px; }
  .calc-top h2, .calc-top h3 { font-size: 17px; }
  .calc-top .example-tag { max-width: 96px; padding: 4px 5px; white-space: normal; text-align: center; font-size: 8px; line-height: 1.25; }
  .calc-top p { display: none; }
  .input-group input, .field select, .field > input, .inline-options select { min-height: 48px; font-size: 16px; }
  .input-group input { padding: 10px 8px; }
  .input-group span { padding-inline: 7px; }
  .field select, .field > input { padding: 9px; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .shape-fields { margin-top: 12px; }
  .field { min-width: 0; gap: 5px; }
  .field label { line-height: 1.25; }
  .measure-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .measure-pair .input-group input { padding-inline: 6px; }
  .measure-pair .input-group span { padding-inline: 5px; }
  .unit-field { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px !important; }
  .unit-field label { font-size: 12px; }
  .unit-field select { min-width: 0; }
  .shape-select { min-width: 0; }
  .shape-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .shape-option { display: grid; grid-template-columns: 26px minmax(0, 1fr); min-width: 0; min-height: 58px; padding: 8px; column-gap: 7px; text-align: left; }
  .shape-option svg { width: 26px; height: 26px; }
  .shape-option span { min-width: 0; justify-items: start; gap: 2px; }
  .shape-option strong { font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
  .shape-option small { display: block; font-size: 9px; line-height: 1.2; overflow-wrap: anywhere; }
  .shape-picker:not(.expanded) .shape-option:nth-child(n+5) { display: none; }
  .shape-picker.expanded .shape-option { display: grid; }
  .shape-more { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; margin-top: 4px; padding: 7px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--green); font-size: 12px; font-weight: 700; text-align: left; touch-action: manipulation; }
  .shape-more:active { background: var(--soft); }
  .section-top { align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
  .section-title { font-size: 12px; }
  .inline-options { max-width: 100%; }
  .inline-options select { width: auto; max-width: min(100%, 160px); min-height: 48px; padding: 7px 9px; font-size: 14px; }
  .room-head { align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .room-head label { display: flex; align-items: center; gap: 8px; }
  .room-head .mini-label, .room-head br { display: none; }
  .room-name { width: 116px; max-width: 100%; min-height: 48px; padding: 6px 0; font-size: 14px; }
  .link-button { min-height: 44px; padding: 8px 0; }
  .inline-result { display: flex; position: sticky; top: 6px; z-index: 8; align-items: center; justify-content: space-between; gap: 8px; min-height: 54px; margin: 10px 0 14px; padding: 8px 10px; border: 1px solid #c9d9cb; border-radius: 7px; background: var(--soft); box-shadow: 0 4px 12px #142c1b12; color: var(--green); }
  .inline-result-label { flex: 0 1 auto; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .inline-result strong { font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .inline-result strong small { font-size: 12px; }
  .inline-result a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 8px; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .mobile-form-note { display: none; }
  .project-actions { margin-top: 10px; }
  .project-actions > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; border: 1px dashed #a5bca9; border-radius: 6px; color: var(--green); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
  .project-actions > summary::-webkit-details-marker { display: none; }
  .project-actions > summary small { color: var(--muted); font-size: 10px; font-weight: 500; text-align: right; }
  .project-action-list { display: grid; gap: 8px; padding-top: 10px; }
  .add-button, .button { min-height: 48px; }
  .calc-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-actions .primary { grid-column: 1 / -1; }
  .result-value { font-size: clamp(34px, 9vw, 42px); }
  .result-line { gap: 10px; }
  .area-diagram { padding: 10px; }
  .area-diagram svg { width: 100%; max-width: 100%; height: 122px; }

  .page-heading { padding-block: 24px 20px; }
  .page-heading .eyebrow { margin-top: 24px !important; }
  .page-heading h1 { font-size: clamp(31px, 7.5vw, 38px); line-height: 1.12; text-wrap: balance; }
  .page-heading > p:not(.eyebrow) { font-size: 16px; }
  .reading-layout { display: block; padding-block: 36px 48px; }
  .article-kicker { margin-bottom: 14px; }
  .article-kicker p { display: block; max-width: 34rem; margin: 6px 0 0; }
  .article h2 { font-size: clamp(23px, 6vw, 27px); }
  .article p { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
  .article h2, .article h3, .article table { max-width: 100%; }
  .article table { display: block; max-width: 100%; overflow-x: auto; font-size: 13px; }
  .article th, .article td { padding: 10px; }
  .example { padding: 18px; overflow-wrap: anywhere; }
  .section-heading { display: block; }
  .section-heading > p { max-width: 42rem; }
  .worksheet-callout { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px; }
  .sheet-preview { justify-self: start; transform: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .tool-links { grid-template-columns: minmax(0, 1fr); }
  .tool-links a:nth-child(odd) { margin-right: 0; }
  .conversion-links { gap: 12px 16px; }
  .conversion-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-grid a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; }
  .tool-intro { display: block; }
  .article a, .footer-grid a, .mobile-menu nav a { overflow-wrap: anywhere; }
}

@media (max-width: 479px) {
  .wrap { padding-inline: 16px; }
  .brand { font-size: 14px; letter-spacing: -.6px; }
  .brand-mark { width: 30px; height: 30px; }
  .mobile-menu summary { padding-inline: 8px; }
  .home-page .hero { padding-block: 10px 6px; }
  .home-page .hero h1 { font-size: clamp(27px, 7.8vw, 31px); }
  .calc-main { padding: 16px 13px 18px; }
  .calc-result { padding: 18px 13px; }
  .shape-option { grid-template-columns: 24px minmax(0, 1fr); min-height: 56px; padding: 7px; column-gap: 6px; }
  .shape-option svg { width: 24px; height: 24px; }
  .shape-option strong { font-size: 10px; }
  .shape-option small { font-size: 9px; }
  .measure-pair { gap: 5px; }
  .measure-pair .input-group input { padding-inline: 5px; }
  .measure-pair .input-group span { padding-inline: 4px; font-size: 11px; }
  .unit-field { gap: 8px; }
  .section-top { gap: 4px 8px; }
  .inline-options select { max-width: min(100%, 140px); }
  .inline-result { gap: 5px; padding-inline: 8px; }
  .inline-result-label { font-size: 8px; }
  .inline-result strong { font-size: 17px; }
  .inline-result a { font-size: 10px; }
  .worksheet-callout { padding: 20px; }
  .footer-grid { gap: 24px 14px; }
  .article table { font-size: 12px; }
  .article th, .article td { padding: 9px 8px; }
}

@media (max-width: 359px) {
  .wrap { padding-inline: 14px; }
  .brand { font-size: 13px; }
  .calc-top .example-tag { max-width: 82px; font-size: 7px; }
  .shape-option { padding: 6px; column-gap: 5px; }
  .shape-option strong { font-size: 10px; }
  .measure-pair .input-group input { padding-inline: 4px; }
  .inline-result { flex-wrap: wrap; }
  .inline-result-label { display: none; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid > div:first-child { grid-column: auto; }
}

/* Use the available viewport height, not a phone model, to compact the home task flow. */
@media (max-width: 767px) and (max-height: 850px) {
  .home-page .tool-intro { display: none; }
  .home-page .room.single-room { border-top: 0; margin-top: 0; padding-top: 0; }
  .home-page .room.single-room > .room-head { display: none; }
}

/* Very short mobile viewports use a denser shape picker to keep inputs reachable. */
@media (max-width: 767px) and (max-height: 720px) {
  .home-page .hero { padding-block: 8px 4px; }
  .home-page .hero h1 { font-size: clamp(20px, 6vw, 23px); line-height: 1.15; white-space: nowrap; }
  .home-page .hero h1 br { display: none; }
  .home-page .hero h1 em { margin-left: .25em; }
  .home-page .tool-intro { display: none; }
  .home-page .home-tool { padding-bottom: 30px; }
  .home-page .room.single-room { border-top: 0; margin-top: 0; padding-top: 0; }
  .home-page .room.single-room > .room-head { display: none; }
  .home-page .calc-main { padding-top: 14px; padding-bottom: 14px; }
  .home-page .inline-result { min-height: 48px; margin-block: 8px 10px; }
  .home-page .shape-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .home-page .shape-option { grid-template-columns: 1fr; grid-template-rows: 20px auto; justify-items: center; align-content: center; min-height: 56px; padding: 4px 2px; gap: 2px; text-align: center; }
  .home-page .shape-option svg { width: 20px; height: 20px; }
  .home-page .shape-option span { justify-items: center; text-align: center; }
  .home-page .shape-option strong { font-size: 10px; white-space: nowrap; }
  .home-page .shape-option small { display: none; }
  .home-page .shape-more { min-height: 44px; }
  .home-page .shape-fields { margin-top: 8px; }
}

@media (max-width: 359px) and (max-height: 600px) {
  .home-page .hero { padding-block: 6px 2px; }
  .home-page .calc-main { padding-top: 12px; }
  .home-page .inline-result { margin-block: 6px 8px; }
}