* {
  box-sizing: border-box;
}

:root {
  --bg: #0b0d0f;
  --panel: #14171a;
  --panel-light: #1c2024;
  --border: #2a2f34;

  --text: #f4f4f4;
  --muted: #9299a1;

  --accent: #d8ff4f;
  --accent-dark: #b8dc3c;
}

body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    var(--bg);

  color:
    var(--text);
}


.page {
  width: min(
    100% - 30px,
    900px
  );

  margin:
    0 auto;

  padding:
    45px 0 60px;
}


.hero {
  padding:
    35px 0 55px;
}


.brand {
  font-size:
    25px;

  font-weight:
    900;

  letter-spacing:
    2px;

  margin-bottom:
    35px;
}


.brand span {
  color:
    var(--accent);
}


.eyebrow {
  color:
    var(--accent);

  font-size:
    12px;

  font-weight:
    bold;

  letter-spacing:
    2px;

  margin-bottom:
    10px;
}


.hero h1 {
  max-width:
    650px;

  font-size:
    clamp(
      36px,
      7vw,
      64px
    );

  line-height:
    0.98;

  margin:
    0 0 22px;
}


.heroText {
  max-width:
    600px;

  color:
    var(--muted);

  font-size:
    18px;

  line-height:
    1.6;
}


.heroPoints {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    25px;
}


.heroPoints span {
  border:
    1px solid var(--border);

  background:
    var(--panel);

  padding:
    9px 12px;

  border-radius:
    100px;

  color:
    #c6cbd0;

  font-size:
    13px;
}


.calculator,
.savedSection,
.about,
.feedbackSection {
  background:
    var(--panel);

  border:
    1px solid var(--border);

  border-radius:
    18px;

  padding:
    28px;

  margin-bottom:
    28px;
}


.sectionHeader h2,
.savedHeader h2,
.about h2,
.feedbackSection h2 {
  margin:
    0 0 10px;

  font-size:
    28px;
}


.hint {
  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.5;
}


label {
  display:
    block;

  margin:
    15px 0 7px;

  font-size:
    13px;

  font-weight:
    bold;

  color:
    #c9cdd1;
}


input,
select,
textarea {
  width:
    100%;

  padding:
    13px 14px;

  background:
    #0e1113;

  color:
    white;

  border:
    1px solid var(--border);

  border-radius:
    9px;

  font-size:
    16px;

  font-family:
    inherit;

  outline:
    none;
}


input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--accent);
}


textarea {
  min-height:
    95px;

  resize:
    vertical;
}


.fieldGrid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    15px;
}


.repairGrid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    12px;
}


.divider {
  border-top:
    1px solid var(--border);

  margin:
    30px 0;
}


.subheading {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  align-items:
    flex-end;
}


.subheading h3 {
  margin:
    0;

  font-size:
    22px;
}


.subheading .hint {
  max-width:
    280px;

  margin:
    0;
}


button {
  width:
    100%;

  padding:
    14px;

  border:
    none;

  border-radius:
    9px;

  font-size:
    15px;

  font-weight:
    bold;

  cursor:
    pointer;

  margin-top:
    12px;
}


.primaryButton {
  background:
    var(--accent);

  color:
    #0d0f0c;

  margin-top:
    25px;
}


.primaryButton:hover {
  background:
    var(--accent-dark);
}


.secondaryButton {
  background:
    #252a2f;

  color:
    white;
}


.results {
  margin-top:
    25px;

  line-height:
    1.7;
}


.scenarioBox,
.riskBox,
.offerBox,
.comparison {
  background:
    var(--panel-light);

  border:
    1px solid var(--border);

  margin-top:
    15px;

  padding:
    16px;

  border-radius:
    10px;

  line-height:
    1.7;
}


.scenarioBox,
.offerBox {
  text-align:
    left;
}


.offerMain {
  font-size:
    18px;

  font-weight:
    bold;
}


.savedHeader {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    20px;

  margin-bottom:
    20px;
}


.sortBox {
  width:
    min(
      100%,
      240px
    );
}


.sortBox label {
  margin-top:
    0;
}


.savedDeal {
  background:
    var(--panel-light);

  border:
    1px solid var(--border);

  padding:
    18px;

  margin-top:
    15px;

  border-radius:
    12px;

  text-align:
    left;

  line-height:
    1.6;
}


.savedDeal strong {
  font-size:
    17px;
}


.dealNotes {
  margin-top:
    12px;

  color:
    #b3b9bf;

  white-space:
    pre-wrap;

  border-top:
    1px solid var(--border);

  padding-top:
    10px;
}


.listingLink {
  display:
    inline-block;

  margin-top:
    12px;

  color:
    var(--accent);

  text-decoration:
    none;

  font-weight:
    bold;
}


.dealScore,
.riskRating,
.offerSummary {
  margin-top:
    10px;

  font-weight:
    bold;
}


.editButton,
.deleteButton {
  color:
    white;

  margin-top:
    12px;
}


.editButton {
  background:
    #343a40;
}


.deleteButton {
  background:
    #25292d;
}


.about p,
.feedbackSection p {
  max-width:
    720px;

  color:
    #bbc0c5;

  line-height:
    1.7;
}


.about .disclaimer {
  color:
    var(--muted);

  font-size:
    13px;

  margin-top:
    20px;
}


.feedbackButton {
  display:
    inline-block;

  margin-top:
    12px;

  padding:
    13px 18px;

  border-radius:
    9px;

  background:
    var(--accent);

  color:
    #0d0f0c;

  text-decoration:
    none;

  font-weight:
    800;
}


.feedbackButton:hover {
  background:
    var(--accent-dark);
}


footer {
  color:
    #666d74;

  text-align:
    center;

  font-size:
    12px;

  padding:
    15px;
}


.hidden {
  display:
    none;
}


@media (
  max-width: 650px
) {

  .page {
    width:
      min(
        100% - 20px,
        900px
      );

    padding-top:
      20px;
  }


  .hero {
    padding-bottom:
      35px;
  }


  .calculator,
  .savedSection,
  .about,
  .feedbackSection {
    padding:
      20px;
  }


  .fieldGrid,
  .repairGrid {
    grid-template-columns:
      1fr;
  }


  .subheading,
  .savedHeader {
    display:
      block;
  }


  .subheading .hint {
    max-width:
      none;

    margin-top:
      8px;
  }


  .sortBox {
    width:
      100%;

    margin-top:
      20px;
  }

}