/* Liquid glass layer: translucent surfaces, refracted highlights and restrained motion. */
:root {
  --ink: #f0fbf7;
  --muted: #a8c3bd;
  --line: rgba(205, 247, 231, .15);
  --glass: rgba(214, 250, 235, .075);
  --glass-strong: rgba(213, 250, 236, .105);
  --mint-light: #a8f3d3;
  --coral-light: #ffc8a9;
  color: var(--ink);
  background: #071f27;
  color-scheme: dark;
}
html { background: #071f27; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse 44% 28% at 93% 6%, rgba(68, 166, 144, .29), transparent 85%),
    radial-gradient(ellipse 45% 25% at 13% 46%, rgba(47, 104, 137, .24), transparent 85%),
    radial-gradient(ellipse 33% 22% at 84% 84%, rgba(89, 70, 149, .17), transparent 88%),
    #071f27;
  background-attachment: fixed;
}
body::before {
  content: '';
  position: fixed;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 24%, rgba(76, 238, 185, .14), transparent 23%),
    radial-gradient(circle at 24% 69%, rgba(100, 153, 228, .13), transparent 25%);
  filter: blur(50px);
  animation: ambientFlow 19s ease-in-out infinite alternate;
}
.app-shell { position: relative; z-index: 1; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7, 32, 40, .70);
  border-bottom: 1px solid rgba(222, 255, 241, .15);
  box-shadow: 0 14px 40px rgba(0, 10, 16, .19), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.brand-mark { border-color: #bafbe2; box-shadow: 0 0 22px rgba(118,244,194,.17); }
.brand-mark:before { border-color: #bafbe2; }
.brand-mark span { background: #ffcbab; box-shadow: 0 0 10px #ffc9a7; }
.brand small, .privacy-tag { color: #b8d8d0; }
.topbar .button-outline {
  color: #f3fff9;
  background: rgba(219, 252, 238, .075);
  border: 1px solid rgba(224, 255, 242, .25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.topbar .button-outline:hover { background: rgba(225, 255, 243, .16); box-shadow: 0 8px 24px rgba(7, 35, 33, .18), inset 0 1px 0 rgba(255,255,255,.2); }
.layout { border: 0; }
.sidebar {
  background: linear-gradient(160deg, rgba(28, 68, 72, .40), rgba(12, 41, 52, .38) 60%, rgba(20, 45, 62, .35));
  border-right: 1px solid rgba(219, 252, 238, .12);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}
.sidebar-head h1, .sidebar-section h2 { color: #f2fff9; }
.sidebar-head p:last-child, .sidebar-section p, .sidebar-foot { color: #a9c3c2; }
.eyebrow { color: #8be3c6; }
.demo-banner { color: #ffd0b2; background: rgba(210, 119, 79, .15); border-color: rgba(255, 196, 153, .27); }
.sidebar-section, .sidebar-foot { border-top-color: rgba(217, 249, 239, .13); }
.case-card {
  position: relative;
  overflow: hidden;
  color: #dbeee9;
  background: rgba(218, 255, 241, .065);
  border: 1px solid rgba(212, 255, 236, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 25px rgba(0,18,24,.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.case-card strong { color: #f3fff9; }
.case-card small { color: #a5c2b9; }
.case-card:hover { color: #fff; background: rgba(218, 255, 241, .12); border-color: rgba(178, 255, 218, .46); box-shadow: 0 15px 28px rgba(0,18,24,.25), inset 0 1px 0 rgba(255,255,255,.17); }
.case-card.active { background: linear-gradient(125deg, rgba(124, 228, 185, .25), rgba(95, 195, 205, .12)); border-color: rgba(168, 255, 219, .63); box-shadow: inset 3px 0 0 #a4f3ce, inset 0 1px 0 rgba(255,255,255,.23), 0 12px 30px rgba(17, 123, 97, .15); }
.button { border: 1px solid transparent; }
.button-primary {
  color: #0a292c;
  background: linear-gradient(115deg, #a9f2ce, #60d5ba 52%, #91f4d7);
  background-size: 180% 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.63), 0 8px 24px rgba(73, 220, 170, .19);
}
.button-primary:hover { color: #062b2a; background-position: 100% 0; box-shadow: 0 10px 30px rgba(73,220,170,.32), inset 0 1px 0 rgba(255,255,255,.8); }
.button-soft { color: #d6fff0; background: rgba(146, 238, 198, .12); border-color: rgba(172, 255, 216, .19); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.button-soft:hover { color: #f8fff9; background: rgba(146,238,198,.22); }
.button-outline { color: #dbf5e9; background: rgba(220,255,240,.075); border-color: rgba(213,252,233,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.button-outline:hover { color: #fff; background: rgba(220,255,240,.15); border-color: rgba(213,252,233,.38); }
.button-text { color: #aaf0d1; }
.sample-links button { color: #a8ebd5; text-underline-offset: 3px; }
.workspace { color: #eaf9f2; }
.experience-banner {
  color: #f5fff9;
  background:
    radial-gradient(circle at 83% 4%, rgba(171, 244, 219, .28), transparent 35%) padding-box,
    linear-gradient(112deg, rgba(32, 110, 107, .70), rgba(22, 88, 101, .52) 55%, rgba(49, 115, 131, .43)) padding-box,
    conic-gradient(from var(--edge-angle), rgba(197,255,226,.15), rgba(207,255,238,.70), rgba(111,232,210,.34), rgba(255,210,186,.62), rgba(197,255,226,.15)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -28px 70px rgba(11,50,57,.20), 0 28px 65px rgba(1,19,28,.30), 0 0 55px rgba(75,228,173,.09);
  backdrop-filter: blur(27px) saturate(175%);
  -webkit-backdrop-filter: blur(27px) saturate(175%);
  animation: surfaceEnter .55s cubic-bezier(.22,1,.36,1) both, edgeOrbit 16s linear infinite;
}
.experience-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--light-x, 74%) var(--light-y, 22%), rgba(238,255,245,.31), transparent 70%);
  opacity: .56;
  transition: opacity .55s;
}
.experience-banner:hover::before { opacity: 1; }
.experience-banner::after { border-color: rgba(221,255,242,.20); box-shadow: 0 0 0 60px rgba(228,255,245,.025), 0 0 0 124px rgba(228,255,245,.018); }
.experience-banner .eyebrow { color: #b5f8d7; }
.experience-title em { color: #ffd4b8; text-shadow: 0 0 28px rgba(255,182,151,.30); }
.experience-subtitle { color: #d2eee5; }
.experience-steps b { color: #c4ffe4; border-color: rgba(224,255,239,.42); background: rgba(229,255,243,.085); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.experience-steps span { color: #e2f8ee; }
.workspace-head h2, .comparison-head h3, .panel-title h3, .compact-panel h3 { color: #f1fff9; }
.workspace-head .muted, .muted { color: #aec7c2; }
.notice { border: 1px solid rgba(237, 245, 211, .18); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.notice.warn { color: #ffe2c3; background: rgba(164, 106, 65, .21); border-color: rgba(255, 202, 153, .27); }
.notice.success { color: #d1ffe3; background: rgba(48, 147, 115, .19); border-color: rgba(169, 255, 206, .22); }
.notice.error { color: #ffd7d1; background: rgba(168, 72, 75, .24); border-color: rgba(255, 169, 163, .28); }
.metric, .comparison, .panel {
  position: relative;
  color: #ebfbf4;
  background: linear-gradient(140deg, rgba(224,255,244,.115), rgba(154,214,209,.055) 47%, rgba(145,183,220,.05));
  border: 1px solid rgba(224, 255, 243, .20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(167,230,206,.06), 0 18px 45px rgba(0,13,22,.18);
  backdrop-filter: blur(25px) saturate(155%);
  -webkit-backdrop-filter: blur(25px) saturate(155%);
}
.metric::after, .comparison::after, .panel::after, .case-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(310px circle at var(--light-x, 50%) var(--light-y, 0%), rgba(235,255,245,.18), transparent 75%);
  opacity: 0;
  transition: opacity .4s ease;
}
.metric:hover::after, .comparison:hover::after, .panel:hover::after, .case-card:hover::after { opacity: 1; }
.metric { box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 14px 32px rgba(0,12,19,.16); }
.metric::before { background: #ffd0ad; box-shadow: 0 0 18px rgba(255,198,162,.55); }
.metric-scenario::before { background: #9ff8d2; box-shadow: 0 0 18px rgba(142,255,210,.64); }
.metric-delta::before { background: #9bdbe8; box-shadow: 0 0 18px rgba(139,221,234,.48); }
.metric-cost::before { background: #cfcbf2; box-shadow: 0 0 18px rgba(206,201,242,.52); }
.metric span { color: #bad4ca; }
.metric strong { color: #f4fff9; text-shadow: 0 1px 19px rgba(196,255,235,.11); }
.metric small { color: #9ebbb1; }
.metric-scenario {
  background:
    linear-gradient(145deg, rgba(25,104,91,.90), rgba(27,84,88,.91) 53%, rgba(25,68,79,.91)) padding-box,
    conic-gradient(from var(--edge-angle), rgba(179,255,222,.22), rgba(210,255,237,.77), rgba(106,244,201,.19), rgba(255,221,199,.52), rgba(179,255,222,.22)) border-box;
  border-color: transparent;
  animation: surfaceEnter .5s cubic-bezier(.22,1,.36,1) .05s both, edgeOrbit 13s linear infinite;
}
.metric-scenario strong, .metric-delta strong { color: #aff4d9; }
.comparison { background: linear-gradient(130deg, rgba(218,255,242,.105), rgba(147,213,217,.055)); }
.drivers { border-left-color: rgba(226,255,243,.16); }
.driver-row { border-bottom-color: rgba(226,255,243,.11); }
.driver-rank { color: #92e9c7; }
.driver-name { color: #c5e1d8; }
.driver-row strong { color: #edfff6; }
.driver-row small { color: #a9c8bb; }
.insight-pill { color: #c9e6da; background: rgba(220,255,239,.11); border: 1px solid rgba(213,255,234,.14); }
.insight-pill[data-direction='down'] { color: #baffdc; background: rgba(85,204,143,.22); border-color: rgba(160,255,197,.27); }
.insight-pill[data-direction='up'], .insight-pill[data-direction='incomplete'] { color: #ffd6b8; background: rgba(210,121,84,.20); border-color: rgba(255,197,157,.23); }
.bar-row { color: #b9d4cb; }
.bar-row b { color: #f4fff9; }
.bar-track { background: rgba(1,30,38,.52); box-shadow: inset 0 1px 5px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.08); }
.bar-base { background: linear-gradient(90deg, #eaa47f, #ffcfac, #eaa47f); box-shadow: 0 0 17px rgba(250,175,128,.38); }
.bar-scenario { background: linear-gradient(100deg, #3ecbaa, #b8ffe0 52%, #3ecbaa); background-size: 220% 100%; box-shadow: 0 0 19px rgba(91,239,185,.4); animation: barReveal .8s cubic-bezier(.22,1,.36,1) both, liquidCurrent 7s ease-in-out 1s infinite; }
.panel-intro { color: #b0cdc1; }
.scroll-hint, .table-footer, .boundary-note { color: #9dbab2; }
.table-footer { border-top-color: rgba(226,255,243,.13); }
.items-table th { color: #b9e7d3; background: rgba(152, 245, 210, .10); border-bottom: 1px solid rgba(222,255,240,.15); }
.items-table td { color: #d8ece5; border-bottom-color: rgba(224,255,243,.10); }
.items-table tbody tr:hover { background: rgba(160,255,220,.07); }
.item-name { color: #f4fff9; }
.item-meta { color: #9bbcb1; }
.items-table td.number { color: #effff7; }
.pending { color: #ffc4a2 !important; }
.items-table input, .items-table select, .module-grid input {
  color: #f0fff7;
  background: rgba(4, 36, 43, .50);
  border: 1px solid rgba(207, 250, 229, .21);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.13), 0 1px 0 rgba(255,255,255,.05);
  color-scheme: dark;
}
.items-table select option { color: #f2fff9; background: #12373d; }
input::placeholder { color: #96b1aa; opacity: 1; }
.items-table input:focus, .items-table select:focus, .module-grid input:focus { background: rgba(10, 54, 59, .82); border-color: #a4f6d0; box-shadow: 0 0 0 3px rgba(133,255,202,.17), 0 0 16px rgba(133,255,202,.10); }
.module-grid label { color: #c8e3d9; }
.subtle-tag { color: #bbdbd0; background: rgba(220,255,239,.08); border-color: rgba(210,250,234,.16); }
.compact-panel p:last-child, .compact-panel #evidence-detail { color: #bad5cb; }
.evidence-pill { color: #c4fbe2; background: rgba(106,222,170,.17); border: 1px solid rgba(146,251,196,.15); }
.evidence-pill.synthetic { color: #ffd8bd; background: rgba(230,150,108,.17); border-color: rgba(255,193,153,.16); }
.table-scroll { scrollbar-color: rgba(148,235,200,.43) rgba(0,36,43,.30); scrollbar-width: thin; }
@keyframes ambientFlow { from { transform: translate3d(-2%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.09); } }
@keyframes liquidCurrent { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@property --edge-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes edgeOrbit { to { --edge-angle: 360deg; } }
@media (max-width: 1190px) { .drivers { border-top-color: rgba(226,255,243,.16); } }
@media (max-width: 720px) {
  .sidebar { border-right: 0; border-bottom: 1px solid rgba(219,252,238,.15); }
  .metric, .comparison, .panel, .experience-banner { backdrop-filter: blur(17px) saturate(145%); -webkit-backdrop-filter: blur(17px) saturate(145%); }
  .topbar { backdrop-filter: blur(17px) saturate(145%); -webkit-backdrop-filter: blur(17px) saturate(145%); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .bar-scenario { animation: none; }
  .experience-banner, .metric-scenario { animation: none; }
  .metric::after, .comparison::after, .panel::after, .case-card::after, .experience-banner::before { transition: none; }
}

/* Multi-specialty discovery and plain-language onboarding. */
.case-filter-wrap { display: grid; gap: 7px; }
.case-filter-wrap label { color: #cbe6dc; font-size: 11px; font-weight: 750; }
.case-filter-wrap select {
  width: 100%; padding: 10px 12px; border-radius: 11px;
  color: #f3fff9; background: rgba(3, 32, 40, .55);
  border: 1px solid rgba(211, 250, 231, .26);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.16);
  color-scheme: dark;
}
.case-filter-wrap select:focus-visible { outline: 3px solid #b1f0d2; outline-offset: 2px; }
.case-filter-wrap span { color: #a5c7ba; font-size: 10px; }
.case-list { max-height: 500px; overflow-y: auto; padding: 3px 5px 5px 0; scrollbar-width: thin; scrollbar-color: rgba(154,234,203,.45) transparent; }
.case-scroll-hint { margin: -15px 0 0; color: #a5c7ba; font-size: 10px; }
.case-scroll-hint[hidden] { display: none; }
.case-card { flex: 0 0 auto; }
.case-branch { display: block; margin-bottom: 6px; color: #a5eccd; font-size: 10px; font-weight: 750; letter-spacing: .045em; }
.case-card.active .case-branch { color: #cbffe0; }
.quick-guide {
  display: grid; grid-template-columns: minmax(145px,.85fr) repeat(3,minmax(0,1fr));
  gap: 12px; margin: 0 0 25px;
}
.guide-intro, .guide-step {
  min-width: 0; min-height: 137px; padding: 17px 18px;
  background: linear-gradient(140deg, rgba(226,255,243,.10), rgba(151,213,216,.05));
  border: 1px solid rgba(223,255,241,.17); border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 25px rgba(0,14,21,.11);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.guide-intro { display: flex; flex-direction: column; justify-content: center; }
.guide-intro h2 { margin: 8px 0 0; color: #f3fff9; font: 400 24px/1.1 Georgia,'Times New Roman',serif; letter-spacing: -.025em; }
.guide-step { display: flex; align-items: flex-start; gap: 11px; }
.guide-step > b { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(169,255,216,.32); border-radius: 50%; color: #a7f3d0; font-size: 10px; }
.guide-step strong { color: #ebfff5; font-size: 13px; }
.guide-step p { margin: 7px 0 0; color: #b0d0c5; font-size: 12px; line-height: 1.46; }
@media (max-width: 1300px) { .quick-guide { grid-template-columns: repeat(2,minmax(0,1fr)); } .guide-intro,.guide-step { min-height: 112px; } }
@media (max-width: 720px) {
  .case-list { max-height: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 9px; }
  .case-scroll-hint { display: none; }
  .quick-guide { gap: 8px; margin-bottom: 23px; }
  .guide-intro,.guide-step { min-height: 108px; padding: 14px; }
}
@media (max-width: 430px) {
  .quick-guide { grid-template-columns: 1fr; }
  .guide-intro { min-height: auto; padding: 14px 16px; }
  .guide-intro h2 { font-size: 22px; margin-top: 5px; }
  .guide-step { min-height: auto; padding: 13px 15px; }
}

/* Product cards keep the count and recalculated result together. */
.product-editor-note {
  margin: -6px 0 16px; padding: 10px 13px;
  color: #cce8dd; font-size: 12px; line-height: 1.5;
  background: rgba(142,232,192,.075); border: 1px solid rgba(184,247,216,.16); border-radius: 11px;
}
.product-editor-note strong { color: #bdffdd; }
.product-list { display: grid; gap: 9px; }
.product-row {
  display: grid; grid-template-columns: minmax(200px,.78fr) minmax(0,1.4fr); gap: 17px;
  align-items: stretch; min-width: 0; padding: 15px 17px;
  border: 1px solid rgba(213,251,234,.13); border-radius: 13px;
  background: linear-gradient(125deg, rgba(208,255,234,.065), rgba(167,214,230,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.product-row:hover { border-color: rgba(179,253,218,.33); background: rgba(183,247,218,.085); }
.product-row.changed { border-color: rgba(164,255,208,.43); background: linear-gradient(115deg, rgba(110,218,173,.12), rgba(110,210,220,.055)); box-shadow: inset 3px 0 0 #96f5ca, 0 8px 20px rgba(0,25,31,.13); }
.product-original { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-right: 16px; border-right: 1px solid rgba(221,255,241,.11); }
.product-kicker, .product-control > span, .product-new-impact > span { color: #9cddc5; font-size: 10px; font-weight: 800; letter-spacing: .10em; }
.product-original strong { color: #f1fff8; font-size: 14px; line-height: 1.25; margin: 7px 0 4px; }
.product-original > small { color: #9ebcb3; font-size: 10px; }
.product-original p { margin: 9px 0 0; color: #c2dcd1; font-size: 11px; line-height: 1.4; }
.product-original p b { color: #f1fff7; font-weight: 750; }
.product-unused { width: max-content; margin-top: 7px; padding: 4px 7px; border-radius: 99px; background: rgba(252,202,159,.13); color: #ffd4ae; font-size: 10px; }
.product-scenario { display: grid; grid-template-columns: minmax(112px,.75fr) minmax(160px,1fr) auto; gap: 16px; align-items: center; min-width: 0; }
.product-control { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.product-control select, .product-control input {
  display: block; width: 100%; min-width: 0; height: 40px;
  padding: 8px 10px; border: 1px solid rgba(191,247,220,.24); border-radius: 9px;
  color: #f1fff8; background: rgba(4,36,43,.62); font: inherit; font-size: 12px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.14); color-scheme: dark;
}
.product-control select option { color: #f1fff8; background: #12373d; }
.product-control select:focus, .product-control input:focus { outline: none; border-color: #a3f4d0; box-shadow: 0 0 0 3px rgba(135,255,201,.15); }
.product-control input[aria-invalid='true'] { border-color: #f3a396; }
.product-control > small, .product-new-impact > small { color: #a5c5b9; font-size: 10px; line-height: 1.3; }
.product-row.added { border-color: rgba(154,231,204,.35); background: linear-gradient(115deg, rgba(110,218,173,.13), rgba(110,210,220,.05)); }
.remove-material { align-self: center; border: 1px solid rgba(247,191,160,.3); border-radius: 8px; padding: 8px 10px; color: #ffd2b8; background: rgba(244,171,130,.08); font-size: 11px; font-weight: 700; }
.remove-material:hover { background: rgba(244,171,130,.16); }
.product-new-impact { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.product-new-impact > div { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.product-new-impact output { color: #b4ffe0; font-size: 25px; font-weight: 760; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.28; }
.product-new-impact > div small { color: #aed0c2; font-size: 10px; }
.product-new-impact em { display: block; width: max-content; max-width: 100%; margin-top: 2px; padding: 4px 7px; border-radius: 99px; color: #b6d5c8; background: rgba(198,245,220,.08); font-size: 10px; font-style: normal; line-height: 1.25; }
.product-new-impact em[data-direction='up'] { color: #ffd1b4; background: rgba(248,172,120,.15); }
.product-new-impact em[data-direction='down'] { color: #b5ffda; background: rgba(117,230,166,.16); }
.empty-products { padding: 25px; color: #b4d5c8; background: rgba(205,255,231,.07); border-radius: 11px; }
.add-material { margin-top: 20px; padding: 17px; border: 1px solid rgba(159,239,204,.25); border-radius: 14px; background: linear-gradient(115deg, rgba(136,227,188,.12), rgba(89,173,198,.07)); }
.add-material[hidden] { display: none; }
.add-material-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.add-material-heading h4 { margin: 5px 0 0; color: #f0fff8; font-size: 17px; }
.add-material-heading > p, .add-material-note { margin: 0; color: #bdd8ca; font-size: 11px; line-height: 1.45; }
.add-material-fields { display: grid; grid-template-columns: minmax(180px,1fr) 115px auto; gap: 12px; align-items: end; }
.add-material-fields .button { height: 40px; min-width: 94px; }
.add-material-note { margin-top: 13px; }
@media (max-width: 1200px) {
  .product-row { grid-template-columns: 1fr; gap: 11px; }
  .product-original { border-right: 0; border-bottom: 1px solid rgba(221,255,241,.11); padding: 0 0 11px; }
}
@media (max-width: 720px) {
  .product-row { padding: 15px; }
  .product-scenario { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 11px; }
  .remove-material { grid-column: 1 / -1; justify-self: start; }
  .add-material-heading { display: block; }
  .add-material-heading > p { margin-top: 7px; }
  .add-material-fields { grid-template-columns: minmax(0,1fr) 90px; }
  .add-material-fields .button { grid-column: 1 / -1; }
  .product-new-impact output { font-size: 24px; }
}