/* ==========================================================================
   King Limousine, the booking engine and the rate card

   Reads the tokens in main.css and adds nothing of its own. Loaded only by the
   two pages that need it (book.html, rates.html) and by the journey bar on the
   pages that start a quote, so the rest of the site pays nothing for it.

   Transform and opacity only, like the rest of the site. Prices are rendered
   as text in the display face, never as a glyph image, so they can be read by
   a screen reader, found by search and copied.
   ========================================================================== */

/* The browser's own [hidden] rule is display:none at user-agent specificity,
   which any author rule that sets display beats. Every panel and field in this
   flow is toggled with the hidden attribute and most of them are flex or grid,
   so without this the steps, the return fields, the account fields and the
   whole booking pane all render at once. Declared first, and with !important,
   because hidden has to mean hidden whatever a component asks for. */
[hidden] {
  display: none !important;
}

/* Two different failures, two different messages, never both at once.
   <noscript> covers JavaScript being off. [data-nojs] covers JavaScript being
   on while the module has not loaded yet, or failed to. The .no-js class is
   dropped by a synchronous head script, so it is still present exactly when
   <noscript> is showing, which is when these must stay out of the way. */
.no-js [data-nojs],
.no-js [data-journey-nojs] {
  display: none !important;
}

/* ---- Shared form parts -------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.field > label,
.fieldset > legend {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.field__hint {
  font-size: 0.76rem;
  color: var(--fg-3);
  line-height: 1.45;
}

.field__err {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--red-hot);
}

.paper .field__err {
  color: var(--red);
}

.input {
  width: 100%;
  padding: 0.82rem 0.95rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 0.93rem;
  line-height: 1.4;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  /* A 16px minimum stops iOS Safari zooming the page on focus. */
  -webkit-appearance: none;
  appearance: none;
}

.paper .input {
  background: var(--white);
  border-color: var(--line-2);
}

.input:hover {
  border-color: var(--line-2);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
}

.paper .input:focus {
  background: var(--white);
}

.input[aria-invalid='true'] {
  border-color: var(--red-hot);
}

.input::placeholder {
  color: var(--fg-3);
  opacity: 1;
}

textarea.input {
  min-height: 6.5rem;
  resize: vertical;
}

select.input {
  /* The chevron is drawn here rather than left to the platform, which renders
     a different control on every one of them. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.78rem) 55%;
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.paper select.input {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-color: var(--white);
}

@media (min-width: 26rem) {
  .input {
    font-size: 0.93rem;
  }
}

/* ---- Segmented control (service type) ---------------------------------- */

.seg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 5px;
}

@media (min-width: 48rem) {
  .seg {
    grid-template-columns: repeat(4, 1fr);
  }
}

.seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.seg label:hover {
  color: var(--fg);
}

.seg input:checked + label {
  background: var(--accent);
  color: #fff;
}

.seg input:focus-visible + label {
  outline: 2px solid var(--red-hot);
  outline-offset: 2px;
}

/* ---- Place combobox ----------------------------------------------------- */

.combo {
  position: relative;
}

.combo__list {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 0.3rem);
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #17171a;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.paper .combo__list {
  background: var(--white);
  box-shadow: 0 18px 50px rgba(20, 20, 22, 0.18);
}

.combo__item {
  padding: 0.6rem 0.7rem;
  border-radius: 3px;
  font-size: 0.88rem;
  color: var(--fg-2);
  cursor: pointer;
}

.combo__item[aria-selected='true'],
.combo__item:hover {
  background: rgba(245, 44, 61, 0.14);
  color: var(--fg);
}

.combo__item b {
  color: var(--fg);
  font-weight: 700;
}

.combo__item small {
  display: block;
  font-size: 0.72rem;
  color: var(--fg-3);
}

.combo__empty {
  padding: 0.7rem;
  font-size: 0.82rem;
  color: var(--fg-3);
}

/* ---- Stepper (passengers, bags, seats) ---------------------------------- */

.stepper {
  display: grid;
  grid-template-columns: 2.6rem 1fr 2.6rem;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
}

.paper .stepper {
  background: var(--white);
  border-color: var(--line-2);
}

.stepper button {
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fg-2);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.stepper button:hover:not(:disabled) {
  background: rgba(245, 44, 61, 0.16);
  color: var(--fg);
}

.stepper button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.stepper output {
  display: grid;
  place-items: center;
  padding: 0.72rem 0.2rem;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--line);
}

/* ---- Toggle ------------------------------------------------------------- */

.switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 2.7rem;
  height: 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid var(--line);
  transition: background 0.22s var(--ease);
}

.switch__track::after {
  content: '';
  position: absolute;
  top: 0.16rem;
  left: 0.18rem;
  width: 1.06rem;
  height: 1.06rem;
  border-radius: 50%;
  background: var(--fg-2);
  transition: transform 0.22s var(--ease), background 0.22s var(--ease);
}

.switch input:checked + .switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.switch input:checked + .switch__track::after {
  transform: translateX(1.14rem);
  background: #fff;
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--red-hot);
  outline-offset: 2px;
}

.switch__label {
  font-size: 0.88rem;
  font-weight: 600;
}

/* ---- Checkbox ----------------------------------------------------------- */

.check {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg-2);
  cursor: pointer;
}

.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.13rem;
  accent-color: var(--red-hot);
}

.check a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- The honeypot ------------------------------------------------------- */

/* Off-screen rather than display:none, because some bots skip hidden inputs.
   Nobody sees it and nothing focusable is left behind it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   The journey bar, which starts a quote from any page
   ========================================================================== */

.journey {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  background: rgba(11, 11, 13, 0.72);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  /* The only blurred surface on the site besides the header, and it sits over
     a static image rather than scrolling content. */
  backdrop-filter: blur(14px);
}

.journey__row {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 44rem) {
  .journey__row--pair {
    grid-template-columns: 1fr 1fr;
  }
  .journey__row--trio {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.journey .btn {
  justify-content: center;
  width: 100%;
}

.journey__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.73rem;
  color: var(--fg-3);
}

.journey__foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.journey__foot span::before {
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ==========================================================================
   The booking flow
   ========================================================================== */

.bk {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.4rem);
  align-items: start;
}

@media (min-width: 64rem) {
  .bk {
    grid-template-columns: minmax(0, 1fr) 21rem;
  }
}

.bk-main {
  min-width: 0;
}

/* ---- Step rail ---------------------------------------------------------- */

.rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  margin-bottom: clamp(1.4rem, 3.5vw, 2.2rem);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.rail li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.rail li b {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 0.76rem;
}

.rail li[aria-current='step'] {
  color: var(--fg);
}

.rail li[aria-current='step'] b {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.rail li[data-done='true'] {
  color: var(--fg-2);
}

.rail li[data-done='true'] b {
  background: rgba(245, 44, 61, 0.18);
  border-color: var(--accent);
  color: var(--fg);
}

/* ---- Panels ------------------------------------------------------------- */

.panel-card {
  padding: clamp(1.2rem, 3.2vw, 1.9rem);
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.panel-card + .panel-card {
  margin-top: 1rem;
}

.panel-card > h2,
.panel-card > h3 {
  font-family: var(--f-display);
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.panel-card > p {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--fg-2);
}

.grid-fields {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
}

@media (min-width: 40rem) {
  .grid-fields--2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-fields--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid-fields .span-2 {
    grid-column: span 2;
  }
}

.bk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.bk-actions .btn {
  justify-content: center;
}

@media (max-width: 30rem) {
  .bk-actions .btn {
    flex: 1 1 100%;
  }
}

.btn--back {
  border-color: transparent;
  color: var(--fg-3);
  padding-inline: 0.9rem;
}

.btn--back:hover {
  color: var(--fg);
}

/* ---- Vehicle options --------------------------------------------------- */

.vopts {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.vopt {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0 1.1rem;
  padding: 0.9rem;
  text-align: left;
  width: 100%;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

@media (min-width: 36rem) {
  .vopt {
    grid-template-columns: 7.6rem minmax(0, 1fr) auto;
    align-items: center;
  }
}

.vopt:hover:not([disabled]) {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.vopt[aria-pressed='true'] {
  border-color: var(--accent);
  background: rgba(245, 44, 61, 0.08);
}

.vopt[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.vopt__pic {
  grid-row: span 2;
  overflow: hidden;
  border-radius: 4px;
  background: #121214;
}

@media (min-width: 36rem) {
  .vopt__pic {
    grid-row: auto;
  }
}

.vopt__pic img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.vopt:hover:not([disabled]) .vopt__pic img {
  transform: scale(1.05);
}

.vopt__name {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 600;
}

.vopt__cars {
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: var(--fg-3);
  line-height: 1.45;
}

.vopt__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
  margin-top: 0.45rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-2);
  list-style: none;
}

.vopt__why {
  margin-top: 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent);
}

.vopt__price {
  margin-top: 0.7rem;
  text-align: left;
}

@media (min-width: 36rem) {
  .vopt__price {
    margin-top: 0;
    text-align: right;
    padding-left: 0.8rem;
  }
}

.vopt__price b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.2vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.vopt__price span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---- Price panel ------------------------------------------------------- */

.quote {
  padding: clamp(1.15rem, 3vw, 1.5rem);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-2);
  border-radius: 7px;
}

@media (min-width: 64rem) {
  .quote--stick {
    position: sticky;
    top: 5.6rem;
  }
}

.quote__eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.quote__total {
  margin-top: 0.35rem;
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* The figure changes only when the customer adds something priced, and when it
   does it says so rather than sliding quietly. */
.quote__total.bump {
  animation: quote-bump 0.5s var(--ease);
}

@keyframes quote-bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.045);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote__total.bump {
    animation: none;
  }
}

.quote__fixed {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}

.quote__why {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--fg-2);
}

.quote__itin {
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--fg-2);
  line-height: 1.55;
}

.quote__itin b {
  color: var(--fg);
  font-weight: 600;
}

.brk {
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
}

.brk summary {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  list-style: none;
}

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

.brk summary::after {
  content: '+';
  float: right;
  font-family: var(--f-display);
  font-size: 0.95rem;
  line-height: 1;
}

.brk[open] summary::after {
  content: '\2212';
}

.brk summary:hover {
  color: var(--fg);
}

.brk__rows {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
}

.brk__rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  color: var(--fg-2);
}

.brk__rows div + div {
  border-top: 1px dashed var(--line);
}

.brk__rows dt {
  min-width: 0;
}

.brk__rows dt small {
  display: block;
  font-size: 0.7rem;
  color: var(--fg-3);
}

.brk__rows dd {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fg);
}

.brk__rows .is-free dd {
  color: var(--accent);
}

.brk__note {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  color: var(--fg-3);
  line-height: 1.5;
}

/* ---- Inclusions list --------------------------------------------------- */

.incl {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--fg-2);
}

.incl li {
  position: relative;
  padding-left: 1.35rem;
  margin-top: 0.42rem;
  line-height: 1.5;
}

.incl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.46rem;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

.incl--after li::before {
  top: 0.56rem;
  width: 0.5rem;
  height: 0;
  border-left: 0;
  border-bottom: 1.6px solid var(--fg-3);
  transform: none;
}

/* ---- Confirmation ------------------------------------------------------ */

.done {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: rgba(245, 44, 61, 0.07);
  border: 1px solid var(--accent);
  border-radius: 7px;
}

.done__ref {
  margin-top: 0.6rem;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.done__grid {
  display: grid;
  gap: 0.1rem 1.4rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
}

@media (min-width: 34rem) {
  .done__grid {
    grid-template-columns: max-content 1fr;
  }
}

.done__grid dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 0.6rem;
}

.done__grid dd {
  color: var(--fg);
  padding-bottom: 0.45rem;
}

@media (min-width: 34rem) {
  .done__grid dd {
    padding-top: 0.6rem;
  }
}

/* ---- Error banner ------------------------------------------------------ */

.banner {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 5px;
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid var(--accent);
  background: rgba(245, 44, 61, 0.1);
}

.banner--quiet {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-2);
}

/* ==========================================================================
   The rate card
   ========================================================================== */

/* Wide tables scroll inside their own box. The page itself never scrolls
   sideways, at any width. */
.tbl-wrap {
  margin-top: 1.4rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}

.rt {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.rt caption {
  padding: 0.95rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}

.rt th,
.rt td {
  padding: 0.72rem 1rem;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.rt thead th {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-3);
  vertical-align: bottom;
}

.rt th[scope='row'],
.rt thead th:first-child {
  text-align: left;
  white-space: normal;
  min-width: 12rem;
  font-weight: 600;
  color: var(--fg);
}

.rt th[scope='row'] small {
  display: block;
  font-size: 0.71rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-3);
}

.rt td {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.rt tbody tr:last-child th,
.rt tbody tr:last-child td {
  border-bottom: 0;
}

.rt tbody tr:hover td,
.rt tbody tr:hover th {
  background: rgba(255, 255, 255, 0.035);
}

.paper .rt tbody tr:hover td,
.paper .rt tbody tr:hover th {
  background: rgba(20, 20, 22, 0.035);
}

.rt tbody th.rt-group {
  padding-top: 1.15rem;
  font-family: var(--f-display);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.rt-foot {
  padding: 0.9rem 1rem;
  font-size: 0.76rem;
  color: var(--fg-3);
  border-top: 1px solid var(--line);
  line-height: 1.55;
}

/* ---- Surcharge schedule ------------------------------------------------ */

.sched {
  display: grid;
  gap: 0;
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.sched > div {
  display: grid;
  gap: 0.2rem 1.6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 44rem) {
  .sched > div {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}

.sched dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg);
}

.sched dd {
  font-size: 0.86rem;
  color: var(--fg-2);
  line-height: 1.6;
}

.sched dd b {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.sched dd .free {
  color: var(--accent);
  font-weight: 700;
}

/* ---- Two column compare ------------------------------------------------ */

.compare {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .compare {
    grid-template-columns: 1fr 1fr;
  }
}

.compare > div {
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.compare h3 {
  font-family: var(--f-display);
  font-size: 0.98rem;
  font-weight: 600;
}

.compare--in {
  border-color: var(--accent) !important;
  background: rgba(245, 44, 61, 0.06);
}

/* ---- Big number strip -------------------------------------------------- */

.figs {
  display: grid;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

@media (min-width: 40rem) {
  .figs {
    grid-template-columns: repeat(3, 1fr);
  }
}

.figs > div {
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
}

.figs dd {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.figs dt {
  margin-top: 0.35rem;
  font-size: 0.76rem;
  color: var(--fg-2);
  line-height: 1.5;
}