html,
    body {
      margin: 0;
      padding: 0;
      color:hsla(40,40.54%,21.76%,1);
    }


    .roi-section {
      background: transparent;
      color: inherit;
      font: inherit;
      line-height: 1.35;
      padding: 0;
      padding: 0 80px;
      background: url('https://images.squarespace-cdn.com/content/v1/67d2a3eab91d19375596aa43/9b86c125-8340-40dd-9228-38c045b31ca3/Berts+-+Background+-+Light+Lines.jpg');
    }
    /* Accordion shell follows page rules (hairline separators, uppercase headings) */
    details.roi-item {
      border-top: 1px solid rgba(0, 0, 0, .12);
      padding-block: 20px;
    }

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

    summary.roi-summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      font-size: clamp(18px, 2vw, 22px);
      font-weight: 600;
      letter-spacing: .02em;
      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: 400;
      font-style: normal;
    }

    summary.roi-summary::-webkit-details-marker {
      display: none;
    }

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

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(14px, 1.6vw, 20px);
    }
    .fields-wrapper{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .fields-wrapper > .field, .cabin-picker-wrap{
      width: 47%;
    }
    .cabin-picker-wrap{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
    }
    .cabin-picker-wrap > div{
      width: 47%;
    }
    /* Cards are plain blocks—no shadows, no rounded corners */
    .card {
      background: transparent;
      border: 0;
      padding: 0;
      color: hsla(40,40.54%,21.76%,1);
    }

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

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

    .field input[type="number"],
    .field input[type="text"],
    .field select {
      box-sizing: border-box;
      width: 100%;
      border: 1px solid rgba(0, 0, 0, .15);
      border-radius: 0;
      padding: 10px 12px;
      background: transparent;
      color: inherit;
      font-size: 14px;
    }
    #premium, #customPrice{
      margin-top: 10px;
    }
    .pill {
      background: transparent;
      border: 1px solid rgba(0, 0, 0, .15);
      padding: 4px 10px;
      font-size: 12px;
      font-family: "tt-commons-pro", sans-serif;
      font-weight: 200;
      font-style: italic;
    }
    .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: clamp(22px, 3vw, 28px);
      font-weight: 300;
      font-family: "tt-commons-pro", sans-serif;
    }

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

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




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

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

    .suffix {
      white-space: nowrap;
      font-family: "tt-commons-pro-thin", sans-serif;
      font-weight: 100;
      font-style: italic;
      font-size: 12px;
    }

    .ok {
      color: inherit;
    }

    .warn {
      color: #9b5b00;
    }
    @media(max-width: 768px){
      .roi-section{
        padding: 0 20px;
      }
      .field{
        margin-top: 2.5rem;
      }
      .cabin-picker-wrap{
        flex-direction: column;
      }
      .field.half-width, .cabin-picker-wrap > div{
        width: 100%;
        max-width: 100%;
      }
      .fields-wrapper > .field, .cabin-picker-wrap{
      width: 100%;
      }
    }