/* Booking value calculator and the formula helper.
   Tokens live on :root in site.css. Loaded on the homepage, Join, and /tools/. */

.sec__head p.formula{
  margin-top:22px;
  padding:18px 22px;
  border:1px solid var(--line-light);
  max-width:100%;
  color:var(--ink);
  font-family:var(--mono);
  font-weight:600;
  font-variation-settings:normal;
  font-size:clamp(12px,1vw,14px);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.45;
  display:inline-block;
}

.bvc{
  grid-column:main-start / span 10;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(22px,3vw,40px) clamp(28px,4vw,56px);
  align-items:start;
}

.bvc__field + .bvc__field{margin-top:22px}

.bvc__label{
  display:block;
  margin:0 0 10px;
  font-family:var(--mono);
  font-weight:600;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute-on-light);
}

.bvc__stepper{
  display:flex;
  align-items:stretch;
  min-height:52px;
  border:1px solid var(--line-light);
  background:#fff;
}

.bvc__step{
  flex:none;
  width:48px;
  border:0;
  background:var(--paper-2);
  color:var(--ink);
  font-family:var(--disp);
  font-variation-settings:'wdth' 100,'wght' 650;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
}
.bvc__step:hover{background:var(--ink);color:var(--paper)}
.bvc__step:focus-visible,
.bvc__stepper input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

.bvc__prefix{
  display:flex;
  align-items:center;
  padding-left:14px;
  font-family:var(--disp);
  font-variation-settings:'wdth' 108,'wght' 720;
  font-size:20px;
  color:var(--mute-on-light);
}

.bvc__stepper input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  border:0;
  margin:0;
  padding:0 12px;
  background:transparent;
  color:var(--ink);
  caret-color:var(--accent);
  font-family:var(--disp);
  font-variation-settings:'wdth' 110,'wght' 720;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:22px;
  letter-spacing:-.03em;
  text-align:center;
  -moz-appearance:textfield;
  appearance:textfield;
}
.bvc__stepper input::-webkit-outer-spin-button,
.bvc__stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.bvc__panel{
  background:var(--paper-2);
  padding:clamp(22px,2.6vw,34px);
  border-top:3px solid var(--ink);
  min-width:0;
}

.bvc__annual{
  margin-top:10px;
  font-size:clamp(46px,5.6vw,78px);
  color:var(--ink);
}
.bvc__annual--empty{
  font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-.02em;
  line-height:1.15;
  font-variation-settings:'wdth' 106,'wght' 700;
}

.bvc__eq{
  margin:10px 0 0;
  max-width:42ch;
  font-family:var(--mono);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:.02em;
  line-height:1.45;
  color:var(--ink);
}

.bvc__pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 28px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line-light);
}

.bvc__stat-label{
  margin:0;
  font-family:var(--mono);
  font-weight:600;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--mute-on-light);
}

.bvc__stat{
  margin:8px 0 0;
  font-family:var(--disp);
  font-variation-settings:'wdth' 112,'wght' 780;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(28px,3vw,40px);
  letter-spacing:-.03em;
  line-height:1;
  color:var(--ink);
}

.bvc__days-key{
  display:block;
  margin-top:8px;
  max-width:36ch;
}

.bvc__against{
  margin-top:22px;
  max-width:46ch;
  color:var(--ink);
  font-variation-settings:'wdth' 100,'wght' 520;
  font-size:clamp(16px,.4vw + 14px,18px);
  line-height:1.45;
}

.bvc__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 18px;
  margin-top:26px;
}
.bvc__cta .microprint{margin:0}

.bvc__note{
  grid-column:1 / -1;
  display:block;
  max-width:68ch;
  margin-top:4px;
}

.bvc__more{
  grid-column:1 / -1;
  display:block;
  max-width:68ch;
  margin:14px 0 0;
}
.bvc__more a{
  color:var(--accent-deep);
  text-underline-offset:3px;
}

@media (max-width:900px){
  .bvc{grid-column:main-start / main-end}
}

@media (max-width:720px){
  .bvc,
  .bvc__pair{grid-template-columns:1fr}
  .bvc__step{width:52px}
  .bvc__stepper{min-height:56px}
  .bvc__annual{font-size:clamp(42px,14vw,64px)}
}

@media (prefers-reduced-motion:reduce){
  .bvc__annual{transition:none}
}