/* ==========================================================================
   PREP4STEP — Trial and billing surfaces
   --------------------------------------------------------------------------
   Depends on step-design-system.css for every token. Nothing here invents a
   colour: the palette is the platform's own emerald ground with gold reserved
   for the single action the student is being asked to take.

   The pricing panel is deliberately the highest-contrast element on the page.
   A free trial that ends in a charge is only honest if the charge is easier to
   read than the word "free", so the future amount and its date are given more
   visual weight than the offer headline.
   ========================================================================== */

.see-trial {
  --trial-panel: var(--see-surface-2);
}

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

/*
 * Restore the shell's gutters for this screen.
 *
 * The design system flattens every `main` under `body.see-app` with
 * `!important` so a block theme cannot impose its reading measure on a
 * platform screen. That rule cannot tell the theme's wrapper apart from the
 * shell's own `<main class="see-shell__main">`, so it strips the shell's
 * max-width and padding too. Screens that carry their own inner container do
 * not notice; these screens lay out directly in the main element, so they put
 * the gutters back. Scoped to `.see-trial` so no other screen is affected.
 */
body.see-app .see-trial > .see-shell__main {
  width: 100% !important;
  max-width: var(--see-shell-max) !important;
  margin-inline: auto !important;
  padding: var(--see-s8) var(--see-shell-gutter) var(--see-s11) !important;
}

.see-trial__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  gap: var(--see-s8);
  align-items: start;
  padding: var(--see-s8) 0 var(--see-s10);
}

.see-trial__lead { min-width: 0; }

.see-trial__eyebrow {
  display: inline-block;
  font-size: var(--see-t-xs);
  letter-spacing: 0.18em;
  color: var(--see-gold);
  margin-bottom: var(--see-s3);
}

.see-trial__title {
  font-size: var(--see-t-2xl);
  line-height: 1.25;
  margin: 0 0 var(--see-s4);
  color: var(--see-text);
}

.see-trial__copy {
  color: var(--see-text-soft);
  font-size: var(--see-t-md);
  line-height: 1.85;
  margin: 0 0 var(--see-s5);
  max-width: 58ch;
}

.see-trial__copy--good { color: var(--see-green-bright); }

.see-trial__benefits {
  list-style: none;
  margin: 0 0 var(--see-s7);
  padding: 0;
  display: grid;
  gap: var(--see-s3);
}

.see-trial__benefits li {
  position: relative;
  padding-inline-start: var(--see-s6);
  color: var(--see-text-soft);
  line-height: 1.7;
}

.see-trial__benefits li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--see-green);
}

.see-trial__cta { margin-top: var(--see-s2); }

/* --------------------------------------------------------------------------
   Pricing panel — the disclosure
   -------------------------------------------------------------------------- */

.see-trial__aside { position: sticky; top: var(--see-s6); }

.see-price {
  background: linear-gradient(180deg, var(--see-surface-3), var(--see-surface));
  border: 1px solid var(--see-line-gold);
  border-radius: var(--see-r-lg);
  padding: var(--see-s6);
  box-shadow: var(--see-e2);
}

.see-price__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--see-s4);
  padding: var(--see-s3) 0;
  border-bottom: 1px solid var(--see-line);
}

.see-price__label { color: var(--see-muted); font-size: var(--see-t-sm); }
.see-price__value { color: var(--see-text); font-weight: 700; font-size: var(--see-t-md); }
.see-price__value--free { color: var(--see-green-bright); font-size: var(--see-t-xl); }

.see-price__row--after .see-price__value { color: var(--see-gold-bright); font-size: var(--see-t-lg); }

/* The single most important line: when money actually moves. */
.see-price__charge {
  margin-top: var(--see-s5);
  padding: var(--see-s4);
  border-radius: var(--see-r);
  background: var(--see-gold-dim);
  border: 1px solid var(--see-gold-line);
  display: grid;
  gap: var(--see-s1);
}

.see-price__charge-label {
  font-size: var(--see-t-xs);
  color: var(--see-gold);
  letter-spacing: 0.04em;
}

.see-price__charge-value {
  font-size: var(--see-t-md);
  color: var(--see-text);
  line-height: 1.5;
}

.see-price__note {
  margin: var(--see-s4) 0 0;
  font-size: var(--see-t-sm);
  color: var(--see-text-soft);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Step rail
   -------------------------------------------------------------------------- */

/* Centred above the panel it describes. Left to the page direction it sat
   hard against one edge, reading as something that had come loose rather than
   as the heading of the object below it. */
.see-trial-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--see-s3) var(--see-s6);
  list-style: none;
  margin: var(--see-s5) 0 0;
  padding: 0;
}

.see-trial-rail__item {
  display: inline-flex;
  align-items: center;
  gap: var(--see-s2);
  color: var(--see-muted-2);
  font-size: var(--see-t-sm);
}

.see-trial-rail__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--see-line-strong);
  font-size: var(--see-t-xs);
  font-family: var(--see-font-num);
}

.see-trial-rail__item.is-current { color: var(--see-text); }
.see-trial-rail__item.is-current .see-trial-rail__dot {
  border-color: var(--see-gold);
  background: var(--see-gold-dim);
  color: var(--see-gold-bright);
}

.see-trial-rail__item.is-done { color: var(--see-text-soft); }
.see-trial-rail__item.is-done .see-trial-rail__dot {
  border-color: var(--see-green-line);
  background: var(--see-green-dim);
  color: var(--see-green-bright);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.see-form { display: grid; gap: var(--see-s4); max-width: 460px; }

.see-form__field { display: grid; gap: var(--see-s2); }

.see-form__label { font-size: var(--see-t-sm); color: var(--see-text-soft); }

.see-form__input {
  width: 100%;
  padding: var(--see-s3) var(--see-s4);
  border-radius: var(--see-r-sm);
  border: 1px solid var(--see-line-strong);
  background: var(--see-surface-deep);
  color: var(--see-text);
  font-family: var(--see-font);
  font-size: var(--see-t-base);
  transition: border-color var(--see-dur) var(--see-ease);
}

.see-form__input:focus {
  outline: none;
  border-color: var(--see-gold);
  box-shadow: 0 0 0 3px var(--see-gold-dim);
}

.see-form__input::placeholder {
  color: var(--see-muted-2);
  opacity: 1;
}

/* Card numbers read left-to-right even in an RTL page. */
.see-form__input--card {
  direction: ltr;
  text-align: left;
  font-family: var(--see-font-num);
  letter-spacing: 0.08em;
}

.see-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--see-s4); }

.see-form__hint { font-size: var(--see-t-xs); color: var(--see-muted-2); }

.see-form__secure {
  font-size: var(--see-t-sm);
  color: var(--see-muted);
  line-height: 1.7;
  margin: 0;
}

.see-form__restate {
  margin: 0;
  padding: var(--see-s3) var(--see-s4);
  border-radius: var(--see-r-sm);
  background: var(--see-surface-deep);
  border: 1px solid var(--see-line);
  color: var(--see-text-soft);
  font-size: var(--see-t-sm);
  line-height: 1.7;
}

.see-form__stripe {
  padding: var(--see-s4);
  border-radius: var(--see-r-sm);
  border: 1px solid var(--see-line-strong);
  background: var(--see-surface-deep);
}

.see-form__error { color: var(--see-danger); font-size: var(--see-t-sm); min-height: 1.2em; }

.see-trial__alt { margin-top: var(--see-s6); }
.see-trial__alt summary {
  cursor: pointer;
  color: var(--see-gold);
  font-size: var(--see-t-sm);
  margin-bottom: var(--see-s4);
}

.see-inline-form { display: inline; }

/* Cancelling the trial: quiet until opened, and its consequence is read
   before its button. */
.see-trial__cancel summary { color: var(--see-muted); }
.see-trial__cancel .see-trial__copy { margin: 0 0 var(--see-s4); }

/* The same control on the account page's access panel. */
.see-account-plan .see-trial__cancel { margin-top: var(--see-s4); }
.see-account-plan .see-trial__cancel .see-trial__copy { color: var(--see-muted); font-size: var(--see-t-sm); line-height: 1.7; }

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.see-trial__error,
.see-trial__notice,
.see-trial__ok {
  margin: var(--see-s5) 0 0;
  padding: var(--see-s3) var(--see-s4);
  border-radius: var(--see-r-sm);
  font-size: var(--see-t-base);
  line-height: 1.7;
}

.see-trial__error {
  background: var(--see-danger-dim);
  border: 1px solid var(--see-danger);
  color: var(--see-text);
}

/* "We sent another code" is not a failure. Saying so in the box reserved for
   problems teaches a student to stop reading that box. */
.see-trial__notice {
  background: var(--see-green-dim);
  border: 1px solid var(--see-green-line);
  color: var(--see-text);
}

.see-trial__ok {
  background: var(--see-green-dim);
  border: 1px solid var(--see-green-line);
  color: var(--see-text);
}

/* Preview-mode banner. Marked clearly so it can never be mistaken for a real
   payment surface during a review. */
.see-trial__sim {
  display: grid;
  gap: var(--see-s1);
  margin-bottom: var(--see-s5);
  padding: var(--see-s4);
  border-radius: var(--see-r-sm);
  background: var(--see-info-dim);
  border: 1px dashed var(--see-info);
  color: var(--see-text-soft);
  font-size: var(--see-t-sm);
  line-height: 1.7;
}

.see-trial__sim strong { color: var(--see-info); }

/* --------------------------------------------------------------------------
   Confirmation and management
   -------------------------------------------------------------------------- */

.see-trial__confirm,
.see-trial__manage {
  max-width: 660px;
  margin: 0 auto;
  padding: var(--see-s9) 0 var(--see-s10);
  text-align: center;
}

.see-trial__manage { text-align: start; }

.see-trial__tick {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--see-s5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--see-green-bright);
  background: var(--see-green-dim);
  border: 1px solid var(--see-green-line);
}

.see-confirm-facts {
  display: grid;
  gap: var(--see-s3);
  margin: var(--see-s6) 0;
  padding: var(--see-s5);
  border-radius: var(--see-r);
  background: var(--see-surface);
  border: 1px solid var(--see-line);
  text-align: start;
}

.see-confirm-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--see-s4);
  flex-wrap: wrap;
}

.see-confirm-facts dt { color: var(--see-muted); font-size: var(--see-t-sm); margin: 0; }
.see-confirm-facts dd { color: var(--see-text); font-weight: 600; margin: 0; }

.see-trial__countdown {
  display: grid;
  gap: var(--see-s1);
  margin: var(--see-s5) 0;
  padding: var(--see-s5);
  border-radius: var(--see-r);
  background: var(--see-green-dim);
  border: 1px solid var(--see-green-line);
}

.see-trial__countdown-label { font-size: var(--see-t-sm); color: var(--see-muted); }
.see-trial__countdown-value { font-size: var(--see-t-xl); color: var(--see-green-bright); }

.see-trial__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--see-s4);
  margin-top: var(--see-s6);
  align-items: center;
}

.see-trial__confirm .see-trial__actions { justify-content: center; }

/* --------------------------------------------------------------------------
   Coming back

   The returning student's screen. Everything here is confirmation rather than
   persuasion — who they are, what is on file, what it costs — because the
   decision was made before they arrived and the only job left is to make the
   charge unambiguous before the one button that takes it.
   -------------------------------------------------------------------------- */

.see-resume__who {
  display: grid;
  gap: 2px;
  margin: 0 0 var(--see-s5);
  padding: var(--see-s4) var(--see-s5);
  border-radius: var(--see-r-sm);
  border: 1px solid var(--see-line);
  background: rgba(255, 255, 255, 0.03);
}

.see-resume__who-label {
  color: var(--see-muted-2);
  font-size: var(--see-t-xs);
  font-weight: 700;
}

.see-resume__who-name {
  color: var(--see-text);
  font-size: var(--see-t-md);
  font-weight: 800;
}

.see-resume__who-mail {
  color: var(--see-muted);
  font-family: var(--see-font-num);
  font-size: var(--see-t-sm);
  word-break: break-all;
}

.see-resume__kept {
  margin: 0 0 var(--see-s6);
  color: var(--see-text-soft);
  font-size: var(--see-t-sm);
  line-height: 1.8;
}

/* The card is stated, not assumed. A student about to be charged on a card
   they cannot see is a student about to be surprised. */
.see-resume__card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--see-s3);
  margin-bottom: var(--see-s5);
  padding: var(--see-s4) var(--see-s5);
  border-radius: var(--see-r-sm);
  border: 1px solid var(--see-green-line);
  background: var(--see-green-dim);
}

.see-resume__card-label {
  color: var(--see-muted);
  font-size: var(--see-t-xs);
  font-weight: 700;
}

.see-resume__card-value {
  color: var(--see-text);
  font-family: var(--see-font-num);
  font-size: var(--see-t-md);
  font-weight: 800;
}

.see-resume__form { margin: 0; }
.see-resume__go { display: flex; text-decoration: none; }

.see-resume__alt {
  margin: var(--see-s5) 0 0;
  text-align: center;
}

.see-resume__alt a {
  color: var(--see-muted);
  font-size: var(--see-t-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.see-resume__alt a:hover { color: var(--see-gold-bright); }

/* --------------------------------------------------------------------------
   Cancelling

   Deliberately the quietest control on the screen, and deliberately two steps.
   Cancelling now ends the trial on the spot, so the first click only opens the
   warning; the button that acts sits inside it, in the colour reserved for
   things that cannot be undone.
   -------------------------------------------------------------------------- */

.see-cancel { margin-top: var(--see-s7); }

.see-cancel__open {
  display: inline-block;
  cursor: pointer;
  color: var(--see-muted);
  font-size: var(--see-t-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}

.see-cancel__open::-webkit-details-marker { display: none; }
.see-cancel__open:hover { color: var(--see-text-soft); }

.see-cancel__panel {
  margin-top: var(--see-s4);
  padding: var(--see-s5);
  border-radius: var(--see-r);
  border: 1px solid var(--see-danger);
  background: var(--see-danger-dim);
  max-width: 52ch;
}

.see-cancel__q {
  margin: 0 0 var(--see-s2);
  color: var(--see-text);
  font-size: var(--see-t-md);
  font-weight: 800;
  line-height: 1.5;
}

.see-cancel__warn {
  margin: 0 0 var(--see-s5);
  color: var(--see-text-soft);
  font-size: var(--see-t-sm);
  line-height: 1.8;
}

.see-cancel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--see-s3);
  align-items: center;
}

/* The only destructive button in the flow, and the only place this colour is
   used as a fill. Nothing else on the platform should look like it. */
.see-cancel__yes {
  border: 1px solid var(--see-danger);
  background: transparent;
  color: var(--see-danger);
  font-weight: 700;
}

.see-cancel__yes:hover {
  background: var(--see-danger);
  color: #2b0a0d;
}

/* Restoring renewal is a separate, non-destructive decision. It still uses a
   two-step disclosure because the confirmation authorises a future charge. */
.see-renewal-restore { margin-top: var(--see-s7); }

.see-renewal-restore__open {
  display: inline-block;
  cursor: pointer;
  color: var(--see-green-bright);
  font-size: var(--see-t-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}

.see-renewal-restore__open::-webkit-details-marker { display: none; }
.see-renewal-restore__open:hover { color: var(--see-text); }

.see-renewal-restore__panel {
  margin-top: var(--see-s4);
  padding: var(--see-s5);
  border-radius: var(--see-r);
  border: 1px solid var(--see-green-line);
  background: var(--see-green-dim);
  max-width: 52ch;
}

.see-renewal-restore__q {
  margin: 0 0 var(--see-s2);
  color: var(--see-text);
  font-size: var(--see-t-md);
  font-weight: 800;
  line-height: 1.5;
}

.see-renewal-restore__warn {
  margin: 0 0 var(--see-s5);
  color: var(--see-text-soft);
  font-size: var(--see-t-sm);
  line-height: 1.8;
}

.see-renewal-restore__yes {
  border: 1px solid var(--see-green);
  background: var(--see-green);
  color: #062719;
  font-weight: 800;
}

.see-renewal-restore__yes:hover {
  border-color: var(--see-green-bright);
  background: var(--see-green-bright);
}

/* Review-only control. Understated on purpose: it is a tool for the reviewer,
   not part of the student's journey. */
.see-trial__ff {
  margin-top: var(--see-s8);
  padding-top: var(--see-s5);
  border-top: 1px dashed var(--see-line-strong);
  display: grid;
  gap: var(--see-s2);
  justify-items: start;
}

.see-trial__ff-btn {
  background: none;
  border: 1px dashed var(--see-info);
  color: var(--see-info);
  border-radius: var(--see-r-pill);
  padding: var(--see-s2) var(--see-s5);
  font-family: var(--see-font);
  font-size: var(--see-t-sm);
  cursor: pointer;
}

.see-trial__ff-note { font-size: var(--see-t-xs); color: var(--see-muted-2); }

/* --------------------------------------------------------------------------
   Locked state, shown where content used to be
   -------------------------------------------------------------------------- */

.see-locked {
  display: grid;
  gap: var(--see-s4);
  justify-items: center;
  text-align: center;
  padding: var(--see-s9) var(--see-s6);
  border-radius: var(--see-r-lg);
  background: var(--see-surface);
  border: 1px solid var(--see-line-gold);
}

.see-locked__title { font-size: var(--see-t-xl); color: var(--see-text); margin: 0; }
.see-locked__copy { color: var(--see-text-soft); margin: 0; max-width: 46ch; line-height: 1.8; }

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

@media (max-width: 900px) {
  .see-trial__grid { grid-template-columns: 1fr; gap: var(--see-s6); }
  .see-trial__aside { position: static; }
  .see-trial__title { font-size: var(--see-t-xl); }
}

@media (max-width: 480px) {
  .see-form__pair { grid-template-columns: 1fr; }
  .see-trial__actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .see-form__input { transition: none; }
}

/* ==========================================================================
   The checkout

   The offer and account steps are one object, not a page with things on it:
   a single framed panel split down the middle. The fields take the reading
   side; what they buy takes the other, on its own tinted surface, divided by
   a hairline rather than by empty ground.

   That split is the whole design decision. Two separate cards floating on the
   page ground read as two unrelated things — and because the fields column is
   always the taller of the two, the shorter card stopped two thirds of the
   way down and left a step in the composition. Inside one frame the halves
   are the same height by construction, and the summary can carry its own
   surface without competing.

   Nothing here invents a colour. The ground, the lines and the two accents
   are the design system's; gold stays reserved for the single action the
   student is being asked to take.
   ========================================================================== */

.see-co {
  position: relative;
  padding: var(--see-s6) 0 var(--see-s10);
}

/* One light source, behind the top edge of the frame, so the panel appears
   lit rather than pasted onto the background. Decorative, and hidden. */
.see-co__glow {
  position: absolute;
  inset: -40px 0 auto;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(46% 62% at 50% 0%, rgba(242, 173, 29, 0.13), transparent 72%),
    radial-gradient(56% 70% at 72% 12%, rgba(27, 209, 124, 0.10), transparent 72%);
  filter: blur(4px);
}

/* The frame: a 1px gradient edge with the halves painted inside it, so the
   line changes intensity around the object instead of sitting flat. */
.see-co__frame {
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
  padding: 1px;
  border-radius: calc(var(--see-r-xl) + 1px);
  background: linear-gradient(150deg, rgba(242, 173, 29, 0.42), rgba(255, 255, 255, 0.07) 42%, rgba(27, 209, 124, 0.26));
  box-shadow: var(--see-e3);
}

.see-co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  border-radius: var(--see-r-xl);
  background: linear-gradient(180deg, var(--see-surface-2), var(--see-surface));
  /* The summary's tint must stop at the frame's rounded corner, not square
     off against it. */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   The fields
   -------------------------------------------------------------------------- */

.see-co__main {
  min-width: 0;
  padding: var(--see-s9) var(--see-s8) var(--see-s8);
}

.see-co__head {
  margin-bottom: var(--see-s7);
}

.see-co__title {
  margin: 0;
  color: var(--see-text);
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.see-co__lede {
  margin: var(--see-s3) 0 0;
  color: var(--see-muted);
  font-size: var(--see-t-sm);
  line-height: 1.7;
}

/* The shared form caps itself at 460px for the narrow screens elsewhere in
   this flow. Here it has a column of its own, so it fills it. */
.see-co__main .see-form { max-width: none; gap: var(--see-s5); }

/* Fields are the work of this screen, so they are given the size of work
   rather than the size of a footnote. */
.see-co__main .see-form__input {
  padding: 13px var(--see-s4);
  border-radius: var(--see-r-sm);
  background: var(--see-surface-deep);
  font-size: var(--see-t-md);
}

.see-co__main .see-form__label {
  font-size: var(--see-t-sm);
  font-weight: 700;
  color: var(--see-text-soft);
}

.see-co__submit {
  width: 100%;
  margin-top: var(--see-s3);
  padding-block: 14px;
  justify-content: center;
  font-size: var(--see-t-md);
}

.see-co__microcopy {
  margin: 0;
  color: var(--see-muted-2);
  font-size: var(--see-t-xs);
  text-align: center;
}

.see-co__alt {
  margin-top: var(--see-s6);
  padding-top: var(--see-s6);
  border-top: 1px solid var(--see-line);
}

.see-co__alt > summary {
  cursor: pointer;
  color: var(--see-text-soft);
  font-size: var(--see-t-sm);
  font-weight: 700;
  list-style: none;
}

.see-co__alt > summary::-webkit-details-marker { display: none; }

.see-co__alt > summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-inline-end: var(--see-s2);
  border-radius: 50%;
  border: 1px solid var(--see-line-strong);
  color: var(--see-muted);
  font-size: 13px;
  font-weight: 700;
  vertical-align: -4px;
}

.see-co__alt[open] > summary::before { content: "−"; }
.see-co__alt > summary:hover { color: var(--see-gold-bright); }
.see-co__alt[open] > summary { margin-bottom: var(--see-s5); }

/* --------------------------------------------------------------------------
   What the fields buy

   Its own surface, one shade up from the fields, separated by a hairline on
   the edge they share. The tint is what makes the split legible; without it
   the frame is just a box with a line down it.
   -------------------------------------------------------------------------- */

.see-co__summary {
  padding: var(--see-s9) var(--see-s7) var(--see-s8);
  border-inline-start: 1px solid var(--see-line);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(242, 173, 29, 0.09), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
}

.see-co__plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--see-s3);
}

.see-co__plan-kicker {
  margin: 0;
  color: var(--see-muted);
  font-size: var(--see-t-xs);
  font-weight: 800;
  letter-spacing: 0.18em;
}

.see-co__plan-badge {
  padding: 5px 12px;
  border-radius: var(--see-r-pill);
  background: linear-gradient(180deg, var(--see-gold-bright), var(--see-gold));
  color: #1a1205;
  font-size: var(--see-t-xs);
  font-weight: 800;
  white-space: nowrap;
}

/* The one place on this half that takes real scale. Everything under it is
   set small and quiet, so the number is unmistakably the subject. */
.see-co__plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--see-s2);
  margin: var(--see-s6) 0 0;
}

.see-co__plan-amount {
  color: var(--see-text);
  font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.see-co__plan-period {
  color: var(--see-muted);
  font-size: var(--see-t-md);
  font-weight: 700;
}

.see-co__plan-after {
  margin: var(--see-s3) 0 0;
  color: var(--see-muted);
  font-size: var(--see-t-sm);
  line-height: 1.6;
}

.see-co__features {
  display: grid;
  gap: var(--see-s4);
  margin: var(--see-s6) 0 0;
  padding: var(--see-s6) 0 0;
  border-top: 1px solid var(--see-line);
  list-style: none;
}

.see-co__feature {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--see-s3);
  align-items: start;
  color: var(--see-text-soft);
  font-size: var(--see-t-base);
  line-height: 1.55;
}

/* A drawn tick rather than the ✓ character: the glyph is a different weight
   and baseline in every font that might resolve, and at 11px that difference
   is the difference between a mark and a smudge. */
.see-co__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(18, 185, 106, 0.22);
  color: var(--see-green-bright);
}

/* The disclosure is shared with the payment step, and every word of it, every
   value and every emphasis is left exactly as that step renders them. Only the
   container is dropped: on the payment step .see-price is a card on the page
   ground, and here it would be a card inside a card, which reads as the terms
   being boxed away in a corner of the panel rather than being part of it. The
   hairline keeps them delimited. */
.see-co__summary .see-price {
  margin-top: var(--see-s7);
  padding: var(--see-s6) 0 0;
  border: 0;
  border-top: 1px solid var(--see-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* 4.12.0: the sign-up summary states the free tests first, then full access
   under its own hairline, set one step quieter so "free" stays the subject. */
.see-co__upgrade {
  margin-top: var(--see-s8);
  padding-top: var(--see-s7);
  border-top: 1px solid var(--see-line);
}

.see-co__upgrade .see-co__plan-amount {
  font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.4rem);
}

.see-co__plan-badge--quiet {
  background: transparent;
  border: 1px solid var(--see-gold-line, rgba(242, 173, 29, 0.4));
  color: var(--see-gold-bright);
}


/* --------------------------------------------------------------------------
   Proving the address

   The screen exists to be passed, so the two things a stuck student needs —
   the address as it was actually saved, and a way to change it — are given
   more room than the field itself.
   -------------------------------------------------------------------------- */

.see-verify__sent {
  margin: 0 0 var(--see-s6);
  padding: var(--see-s4) var(--see-s5);
  border-radius: var(--see-r-sm);
  border: 1px solid var(--see-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--see-muted);
  font-size: var(--see-t-sm);
  line-height: 1.8;
}

/* The address is the whole point of the screen: it is set to be read
   character by character, not skimmed, because spotting the wrong one here is
   the last chance to spot it for free. */
.see-verify__address {
  display: block;
  margin-top: var(--see-s2);
  color: var(--see-text);
  font-family: var(--see-font-num);
  font-size: var(--see-t-md);
  font-weight: 700;
  letter-spacing: 0.01em;
  word-break: break-all;
}

.see-verify__code {
  font-family: var(--see-font-num);
  font-size: 1.9rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.42em;
  /* The tracking is applied on both sides of every glyph, which leaves the
     run visually off-centre. Half of it back on the trailing edge re-centres
     the digits inside the field. */
  text-indent: 0.42em;
  padding-block: var(--see-s4);
}

.see-verify__code::placeholder {
  color: var(--see-muted-2);
  opacity: 1;
  font-weight: 600;
}

.see-verify__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--see-s3);
  margin-top: var(--see-s5);
}

.see-verify__hint {
  margin: 0;
  color: var(--see-muted-2);
  font-size: var(--see-t-xs);
  line-height: 1.7;
}

.see-verify__resend { margin: 0; }

.see-verify__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--see-gold-bright);
  font-family: inherit;
  font-size: var(--see-t-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.see-verify__link:hover { color: var(--see-gold); }

/* Throttled rather than hidden. A button that disappears reads as a bug; one
   that stays and says how long reads as a rule. */
.see-verify__link[disabled] {
  color: var(--see-muted);
  cursor: default;
  text-decoration: none;
}

.see-verify__change { margin-top: var(--see-s6); }

/* --------------------------------------------------------------------------
   Narrower screens

   The split collapses into a stack, fields first — someone who reached this
   page has already decided, and the summary is confirmation rather than
   persuasion. The divider moves from the shared edge to the top of the
   summary, which is the edge they now share.
   -------------------------------------------------------------------------- */

@media (max-width: 940px) {
  .see-co__grid { grid-template-columns: minmax(0, 1fr); }

  .see-co__summary {
    border-inline-start: 0;
    border-top: 1px solid var(--see-line);
    padding: var(--see-s8) var(--see-s7);
  }

  .see-co__main { padding: var(--see-s8) var(--see-s7) var(--see-s7); }
  .see-co__glow { height: 320px; }
}

@media (max-width: 560px) {
  .see-co { padding-bottom: var(--see-s8); }
  .see-co__main { padding: var(--see-s7) var(--see-s5) var(--see-s6); }
  .see-co__summary { padding: var(--see-s7) var(--see-s5) var(--see-s6); }
  .see-co__frame { border-radius: calc(var(--see-r-lg) + 1px); }
  .see-co__grid { border-radius: var(--see-r-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .see-co__glow { filter: none; }
}

/* ==========================================================================
   The sign-up screens (see-co--signup, 4.13.14)

   Sign-up and its email code are one plain card: a single column, as narrow
   as a sign-up form on any site, with the heading centred above the fields.
   ========================================================================== */

.see-co--signup .see-co__frame { max-width: 480px; }
.see-co--signup .see-co__grid { grid-template-columns: minmax(0, 1fr); }
.see-co--signup .see-co__main { padding: var(--see-s8) var(--see-s7) var(--see-s7); }
.see-co--signup .see-co__head { text-align: center; }
.see-co--signup .see-co__main .see-verify__sent { margin-bottom: var(--see-s6); text-align: center; }

/* Messages sit above the card, at the card's width. */
.see-trial__main--signup > .see-trial__error,
.see-trial__main--signup > .see-trial__notice {
  max-width: 480px;
  margin-inline: auto;
}

@media (max-width: 560px) {
  .see-co--signup .see-co__main { padding: var(--see-s7) var(--see-s5) var(--see-s6); }
}

/* ==========================================================================
   The payment step inside the checkout (see-co--pay)

   The shared card form caps itself at 460px and its button sizes to its
   label, which left the card field and the pay button stranded at half the
   column under a full-width "paying as" box. Inside the checkout frame they
   take the column, in one rhythm: who is paying, the card, the button, the
   reassurance.
   ========================================================================== */

.see-co--pay .see-co__main .see-resume__who {
  margin: 0 0 var(--see-s6);
  padding: var(--see-s4) var(--see-s5);
  border-radius: var(--see-r-sm);
  background: var(--see-surface-deep);
}

/* The address reads left to right, but sits under the name, not across the box. */
.see-co--pay .see-resume__who-mail { justify-self: start; }

.see-co--pay .see-form--card { gap: var(--see-s4); }

.see-co--pay .see-form__stripe {
  padding: 16px var(--see-s4);
  border-radius: var(--see-r-sm);
  background: var(--see-surface-deep);
  transition: border-color var(--see-dur) var(--see-ease), box-shadow var(--see-dur) var(--see-ease);
}

.see-co--pay .see-form__stripe:focus-within,
.see-co--pay .see-form__stripe.StripeElement--focus {
  border-color: var(--see-gold);
  box-shadow: 0 0 0 3px var(--see-gold-dim);
}

.see-co--pay .see-form__error:empty { min-height: 0; }

.see-co--pay .see-trial__cta {
  width: 100%;
  margin-top: var(--see-s2);
  padding-block: 14px;
  justify-content: center;
  font-size: var(--see-t-md);
}

/* Centred under the button, at the size of the terms: the terms stay easy to read. */
.see-co--pay .see-form__secure,
.see-co--pay .see-form__restate { text-align: center; }

/* A payment waiting on the bank: its notice gets breathing room above the form. */
.see-co--pay .see-trial__notice { margin-bottom: var(--see-s5); }