/* calculator-page.css: concrete-calculator.html only, loaded after
   calculator.css. Same calm style as the blog, pricing and about pages:
   big left-aligned headline, rounded sheet, the order number as the one big
   figure. Restyle only; the calculator script and every id it reads are
   untouched. */

.cc .calc-hero { text-align: left; padding: 24px 0 0; }
.cc .calc-hero .dim-rule { display: none; }
.cc .cc-eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
}
.cc .calc-hero h1.sec-title {
  margin: 10px 0 14px;
  font-size: clamp(42px, 7vw, 104px);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 800;
  color: var(--text);
  max-width: 12ch;
  text-wrap: balance;
}
.cc .calc-hero h1 em { font-style: normal; color: var(--accent-ink, var(--accent)); }
.cc .calc-lead { margin: 0; max-width: 56ch; font-size: 18px; text-align: left; }

/* the sheet */
.cc .calc-sheet { margin-top: 36px; border: 1px solid var(--border); border-radius: 28px; overflow: hidden; box-shadow: none; }
.cc .calc-left { border-right: 1px solid var(--border); }
.cc .shape-tab { border-radius: 14px; }
.cc .calc-order { border-radius: 18px; }
.cc .calc-order .amt .n { font-size: 72px; font-weight: 800; letter-spacing: -.05em; }

/* "Job isn't a rectangle?" and the closer */
.cc .calc-draw { border-radius: 28px; padding: clamp(24px, 3vw, 36px); }
.cc .calc-draw .t h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; }
.cc .calc-draw .t p { font-size: 15px; }
.cc .calc-draw .btn,
.cc #thickness .btn { border-radius: 999px; }
.cc #thickness .sec-title {
  font-size: clamp(30px, 3.8vw, 50px);
  letter-spacing: -.04em;
  font-weight: 800;
  line-height: 1;
}

/* Big blue words use the real brand blue in dark too (Jared, 2026-10-09). */
html[data-theme="dark"] .cc .calc-hero h1 em { color: #3a62e0; }

@media (max-width: 899px) {
  .cc .calc-left { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .cc .calc-lead { font-size: 16px; }
  .cc .calc-order .amt .n { font-size: 52px; }
}