.phase-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  flex: 0 0 auto;
}

.phase-nav__logo {
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 3px;
}

.phase-nav__back {
  color: var(--colour-text);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
}

.phase-nav__back:focus-visible {
  outline: 2px solid var(--colour-gold);
  outline-offset: 2px;
}

.phase-nav__count {
  color: var(--colour-text-muted);
}

.chalk-line {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.phase-content {
  padding: 1.5rem 1.25rem 1rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.phase-content p {
  margin: 0 0 1rem;
  color: var(--colour-text-muted);
}

/* The bold lead-in word or two at the start of a paragraph, "Visible.",
   "Youth empowerment.", and so on, functions as that paragraph's own
   subheading, gold like every other subheading, see base.css. */
.phase-content strong {
  color: var(--colour-gold);
}

.placeholder-note {
  color: var(--colour-gold);
  opacity: 0.85;
  margin: 0 0 0.75rem;
}

.read-more {
  margin-top: 0.5rem;
}

.read-more summary {
  list-style: none;
  cursor: pointer;
  color: var(--colour-gold);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.read-more summary::-webkit-details-marker {
  display: none;
}

.read-more summary::after {
  content: "⌄";
  font-size: 0.85em;
  transition: transform var(--transition-duration) var(--transition-easing);
}

.read-more[open] summary::after {
  transform: rotate(180deg);
}

.read-more__body {
  margin-top: 0.75rem;
}

.phase-footer {
  padding: 0.25rem 1.25rem 0.85rem;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

/* Tap to continue (phase-footer--reveal, its scroll-hint fades in only
   at the bottom of the content, see phase-nav.js) floats over the
   bottom of the page instead of sitting in the ordinary flex flow like
   phase-footer above. It must never reserve its own strip of the
   screen, an empty bar sitting there the whole time defeats the point,
   so it's taken out of the flex column entirely (position: absolute,
   relative to body, see base.css) and phase-content--reveal gets a
   little extra bottom padding instead, so the last paragraph always has
   clearance from where the hint will eventually appear. */
.phase-footer--reveal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  flex: 0 0 auto;
  padding: 0 1.25rem 0.85rem;
}

.phase-content--reveal {
  padding-bottom: 3.5rem;
}

.phase-footer__hint {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--colour-text-muted);
}

/* Replaces the old full width Continue button. A small tap target, still
   a real link (href, focusable, has an accessible name), scrolling,
   swiping and the arrow keys do the same thing, see phase-nav.js. Icon
   and label sit side by side to keep this compact.

   Hidden until phase-nav.js's scroll listener adds is-visible, once the
   reader reaches the bottom of the content, see phase-nav.js. Only ever
   sitting in the footer waiting to be tapped once there is nothing left
   to read below it, never competing with the text above. visibility, not
   just opacity, so it drops out of the tab order while hidden too. */
.scroll-hint {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--colour-text);
  padding: 0.35rem 0.6rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scroll-hint.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-hint {
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .scroll-hint.is-visible {
    transition: opacity 0.3s ease, visibility 0s linear 0s;
  }
}

.scroll-hint__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--colour-gold);
  color: var(--colour-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(197, 173, 112, 0.35);
  animation: yfs-hint-nudge 1.8s ease-in-out infinite;
}

.scroll-hint:focus-visible .scroll-hint__icon {
  outline: 2px solid var(--colour-gold);
  outline-offset: 2px;
}

.scroll-hint__label {
  color: var(--colour-text-muted);
}

@keyframes yfs-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__icon {
    animation: none;
  }
}

.field-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--colour-text-muted);
}

.field-input {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: var(--body-size);
  font-family: inherit;
  background: var(--colour-white);
  color: #14181F;
}

.field-input:focus-visible {
  outline: none;
  border-color: var(--colour-gold);
}

/* The questionnaire's email field, when it's already known from sign
   in, see questionnaire.js. Still clearly readable, just visibly not
   editable, rather than looking like a normal empty-looking field. */
.field-input--locked {
  opacity: 0.7;
  cursor: default;
}

.form-error {
  color: #FF8A80;
  margin-top: 0.5rem;
}

.form-notice {
  color: var(--colour-text);
  background: rgba(197, 173, 112, 0.22);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin: 0 0 1.25rem;
}

.button-secondary {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--colour-white);
  border: 1px solid var(--colour-white);
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
  font-size: var(--button-size);
  line-height: var(--button-line);
  font-weight: var(--button-weight);
  text-align: center;
  cursor: pointer;
}

#start-form .button-primary,
.button-secondary {
  margin-top: 1.75rem;
}

/* WhatsApp's own brand green, used only for the two join buttons on the
   final step, so they read as "this opens WhatsApp" at a glance rather
   than looking like every other button on the site. */
.button-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: #25D366;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 0.875rem 1.5rem;
  font-size: var(--button-size);
  line-height: var(--button-line);
  font-weight: var(--button-weight);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  margin-top: 1.75rem;
}

.button-whatsapp__icon {
  flex: 0 0 auto;
}

.button-whatsapp:focus-visible {
  outline: 2px solid var(--colour-white);
  outline-offset: 2px;
}

#joined-button {
  margin-top: 1rem;
}

.field-group {
  margin-top: 1.5rem;
}

.radio-option {
  display: block;
  margin-top: 0.65rem;
  font-weight: 400;
  color: var(--colour-text-muted);
}

/* The embedded viewer is a bonus for anyone on a laptop, not the
   reliable path, that's the download link next to it, embedded PDF
   viewers are unreliable on phones, see PROJECT.md. */
.pdf-embed {
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pdf-embed iframe {
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  border: none;
  background: var(--colour-white);
}

#pay-button {
  margin-top: 1.5rem;
}

#questionnaire-form .button-primary,
#declaration-form .button-primary,
#conduct-form .button-primary,
#overview-form .button-primary,
#deposit-form .button-primary {
  margin-top: 2rem;
}

/* Phase B step identity, one big icon per step, matching the checklist
   colours on /how-it-works so the two phases read as one system. */
.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.step-icon--blue {
  background: linear-gradient(135deg, var(--colour-blue-light), var(--colour-blue));
}

.step-icon--gold {
  background: linear-gradient(135deg, var(--colour-gold-light), var(--colour-gold));
}

.form-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.5rem;
  margin-top: 1.75rem;
}

.form-card .field-group:first-child {
  margin-top: 0;
}

/* A longer form split into a few subheaded groups, currently just the
   questionnaire, "About you", "Your experience", "You and YFS". */
.form-section-heading {
  margin: 2rem 0 1rem;
}

.form-section-heading:first-child {
  margin-top: 0;
}

.form-card h2 + .field-group {
  margin-top: 0;
}

.hero__logo-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Welcome no longer centres as a standalone hero, there is too much
   content for that now, it flows top aligned like every other content
   page instead. This just keeps the logo mark centred with some
   breathing room above the heading. */
.hero__logo-wrap--inline {
  margin: 0 auto 1.25rem;
}

/* Timeline, currently just /history. A vertical rule with a dot per
   entry, date and title picked out, description muted underneath. */
.timeline {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--colour-line);
}

.timeline__item {
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.4rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--colour-gold);
  box-shadow: 0 0 6px rgba(197, 173, 112, 0.6);
}

.timeline__date {
  color: var(--colour-gold);
  font-size: var(--meta-size);
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.timeline__title {
  color: var(--colour-gold);
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.timeline__desc {
  color: var(--colour-text-muted);
  margin: 0;
}

.hero__logo-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--colour-gold), var(--colour-blue), var(--colour-gold));
  filter: blur(2px);
  opacity: 0.6;
  animation: yfs-logo-spin 6s linear infinite;
}

.hero__logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--colour-navy);
}

@keyframes yfs-logo-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo-wrap::before {
    animation: none;
  }
}

.hero__logo {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 50%;
}

.hero__logo-placeholder {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colour-gold);
  font-size: var(--meta-size);
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  padding: 0.5rem;
}

/* Checklist, /how-it-works */
.checklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0.85rem 1rem;
}

.checklist__number {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checklist__number--gold {
  background: linear-gradient(135deg, var(--colour-gold-light), var(--colour-gold));
}

.checklist__number--blue {
  background: linear-gradient(135deg, var(--colour-blue-light), var(--colour-blue));
}

/* Small floating colour accents, purely decorative. */
.confetti-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: yfs-confetti-float 5s ease-in-out infinite;
}

@keyframes yfs-confetti-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-dot {
    animation: none;
  }
}

.checklist__title {
  color: var(--colour-gold);
  font-weight: 500;
  margin: 0;
}

.checklist__desc {
  color: var(--colour-text-muted);
  font-size: var(--meta-size);
  margin: 0.15rem 0 0;
}

/* Ticklist, currently just code of conduct. A flat list of points read
   top to bottom, each with its own tick, deliberately plainer than
   .checklist's bordered boxes above, nine of those would be too heavy
   for a policy page. */
.ticklist {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ticklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.ticklist__tick {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--colour-gold);
  color: var(--colour-gold);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticklist__title {
  color: var(--colour-gold);
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.ticklist__desc {
  color: var(--colour-text-muted);
  margin: 0;
}