/* The £70 course upgrade checkout, laid over /checkout.css.
   The upgrade page's look (navy, the floodlit bench, Instrument Serif with the
   blue italic) for the opening, the white order card across the cut, cream
   below. No dot grid, no pill labels. */

.cc {
  --navy: #141D24;
  --navy-deep: #0E151B;
  --light: #C7D1D9;
  --light-soft: #8FA1AE;
  --blue-light: #6FAEE6;
  position: relative;
}

/* ------------------------------------------------------------- the band */
.band {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: var(--band, 640px); overflow: hidden;
  background: linear-gradient(180deg, #172129 0%, var(--navy) 50%, var(--navy-deep) 100%);
}
.band img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 30%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 30%, #000 70%);
  animation: cc-drift 22s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes cc-drift { from { transform: scale(1.1); } to { transform: scale(1.02); } }
.band__light {
  position: absolute; inset: 0;
  background:
    radial-gradient(50rem 30rem at 82% 20%, rgba(50, 129, 188, .26), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(14, 21, 27, .85) 100%);
}
/* A soft lip where the navy meets the cream. */
.band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------------- header */
.cc .bar { background: transparent; border-bottom-color: rgba(255, 255, 255, .08); }
.cc .bar__brand { color: #F4F1EA; }
.cc .bar__tile { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.cc .bar__secure { color: var(--light-soft); }
.cc .bar__secure svg { color: var(--blue-light); }

/* ---------------------------------------------------------------- hero */
.cc .hero { color: #F4F1EA; }
.cc .kicker { color: var(--blue-light); }
.cc__h {
  margin-top: 18px;
  font: 400 clamp(2.4rem, 1.5rem + 3.1vw, 4.1rem)/1.02 var(--f-display);
  letter-spacing: -0.026em; text-wrap: balance; color: #fff;
}
.cc__h em { font-style: italic; color: var(--blue-light); }
.cc__lede { margin-top: 18px; max-width: 36em; font-size: clamp(1.02rem, .98rem + .25vw, 1.14rem); line-height: 1.6; color: var(--light); }
.cc__lede + .cc__lede { margin-top: 12px; }
.js .cc .hero > * { animation: cc-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.js .cc .hero > :nth-child(2) { animation-delay: .06s; }
.js .cc .hero > :nth-child(3) { animation-delay: .12s; }
.js .cc .hero > :nth-child(4) { animation-delay: .18s; }
@keyframes cc-rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------------------------------------------------------- order card */
.cc .order__card {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 50px 100px -40px rgba(8, 13, 17, .65), 0 0 0 1px rgba(20, 29, 36, .06), 0 0 120px -40px rgba(50, 129, 188, .45);
}
.cc__card-h { font: 600 1.35rem/1.2 var(--f-work); letter-spacing: -0.01em; }
.cc .order__product { margin-top: 16px; }
.cc .order__cover { width: 58px; }
.cc .order__meta s { margin-right: 4px; color: var(--muted); }

.cc__table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 14px; }
.cc__table th, .cc__table td { padding: 10px 0; text-align: left; vertical-align: top; }
.cc__table thead th { padding-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); }
.cc__table th:last-child, .cc__table td:last-child { text-align: right; white-space: nowrap; padding-left: 16px; }
.cc__table tbody td { border-bottom: 1px solid var(--hair); line-height: 1.45; }
.cc__table tfoot th { font-weight: 600; }
.cc__table tfoot td { font: 600 1.5rem/1 var(--f-work); }

/* The guarantee, under the card. */
.cc__guarantee {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  margin-top: 16px; padding: 20px; border-radius: var(--r-card);
  background: var(--white); border: 1px solid var(--hair); box-shadow: var(--shadow);
}
.cc__guarantee h3 { font: 600 1.05rem/1.3 var(--f-work); letter-spacing: -0.005em; }
.cc__guarantee p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cc__guarantee p:last-child { color: var(--ink); font-weight: 500; }
.cc__seal {
  display: grid; place-items: center; align-content: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--navy); color: #fff; box-shadow: 0 0 0 4px rgba(50, 129, 188, .18);
}
.cc__seal strong { font: 400 1.7rem/0.9 var(--f-display); }
.cc__seal span { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); }

/* ---------------------------------------------------------------- body */
.cc .body h2 { font: 400 clamp(2rem, 1.4rem + 2vw, 2.9rem)/1.04 var(--f-display); letter-spacing: -0.022em; max-width: 20ch; }

.cc__credit {
  position: relative; padding: clamp(22px, 4vw, 34px); border-radius: var(--r-card);
  background: var(--white); border: 1px solid var(--hair); box-shadow: var(--shadow);
}
.cc__credit::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--blue); }
.cc .cc__credit h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); margin-top: 14px; }
.cc__credit p { margin-top: 12px; max-width: 38em; color: var(--muted); }
.cc__credit .cc__strong { color: var(--ink); font-weight: 600; }
.cc__sum { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-work); }
.cc__was { position: relative; font-size: 1.35rem; color: var(--muted); }
.cc__was svg { position: absolute; left: -8%; top: 18%; width: 116%; height: 70%; overflow: visible; }
.cc__was path { fill: none; stroke: #E8786E; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 120; stroke-dashoffset: 0; }
.js .cc__credit:not(.is-in) .cc__was path { stroke-dashoffset: 120; }
.js .cc__credit .cc__was path { transition: stroke-dashoffset .7s cubic-bezier(.2, .7, .2, 1) .5s; }
.cc__arrow { color: var(--muted); align-self: center; }
.cc__now { font-size: 2.2rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

.cc__getting .points { margin-top: 24px; }
.cc .point h3 { font-size: 1.12rem; }

.cc__steps { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.cc__steps li { position: relative; padding: 0 0 26px 56px; counter-increment: s; }
.cc__steps li::before {
  content: counter(s); position: absolute; left: 0; top: -4px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: #fff;
  font: 400 1.3rem/1 var(--f-display); box-shadow: 0 0 0 5px rgba(50, 129, 188, .14);
}
.cc__steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 18px; top: 40px; bottom: 2px; width: 2px;
  background: linear-gradient(var(--blue-hair), rgba(50, 129, 188, .1));
}
.cc__steps h3 { font: 600 1.1rem/1.3 var(--f-work); }
.cc__steps p { margin-top: 6px; color: var(--muted); max-width: 38em; }

.cc__stars { display: block; margin-bottom: 10px; color: #E3A008; letter-spacing: .14em; font-size: 13px; }
.cc .quote--feature blockquote p { color: #fff; }
.cc .quotes .quote:last-child { grid-column: 1 / -1; }

.cc__close { max-width: 520px; }
.cc__close-h { margin-bottom: 14px; font: 400 clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem)/1.1 var(--f-display); letter-spacing: -0.02em; }
.cc__close-h s { color: var(--muted); font-size: .7em; margin: 0 4px; }

/* -------------------------------------------------------------- phones */
@media (max-width: 979px) {
  .cc .layout { padding-top: 28px; }
  .cc__h { margin-top: 14px; }
  .band img { opacity: .4; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 60%, transparent 100%); }
  .cc .bar__brand > span:last-child { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .band img, .js .cc .hero > * { animation: none; }
  .js .cc__credit:not(.is-in) .cc__was path { stroke-dashoffset: 0; }
  .js .cc__credit .cc__was path { transition: none; }
}

/* The free Game Model Builder line on the £97 course checkout (19 October 2026). */
.cc__bonus td { background: rgba(50, 129, 188, .07); }
.cc__bonus td:first-child { padding-left: 10px; border-left: 3px solid var(--blue); }
.cc__bonus td:last-child { padding-right: 10px; color: var(--blue-deep); font-weight: 600; }
.cc__bonus td:last-child s { margin-right: 4px; color: var(--muted); font-weight: 400; }
.cc__bonus strong { display: block; font-weight: 600; color: var(--ink); }
.cc__bonus span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.cc__bonus [data-bonus-until] { display: inline; margin: 0; font-size: inherit; color: var(--ink); }