/* ============================================================================
   Customization layer.

   Loaded after campaign.css on both the public page and the editor preview.
   Everything the builder's Style and Site styles panels can set is consumed
   here, so no control in the editor is decorative.
   ============================================================================ */

/* ---------------------------------------------------------------- content width
   A section's own "Content width" wins; otherwise the global "Site width".
   Implemented as horizontal padding so full-bleed backgrounds stay full bleed
   and every layout mode (grid, flex, block) is centred the same way. */
.pb-section { --pb-gutter: clamp(24px, 6vw, 90px); }
.pb-section.hero { --pb-gutter: clamp(24px, 5.4vw, 82px); }
.pb-section.founder { --pb-gutter: clamp(24px, 5vw, 76px); }
.pb-section.site-footer { --pb-gutter: clamp(24px, 4vw, 58px); }
.pb-section.pb-has-width:not(.ticker) {
  padding-inline: max(var(--pb-gutter), calc((100% - var(--pb-max, 100%)) / 2));
}

/* ---------------------------------------------------------------- text alignment
   campaign.css hard-codes text-align and auto margins on several inner blocks,
   so alignment has to move those too or it only appears to work. */
.pb-align-left,
.pb-align-center,
.pb-align-right { text-align: var(--pb-align); }
.pb-align-left { --pb-align: left; --pb-start: 0; --pb-end: auto; }
.pb-align-center { --pb-align: center; --pb-start: auto; --pb-end: auto; }
.pb-align-right { --pb-align: right; --pb-start: auto; --pb-end: 0; }

.pb-align-left :is(.section-intro, .section-intro--row, .how__intro, .impact__copy, .hero__copy,
  .stories__cta, .verification__lead, .tour__intro, .founder__note, .leaderboard__panel,
  .story-deck, .steps, .milestone-grid, .dashboard, .final-cta__note),
.pb-align-center :is(.section-intro, .section-intro--row, .how__intro, .impact__copy, .hero__copy,
  .stories__cta, .verification__lead, .tour__intro, .founder__note, .leaderboard__panel,
  .story-deck, .steps, .milestone-grid, .dashboard, .final-cta__note),
.pb-align-right :is(.section-intro, .section-intro--row, .how__intro, .impact__copy, .hero__copy,
  .stories__cta, .verification__lead, .tour__intro, .founder__note, .leaderboard__panel,
  .story-deck, .steps, .milestone-grid, .dashboard, .final-cta__note) {
  margin-left: var(--pb-start);
  margin-right: var(--pb-end);
  text-align: var(--pb-align);
}

/* Inner copy that campaign.css centres or left-aligns explicitly. */
.pb-align-left :is(.section-intro > p:last-child, .how__intro > p:last-child, .hero__lede,
  .hero__bridge, .step p, .impact__copy > p:not(.eyebrow)),
.pb-align-center :is(.section-intro > p:last-child, .how__intro > p:last-child, .hero__lede,
  .hero__bridge, .step p, .impact__copy > p:not(.eyebrow)),
.pb-align-right :is(.section-intro > p:last-child, .how__intro > p:last-child, .hero__lede,
  .hero__bridge, .step p, .impact__copy > p:not(.eyebrow)) {
  margin-left: var(--pb-start);
  margin-right: var(--pb-end);
}

/* Rows that lay their children out with flex still need their main axis moved. */
.pb-align-left :is(.stories__cta, .hero__actions, .leaderboard__heading, .final-cta__actions) { justify-content: flex-start; }
.pb-align-center :is(.stories__cta, .hero__actions, .leaderboard__heading, .final-cta__actions) { justify-content: center; }
.pb-align-right :is(.stories__cta, .hero__actions, .leaderboard__heading, .final-cta__actions) { justify-content: flex-end; }

/* ---------------------------------------------------------------- background image */
.pb-has-image { position: relative; isolation: isolate; }
.pb-has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(0, 0, 0, var(--pb-overlay, 0)), rgba(0, 0, 0, var(--pb-overlay, 0))), var(--pb-image);
  background-position: var(--pb-position, center);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: inherit;
}

/* ---------------------------------------------------------------- shadow + shape */
.pb-shadow-soft { box-shadow: 0 24px 70px rgba(27, 8, 190, .14); }
.pb-shadow-strong { box-shadow: 0 34px 90px rgba(21, 7, 60, .3); }
.pb-section[style*="border-radius"] { overflow: hidden; }

/* ---------------------------------------------------------------- device visibility */
@media (min-width: 1025px) { .pb-hide-desktop { display: none !important; } }
@media (min-width: 561px) and (max-width: 1024px) { .pb-hide-tablet { display: none !important; } }
@media (max-width: 560px) { .pb-hide-mobile { display: none !important; } }

/* ---------------------------------------------------------------- site styles
   Button roundness, default text colour and muted text come from Site styles.
   Each falls back to the original design value when the control is untouched. */
.button,
.page-button,
.outline-light,
.text-link { border-radius: var(--button-radius, 999px); }
body { color: var(--body-ink, var(--ink)); }

/* Each keeps its designed colour as the fallback, so clearing "Muted text"
   restores the original tint exactly. */
.section-intro > p:last-child { color: var(--muted, rgba(27, 8, 190, .68)); }
.how__intro > p:last-child { color: var(--muted, rgba(27, 8, 190, .65)); }
.step p { color: var(--muted, rgba(27, 8, 190, .62)); }
.milestone p { color: var(--milestone-body, var(--muted, rgba(27, 8, 190, .64))); }
.founder-letter p { color: var(--muted, #655e69); }

/* The editor writes a section's own text colour inline; inherit it for copy that
   campaign.css tints, so a dark section does not keep pale-blue paragraphs. */
.pb-section[style*="color:"] :is(.section-intro > p:last-child, .how__intro > p:last-child, .step p) {
  color: inherit;
  opacity: .78;
}

/* ---------------------------------------------------------------- participant link
   A participant who closed the confirmation dialog needs their referral link back
   without re-declaring, so it lives permanently in the impact dashboard. */
.dashboard__link {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dashboard__link span {
  width: 100%;
  color: var(--muted, rgba(27, 8, 190, .66));
  font: 700 9px var(--font-mono, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dashboard__link input {
  flex: 1 1 190px;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(27, 8, 190, .17));
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font-size: 13px;
}
.dashboard__link button {
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--button-radius, 999px);
  background: var(--pink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.dashboard__link button:hover { filter: brightness(.94); }
@media (max-width: 560px) {
  .dashboard__link input,
  .dashboard__link button { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- verification notice
   A referral only counts once the referred person confirms their email, and that
   confirmation lands in Gmail's Promotions tab more often than not. This strip is
   the one prompt we control, so it stays until they confirm.

   It sticks above the site header, which is itself sticky — the header's offset is
   pushed down by --verify-notice-h so the two never overlap. */
.verify-notice {
  position: sticky;
  top: 0;
  z-index: 950;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  padding: 10px clamp(16px, 4vw, 34px);
  background: var(--yellow, #ffec1c);
  color: var(--ink, #1b08be);
  box-shadow: inset 0 -1px 0 rgba(27, 8, 190, .16);
}
.verify-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.verify-notice strong { font-weight: 800; }

.verify-notice__resend {
  flex: none;
  margin: 0;
  padding: 7px 17px;
  border: 0;
  border-radius: var(--button-radius, 999px);
  background: var(--ink, #1b08be);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.verify-notice__resend:hover:not(:disabled) { transform: translateY(-1px); }
.verify-notice__resend:disabled { opacity: .5; cursor: default; }

body.has-verify-notice .site-header { top: var(--verify-notice-h, 0px); }

@media (max-width: 720px) {
  .verify-notice { gap: 8px; padding: 9px 14px; }
  .verify-notice p { font-size: 12px; line-height: 1.35; }
  /* Comfortable tap target once the button wraps below the text. */
  .verify-notice__resend { min-height: 36px; padding: 9px 20px; }
  /* The long sentence is desktop only; the short one carries the ask on a phone. */
  .verify-notice__long { display: none; }
}
@media (min-width: 721px) {
  .verify-notice__short { display: none; }
}

/* ---------------------------------------------------------------- referral invite
   The label and the Someday sit on one baseline-aligned row, which strands the tiny
   caption beside large italic type on a narrow screen. Stack them there, and let a
   long Someday wrap instead of truncating — it is the most persuasive thing on the
   page for someone arriving from a friend's link. */
@media (max-width: 640px) {
  .referral-invite {
    padding: 13px 16px 15px;
    gap: 9px;
    background: linear-gradient(135deg, #fffaf5 0%, #fdf2f8 100%);
    border-bottom: 1px solid rgba(250, 44, 175, 0.15);
  }

  .referral-invite__lead {
    gap: 2px;
  }

  .referral-invite .eyebrow {
    font-size: 8px;
    letter-spacing: 0.12em;
    font-weight: 700;
  }

  .referral-invite strong {
    font-size: clamp(17px, 4.8vw, 20px);
    line-height: 1.12;
    color: var(--ink);
    font-weight: 700;
  }

  /* Compact, elegant quote callout card for the friend's someday */
  .referral-invite__someday {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 11px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.85);
    border-left: 3px solid var(--pink);
    box-shadow: 0 2px 8px rgba(27, 8, 190, 0.04);
  }

  .referral-invite__someday small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--pink);
  }

  .referral-invite__someday span {
    font-size: clamp(14px, 4.1vw, 16px);
    line-height: 1.25;
    color: var(--ink);
    font-style: italic;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .referral-invite .button {
    width: 100%;
    min-height: 40px;
    height: 42px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    margin-top: 1px;
    box-shadow: 0 4px 14px rgba(250, 44, 175, 0.22);
  }
}

/* Between 641px and 820px the invite is a two-column bar and the Someday keeps
   `nowrap`, so anything longer than a few words is cut off with an ellipsis —
   measured at 716px: 645px of text in a 418px box. Let it wrap instead. */
@media (min-width: 641px) and (max-width: 820px) {
  .referral-invite__someday span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ---------------------------------------------------------------- participant analytics */
.dashboard__stats--three {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px;
}

.dashboard__stats--three > div + div {
  padding-left: 10% !important;
  border-left: 1px solid var(--line) !important;
}

@media (max-width: 580px) {
  .dashboard__stats--three {
    grid-template-columns: 1fr 1fr !important;
  }
  .dashboard__stats--three > div:last-child {
    grid-column: span 2;
    border-left: none !important;
    border-top: 1px solid var(--line);
    padding-left: 0 !important;
    padding-top: 14px;
    margin-top: 6px;
  }
}

.dashboard__stat--pending strong {
  color: #f59e0b !important;
}

.dashboard__portal-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--paper, #fff);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(27, 8, 190, 0.04);
}

.dashboard__portal-cta:hover {
  border-color: var(--ink);
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(27, 8, 190, 0.08);
}

.dashboard__portal-cta span:last-child {
  font-size: 15px;
  transition: transform 0.15s ease;
}

.dashboard__portal-cta:hover span:last-child {
  transform: translateX(3px);
}

@keyframes leaderboardRowPulse {
  0% { transform: scale(1); filter: brightness(1.2); }
  50% { transform: scale(1.018); filter: brightness(1.35); box-shadow: 0 0 20px rgba(255, 45, 120, 0.45); }
  100% { transform: scale(1); filter: brightness(1); box-shadow: none; }
}

.leaderboard__table tr.just-updated {
  animation: leaderboardRowPulse 2s ease-out;
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------- declaration form polish */
.field--textarea small {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: rgba(27, 8, 190, 0.52);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

.date-options label span {
  border-radius: 4px;
  user-select: none;
}

.date-options label span:hover {
  border-color: rgba(27, 8, 190, 0.38);
  background: rgba(255, 255, 255, 0.98);
}

.date-options input:checked + span {
  border-color: var(--pink, #ed3f73);
  background: var(--pink-pale, #fef0f4);
  box-shadow: inset 0 0 0 1px var(--pink, #ed3f73);
}

.custom-date {
  margin-top: 10px;
  margin-bottom: 12px;
}

.custom-date input {
  cursor: pointer;
  font-family: var(--font-ui, sans-serif);
}


/* ---------------------------------------------------------------- map note
   While the map carries no pins, the line underneath is the only thing in that
   column — so it reads as a caption rather than the 8px mono footnote the
   pinned state uses. "The first cities will be chosen by the Somedays
   community" is a promise, not a legend. */
.tour__map-hint--quiet {
  max-width: 34ch;
  margin: 14px auto 0;
  color: rgba(27, 8, 190, 0.62);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  text-align: center;
}

@media (max-width: 820px) {
  .tour__map-hint--quiet { max-width: 30ch; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- updated confirmation dialog (momentum & referral) */
.success-dialog {
  width: min(960px, calc(100vw - 32px));
  max-height: 90vh;
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}
.success-dialog::backdrop {
  background: rgba(18, 0, 120, 0.65);
  backdrop-filter: blur(8px);
}
.success-shell {
  position: relative;
  background: var(--paper, #fbf7ef);
  border: 1px solid var(--line, rgba(27, 8, 190, 0.14));
  border-top: 6px solid var(--pink);
  border-radius: 16px;
  box-shadow: 0 32px 90px rgba(27, 8, 190, 0.25);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(24px, 3.5vw, 40px);
  align-items: start;
}
.success-dialog .dialog-close {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 10;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: all .15s ease;
}
.success-dialog .dialog-close:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.success-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.success-check {
  width: 28px;
  height: 28px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2e7d32;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  flex: none;
}
.success-copy .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink);
}
.success-copy h2 {
  margin: 10px 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--ink);
}
.success-rank-lead {
  margin: 0 0 16px;
}
.success-rank-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(252, 42, 181, 0.08);
  border: 1px solid rgba(252, 42, 181, 0.25);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.success-progress-card {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(27, 8, 190, 0.04);
}
.cf-progress-head h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 700;
}
.cf-progress-head p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(27, 8, 190, 0.68);
}
.cf-progress-status {
  margin-top: 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
}
.cf-friends-text strong {
  color: var(--pink);
  font-size: 13px;
}
.cf-unlock-target {
  color: var(--ink);
  font-size: 11.5px;
}
.cf-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(27, 8, 190, 0.08);
  overflow: hidden;
}
.cf-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink), var(--pink));
  transition: width 0.4s ease;
}

.success-share-block {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf-btn-bring {
  width: 100%;
  height: 46px;
  font-size: 13px;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(252, 42, 181, 0.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cf-btn-bring:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(252, 42, 181, 0.36);
}
.cf-quick-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-quick-btn {
  flex: 1 1 110px;
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper, #fbf7ef);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cf-quick-btn:hover {
  border-color: var(--ink);
  background: var(--white);
  color: var(--ink);
}

.success-dialog .share-link {
  margin-top: 4px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.success-dialog .share-link input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: 500 12px/42px var(--font-mono);
}
.success-dialog .share-link input:focus {
  outline: none;
  border-color: var(--pink);
}
.success-dialog .share-link button {
  flex: none;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.success-dialog .share-link button:hover {
  background: var(--pink);
}

.success-city-card {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
.cf-city-title {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.cf-city-desc {
  margin: 0 0 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(27, 8, 190, 0.68);
}
.cf-city-tally {
  margin-bottom: 8px;
  display: flex;
  gap: 16px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(27, 8, 190, 0.8);
}
.cf-city-action {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s ease;
}
.cf-city-action:hover {
  color: var(--ink);
  text-decoration: underline;
}

.success-card-preview {
  width: min(280px, 100%);
  margin: 0;
  text-align: center;
  justify-self: center;
}
.success-card-preview img {
  width: 100%;
  display: block;
  border: 10px solid var(--white);
  border-radius: 4px;
  box-shadow: 0 20px 55px rgba(27, 8, 190, 0.18);
  transform: rotate(1.5deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.success-card-preview:hover img {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 26px 65px rgba(27, 8, 190, 0.24);
}
.success-card-preview figcaption {
  margin: 12px 0 10px;
  color: rgba(27, 8, 190, 0.55);
  font-size: 11px;
}

@media (max-width: 860px) {
  .success-shell {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 18px;
  }
  .success-card-preview {
    order: -1;
    max-width: 250px;
    margin: 0 auto;
  }
}

/* Dedicated Thank You Page Shell */
body.thankyou-body {
  background: var(--paper, #f8f3ed);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.thankyou-main-stage {
  flex: 1;
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}
.thankyou-shell {
  position: relative;
  background: var(--paper, #f8f3ed);
  border: 1px solid var(--line, rgba(27, 8, 190, 0.14));
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(27, 8, 190, 0.08);
  max-height: none !important;
  overflow: visible !important;
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-top: 4px solid var(--pink);
}
.thankyou-shell::after { opacity: .45; pointer-events: none; }
.thankyou-shell .success-copy { min-width: 0; }
.thankyou-shell .success-check { margin-bottom: 10px; }
.thankyou-shell .success-rank-lead {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.thankyou-shell .success-rank-pill {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.45;
}
.thankyou-shell .success-next-step {
  margin: 20px 0 0;
  padding: 20px 22px;
  border: 1px solid rgba(27, 8, 190, .12);
  border-left: 4px solid var(--pink);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(237, 233, 244, .78), rgba(255, 250, 242, .72));
}
.thankyou-shell .cf-next-step-badge,
.thankyou-shell .cf-status-label {
  display: block;
  margin-bottom: 8px;
  color: var(--pink);
  font: 700 9px/1.3 var(--font-mono);
  letter-spacing: .13em;
}
.thankyou-shell .success-next-step h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}
.thankyou-shell .success-next-step p {
  margin: 0;
  color: rgba(27, 8, 190, .68);
  font-size: 13px;
  line-height: 1.55;
}
.thankyou-shell .success-progress-card {
  margin: 24px 0;
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.thankyou-shell .cf-progress-head h3 { font-size: 18px; }
.thankyou-shell .cf-progress-head p { max-width: 62ch; font-size: 13px; }
.thankyou-shell .cf-progress-status { gap: 18px; min-width: 0; line-height: 1.4; }
.thankyou-shell .cf-progress-status > * { min-width: 0; }
.thankyou-shell .success-share-block { gap: 12px; }
.thankyou-shell .share-link {
  width: 100%;
  min-width: 0;
}
.thankyou-shell .share-link input { min-width: 0; }
.thankyou-shell .success-city-card {
  margin: 26px 0 0;
  padding: 22px 24px;
  border: 0;
  border-radius: 14px;
  background: rgba(237, 233, 244, .72);
}
.thankyou-shell .cf-city-title { font-size: 10px; }
.thankyou-shell .cf-city-desc { max-width: 68ch; font-size: 13px; }
.thankyou-shell .cf-city-tally { margin: 12px 0; font-size: 11px; }
.thankyou-shell .success-status-summary {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.thankyou-shell .cf-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.thankyou-shell .cf-status-item {
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid var(--line);
}
.thankyou-shell .cf-status-item:first-child { padding-left: 0; border-left: 0; }
.thankyou-shell .cf-status-item small,
.thankyou-shell .cf-status-item strong { display: block; overflow-wrap: anywhere; }
.thankyou-shell .cf-status-item small {
  margin-bottom: 5px;
  color: rgba(27, 8, 190, .56);
  font-size: 10px;
}
.thankyou-shell .cf-status-item strong {
  color: var(--ink);
  font: 700 15px/1.25 var(--font-sans);
}
.thankyou-shell .success-timeline-note {
  margin-top: 28px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(170px, .55fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  border-radius: 12px;
  background: var(--ink);
  color: var(--white);
}
.thankyou-shell .success-timeline-note strong {
  font: 700 10px/1.45 var(--font-mono);
  letter-spacing: .1em;
}
.thankyou-shell .success-timeline-note span {
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  line-height: 1.5;
}
.thankyou-quote {
  margin: 10px 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-serif, "Newsreader", serif);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink, #1b08be);
  opacity: 0.92;
}
.thankyou-quote footer {
  font-family: var(--font-sans, "Hanken Grotesk", sans-serif);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(27, 8, 190, 0.6);
  margin-top: 5px;
}
@media (max-width: 900px) {
  .thankyou-shell {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 30px 20px;
  }
  .thankyou-shell .success-copy {
    order: -1;
  }
  .thankyou-shell .success-card-preview {
    order: 0;
    margin-bottom: 10px;
  }
}
@media (max-width: 560px) {
  .thankyou-main-stage {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 22px 14px 42px;
  }
  .thankyou-shell {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    padding: 26px 20px 34px;
    gap: 30px;
    border-radius: 16px;
    overflow: hidden !important;
  }
  .thankyou-shell .success-copy,
  .thankyou-shell .success-copy > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .thankyou-shell .success-copy { width: 100%; }
  .thankyou-shell .success-check { width: 28px; max-width: 28px; }
  .thankyou-shell .success-copy h2,
  .thankyou-shell .success-next-step h3,
  .thankyou-shell .cf-progress-head,
  .thankyou-shell .cf-unlock-target {
    overflow-wrap: anywhere;
  }
  .thankyou-shell .success-copy h2 {
    font-size: clamp(30px, 9vw, 38px);
    line-height: 1.04;
  }
  .thankyou-shell .thankyou-quote { font-size: 22px; }
  .thankyou-shell .success-rank-pill { width: 100%; }
  .thankyou-shell .success-next-step { padding: 18px; }
  .thankyou-shell .success-next-step h3 { font-size: 17px; }
  .thankyou-shell .cf-progress-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .thankyou-shell .cf-quick-share { display: grid; grid-template-columns: 1fr; }
  .thankyou-shell .cf-quick-btn { width: 100%; }
  .thankyou-shell .share-link input { font-size: 10px; }
  .thankyou-shell .success-city-card { padding: 20px; }
  .thankyou-shell .cf-city-tally { align-items: flex-start; flex-direction: column; gap: 5px; }
  .thankyou-shell .cf-status-grid { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .thankyou-shell .cf-status-item { padding-inline: 12px; }
  .thankyou-shell .cf-status-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .thankyou-shell .cf-status-item:nth-child(even) { padding-right: 0; }
  .thankyou-shell .cf-status-item:nth-child(3) { grid-column: 1 / -1; padding-right: 0; }
  .thankyou-shell .success-timeline-note { grid-template-columns: 1fr; gap: 7px; }
  .thankyou-shell .success-card-preview { width: min(230px, 82%); }
}
/* ==========================================================================
   Participant Dashboard Refinements (Consistent with Brand Theme)
   ========================================================================== */

/* Shell container */
.portal-container {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) clamp(16px, 4vw, 28px) 72px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Banner / Alerts */
.portal-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pink);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(27, 8, 190, .04);
}
.portal-alert--verified {
  border-left-color: #2e7d32;
  background: #f4fbf6;
}
.portal-alert__content {
  max-width: 62ch;
}
.portal-alert__title,
.portal-alert__content > strong {
  display: block;
  margin: 0 0 4px;
  font: 700 17px/1.2 var(--font-serif);
  color: var(--ink);
  letter-spacing: -.01em;
}
.portal-alert__content p {
  margin: 0;
  color: rgba(27, 8, 190, .75);
  font-size: 13.5px;
  line-height: 1.55;
}
.portal-alert__content p strong {
  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
.portal-alert__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.portal-alert__btn {
  flex: none;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.portal-alert__btn:hover {
  background: var(--pink);
  transform: translateY(-1px);
}
.portal-alert__status {
  font-size: 12px;
  font-weight: 600;
  color: var(--pink);
}

/* Hero lead */
.portal-hero__lead {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(27, 8, 190, .75);
}

/* Cards: hairline rules, soft shadows, rounded corners */
.portal-card,
.portal-milestone-card,
.portal-nudge-card,
.portal-friends-card {
  padding: clamp(22px, 3.2vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 45px rgba(27, 8, 190, .04);
}

.portal-nudge-card p strong {
  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* Primary Share Card: Somedays Signature Card Design with Pink Top Accent */
.portal-share-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 6px solid var(--pink);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(27, 8, 190, .08);
  padding: clamp(24px, 3.8vw, 40px);
}
.portal-share-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(24px, 3.5vw, 42px);
  align-items: start;
}
.portal-share-card__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.portal-share-headline {
  margin: 0 0 12px;
  font: 700 clamp(24px, 3vw, 32px)/1.1 var(--font-serif);
  letter-spacing: -.02em;
  color: var(--ink);
}
.portal-share-desc {
  margin: 0 0 22px;
  max-width: 58ch;
  color: rgba(27, 8, 190, .72);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Primary Bring a Friend CTA */
.portal-bring-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
  height: 48px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(252, 42, 181, .28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.portal-bring-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(252, 42, 181, .36);
  filter: brightness(1.03);
}

/* Quick Action Pills: Rounded pills matching landing page */
.portal-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.portal-quick-pill {
  flex: 1 1 120px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper, #fbf7ef);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.portal-quick-pill:hover {
  border-color: var(--ink);
  background: var(--white);
  color: var(--ink);
}

/* Referral Link Group */
.portal-share-link-group {
  margin-bottom: 22px;
}
.portal-share-link-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(27, 8, 190, .58);
}
.share-link-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.share-link-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper, #fbf7ef);
  color: var(--ink);
  font: 500 12.5px/44px var(--font-mono);
  transition: border-color .15s ease, background .15s ease;
}
.share-link-input:focus {
  outline: none;
  border-color: var(--pink);
  background: var(--white);
}
.share-copy-btn {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.share-copy-btn:hover {
  background: var(--pink);
  transform: translateY(-1px);
}

/* Social Share Pills */
.portal-share-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-share-social__label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(27, 8, 190, .55);
}
.portal-share-social .social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.portal-share-social .social-btn {
  flex: 0 1 auto;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.portal-share-social .social-btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

/* Right Column: Polaroid Share Card Preview */
.portal-share-card__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.portal-card-preview {
  width: min(280px, 100%);
  margin: 0;
  text-align: center;
  position: relative;
}
.portal-card-preview img {
  width: 100%;
  display: block;
  border: 10px solid var(--white);
  border-radius: 4px;
  box-shadow: 0 22px 60px rgba(27, 8, 190, .18);
  transform: rotate(1.5deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.portal-card-preview:hover img {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 28px 70px rgba(27, 8, 190, .24);
}
.portal-card-preview figcaption {
  margin: 14px 0 12px;
  color: rgba(27, 8, 190, .55);
  font-size: 11px;
  letter-spacing: .02em;
}
.portal-card-preview .card-preview-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.card-preview-btn {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.card-preview-btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.card-preview-btn--pink {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}
.card-preview-btn--pink:hover {
  background: var(--pink-dark, #d81699);
  border-color: var(--pink-dark, #d81699);
  color: var(--white);
}

@media (max-width: 860px) {
  .portal-share-card__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .portal-share-card__aside {
    order: -1;
    margin-bottom: 8px;
    width: 100%;
  }
  .portal-card-preview {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* Milestone Stepper: 6 steps */
.milestone-stepper {
  grid-template-columns: repeat(6, 1fr) !important;
}
.milestone-stepper::before {
  left: 8.33% !important;
  right: 8.33% !important;
}
.milestone-stepper__fill {
  left: 8.33% !important;
}

/* 50-referral milestone cap callout */
.milestone-cap-row {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.milestone-cap-row strong {
  display: block;
  font: 700 15px/1.2 var(--font-serif);
  color: var(--ink);
  margin-bottom: 4px;
}
.milestone-cap-row p {
  margin: 0;
  font-size: 13px;
  color: rgba(27, 8, 190, .68);
  line-height: 1.5;
  max-width: 58ch;
}
.milestone-cap-count {
  flex: none;
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  padding: 5px 11px;
  border: 1px solid rgba(252, 42, 181, .3);
}

/* Top 50 Advocate Card: Flat, editorial, hairline border */
.portal-advocate-card {
  padding: clamp(22px, 3.2vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.portal-advocate-card__main {
  flex: 1 1 360px;
  min-width: 0;
}
.portal-advocate-card__main h3 {
  margin: 6px 0 8px;
  font: 700 clamp(20px, 2.5vw, 25px)/1.15 var(--font-serif);
  letter-spacing: -.02em;
  color: var(--ink);
}
.portal-advocate-card__main p {
  margin: 0 0 10px;
  color: rgba(27, 8, 190, .72);
  font-size: 13.5px;
  line-height: 1.55;
}
.portal-advocate-note {
  display: block;
  font-size: 12px;
  color: rgba(27, 8, 190, .55);
  font-style: italic;
}
.portal-advocate-card__standing {
  flex: none;
  min-width: 130px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.portal-advocate-card__standing small {
  font: 700 8.5px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(27, 8, 190, .55);
}
.portal-advocate-card__standing strong {
  font: 700 clamp(28px, 3.5vw, 36px)/1 var(--font-serif);
  letter-spacing: -.04em;
  color: var(--ink);
}
.portal-advocate-card__standing span {
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: rgba(27, 8, 190, .5);
}

/* City Card: Flat, editorial, hairline border */
.portal-city-card {
  padding: clamp(22px, 3.2vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.portal-city-card__copy {
  flex: 1 1 360px;
  min-width: 0;
}
.portal-city-card__copy h3 {
  margin: 6px 0 8px;
  font: 700 clamp(20px, 2.5vw, 25px)/1.15 var(--font-serif);
  letter-spacing: -.02em;
  color: var(--ink);
}
.portal-city-card__copy p {
  margin: 0 0 10px;
  color: rgba(27, 8, 190, .72);
  font-size: 13.5px;
  line-height: 1.55;
}
.portal-city-card__tally {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(27, 8, 190, .6);
}
.portal-city-card__tally strong {
  color: var(--ink);
}
.portal-city-card__btn {
  flex: none;
  padding: 11px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.portal-city-card__btn:hover {
  background: var(--ink);
  color: var(--white);
}

/* Timeline Note: clean typographic footnote */
.portal-timeline-note {
  padding: 18px clamp(18px, 3vw, 26px);
  background: var(--white);
  border: 1px solid var(--line);
}
.portal-timeline-note strong {
  display: block;
  margin-bottom: 4px;
  font: 700 9.5px/1 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
}
.portal-timeline-note p {
  margin: 0;
  font-size: 13.5px;
  color: rgba(27, 8, 190, .68);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .portal-advocate-card,
  .portal-city-card {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-advocate-card__standing {
    width: 100%;
  }
  .portal-city-card__btn {
    width: 100%;
    text-align: center;
  }
}

/* -------------------------------------------------------- anchor scroll margin
   Ensures sections targeted by navigation links (#stories, #tour, etc.)
   stop smoothly below the sticky site header rather than underneath it. */
section[id], .section[id], footer[id], [data-builder-section][id] {
  scroll-margin-top: calc(var(--header-height, 82px) + 16px);
}