:root {
  color-scheme: light;
  --forest: #173f35;
  --forest-dark: #092a22;
  --leaf: #63ae63;
  --mint: #e9f4e7;
  --cream: #fffdf5;
  --sun: #f8d862;
  --coral: #f36b61;
  --purple: #7157b7;
  --ink: #17342d;
  --muted: #63756d;
  --line: #dfe7dd;
  --shadow: 0 22px 65px rgb(21 57 45 / 12%);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 5% 10%, rgb(248 216 98 / 24%) 0 11rem, transparent 11.1rem),
    radial-gradient(circle at 95% 34%, rgb(99 174 99 / 16%) 0 15rem, transparent 15.1rem),
    #f7faf5;
  color: var(--ink);
  margin: 0;
  min-width: 320px;
}

button, input, select { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
  padding: 1rem clamp(1rem, 4vw, 3rem);
}

.account-brand { align-items: center; color: var(--ink); display: flex; gap: .7rem; text-decoration: none; }
.account-brand img { border: 3px solid white; border-radius: 17px; box-shadow: 0 5px 0 rgb(28 72 55 / 15%); height: 52px; width: 52px; }
.account-brand span { display: flex; flex-direction: column; line-height: 1.12; }
.account-brand strong { font-weight: 950; }
.account-brand small { color: var(--muted); font-weight: 750; margin-top: .16rem; }
.site-header nav { align-items: center; display: flex; gap: .55rem; }
.site-header nav a { border-radius: 999px; color: var(--forest); font-weight: 850; padding: .7rem 1rem; text-decoration: none; }
.site-header .play-link { background: var(--forest); color: white; }

main { margin: 0 auto; max-width: 1240px; padding: 0 clamp(1rem, 4vw, 3rem) 4rem; }
.notice { background: #fff5cc; border: 1px solid #eed779; border-radius: 16px; color: #684b0f; font-weight: 800; margin: .5rem 0 1rem; padding: .85rem 1rem; text-align: center; }

.member-hero { align-items: center; display: grid; gap: clamp(2rem, 7vw, 6rem); grid-template-columns: 1.1fr .9fr; min-height: min(650px, calc(100vh - 90px)); padding: 4rem 0 5rem; }
.eyebrow { color: #44794e; font-size: .78rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
h1 { color: var(--forest-dark); font-size: clamp(3rem, 6.4vw, 6rem); font-weight: 950; letter-spacing: -.07em; line-height: .93; margin: 1rem 0 1.3rem; }
.hero-copy > p { color: #4d675d; font-size: clamp(1.08rem, 2vw, 1.28rem); line-height: 1.65; margin: 0; max-width: 650px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.primary-action, .plan-button, #manage-billing, #manage-billing-top {
  background: var(--forest); border: 0; border-radius: 999px; box-shadow: 0 7px 0 var(--forest-dark); color: white; cursor: pointer; font-weight: 950; min-height: 55px; padding: .85rem 1.35rem 1rem;
}
.primary-action:disabled, .plan-button:disabled { background: #87958e; box-shadow: 0 6px 0 #64736b; cursor: not-allowed; }
.text-action { color: var(--forest); font-weight: 900; text-underline-offset: 4px; }
.trust-row { color: #65776e; display: flex; flex-wrap: wrap; font-size: .88rem; font-weight: 800; gap: .75rem 1rem; margin-top: 1.25rem; }

.hero-card { background: linear-gradient(145deg, #183f35, #0c2d26); border: 7px solid white; border-radius: 38px; box-shadow: 0 30px 80px rgb(14 55 42 / 27%); color: white; min-height: 430px; padding: clamp(1.5rem, 4vw, 2.4rem); position: relative; transform: rotate(1.4deg); }
.hero-card::before { background: var(--sun); border-radius: 50%; content: ""; filter: blur(25px); height: 120px; opacity: .28; position: absolute; right: 10%; top: 7%; width: 120px; }
.hero-card-top { align-items: center; display: flex; justify-content: space-between; position: relative; }
.member-mark { background: var(--sun); border-radius: 999px; color: #62450b; font-size: .75rem; font-weight: 950; letter-spacing: .08em; padding: .45rem .7rem; }
.mini-avatar { align-items: center; background: white; border-radius: 20px; display: flex; font-size: 2.4rem; height: 67px; justify-content: center; width: 67px; }
.progress-preview { background: rgb(255 255 255 / 9%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 24px; display: flex; flex-direction: column; gap: .5rem; margin-top: 2.2rem; padding: 1.3rem; }
.progress-preview > span { color: #bcd7ca; font-size: .82rem; font-weight: 800; }
.progress-preview > strong { font-size: 1.25rem; }
.progress-preview > div { background: rgb(255 255 255 / 13%); border-radius: 999px; height: 13px; overflow: hidden; }
.progress-preview i { background: linear-gradient(90deg, var(--sun), #9edb72); border-radius: inherit; display: block; height: 100%; }
.preview-grid { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; margin-top: .8rem; }
.preview-grid span { background: rgb(255 255 255 / 8%); border-radius: 18px; color: #cce0d6; display: flex; flex-direction: column; font-size: .8rem; gap: .25rem; padding: 1rem; }
.preview-grid b { color: white; font-size: 1.4rem; }

.account-strip { align-items: center; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgb(28 68 53 / 8%); display: flex; justify-content: space-between; margin-bottom: 5rem; min-height: 70px; padding: .8rem 1rem .8rem 1.2rem; }
.account-strip > div { align-items: center; display: flex; font-weight: 850; gap: .6rem; }
.status-dot { background: #f2b53e; border-radius: 50%; box-shadow: 0 0 0 5px rgb(242 181 62 / 18%); height: 10px; width: 10px; }
.account-strip.is-member .status-dot { background: #5eb566; box-shadow: 0 0 0 5px rgb(94 181 102 / 18%); }
.account-strip a, .account-strip button { background: var(--mint); border: 0; border-radius: 999px; color: var(--forest); cursor: pointer; font-weight: 900; min-height: 44px; padding: .65rem 1rem; text-decoration: none; }

.section-heading h2 { color: var(--forest-dark); font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.045em; line-height: 1.02; margin: .5rem 0 0; }
.section-heading > p { color: var(--muted); line-height: 1.6; }
.centered { margin: 0 auto 2.2rem; max-width: 760px; text-align: center; }
.dashboard { margin-bottom: 6rem; }
.dashboard-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.account-badge { background: #e3f4d8; border-radius: 999px; color: #2f753c; font-size: .78rem; font-weight: 950; letter-spacing: .06em; padding: .55rem .8rem; text-transform: uppercase; }
.dashboard-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1.5fr; }
.access-pin-panel { align-items: center; background: linear-gradient(120deg, #f0eaff, #fff4c8); border: 1px solid #decdf4; border-radius: 26px; box-shadow: 0 14px 40px rgb(62 41 95 / 10%); display: grid; gap: 1rem; grid-template-columns: auto minmax(220px, 1fr) minmax(290px, .85fr); margin-bottom: 1rem; padding: 1.25rem; }
.access-pin-icon { align-items: center; background: white; border: 3px solid #d5bdf1; border-radius: 20px; display: flex; font-size: 2rem; height: 64px; justify-content: center; width: 64px; }
.access-pin-copy > span { color: #664296; font-size: .75rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.access-pin-copy h3 { color: #3f2861; font-size: 1.15rem; margin: .25rem 0 .3rem; }
.access-pin-copy p { color: #6c5c7a; font-size: .82rem; line-height: 1.5; margin: 0; }
.access-pin-form { display: flex; flex-direction: column; gap: .4rem; }
.access-pin-form label { color: #4e386d; font-size: .75rem; font-weight: 900; }
.access-pin-form > div { display: grid; gap: .5rem; grid-template-columns: minmax(120px, 1fr) auto; }
.access-pin-form input { background: white; border: 2px solid #cab1e5; border-radius: 12px; color: #2f2142; font: inherit; font-size: 1.05rem; font-weight: 900; letter-spacing: .18em; min-width: 0; padding: .65rem .7rem; text-align: center; }
.access-pin-form button { background: #6540a6; border: 0; border-radius: 12px; color: white; cursor: pointer; font-weight: 900; padding: .65rem .85rem; }
.access-pin-form button:disabled { cursor: wait; opacity: .65; }
.access-pin-form p { color: #7b3b38; font-size: .76rem; font-weight: 800; margin: 0; min-height: 1.1em; }
.access-pin-form p.is-success { color: #276f3c; }
.panel { background: white; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 14px 40px rgb(25 67 51 / 8%); padding: 1.3rem; }
.panel-heading { align-items: start; display: flex; justify-content: space-between; margin-bottom: 1rem; }
.panel-heading > div { display: flex; flex-direction: column; gap: .2rem; }
.panel-heading span, .review-panel > div > span { color: #5d796b; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.panel-heading strong { font-size: 1.15rem; }
.panel-heading small { color: var(--muted); }
.profile-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.profile-chip { align-items: center; background: #f4f7f1; border: 2px solid transparent; border-radius: 16px; color: var(--ink); cursor: pointer; display: flex; font-weight: 850; gap: .45rem; min-height: 48px; padding: .55rem .75rem; }
.profile-chip.is-active { background: #e6f4db; border-color: #77b966; }
.profile-form { display: grid; gap: .55rem; grid-template-columns: 1fr auto auto; margin-top: .8rem; }
.profile-form input, .profile-form select { background: #f8faf6; border: 1px solid var(--line); border-radius: 12px; min-width: 0; padding: .68rem; }
.profile-form button, .add-profile-button { background: var(--forest); border: 0; border-radius: 12px; color: white; cursor: pointer; font-weight: 900; padding: .65rem .8rem; }
.add-profile-button { margin-top: .8rem; width: 100%; }
.form-message { color: var(--coral); font-size: .82rem; margin: .5rem 0 0; }
.stat-grid { display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr); }
.stat-grid > div { background: #f4f8f1; border-radius: 18px; display: flex; flex-direction: column; gap: .2rem; padding: 1rem; }
.stat-grid b { color: var(--forest); font-size: 1.75rem; }
.stat-grid span { color: var(--muted); font-size: .8rem; font-weight: 800; }
.lesson-progress { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.progress-row { align-items: center; display: grid; gap: .7rem; grid-template-columns: minmax(100px, 1fr) 2fr auto; }
.progress-row > span { font-size: .82rem; font-weight: 850; }
.progress-row > div { background: #e9eee7; border-radius: 999px; height: 9px; overflow: hidden; }
.progress-row i { background: linear-gradient(90deg, #61ad62, #a8d55f); border-radius: inherit; display: block; height: 100%; }
.progress-row small { color: var(--muted); font-weight: 800; }
.achievement-grid { display: grid; gap: .6rem; grid-template-columns: repeat(4, 1fr); }
.achievement { background: #f3f5f1; border-radius: 16px; filter: grayscale(1); opacity: .55; padding: .8rem; text-align: center; }
.achievement.is-earned { background: #fff6d1; filter: none; opacity: 1; }
.achievement b { display: block; font-size: 1.7rem; }
.achievement span { display: block; font-size: .72rem; font-weight: 850; margin-top: .35rem; }
.review-panel { align-items: center; background: linear-gradient(135deg, #e8f5dc, #fff8d8); display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; }
.review-icon { align-items: center; background: white; border-radius: 19px; color: var(--purple); display: flex; font-size: 2rem; height: 60px; justify-content: center; width: 60px; }
.review-panel > div { display: flex; flex-direction: column; gap: .2rem; }
.review-panel p { color: var(--muted); font-size: .88rem; margin: .15rem 0 0; }
.review-panel a { background: var(--purple); border-radius: 999px; color: white; font-weight: 900; padding: .7rem .9rem; text-decoration: none; }

.comparison { padding: 2rem 0 6rem; }
.plan-grid { align-items: stretch; display: grid; gap: 1rem; grid-template-columns: .9fr 1.15fr .9fr; }
.plan-card { background: white; border: 1px solid var(--line); border-radius: 28px; display: flex; flex-direction: column; padding: 1.5rem; position: relative; }
.member-plan { background: linear-gradient(155deg, #193f36, #0a2b24); border: 6px solid white; box-shadow: 0 24px 65px rgb(20 64 49 / 22%); color: white; transform: translateY(-10px); }
.best-value { background: var(--sun); border-radius: 999px; color: #62450b; font-size: .7rem; font-weight: 950; letter-spacing: .08em; padding: .45rem .65rem; position: absolute; right: 1.2rem; top: 1.15rem; }
.plan-label { color: #578064; font-size: .75rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.member-plan .plan-label { color: #b8d9c8; }
.plan-card h3 { font-size: 1.35rem; margin: .7rem 0 1rem; }
.price { align-items: baseline; display: flex; gap: .45rem; }
.price b { font-size: 2.4rem; letter-spacing: -.05em; }
.price span, .plan-card > small { color: var(--muted); }
.member-plan .price span, .member-plan > small { color: #b9d0c5; }
.plan-card ul { display: flex; flex: 1; flex-direction: column; gap: .7rem; list-style: none; margin: 1.4rem 0; padding: 0; }
.plan-card li { line-height: 1.4; padding-left: 1.35rem; position: relative; }
.plan-card li::before { color: var(--leaf); content: "✓"; font-weight: 950; left: 0; position: absolute; }
.plan-card > a, .plan-button { align-items: center; display: flex; justify-content: center; min-height: 51px; text-decoration: none; width: 100%; }
.plan-card > a { background: var(--mint); border-radius: 999px; color: var(--forest); font-weight: 900; }
.member-plan .plan-button { background: var(--sun); box-shadow: 0 6px 0 #b98627; color: #583c08; }
.secondary-plan { background: var(--mint); box-shadow: none; color: var(--forest); }
.payment-methods { align-items: center; background: white; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 16px 45px rgb(25 67 51 / 9%); display: grid; gap: 1.8rem; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); margin-top: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); }
.payment-method-copy h3 { color: var(--forest-dark); font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.035em; margin: .45rem 0 .65rem; }
.payment-method-copy p { color: var(--muted); line-height: 1.6; margin: 0; }
.payment-method-panel { background: #f5f8f3; border: 1px solid #e1e9df; border-radius: 20px; padding: 1rem; }
.payment-brand-row { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-brand { align-items: center; background: white; border: 1px solid #dce4da; border-radius: 9px; color: #27382f; display: inline-flex; font-size: .75rem; font-weight: 950; height: 38px; justify-content: center; letter-spacing: .01em; min-width: 67px; padding: 0 .68rem; }
.apple-pay { color: #111; font-size: .92rem; letter-spacing: 0; }
.visa { color: #173a8c; font-size: .88rem; font-style: italic; }
.mastercard { font-size: .68rem; gap: .3rem; }
.mastercard i { background: linear-gradient(90deg, #e84c35 0 48%, #f4aa24 52% 100%); border-radius: 999px; display: inline-block; height: 17px; width: 27px; }
.amex { background: #2478a9; border-color: #2478a9; color: white; }
.chase { color: #176ca5; }
.checkout-label { color: #688076; display: block; font-size: .72rem; font-weight: 950; letter-spacing: .08em; margin: 1rem 0 .55rem; text-transform: uppercase; }
.checkout-detail-grid { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
.checkout-detail-grid span { background: white; border: 1px solid #dfe7dd; border-radius: 11px; color: #3f584d; font-size: .78rem; font-weight: 850; padding: .65rem .72rem; }
.payment-method-panel small { color: var(--muted); display: block; font-size: .75rem; line-height: 1.45; margin-top: .7rem; }
.billing-note { color: var(--muted); font-size: .82rem; line-height: 1.5; margin-top: 1.3rem; text-align: center; }

.feature-band { padding: 1rem 0 6rem; }
.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.feature-grid article { background: white; border: 1px solid var(--line); border-radius: 24px; padding: 1.3rem; }
.feature-grid article > span { font-size: 2rem; }
.feature-grid h3 { margin: .8rem 0 .45rem; }
.feature-grid p { color: var(--muted); line-height: 1.55; margin: 0; }
.billing-panel { align-items: center; background: #e8f4e3; border-radius: 30px; display: flex; justify-content: space-between; margin-bottom: 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.billing-panel h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin: .45rem 0; }
.billing-panel p { color: var(--muted); line-height: 1.55; margin: 0; max-width: 650px; }

footer { align-items: center; background: var(--forest-dark); color: white; display: flex; justify-content: space-between; padding: 2rem max(1rem, calc((100vw - 1144px) / 2)); }
footer > div { display: flex; flex-direction: column; gap: .2rem; }
footer span { color: #aac4b8; font-size: .8rem; }
footer nav { display: flex; gap: 1rem; }
footer a { color: white; font-weight: 800; text-decoration: none; }

[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }

@media (max-width: 900px) {
  .member-hero { grid-template-columns: 1fr; padding: 3rem 0 4rem; }
  .hero-card { min-height: 380px; transform: none; }
  .dashboard-grid, .plan-grid { grid-template-columns: 1fr; }
  .member-plan { order: -1; transform: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .payment-methods { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
  .access-pin-panel { grid-template-columns: auto 1fr; }
  .access-pin-form { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .site-header { padding-inline: 1rem; }
  .site-header nav a:first-child, .account-brand small { display: none; }
  .account-brand img { height: 46px; width: 46px; }
  h1 { font-size: clamp(2.7rem, 14vw, 4.5rem); }
  .member-hero { min-height: 0; padding-top: 2.2rem; }
  .account-strip, .dashboard-heading, .billing-panel { align-items: stretch; flex-direction: column; gap: .8rem; }
  .account-strip > a, .account-strip > button { text-align: center; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .profile-form { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr 1fr; }
  .stat-grid > div { padding: .75rem .5rem; }
  .stat-grid b { font-size: 1.35rem; }
  .review-panel { grid-template-columns: auto 1fr; }
  .review-panel a { grid-column: 1 / -1; text-align: center; }
  .feature-grid { grid-template-columns: 1fr; }
  .member-benefits { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.journey-overview { display: grid; gap: 1rem; grid-template-columns: minmax(220px, .65fr) minmax(0, 2fr); margin-bottom: 1rem; }
.journey-stats { background: linear-gradient(145deg, #173f35, #0d2f27); border: 6px solid white; border-radius: 26px; box-shadow: 0 18px 50px rgb(21 57 45 / 15%); color: white; display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); padding: 1rem; }
.journey-stats > div { align-items: center; display: flex; flex-direction: column; justify-content: center; min-width: 0; text-align: center; }
.journey-stats span { font-size: 1.35rem; }
.journey-stats b { font-size: 1.45rem; margin-top: .2rem; }
.journey-stats small { color: #bcd4c8; font-size: .68rem; font-weight: 800; }
.learning-journey { background: white; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 14px 40px rgb(25 67 51 / 8%); padding: 1.2rem; }
.journey-heading { align-items: center; display: flex; justify-content: space-between; }
.journey-heading > div { display: flex; flex-direction: column; gap: .18rem; }
.journey-heading span { color: #5d796b; font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.journey-heading strong { font-size: 1.05rem; }
.journey-heading a { background: #e7f4df; border-radius: 999px; color: var(--forest); font-size: .84rem; font-weight: 900; padding: .65rem .8rem; text-decoration: none; white-space: nowrap; }
.journey-track { display: grid; gap: .35rem; grid-template-columns: repeat(4, 1fr); margin-top: 1.2rem; position: relative; }
.journey-track::before { background: #dbe5d8; content: ""; height: 6px; left: 10%; position: absolute; right: 10%; top: 22px; }
.journey-step { align-items: center; display: flex; flex-direction: column; position: relative; text-align: center; z-index: 1; }
.journey-step > b { align-items: center; background: #e8eee5; border: 5px solid white; border-radius: 50%; box-shadow: 0 0 0 2px #cdd9ca; color: #65776e; display: flex; font-size: .9rem; height: 48px; justify-content: center; width: 48px; }
.journey-step > span { display: flex; flex-direction: column; gap: .18rem; margin-top: .55rem; }
.journey-step strong { font-size: .84rem; }
.journey-step small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
.journey-step.is-current > b { background: #e1f1ff; box-shadow: 0 0 0 3px #55a9d6; color: #145d88; }
.journey-step.is-complete > b { background: #77bd68; box-shadow: 0 0 0 2px #4d9a48; color: white; }
.journey-step.is-locked { opacity: .62; }
.weekly-panel, .leaderboard-panel { min-height: 250px; }
.weekly-bars { align-items: end; display: grid; gap: .45rem; grid-template-columns: repeat(7, 1fr); height: 150px; padding-top: .5rem; }
.weekly-bar { align-items: stretch; display: flex; flex-direction: column; gap: .35rem; height: 100%; justify-content: flex-end; text-align: center; }
.weekly-bar > span { align-items: end; background: #edf2ea; border-radius: 10px 10px 5px 5px; display: flex; flex: 1; overflow: hidden; }
.weekly-bar i { background: linear-gradient(#85ce77, #3b9958); border-radius: 9px 9px 4px 4px; display: block; min-height: 6px; width: 100%; }
.weekly-bar small { color: var(--muted); font-size: .67rem; font-weight: 800; }
.leaderboard-list { display: flex; flex-direction: column; }
.leaderboard-row { align-items: center; border-top: 1px solid var(--line); display: grid; gap: .65rem; grid-template-columns: 34px 38px 1fr auto; min-height: 51px; padding: .35rem .25rem; }
.leaderboard-row:first-child { border-top: 0; }
.leaderboard-row.is-own { background: #fff7d5; border-radius: 13px; padding-inline: .55rem; }
.leaderboard-rank { text-align: center; }
.leaderboard-avatar { align-items: center; background: #f1f5ee; border-radius: 50%; display: flex; font-size: 1.25rem; height: 34px; justify-content: center; width: 34px; }
.leaderboard-name { font-size: .86rem; font-weight: 850; }
.leaderboard-row > strong { color: var(--forest); font-size: .84rem; }
.leaderboard-empty { color: var(--muted); line-height: 1.55; margin: 1.5rem auto; max-width: 380px; text-align: center; }

@media (max-width: 900px) {
  .journey-overview { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-header nav { gap: .2rem; }
  .site-header nav a { font-size: .75rem; padding: .6rem .7rem; }
  .journey-stats { padding: .8rem .5rem; }
  .journey-heading { align-items: stretch; flex-direction: column; gap: .8rem; }
  .journey-heading a { text-align: center; }
  .journey-track { gap: .7rem; grid-template-columns: 1fr 1fr; }
  .journey-track::before { display: none; }
  .journey-step { align-items: center; background: #f5f8f3; border-radius: 16px; flex-direction: row; gap: .45rem; padding: .65rem; text-align: left; }
  .journey-step > b { flex: 0 0 42px; height: 42px; width: 42px; }
  .journey-step > span { margin-top: 0; }
  .leaderboard-row { gap: .4rem; grid-template-columns: 30px 34px 1fr auto; }
  .leaderboard-name { font-size: .75rem; }
  .access-pin-panel { grid-template-columns: 1fr; text-align: center; }
  .access-pin-icon { justify-self: center; }
  .access-pin-form { grid-column: auto; text-align: left; }
  .access-pin-form > div { grid-template-columns: 1fr; }
}