/* =====================================================================
 * The plan cards
 *
 * Written from the reference, with every figure read off it using
 * tools/measure.py rather than judged by eye:
 *
 *   page        #080705
 *   card        397 x 672, 27 px apart, the row 75% of the page
 *   fill        #100E0B          recommended  #18120D
 *   band        #1B1814          recommended  #291C13
 *   plain go    #0E0C0A on an accent outline
 *
 * The recommended card is seven points lighter than the others — enough
 * to say "this one", not enough to look switched on. Its border does the
 * work; the fill only has to agree.
 * ================================================================== */

.bfp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
  align-items: stretch;
  width: min(1250px, 88%);
  max-width: min(1250px, 88%);
  margin-inline: auto;
  padding-top: 18px;
}

/* ---- the card ------------------------------------------------------- */

.bfp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 30px 30px;
  border: 1px solid #221F1C;
  border-radius: 22px;
  background: #100E0B;
  text-align: center;
  transition: border-color .18s ease, background .18s ease;
}

.bfp:hover {
  border-color: #2E2A25;
}

.bfp--pick {
  border-color: #A94F31;
  background: #18120D;
}

.bfp--pick:hover {
  border-color: #B76B52;
}

/* ---- the badge, straddling the top edge ----------------------------- */

.bfp__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  z-index: 2;
  padding: 7px 20px;
  border-radius: 999px;
  background: #C26F44;
  color: #16110D;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/*
 * There is no mark above the name.
 *
 * A star, a diamond and an orbit told the three plans apart by picture,
 * which meant looking them up rather than reading them: the name and the
 * figure below it already say everything the shapes were standing in for.
 * The card opens on its name now.
 */

/* ---- who it is for -------------------------------------------------- */

.bfp__name {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #F2F0EE;
}

.bfp__for {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #8C8681;
}

.bfp__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 24px 0 0;
  background: #221F1C;
}

.bfp--pick .bfp__rule {
  background: rgba(169, 79, 49, .34);
}

/* ---- the figure ----------------------------------------------------- */

.bfp__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 30px 0 24px;
}

.bfp__price strong {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: #FFFFFF;
}

.bfp__price em {
  font-style: normal;
  font-size: 14px;
  color: #8C8681;
}

/* ---- the credit band ------------------------------------------------ */

.bfp__band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  margin: 0 0 22px;
  padding: 16px 12px;
  border: 1px solid #221F1C;
  border-radius: 12px;
  background: #1B1814;
  color: #EDEAE7;
  font-size: 14.5px;
  font-weight: 600;
}

.bfp__band span {
  color: #7C7671;
  font-weight: 400;
}

.bfp--pick .bfp__band {
  border-color: rgba(169, 79, 49, .5);
  background: #291C13;
  color: #E8A585;
}

/* ---- what is in it -------------------------------------------------- */

.bfp__list {
  width: 100%;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  text-align: start;
}

.bfp__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #B6B1AC;
}

.bfp__list li svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: #A94F31;
}

/*
 * The rate line is set apart from the features beneath it.
 *
 * It answers the only question that lets two plans be compared — what a
 * credit is worth here — so it is not read as the first of the features.
 */
.bfp__rate {
  color: #EDEAE7 !important;
  font-weight: 600;
  padding-bottom: 13px !important;
  margin-bottom: 5px;
  border-bottom: 1px solid #221F1C;
}

.bfp--pick .bfp__rate {
  border-bottom-color: rgba(169, 79, 49, .3);
}

.bfp__rate svg {
  color: #C56240 !important;
}

/* ---- the way in ----------------------------------------------------- */

.bfp form {
  width: 100%;
  margin-top: auto;
}

.bfp__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 16px 18px;
  border: 1px solid #A94F31;
  border-radius: 12px;
  background: #0E0C0A;
  color: #EDEAE7;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.bfp__go:hover:not([disabled]) {
  background: #17110D;
  border-color: #B76B52;
}

.bfp__go--fill {
  border-color: #B4552F;
  background: #B4552F;
  color: #FFFFFF;
}

.bfp__go--fill:hover:not([disabled]) {
  background: #C0603A;
  border-color: #C0603A;
}

.bfp__go[disabled] {
  cursor: not-allowed;
  opacity: .72;
}

@media (max-width: 980px) {
  .bfp-row { grid-template-columns: 1fr; width: min(430px, 92%); max-width: min(430px, 92%); }
}

/* =====================================================================
 * The page the cards sit on
 *
 * Read off the reference with tools/measure.py:
 *
 *   page      #080705
 *   top bar   #070605
 *
 * Full width, with no rail. Someone who has come to buy credit has one
 * task, and a column of links beside it is only somewhere else to go.
 * ================================================================== */

body.bfp-page {
  margin: 0;
  background: #080705;
  color: #EDEAE7;
}

.bfp-shell {
  min-height: 100vh;
  padding: 0 0 54px;
}

/* ---- the bar across the top ----------------------------------------- */

.bfp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1560px, 92%);
  margin-inline: auto;
  padding: 22px 0;
}

.bfp-top__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #F2F0EE;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
}

.bfp-top__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #A94F31;
}

.bfp-top__mark svg {
  width: 30px;
  height: 30px;
}

.bfp-top__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9A948F;
  font-size: 14.5px;
  text-decoration: none;
  transition: color .18s ease;
}

.bfp-top__back:hover {
  color: #C08063;
}

.bfp-top__back svg {
  width: 16px;
  height: 16px;
}

/* ---- the heading ---------------------------------------------------- */

.bfp-head {
  width: min(920px, 92%);
  margin: 26px auto 40px;
  text-align: center;
}

/*
 * The eyebrow, with a rule either side.
 *
 * The rules are drawn rather than typed, so they hold their length
 * whatever the words between them turn out to be.
 */
.bfp-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 18px;
  color: #C08063;
  font-size: 14.5px;
  font-weight: 500;
}

.bfp-eyebrow span {
  display: block;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #A94F31);
}

.bfp-eyebrow span:last-child {
  background: linear-gradient(90deg, #A94F31, transparent);
}

.bfp-title {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  line-height: 1.35;
  color: #FFFFFF;
}

.bfp-lead {
  margin: 0 auto;
  max-width: 700px;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 2;
  color: #9A948F;
}

/* ---- the reassurances ----------------------------------------------- */

.bfp-promises {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(1250px, 88%);
  margin: 48px auto 0;
  padding-top: 26px;
  border-top: 1px solid #1A1714;
}

.bfp-promise {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 34px;
  color: #B6B1AC;
  font-size: 14.5px;
}

/*
 * Divided by a rule, not by a character.
 *
 * A typed separator inherits the text colour and the line height, and in
 * a wrapped row it ends up hanging on its own at the start of a line.
 */
.bfp-promise + .bfp-promise {
  border-inline-start: 1px solid #1F1C19;
}

.bfp-promise svg {
  flex: none;
  width: 19px;
  height: 19px;
  color: #A94F31;
}

/* ---- the way through ------------------------------------------------ */

.bfp-compare {
  margin: 30px 0 0;
  text-align: center;
}

.bfp-compare a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(154, 148, 143, .45);
  color: #9A948F;
  font-size: 15px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.bfp-compare a:hover {
  color: #C08063;
  border-bottom-color: #A94F31;
}

.bfp-compare svg {
  width: 16px;
  height: 16px;
}

/* ---- a word from the gateway ---------------------------------------- */

.bfp-note {
  width: min(1250px, 88%);
  margin: 0 auto 8px;
  padding: 14px 18px;
  border: 1px solid #3A2A1E;
  border-radius: 12px;
  background: #17110D;
  color: #E0DCD8;
  font-size: 14.5px;
  text-align: center;
}

.bfp-note--ok {
  border-color: rgba(109, 168, 96, .4);
  background: rgba(109, 168, 96, .1);
}

.bfp-empty {
  margin: 40px auto;
  color: #8C8681;
  text-align: center;
}

@media (max-width: 700px) {
  .bfp-promise { padding: 8px 18px; }
  .bfp-promise + .bfp-promise { border-inline-start: 0; }
}

/* ---- the former price, and the value line --------------------------- */

.bfp__price del {
  margin-bottom: 2px;
  color: #6E6862;
  font-size: 19px;
  font-weight: 600;
  text-decoration-thickness: 1.5px;
}

.bfp__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: -10px 0 16px;
  color: #C08063;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.bfp__value span {
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(192, 128, 99, .55);
}

/* ===================================================================
 * The notice before the bank
 *
 * It sits over the page rather than replacing it, because the person is
 * a click away from changing their mind and the page they were reading
 * should still be behind them when they do.
 * ================================================================ */

.bf-pay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: bf-pay-in .16s ease-out;
}

@keyframes bf-pay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bf-pay__box {
  width: 100%;
  max-width: 420px;
  padding: 26px 24px 20px;
  border: 1px solid var(--bf-line);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-lg);
  text-align: center;
}

.bf-pay__title {
  margin: 0 0 12px;
  color: var(--bf-text);
  font-size: 17px;
  font-weight: 700;
}

/*
 * The warning carries the accent, not the title.
 *
 * The title only says where they are going; this line is the one that
 * saves a refused payment, so it is the line that is marked.
 */
.bf-pay__warn {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--bf-accent-line);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-accent-soft);
  color: var(--bf-text);
  font-size: 13.5px;
  line-height: 1.85;
  text-align: right;
}

.bf-pay__count {
  margin: 0 0 18px;
  color: var(--bf-text-muted);
  font-size: 13px;
}

.bf-pay__count b {
  display: inline-block;
  min-width: 1.4em;
  color: var(--bf-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.bf-pay__row {
  display: flex;
  gap: 10px;
}

.bf-pay__row button {
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--bf-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

/*
 * Cancel is the plain one and it comes first.
 *
 * Someone who opened this box because they need to switch a VPN off is
 * reaching for cancel, not for the gateway — so it is where the thumb
 * already is, and it is not dressed up as the thing to press.
 */
.bf-pay__cancel {
  border: 1px solid var(--bf-line);
  background: transparent;
  color: var(--bf-text-muted);
}

.bf-pay__cancel:hover {
  border-color: var(--bf-line-strong);
  color: var(--bf-text);
}

.bf-pay__now {
  border: 1px solid transparent;
  background: var(--bf-accent-solid);
  color: #fff;
}

.bf-pay__now:hover {
  background: var(--bf-accent-solid-hover);
}

@media (max-width: 420px) {
  .bf-pay__row {
    flex-direction: column-reverse;
  }
}