.calculator-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);
  align-items:start;
  gap:24px;
  margin-bottom:45px
}

.calculator-form {
  min-width:0
}

.panel {
  border:1px solid var(--line);
  background:white;
  border-radius:var(--radius);
  padding:25px;
  margin-bottom:16px
}

.panel-title {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px
}

.panel-title h2 {
  font-size:1.25rem
}

.step-number {
  display:grid;
  place-items:center;
  background:var(--blue);
  border-radius:50%;
  width:28px;
  height:28px;
  flex-shrink:0;
  font-size:.8rem;
  font-weight:700
}

.panel-title .right {
  margin-left:auto
}

.field {
  display:block;
  min-width:0;
  font-size:.875rem;
  font-weight:600
}

.field>input,.field>select,.field>.input-unit {
  margin-top:7px
}

.field .hint {
  font-weight:400;
  display:block;
  margin-top:6px
}

.field-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.field-grid.three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.field-wide {
  grid-column:1/-1
}

.input-unit {
  position:relative;
  display:block
}

.input-unit input {
  padding-right:42px
}

.unit-label {
  position:absolute;
  right:13px;
  top:13px;
  pointer-events:none;
  color:var(--muted);
  font-size:.875rem;
  font-weight:400
}

.inline-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:15px
}

.inline-heading h3 {
  font-size:1rem
}

.section-box {
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px;
  margin-top:20px;
  min-width:0
}

.section-box legend {
  font-weight:700;
  font-size:.9rem;
  padding:0 7px
}

.section-actions {
  display:flex;
  justify-content:end;
  margin:-12px -6px 2px
}

.section-actions .text-button {
  font-size:.8rem
}

.dimensions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.dimension-label {
  font-size:.875rem;
  font-weight:700;
  display:block;
  margin-bottom:7px
}

.dimension-pair {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px
}

.dimension-pair.metric {
  grid-template-columns:1fr
}

.thickness {
  grid-column:1/-1;
  max-width:230px
}

.section-note {
  font-size:.8rem;
  color:var(--muted);
  margin-top:14px
}

.add-section {
  margin-top:16px;
  width:100%;
  border-style:dashed
}

.extra-options {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 16px
}

.extra-options button {
  min-height:44px;
  min-width:53px;
  border:1px solid var(--line);
  border-radius:6px;
  background:white;
  color:var(--ink);
  padding:8px 14px
}

.extra-options button[aria-pressed=true] {
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}

.allowance-row {
  display:grid;
  grid-template-columns:160px 1fr;
  align-items:center;
  gap:20px
}

.purchase-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:10px;
  gap:4px;
  margin-bottom:22px
}

.purchase-tabs label {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:45px;
  cursor:pointer;
  gap:8px;
  font-size:.9rem;
  font-weight:700;
  border-radius:7px;
  border:1px solid transparent
}

.purchase-tabs label:has(input:checked) {
  background:white;
  border-color:#9dafba;
  box-shadow:0 2px 4px #152d3b08
}

.purchase-tabs input {
  accent-color:var(--ink);
  width:16px;
  height:16px
}

.purchase-group {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}

.purchase-group>legend {
  font-size:.875rem;
  font-weight:700;
  margin-bottom:10px
}

.assumption-note {
  margin-bottom:18px
}

.pricing-fields {
  margin-top:18px
}

.check-field {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.875rem;
  min-height:44px
}

.check-field input {
  width:19px;
  height:19px;
  accent-color:var(--ink);
  flex-shrink:0
}

.submit-row {
  display:flex;
  gap:12px;
  align-items:center;
  margin:22px 0 12px
}

.submit-row .button {
  flex:1;
  min-height:54px
}

.privacy-line {
  font-size:.8rem;
  color:var(--muted);
  text-align:center
}

.result-column {
  position:sticky;
  top:20px;
  min-width:0
}

.result-card {
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:white;
  overflow:hidden
}

.result-header {
  background:var(--ink);
  color:white;
  padding:25px
}

.result-header .eyebrow {
  color:#c8d7df
}

.result-header h2 {
  font-size:1.4rem;
  margin:6px 0 23px
}

.purchase-label {
  font-size:.875rem;
  margin-bottom:7px
}

.purchase-number {
  font-size:clamp(2.4rem,4vw,3.3rem);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.04em;
  overflow-wrap:anywhere
}

.purchase-number small {
  font-size:.48em;
  font-weight:400;
  letter-spacing:0
}

.purchase-caption {
  font-size:.8rem;
  color:#d0dbe2;
  margin-top:12px
}

.result-body {
  padding:23px
}

.result-breakdown {
  margin:0
}

.result-breakdown>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 0;
  font-size:.875rem
}

.result-breakdown dt {
  color:var(--muted)
}

.result-breakdown dd {
  margin:0;
  text-align:right;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}

.result-breakdown .total-row {
  border-top:1px solid var(--line);
  margin-top:6px;
  padding-top:15px
}

.equivalents {
  background:var(--canvas);
  border-radius:8px;
  padding:13px;
  font-size:.8rem;
  color:var(--muted);
  margin-top:14px
}

.cost-box {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:20px
}

.cost-heading {
  font-size:.95rem;
  margin-bottom:8px
}

.cost-total {
  font-size:1.6rem!important
}

.result-help {
  margin-top:15px;
  font-size:.8rem;
  color:var(--muted)
}

.shopping-panel {
  margin-top:16px
}

.shopping-panel h2 {
  font-size:1.25rem;
  margin-bottom:17px
}

.shopping-panel .check-field {
  align-items:start;
  line-height:1.5;
  padding:9px 0
}

.shopping-panel .check-field input {
  margin-top:2px
}

.shopping-panel .check-field:has(input:checked) span {
  text-decoration:line-through;
  color:var(--muted)
}

.shopping-panel h3 {
  margin:20px 0 8px;
  font-size:.875rem
}

.shopping-panel .button {
  margin-top:18px;
  width:100%
}

.shopping-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.shopping-actions .button {
  padding:11px 8px;
  font-size:.875rem
}

.stale-notice {
  margin:0;
  border:1px solid #bd8d4b;
  background:#fff4e3;
  border-radius:var(--radius);
  padding:28px
}

.stale-notice h2 {
  font-size:1.4rem;
  margin-bottom:12px
}

.stale-notice .button {
  margin-top:20px
}

.example-note {
  margin-bottom:15px;
  font-size:.8rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}

.errors {
  padding:20px;
  border:2px solid var(--error);
  border-radius:var(--small-radius);
  background:#fff5f3;
  margin-bottom:18px;
  color:var(--error)
}

.errors h2 {
  font-size:1.15rem
}

.errors ul {
  margin:10px 0 0;
  padding-left:20px
}

.errors a {
  font-size:.875rem
}

.field-error {
  font-size:.8rem;
  color:var(--error);
  margin-top:7px;
  font-weight:400;
  display:block
}

[aria-invalid=true] {
  border-color:var(--error)!important;
  box-shadow:0 0 0 1px var(--error)
}

.learn-section {
  border-top:1px solid var(--line);
  padding:36px 0 45px
}

.learn-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  margin-top:23px
}

.learn-grid p {
  font-size:.95rem;
  color:var(--muted)
}

.formula {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--small-radius);
  padding:18px;
  margin:18px 0;
  font-weight:700;
  line-height:1.7
}

.learn-grid h3 {
  margin:22px 0 12px
}

.faq details {
  border-bottom:1px solid var(--line);
  padding:16px 0
}

.faq summary {
  cursor:pointer;
  min-height:35px;
  font-weight:700;
  font-size:.95rem
}

.faq details p {
  margin-top:12px
}

.related-line {
  padding:25px 0 45px;
  color:var(--muted);
  font-size:.9rem
}

.related-line a {
  font-weight:700;
  color:var(--ink)
}

@media(max-width:900px) {
  .calculator-layout {
    grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);
    gap:16px
  }
  .panel {
    padding:20px
  }
  .field-grid.three {
    grid-template-columns:1fr 1fr
  }
  .allowance-row {
    grid-template-columns:130px 1fr;
    gap:12px
  }
  .result-body,.result-header {
    padding:20px
  }
  .dimensions {
    grid-template-columns:1fr
  }
  .thickness {
    max-width:none
  }
  .dimension-pair {
    max-width:none
  }
}

@media(max-width:720px) {
  .calculator-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .result-column {
    position:static
  }
  .panel {
    padding:20px
  }
  .dimensions {
    grid-template-columns:1fr 1fr
  }
  .thickness {
    max-width:210px
  }
  .result-header {
    padding:25px
  }
  .purchase-number {
    font-size:3.2rem
  }
  .learn-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .calculator-layout {
    margin-bottom:30px
  }
  .result-card {
    scroll-margin-top:15px
  }
  .field-grid.three {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:450px) {
  .dimensions {
    grid-template-columns:1fr
  }
  .section-box {
    padding:15px
  }
  .thickness {
    max-width:none
  }
  .field-grid.three {
    grid-template-columns:1fr 1fr
  }
  .field-grid {
    gap:14px
  }
  .allowance-row {
    grid-template-columns:1fr
  }
  .allowance-row .field {
    max-width:170px
  }
  .panel-title {
    gap:9px
  }
  .panel {
    padding:18px
  }
  .panel-title h2 {
    font-size:1.17rem
  }
  .input-unit input {
    padding-right:35px;
    padding-left:10px
  }
  .unit-label {
    right:10px
  }
  .panel-title .right {
    font-size:.75rem
  }
  .purchase-number {
    font-size:2.8rem
  }
}

.submit-row {
  flex-wrap:wrap
}

.submit-row .button {
  flex:1 1 200px
}

@media(max-width:450px) {
  .field-grid {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))
  }
  .dimension-pair {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,5rem),1fr))
  }
}

@media print {
  .calculator-layout {
    display:block
  }
  .calculator-form,.learn-section,.related-line,.example-note,.shopping-actions,.stale-notice {
    display:none!important
  }
  .result-column {
    position:static;
    max-width:700px;
    margin:auto
  }
  .result-header {
    background:white;
    color:var(--ink);
    border-bottom:2px solid var(--ink)
  }
  .result-header .eyebrow,.purchase-caption {
    color:var(--muted)
  }
  .result-card {
    break-inside:avoid
  }
  .shopping-panel {
    break-inside:avoid
  }
  .page-heading {
    padding:15px 0
  }
  .breadcrumb {
    display:none
  }
  .result-body {
    padding:15px
  }
  .result-breakdown>div {
    padding:5px 0
  }
}