/* Pending Cancel member site. One white card on a warm light page, one job per
   screen: greeting, headline, one sentence, a two-column summary, one primary
   button and one quiet link (the button sticks to the bottom on phones).
   Overpass for text, Barlow Condensed for headlines and buttons only, the
   Crunch orange gradient for the button and the accents, and one yellow pill
   per screen for the $0. Every class app.js renders is here. */

:root {
  --grad: linear-gradient(100deg, #ffb21a 0%, #f8991d 45%, #ef5b2b 100%);
  --line-grad: linear-gradient(90deg, #f8991d 0%, #ef5b2b 48%, #dd1d46 100%);
  --orange: #f8991d;
  --orange-deep: #ef5b2b;
  --orange-wash: #FFF6EC;
  --yellow: #ffbc15;

  --ink: #101010;
  --text: #2A2A2A;
  --muted: #6B6560;
  --line: #ECE7E1;
  --line-2: #E2DCD5;
  --page: #f6f4f1;
  --paper: #FFFFFF;
  --green: #149C4B;
  --green-wash: #E7F6EE;

  --head: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'Overpass', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --tap: 44px;
  --ease: 150ms ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--page);
  background-image: radial-gradient(1400px 480px at 50% 0, rgba(248, 153, 29, .10), rgba(248, 153, 29, 0));
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

button { font-family: var(--body); cursor: pointer; color: inherit; background: none; border: 0; }

button:focus-visible, a:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 2px;
}
h1:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- shell ------------------------------------------------------ */

.site-head {
  height: 64px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid transparent;
  border-image: var(--line-grad) 1;
}
.logo-slot img { display: block; width: 96px; height: auto; max-height: 58px; }

.page {
  flex: 1;
  width: 100%;
  padding: 24px 12px 32px;
}

.card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(40, 25, 10, .06), 0 10px 30px rgba(40, 25, 10, .08);
  padding: 20px;
}
@media (min-width: 640px) {
  .page { padding: 40px 24px 48px; }
  .card { padding: 28px; }
}

.foot {
  padding: 18px 16px 26px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- type ------------------------------------------------------- */

.greet {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

h1 {
  font-family: var(--head);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.lede {
  margin-top: 8px;
  font-size: 16px;
  color: var(--muted);
}

.note {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

/* the one yellow highlight a screen may carry */
.pill {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  border-radius: 999px;
  padding: 1px 12px;
  font-weight: 700;
}

/* ---------- countdown GIF (claim only) ---------------------------------- */

/* the offer drawn in type, on the email's orange-to-red gradient (replaces the countdown GIF, 2026-11-04) */
.hero-offer {
  margin: 12px 0 18px;
  padding: 22px 20px 20px;
  border-radius: 14px;
  background: linear-gradient(100deg, #ffb21a 0%, #f8991d 45%, #ef5b2b 100%);
  color: #fff;
  text-align: center;
}
.hero-kicker { font: 700 14px/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; opacity: .95; }
.hero-zero { font: 800 72px/1 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; letter-spacing: 1px; margin: 8px 0 6px; display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.hero-was { font-size: 30px; font-weight: 700; opacity: .8; text-decoration-thickness: 3px; }
.hero-after { font: 600 15px/1.4 'Overpass', 'Helvetica Neue', Arial, sans-serif; }

/* ---------- summary: label left, value right ---------------------------- */

.facts {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.fact dt {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.fact dd {
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- actions: one button, one quiet link ------------------------- */

.actions { margin-top: 24px; }
.actions:empty { display: none; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background-color: var(--orange-deep);
  background-image: var(--grad);
  color: #FFFFFF;
  font-family: var(--head);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 12px rgba(239, 91, 43, .25);
  transition: filter var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 6px 16px rgba(239, 91, 43, .32); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled {
  background-image: none;
  background-color: #CFC9C2;
  box-shadow: none;
  cursor: not-allowed;
}
.btn--small {
  width: auto;
  min-height: var(--tap);
  margin-top: 12px;
  padding: 0 22px;
  font-size: 17px;
}

.quiet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--ease);
}
.quiet:hover { color: var(--orange-deep); }

/* On phones the button is always reachable: a white bar stuck to the bottom. */
@media (max-width: 639px) {
  .actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 24px -20px -20px;
    padding: 12px 20px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 -8px 18px rgba(40, 25, 10, .08);
  }
}

/* ---------- other options: quiet links to the other screens -------------- */

.options {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.options__t {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.options__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
}
.options__a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--ease);
}
.options__a:hover { color: var(--orange-deep); }
/* The phone bar above ends 20px past the card padding; step clear of it. */
@media (max-width: 639px) {
  .actions + .options { margin-top: 34px; }
}

/* ---------- alerts and toast -------------------------------------------- */

.alert {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--orange-wash);
  border: 1px solid #F7D2B4;
  border-radius: 12px;
  color: #7A3B12;
  font-size: 15px;
}
.alert__t { font-weight: 700; color: var(--ink); margin-bottom: 2px; }

.toast {
  position: fixed;
  left: 50%;
  top: 16px;
  z-index: 20;
  transform: translate(-50%, -8px);
  width: calc(100% - 32px);
  max-width: 420px;
  padding: 12px 16px;
  background: var(--paper);
  border-left: 4px solid var(--orange-deep);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(40, 25, 10, .18);
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--ease), transform var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- success check ---------------------------------------------- */

.check {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--green-wash);
  position: relative;
}
.check::after {
  content: "";
  position: absolute;
  left: 20px; top: 12px;
  width: 13px; height: 25px;
  border: solid var(--green);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

.when { margin-top: 10px; }
.when__day { display: block; font-size: 20px; font-weight: 700; color: var(--ink); }
.when__time {
  display: block;
  font-family: var(--head);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  color: var(--ink);
}

/* ---------- plans: a radio list ----------------------------------------- */

.plans { display: grid; gap: 10px; margin-top: 18px; }

.plan {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--line-2);
  border-radius: 14px;
  transition: border-color var(--ease), background-color var(--ease);
}
.plan:hover:not(:disabled) { border-color: var(--orange); }
.plan.is-on { border-color: var(--orange); background: var(--orange-wash); }
.plan.is-current { background: var(--page); border-color: var(--line); cursor: default; }
.plan.is-current .plan__t, .plan.is-current .plan__d, .plan.is-current .plan__price { color: #9A938C; }

.plan__dot {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #C9C2BA;
  background: var(--paper);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.plan.is-on .plan__dot { border-color: var(--orange-deep); box-shadow: inset 0 0 0 5px var(--orange-deep); }
.plan.is-current .plan__dot { visibility: hidden; }

.plan__body { flex: 1; min-width: 0; }
.plan__t { display: block; font-weight: 700; font-size: 16.5px; color: var(--ink); }
.plan__now {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  vertical-align: 2px;
}
.plan__d { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.plan__price {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.plan__price small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- scan: progress, day chips, times --------------------------- */

.steps {
  list-style: none;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.steps li { flex: 1; }
.steps__bar {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
}
.steps li.is-now .steps__bar { background-image: var(--grad); }
.steps li.is-done .steps__bar { background: var(--orange); }
.steps__t {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9A938C;
}
.steps li.is-now .steps__t { color: var(--orange-deep); }
.steps li.is-done .steps__t { color: var(--text); }
.steps li.is-done .steps__t::before {
  content: "";
  display: inline-block;
  width: 5px; height: 10px;
  margin: 0 7px 1px 2px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.chip {
  min-height: 72px;
  padding: 8px 4px;
  background: var(--paper);
  border: 2px solid var(--line-2);
  border-radius: 12px;
  text-align: center;
  color: var(--ink);
  transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}
.chip:hover { border-color: var(--orange); }
.chip:active { transform: scale(.98); }
.chip.is-on { border-color: var(--orange); background: var(--orange-wash); }
.chip__w, .chip__m {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
}
.chip__n {
  display: block;
  font-family: var(--head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
}

.daypill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-left: 14px;
  border-radius: 999px;
  background: var(--page);
  font-weight: 700;
  color: var(--ink);
}
.daypill__change {
  min-height: var(--tap);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.time {
  min-height: 52px;
  padding: 0 4px;
  background: var(--paper);
  border: 2px solid var(--line-2);
  border-radius: 12px;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  transition: border-color var(--ease), background-color var(--ease), transform var(--ease);
}
.time:hover { border-color: var(--orange); }
.time:active { transform: scale(.98); }
.time.is-on { border-color: var(--orange); background: var(--orange-wash); }

.empty {
  margin-top: 16px;
  padding: 20px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.spin {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 3px solid var(--line);
  border-top-color: var(--orange-deep);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- textarea ---------------------------------------------------- */

.field {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px 14px;
  border: 2px solid var(--line-2);
  border-radius: 12px;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;               /* 16px stops iOS zooming in */
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--ease);
}
.field:focus { outline: none; border-color: var(--orange); }

/* ---------- skeletons: never a blank card ------------------------------- */

.sk {
  border-radius: 8px;
  background: linear-gradient(90deg, #EFEBE6 0%, #F7F4F0 50%, #EFEBE6 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.sk--greet { height: 18px; width: 30%; margin-bottom: 10px; }
.sk--title { height: 32px; width: 80%; }
.sk--lede  { height: 16px; width: 92%; margin-top: 12px; }
.sk-wrap { margin-top: 18px; display: grid; gap: 10px; }
.sk--row   { height: 22px; }
.sk--btn   { height: 56px; margin-top: 24px; border-radius: 12px; }
.sk--chip  { height: 72px; border-radius: 12px; }
.sk--time  { height: 52px; border-radius: 12px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .spin, .sk { animation: none; }
  .btn, .chip, .time, .plan, .toast { transition: none; }
}