/* ==========================================================================
   Excelerate checkout — one stylesheet for every product page.

   Palette and type are the 2025 brand guide, verbatim:
     Excelerate Blue    #2c3e50   headings, body copy, the calm of the page
     Excelerate Yellow  #e4a11b   the CTA and every selected state, nothing else
     Excelerate Coal    #2d2d2d
     Typeface           Inter

   Gold is rationed on purpose. On a checkout page the one thing that must be
   unmistakable is where to click, so gold is spent on the button and on
   "this is selected", and nowhere else. Everything else is navy on warm white.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #2c3e50;
  --gold: #e4a11b;
  --gold-light: #ffc35a;

  /* Accent — overridable per product via theme.accent, defaults to brand gold */
  --accent: var(--gold);
  --accent-dark: #c88a12;
  --accent-tint: #fdf6e8;
  --accent-line: #f0d59a;

  /* Surfaces: warm white, so the navy reads soft rather than clinical */
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-sunk: #faf9f6;
  --border: #e9e5dd;
  --border-strong: #d8d2c7;

  /* Type */
  --text: var(--navy);
  --text-soft: #55697c;
  --muted: #8a97a4;

  --danger: #b03a2e;
  --success: #1e7a4d;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 9px;

  /* Layered and very soft — depth without a drop-shadow look */
  --shadow: 0 1px 2px rgba(44, 62, 80, .04),
            0 6px 16px -6px rgba(44, 62, 80, .08);
  --shadow-lift: 0 1px 2px rgba(44, 62, 80, .05),
                 0 14px 32px -12px rgba(44, 62, 80, .16);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 20px 72px;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  /* A whisper of warmth behind the fold, so the page has a top and a bottom. */
  background-image: linear-gradient(180deg, #fffdf8 0%, var(--bg) 420px);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

.page { max-width: 1140px; margin: 0 auto; }
/* The open-amount page at `/` is a single column, so it does not need the width. */
.page--narrow { max-width: 560px; }

/* ---------- Masthead: who is taking the money ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 0 30px;
}
.masthead__logo { display: block; height: 34px; width: auto; }

.masthead__secure {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 550; letter-spacing: .01em;
  color: var(--text-soft);
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.masthead__secure svg { width: 13px; height: 13px; flex: none; color: var(--success); }

/* ---------- Product hero ---------- */

.hero { margin: 0 0 28px; max-width: 74ch; }

/* With social proof alongside, the hero spans the full width and splits. */
.hero--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px; align-items: center;
}
.hero__text { min-width: 0; max-width: 62ch; }
.hero__image {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.hero__badge {
  display: block; height: 46px; width: auto; margin-bottom: 16px;
  border-radius: var(--radius-xs);
}
.hero__eyebrow {
  display: block; margin-bottom: 9px;
  font-size: .72rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent-dark);
}
.hero__title {
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
  line-height: 1.15; margin: 0;
  font-weight: 700; letter-spacing: -.03em; color: var(--navy);
}
.hero__desc {
  margin: 12px 0 0; color: var(--text-soft);
  font-size: 1rem; line-height: 1.6;
}

/* ---------- Countdown ---------- */

.countdown {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 15px 20px; margin: 0 0 26px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}
.countdown__headline { font-weight: 650; font-size: .92rem; color: var(--navy); }
.countdown__units { display: flex; gap: 8px; margin-left: auto; }
.countdown__unit {
  min-width: 60px; padding: 7px 9px; text-align: center;
  background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: var(--radius-xs);
}
.countdown__value { display: block; font-size: 1.16rem; font-weight: 700; color: var(--navy); }
.countdown__label {
  display: block; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); font-weight: 600;
}
.countdown.is-expired .countdown__units { opacity: .45; }

/* ---------- Layout ---------- */

.grid { display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 26px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.col--side { position: sticky; top: 26px; }

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.card__title {
  font-size: 1.06rem; font-weight: 650; margin: 0;
  letter-spacing: -.015em; color: var(--navy);
}
.card__hint { margin: 5px 0 0; font-size: .855rem; color: var(--muted); }
.card__title + .fields,
.card__title + .options,
.card__title + .addons { margin-top: 20px; }
.card__hint + .fields,
.card__hint + .options,
.card__hint + .addons { margin-top: 18px; }

/* The summary is the card that matters most, so it sits a little higher. */
.summary { box-shadow: var(--shadow-lift); }

/* ---------- Form fields ---------- */

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-size: .82rem; font-weight: 620; margin-bottom: 7px; color: var(--text-soft);
}
.field input {
  font: inherit; font-size: 1rem; color: var(--text);
  padding: 12px 14px; min-height: 48px;
  background: var(--surface-sunk);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.field input::placeholder { color: #aeb7c0; }
.field input:hover { border-color: #c3bbab; }
.field input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(228, 161, 27, .16);
}
.field input:user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(176, 58, 46, .1);
}
.field__hint { font-size: .765rem; color: var(--muted); margin-top: 6px; }
.field__optional { font-weight: 450; color: var(--muted); }

/* ---------- Selectable rows (options and add-ons) ---------- */

.options, .addons { display: flex; flex-direction: column; gap: 11px; }

.choice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; cursor: pointer;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.choice:hover { border-color: var(--accent); background: #fffdf7; }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 1px var(--accent);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice input {
  flex: none; width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.choice__body { flex: 1; min-width: 0; }
.choice__head { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; }
.choice__name { font-weight: 620; color: var(--navy); }
.choice__price { font-weight: 680; white-space: nowrap; color: var(--navy); }
.choice__note { display: block; margin: 4px 0 0; font-size: .855rem; color: var(--text-soft); }

/* The tier that should win the comparison, marked before it is selected. */
.choice--featured { border-color: var(--accent-line); }

.choice__badge {
  display: inline-block; margin-left: 9px; vertical-align: 2px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  white-space: nowrap;
}
.choice__badge--soldout {
  color: #ffffff; background: #97a3af;
}

/* The list price sits above the live one so the drop reads top to bottom. */
.choice__price { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.choice__was {
  font-size: .8rem; font-weight: 500; color: var(--muted);
  text-decoration-thickness: 1.5px;
}
.choice__now { color: var(--accent-dark); font-weight: 700; }

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

.incl { display: block; margin-top: 11px; }
.incl__note {
  display: block; margin-bottom: 7px;
  font-size: .8rem; font-weight: 650; color: var(--accent-dark);
}
.incl__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.incl__list li {
  position: relative; padding-left: 20px;
  font-size: .845rem; line-height: 1.45; color: var(--text-soft);
}
/* A small gold check, drawn in CSS so there is no icon request to make. */
.incl__list li::before {
  content: ""; position: absolute; left: 2px; top: .43em;
  width: 5px; height: 9px;
  border: solid var(--accent); border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* ---------- Per-tier promo timer ---------- */

.ptimer {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 6px 11px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}
.ptimer__label {
  font-size: .715rem; font-weight: 650; letter-spacing: .01em; color: var(--accent-dark);
}
.ptimer__clock {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: .8rem; font-weight: 700; color: var(--navy);
}
.ptimer__clock i { font-style: normal; color: var(--muted); }
.ptimer__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.ptimer.is-expired { opacity: .5; }

/* ---------- Sold out ---------- */

/* Present for the anchoring, plainly not for sale: no pointer, no hover, and
   the whole row muted so the eye moves on to the tier above it. */
.choice--soldout {
  cursor: default; background: var(--surface-sunk); border-color: var(--border);
}
.choice--soldout:hover { border-color: var(--border); background: var(--surface-sunk); }
.choice--soldout .choice__name,
.choice--soldout .choice__price,
.choice--soldout .incl,
.choice--soldout .choice__note { opacity: .55; }
.choice--soldout .choice__price { text-decoration: line-through; text-decoration-color: var(--muted); }
.choice--soldout input { cursor: default; }
.choice__icon { flex: none; width: 42px; height: 42px; border-radius: var(--radius-xs); object-fit: cover; }

/* ---------- Quantity stepper ---------- */

.qty { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.qty__label { font-size: .8rem; color: var(--muted); font-weight: 550; }
.qty__control {
  display: flex; align-items: center; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden;
}
.qty__btn {
  width: 40px; height: 40px; font-size: 1.15rem; line-height: 1;
  border: 0; background: transparent; color: var(--navy); cursor: pointer;
  transition: background-color .12s ease;
}
.qty__btn:hover:not(:disabled) { background: var(--accent-tint); }
.qty__btn:disabled { color: #c7cdd3; cursor: default; }
.qty__value { min-width: 46px; text-align: center; font-weight: 650; }

/* ---------- Order summary ---------- */

.summary__rows { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; }
.row { display: flex; gap: 14px; justify-content: space-between; font-size: .92rem; }
.row__label { color: var(--text-soft); min-width: 0; }
.row__value { white-space: nowrap; font-weight: 550; color: var(--navy); }
.row--discount .row__label, .row--discount .row__value { color: var(--success); }
.row--sub { padding-top: 12px; border-top: 1px solid var(--border); }
.row--total {
  padding-top: 15px; margin-top: 4px;
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.row--total .row__label { color: var(--navy); font-weight: 650; font-size: 1rem; }
.row--total .row__value {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--navy);
}

/* ---------- Call to action ---------- */

.cta {
  width: 100%; margin-top: 22px; padding: 16px 20px; min-height: 56px;
  font: inherit; font-size: 1.02rem; font-weight: 680; letter-spacing: -.005em;
  /* Navy on gold, not white on gold: white gives 2.2:1 against #e4a11b and is
     unreadable in sunlight, navy gives 4.9:1 and passes AA. It also looks the
     more expensive of the two. */
  color: var(--navy);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 62%);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 1px 2px rgba(44, 62, 80, .1), 0 8px 20px -8px rgba(228, 161, 27, .6);
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.cta:hover:not(:disabled) {
  filter: brightness(1.04);
  box-shadow: 0 1px 2px rgba(44, 62, 80, .1), 0 12px 26px -8px rgba(228, 161, 27, .7);
  transform: translateY(-1px);
}
.cta:active:not(:disabled) { transform: translateY(0); }
.cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cta:disabled { opacity: .6; cursor: progress; box-shadow: none; transform: none; }

.cta__spinner {
  width: 17px; height: 17px; flex: none;
  border: 2px solid rgba(44, 62, 80, .28);
  border-top-color: var(--navy); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cta__spinner { animation-duration: 2.4s; }
  .cta, .choice, .field input { transition: none; }
  .cta:hover:not(:disabled) { transform: none; }
}

/* ---------- Trust ---------- */

.trust { margin: 16px 0 0; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.trust__line {
  display: inline-flex; align-items: flex-start; gap: 7px;
  font-size: .775rem; color: var(--muted); text-align: left; line-height: 1.45;
}
.trust__line svg {
  width: 13px; height: 13px; flex: none; color: var(--success);
  margin-top: .16em; /* optically level with the first line, not the block */
}
.trust__methods {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding-top: 3px;
}
.trust__method {
  font-size: .68rem; font-weight: 600; letter-spacing: .03em;
  color: var(--text-soft);
  padding: 4px 9px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.alert {
  margin-top: 16px; padding: 12px 15px; border-radius: var(--radius-xs);
  background: #fdf2f0; border: 1px solid #f0cec8; color: var(--danger);
  font-size: .875rem; line-height: 1.45;
}
.alert[hidden] { display: none; }

/* ---------- Info cards ---------- */

.info__title {
  font-size: .95rem; font-weight: 650; margin: 0 0 13px;
  color: var(--navy); letter-spacing: -.01em;
}
.info__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.info__list li {
  position: relative; padding-left: 26px;
  font-size: .885rem; color: var(--text-soft); line-height: 1.5;
}
/* A small gold check, drawn in CSS so there is no icon request to make. */
.info__list li::before {
  content: ""; position: absolute; left: 2px; top: .34em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-tint); border: 1px solid var(--accent-line);
}
.info__list li::after {
  content: ""; position: absolute; left: 6.4px; top: .62em;
  width: 3.4px; height: 6.4px;
  border: solid var(--accent-dark); border-width: 0 1.7px 1.7px 0;
  transform: rotate(43deg);
}
.info__text { margin: 0; font-size: .885rem; color: var(--text-soft); line-height: 1.55; }

/* ---------- Refund and guarantee policies ---------- */

/* Two columns of small print at the foot of the page. Quieter than a card:
   flat background, no shadow, so it reads as terms rather than as another
   pitch competing with the button above it. */
.policies {
  margin-top: 36px; padding-top: 30px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px 40px;
}
.policy__title {
  font-size: .82rem; font-weight: 700; margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--navy);
}
.policy__text { margin: 0; font-size: .855rem; line-height: 1.6; color: var(--text-soft); }
.policy__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.policy__list li {
  position: relative; padding-left: 16px;
  font-size: .855rem; line-height: 1.55; color: var(--text-soft);
}
.policy__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-line);
}

/* ---------- Page footer ---------- */

.footer {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: center; justify-content: space-between;
  font-size: .76rem; color: var(--muted);
}
.footer a { color: var(--text-soft); text-decoration: none; }
.footer a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  /* One column, and the two columns stop being boxes so their cards can be
     interleaved. Without this the sidebar's info cards land between the CTA
     and the form, burying the fields the customer still has to fill in.
     `display: contents` changes layout only — the selectors below still match. */
  .grid { display: flex; flex-direction: column; gap: 20px; }
  .col { display: contents; }

  /* Fill in the form, total and button next, reference material last. */
  .col--main > * { order: 1; }
  .col--side > .summary { order: 2; position: static; }
  .col--side > .card:not(.summary) { order: 3; }

  .countdown__units { margin-left: 0; width: 100%; }
  .countdown__unit { flex: 1; min-width: 0; }

  /* Below the two-column layout the hero image would push the first field a
     full screen down, so it goes rather than shrinks. */
  .hero--split { display: block; }
  .hero__image { display: none; }
}

@media (max-width: 600px) {
  body { padding: 0 14px 56px; }
  .policies { margin-top: 28px; padding-top: 24px; gap: 24px; }
  .masthead { padding: 20px 0 24px; }
  .masthead__logo { height: 27px; }
  .masthead__secure { padding: 6px 11px; font-size: .72rem; }
  .card { padding: 20px 18px; border-radius: 15px; }
  .hero { margin-bottom: 22px; }
  .hero__desc { font-size: .935rem; }
  .fields { grid-template-columns: 1fr; gap: 14px; }
  .choice { padding: 14px 15px; gap: 12px; }
  .choice__head { flex-direction: column; gap: 3px; }
  .choice__price { flex-direction: row; align-items: baseline; gap: 8px; }
  .incl__list li { font-size: .82rem; }
  .row--total .row__value { font-size: 1.35rem; }
  .footer { justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
  .masthead__secure span { display: none; }
}

/* ---------- 404 / error ---------- */

.notfound {
  max-width: 480px; margin: 14vh auto; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 44px 32px;
}
.notfound__logo { height: 30px; width: auto; margin: 0 auto 24px; display: block; }
.notfound h1 {
  font-size: 1.32rem; margin: 0 0 10px; color: var(--navy);
  letter-spacing: -.02em; font-weight: 680;
}
.notfound p { color: var(--text-soft); margin: 0 0 26px; font-size: .93rem; }
.notfound a {
  display: inline-block; color: var(--navy); font-weight: 620;
  text-decoration: none; font-size: .9rem;
  padding: 11px 22px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); transition: border-color .14s ease, background-color .14s ease;
}
.notfound a:hover { border-color: var(--accent); background: var(--accent-tint); }

/* A quantity stepper is only meaningful once its row is selected. */
.choice:not(:has(input:checked)) .qty { display: none; }