/* Homepage view hierarchy. The same controls and engine serve both modes. */
.home #calculator[data-ui-mode="quick"] .advanced-only,
.home #calculator[data-ui-mode="advanced"] .quick-only {
  display: none !important;
}
.home #calculator [hidden] {
  display: none !important;
}
.home .calculator-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 16px;
  flex-wrap: wrap;
}
.home #calculator .calculator-heading h2 {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  margin: 0;
  font: 700 24px/1.3 var(--font-display);
  letter-spacing: -0.6px;
}
.home .estimate-mode {
  display: flex;
  border: 1px solid #91afa6;
  padding: 3px;
  gap: 3px;
  border-radius: 5px;
  background: #fff;
}
.home .estimate-mode button {
  min-height: 40px;
  padding: 8px 15px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #334d46;
  font: 600 13px/1.4 var(--font-ui);
  cursor: pointer;
}
.home .estimate-mode button[aria-pressed="true"] {
  color: #fff;
  background: #123e32;
}
.home .calculator-layout {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid #ccdcda;
  border-radius: 6px;
  background: #fff;
  overflow: visible;
  min-height: 0;
  align-items: start;
}
.home .calculator-inputs {
  padding: 24px;
  min-width: 0;
  border-radius: 6px 0 0 6px;
}
.home .cost-summary {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 24px;
  border-left: 1px solid #ccdcda;
  border-radius: 0 6px 6px 0;
  background: #f0f8f5;
}
.home #calculator .sec-label[data-step] {
  font: 700 11px/1.5 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 6px;
}
.home #calculator .sec-label[data-step]::before {
  display: none;
}
.home .models {
  gap: 8px;
  margin-bottom: 12px;
  grid-auto-rows: 1fr;
}
.home .model {
  border-radius: 4px;
  min-height: 128px;
  padding: 12px;
  height: auto;
  box-shadow: none;
}
.home .model b,
.home .model b.model-title {
  font-size: 13px;
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}
.home .model small.model-rates {
  font-size: 11px;
  line-height: 1.6;
}
.home .model-rate .money {
  font-size: 11px;
}
.home .model.active {
  background: #103e31;
  border: 1px solid #103e31;
  color: #fff;
}
.home .model-rate-unit {
  font-size: 9px;
}
.home .processing-controls {
  margin: 20px 0;
}
.home .tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.home .tier {
  flex: 1 1 70px;
  min-height: 38px;
  height: auto;
  padding: 7px;
  border-radius: 3px;
  box-shadow: none;
  background: #fff;
}
.home .tier b {
  font-size: 12px;
}
.home .tier small {
  display: none;
}
.home .tier.active {
  background: #d9eee4;
  border: 1px solid #27785a;
  color: #133d30;
}
.home .tier-help,
.home .preset-help {
  height: auto;
  margin: 7px 0;
}
.home .tier-help > summary,
.home .preset-help > summary {
  position: static;
  font-size: 11px;
  min-height: 30px;
  text-align: left;
}
.home .processing-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font: 400 12px/1.5 var(--font-ui);
  margin: 8px 0 14px;
  color: #3f5a51;
}
.home .text-button {
  padding: 4px 0;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: #126344;
  font: 600 12px/1.4 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.home .calculator-presets {
  padding: 0;
  margin: 0 0 18px;
  background: none;
  grid-column: auto;
  grid-row: auto;
}
.home .calculator-presets > summary {
  cursor: pointer;
  font: 600 12px/1.5 var(--font-ui);
  padding: 10px 0;
  border-block: 1px solid #e0e9e5;
  color: #214e3d;
}
.home .example-content {
  padding: 12px 0;
}
.home .presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home .preset {
  padding: 10px;
  text-align: left;
  min-height: 70px;
  white-space: normal;
}
.home .preset b {
  font-size: 12px;
  font-weight: 600;
}
.home .preset small {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  display: block;
  font: 400 10px/1.5 var(--font-ui);
  margin-top: 5px;
}
.home .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.home label.field {
  font: 600 12px/1.5 var(--font-ui);
  margin-bottom: 3px;
}
.home .input-help {
  font: 400 11px/1.5 var(--font-ui);
  color: #53665f;
  margin: 0 0 7px;
}
.home input[type="number"] {
  font: 500 16px/1.4 var(--font-data);
  height: 43px;
  padding: 9px 11px;
  border-radius: 3px;
  background: #fff;
}
.home .token-help {
  font: 400 11px/1.5 var(--font-ui);
  margin-top: 3px;
}
.home .token-help summary {
  cursor: pointer;
  padding: 5px 0;
  color: #126344;
}
.home .token-help p {
  margin: 6px 0;
}
.home .advanced-pricing {
  margin: 18px 0 0;
  border-top: 1px solid #d3e1db;
  padding-top: 10px;
}
.home .advanced-pricing > summary {
  font-size: 13px;
  padding: 7px 0;
  cursor: pointer;
}
.home .advanced-fields {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
.home .advanced-fields label {
  font-size: 12px;
}
.home .advanced-fields input,
.home .advanced-fields select {
  display: block;
  width: 100%;
  margin-top: 5px;
}
.home .advanced-fields p {
  font-size: 11px;
}
.home .summary-heading {
  margin-bottom: 12px;
  order: 0;
  flex-wrap: wrap;
}
.home .summary-label {
  font: 700 17px/1.4 var(--font-display);
}
.home .summary-caption {
  order: 1;
  font: 600 11px/1.5 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.home .results {
  order: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.home .stat {
  padding: 0;
  background: none;
  border: 0;
  min-width: 0;
  box-shadow: none;
}
.home .stat.hero-stat {
  grid-column: 1/-1;
  grid-row: 1;
  padding: 0;
  margin: 0 0 5px;
}
.home .stat.hero-stat .v {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: clamp(24px, calc(100cqw / var(--money-units, 5.5)), 52px);
  line-height: 1.2;
  letter-spacing: -1.6px;
}
.home .stat.hero-stat .k {
  display: none;
}
.home .stat:not(.hero-stat) .v {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}
.home .stat .k {
  font-size: 10px;
  line-height: 1.5;
  margin-top: 1px;
}
.home .small-unit-cost .per-thousand .v {
  color: #09623f;
  font-weight: 750;
}
.home .pricing-context {
  order: 3;
  margin: 0 0 12px;
  font-size: 11px;
}
.home .cost-drivers {
  order: 4;
  margin: 0 0 12px;
  border-block: 1px solid #d5e4dc;
  padding: 12px 0;
}
.home .panel-label {
  font: 700 10px/1.5 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 7px;
}
.home #costExplanation {
  font: 400 11px/1.5 var(--font-ui);
  color: #385347;
  margin: 0 0 8px;
}
.home #costDrivers {
  display: grid;
  gap: 7px;
}
.home .cost-driver {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-bottom: 6px;
  font: 400 11px/1.4 var(--font-ui);
}
.home .cost-driver::after,
.home .cost-driver i {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: #d7e7df;
  width: 100%;
}
.home .cost-driver i {
  z-index: 1;
  background: #337e60;
}
.home .compact-comparison {
  order: 5;
  margin: 0;
  border-radius: 3px;
  background: #fff;
  overflow: visible;
}
.home .compact-comparison > p {
  font-size: 11px;
  padding: 8px 10px;
}
.home .compact-comparison td {
  padding: 9px 8px;
  font-size: 11px;
}
.home .compact-comparison td.summary-percent {
  font-size: 11px;
}
.home .compact-comparison table {
  min-width: 0;
  width: 100%;
}
.home .verdict {
  order: 6;
}
.home .optimizations {
  order: 7;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #cadfd3;
}
.home #optimizationList {
  display: grid;
  gap: 0;
  font-size: 11px;
}
.home #optimizationList button {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #d5e4dc;
  color: #173c2e;
  cursor: pointer;
  min-height: 65px;
}
.home #optimizationList b {
  font: 600 12px/1.5 var(--font-ui);
}
.home #optimizationList span {
  font: 600 12px/1.5 var(--font-data);
  color: #14623d;
}
.home #optimizationList small,
.home .cost-only-note {
  font: 400 10px/1.5 var(--font-ui);
  color: #486153;
}
.home .cost-only-note {
  margin: 10px 0 0;
}
.home .optimization-undo {
  font-size: 11px;
  margin-top: 8px;
}
.home .optimization-undo .text-button {
  margin-left: 8px;
}
.home .cost-breakdown {
  order: 8;
  margin-top: 15px;
}
.home .daily-cost {
  font-size: 12px;
  padding: 10px;
}
.home .summary-footnote {
  order: 9;
  font-size: 10px;
}
.home .share-row {
  order: 10;
  margin: 10px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.home .share-btn {
  font-size: 11px;
  min-height: 36px;
  padding: 0;
  background: transparent;
}
.home .tibo-api-context {
  grid-column: 1/-1;
  grid-row: 5;
  font: 500 9px/1.5 var(--font-ui);
  color: #294e43;
  margin: 0;
  border-top: 1px solid #b9dace;
  padding-top: 5px;
  z-index: 2;
}
.home .tibo-api-context span {
  margin-left: 7px;
  font-weight: 400;
}
@media (max-width: 1100px) {
  .home .calculator-layout {
    grid-template-columns: 1fr;
  }
  .home .cost-summary {
    grid-column: 1;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid #ccdcda;
    border-radius: 0 0 6px 6px;
  }
  .home .calculator-inputs {
    border-radius: 6px 6px 0 0;
  }
  .home .model {
    min-height: 125px;
  }
}
@media (max-width: 760px) {
  .home .calculator-heading {
    gap: 12px;
    margin-top: 22px;
  }
  .home #calculator .calculator-heading h2 {
    font-size: 21px;
  }
  .home .estimate-mode {
    width: 100%;
  }
  .home .estimate-mode button {
    flex: 1;
    font-size: 12px;
    padding: 8px;
  }
  .home .calculator-inputs,
  .home .cost-summary {
    padding: 18px 16px;
  }
  .home .models {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .home .model {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 92px;
    height: auto;
    padding: 9px 12px;
  }
  .home .model b,
  .home .model b.model-title {
    font-size: 13px;
    min-height: 0;
    margin: 0;
  }
  .home .model .newbadge {
    font-size: 8px;
  }
  .home .grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .home label.field {
    font-size: 12px;
  }
  .home .input-help {
    font-size: 11px;
    margin-bottom: 5px;
  }
  .home .processing-hint {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .home .calculator-presets {
    margin-bottom: 14px;
  }
  .home .stat:not(.hero-stat) .v {
    font-size: 12px;
  }
  .home .stat .k {
    font-size: 9px;
  }
  .home .stat.hero-stat .v {
    max-width: 100%;
  }
  .home .compact-comparison td,
  .home .compact-comparison td.summary-percent {
    font-size: 10px;
    padding: 8px 6px;
  }
  .home .compact-comparison td:nth-child(2) {
    white-space: normal;
  }
  .home .compact-comparison td:last-child {
    white-space: normal;
  }
  .home .tibo-api-context {
    font-size: 8px;
  }
  .home .tibo-api-context span {
    display: block;
    margin-left: 0;
  }
}
@media (max-width: 360px) {
  .home .calculator-inputs,
  .home .cost-summary {
    padding-inline: 12px;
  }
  .home .model {
    padding-inline: 9px;
  }
  .home .model b,
  .home .model b.model-title {
    font-size: 12px;
  }
  .home .model small.model-rates,
  .home .model-rate .money {
    font-size: 10px;
  }
  .home .model-rate-unit {
    font-size: 8px;
  }
  .home .stat:not(.hero-stat) .v {
    font-size: 10px;
  }
}
/* Savings follows the complete result, without stretching the desktop input column. */
.home .calculator-layout {
  align-items: stretch;
}
.home .optimizations {
  grid-column: 1/-1;
  grid-row: 2;
  order: initial;
  margin: 0;
  padding: 18px 24px;
  background: #f8fcfa;
  border-top: 1px solid #ccdcda;
}
.home #optimizationList {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.home #optimizationList button {
  border-bottom: 0;
  padding: 3px 0;
}
.home .calculator-layout > .share-row {
  grid-column: 1/-1;
  grid-row: 3;
  order: initial;
  border-top: 1px solid #e1ebe6;
  margin: 0;
  padding: 8px 24px;
  align-items: center;
}
.home .cost-summary .pricing-context {
  display: block;
  order: 3;
  margin: 0 0 12px;
}
.home .cost-summary .pricing-context.summary-context-alert {
  margin: 0 0 12px;
}
.home #calculator .grid > div {
  margin: 0;
  padding: 0;
}
.home .model small.model-rates {
  color: #425d53;
}
.home .model.active small.model-rates {
  color: #fff;
}
.home .summary-footnote {
  color: #52695e;
}
@media (max-width: 1100px) {
  .home .optimizations {
    grid-row: 3;
  }
  .home .calculator-layout > .share-row {
    grid-row: 4;
  }
}
@media (max-width: 760px) {
  .home .optimizations {
    padding: 16px;
  }
  .home #optimizationList {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .home #optimizationList button {
    padding: 9px 0;
    border-bottom: 1px solid #d5e4dc;
  }
  .home .calculator-layout > .share-row {
    padding: 8px 16px;
  }
  .home #calculator .step-description {
    margin-bottom: 8px;
  }
  .home .model {
    min-height: 86px;
  }
  .home .model small.model-rates {
    line-height: 1.4;
  }
  .home #calculator .grid {
    row-gap: 10px;
  }
  .home #calculator .input-help {
    margin-top: 0;
  }
  .home #calculator .field {
    margin-top: 0;
  }
}
.home #calculator label.field {
  min-height: 0;
  display: block;
}
.home #calculator .calculator-layout {
  display: grid;
}
.home .calculator-layout > .share-row .share-btn {
  width: auto;
  flex: 0 1 auto;
  color: #335c4b;
}
.home .calculator-layout > .share-row .share-hint:empty {
  display: none;
}
.home .calculator-layout > .share-row .text-button {
  margin-left: auto;
}
.home .stat .k,
.home .cost-summary .pricing-context {
  color: #496154;
}
.home .estimate-mode button {
  transition: none;
}