/* What To Fix First. Every colour, font and spacing value comes from DESIGN.md.
   Written mobile first: base styles are phone, min-width queries add desktop. */

/* Aeonik, the free trial from CoType Foundry (Martins' choice). The trial has no Medium,
   so weight 500 uses Regular and 600 uses Bold. */
@font-face {
  font-family: "Aeonik";
  src: url("fonts/AeonikTRIAL-Regular.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("fonts/AeonikTRIAL-Bold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #F26F25;
  --black: #000000;
  --dark: #000000;
  --tint: #EEF3F9;
  --off-white: #F5F5F4;
  --grey: #5C5D66;
  --white: #FFFFFF;
  --line: #DCE3EC;

  --font: "Aeonik", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-btn: 8px;
  --radius-card: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --gutter: 16px;
  --read: 660px;
  --wide: 960px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
/* Slide-ins start a little off to the side; never let that become a sideways scroll. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
  background: var(--white);
  background-image: linear-gradient(180deg, var(--tint) 0, var(--white) 480px);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
/* Even out heading lines so no single word sits alone on the last line. */
h1, h2, h3 { text-wrap: balance; }

.screen {
  max-width: var(--read);
  margin: 0 auto;
  padding: 48px var(--gutter) 32px;
}

/* Screens fade in when they change. Seen a few dozen times per check, so it stays short. */
.screen.enter { animation: screen-in 220ms var(--ease-out); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Questions slide in from the direction you're moving: forward from the right, back from the left. */
.screen.slide-next { animation: slide-next 260ms var(--ease-out); }
.screen.slide-back { animation: slide-back 260ms var(--ease-out); }
@keyframes slide-next {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes slide-back {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

/* Front page: seen once, so it can take its time. The hero rises in piece by piece,
   and each section reveals as it scrolls into view. Only hidden when JavaScript runs,
   so the page still reads if scripts fail. */
.js .hero > * { animation: rise 700ms var(--ease-out) both; }
.js .hero > :nth-child(2) { animation-delay: 80ms; }
.js .hero > :nth-child(3) { animation-delay: 160ms; }
.js .hero > :nth-child(4) { animation-delay: 240ms; }
.js .hero > :nth-child(5) { animation-delay: 320ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Type ---------- */

.display {
  font-size: 40px;
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* Headline word that changes: stopping, limiting, preventing, in brand orange.
   The words share one grid cell; the script sets the cell's width to the word showing,
   and the width eases so the words around it glide instead of jumping. */
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  color: var(--orange);
  overflow: hidden;
  padding-bottom: 0.08em;
  transition: width 520ms var(--ease-out);
}
.rotator .word {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  filter: blur(4px);
  transition: transform 520ms var(--ease-out), opacity 520ms var(--ease-out), filter 520ms var(--ease-out);
}
.rotator .word.is-on { opacity: 1; transform: none; filter: none; }
.rotator .word.is-off { opacity: 0; transform: translateY(-100%); filter: blur(4px); }

.lead {
  font-size: 18px;
  line-height: 28px;
  color: var(--grey);
}

.label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dark);
}

.small { font-size: 14px; line-height: 20px; color: var(--grey); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--orange);
  color: var(--off-white);
  font: 600 16px/24px var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #E0611A; }
}

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--dark);
  font: 500 16px/24px var(--font);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.btn-quiet:active { transform: scale(0.97); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Welcome ---------- */

/* The welcome screen is a short landing page, so it runs full width. */
#welcome.landing {
  max-width: none;
  padding: 0;
  text-align: center;
}
.landing .inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

.topbar { padding: 16px var(--gutter); }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--black);
}
.wordmark .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(242, 111, 37, 0.18);
}
.wordmark .by { font-weight: 400; color: var(--grey); }

.hero { padding: 40px var(--gutter) 56px; max-width: 820px; margin: 0 auto; }

.h2 {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 8px auto 32px;
  max-width: 640px;
}

/* Why your business isn't growing: black band, three short points. */
.band {
  background: var(--dark);
  color: var(--white);
  padding: 56px 0;
}
.band .label { color: #BDBDBD; }
.why-grid { display: grid; gap: 16px; text-align: left; }
.why {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: 24px 20px;
}
.why-n {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--orange);
  margin-bottom: 12px;
}
.why-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--orange);
  color: var(--off-white);
  font-size: 18px;
  margin-bottom: 16px;
}
.why h3 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.why p { color: #D6D6D6; }

/* What you get: a preview of the result page, built from the real section names. */
.get { padding: 56px 0; background: linear-gradient(180deg, var(--white) 0, var(--tint) 100%); }
.preview {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.preview-head { background: var(--dark); padding: 14px 20px; }
.preview-head .label { color: #BDBDBD; }
.preview-list { list-style: none; margin: 0; padding: 8px; }
.preview-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 12px;
  border-radius: 10px;
}
.preview-list li + li { border-top: 1px solid var(--line); }
.preview-list i { color: var(--dark); font-size: 16px; width: 20px; text-align: center; margin-top: 3px; }
.preview-list strong { display: block; font-weight: 700; }
.preview-list span { display: block; color: var(--grey); font-size: 15px; line-height: 22px; }
.preview-list li.hot {
  background: #FFF6F0;
  border-top-color: transparent;
}
.preview-list li.hot + li { border-top-color: transparent; }
.preview-list li.hot i { color: var(--orange); }

.closer { padding: 56px 0 72px; }
.closer .h2 { margin-bottom: 24px; }
.closer .btn { width: 100%; max-width: 320px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px;
  line-height: 20px;
  color: var(--dark);
}
.pill i { color: var(--orange); }

#welcome .display { margin-bottom: 16px; }
#welcome .lead { margin: 0 auto 32px; max-width: 520px; }
#welcome .btn { width: 100%; max-width: 320px; }
#welcome .small { margin-top: 16px; }

/* ---------- Progress bar ---------- */

/* Pinned to the bottom of the screen, under the Back and Next bar on phones. */
.progress {
  position: fixed;
  inset: auto 0 0 0;
  height: 6px;
  background: var(--line);
  z-index: 10;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 300ms var(--ease-out);
}

/* ---------- Question ---------- */

#question { padding-top: 40px; padding-bottom: 48px; }

.q-head { margin-bottom: 24px; }

/* Honesty note on question 1: the moment people start answering. */
.honest {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFF6F0;
  border: 1px solid #FBD5BE;
  font-size: 15px;
  line-height: 22px;
  color: var(--black);
}
.honest i { color: var(--orange); margin-top: 3px; }
.q-head .label { margin-bottom: 8px; }
#q-part { margin-bottom: 16px; }

#q-text {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#q-hint { margin-top: 8px; }

.options {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
.option:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .option:hover { border-color: var(--dark); }
}

.option input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid #A9B4C2;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.option input[type="checkbox"] { border-radius: 6px; }
.option input::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: inherit;
  background: var(--white);
  transform: scale(0.6);
  opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 160ms ease;
}
.option input:checked { border-color: var(--orange); background: var(--orange); }
.option input:checked::after { opacity: 1; transform: none; }
.option input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Picked state: orange border plus the filled control, so colour is never the only signal. */
.option:has(input:checked) {
  border-color: var(--orange);
  background: #FFF6F0;
}

.field {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow);
  font: 400 16px/24px var(--font);
  color: var(--black);
  transition: border-color 160ms ease;
}
.field:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 111, 37, 0.2); }
textarea.field { min-height: 120px; resize: vertical; }
input.field[type="number"] { max-width: 160px; font-size: 20px; }

.error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 16px;
  color: #B42318;
  font-size: 14px;
  line-height: 20px;
}

/* On phones Back and Next stay pinned to the bottom, so long lists (Q13 has 10 options)
   never push Next below the fold. The screen's bottom padding keeps content clear of it. */
.q-nav {
  position: sticky;
  bottom: 6px; /* sits just above the progress bar */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.q-nav .btn { margin-left: auto; }

/* ---------- Working and failed ---------- */

#working, #failed { text-align: center; padding-top: 96px; }

.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 24px;
  border: 4px solid var(--line);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.status {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

#failed .btn { margin-top: 24px; }
.failed-icon { font-size: 32px; color: var(--orange); margin-bottom: 16px; }

/* ---------- Result ---------- */

#result {
  max-width: none;
  padding: 0 0 48px;
}

/* Plain black, as Martins asked. */
.result-band {
  background: var(--dark);
  color: var(--white);
  padding: 48px var(--gutter) 40px;
}
.result-band .inner { max-width: var(--wide); margin: 0 auto; }
.result-band .label { color: #BDBDBD; margin-bottom: 12px; }
.result-band h2 {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.cards {
  max-width: var(--wide);
  margin: -16px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  gap: 16px;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 24px 20px;
}
.card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.card h3 i { color: var(--dark); font-size: 16px; width: 20px; text-align: center; }
/* Keep reading lines between 45 and 75 characters on wide screens. */
.card p, .card ul, .card ol { max-width: 68ch; }
.card p + p, .card p + ul, .card p + ol, .card h4 + p { margin-top: 12px; }
.card ul, .card ol { margin: 12px 0 0; padding-left: 20px; }
.card li + li { margin-top: 8px; }
.card h4 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

/* Fix this first is the biggest card, with an orange left edge. */
/* Fix this first: a solid orange card so it's the first thing the eye lands on.
   Black text on the orange reads clearly (about 7:1). */
.card.fix {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--black);
  padding: 28px 20px;
  box-shadow: 0 12px 32px rgba(242, 111, 37, 0.35);
}
.card.fix h3 { font-size: 24px; }
.card.fix h3 i { color: var(--black); }
.card.fix ol li::marker { font-weight: 700; }
.card.fix h4 { font-size: 22px; letter-spacing: -0.02em; }

.card.choice { text-align: left; }
.card.choice .btn { margin-top: 20px; width: 100%; }

.again { text-align: center; margin-top: 24px; }

/* Result cards arrive one after another, once per check. */
.cards.enter > * {
  animation: card-in 300ms var(--ease-out) both;
}
.cards.enter > :nth-child(2) { animation-delay: 50ms; }
.cards.enter > :nth-child(3) { animation-delay: 100ms; }
.cards.enter > :nth-child(4) { animation-delay: 150ms; }
.cards.enter > :nth-child(n+5) { animation-delay: 200ms; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Details pop-up ---------- */

.modal {
  width: min(480px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
  overflow-y: auto;
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Opens once per check, so it can take a little longer than a button. Centered, so it scales from center. */
.modal[open] { animation: modal-in 240ms var(--ease-out); }
.modal[open]::backdrop { animation: fade-in 240ms ease; }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal form { padding: 28px 20px 20px; }
.modal-icon { font-size: 28px; color: var(--orange); margin-bottom: 8px; }
.modal-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.fields { display: grid; gap: 14px; margin: 20px 0 24px; }
.f label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--dark);
}
.f .field { min-height: 48px; box-shadow: none; }
.f .field::placeholder { color: #8A93A0; }
.f .field[aria-invalid="true"] { border-color: #B42318; }
.f-error { margin-top: 6px; font-size: 14px; line-height: 20px; color: #B42318; }

.modal .btn { width: 100%; }
.modal .btn[disabled] { opacity: 0.7; cursor: progress; }
.modal-note { margin-top: 12px; text-align: center; }
.modal-note i { color: var(--dark); margin-right: 4px; }


/* ---------- Result: the new pieces ---------- */

.result-band .btn-ghost { margin-top: 20px; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, 0.08); color: var(--white);
  font: 600 15px/22px var(--font); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn-ghost:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); } }

.btn-dark { background: var(--dark); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn-dark:hover { background: #222; } }
.btn-outline { background: var(--white); color: var(--black); box-shadow: inset 0 0 0 2px var(--black); }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { background: var(--off-white); } }
.btn .fa-whatsapp { color: #25D366; font-size: 20px; }

.actions { display: grid; gap: 12px; margin-top: 20px; }
.actions .btn { width: 100%; }

.intro { color: var(--grey); margin-bottom: 16px; }

/* Five resources: icon tiles. */
.resources { display: grid; gap: 10px; }
.res {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px; border-radius: 10px;
  background: #FAFAF9; border: 1px solid var(--line);
}
.res-icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: #FFF0E6; color: var(--orange); font-size: 17px;
}
.res strong { display: block; font-weight: 700; margin-bottom: 2px; }
.res span { display: block; color: var(--grey); font-size: 15px; line-height: 22px; }

/* Two-week plan: a tick-box checklist, Week 1 and Week 2. */
.plan { display: grid; gap: 20px; }
.week h4 { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.day {
  display: flex; gap: 12px; align-items: flex-start;
  min-height: 44px; padding: 10px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.day input {
  appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  border: 2px solid #A9B4C2; border-radius: 6px; display: grid; place-items: center;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.day input::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border: solid var(--white); border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0.6); opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 160ms ease;
}
.day input:checked { background: var(--orange); border-color: var(--orange); }
.day input:checked::after { opacity: 1; transform: rotate(-45deg); }
.day-n {
  flex: none; min-width: 54px; font-size: 13px; line-height: 24px; font-weight: 700; color: var(--orange);
}
.day-t { flex: 1; transition: color 160ms ease; }
.day input:checked ~ .day-t { color: #8A93A0; text-decoration: line-through; }
.plan-note { margin-top: 12px; }

/* Goal and gap: the picture as a quote, then two bars. */
.quote {
  margin-bottom: 20px; padding: 4px 0 4px 16px;
  border-left: 4px solid var(--orange);
  font-size: 18px; line-height: 28px;
}
.bars { display: grid; gap: 14px; margin-bottom: 16px; }
.bar-row { display: grid; gap: 6px; }
.bar-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.bar-top strong { font-weight: 700; }
.bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--dark); width: 0; transition: width 900ms var(--ease-out) 200ms; }
.bar.goal span { background: var(--orange); }
.bar.near span { background: repeating-linear-gradient(45deg, var(--orange) 0 6px, #F89C68 6px 12px); }

/* What you thought vs what your answers show: two columns. */
.versus { display: grid; gap: 12px; }
.side { padding: 16px; border-radius: 10px; background: #FAFAF9; border: 1px solid var(--line); }
.side.found { background: #FFF6F0; border-color: #FBD5BE; }
.side .label { margin-bottom: 8px; }

.pair { display: grid; gap: 16px; }
.ticks { list-style: none; padding: 0 !important; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks li i { margin-top: 4px; }
.ticks.ok i { color: #12805C; }
.ticks.wait i { color: var(--grey); }

/* Stage: a three-step track with theirs lit up. */
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; list-style: none; padding: 0; }
.step { position: relative; padding-top: 18px; font-size: 13px; line-height: 18px; color: var(--grey); }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--line); }
.step.done::before { background: var(--dark); }
.step.now { color: var(--black); font-weight: 700; }
.step.now::before { background: var(--orange); }

/* Track this every week. */
.track-rows { display: grid; gap: 10px; }
.track-row { display: flex; gap: 12px; align-items: flex-start; }
.track-row i { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--dark); color: var(--white); font-size: 15px; }
.track-row strong { display: block; font-weight: 700; }
.track-row.big strong { font-size: 18px; }

/* ---------- Bigger screens ---------- */

@media (min-width: 768px) {
  .screen { padding-top: 80px; padding-bottom: 50px; }
  #welcome.landing { padding: 0; }
  .topbar { padding: 20px 32px; text-align: left; }
  .hero { padding: 56px var(--gutter) 88px; }
  .h2 { font-size: 46px; }
  .band, .get { padding: 88px 0; }
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .why { padding: 28px 24px; }
  .closer { padding: 88px 0 104px; }
  .display { font-size: 68px; }
  #q-text { font-size: 32px; }
  .result-band { padding: 64px var(--gutter) 56px; }
  .result-band h2 { font-size: 46px; }
  .card { padding: 32px; }
  .card.fix { padding: 36px 32px; }
  .card.fix h3 { font-size: 28px; }
  .card.choice .btn { width: auto; }
  .resources { grid-template-columns: repeat(2, 1fr); }
  .res:last-child { grid-column: 1 / -1; }
  .plan { grid-template-columns: 1fr 1fr; gap: 32px; }
  .versus, .pair { grid-template-columns: 1fr 1fr; }
  .actions { display: flex; flex-wrap: wrap; }
  .actions .btn { width: auto; }
  .step { font-size: 14px; }
  .modal form { padding: 36px 32px 28px; }
  .q-nav {
    position: static;
    margin: 32px 0 0;
    padding: 0;
    background: none;
    border-top: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The orange dot in the wordmark breathes slowly, so the page never feels static. */
.wordmark .dot { animation: breathe 2400ms ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 4px rgba(242, 111, 37, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(242, 111, 37, 0.08); }
}

/* Waiting screen: each status line swaps in. */
.status.swap { animation: screen-in 300ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .wordmark .dot { animation: none; }
  .rotator .word, .rotator .word.is-off { transform: none; filter: none; transition: opacity 300ms ease; }
  .js .hero > * { animation: fade 300ms ease both; }
  .js [data-reveal] { transform: none; transition: opacity 300ms ease; }
  .screen.slide-next, .screen.slide-back, .status.swap,
  .screen.enter, .cards.enter > *, .modal[open] { animation: fade 200ms ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  .spinner { animation-duration: 1400ms; }
  .btn:active, .btn-quiet:active, .option:active { transform: none; }
}

/* Home page band: the 5 resources. */
.band-sub { color: #D6D6D6; font-size: 17px; line-height: 26px; max-width: 560px; margin: -16px auto 32px; }
@media (min-width: 768px) {
  .why-grid.five { grid-template-columns: repeat(6, 1fr); }
  .why-grid.five .why { grid-column: span 2; }
  .why-grid.five .why:nth-child(4), .why-grid.five .why:nth-child(5) { grid-column: span 3; }
}

/* Orange key words in home page headings. */
.hl { color: var(--orange); }

/* 5 resources: each tile lifts slightly on hover. Uses translate and scale, separate from the
   scroll reveal (which animates transform), so the lift reacts instantly with no reveal delay. */
.why-grid.five .why {
  transition:
    opacity 700ms var(--ease-out), transform 700ms var(--ease-out),
    translate 220ms var(--ease-out), scale 220ms var(--ease-out),
    background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  transition-delay: var(--delay, 0ms), var(--delay, 0ms), 0ms, 0ms, 0ms, 0ms, 0ms;
}
@media (hover: hover) and (pointer: fine) {
  .why-grid.five .why:hover {
    translate: 0 -6px;
    scale: 1.02;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-grid.five .why:hover { translate: none; scale: none; }
}

/* Top-left brand: the orange withSprint logo mark and withSprintInc in bold (Martins, 27 Oct 2026). */
.wordmark { gap: 10px; font-size: 17px; }
.wordmark .logo { width: 28px; height: 28px; border-radius: 50%; flex: none; }

/* Waiting screen: an estimated percentage and a bar, so people can see it moving. */
.pct { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.pct-bar { width: min(320px, 100%); height: 8px; margin: 0 auto 24px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pct-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--orange); transition: width 200ms linear; }