.calculator-page { color: #fff; background: #141414; }

.calculator-hero {
  position: relative;
  height: 68vh;
  min-height: 490px;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 83%, rgba(106, 23, 23, .13), transparent 31%),
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.025), transparent 32%),
    #141414;
}
.calculator-noise {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
}
.calculator-corner { position: absolute; width: 40px; height: 40px; }
.calculator-corner-top { top: 32px; left: 32px; border-top: 1px solid rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08); }
.calculator-corner-bottom { right: 32px; bottom: 32px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.calculator-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1248px;
  height: 100%;
  margin: 0 auto;
  padding: 112px 40px 52px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.calculator-hero-inner > .mono-label { margin: 0 0 24px; font-size: 11px; line-height: 16.5px; letter-spacing: .45em; }
.calculator-hero-inner h1 {
  margin: 0;
  color: #fff;
  font-family: Syne, sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.025em;
}
.calculator-hero-inner > p:last-child { max-width: 520px; margin: 30px 0 0; color: rgba(255,255,255,.35); font-size: 16px; line-height: 32px; }

.calculator-estimator { padding: 80px max(40px, calc((100vw - 1104px) / 2)); background: #141414; }
.calculator-section-heading { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.calculator-section-heading > .mono-label { margin: 0; color: rgba(255,255,255,.28); }
.calculator-section-heading h2, .calculator-support h2 { margin: 12px 0 0; font-family: Syne, sans-serif; font-size: 36px; font-weight: 700; line-height: 40px; letter-spacing: -.02em; }
.calculator-section-heading > p:last-child { max-width: 650px; margin: 16px 0 0; color: rgba(255,255,255,.36); font-size: 15px; line-height: 28px; }
.calculator-validation-note { margin: -22px 0 30px; padding: 16px 18px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: start; gap: 13px; color: rgba(255,255,255,.65); border: 1px solid rgba(250,45,55,.24); border-radius: 14px; background: rgba(147,15,23,.09); }
.calculator-validation-note > span { width: 30px; height: 30px; display: grid; place-items: center; color: #ff666d; border: 1px solid rgba(250,45,55,.30); border-radius: 9px; font: 650 11px "DM Mono", monospace; }
.calculator-validation-note strong { color: rgba(255,255,255,.82); font-family: Syne, sans-serif; font-size: 13px; }
.calculator-validation-note p { margin: 5px 0 0; color: rgba(255,255,255,.42); font-size: 12px; line-height: 20px; }

.calculator-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .92fr); gap: 24px; align-items: stretch; }
.calculator-form-card, .calculator-guide-card { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.012); }
.calculator-form-card > header, .calculator-guide-card > header { min-height: 88px; padding: 22px 28px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.calculator-form-card > header .mono-label, .calculator-guide-card > header .mono-label { margin: 0 0 8px; color: rgba(255,255,255,.25); font-size: 9px; letter-spacing: .36em; }
.calculator-form-card h3, .calculator-guide-card h3 { margin: 0; color: rgba(255,255,255,.82); font-family: Syne, sans-serif; font-size: 17px; font-weight: 700; line-height: 22px; }
.calculator-guide-card > header h3 { font-family: Syne, sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; letter-spacing: -.01em; }
.calculator-form-body { padding: 28px; }

.calculator-dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calculator-dimensions label { display: flex; flex-direction: column; gap: 10px; }
.calculator-dimensions label > span, .calculator-thickness legend, .calculator-pigment legend {
  color: rgba(255,255,255,.28);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: .3em;
 font-weight: 500;}
.calculator-dimensions input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  outline: none;
  color: rgba(255,255,255,.84);
  background: rgba(255,255,255,.035);
  font-size: 14px;
  transition: border-color .15s, background-color .15s;
  -moz-appearance: textfield;
}
.calculator-dimensions input::-webkit-outer-spin-button, .calculator-dimensions input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.calculator-dimensions input::placeholder { color: rgba(255,255,255,.20); }
.calculator-dimensions input:focus { border-color: rgba(250,45,55,.5); background: rgba(255,255,255,.05); }

.calculator-thickness, .calculator-pigment { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.calculator-thickness legend, .calculator-pigment legend { margin-bottom: 10px; }
.calculator-thickness > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calculator-thickness button {
  height: 40px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.025);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
 font-weight: 500;}
.calculator-thickness button:hover { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.14); }
.calculator-thickness button.active { color: var(--red); border-color: rgba(250,45,55,.48); background: rgba(250,45,55,.08); }
.calculator-thickness > p { margin: 8px 0 0; color: rgba(255,255,255,.22); font-family: "DM Mono", monospace; font-size: 8px; line-height: 14px;  font-weight: 500;}

.calculator-pigment > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calculator-pigment button { min-height: 70px; padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: rgba(255,255,255,.48); background: rgba(255,255,255,.02); text-align: left; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }
.calculator-pigment button:hover { border-color: rgba(255,255,255,.14); }
.calculator-pigment button.active { color: var(--red); border-color: rgba(250,45,55,.45); background: rgba(250,45,55,.055); }
.calculator-pigment button strong { font-size: 14px; font-weight: 600; line-height: 20px; }
.calculator-pigment button span { color: rgba(255,255,255,.25); font-size: 11px; line-height: 17px; }

.calculator-actions { margin-top: 28px; padding-top: 24px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid rgba(255,255,255,.07); }
.calculator-actions button { height: 42px; padding: 0 20px; border-radius: 11px; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s, opacity .15s; }
.calculator-reset { border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.42); background: transparent; }
.calculator-reset:hover { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.16); }
.calculator-submit { border: 1px solid var(--button-red); color: #fff; background: var(--button-red); }
.calculator-submit:hover:not(:disabled) { border-color: var(--button-red-hover); background: var(--button-red-hover); }
.calculator-submit:disabled { opacity: .25; cursor: not-allowed; }

.calculator-guide-card { display: flex; flex-direction: column; }
.calculator-guide-card ol { margin: 0; padding: 0; list-style: none; }
.calculator-guide-card li { padding: 22px 28px; display: grid; grid-template-columns: 28px 1fr; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.calculator-guide-card li > span { padding-top: 2px; color: rgba(250,45,55,.50); font-family: "DM Mono", monospace; font-size: 11px; line-height: 16.5px; letter-spacing: .08em;  font-weight: 500;}
.calculator-guide-card h4 { margin: 0; color: rgba(255,255,255,.75); font-family: Syne, sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; }
.calculator-guide-card li p { margin: 7px 0 0; color: rgba(255,255,255,.35); font-family: var(--font-ui); font-size: 13px; font-weight: 400; line-height: 20px; }
.calculator-formula { margin-top: auto; padding: 24px 28px 26px; background: rgba(255,255,255,.015); }
.calculator-formula .mono-label { margin: 0 0 14px; color: rgba(255,255,255,.24); font-size: 9px; letter-spacing: .34em; }
.calculator-formula code { display: block; color: rgba(255,255,255,.30); font-family: "DM Mono", monospace; font-size: 9px; line-height: 20px;  font-weight: 500;}

.calculator-results { margin-top: 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(255,255,255,.008); }
.calculator-results > header { min-height: 124px; padding: 28px 40px 26px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.calculator-results > header .mono-label { margin: 0; color: rgba(255,255,255,.28); font-size: 9px; letter-spacing: .36em; }
.calculator-results > header > p:last-child { margin: 0; color: rgba(255,255,255,.78); font-family: Syne, sans-serif; font-size: 20px; font-weight: 700; line-height: 28px; }
.calculator-results > header strong { margin-left: 5px; color: var(--red); font-weight: 700; }
.calculator-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.calculator-result-grid article { min-height: 220px; padding: 34px 40px 32px; border-right: 1px solid rgba(255,255,255,.07); }
.calculator-result-grid article:last-child { border-right: 0; }
.calculator-result-icon { width: 20px; height: 20px; margin-bottom: 24px; display: block; color: var(--icon-red); }
.calculator-result-icon svg { width: 100%; height: 100%; display: block; }
.calculator-result-grid article > div { display: flex; align-items: baseline; gap: 8px; }
.calculator-result-grid article > div strong { color: #fff; font-family: Syne, sans-serif; font-size: 46px; font-weight: 700; line-height: 50px; }
.calculator-result-grid article > div span { color: var(--red); font-family: "DM Mono", monospace; font-size: 12px;  font-weight: 500;}
.calculator-result-grid h3 { margin: 8px 0 0; color: rgba(255,255,255,.40); font-family: "DM Mono", monospace; font-size: 10px; font-weight:500; line-height: 15px; letter-spacing: .26em; text-transform: uppercase; }
.calculator-result-grid p { margin: 6px 0 0; color: rgba(255,255,255,.22); font-family: "DM Mono", monospace; font-size: 9px; font-weight:500; line-height: 15px; }
.calculator-results > footer { padding: 36px 40px 34px; display: flex; align-items: flex-end; flex-direction: column; gap: 28px; border-top: 1px solid rgba(255,255,255,.08); }
.calculator-recommendation { width: 100%; padding: 20px 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.016); }
.calculator-results > footer .mono-label { margin: 0 0 10px; color: rgba(255,255,255,.28); font-size: 9px; letter-spacing: .34em; }
.calculator-results > footer .calculator-recommendation > p:last-child { margin: 0; color: rgba(255,255,255,.34); font-size: 13px; line-height: 21px; }
.calculator-results > footer > a { height: 48px; padding: 0 24px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; border-radius: 12px; color: #fff; background: var(--button-red); font-size: 14px; font-weight: 600; transition: background-color .15s; }
.calculator-results > footer > a:hover { background: var(--button-red-hover); }

.calculator-support { position: relative; min-height: 315px; overflow: hidden; padding: 72px max(40px, calc((100vw - 1104px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 48px; border-top: 1px solid rgba(255,255,255,.06); background: radial-gradient(ellipse 42% 88% at 53% 50%, rgba(105,18,23,.17), rgba(72,16,19,.06) 48%, transparent 74%), #101010; }
.calculator-support-corner { position: absolute; width: 40px; height: 40px; pointer-events: none; }
.calculator-support-corner-top { top: 32px; left: 32px; border-top: 1px solid rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08); }
.calculator-support-corner-bottom { right: 32px; bottom: 32px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.calculator-support > div { position: relative; z-index: 1; max-width: 710px; }
.calculator-support .mono-label { margin: 0; }
.calculator-support h2 { margin-top: 18px; font-size: 44px; line-height: 50px; }
.calculator-support > div > p:last-child { max-width: 680px; margin: 26px 0 0; color: rgba(255,255,255,.35); font-size: 17px; line-height: 32px; }
.calculator-support > a { position: relative; z-index: 1; height: 56px; padding: 0 28px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--button-red); border-radius: 14px; color: #fff; background: var(--button-red); font-size: 15px; font-weight: 600; transition: border-color .15s, background-color .15s; }
.calculator-support > a:hover { border-color: var(--button-red-hover); background: var(--button-red-hover); }

@media (max-width: 1023px) {
  .calculator-hero { height: auto; min-height: 500px; }
  .calculator-hero-inner { min-height: 500px; height: auto; padding: 82px 48px 52px; }
  .calculator-grid { grid-template-columns: 1fr; }
  .calculator-guide-card { display: block; }
  .calculator-support { min-height: 360px; align-items: flex-start; flex-direction: column; justify-content: center; }
}

@media (max-width: 639px) {
  .calculator-hero { min-height: 460px; }
  .calculator-hero-inner { min-height: 460px; padding: 72px 24px 44px; }
  .calculator-hero-inner > .mono-label { margin-bottom: 22px; font-size: 10px; }
  .calculator-hero-inner h1 { max-width: 100%; font-size: clamp(46px, 15vw, 56px); line-height: .92; overflow-wrap: anywhere; }
  .calculator-hero-inner > p:last-child { margin-top: 26px; font-size: 15px; line-height: 28px; }
  .calculator-estimator { padding: 72px 24px; }
  .calculator-section-heading { margin-bottom: 40px; }
  .calculator-section-heading h2, .calculator-support h2 { font-size: 30px; line-height: 36px; }
  .calculator-section-heading > p:last-child { font-size: 14px; line-height: 26px; }
  .calculator-validation-note { margin-top: -16px; padding: 15px; }
  .calculator-form-card > header, .calculator-guide-card > header { padding: 20px 22px; }
  .calculator-form-body { padding: 24px 22px; }
  .calculator-dimensions { grid-template-columns: 1fr; }
  .calculator-thickness > div { grid-template-columns: repeat(4, 1fr); }
  .calculator-pigment > div { grid-template-columns: 1fr; }
  .calculator-actions { justify-content: stretch; }
  .calculator-actions button { flex: 1; padding: 0 12px; }
  .calculator-guide-card li { padding: 22px; }
  .calculator-formula { padding: 22px; }
  .calculator-results > header { min-height: 118px; padding: 26px 24px; }
  .calculator-result-grid { grid-template-columns: 1fr; }
  .calculator-result-grid article { min-height: 210px; padding: 30px 24px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .calculator-result-grid article:last-child { border-bottom: 0; }
  .calculator-results > footer { padding: 28px 24px 30px; align-items: stretch; }
  .calculator-results > footer > a { align-self: flex-end; }
  .calculator-support { min-height: 440px; padding: 64px 24px; gap: 32px; }
  .calculator-support h2 { font-size: 36px; line-height: 42px; }
  .calculator-support > div > p:last-child { font-size: 16px; line-height: 29px; }
  .calculator-support > a { width: 100%; justify-content: center; }
}