/* ==========================================================================
   UNDETECTABLE UGC — UPSELL
   One-time offer shown between checkout and the thank-you page.
   Requires base.css.

   Design rule for this page: no header nav, no footer links, nothing to click
   except accept or decline. Every other exit is a lost decision.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PROGRESS — tells the buyer they are mid-flow, not being restarted
   -------------------------------------------------------------------------- */

.flow {
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-raised);
  padding-block: 1rem;
}

.flow__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2rem);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
  flex-wrap: wrap;
}

.flow__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.flow__step i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ink-line-2);
  display: grid;
  place-content: center;
  font-style: normal;
  font-size: 0.5rem;
  flex: none;
}

.flow__step--done { color: var(--lime-deep); }

.flow__step--done i {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}

.flow__step--now { color: var(--lime); }

.flow__step--now i {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-glow);
}

.flow__rule {
  width: clamp(20px, 6vw, 56px);
  height: 1px;
  background: var(--ink-line-2);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.up {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 60% at 50% 0%, rgba(212, 255, 63, 0.1), transparent 62%),
    var(--ink);
}

.up__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.hold {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alert);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55em 1em;
  border: 1px solid rgba(255, 77, 61, 0.4);
  background: var(--alert-glow);
  border-radius: 100px;
  margin-bottom: 1.75rem;
}

.hold i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s var(--ease) infinite;
}

.up h1 {
  font-family: var(--display);
  font-size: clamp(2.25rem, 7.5vw, 4.25rem);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.up__lede {
  font-size: clamp(1.0625rem, 0.98rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  font-weight: 300;
  color: var(--paper-dim);
  max-width: 56ch;
  margin-inline: auto;
}

.up__lede strong { color: var(--paper); font-weight: 400; }

/* --------------------------------------------------------------------------
   THE ARGUMENT — before / after the edit
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: 5px;
  overflow: hidden;
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
}

@media (min-width: 680px) {
  .split { grid-template-columns: 1fr 1fr; }
}

.split__side {
  background: var(--ink-card);
  padding: clamp(1.5rem, 3.5vw, 2rem);
}

.split__tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1.1rem;
}

.split__side--bad .split__tag { color: var(--alert); }
.split__side--good .split__tag { color: var(--lime); }

.split__side h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 0.7rem;
}

.split__side p {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--paper-dim);
}

.split__stat {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--ink-line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

.split__side--good .split__stat b { color: var(--lime); font-weight: 500; }
.split__side--bad .split__stat b { color: var(--alert); font-weight: 500; }

/* --------------------------------------------------------------------------
   WHAT'S INSIDE
   -------------------------------------------------------------------------- */

.lessons {
  display: grid;
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: 5px;
  overflow: hidden;
  text-align: left;
}

@media (min-width: 720px) {
  .lessons { grid-template-columns: 1fr 1fr; }
}

.lesson {
  background: var(--ink-card);
  padding: clamp(1.35rem, 3vw, 1.75rem);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: background 0.3s var(--ease);
}

.lesson:hover { background: #17161A; }

.lesson__no {
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--lime);
  flex: none;
  width: 1.75rem;
}

.lesson h3 {
  font-family: var(--display);
  font-size: 1.0625rem;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.lesson p {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--paper-dim);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   THE DECISION — accept and decline
   -------------------------------------------------------------------------- */

.decide {
  max-width: 560px;
  margin-inline: auto;
  background: var(--ink-card);
  border: 1px solid rgba(212, 255, 63, 0.3);
  border-radius: 6px;
  padding: clamp(1.75rem, 4.5vw, 2.75rem);
  text-align: center;
  box-shadow: 0 30px 90px -40px rgba(0, 0, 0, 0.9);
}

.decide__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.decide__price .amount {
  font-family: var(--display);
  font-size: clamp(3rem, 11vw, 4.5rem);
  line-height: 0.85;
  color: var(--lime);
}

.decide__price s {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--alert);
}

.decide__meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: 1.75rem;
  line-height: 1.7;
}

/* One-click reassurance — the strongest line on an upsell page */
.oneclick {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: center;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  border: 1px dashed var(--ink-line-2);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-align: left;
}

.oneclick b { color: var(--lime); font-weight: 500; }

.btn--accept {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  padding: 1.25em 1.5em;
  line-height: 1.15;
}

/* Decline — visible and honest, never hidden or guilt-tripped */
.decline {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--paper-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}

.decline:hover { color: var(--paper-dim); }

.decide__fine {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--paper-mute);
}

.decide__fine a { color: var(--paper-dim); }

/* --------------------------------------------------------------------------
   MINIMAL FOOTER — legal only, no navigation away
   -------------------------------------------------------------------------- */

.up-foot {
  border-top: 1px solid var(--ink-line);
  padding-block: 2.5rem 3rem;
  text-align: center;
}

.up-foot .fine { margin-inline: auto; max-width: 70ch; }

.up-foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

.up-foot__links a { color: var(--paper-mute); text-decoration: none; }
.up-foot__links a:hover { color: var(--lime); }