/* ==========================================================================
   Metal Weight Calculator — page-specific styles
   Uses the shared --pp-* design tokens declared in main.css
   ========================================================================== */

/* Visually hidden but still read out — bootstrap's own utility loads async here,
   so it cannot be relied on for first paint. */
.mwc-sr {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* Holds the shared arrowhead markers only. */
.mwc-defs {
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
}

.mwc-wrap {
   margin: 34px 0 58px;
   position: relative;
   z-index: 3;
}

.mwc-card {
   background: #fff;
   border: 1px solid var(--pp-line, #e4eaf5);
   border-radius: 18px;
   box-shadow: 0 22px 60px rgba(15, 31, 61, .10);
   overflow: hidden;
}

.mwc-grid {
   display: grid;
   grid-template-columns: 1fr 390px;
   align-items: stretch;
}

.mwc-form {
   padding: 30px 34px 34px;
   min-width: 0;
}

/* ---------- step headings ---------- */
.mwc-step {
   display: flex;
   align-items: center;
   gap: 11px;
   margin: 0 0 16px;
}

.mwc-picker+.mwc-step,
.mwc-dimwrap+.mwc-step,
.mwc-fieldrow+.mwc-step {
   margin-top: 28px;
}

.mwc-step__n {
   flex-shrink: 0;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 700;
   color: #fff;
   background: linear-gradient(120deg, var(--pp-b1, #1a4499), var(--pp-b2, #2f6bd8));
}

.mwc-step__t {
   font-size: 17px;
   font-weight: 700;
   color: var(--pp-ink, #0f1f3d);
   margin: 0;
   line-height: 1.3;
}

/* ---------- shape picker button ---------- */
.mwc-picker {
   display: flex;
   align-items: center;
   gap: 14px;
   width: 100%;
   padding: 12px 16px;
   border: 1px solid #d8e0ef;
   border-radius: 14px;
   background: var(--pp-soft, #f5f8fd);
   text-align: left;
   cursor: pointer;
   transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.mwc-picker:hover {
   border-color: var(--pp-b1, #1a4499);
   background: #fff;
   box-shadow: 0 8px 20px rgba(15, 31, 61, .08);
}

.mwc-picker:focus-visible {
   outline: 2px solid var(--pp-b2, #2f6bd8);
   outline-offset: 2px;
}

.mwc-picker__ico {
   flex-shrink: 0;
   width: 54px;
   height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   background: #fff;
   border: 1px solid var(--pp-line, #e4eaf5);
   color: var(--pp-b1, #1a4499);
}

.mwc-picker__ico svg {
   width: 38px;
   height: 28px;
}

.mwc-picker__txt {
   flex: 1 1 auto;
   min-width: 0;
}

.mwc-picker__k {
   display: block;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #8593ad;
   margin-bottom: 2px;
}

.mwc-picker__v {
   display: block;
   font-size: 17px;
   font-weight: 700;
   color: var(--pp-ink, #0f1f3d);
   line-height: 1.25;
}

.mwc-picker__cta {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 14px;
   border-radius: 999px;
   background: linear-gradient(120deg, var(--pp-b1, #1a4499), var(--pp-b2, #2f6bd8));
   color: #fff;
   font-size: 13px;
   font-weight: 700;
}

.mwc-picker__cta svg {
   width: 15px;
   height: 15px;
}

/* ---------- shape picker dialog ---------- */
body.mwc-modal-open {
   overflow: hidden;
}

.mwc-modal {
   position: fixed;
   inset: 0;
   z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px 16px;
}

.mwc-modal[hidden] {
   display: none;
}

.mwc-modal__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(9, 19, 40, .62);
   backdrop-filter: blur(3px);
}

.mwc-modal__box {
   position: relative;
   width: 100%;
   max-width: 1020px;
   max-height: calc(100vh - 48px);
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 30px 80px rgba(9, 19, 40, .35);
   overflow: hidden;
   animation: mwcPop .22s ease-out;
}

@keyframes mwcPop {
   from {
      opacity: 0;
      transform: translateY(12px) scale(.98);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@media (prefers-reduced-motion:reduce) {
   .mwc-modal__box {
      animation: none;
   }
}

.mwc-modal__head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   padding: 22px 26px 18px;
   border-bottom: 1px solid var(--pp-line, #e4eaf5);
}

.mwc-modal__title {
   font-size: 21px;
   font-weight: 700;
   color: var(--pp-ink, #0f1f3d);
   margin: 0 0 4px;
}

.mwc-modal__sub {
   font-size: 14px;
   color: var(--pp-body, #3a4a63);
   margin: 0;
}

.mwc-modal__close {
   flex-shrink: 0;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--pp-soft, #f5f8fd);
   border: 1px solid var(--pp-line, #e4eaf5);
   color: var(--pp-ink, #0f1f3d);
   cursor: pointer;
   transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.mwc-modal__close:hover {
   background: #c92333;
   border-color: #c92333;
   color: #fff;
}

.mwc-modal__close svg {
   width: 17px;
   height: 17px;
}

.mwc-modal__grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
   gap: 12px;
   padding: 22px 26px 26px;
   overflow-y: auto;
}

/* ---------- shape tiles ---------- */
.mwc-shape {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 12px 10px 12px;
   border: 1px solid var(--pp-line, #e4eaf5);
   border-radius: 13px;
   background: #fff;
   cursor: pointer;
   text-align: center;
   transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.mwc-shape:hover {
   border-color: var(--pp-b2, #2f6bd8);
   transform: translateY(-3px);
   box-shadow: 0 12px 24px rgba(15, 31, 61, .10);
}

.mwc-shape:focus-visible {
   outline: 2px solid var(--pp-b2, #2f6bd8);
   outline-offset: 2px;
}

.mwc-shape__dia {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 108px;
   border-radius: 9px;
   background: var(--pp-soft, #f5f8fd);
   overflow: hidden;
}

.mwc-shape__dia .mwc-pic,
.mwc-shape__dia .mwc-dia {
   width: auto;
   height: 100%;
   max-width: 100%;
   object-fit: contain;
   mix-blend-mode: multiply;
}

.mwc-shape__t {
   font-size: 13px;
   font-weight: 600;
   line-height: 1.3;
   color: var(--pp-body, #3a4a63);
}

.mwc-shape.is-active {
   border-color: var(--pp-b1, #1a4499);
   box-shadow: 0 0 0 2px rgba(26, 68, 153, .16);
}

.mwc-shape.is-active .mwc-shape__dia {
   background: #eaf1ff;
}

.mwc-shape.is-active .mwc-shape__t {
   color: var(--pp-b1, #1a4499);
   font-weight: 700;
}

/* ---------- dimensions step ---------- */
.mwc-dimwrap {
   display: grid;
   grid-template-columns: 208px minmax(0, 1fr);
   gap: 22px;
   align-items: start;
}

.mwc-diagram {
   margin: 0;
   padding: 14px 12px 12px;
   border: 1px solid var(--pp-line, #e4eaf5);
   border-radius: 14px;
   background: var(--pp-soft, #f5f8fd);
   text-align: center;
}

.mwc-diagram__art {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 168px;
   margin-bottom: 10px;
}

.mwc-pic,
.mwc-dia {
   display: block;
   width: auto;
   height: 100%;
   max-width: 100%;
   object-fit: contain;
   mix-blend-mode: multiply;
}

.mwc-diagram__cap {
   font-size: 13px;
   font-weight: 700;
   color: var(--pp-ink, #0f1f3d);
}

.mwc-diagram__tip {
   display: block;
   margin-top: 6px;
   font-size: 12px;
   font-weight: 500;
   line-height: 1.5;
   color: var(--pp-body, #3a4a63);
}

/* drawn fallbacks for shapes with no photograph */
.mwc-dia .ln {
   fill: none;
   stroke: #16233c;
   stroke-width: 1.9;
   stroke-linejoin: round;
   stroke-linecap: round;
}

.mwc-dia .dim {
   fill: none;
   stroke: #c92333;
   stroke-width: 1.2;
}

.mwc-dia .ext {
   fill: none;
   stroke: #c92333;
   stroke-width: .8;
   opacity: .5;
}

.mwc-dia .lead {
   fill: none;
   stroke: #c92333;
   stroke-width: 1.1;
}

.mwc-dia .dot {
   fill: #c92333;
}

.mwc-dia .lbl {
   fill: #c92333;
   font-size: 14px;
   font-weight: 700;
   font-family: inherit;
}

.mwc-dia .note {
   fill: #6b7688;
   font-size: 11.5px;
   font-weight: 600;
   font-family: inherit;
}

/* ---------- fields ---------- */
.mwc-fieldrow {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}

.mwc-dims {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 14px;
   margin-top: 14px;
}

.mwc-field {
   min-width: 0;
}

.mwc-field[hidden],
.mwc-chip[hidden] {
   display: none !important;
}

.mwc-field label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: var(--pp-body, #3a4a63);
   margin: 0 0 6px;
}

.mwc-field label .mwc-hint {
   font-weight: 700;
   color: #c92333;
}

.mwc-field input,
.mwc-field select {
   width: 100%;
   height: 46px;
   padding: 0 13px;
   font-family: inherit;
   font-size: 15px;
   font-weight: 500;
   color: var(--pp-ink, #0f1f3d);
   background: #fff;
   border: 1px solid #d8e0ef;
   border-radius: 10px;
   transition: border-color .2s ease, box-shadow .2s ease;
   -webkit-appearance: none;
   appearance: none;
}

.mwc-field select {
   padding-right: 34px;
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m7 10 5 5 5-5' fill='none' stroke='%235b7099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 18px;
   cursor: pointer;
}

.mwc-field input:focus,
.mwc-field select:focus {
   outline: none;
   border-color: var(--pp-b2, #2f6bd8);
   box-shadow: 0 0 0 3px rgba(47, 107, 216, .14);
}

.mwc-field input::-webkit-outer-spin-button,
.mwc-field input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.mwc-field input[type=number] {
   -moz-appearance: textfield;
}

.mwc-field.has-error input {
   border-color: #d34b58;
   box-shadow: 0 0 0 3px rgba(211, 75, 88, .12);
}

.mwc-err {
   display: none;
   font-size: 12px;
   font-weight: 500;
   color: #c92333;
   margin: 5px 0 0;
}

.mwc-field.has-error .mwc-err {
   display: block;
}

.mwc-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   margin-top: 24px;
}

.mwc-reset {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 44px;
   padding: 0 20px;
   border: 1px solid #d8e0ef;
   border-radius: 999px;
   background: #fff;
   font-size: 14px;
   font-weight: 600;
   color: var(--pp-body, #3a4a63);
   cursor: pointer;
   transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.mwc-reset:hover {
   border-color: var(--pp-b1, #1a4499);
   color: var(--pp-b1, #1a4499);
   background: var(--pp-soft, #f5f8fd);
}

.mwc-reset svg {
   width: 15px;
   height: 15px;
}

.mwc-live {
   font-size: 13px;
   color: #8593ad;
}

/* ---------- result panel ---------- */
.mwc-result {
   background: linear-gradient(150deg, #1b3d87 0%, #12295c 100%);
   color: #fff;
   padding: 30px 28px 28px;
   display: flex;
   flex-direction: column;
   position: relative;
   overflow: hidden;
}

.mwc-result::after {
   content: "";
   position: absolute;
   right: -70px;
   top: -70px;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .05);
   pointer-events: none;
}

.mwc-result__inner {
   position: relative;
   z-index: 1;
}

.mwc-result__label {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .68);
   margin: 0 0 10px;
}

.mwc-result__big {
   display: flex;
   align-items: baseline;
   gap: 8px;
   flex-wrap: wrap;
   margin: 0 0 4px;
}

.mwc-result__num {
   font-family: var(--tj-ff-heading, inherit);
   font-size: 46px;
   font-weight: 800;
   line-height: 1.05;
   letter-spacing: -.02em;
   color: #fff;
   word-break: break-word;
}

.mwc-result__unit {
   font-size: 19px;
   font-weight: 600;
   color: rgba(255, 255, 255, .8);
}

.mwc-result__sub {
   font-size: 13px;
   color: rgba(255, 255, 255, .7);
   margin: 0 0 20px;
}

.mwc-chips {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   margin: 0 0 20px;
}

.mwc-chip {
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 10px;
   padding: 10px 12px;
}

.mwc-chip__k {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .05em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .6);
   margin-bottom: 3px;
}

.mwc-chip__v {
   display: block;
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   word-break: break-word;
}

.mwc-formula {
   border-top: 1px solid rgba(255, 255, 255, .14);
   padding-top: 16px;
   margin-bottom: 18px;
}

.mwc-formula dt {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .05em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55);
   margin-bottom: 3px;
}

.mwc-formula dd {
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   margin: 0 0 11px;
}

.mwc-formula dd:last-child {
   margin-bottom: 0;
}

.mwc-note {
   font-size: 12px;
   line-height: 1.6;
   color: rgba(255, 255, 255, .6);
   margin: 0 0 18px;
}

.mwc-cta {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: auto;
   position: relative;
   z-index: 1;
}

.mwc-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   height: 46px;
   border-radius: 999px;
   font-size: 15px;
   font-weight: 700;
   text-align: center;
   transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}

.mwc-btn svg {
   width: 17px;
   height: 17px;
   flex-shrink: 0;
}

.mwc-btn--solid {
   background: #c92333;
   color: #fff;
}

.mwc-btn--solid:hover {
   background: #a81d2b;
   color: #fff;
   transform: translateY(-2px);
}

.mwc-btn--ghost {
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .28);
   color: #fff;
}

.mwc-btn--ghost:hover {
   background: rgba(255, 255, 255, .15);
   color: #fff;
   transform: translateY(-2px);
}

.mwc-result.is-empty .mwc-result__num {
   color: rgba(255, 255, 255, .45);
}

/* ---------- intro band ---------- */
.mwc-intro {
   position: relative;
   padding: 22px 26px 22px 30px;
   background: var(--pp-soft, #f5f8fd);
   border: 1px solid var(--pp-line, #e4eaf5);
   border-radius: 14px;
   overflow: hidden;
}

.mwc-intro__bar {
   position: absolute;
   inset-inline-start: 0;
   top: 0;
   bottom: 0;
   width: 5px;
   background: linear-gradient(180deg, var(--pp-b1, #1a4499), var(--pp-b2, #2f6bd8));
}

.mwc-intro p {
   margin: 0;
   font-size: 16.5px;
   line-height: 1.75;
   color: var(--pp-body, #3a4a63);
}

/* ---------- how-to step flow ---------- */
.mwc-how {
   list-style: none;
   margin: 26px 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 16px;
}

.mwc-howcard {
   position: relative;
   padding: 24px 20px 22px;
   background: #fff;
   border: 1px solid var(--pp-line, #e4eaf5);
   border-radius: 14px;
   transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.mwc-howcard:hover {
   border-color: #b9cbee;
   transform: translateY(-4px);
   box-shadow: 0 16px 34px rgba(15, 31, 61, .09);
}

/* connector chevron between cards */
.mwc-howcard::after {
   content: "";
   position: absolute;
   top: 50px;
   inset-inline-end: -12px;
   width: 9px;
   height: 9px;
   border-top: 2px solid #c3d1ea;
   border-right: 2px solid #c3d1ea;
   transform: rotate(45deg);
   z-index: 1;
}

.mwc-howcard:last-child::after {
   display: none;
}

.mwc-howcard__n {
   position: absolute;
   top: 14px;
   inset-inline-end: 16px;
   font-family: var(--tj-ff-heading, inherit);
   font-size: 32px;
   font-weight: 800;
   line-height: 1;
   letter-spacing: -.02em;
   color: #eaf0fa;
}

.mwc-howcard__ico {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   margin-bottom: 15px;
   border-radius: 12px;
   background: linear-gradient(120deg, var(--pp-b1, #1a4499), var(--pp-b2, #2f6bd8));
   color: #fff;
   box-shadow: 0 8px 18px rgba(26, 68, 153, .22);
}

.mwc-howcard__ico svg {
   width: 23px;
   height: 23px;
}

.mwc-howcard__t {
   position: relative;
   z-index: 1;
   font-size: 17px;
   font-weight: 700;
   color: var(--pp-ink, #0f1f3d);
   margin: 0 0 7px;
}

.mwc-howcard__d {
   font-size: 14.5px;
   line-height: 1.65;
   color: var(--pp-body, #3a4a63);
   margin: 0;
}

/* ---------- formula callout ---------- */
.mwc-eq {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 300px;
   gap: 30px;
   align-items: center;
   margin-top: 30px;
   padding: 30px 34px;
   border-radius: 16px;
   background: linear-gradient(150deg, #1b3d87 0%, #12295c 100%);
   color: #fff;
   position: relative;
   overflow: hidden;
}

.mwc-eq::after {
   content: "";
   position: absolute;
   right: -60px;
   bottom: -80px;
   width: 240px;
   height: 240px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .05);
   pointer-events: none;
}

.mwc-eq__main {
   position: relative;
   z-index: 1;
   min-width: 0;
}

.mwc-eq__k {
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .62);
   margin: 0 0 12px;
}

.mwc-eq__f {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   margin: 0 0 14px;
   font-family: var(--tj-ff-heading, inherit);
   font-size: 31px;
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -.01em;
}

.mwc-eq__op {
   color: #ff8a95;
   font-weight: 700;
}

.mwc-eq__note {
   font-size: 14.5px;
   line-height: 1.7;
   color: rgba(255, 255, 255, .74);
   margin: 0;
   max-width: 56ch;
}

.mwc-eq__chips {
   position: relative;
   z-index: 1;
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 10px;
}

.mwc-eq__chips li {
   padding: 11px 14px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .14);
   font-size: 13px;
   line-height: 1.5;
   color: rgba(255, 255, 255, .74);
}

.mwc-eq__chips span {
   display: block;
   font-size: 14.5px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 2px;
}

/* ---------- copy blocks ---------- */
.mwc-prose p {
   font-size: 16px;
   line-height: 1.75;
   color: var(--pp-body, #3a4a63);
   margin: 0 0 16px;
}

.mwc-prose p:last-child {
   margin-bottom: 0;
}

.mwc-prose h3 {
   font-size: 21px;
   font-weight: 700;
   color: var(--pp-ink, #0f1f3d);
   margin: 26px 0 12px;
}

.mwc-benefits {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
   gap: 16px;
   margin-top: 24px;
   list-style: none;
   padding: 0;
}

.mwc-benefit {
   display: flex;
   gap: 13px;
   padding: 20px;
   background: var(--pp-soft, #f5f8fd);
   border: 1px solid var(--pp-line, #e4eaf5);
   border-radius: 14px;
   transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.mwc-benefit:hover {
   border-color: #b9cbee;
   transform: translateY(-3px);
   box-shadow: 0 12px 26px rgba(15, 31, 61, .07);
}

.mwc-benefit__ico {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(120deg, var(--pp-b1, #1a4499), var(--pp-b2, #2f6bd8));
   color: #fff;
}

.mwc-benefit__ico svg {
   width: 20px;
   height: 20px;
}

.mwc-benefit__t {
   font-size: 16px;
   font-weight: 700;
   color: var(--pp-ink, #0f1f3d);
   margin: 0 0 5px;
}

.mwc-benefit__d {
   font-size: 14.5px;
   line-height: 1.65;
   color: var(--pp-body, #3a4a63);
   margin: 0;
}

/* ---------- formula reference table ---------- */
.mwc-tablewrap {
   margin-top: 24px;
   overflow-x: auto;
   border: 1px solid var(--pp-line, #e4eaf5);
   border-radius: 14px;
}

.mwc-table {
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 15px;
}

.mwc-table th,
.mwc-table td {
   padding: 13px 18px;
   text-align: left;
   border-bottom: 1px solid var(--pp-line, #e4eaf5);
}

.mwc-table thead th {
   background: var(--pp-soft, #f5f8fd);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--pp-ink, #0f1f3d);
}

.mwc-table tbody tr:last-child td {
   border-bottom: 0;
}

.mwc-table td:first-child {
   font-weight: 600;
   color: var(--pp-ink, #0f1f3d);
   white-space: nowrap;
}

.mwc-table td:nth-child(2) {
   font-family: var(--bs-font-monospace, monospace);
   color: var(--pp-b1, #1a4499);
   white-space: nowrap;
}

/* ---------- no-JS ---------- */
.mwc-nojs {
   margin: 0 0 18px;
   padding: 16px 20px;
   background: #fff4f4;
   border: 1px solid #f3c9ce;
   border-radius: 12px;
   font-size: 14.5px;
   color: #8f2530;
}

/* ---------- responsive ---------- */
@media (max-width:1199px) {
   .mwc-grid {
      grid-template-columns: 1fr 340px;
   }

   .mwc-form {
      padding: 26px 26px 30px;
   }

   .mwc-result {
      padding: 26px 22px 24px;
   }

   .mwc-result__num {
      font-size: 40px;
   }

   .mwc-dimwrap {
      grid-template-columns: 180px minmax(0, 1fr);
      gap: 18px;
   }

   .mwc-diagram__art {
      height: 146px;
   }
}

@media (max-width:1199px) {
   .mwc-how {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
   }

   /* chevrons only make sense in an unbroken row */
   .mwc-howcard::after {
      display: none;
   }

   .mwc-eq {
      grid-template-columns: 1fr;
      gap: 22px;
   }

   .mwc-eq__chips {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width:991px) {
   .mwc-wrap {
      margin: 28px 0 46px;
   }

   .mwc-grid {
      grid-template-columns: 1fr;
   }

   .mwc-result {
      border-radius: 0;
   }
}

@media (max-width:767px) {
   .mwc-how {
      grid-template-columns: 1fr;
   }

   .mwc-eq {
      padding: 24px 20px;
   }

   .mwc-eq__f {
      font-size: 25px;
      gap: 9px;
   }

   .mwc-eq__chips {
      grid-template-columns: 1fr;
   }

   .mwc-intro {
      padding: 18px 18px 18px 24px;
   }

   .mwc-intro p {
      font-size: 15.5px;
   }
}

@media (max-width:767px) {
   .mwc-dimwrap {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .mwc-diagram__art {
      height: 132px;
   }

   .mwc-modal {
      padding: 0;
   }

   .mwc-modal__box {
      max-width: none;
      max-height: 100vh;
      height: 100%;
      border-radius: 0;
   }

   .mwc-modal__grid {
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      padding: 16px 18px 24px;
   }

   .mwc-shape__dia {
      height: 88px;
   }
}

@media (max-width:575px) {
   .mwc-form {
      padding: 22px 18px 26px;
   }

   .mwc-result {
      padding: 24px 18px 22px;
   }

   .mwc-picker {
      flex-wrap: wrap;
      gap: 10px;
      padding: 12px;
   }

   .mwc-picker__cta {
      width: 100%;
      justify-content: center;
   }

   .mwc-fieldrow {
      grid-template-columns: 1fr;
   }

   .mwc-dims {
      grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
      gap: 12px;
   }

   .mwc-result__num {
      font-size: 36px;
   }

   .mwc-chips {
      gap: 8px;
   }

   .mwc-step__t {
      font-size: 16px;
   }

   .mwc-modal__head {
      padding: 18px 18px 14px;
   }

   .mwc-modal__title {
      font-size: 18px;
   }
}