input,
    select {
      margin: 0;
      accent-color: hsla(40,40.54%,21.76%,1);
    }

    html,
    body {
      margin: 0;
      padding: 0;
      color: hsla(60,23.08%,12.75%,1);
      font-family: "tt-commons-pro", sans-serif;
      -webkit-text-size-adjust: 100%;
    }


    .roi-section {
      background: transparent;
      color: inherit;
      font: inherit;
      line-height: 1.35;
      padding: 0;
    }
    /* Shell follows page rules (hairline separators) */
    .roi-item {
      border-top: 1px solid rgba(0, 0, 0, .12);
      padding: 0;
    }

    .roi-item:first-of-type {
      border-top: 0;
    }

    /* Same type as the berts.co page h1 (the-seasons Light, 0.78 x page vw + 16px, capped at 39.4px).
       On desktop the iframe is ~43.5% of the page width, so 0.78 page-vw = 1.79 iframe-vw; on phones this lands on the h1's ~22px too. */
    .roi-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: min(calc(1.79vw + 16px), 39.4px);
      line-height: 1.23;
      letter-spacing: 0;
      color: inherit;
      padding: 0;
      margin: 0;
      text-transform: none;
      border-bottom: 1px solid rgba(0, 0, 0, .12);
      padding-bottom: 12px;
      font-family: "the-seasons", sans-serif;
      font-weight: 300;
      font-style: normal;
    }

    /* Layout — airy grid matching site rhythm */
    .roi-wrap {
      margin-top: 18px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .fields-wrapper{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      row-gap: 20px;
    }
    .fields-wrapper > .field, .cabin-picker-wrap{
      width: 47%;
    }
    .cabin-picker-wrap{
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    /* Cards are plain blocks—no shadows, no rounded corners */
    .card {
      background: transparent;
      border: 0;
      padding: 0;
      color: hsla(60,23.08%,12.75%,1);
    }

    .card.dark {
      background: transparent;
      color: inherit;
      border: 0;
    }

    /* Fields */
    .field label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 6px;
      font-family: "tt-commons-pro", sans-serif;
      font-weight: 300;
      font-style: normal;
    }
    .field.half-width{
      max-width: 47%;
    }
    .field input[type="range"] {
      width: 100%;
    }

    .field input[type="number"],
    .field input[type="text"],
    .field select {
      box-sizing: border-box;
      width: 100%;
      border: 1px solid hsla(40,40.54%,21.76%,.25);
      border-radius: 0;
      padding: 10px 12px;
      background-color: hsl(36,48%,96%);
      color: inherit;
      font-family: inherit;
      font-size: 14px;
      height: 42px;
      -webkit-appearance: none;
      appearance: none;
      transition: border-color .2s ease;
    }
    .field :is(input[type="number"], input[type="text"], select):hover {
      border-color: hsla(40,40.54%,21.76%,.5);
    }
    .field :is(input[type="number"], input[type="text"], select):focus {
      outline: none;
      border-color: hsla(40,40.54%,21.76%,1);
      box-shadow: inset 0 0 0 1px hsla(40,40.54%,21.76%,1);
    }
    /* Brand chevron instead of the native select arrow */
    .field select {
      padding-right: 36px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234e3f21' stroke-width='1.2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      cursor: pointer;
    }
    /* No native spinners; typing and arrow keys still work */
    .field input[type="number"] {
      -moz-appearance: textfield;
    }
    .field input[type="number"]::-webkit-inner-spin-button,
    .field input[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .pill {
      background: transparent;
      border: 1px solid hsla(40,40.54%,21.76%,.25);
      padding: 4px 10px;
      font-size: 13px;
      font-family: "tt-commons-pro", sans-serif;
      font-weight: 300;
      white-space: nowrap;
    }
    .collapse {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.35s ease, opacity 0.35s ease;
    }

    .collapse.open {
      max-height: 500px;
      opacity: 1;
    }
    .hidden{
      display: none;
      width: 0;
      height: 0;
    }
    .kpi {
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .kpi h3, #payoff {
      margin: 0;
      font-size: 28px;
      font-weight: 300;
      font-family: "tt-commons-pro", sans-serif;
    }

    .kpi .sub {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-family: "tt-commons-pro", sans-serif;
      font-weight: 300;
      font-style: normal;
    }

    .kpi strong {
      font-size: clamp(22px, 3.5vw, 32px);
      font-weight: 700;
    }




    .help,
    .notice,
    .hint {
      font-size: 13px;
      font-family: "tt-commons-pro", sans-serif;
      font-weight: 300;
      font-style: normal;
    }

    /* Footnote: one assumption per line */
    ul.help {
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
    }
    .help li + li {
      margin-top: 4px;
    }

    #bulkNote {
      margin-top: 8px;
    }

    .row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* Checkbox label and % suffix sit beside their control and wrap there, instead of dropping to their own line */
    .row > label, .row > .suffix {
      flex: 1;
      margin-bottom: 0;
    }

    .suffix {
      font-family: "tt-commons-pro", sans-serif;
      font-weight: 300;
      font-size: 13px;
    }

    .ok {
      color: inherit;
    }

    .warn {
      color: #9b5b00;
    }
    /* Inside the iframe this measures the calculator's own width, not the page's */
    @media(max-width: 540px){
      .grid{
        gap: 14px;
      }
      .kpi h3, #payoff{
        font-size: 22px;
      }
      .field{
        margin-top: 2.5rem;
      }
      .fields-wrapper, .cabin-picker-wrap{
        gap: 0;
      }
      .field.half-width{
        max-width: 100%;
      }
      .fields-wrapper > .field, .cabin-picker-wrap{
        width: 100%;
      }
    }