/* Unlock: a daytime Learn Britain sky over a London skyline, with where the
   learner stands, then what paying adds beside a gold price card with its
   meaning, one button and a way out, and last what stays free and the
   questions a buyer asks. The native purchase panel reuses this pane with the default padding. */
#unlock {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: none;
  overflow-y: auto;
  overflow-anchor: none;
  background: var(--paper);
  color: var(--ink);
  border-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) solid var(--paper);
  padding: 24px 18px calc(100px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}
#unlock.show {
  display: block;
  animation: panel-enter 0.26s ease both;
}
.unlock-inner {
  display: grid;
  gap: 28px;
  max-width: 620px;
  margin: 0 auto;
}
.unlock-inner > * {
  min-width: 0;
}

/* The offer runs edge to edge: the sky fills the pane and the status-bar inset
   takes the sky's colour rather than a white strip above it. */
#unlock:has(.unlock-sky) {
  padding: 0 0 calc(100px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  border-top-color: #36bffa;
}
.unlock-inner:has(> .unlock-sky) {
  display: block;
  max-width: none;
}

/* ---------- the sky ---------- */
.unlock-sky {
  --sky-top: #36bffa;
  --sky-bottom: #9fe0fd;
  position: relative;
  padding: 26px 18px 0;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  text-align: center;
  overflow: hidden;
}
.unlock-sky h1 {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 20ch;
  color: #0b2545;
  font:
    700 clamp(26px, 7vw, 34px)/1.25 Fredoka,
    Nunito,
    system-ui,
    sans-serif;
  letter-spacing: -0.3px;
  outline: none;
}
.unlock-sky h1 em {
  font-style: normal;
  padding: 0 0.22em;
  border-radius: 0.28em;
  background: #fff;
  color: #026aa2;
  white-space: nowrap;
}
.unlock-sky-scene {
  position: relative;
  height: 128px;
  margin: 0 -18px;
}
.unlock-corgi {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 12px;
  width: 118px;
  height: 118px;
  transform: translateX(-46%);
  object-fit: contain;
}
.unlock-puff {
  position: absolute;
  z-index: 0;
  width: 56px;
  height: 28px;
  fill: #fff;
  opacity: 0.95;
}
.unlock-puff.is-one {
  left: calc(50% - 160px);
  top: 6px;
}
.unlock-puff.is-two {
  left: calc(50% + 104px);
  top: 14px;
  width: 44px;
  height: 22px;
}
.unlock-puff.is-three {
  left: calc(50% + 150px);
  top: 40px;
  width: 36px;
  height: 18px;
  opacity: 0.8;
}
/* The skyline stands behind the corgi, its feet lost in the cloud bank in front. */
.unlock-skyline {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 26px;
  display: block;
  width: 100%;
  height: 64px;
}
.unlock-skyline-blue {
  fill: #0ba5ec;
  opacity: 0.5;
}
.unlock-skyline-blue .unlock-eye {
  fill: none;
  stroke: #0ba5ec;
  stroke-width: 7;
  stroke-linecap: round;
}
.unlock-big-ben {
  fill: #ffc21b;
}
.unlock-big-ben .unlock-clock {
  fill: #fff;
}
.unlock-big-ben .unlock-clock-hands {
  fill: none;
  stroke: #0b2545;
  stroke-width: 3;
  stroke-linecap: round;
}
.unlock-clouds {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 70px;
}
.unlock-clouds-rim {
  fill: #36bffa;
}
.unlock-clouds-face {
  fill: var(--paper);
}

/* Where the learner stands, in white pills on the sky: their test date and the
   free mocks they have sat, or the real test's format when neither is known. */
.unlock-standing {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 420px;
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
}
.unlock-standing li {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 88%);
  color: #0b2545;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
}

/* ---------- the offer ---------- */
.unlock-body {
  display: grid;
  gap: 16px;
  max-width: 540px;
  margin: 0 auto;
  padding: 4px 16px 0;
}
.unlock-body > * {
  min-width: 0;
}
.unlock-body h2 {
  margin: 0;
  color: var(--ink);
  font:
    700 19px/1.25 Fredoka,
    Nunito,
    system-ui,
    sans-serif;
  letter-spacing: -0.1px;
}

/* What paying adds: one row per addition, its icon borrowed from the tab it
   lives in, so the list reads as places in the app rather than a feature grid. */
.unlock-adds-card {
  padding: 16px 16px 6px;
  border: 2px solid var(--line-2);
  border-radius: 20px;
  background: var(--paper);
}
.unlock-adds {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.unlock-adds li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.unlock-adds li + li {
  border-top: 1px solid var(--line-1);
}
.unlock-add-icon {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.unlock-adds b {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
}
.unlock-adds small {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

/* The price card: gold like the button and the coin, the price with its
   meaning beside it (rule C4), then the one action and the way out. */
.unlock-offer {
  --gold-soft: #fff6d1;
  --gold-line: #ffc21b;
  padding: 14px 16px 6px;
  border: 2px solid var(--gold-line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--gold-soft), var(--paper) 72%);
  text-align: center;
}
.unlock-offer-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.unlock-offer-head img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.unlock-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--ink);
}
.unlock-price b {
  font:
    700 46px/1.05 Fredoka,
    Nunito,
    sans-serif;
  letter-spacing: -1px;
}
.unlock-price span {
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 800;
}
.unlock-payment-note {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.45;
  text-wrap: balance;
}
.unlock-lifetime {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  text-wrap: balance;
}
.unlock-not-open {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 70%);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  text-wrap: balance;
}
.unlock-honest {
  margin: 14px 0 6px;
  padding: 14px;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* What stays free, and the questions a buyer asks before paying. */
.unlock-free,
.unlock-questions {
  padding: 4px 4px 0;
}
.unlock-free .unlock-list {
  margin-top: 4px;
}
.unlock-free .unlock-list li {
  padding: 5px 0;
  font-size: 14.5px;
}
.unlock-free .unlock-tick {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}
.unlock-questions dl {
  margin: 4px 0 0;
}
.unlock-questions dl > div {
  padding: 10px 0;
}
.unlock-questions dl > div + div {
  border-top: 1px solid var(--line-1);
}
.unlock-questions dt {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
}
.unlock-questions dd {
  margin: 3px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}
.unlock-questions a {
  color: var(--brand-ink);
  font-weight: 800;
}

[data-theme="dark"] .unlock-offer {
  --gold-soft: #2b2410;
  --gold-line: #b88a12;
}
[data-theme="dark"] .unlock-not-open {
  background: rgb(0 0 0 / 22%);
}
[data-theme="dark"] .unlock-standing li {
  background: rgb(13 21 32 / 78%);
  color: #fff;
}

/* Lists stay for the gate a locked lesson opens. */
.unlock-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.unlock-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.unlock-tick {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #1cb0f6;
}

/* The hit area contains the face at both heights. Only the face sinks; the
   base stays below it, just like the lesson buttons. */
.unlock-cta-wrap {
  position: relative;
  margin-top: 20px;
  isolation: isolate;
}
.unlock-cta {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0 0 6px;
  border-radius: 16px;
  color: #754609;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
  touch-action: pan-y;
}
.unlock-cta::before {
  content: "";
  position: absolute;
  inset: 6px 0 0;
  border-radius: inherit;
  background: #efb315;
  box-shadow: 0 2px 0 #ce9209;
  pointer-events: none;
}
/* Moving descendants must not change the hit target near the upper edge. */
.unlock-cta * {
  pointer-events: none;
}
.unlock-cta-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: inherit;
  background:
    linear-gradient(134deg, transparent 0 20%, #fff39470 20% 28%, transparent 28%) padding-box,
    linear-gradient(150deg, #ffe25b, #ffc21b 48%, #ffd139 80%, #ffbf12);
  box-shadow: inset 0 2px 0 #fff49a;
  transition:
    transform 0.1s var(--ease),
    filter 0.1s var(--ease);
}
.unlock-cta:not(:disabled):hover .unlock-cta-face {
  filter: brightness(1.05);
}
.unlock-cta.is-pressed:not(:disabled) .unlock-cta-face,
.unlock-cta:not(:disabled):active .unlock-cta-face {
  transform: translateY(6px);
}
.unlock-cta-label {
  text-align: center;
}
.unlock-cta:disabled {
  cursor: default;
}
.unlock-cta:focus-visible {
  outline: 3px solid #1289b9;
  outline-offset: 4px;
}
/* "No thanks" is a way out, so it reads as a link rather than a second offer. */
.unlock-keep {
  display: block;
  min-height: 48px;
  margin: 10px auto 0;
  padding: 12px 20px;
  border-radius: 12px;
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 850;
}
.unlock-keep:hover {
  background: var(--panel);
}

.unlock-checkout-status {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.unlock-smallprint {
  max-width: 540px;
  margin: 18px auto 0;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}
.unlock-smallprint a {
  color: var(--brand-ink);
}

/* ---------- the gate ---------- */
.unlock-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  background: rgb(7 24 39 / 55%);
  animation: unlock-gate-in 0.2s ease both;
}
.unlock-gate-card {
  width: 100%;
  max-width: 540px;
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 20px calc(22px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 -8px 30px rgb(0 0 0 / 18%);
  animation: unlock-gate-rise 0.26s var(--ease) both;
}
.unlock-gate-corgi {
  display: block;
  width: 130px;
  height: 130px;
  margin: 0 auto 4px;
  object-fit: contain;
}
.unlock-gate-lock {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 4px auto 10px;
  border-radius: 50%;
  background: #e6ecf2;
  color: #46566a;
}
.unlock-gate-lock svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.unlock-gate-card h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.2px;
  line-height: 1.2;
  text-wrap: balance;
}
.unlock-gate-card > p {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-2);
}
.unlock-gate-card .unlock-list {
  text-align: left;
  margin: 8px auto 16px;
  max-width: 320px;
}
.unlock-gate-card .unlock-list li {
  padding: 5px 0;
  font-size: 14px;
}
.unlock-gate-card .unlock-cta-face {
  min-height: 64px;
}
.unlock-gate-secondary {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 2px solid var(--line-2);
  border-radius: 16px;
  background: var(--paper);
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--line-2);
}
.unlock-gate-secondary:active {
  transform: translateY(4px);
  box-shadow: none;
}
body.unlock-gate-open {
  overflow: hidden;
}
@keyframes unlock-gate-in {
  from {
    opacity: 0;
  }
}
@keyframes unlock-gate-rise {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

@media (min-width: 720px) {
  .unlock-gate {
    place-items: center;
    padding: 24px;
  }
  .unlock-gate-card {
    border-radius: 24px;
    padding-bottom: 22px;
  }
}

@media (min-width: 960px) {
  #unlock {
    left: var(--desktop-rail, 0px);
    padding: clamp(28px, 3.4vw, 64px) clamp(24px, 3.4vw, 64px) 36px;
  }
  /* On a laptop the offer, down to No thanks, fits one screen: a shorter sky
     with a one-line headline, then what paying adds beside the price card.
     What stays free and the questions sit below. Tall screens get the full sky. */
  #unlock:has(.unlock-sky) {
    padding: 0 0 32px;
  }
  .unlock-inner:not(:has(> .unlock-sky)) {
    max-width: none;
  }
  .unlock-sky {
    padding-top: 22px;
  }
  .unlock-sky h1 {
    max-width: none;
    font-size: 32px;
  }
  .unlock-sky h1 br {
    display: none;
  }
  .unlock-standing {
    max-width: none;
    margin-top: 10px;
  }
  /* The corgi stands on the cloud line rather than behind it: only its feet dip below. */
  .unlock-sky-scene {
    height: 132px;
  }
  .unlock-corgi {
    width: 104px;
    height: 104px;
    bottom: 36px;
  }
  .unlock-puff.is-one {
    left: calc(50% - 250px);
    top: 14px;
  }
  .unlock-puff.is-two {
    left: calc(50% + 150px);
    top: 4px;
  }
  .unlock-puff.is-three {
    left: calc(50% + 250px);
    top: 44px;
  }
  .unlock-skyline {
    height: 84px;
  }
  .unlock-body {
    max-width: 900px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    column-gap: 24px;
    row-gap: 22px;
    padding: 0 24px;
  }
  .unlock-adds li {
    padding: 8px 0;
  }
  /* The list keeps its own height when a press message grows the price card. */
  .unlock-adds-card {
    align-self: start;
  }
  /* The price card matches the height of the list beside it, its contents centred. */
  .unlock-offer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 20px 6px;
  }
  .unlock-free,
  .unlock-questions {
    padding-top: 0;
  }
  .unlock-smallprint {
    margin-top: 10px;
  }
}
@media (min-width: 960px) and (min-height: 940px) {
  .unlock-sky {
    padding-top: 40px;
  }
  .unlock-sky h1 {
    font-size: 38px;
  }
  .unlock-sky-scene {
    height: 230px;
    margin-top: 4px;
  }
  .unlock-corgi {
    width: 184px;
    height: 184px;
    bottom: 48px;
  }
  .unlock-puff.is-one {
    left: calc(50% - 330px);
    top: 40px;
    width: 72px;
    height: 36px;
  }
  .unlock-puff.is-two {
    left: calc(50% + 190px);
    top: 16px;
    width: 56px;
    height: 28px;
  }
  .unlock-puff.is-three {
    left: calc(50% + 320px);
    top: 100px;
  }
  .unlock-skyline {
    height: 140px;
    bottom: 44px;
  }
  .unlock-clouds {
    height: 110px;
  }
  .unlock-adds li {
    padding: 11px 0;
  }
}
@media (max-width: 359px) {
  .unlock-body {
    padding-inline: 12px;
  }
  .unlock-offer .unlock-cta {
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  .unlock-adds li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }
  .unlock-add-icon {
    width: 36px;
    height: 36px;
  }
  .unlock-price b {
    font-size: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #unlock.show,
  .unlock-gate,
  .unlock-gate-card {
    animation: none;
  }
  .unlock-cta-face {
    transition: none;
  }
  .unlock-cta.is-pressed:not(:disabled) .unlock-cta-face,
  .unlock-cta:not(:disabled):active .unlock-cta-face {
    transform: translateY(0);
    filter: brightness(0.94);
  }
}