/* ============================================================
   Bellamy Sport & Leisure — site styles
   Built from design_handoff_bellamy_site. Desktop values are the
   base; the 390px design is expressed in the mobile media query
   at the foot of each block.
   ============================================================ */

/* ============================================================
   Biro Script — the Bellamy handwriting face. Same file the app
   and the home-screen widget bundle. The design handoff declared
   this @font-face but shipped no font folder, so the files come
   from the widget handoff.
   ============================================================ */

@font-face {
  font-family: 'Biro Script';
  src: url('/assets/fonts/Biro_Script_reduced.otf') format('opentype'),
       url('/assets/fonts/Biro_Script_reduced.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root { --font-hand: 'Biro Script', 'Pinyon Script', cursive; }

*, *::before, *::after { box-sizing: border-box; }

/* Several components set display, which would otherwise beat the hidden
   attribute. Anything marked hidden must actually be hidden. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: var(--bellamy-navy); text-decoration: none; }
a:hover { color: var(--bellamy-navy-deep); }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; }
p { margin: 0; text-wrap: pretty; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

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

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

/* ---- shared easing ---- */
:root {
  --page-gutter: 56px;
  --over-hero-gutter: 44px;
}

/* ============================================================
   Header — 3 column grid, sits inside the hero over the scrim
   ============================================================ */

.site-header {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 30px var(--over-hero-gutter) 22px;
}

.site-header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 26px;
  height: 20px;
  justify-self: start;
}
.site-header__burger span { width: 26px; height: 1.5px; background: #fff; display: block; }

.site-header__logo { justify-self: center; display: block; }
.site-header__logo img {
  height: 150px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(31, 47, 107, .45));
}

.site-header__member {
  justify-self: end;
  line-height: 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
}
.site-header__member:hover { color: #fff; opacity: .82; }

/* ============================================================
   Full screen menu overlay
   ============================================================ */

/* The prototype drew this absolutely inside the hero because each design file
   is a fixed-height board. On a real page it is a full-screen overlay, which is
   what the handoff calls it, and what short-header pages like FAQ need. */
.menu-overlay {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 20;
  background: rgba(31, 47, 107, .92);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: flex;
  flex-direction: column;
  padding: 30px var(--over-hero-gutter) 44px;
}
.menu-overlay[hidden] { display: none; }

.menu-overlay__top { display: flex; align-items: center; justify-content: space-between; }

.menu-overlay__top button,
.menu-overlay__top a {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
}
.menu-overlay__top .menu-overlay__member { color: rgba(244, 244, 242, .72); }

/* Six rows, filled by column, so the left column is the offer and the right is
   the rest. Fixed rows keep both columns on the same baselines.
   The width and the clamped size are set so the longest item, "The Self-Portrait
   Assessment", stays on one line at every width above the mobile breakpoint. A
   single wrapped item would double one row's height and open a gap across both
   columns. */
.menu-overlay__nav {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  align-content: start;
  gap: 24px 64px;
  max-width: 1040px;
}
.menu-overlay__nav a {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 200;
  color: #fff;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.menu-overlay__nav a:hover { color: #fff; opacity: .72; }

.menu-overlay__tagline {
  margin-top: auto;
  padding-top: 48px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .6);
}

/* ============================================================
   Member access overlay
   ============================================================ */

.member-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow-y: auto;
  background: var(--surface-navy-deep);
  display: flex;
  flex-direction: column;
  padding: 30px var(--over-hero-gutter) 44px;
}
.member-overlay[hidden] { display: none; }

.member-overlay__back {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(244, 244, 242, .8);
}
.member-overlay__back:hover { color: #fff; }

.member-overlay__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  margin-top: 20px;
}
.member-overlay__body > a img { height: 230px; width: auto; display: block; }

.member-overlay__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  text-align: center;
}
.member-overlay__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .62);
}
.member-overlay__intro p {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(244, 244, 242, .82);
}

.member-overlay__form {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.member-overlay__lost {
  align-self: center;
  margin-top: -8px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(244, 244, 242, .66);
}
.member-overlay__lost:hover { color: #fff; }

/* underline inputs on navy */
.input-underline-navy {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid rgba(244, 244, 242, .45);
  padding: 0 0 10px;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 16px;
  color: #fff;
}
.input-underline-navy::placeholder { color: #F4F4F2; opacity: .6; }
.input-underline-navy:focus { border-bottom-color: rgba(244, 244, 242, .9); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--bellamy-navy); color: #fff; }
.btn--primary:hover { background: var(--bellamy-navy-deep); color: #fff; }

.btn--outline { border-color: var(--bellamy-navy); color: var(--bellamy-navy); background: transparent; }
.btn--outline:hover { background: var(--bellamy-navy-tint); color: var(--bellamy-navy-deep); }

.btn--on-navy {
  background: rgba(244, 244, 242, .96);
  color: var(--bellamy-navy-deep);
}
.btn--on-navy:hover { background: #fff; color: var(--bellamy-navy-deep); }

.btn--full { width: 100%; }

/* glass pill over photography */
.pill-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 30px -18px rgba(31, 47, 107, .7);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.pill-glass:hover {
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .6);
}

/* hero pills drift gently, offset so the pair is not in lockstep */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pill-glass-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  .home-hero .pill-glass {
    animation: pill-glass-float 5.2s ease-in-out infinite;
    will-change: transform;
  }
  .home-hero .home-hero__pill-right,
  .home-hero .home-hero__pills .pill-glass:last-child {
    animation-delay: -2.1s;
  }
}

/* glass pill on white, sky tinted */
.pill-sky {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(44, 62, 134, .78);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 30px -20px rgba(31, 47, 107, .6);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.pill-sky:hover {
  color: #fff;
  background: rgba(31, 47, 107, .9);
  border-color: rgba(255, 255, 255, .62);
}

/* homepage proposition CTA drifts gently */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pill-float {
    0%, 100% {
      transform: translateY(0);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 30px -18px rgba(31, 47, 107, .5);
    }
    50% {
      transform: translateY(-5px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 34px -18px rgba(31, 47, 107, .42);
    }
  }
  .proposition__cta .pill-sky {
    animation: pill-float 4.5s ease-in-out infinite;
    will-change: transform;
  }
}

/* ---- no orphans ----
   A title or standfirst must never drop its last word onto a line of its own.
   `balance` evens the lines of a heading, `pretty` protects the last line of a
   paragraph. Both are hints the browser can decline, so the Library's generated
   titles and deks also get a hard space before the final word (see noOrphan in
   build.mjs). Long single words are allowed to break rather than overflow. */
.home-hero__title,
.app-hero__title,
.lb-head__title,
.page-head__title,
.art-title,
.art-sheet__title,
.app-split__title,
.mb-h2,
.lb-fcard__title,
.lb-card__title,
.lb-row__title,
.art-scard__title,
.rail-card__title,
.art-cta h2 {
  text-wrap: balance;
  overflow-wrap: break-word;
}
.page-head__standfirst,
.lb-card__dek,
.lb-row__dek,
.lb-fcard__dek,
.lb-intro p,
.rail-card__text,
.art-cta p,
.app-split__body {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* ============================================================
   Eyebrow, rules and shared editorial bits
   ============================================================ */

.eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.eyebrow--on-navy { color: rgba(244, 244, 242, .62); }

.eyebrow-rule { display: flex; align-items: center; gap: 16px; }
.eyebrow-rule::before,
.eyebrow-rule::after { content: ""; width: 52px; height: 1px; background: var(--bellamy-navy-line); }
.eyebrow-rule--on-navy::before,
.eyebrow-rule--on-navy::after { background: rgba(244, 244, 242, .32); }

/* ============================================================
   Page head — navy scrim over a hero photograph, with the
   header row and a centred eyebrow + title beneath it
   ============================================================ */

.page-head {
  position: relative;
  background-size: cover, cover;
  background-position: center, center 62%;
  padding: 0 0 92px;
}
/* Over a photograph the title sits low, the way the Home, About and Library
   heroes do, rather than floating in the middle of the image. */
.page-head--photo {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  padding-bottom: 56px;
}
.page-head--photo .page-head__title-block { margin-top: auto; }

.page-head__title-block {
  margin: 44px auto 0;
  padding: 0 var(--over-hero-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
/* Serif italic, matching the hero titles on Home, About, Membership, the App,
   Free Tools and the Library. The design set these four interior pages in light
   Inter instead, which read as a different family of page. */
.page-head__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
}
.page-head__standfirst {
  margin-top: 6px;
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: rgba(244, 244, 242, .8);
}

/* ============================================================
   Newsletter band
   ============================================================ */

.newsletter {
  background: var(--bellamy-sky);
  padding: 30px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.newsletter__label {
  font-family: var(--font-sans);
  font-size: 17px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-navy);
}
.newsletter__fields { display: flex; align-items: center; gap: 20px; min-width: 520px; }

.input-underline {
  border: 0;
  border-bottom: 1.5px solid rgba(44, 62, 134, .4);
  padding-bottom: 8px;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 16.5px;
  color: var(--bellamy-navy-deep);
}
.input-underline::placeholder { color: var(--bellamy-navy-deep); opacity: .72; }
.input-underline:focus { border-bottom-color: var(--bellamy-navy); }

.newsletter__first { flex: 0 0 150px; }
.newsletter__email { flex: 1; }

.newsletter__submit {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(44, 62, 134, .28);
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bellamy-navy-deep);
  font-size: 17px;
  line-height: 1;
  transition: background var(--dur-base) var(--ease-standard);
}
.newsletter__submit:hover { background: rgba(255, 255, 255, .72); }

.newsletter__note {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bellamy-navy);
  opacity: .7;
}
.newsletter__status {
  flex-basis: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--bellamy-navy-deep);
}
.newsletter__status:empty { display: none; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--bellamy-navy-deep);
  padding: 62px var(--page-gutter) 42px;
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: center;
}
.site-footer__logo img { height: 180px; width: auto; display: block; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 34px;
  max-width: 900px;
}
.site-footer__links a {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .78);
  transition: color var(--dur-base) var(--ease-standard);
}
.site-footer__links a:hover { color: #F4F4F2; }

.site-footer__baseline {
  width: 100%;
  border-top: 1px solid rgba(244, 244, 242, .16);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 244, 242, .45);
}
.site-footer__baseline span:last-child { letter-spacing: 0.22em; text-transform: uppercase; }

/* ============================================================
   Home — hero
   ============================================================ */

.home-hero { position: relative; height: 800px; overflow: hidden; }
.home-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 52%;
  display: block;
}
.home-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 47, 107, .46) 0%,
    rgba(31, 47, 107, .1) 34%,
    rgba(31, 47, 107, .26) 62%,
    rgba(31, 47, 107, .76) 100%);
}
.home-hero__title-wrap {
  position: absolute;
  left: var(--over-hero-gutter);
  right: var(--over-hero-gutter);
  bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.home-hero__title {
  max-width: 900px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 58px;
  line-height: 1.06;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
}
.home-hero__pill-left { position: absolute; left: var(--over-hero-gutter); bottom: 34px; }
.home-hero__pill-right { position: absolute; right: var(--over-hero-gutter); bottom: 34px; }
.home-hero__pills { display: none; }

/* ---- Home proposition split ---- */

.proposition {
  background: #fff;
  padding: 62px var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.proposition__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 46px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.proposition__title span { font-size: 1.22em; }

.proposition__list {
  margin-top: 28px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proposition__list p {
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--bellamy-navy-deep);
}
.proposition__cta { margin-top: 28px; }
.proposition__closing {
  margin-top: 26px;
  max-width: 480px;
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--bellamy-navy-deep);
}
.proposition__figure { height: 520px; border-radius: 14px; overflow: hidden; }
.proposition__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

/* ---- Home card rail ---- */

.rail-section { background: var(--surface-page); padding: 30px 0 84px; }
.rail-section__cue {
  padding: 0 var(--page-gutter);
  display: flex;
  justify-content: flex-end;
}
.rail-section__cue span {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
  white-space: nowrap;
}

.rail {
  margin-top: 22px;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 12px var(--page-gutter) 34px;
}
.rail::-webkit-scrollbar { display: none; }

.rail-card {
  flex: 0 0 400px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 48px -32px rgba(44, 62, 134, .5);
  display: flex;
  flex-direction: column;
}
.rail-card__media {
  height: 250px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-card__media--pad { padding: 14px 10px; }
.rail-card__media--contain img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.rail-card__media--fill img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rail-card__media--cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rail-card__body {
  padding: 32px 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.rail-card__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.16;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.rail-card__text {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--bellamy-navy-deep);
}
.rail-card__link {
  margin-top: auto;
  padding-top: 26px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
}
.rail-card__link:hover { color: var(--bellamy-navy-deep); }

/* ============================================================
   Editorial entrance — first paint only, reduced motion honoured
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-reveal) var(--ease-out-soft),
                transform var(--dur-reveal) var(--ease-out-soft);
  }
  [data-reveal][data-revealed] { opacity: 1; transform: none; }
}

/* ============================================================
   Between the two designed breakpoints
   ============================================================ */

@media (max-width: 1120px) {
  :root { --page-gutter: 36px; --over-hero-gutter: 32px; }
  .home-hero__title { font-size: 46px; }
  .proposition { gap: 40px; padding: 52px var(--page-gutter); }
  .proposition__title { font-size: 38px; }
}

@media (max-width: 900px) {
  :root { --page-gutter: 24px; --over-hero-gutter: 24px; }

  .site-header { padding: 22px 18px 16px; }
  .site-header__burger { width: 22px; height: 16px; gap: 5px; }
  .site-header__burger span { width: 22px; }
  .site-header__logo img { height: 110px; filter: drop-shadow(0 2px 8px rgba(31, 47, 107, .45)); }
  .site-header__member { font-size: 9px; letter-spacing: 0.2em; line-height: 16px; }

  .menu-overlay { padding: 22px 24px 32px; background: rgba(31, 47, 107, .94); }
  .menu-overlay__top button,
  .menu-overlay__top a { font-size: 9px; letter-spacing: 0.2em; }
  .menu-overlay__nav {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: none;
  }
  .menu-overlay__nav a { font-size: 16px; line-height: 1.35; }
  .menu-overlay__tagline { padding-top: 32px; font-size: 9px; }

  .member-overlay { padding: 22px 24px 36px; }
  .member-overlay__back { font-size: 10px; letter-spacing: 0.2em; }
  .member-overlay__body { gap: 26px; margin-top: 14px; }
  .member-overlay__body > a img { height: 168px; }
  .member-overlay__eyebrow { font-size: 9px; letter-spacing: 0.2em; }
  .member-overlay__intro p { font-size: 14.5px; line-height: 1.68; }
  .member-overlay__form { gap: 24px; }
  .input-underline-navy { font-size: 15px; }

  .page-head { padding-bottom: 56px; }
  .page-head--photo { min-height: 420px; padding-bottom: 34px; }
  .page-head__title-block { margin-top: 30px; padding: 0 24px; gap: 14px; }
  .page-head__title { font-size: 30px; line-height: 1.12; }
  .page-head__standfirst { font-size: 15.5px; line-height: 1.68; margin-top: 2px; }
  .eyebrow-rule::before, .eyebrow-rule::after { width: 26px; }

  .home-hero { height: 700px; }
  .home-hero__scrim {
    background: linear-gradient(180deg,
      rgba(31, 47, 107, .46) 0%,
      rgba(31, 47, 107, .1) 30%,
      rgba(31, 47, 107, .26) 58%,
      rgba(31, 47, 107, .78) 100%);
  }
  .home-hero__title-wrap { left: 24px; right: 24px; bottom: 26px; gap: 0; }
  .home-hero__title { font-size: 33px; line-height: 1.08; }
  .home-hero__pill-left,
  .home-hero__pill-right { display: none; }
  .home-hero__pills { display: flex; gap: 10px; margin-top: 26px; width: 100%; }
  .home-hero__pills .pill-glass {
    flex: 1;
    padding: 0 14px;
    font-size: 9.5px;
    letter-spacing: 0.2em;
  }

  .proposition {
    display: block;
    padding: 50px 24px 54px;
  }
  /* 31px at the designed 390px width, scaling down on narrower phones so
     "Do you know yourself" stays on one line as designed. */
  .proposition__title {
    font-size: min(31px, 7.95vw);
    line-height: 1.24;
    letter-spacing: -0.01em;
  }
  .proposition__list { margin-top: 22px; }
  .proposition__list p { font-size: 14.5px; }
  .proposition__cta { margin-top: 24px; }
  .proposition__cta .pill-sky { width: 100%; font-size: 10px; letter-spacing: 0.16em; }
  .proposition__closing { margin-top: 22px; font-size: 17.5px; }
  .proposition__figure { height: 230px; margin-top: 34px; }

  .newsletter {
    padding: 26px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .newsletter__label { font-size: 14px; }
  .newsletter__fields {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .newsletter__first, .newsletter__email { flex: 1 1 auto; width: 100%; font-size: 16px; }
  .newsletter__submit { align-self: flex-start; width: 46px; height: 46px; font-size: 18px; }
  .newsletter__note { font-size: 10px; }
  .newsletter__status { text-align: left; }

  .rail-section { padding: 20px 0 46px; }
  .rail-section__cue { padding: 0 24px; }
  .rail-section__cue span { font-size: 9px; }
  .rail { margin-top: 14px; gap: 16px; padding: 10px 24px 24px; }
  .rail-card {
    flex: 0 0 282px;
    box-shadow: 0 14px 40px -32px rgba(44, 62, 134, .5);
  }
  .rail-card__media { height: 170px; }
  .rail-card__media--pad { padding: 10px 8px; }
  .rail-card__body { padding: 24px 22px 26px; }
  .rail-card__title { font-size: 23px; line-height: 1.18; }
  .rail-card__text { margin-top: 12px; font-size: 15px; line-height: 1.68; }
  .rail-card__link { padding-top: 22px; font-size: 10px; }

  .site-footer { padding: 40px 24px 30px; gap: 22px; text-align: center; }
  .site-footer__logo img { height: 150px; }
  .site-footer__links { gap: 12px 20px; }
  .site-footer__links a { font-size: 10px; letter-spacing: 0.18em; }
  .site-footer__baseline {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    font-size: 10px;
  }
}

/* ============================================================
   Shared editorial section: 300px label column + content
   Used by FAQ, Press and Contact
   ============================================================ */

.editorial-body {
  background: var(--surface-page);
  padding: 84px var(--page-gutter) 92px;
  display: flex;
  flex-direction: column;
  gap: 68px;
}
.editorial-body--wide { gap: 72px; }

.editorial-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}
.editorial-row__title {
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.16;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.editorial-row__content { max-width: 720px; display: flex; flex-direction: column; gap: 22px; }

.prose-lead {
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--bellamy-navy-deep);
}
.prose {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}
.prose-small {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(31, 47, 107, .62);
}
.link-caps {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
  align-self: flex-start;
}
.link-caps:hover { color: var(--bellamy-navy-deep); }

.field-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.field-label .req { color: var(--bellamy-navy); }
.field-label .opt { text-transform: none; letter-spacing: 0.02em; opacity: .7; }

/* ============================================================
   FAQ
   ============================================================ */

.faq-group { border-bottom: 1px solid var(--bellamy-soft-gray); }

.faq-item { border-top: 1px solid var(--bellamy-soft-gray); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bellamy-navy-deep);
}
.faq-item__q svg { flex: none; transition: transform var(--dur-base) var(--ease-standard); }
.faq-item__q[aria-expanded="true"] svg { transform: rotate(180deg); }

.faq-item__a {
  padding: 0 80px 24px 0;
  max-width: 720px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}
.faq-item__a[hidden] { display: none; }

/* ============================================================
   Press
   ============================================================ */

.asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.asset-card {
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 48px -32px rgba(44, 62, 134, .5);
}
.asset-card__preview {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 20px;
}
.asset-card__preview--navy { background: var(--bellamy-navy-deep); }
.asset-card__preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.asset-card__foot {
  border-top: 1px solid var(--bellamy-soft-gray);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.asset-card__name {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bellamy-navy-deep);
}
.tag-file {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
}

.rule-list { border-top: 1px solid var(--bellamy-soft-gray); }
.rule-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--bellamy-soft-gray);
}
.rule-list__row span:first-child {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--bellamy-navy-deep);
}

.fact-list { max-width: 720px; border-top: 1px solid var(--bellamy-soft-gray); }
.fact-list__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--bellamy-soft-gray);
}
.fact-list__row > *:last-child {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bellamy-navy-deep);
}
.fact-list__row a:last-child { color: var(--bellamy-navy); }

.navy-panel {
  max-width: 720px;
  background: var(--bellamy-navy-deep);
  border-radius: 22px;
  padding: 40px 40px 42px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.navy-panel p {
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(244, 244, 242, .86);
}
.navy-panel__contact { display: flex; flex-direction: column; gap: 6px; }
.navy-panel__contact span {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .6);
}
.navy-panel__contact a { font-family: var(--font-sans); font-size: 18px; color: #fff; }
.navy-panel__contact a:hover { color: #fff; opacity: .85; }
.btn-on-navy-outline {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  transition: background var(--dur-base) var(--ease-standard);
}
.btn-on-navy-outline:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.page-head__badge {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .5);
}

/* ============================================================
   Contact
   ============================================================ */

.contact-body { background: var(--surface-page); padding: 84px var(--page-gutter) 92px; }
.contact-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }

.contact-aside { display: flex; flex-direction: column; gap: 38px; }
.contact-aside__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.14;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.contact-aside__item { display: flex; flex-direction: column; gap: 6px; }
.contact-aside__item a,
.contact-aside__item span:last-child {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--bellamy-navy);
  word-break: break-word;
}

.contact-card {
  max-width: 720px;
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 22px;
  box-shadow: 0 18px 48px -32px rgba(44, 62, 134, .5);
  padding: 44px 44px 46px;
}
.contact-form { display: flex; flex-direction: column; gap: 34px; }
.contact-form[hidden], .contact-sent[hidden] { display: none; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(44, 62, 134, .22);
  background: transparent;
  color: rgba(31, 47, 107, .6);
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.chip:hover { border-color: rgba(44, 62, 134, .4); color: var(--bellamy-navy); }
.chip[aria-pressed="true"],
.chip.is-active {
  background: rgba(207, 231, 255, .5);
  border-color: rgba(44, 62, 134, .55);
  color: #1F2F6B;
}

.field-stack { display: flex; flex-direction: column; gap: 14px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid rgba(44, 62, 134, .35);
  padding: 0 0 10px;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--bellamy-navy-deep);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--bellamy-navy-deep); opacity: .45; }
.field input:focus,
.field textarea:focus { border-color: var(--bellamy-navy); }
.field textarea {
  resize: vertical;
  border: 1.5px solid rgba(44, 62, 134, .35);
  border-radius: 14px;
  padding: 16px 18px;
  line-height: 1.7;
}

.checkbox-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.checkbox-row input { width: 17px; height: 17px; accent-color: #2C3E86; margin: 0; }
.checkbox-row span {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bellamy-navy-deep);
}

.contact-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--bellamy-soft-gray);
  padding-top: 26px;
}
.contact-form__foot p { max-width: 340px; }

.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 30px;
  border-radius: 999px;
  background: rgba(44, 62, 134, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 8px 24px -14px rgba(31, 47, 107, .5);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard);
}
.btn-send:hover { background: var(--bellamy-navy-deep); color: #fff; }

.contact-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  padding: 30px 0 26px;
}
.contact-sent img { width: 92px; height: auto; display: block; }
.contact-sent h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
}
.contact-sent p { max-width: 420px; }

/* ============================================================
   About
   ============================================================ */

.about-hero { position: relative; height: 760px; overflow: hidden; }
.about-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}
.about-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 47, 107, .5) 0%,
    rgba(31, 47, 107, .08) 32%,
    rgba(31, 47, 107, .3) 62%,
    rgba(31, 47, 107, .8) 100%);
}
.about-hero__title-wrap {
  position: absolute;
  left: var(--over-hero-gutter);
  right: var(--over-hero-gutter);
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.about-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .8);
}
.about-hero__title {
  max-width: 900px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  text-wrap: pretty;
}

/* shared About prose helpers, matching the design's ab-* classes */
.ab-p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.72;
  color: rgba(31, 47, 107, .78);
}
.ab-eye {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.ab-h2 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.14;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.ab-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: #fff;
}
.ab-chip {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bellamy-navy);
  padding: 9px 16px;
  border: 1px solid var(--bellamy-blue-light);
  border-radius: 999px;
}
/* On an article the chips are links into the library, so they need to look
   pressable. On About they are still plain labels. */
.ab-chip--link {
  display: inline-block;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.ab-chip--link:hover {
  background: var(--bellamy-sky);
  border-color: var(--bellamy-navy-line);
  color: var(--bellamy-navy-deep);
}
.ab-nchip {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
}

.about-statement {
  background: #fff;
  padding: 88px var(--page-gutter);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: start;
}
.about-statement__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.about-statement__body { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.about-statement__lead {
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--bellamy-navy-deep);
}

.about-pillars {
  background: var(--surface-page);
  padding: 84px var(--page-gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  text-align: center;
}
.about-pillar { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.about-pillar img {
  width: 100%;
  max-width: 300px;
  height: 200px;
  object-fit: contain;
  display: block;
  transform-origin: center;
}
.about-pillar img.is-scaled-115 { transform: scale(1.15); }
.about-pillar img.is-scaled-128 { transform: scale(1.28); }
.about-pillar h3 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.18;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.about-pillar .ab-p { font-size: 16.5px; text-wrap: pretty; }

.about-mission {
  padding: 96px var(--page-gutter);
  background: var(--bellamy-navy-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.about-mission__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .62);
}
.about-mission h2 {
  max-width: 900px;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.16;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}
.about-mission__body {
  max-width: 720px;
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.75;
  color: rgba(244, 244, 242, .82);
}
.about-mission__beliefs { display: flex; flex-direction: column; gap: 8px; }

.about-name { background: #fff; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.about-name__text {
  padding: 88px var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.about-name__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1.14;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
}
.about-name__figure { min-height: 640px; overflow: hidden; }
.about-name__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}

.about-defined {
  background: var(--bellamy-sky);
  padding: 84px var(--page-gutter);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
}
.about-defined__label { display: flex; flex-direction: column; gap: 14px; }
.about-defined__label .ab-eye { color: var(--bellamy-navy); }
.about-defined__what {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--bellamy-navy);
}
.about-defined__label img {
  margin-top: 18px;
  width: 100%;
  max-width: 300px;
  height: 150px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.about-defined__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.about-defined__term {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 10px;
  border-top: 1.5px solid rgba(44, 62, 134, .35);
}
.about-defined__term h3 {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.about-defined__term .ab-p { color: rgba(31, 47, 107, .82); }

.about-beliefs {
  background: var(--surface-page);
  padding: 88px var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.about-beliefs__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.about-beliefs__head h2 { font-style: italic; text-transform: uppercase; }
.about-beliefs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 56px; }
.ab-belief {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--bellamy-soft-gray);
}
.ab-belief:nth-last-child(-n+3) { border-bottom: 1px solid var(--bellamy-soft-gray); }
.ab-num { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; color: var(--bellamy-blue); }
.ab-bt {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bellamy-navy-deep);
}

.about-vision { position: relative; height: 640px; overflow: hidden; }
.about-vision img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-vision__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 47, 107, .74) 0%,
    rgba(31, 47, 107, .6) 60%,
    rgba(31, 47, 107, .84) 100%);
}
.about-vision__inner {
  position: relative;
  height: 100%;
  padding: 0 var(--page-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}
.about-vision__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .72);
}
.about-vision h2 {
  max-width: 840px;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.16;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}
.about-vision__body {
  max-width: 700px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.72;
  color: rgba(244, 244, 242, .84);
}
.about-vision__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
}
.about-vision__coda {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}

.about-influences {
  background: #fff;
  padding: 84px var(--page-gutter);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
}
.about-influences__label { display: flex; flex-direction: column; gap: 14px; }
.about-influences__body { display: flex; flex-direction: column; gap: 26px; max-width: 660px; }
.about-influences__lead {
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--bellamy-navy-deep);
}
.about-influences__chips { display: flex; flex-wrap: wrap; gap: 10px; }

.about-closing {
  background: var(--bellamy-sky);
  padding: 76px var(--page-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.about-closing h2 {
  max-width: 760px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  line-height: 1.22;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.about-closing__actions { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-tall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.btn-tall--solid { background: var(--bellamy-navy-deep); color: #fff; }
.btn-tall--solid:hover { background: var(--bellamy-navy); color: #fff; }
.btn-tall--ghost {
  border: 1px solid rgba(44, 62, 134, .4);
  background: rgba(255, 255, 255, .5);
  color: var(--bellamy-navy-deep);
}
.btn-tall--ghost:hover { background: rgba(255, 255, 255, .8); color: var(--bellamy-navy-deep); }

/* navy page head, used by FAQ and Press */
.page-head--navy { background: var(--bellamy-navy-deep); padding-bottom: 62px; }

/* ============================================================
   Mobile for the interior pages
   ============================================================ */

@media (max-width: 1120px) {
  .editorial-row,
  .contact-grid { grid-template-columns: 220px 1fr; gap: 40px; }
  .about-statement { gap: 48px; padding: 64px var(--page-gutter); }
  .about-statement__title { font-size: 36px; }
  .about-pillars { gap: 40px; }
  .about-defined,
  .about-influences { grid-template-columns: 260px 1fr; gap: 40px; }
  .about-name__text { padding: 64px var(--page-gutter); }
  .about-name__title,
  .about-name__figure { }
  .about-beliefs__grid { grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
  .ab-belief:nth-last-child(-n+3) { border-bottom: 0; }
  .ab-belief:nth-last-child(-n+2) { border-bottom: 1px solid var(--bellamy-soft-gray); }
}

@media (max-width: 900px) {
  .editorial-body { padding: 40px 24px 48px; gap: 40px; }
  .editorial-row { display: block; }
  .editorial-row__title { font-size: 24px; margin-bottom: 16px; }
  .editorial-row__content { max-width: none; gap: 18px; }
  .prose-lead { font-size: 15.5px; }
  .prose { font-size: 15.5px; }
  .prose-small { font-size: 14px; }
  .field-label { font-size: 9px; }

  .faq-item__q { font-size: 15px; gap: 20px; padding: 18px 0; }
  .faq-item__a { padding: 0 0 20px; font-size: 15.5px; }

  .asset-grid { grid-template-columns: 1fr; gap: 16px; }
  .rule-list__row { flex-direction: row; align-items: flex-start; gap: 16px; }
  .rule-list__row span:first-child { font-size: 15.5px; }
  .fact-list__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .fact-list__row > *:last-child { font-size: 15.5px; }
  .navy-panel { padding: 26px 22px 30px; border-radius: 18px; gap: 16px; }
  .navy-panel p { font-size: 15.5px; }
  .navy-panel__contact a { font-size: 16px; word-break: break-word; }

  .contact-body { padding: 40px 24px 48px; }
  .contact-grid { display: block; }
  .contact-aside { gap: 22px; margin-bottom: 30px; }
  .contact-aside__title { font-size: 26px; }
  .contact-aside__item a,
  .contact-aside__item span:last-child { font-size: 15.5px; }
  .contact-card { padding: 26px 22px 30px; border-radius: 18px; }
  .contact-form { gap: 26px; }
  .chip { font-size: 10px; padding: 9px 14px; letter-spacing: 0.12em; }
  .field-pair { grid-template-columns: 1fr; gap: 22px; }
  .field input, .field textarea { font-size: 16px; }
  .checkbox-row span { font-size: 15px; }
  .contact-form__foot { flex-direction: column; align-items: stretch; gap: 18px; }
  .contact-form__foot p { max-width: none; }
  .btn-send { width: 100%; height: 48px; }
  .contact-sent h2 { font-size: 26px; }

  .about-hero { height: 560px; }
  .about-hero__title-wrap { left: 24px; right: 24px; bottom: 26px; gap: 12px; }
  .about-hero__eyebrow { font-size: 9px; letter-spacing: 0.22em; }
  .about-hero__title { font-size: 24px; line-height: 1.14; }

  .ab-p { font-size: 15.5px; line-height: 1.7; }
  .ab-eye { font-size: 9px; }
  .ab-h2 { font-size: 26px; line-height: 1.16; }
  .ab-line { font-size: 18px; }
  .ab-chip, .ab-nchip { font-size: 9px; padding: 8px 14px; }

  .about-statement { display: flex; flex-direction: column; gap: 18px; padding: 44px 24px; }
  .about-statement__title { font-size: 29px; line-height: 1.2; letter-spacing: 0; }
  .about-statement__body { max-width: none; gap: 18px; }
  .about-statement__lead { font-size: 16px; }

  .about-pillars {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 40px 24px;
  }
  .about-pillar { gap: 12px; }
  .about-pillar img { height: 150px; }
  .about-pillar h3 { font-size: 24px; line-height: 1.18; }
  .about-pillar .ab-p { font-size: 15.5px; }

  .about-mission { padding: 48px 24px; gap: 18px; }
  .about-mission__eyebrow { font-size: 9px; }
  .about-mission h2 { font-size: 26px; line-height: 1.18; }
  .about-mission__body { font-size: 15.5px; line-height: 1.72; }
  .about-mission__beliefs { gap: 6px; }

  .about-name { display: flex; flex-direction: column-reverse; }
  .about-name__text { padding: 40px 24px; gap: 16px; }
  .about-name__title { font-size: 30px; line-height: 1.14; }
  .about-name__figure { min-height: 0; height: 240px; }

  .about-defined { display: flex; flex-direction: column; gap: 18px; padding: 40px 24px; }
  .about-defined__label { gap: 10px; }
  .about-defined__what { font-size: 17.5px; }
  .about-defined__label img { margin-top: 10px; height: 110px; }
  .about-defined__pair { grid-template-columns: 1fr; gap: 18px; }
  .about-defined__term { gap: 10px; }
  .about-defined__term h3 { font-size: 11px; }

  .about-beliefs { padding: 40px 24px; gap: 14px; }
  .about-beliefs__head { align-items: flex-start; text-align: left; }
  .about-beliefs__grid { grid-template-columns: 1fr; gap: 0; }
  .ab-belief { padding: 14px 0; gap: 12px; }
  .ab-belief:nth-last-child(-n+2) { border-bottom: 0; }
  .ab-belief:last-child { border-bottom: 1px solid var(--bellamy-soft-gray); }
  .ab-num { font-size: 9px; }
  .ab-bt { font-size: 13px; letter-spacing: 0.1em; }

  .about-vision { height: auto; }
  .about-vision__inner { padding: 48px 24px; gap: 16px; }
  .about-vision__scrim {
    background: linear-gradient(180deg,
      rgba(31, 47, 107, .76) 0%,
      rgba(31, 47, 107, .62) 60%,
      rgba(31, 47, 107, .86) 100%);
  }
  .about-vision h2 { font-size: 26px; line-height: 1.18; }
  .about-vision h2 br { display: none; }
  .about-vision__body { font-size: 15.5px; line-height: 1.7; }
  .about-vision__chips { gap: 8px; }
  .about-vision__coda { margin-top: 0; flex-direction: column; gap: 3px; padding-top: 6px; }

  .about-influences { display: flex; flex-direction: column; gap: 16px; padding: 40px 24px; }
  .about-influences__label { gap: 8px; }
  .about-influences__body { max-width: none; gap: 16px; }
  .about-influences__lead { font-size: 16px; }
  .about-influences__chips { gap: 8px; }

  .about-closing { padding: 40px 24px; gap: 16px; }
  .about-closing h2 { font-size: 24px; line-height: 1.24; }
  .about-closing__actions { margin-top: 0; flex-direction: column; width: 100%; gap: 10px; }
  .btn-tall { width: 100%; height: 46px; font-size: 10.5px; }
}

/* ============================================================
   Policies — tabbed shell, one real route per document
   ============================================================ */

.policy-tabs {
  background: #fff;
  border-bottom: 1px solid var(--bellamy-soft-gray);
  padding: 0 var(--page-gutter);
  display: flex;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
}
.policy-tabs__tab {
  padding: 22px 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(31, 47, 107, .45);
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.policy-tabs__tab:hover { color: var(--bellamy-navy); }
.policy-tabs__tab.is-active {
  color: #1F2F6B;
  border-bottom-color: #2C3E86;
}

.policy-body { background: var(--surface-page); padding: 84px var(--page-gutter) 92px; }
.policy-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }

.policy-meta { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
.policy-meta__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.14;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}

/* The document body is lifted verbatim from the live legal pages, so this
   styles plain h2 / h3 / p / ul / li rather than site-specific classes. */
.policy-doc { max-width: 720px; }

.policy-doc h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
  margin: 40px 0 12px;
}
.policy-doc > h2:first-child { margin-top: 0; }

.policy-doc h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  margin: 26px 0 10px;
}

.policy-doc p,
.policy-doc li {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}
.policy-doc p { margin: 0 0 14px; }
.policy-doc ul,
.policy-doc ol { margin: 0 0 18px; padding-left: 22px; }
.policy-doc li { margin: 0 0 8px; }
.policy-doc strong { color: var(--bellamy-navy-deep); font-weight: 600; }
.policy-doc a { color: var(--bellamy-navy); text-decoration: underline; text-underline-offset: 2px; }
.policy-doc a:hover { color: var(--bellamy-navy-deep); }
.policy-doc hr { border: 0; border-top: 1px solid var(--bellamy-soft-gray); margin: 32px 0; }
.policy-doc table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.policy-doc th,
.policy-doc td {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--bellamy-soft-gray);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(31, 47, 107, .78);
  vertical-align: top;
}
.policy-doc th { color: var(--bellamy-navy-deep); font-weight: 600; }

.policy-doc__foot {
  border-top: 1px solid var(--bellamy-soft-gray);
  padding-top: 28px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.policy-doc__foot a {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--bellamy-navy);
  text-decoration: none;
  word-break: break-word;
}

@media (max-width: 1120px) {
  .policy-tabs { gap: 28px; }
  .policy-grid { grid-template-columns: 220px 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .policy-tabs {
    justify-content: flex-start;
    gap: 22px;
    padding: 0 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .policy-tabs::-webkit-scrollbar { display: none; }
  .policy-tabs__tab { padding: 16px 0; font-size: 10px; white-space: nowrap; }

  .policy-body { padding: 36px 24px 48px; }
  .policy-grid { display: block; }
  .policy-meta { position: static; gap: 8px; margin-bottom: 26px; }
  .policy-meta__title { font-size: 26px; }
  .policy-doc { max-width: none; }
  .policy-doc h2 { margin: 30px 0 10px; font-size: 10px; }
  .policy-doc h3 { font-size: 18px; margin: 22px 0 8px; }
  .policy-doc p,
  .policy-doc li { font-size: 15.5px; line-height: 1.7; }
  .policy-doc th,
  .policy-doc td { font-size: 15px; padding: 10px 10px 10px 0; }
  .policy-doc__foot a { font-size: 15.5px; }
}

/* ============================================================
   Free Tools
   ============================================================ */

.tools-hero { position: relative; height: 760px; overflow: hidden; }
.tools-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
.tools-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 47, 107, .42) 0%,
    rgba(31, 47, 107, .06) 34%,
    rgba(31, 47, 107, .22) 64%,
    rgba(31, 47, 107, .6) 100%);
}
.tools-hero__title-wrap {
  position: absolute;
  left: var(--over-hero-gutter);
  right: var(--over-hero-gutter);
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.tools-hero__title {
  max-width: 900px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 58px;
  line-height: 1.08;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  text-wrap: pretty;
}

/* the taller, brighter glass pill used on this hero */
.pill-glass--lg {
  margin-top: 6px;
  height: 48px;
  padding: 0 30px;
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 34px -20px rgba(31, 47, 107, .6);
  font-size: 13px;
  letter-spacing: 0.16em;
}

.tools-body {
  background: var(--surface-page);
  padding: 84px var(--page-gutter) 92px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.tools-intro {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.tools-intro h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.tools-intro p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}

/* Capped at the design's own content width (the 1280 board minus its 56px
   gutters). Without the cap the two columns grow with the viewport and each
   card turns into a full screen of its own on a wide monitor. The title is
   inside the cap so it stays flush with the first card. */
.tools-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: 1168px;
  margin: 0 auto;
}
.tools-list__title {
  max-width: 820px;
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
/* Capped at the design's own content width (1280 board minus its 56px gutters).
   Without the cap the two columns grow with the viewport and a square photo
   turns each card into a full screen of its own on a wide monitor. */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
}

.tool-card {
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px -36px rgba(44, 62, 134, .5);
}
.tool-card__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tool-card__body { padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tool-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-navy-deep);
}
.tool-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.tool-card__desc {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.72;
  font-weight: 300;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
/* Frosted, not solid navy: a navy block sat heavily on the white card. One
   translucent sky fill, no gradient nested inside the rounded border, so the
   edge stays clean. */
.tool-card__download {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(44, 62, 134, .3);
  background: rgba(207, 231, 255, .55);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 26px -18px rgba(31, 47, 107, .45);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  text-align: center;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.tool-card__download:hover {
  background: rgba(207, 231, 255, .85);
  border-color: rgba(44, 62, 134, .5);
  color: var(--bellamy-navy-deep);
}
/* The Life Audit has no file yet, so its pill is inert: flatter, no lift. */
.tool-card__download--soon {
  background: rgba(175, 195, 219, .38);
  border-color: rgba(44, 62, 134, .18);
  box-shadow: none;
  color: rgba(31, 47, 107, .72);
  cursor: default;
}
.tool-card__download--soon:hover {
  background: rgba(175, 195, 219, .38);
  border-color: rgba(44, 62, 134, .18);
}

.quiz-split {
  background: #fff;
  padding: 78px var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.quiz-split__title {
  max-width: 520px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 46px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.quiz-split__lines {
  margin-top: 28px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quiz-split__lines p,
.quiz-split__closing {
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--bellamy-navy-deep);
}
.quiz-split__cta { margin-top: 28px; }
.quiz-split__closing { margin-top: 26px; max-width: 480px; }
.quiz-split__figure { height: 520px; border-radius: 14px; overflow: hidden; }
.quiz-split__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

@media (max-width: 1120px) {
  .tools-intro h2 { font-size: 36px; }
  .quiz-split { gap: 40px; padding: 60px var(--page-gutter); }
  .quiz-split__title { font-size: 38px; }
}

@media (max-width: 900px) {
  .tools-hero { height: 560px; }
  .tools-hero__title-wrap { left: 24px; right: 24px; bottom: 30px; gap: 16px; }
  .tools-hero__title { font-size: 30px; line-height: 1.12; }
  .pill-glass--lg { margin-top: 2px; height: 46px; padding: 0 22px; font-size: 11px; letter-spacing: 0.14em; }

  .tools-body { padding: 40px 24px 48px; gap: 36px; }
  .tools-intro { gap: 18px; }
  .tools-intro h2 { font-size: 29px; line-height: 1.18; letter-spacing: 0; }
  .tools-intro p { font-size: 15.5px; line-height: 1.75; }

  .tools-list { gap: 22px; }
  .tools-list__title { font-size: 22px; line-height: 1.24; }
  .tools-grid { grid-template-columns: 1fr; gap: 20px; }
  .tool-card__body { padding: 22px 22px 24px; gap: 12px; }
  .tool-card__title { font-size: 21px; }
  .tool-card__desc { font-size: 15px; }
  .tool-card__download { height: 46px; font-size: 9.5px; }

  .quiz-split { display: block; padding: 50px 24px 54px; }
  .quiz-split__title { font-size: 29px; line-height: 1.18; max-width: none; }
  .quiz-split__lines { margin-top: 20px; max-width: none; gap: 12px; }
  .quiz-split__lines p,
  .quiz-split__closing { font-size: 16.5px; }
  .quiz-split__cta { margin-top: 22px; }
  .quiz-split__cta .pill-sky { width: 100%; font-size: 10px; letter-spacing: 0.16em; }
  .quiz-split__closing { margin-top: 20px; max-width: none; }
  .quiz-split__figure { height: 230px; margin-top: 30px; }
}

/* free tools email gate, shown in place of the download button */
.tool-gate { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.tool-gate[hidden] { display: none; }
.tool-gate .field input { font-size: 16px; }
.tool-gate__note {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
  color: var(--bellamy-muted-blue);
}

/* ============================================================
   The Bellamy App
   ============================================================ */

.app-hero { position: relative; height: 640px; overflow: hidden; }
.app-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.app-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 47, 107, .5) 0%,
    rgba(31, 47, 107, .12) 36%,
    rgba(31, 47, 107, .3) 64%,
    rgba(31, 47, 107, .8) 100%);
}
.app-hero__title-wrap {
  position: absolute;
  left: 300px; right: 300px; bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.app-hero__title {
  max-width: 900px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  text-wrap: pretty;
}
.app-hero__pill-left { position: absolute; left: var(--over-hero-gutter); bottom: 44px; }
.app-hero__pill-right { position: absolute; right: var(--over-hero-gutter); bottom: 44px; }
.app-hero__pills { display: none; }

/* ---- the ten screenshot slides ---- */

.app-shots { background: var(--surface-page); padding: 24px 0 28px; }
.app-shots__rail {
  display: flex;
  gap: 28px;
  padding: 8px var(--page-gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app-shots__rail::-webkit-scrollbar { display: none; }
.app-shot {
  flex: none;
  width: 320px;
  scroll-snap-align: center;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--bellamy-soft-gray);
  background: #fff;
  box-shadow: 0 22px 56px -34px rgba(44, 62, 134, .55);
}
.app-shot img { width: 100%; height: auto; display: block; }

/* ---- proposition split ---- */

.app-split {
  background: #fff;
  padding: 48px var(--page-gutter) 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.app-split__title {
  max-width: 520px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.app-split__body {
  margin-top: 26px;
  max-width: 500px;
  font-family: var(--font-sans);
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .82);
}
.app-split__lines {
  margin-top: 30px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-split__lines p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.45;
  color: var(--bellamy-navy-deep);
}
.app-split__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.app-split__figure { height: 540px; border-radius: 14px; overflow: hidden; }
.app-split__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- pills used across this page ---- */

.ap-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background: rgba(44, 62, 134, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 8px 24px -14px rgba(31, 47, 107, .5);
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  transition: background var(--dur-base) var(--ease-standard);
}
.ap-pill:hover { background: var(--bellamy-navy-deep); color: #fff; }
.ap-pill--solid { background: var(--bellamy-navy-deep); }

.ap-pill-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(44, 62, 134, .45);
  box-shadow: 0 8px 24px -16px rgba(31, 47, 107, .4);
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
  transition: background var(--dur-base) var(--ease-standard);
}
.ap-pill-out:hover { background: rgba(255, 255, 255, .8); color: var(--bellamy-navy-deep); }

.ap-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}

/* ---- the sixteen panel explainer carousel ---- */

.app-tour { background: #FAF9F7; padding: 72px var(--page-gutter) 64px; }
.app-tour__window { width: 100%; height: 620px; overflow: hidden; }
.app-tour__track {
  display: flex;
  height: 100%;
  transition: transform 640ms var(--ease-standard);
}
.app-tour__panel {
  flex: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 22px;
  padding: 40px 80px;
}
.app-tour__panel--split {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 56px;
  text-align: left;
}
.app-tour__panel img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.app-tour__motif { width: auto; height: 120px; }
.app-tour__panel h3 {
  max-width: 900px;
  font-family: var(--font-hand);
  font-size: 46px;
  line-height: 1.14;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
/* the two bookend panels set it larger and on one line each */
.app-tour__panel--split h3 { font-size: 44px; line-height: 1.5; }
.app-tour__panel p {
  max-width: 680px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}
.app-tour__panel--split > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  max-width: 560px;
}
.app-tour__panel--split > img { flex: none; max-width: 46%; max-height: 100%; }

.app-tour__controls {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.app-tour__controls button {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
  padding: 10px 4px;
  transition: color var(--dur-base) var(--ease-standard);
}
.app-tour__controls button:hover { color: var(--bellamy-navy-deep); }
.app-tour__label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bellamy-muted-blue);
  min-width: 68px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- central orb ---- */

.app-orb-section {
  background: var(--bellamy-navy-deep);
  padding: 88px var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.app-orb-section__figure { display: flex; justify-content: center; }
.app-orb-section__figure img {
  width: 340px;
  height: 340px;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .ap-orb { animation: ap-float 7s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
  @keyframes ap-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
  }
}
.app-orb-section__body { display: flex; flex-direction: column; gap: 18px; }
.app-orb-section h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  line-height: 1.18;
  font-weight: 400;
  color: #fff;
  text-wrap: pretty;
}
.app-orb-section p {
  max-width: 560px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(244, 244, 242, .84);
}
.app-orb-section .ap-eyebrow { color: rgba(244, 244, 242, .62); }

/* ---- alongside the Self-Portrait ---- */

.app-alongside {
  background: #fff;
  padding: 88px var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.app-alongside__body { display: flex; flex-direction: column; gap: 18px; }
.app-alongside h2 {
  max-width: 560px;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.12;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.app-alongside p {
  max-width: 560px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}
.app-alongside__actions { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.app-alongside > img { width: 100%; height: auto; border-radius: 14px; display: block; }

/* ---- the three closing cards ---- */

.app-cards {
  background: var(--surface-page);
  padding: 96px var(--page-gutter) 104px;
  display: flex;
  justify-content: center;
}
.app-cards__grid {
  width: 100%;
  max-width: 1260px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.app-card {
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 48px -32px rgba(44, 62, 134, .5);
  display: flex;
  flex-direction: column;
}
.app-card__media { height: 250px; overflow: hidden; }
.app-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-card__body { padding: 32px 32px 34px; display: flex; flex-direction: column; flex: 1; gap: 14px; }
.app-card__body .ap-eyebrow { color: var(--bellamy-navy); }
.app-card__title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.app-card__text {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(31, 47, 107, .78);
}
.app-card__actions { margin-top: auto; padding-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- android waitlist dialog ---- */

.android-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(31, 47, 107, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.android-dialog[hidden] { display: none; }
.android-dialog__panel {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 22px;
  padding: 34px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 40px 90px -40px rgba(31, 47, 107, .6);
}
.android-dialog__panel h2 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
/* Dialogs are interface, not editorial prose, so their copy is set in the
   UI face rather than the body serif. */
.android-dialog__panel p {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(31, 47, 107, .78);
}
.android-dialog__form { display: flex; flex-direction: column; gap: 18px; }
.android-dialog__form input { font-size: 16px; }
/* Inline status while the Insider subscription is in flight, or if it fails. */
.android-dialog__status {
  margin: -6px 0 0;
  min-height: 1em;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31, 47, 107, .72);
}
.android-dialog__status:empty { display: none; }

@media (max-width: 1120px) {
  .app-hero__title-wrap { left: 120px; right: 120px; }
  .app-split, .app-orb-section, .app-alongside { gap: 40px; }
  .app-split__title, .app-orb-section h2, .app-alongside h2 { font-size: 34px; }
  .app-tour__panel { padding: 32px 40px; }
  .app-tour__panel h3 { font-size: 38px; }
  .app-cards__grid { grid-template-columns: 1fr; max-width: 620px; }
}

@media (max-width: 900px) {
  .app-hero { height: 560px; }
  .app-hero__title-wrap { left: 24px; right: 24px; bottom: 26px; gap: 18px; }
  .app-hero__title { font-size: 30px; }
  .app-hero__pill-left, .app-hero__pill-right { display: none; }
  .app-hero__pills { display: flex; gap: 10px; width: 100%; }
  .app-hero__pills .pill-glass { flex: 1; padding: 0 12px; font-size: 9.5px; letter-spacing: 0.16em; }

  .app-shots__rail { gap: 16px; padding: 8px 24px 16px; }
  .app-shot { width: 232px; border-radius: 14px; }

  .app-split { display: block; padding: 40px 24px 44px; }
  .app-split__title { font-size: 27px; line-height: 1.2; max-width: none; }
  .app-split__body { margin-top: 18px; font-size: 15.5px; max-width: none; }
  .app-split__lines { margin-top: 22px; gap: 8px; max-width: none; }
  .app-split__lines p { font-size: 15.5px; }
  .app-split__actions { margin-top: 24px; }
  .app-split__actions .ap-pill { width: 100%; }
  .app-split__figure { height: 260px; margin-top: 30px; }

  .app-tour { padding: 40px 24px 44px; }
  .app-tour__window { height: 560px; }
  .app-tour__panel,
  .app-tour__panel--split {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px 4px;
  }
  .app-tour__panel--split > div { align-items: center; text-align: center; max-width: none; gap: 14px; }
  .app-tour__panel--split > img { max-width: 100%; max-height: 240px; }
  .app-tour__motif { height: 84px; }
  .app-tour__panel h3 { font-size: 30px; line-height: 1.14; }
  .app-tour__panel--split h3 { font-size: 28px; line-height: 1.5; }
  .app-tour__panel p { font-size: 15px; line-height: 1.68; }
  .app-tour__controls { margin-top: 18px; gap: 18px; }

  .app-orb-section, .app-alongside { display: block; padding: 44px 24px 48px; }
  .app-orb-section__figure { margin-bottom: 24px; }
  .app-orb-section__figure img { width: 210px; height: 210px; margin: 0 auto; }
  .app-orb-section h2 { font-size: 26px; }
  .app-alongside h2 { font-size: 28px; line-height: 1.14; max-width: none; }
  .app-orb-section p, .app-alongside p { font-size: 15.5px; max-width: none; }
  .app-alongside > img { margin-top: 26px; }
  .app-alongside__actions .ap-pill,
  .app-alongside__actions .ap-pill-out { flex: 1; }

  .app-cards { padding: 40px 24px 48px; }
  .app-cards__grid { grid-template-columns: 1fr; gap: 20px; }
  .app-card__media { height: 190px; }
  .app-card__body { padding: 24px 22px 26px; }
  .app-card__title { font-size: 22px; }
  .app-card__text { font-size: 15px; }
  .app-card__actions .ap-pill,
  .app-card__actions .ap-pill-out { flex: 1; }

  .android-dialog__panel { padding: 26px 22px 24px; border-radius: 18px; }
  .android-dialog__panel h2 { font-size: 24px; }
}

.android-dialog__sent { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   Membership
   ============================================================ */

.mb-hero { position: relative; height: 720px; overflow: hidden; }
.mb-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.mb-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 47, 107, .5) 0%,
    rgba(31, 47, 107, .08) 32%,
    rgba(31, 47, 107, .3) 62%,
    rgba(31, 47, 107, .8) 100%);
}
.mb-hero__title-wrap {
  position: absolute;
  left: var(--over-hero-gutter);
  right: var(--over-hero-gutter);
  bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.mb-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
}

.mb-body-wrap {
  background: var(--surface-page);
  padding: 84px var(--page-gutter) 92px;
  display: flex;
  flex-direction: column;
  gap: 76px;
}

.mb-routes { display: flex; flex-direction: column; gap: 34px; }
.mb-routes__title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
}
.mb-routes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.mb-route {
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 22px;
  padding: 44px 40px 38px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mb-route__motif { width: 120px; height: 120px; object-fit: contain; display: block; }
.mb-route__motif--tall { width: 150px; height: 150px; margin: -15px 0; }
.mb-route__head { display: flex; flex-direction: column; gap: 10px; }
.mb-route__name {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.16;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}

/* The design set these as rotated-square bullets. Bellamy does not use diamond
   bullets, so the inclusions are plain hairline-separated lines instead. */
.mb-includes {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bellamy-soft-gray);
}
.mb-includes span {
  padding: 10px 0;
  border-bottom: 1px solid var(--bellamy-soft-gray);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(31, 47, 107, .78);
}

.mb-route__foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mb-price { display: flex; flex-direction: column; gap: 6px; }
.mb-price__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mb-price__figure {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--bellamy-navy-deep);
}
.mb-price__note { font-family: var(--font-sans); font-size: 15.5px; color: rgba(31, 47, 107, .78); }

.mb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--dur-base) var(--ease-standard);
}
.mb-cta--solid {
  background: rgba(44, 62, 134, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
}
.mb-cta--solid:hover { background: var(--bellamy-navy-deep); color: #fff; }
.mb-cta--out {
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(44, 62, 134, .45);
  color: var(--bellamy-navy);
}
.mb-cta--out:hover { background: rgba(255, 255, 255, .85); color: var(--bellamy-navy-deep); }

.mb-sec { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.mb-h2 {
  font-family: var(--font-display);
  font-size: 29px;
  line-height: 1.16;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.mb-includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; max-width: 900px; }
.mb-include { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mb-include img { width: 96px; height: 96px; object-fit: contain; display: block; }
.mb-h3 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.mb-body {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}

.mb-know { max-width: 720px; border-top: 1px solid var(--bellamy-soft-gray); }
.mb-know__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--bellamy-soft-gray);
}
.mb-know__row > *:last-child {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bellamy-navy-deep);
}
.mb-know__row a:last-child { color: var(--bellamy-navy); }

.mb-closing {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 70px var(--page-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.mb-closing > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.mb-closing__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31, 47, 107, .72), rgba(31, 47, 107, .86));
}
.mb-closing__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.mb-closing h2 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.12;
  font-weight: 500;
  color: #fff;
}
.mb-closing p {
  max-width: 620px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(244, 244, 242, .84);
}
.mb-closing__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.mb-closing__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--dur-base) var(--ease-standard);
}
.mb-closing__actions a:first-child { background: #fff; color: var(--bellamy-navy-deep); }
.mb-closing__actions a:first-child:hover { background: rgba(255, 255, 255, .86); color: var(--bellamy-navy-deep); }
.mb-closing__actions a:last-child {
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.mb-closing__actions a:last-child:hover { background: rgba(255, 255, 255, .22); color: #fff; }

@media (max-width: 1120px) {
  .mb-routes__grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .mb-sec { grid-template-columns: 220px 1fr; gap: 40px; }
  .mb-includes-grid { gap: 32px 36px; }
}

@media (max-width: 900px) {
  .mb-hero { height: 560px; }
  .mb-hero__title-wrap { left: 24px; right: 24px; bottom: 30px; gap: 12px; }
  .mb-hero__title { font-size: 30px; }

  .mb-body-wrap { padding: 40px 24px 48px; gap: 44px; }
  .mb-routes { gap: 22px; }
  .mb-routes__title { font-size: 10px; letter-spacing: 0.2em; }
  .mb-routes__grid { gap: 20px; max-width: none; }
  .mb-route { padding: 26px 22px 28px; border-radius: 18px; gap: 14px; }
  .mb-route__motif { width: 92px; height: 92px; }
  .mb-route__motif--tall { width: 112px; height: 112px; margin: -10px 0; }
  .mb-route__name { font-size: 23px; line-height: 1.18; }
  .mb-body { font-size: 15.5px; line-height: 1.68; }
  .mb-includes span { font-size: 15.5px; padding: 9px 0; }
  .mb-route__foot { padding-top: 18px; }
  .mb-price__figure { font-size: 26px; }
  .mb-price__note { font-size: 15.5px; }
  .mb-cta { height: 46px; font-size: 10px; }

  .mb-sec { display: block; }
  .mb-h2 { font-size: 23px; line-height: 1.18; margin-bottom: 18px; }
  .mb-includes-grid { grid-template-columns: 1fr; gap: 26px; }
  .mb-include img { width: 80px; height: 80px; }
  .mb-h3 { font-size: 20px; }

  .mb-know { max-width: none; }
  .mb-know__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .mb-know__row > *:last-child { font-size: 15.5px; }

  .mb-closing { padding: 40px 24px 44px; border-radius: 18px; gap: 18px; }
  .mb-closing h2 { font-size: 26px; }
  .mb-closing p { font-size: 15.5px; }
  .mb-closing__actions { flex-direction: column; width: 100%; }
  .mb-closing__actions a { width: 100%; height: 48px; font-size: 10.5px; }
}

/* Enrollment has no product behind it yet, so its button is inert. Same
   treatment as the Life Audit card on Free Tools. */
.mb-cta--soon {
  background: #AFC3DB;
  border: 1.5px solid #AFC3DB;
  color: var(--bellamy-navy-deep);
  cursor: default;
  user-select: none;
}

/* ============================================================
   The Bellamy Library
   ============================================================ */

.lb-head {
  position: relative;
  background:
    linear-gradient(180deg, rgba(31, 47, 107, .72) 0%, rgba(31, 47, 107, .34) 34%, rgba(31, 47, 107, .78) 100%),
    url('/assets/photos/library-hero.webp') center 88% / cover no-repeat;
  padding: 30px var(--over-hero-gutter) 72px;
  /* The photo is 2200x1200. Matching that ratio keeps the whole room in frame,
     chairs included, instead of cropping the bottom off at a fixed height.
     The explicit width matters: without it the ratio transfers min-height back
     into a minimum WIDTH (700 x 2200/1200 = 1283px), which blew the whole page
     sideways on anything narrower than that. */
  width: 100%;
  aspect-ratio: 2200 / 1200;
  min-height: 700px;
  max-height: 900px;
  display: flex;
  flex-direction: column;
}
.lb-head__title-wrap {
  margin: auto auto 0;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.lb-head__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 72px;
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
  text-align: center;
}

.lb-bar {
  background: #EDF4FB;
  border-bottom: 1px solid var(--bellamy-soft-gray);
  padding: 22px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.lb-search {
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  box-shadow: 0 10px 30px -26px rgba(44, 62, 134, .5);
}
.lb-search__icon {
  flex: none;
  display: block;
  width: 13px; height: 13px;
  border: 1.5px solid var(--bellamy-muted-blue);
  border-radius: 999px;
  position: relative;
}
.lb-search__icon::after {
  content: "";
  position: absolute;
  right: -5px; bottom: -4px;
  width: 6px; height: 1.5px;
  background: var(--bellamy-muted-blue);
  transform: rotate(45deg);
}
.lb-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--bellamy-navy-deep);
}
.lb-bar__aside { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lb-bar__note {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 15.5px;
  color: rgba(31, 47, 107, .62);
}
/* Sky glass, the same treatment as the CTA pills on Home and Free Tools:
   one blue fill, a navy hairline, no nested halo. */
.lb-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(44, 62, 134, .3);
  background: rgba(207, 231, 255, .62);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 30px -18px rgba(31, 47, 107, .5);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.lb-bar__cta:hover {
  background: rgba(175, 195, 219, .78);
  border-color: rgba(44, 62, 134, .5);
  color: var(--bellamy-navy-deep);
}

/* chip-styled radios, used by the contributor application */
.chip-radio { position: relative; display: inline-flex; }
.chip-radio input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip-radio span {
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(44, 62, 134, .22);
  background: transparent;
  color: rgba(31, 47, 107, .6);
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.chip-radio input:checked + span {
  background: rgba(207, 231, 255, .5);
  border-color: rgba(44, 62, 134, .55);
  color: #1F2F6B;
}
.chip-radio input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.dialog-note {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(207, 231, 255, .38);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bellamy-navy-deep);
}
.android-dialog__panel--tall { max-width: 520px; max-height: 88vh; overflow-y: auto; }

.lb-body {
  background: #EDF4FB;
  padding: 28px var(--page-gutter) 92px;
  display: flex;
  flex-direction: column;
  gap: 68px;
}

.lb-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.lb-count {
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 14px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lb-count__n {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.lb-count__label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-navy);
}
.lb-count__blurb {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(31, 47, 107, .66);
}

.lb-section { display: flex; flex-direction: column; gap: 22px; }
.lb-section__head { display: flex; flex-direction: column; gap: 10px; }
.lb-section__title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.14;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.lb-section__blurb {
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .74);
}

.lb-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scroll-snap-type: x mandatory;
}
.lb-rail::-webkit-scrollbar { height: 6px; }
.lb-rail::-webkit-scrollbar-thumb { background: rgba(31, 47, 107, .2); border-radius: 99px; }

.lb-card {
  position: relative;
  flex: none;
  width: 320px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lb-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lb-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.lb-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.16;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.lb-card__title a { color: inherit; }
/* The whole card is the hit area. This overlay is the title's own link, so
   there is still exactly one link per card and it is named by the headline. */
.lb-card__title a::after { content: ''; position: absolute; inset: 0; }
.lb-card:hover .lb-card__title { color: var(--bellamy-navy); }
.lb-card__dek {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.68;
  color: rgba(31, 47, 107, .74);
}

.lb-result-count {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.lb-rows { display: flex; flex-direction: column; }
.lb-row {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 32px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--bellamy-soft-gray);
}
.lb-row[hidden] { display: none; }
.lb-row__eyebrow {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.lb-row__body { display: flex; flex-direction: column; gap: 8px; }
.lb-row__title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.18;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.lb-row__title a { color: inherit; }
.lb-row__title a::after { content: ''; position: absolute; inset: 0; }
.lb-row:hover .lb-row__title { color: var(--bellamy-navy); }
.lb-row__dek {
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .74);
  text-wrap: pretty;
}
.lb-row__time {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
  white-space: nowrap;
  padding-top: 4px;
}
.lb-empty {
  padding: 40px 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: rgba(31, 47, 107, .7);
}

/* ---- a single article ---- */

.art-title {
  max-width: 900px;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.12;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}
/* The reading area. A white sheet carries the prose so the article itself is
   the brightest thing on the page, with the warm ground showing around it. */
.art-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px var(--page-gutter) 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 18px 44px;
  align-items: start;
}
.art-back {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
  text-decoration: none;
}
.art-back__arrow { transition: transform var(--dur-base) var(--ease-standard); }
.art-back:hover .art-back__arrow { transform: translateX(-3px); }
.art-sheet {
  background: var(--bellamy-white);
  border: 1px solid rgba(31, 47, 107, .07);
  border-radius: 18px;
  box-shadow: 0 26px 60px -46px rgba(31, 47, 107, .45);
  overflow: hidden;
}
/* The title again, at the top of the sheet, so a reader who has scrolled past
   the hero still knows what they are in. */
.art-sheet__head {
  padding: 44px 56px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--bellamy-soft-gray);
}
.art-sheet__meta {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
}
.art-sheet__title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.16;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
  text-wrap: pretty;
}
.art-body {
  padding: 36px 56px 32px;
}
.art-body h2 {
  margin: 44px 0 14px;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.art-body h2:first-child { margin-top: 0; }
.art-body h3 {
  margin: 32px 0 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
}
.art-body p,
.art-body li {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-body);
}
.art-body p { margin: 0 0 20px; }
.art-body ul, .art-body ol { margin: 0 0 22px; padding-left: 22px; }
.art-body li { margin: 0 0 10px; }
.art-body strong { color: var(--bellamy-navy-deep); }
.art-body em { font-style: italic; }
.art-body a { color: var(--bellamy-navy); text-decoration: underline; text-underline-offset: 2px; }
.art-body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 1.5px solid var(--bellamy-blue-light);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--bellamy-navy-deep);
}
.art-body hr { border: 0; border-top: 1px solid var(--bellamy-soft-gray); margin: 36px 0; }

.art-foot {
  padding: 22px 56px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.art-foot__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- the sidebar ---- */
/* Not sticky: with three selling cards and four related ones this column is
   taller than the viewport, and a sticky element that tall never releases its
   lower half. */
.art-aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.art-aside__block { display: flex; flex-direction: column; gap: 14px; }
.art-aside__head {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
}
.art-aside__cards { display: flex; flex-direction: column; gap: 12px; }

.art-scard {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: var(--bellamy-white);
  border: 1px solid rgba(31, 47, 107, .07);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.art-scard:hover {
  border-color: rgba(31, 47, 107, .22);
  box-shadow: 0 16px 30px -24px rgba(31, 47, 107, .5);
}
.art-scard__media {
  display: block;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bellamy-soft-gray);
}
.art-scard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-scard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.art-scard__eyebrow {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.art-scard__title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.28;
  color: var(--bellamy-navy-deep);
  /* Titles here run long. Three lines keeps every card the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- "What next": the same card as the homepage rail, stacked ----
   Identical treatment to .rail-card so the two surfaces read as one system.
   Only the scale changes, because the column is 296px rather than 400px. */
.art-next { display: flex; flex-direction: column; gap: 14px; }
.rail-card--aside { flex: 1 1 auto; scroll-snap-align: none; }
.rail-card--aside .rail-card__media { height: 168px; }
.rail-card--aside .rail-card__media--pad { padding: 12px 10px; }
.rail-card--aside .rail-card__body { padding: 22px 22px 24px; }
.rail-card--aside .rail-card__title { font-size: 21px; line-height: 1.18; }
.rail-card--aside .rail-card__text { margin-top: 11px; font-size: 14.5px; line-height: 1.65; }
.rail-card--aside .rail-card__link { padding-top: 20px; font-size: 10px; letter-spacing: 0.18em; }

/* The last two are asides to the asides: a smaller picture, tighter body and a
   title that stops competing with the three product cards above them. */
.rail-card--compact .rail-card__media { height: 112px; }
.rail-card--compact .rail-card__body { padding: 18px 20px 20px; }
.rail-card--compact .rail-card__title { font-size: 18px; line-height: 1.2; }
.rail-card--compact .rail-card__text { margin-top: 9px; font-size: 13.5px; line-height: 1.6; }
.rail-card--compact .rail-card__link { padding-top: 16px; }
/* No media strip: the icon sits beside the title, with the line about it
   underneath. An illustration this small does not need a picture well. */
.rail-card--inline .rail-card__head {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 13px;
}
.rail-card--inline .rail-card__icon { flex: 0 0 auto; width: 46px; }
.rail-card--inline .rail-card__icon img { width: 100%; height: auto; display: block; }
.rail-card--inline .rail-card__title { font-size: 17px; }
.rail-card--inline .rail-card__text { margin-top: 12px; }
.art-disclaimer { padding: 0 56px; }
.art-disclaimer p {
  padding-top: 22px;
  border-top: 1px solid var(--bellamy-soft-gray);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}

@media (max-width: 1120px) {
  .lb-counts { grid-template-columns: repeat(3, 1fr); }
  .lb-head__title { font-size: 52px; }

  /* Below this the sidebar is wider than it is useful, so it goes under the
     article and the cards run as a row instead of a column. */
  .art-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 24px 24px 52px; }
  .art-aside { position: static; }
  .art-aside__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (max-width: 900px) {
  .lb-head { min-height: 520px; padding: 22px 24px 44px; }
  .lb-head__title { font-size: 30px; letter-spacing: 0.01em; }
  .lb-head__title-wrap { padding-top: 30px; gap: 12px; }

  .lb-bar { padding: 16px 24px; gap: 16px; }
  .lb-search { max-width: none; height: 46px; padding: 0 18px; }
  .lb-bar__aside { width: 100%; gap: 12px; }
  .lb-bar__note { font-size: 14.5px; }
  .lb-bar__cta { height: 42px; padding: 0 20px; font-size: 9.5px; }

  .lb-body { padding: 22px 24px 48px; gap: 40px; }
  .lb-counts { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lb-count { padding: 16px; }
  .lb-count__n { font-size: 26px; }
  .lb-count__blurb { font-size: 13px; }

  .lb-section__title { font-size: 24px; }
  .lb-section__blurb { font-size: 15.5px; }
  .lb-rail { gap: 16px; }
  .lb-card { width: 262px; }
  .lb-card__body { padding: 18px 18px 20px; }
  .lb-card__title { font-size: 20px; }
  .lb-card__dek { font-size: 15px; }

  .lb-row { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; }
  .lb-row__title { font-size: 20px; }
  .lb-row__dek { font-size: 15.5px; max-width: none; }
  .lb-row__time { padding-top: 0; }

  .art-title { font-size: 26px; line-height: 1.16; }
  .art-layout { padding: 18px 16px 44px; gap: 28px; }
  .art-sheet { border-radius: 14px; }
  .art-sheet__head { padding: 28px 22px 18px; gap: 10px; }
  .art-sheet__title { font-size: 24px; }
  .art-body { padding: 26px 22px 26px; }
  .art-body p, .art-body li { font-size: 15.5px; line-height: 1.72; }
  .art-body h2 { font-size: 22px; margin: 32px 0 12px; }
  .art-body blockquote { font-size: 18px; }
  .art-foot { padding: 18px 22px 32px; }
  .art-aside__cards { grid-template-columns: 1fr; }
  .art-disclaimer { padding: 0 22px; }
}

/* Library intro line and the end-of-article funnel block */
.lb-intro { max-width: 720px; }
.lb-intro p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(31, 47, 107, .78);
}
/* The intro is a standfirst for the shelves below it, not its own section, so
   it sits closer to them than the 68px the rest of the page runs on. */
.lb-intro + .lb-section { margin-top: -34px; }

.art-cta {
  max-width: 776px;
  margin: 0 auto 0 max(var(--page-gutter), calc(50vw - 620px + var(--page-gutter)));
  padding: 0 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.art-cta h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--bellamy-navy-deep);
}
.art-cta p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}
.art-cta__actions { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }

/* The reading layout's gutter shrinks below 1120, so the two blocks that hang
   under it follow, or their left edge drifts off the sheet's. Has to live after
   both base rules: same specificity, so source order decides. */
@media (max-width: 1120px) {
  .art-cta { margin-left: 24px; margin-right: auto; }
}

@media (max-width: 900px) {
  .lb-intro p { font-size: 15px; }
  .lb-intro + .lb-section { margin-top: -20px; }
  .art-cta { margin: 0 auto; padding: 0 24px 36px; }
  .art-cta h2 { font-size: 24px; }
  .art-cta p { font-size: 15.5px; }
  .art-cta__actions { flex-direction: column; }
  .art-cta__actions .ap-pill,
  .art-cta__actions .ap-pill-out { width: 100%; }
}

/* ---- Library hero imagery -------------------------------------
   Each set of six shares one picture. Files are copied in under
   neutral set-NN names so the src never reveals the result.
   ---------------------------------------------------------------- */

.lb-card__media { height: 176px; overflow: hidden; background: var(--bellamy-blue-light); }
.lb-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.lb-card:hover .lb-card__media img { transform: scale(1.04); }

.lb-row { grid-template-columns: 150px 1fr auto; }
.lb-row__media {
  display: block;
  width: 150px;
  height: 104px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bellamy-blue-light);
}
.lb-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.lb-row:hover .lb-row__media img { transform: scale(1.04); }

.art-head {
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  padding-bottom: 46px;
}
/* The title and standfirst sit lower in the frame, with less dead photograph
   under them, so the hero reads as one block rather than two. */
.art-head .page-head__title-block { margin-top: 76px; }

@media (max-width: 900px) {
  .lb-card__media { height: 148px; }
  .lb-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
  .lb-row__media { width: 96px; height: 72px; border-radius: 8px; }
  .lb-row__body { grid-column: 2; }
  .lb-row__time { grid-column: 2; padding-top: 2px; }
  .art-head { padding-bottom: 30px; }
  .art-head .page-head__title-block { margin-top: 52px; }
}

/* ---- Library: large feature cards, jump nav, expandable sections ---- */

.lb-rail--feature { padding-bottom: 18px; }

.lb-fcard {
  flex: none;
  width: 940px;
  min-height: 400px;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--bellamy-navy-deep);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 54px -32px rgba(44, 62, 134, .6);
  color: #fff;
}
.lb-fcard:hover { color: #fff; }
.lb-fcard__body {
  padding: 52px 46px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.lb-fcard__kicker { display: flex; align-items: center; gap: 12px; }
.lb-fcard__kicker span:first-child { width: 36px; height: 1px; background: rgba(244, 244, 242, .4); }
.lb-fcard__kicker span:last-child {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .72);
}
.lb-fcard__title {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.08;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}
.lb-fcard__dek {
  max-width: 460px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(244, 244, 242, .82);
}
.lb-fcard__cta {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  transition: background var(--dur-base) var(--ease-standard);
}
.lb-fcard:hover .lb-fcard__cta { background: rgba(255, 255, 255, .22); }
.lb-fcard__media { background-position: center; background-size: cover; background-repeat: no-repeat; }

.lb-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 4px;
}
.lb-jump .chip { cursor: pointer; }

.lb-more {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bellamy-navy);
  padding: 12px 0 2px;
  transition: color var(--dur-base) var(--ease-standard);
}
.lb-more:hover { color: var(--bellamy-navy-deep); }
.lb-rows[hidden] { display: none; }

.lb-results[hidden] { display: none; }

@media (max-width: 1120px) {
  .lb-fcard { width: 760px; min-height: 340px; }
  .lb-fcard__body { padding: 38px 34px; }
  .lb-fcard__title { font-size: 30px; }
}

@media (max-width: 900px) {
  .lb-fcard {
    width: 302px;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 18px;
  }
  .lb-fcard__media { height: 168px; }
  .lb-fcard__body { padding: 22px 20px 24px; gap: 12px; }
  .lb-fcard__title { font-size: 23px; line-height: 1.16; }
  .lb-fcard__dek { font-size: 15px; line-height: 1.65; }
  .lb-fcard__cta { height: 42px; padding: 0 20px; font-size: 9.5px; margin-top: 4px; }
  .lb-jump { gap: 8px; }
  .lb-jump .chip { font-size: 10px; padding: 8px 14px; letter-spacing: 0.1em; }
}

/* ============================================================
   The Self-Portrait Assessment
   Hero, split, alongside and the closing three cards are the App
   page's components reused. Everything below is what this page
   adds: the results rail, the research band, the dashboard
   carousel and the closing image rail.
   ============================================================ */

/* The design set the standfirst in Source Serif. Body prose on this
   page runs sans, matching the direction taken on Membership. */
.sp-split .app-split__body { font-family: var(--font-sans); font-size: 16.5px; }
/* Artwork on a white plate, not a cropped photo, so it must fit whole. */
.sp-split__figure { height: 660px; }
.sp-split__figure img { object-fit: contain; }

/* ---- Your Self-Portrait results include ---- */

.sp-results {
  background: var(--surface-page);
  padding: 88px 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.sp-results__title {
  padding: 0 var(--page-gutter);
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 200;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bellamy-navy-deep);
  text-align: center;
  text-wrap: pretty;
}
.sp-results__rail {
  width: 100%;
  display: flex;
  gap: 24px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 6px var(--page-gutter) 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sp-results__rail::-webkit-scrollbar { display: none; }

.sp-card {
  scroll-snap-align: start;
  flex: none;
  width: 470px;
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 14px;
  box-shadow: 0 10px 30px -18px rgba(44, 62, 134, .28);
  padding: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.sp-card__media { width: 100%; height: 250px; object-fit: cover; display: block; }
.sp-card__title {
  padding: 0 30px;
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1.14;
  font-weight: 500;
  color: var(--bellamy-navy-deep);
}
.sp-card__text {
  padding: 0 30px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--bellamy-navy-deep);
}
/* Pushed to the base so the "Take the Self-Portrait" line sits on the
   same rule across cards of very different lengths. */
.sp-card__foot {
  margin-top: auto;
  padding: 0 30px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.62;
  color: var(--bellamy-navy-deep);
}
.sp-card__foot strong { font-weight: 600; color: inherit; }
.sp-card__foot a {
  font-style: italic;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-card__foot a:hover { color: var(--bellamy-navy); }

.sp-card--navy { background: var(--bellamy-navy-deep); border-color: transparent; }
.sp-card--navy .sp-card__title { color: #fff; }
.sp-card--navy .sp-card__text { color: rgba(244, 244, 242, .9); }
.sp-card--navy .sp-card__foot { color: rgba(244, 244, 242, .85); }
.sp-card--navy .sp-card__foot a:hover { color: var(--bellamy-sky); }

/* ---- Research-informed ---- */

.sp-research {
  background: var(--bellamy-navy-deep);
  padding: 96px var(--page-gutter);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}
.sp-research__body { display: flex; flex-direction: column; gap: 22px; }
.sp-research__rule { display: flex; align-items: center; gap: 12px; }
.sp-research__rule span:first-child { width: 36px; height: 1px; background: rgba(207, 231, 255, .5); }
.sp-research__rule .ap-eyebrow { color: rgba(207, 231, 255, .8); }
.sp-research h2 {
  max-width: 520px;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.14;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}
.sp-research p {
  max-width: 520px;
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.02em;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(244, 244, 242, .86);
}
.sp-research__cites { display: flex; flex-direction: column; }

.ap-cite {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 0;
  border-top: 1px solid rgba(244, 244, 242, .18);
}
/* Closes the list with a rule under the last citation. */
.ap-cite--end { padding: 0; }
.ap-citea { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: #fff; }
.ap-citeb {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(207, 231, 255, .72);
}

/* ---- Dashboard screens carousel ----
   Driven by the same [data-tour] script the App page tour uses: it sets
   the track width and each slide's width inline, so only the frame and
   the arrows are styled here. */

.sp-screens {
  background: #fff;
  padding: 44px var(--page-gutter) 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.sp-screens__col {
  flex: 1;
  min-width: 0;
  /* The design specified a 1000px column, assuming landscape captures. The
     real dashboard screens are portrait (1120x1400), so 1000px wide made a
     1250px-tall carousel. Narrowed, but not to 560: each slide carries wide
     white margins of its own, so below ~700px the type inside stops reading. */
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
/* The frame reserves its own height from the screens' ratio. Without it the
   window starts at zero height, which keeps the lazy images out of the
   viewport, so they never load and the window never gains height.
   The source slides shipped with 150-330px of white baked in at the top and up
   to 200px at the sides. sp-screen-1..8 are those files cropped to their
   content and re-padded to one shared ratio, so the frame holds steady while
   the artwork actually fills it. */
.sp-screens__window { width: 100%; aspect-ratio: 1018 / 1242; overflow: hidden; }
.sp-screens__track {
  display: flex;
  height: 100%;
  transition: transform 480ms var(--ease-standard);
}
.sp-screens__track img { height: 100%; object-fit: contain; display: block; }
.sp-screens__label { color: var(--bellamy-muted-blue); }

/* A plain chevron, no ring. The design drew these as bordered circles, but a
   circled control is not how the rest of the site moves you around. The 44px
   box is the tap target and stays invisible. */
.sp-screens__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .55;
  transition: opacity 240ms var(--ease-standard);
}
.sp-screens__arrow:hover { opacity: 1; }
.sp-screens__chev { display: block; width: 12px; height: 12px; transform: rotate(45deg); }
.sp-screens__chev--prev {
  border-left: 1.5px solid var(--bellamy-navy);
  border-bottom: 1.5px solid var(--bellamy-navy);
  margin-left: 3px;
}
.sp-screens__chev--next {
  border-right: 1.5px solid var(--bellamy-navy);
  border-top: 1.5px solid var(--bellamy-navy);
  margin-right: 3px;
}

/* ---- Closing image rail ---- */

.sp-rail { background: var(--surface-page); padding: 24px 0 28px; }
.sp-rail__track {
  display: flex;
  gap: 28px;
  padding: 8px var(--page-gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sp-rail__track::-webkit-scrollbar { display: none; }
.sp-slide {
  flex: none;
  scroll-snap-align: center;
  width: 320px;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--bellamy-soft-gray);
  background: #fff;
  box-shadow: 0 22px 56px -34px rgba(44, 62, 134, .55);
}
.sp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1120px) {
  .sp-research { grid-template-columns: 1fr; gap: 40px; }
  .sp-split__figure { height: 520px; }
}

@media (max-width: 900px) {
  .sp-results { padding: 56px 0 64px; gap: 28px; }
  .sp-results__title { font-size: 18px; letter-spacing: 0.14em; }
  .sp-results__rail { gap: 16px; padding: 6px 24px 18px; }
  .sp-card { width: 300px; padding-bottom: 26px; gap: 14px; }
  .sp-card__media { height: 180px; }
  .sp-card__title { padding: 0 22px; font-size: 24px; }
  .sp-card__text { padding: 0 22px; font-size: 15.5px; }
  /* Feet stay aligned across cards on desktop. At 300px wide the cards get
     tall enough that the auto margin opens a dead gap mid-card, so let the
     text just flow and leave the slack at the bottom instead. */
  .sp-card__foot { margin-top: 0; padding: 0 22px; font-size: 13px; }

  .sp-research { padding: 64px 24px; gap: 32px; }
  .sp-research h2 { font-size: 28px; }
  .sp-research p { font-size: 15.5px; }

  .sp-screens { padding: 28px 12px 32px; gap: 4px; }
  .sp-screens__arrow { width: 36px; height: 36px; }

  .sp-rail__track { gap: 16px; padding: 8px 24px 16px; }
  .sp-slide { width: 240px; height: 168px; }

  .sp-split__figure { height: 320px; }
}

/* ============================================================
   "Peruse the Bellamy Library" invitation
   A generated block (see build.mjs) that any page can include with
   {{> library-shelves }}. Currently on Free Tools, after the downloads:
   the tools are free, and so is the reading.
   ============================================================ */

.lib-invite {
  position: relative;
  overflow: hidden;
  padding: 76px var(--page-gutter) 84px;
  display: flex;
  justify-content: center;
}
.lib-invite__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}
.lib-invite__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 47, 107, .82) 0%,
    rgba(31, 47, 107, .7) 45%,
    rgba(31, 47, 107, .86) 100%);
}
.lib-invite__body {
  position: relative;
  width: 100%;
  max-width: 940px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.lib-invite__eyebrow { color: rgba(207, 231, 255, .82); }
.lib-invite__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 46px;
  line-height: 1.1;
  font-weight: 400;
  color: #fff;
  text-wrap: pretty;
}
.lib-invite__lede {
  max-width: 660px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(244, 244, 242, .88);
  text-wrap: pretty;
}

/* The shelves double as the argument for the Library's size: nine of them,
   each carrying its own count. */
.lib-invite__shelves {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.lib-invite__shelf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(244, 244, 242, .92);
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.lib-invite__shelf:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.lib-invite__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(207, 231, 255, .22);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(244, 244, 242, .96);
}
.lib-invite__cta { margin-top: 14px; }

@media (max-width: 900px) {
  .lib-invite { padding: 52px 24px 58px; }
  .lib-invite__title { font-size: 30px; }
  .lib-invite__lede { font-size: 15.5px; }
  .lib-invite__shelves { gap: 8px; }
  .lib-invite__shelf { height: 34px; font-size: 11.5px; padding: 0 7px 0 13px; gap: 8px; }
  .lib-invite__n { min-width: 21px; height: 21px; font-size: 10.5px; }
}

/* ============================================================
   The Member page — what someone sees once they are signed in.
   One 860px column of white cards on the warm paper ground, with
   two cards that sit on photography instead (Discovery on navy,
   Free tools on sky).

   Every card shares one shell, .mp-card, so a new section is a
   new block of content rather than a new set of decisions.
   ============================================================ */

.page-member { background: var(--surface-page); }

/* ---- hero ---- */

.mp-hero { position: relative; min-height: 540px; overflow: hidden; display: flex; flex-direction: column; }
.mp-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 72%;
  display: block;
}
/* A protection scrim, never a decorative gradient: the name has to hold at
   the bottom of a photograph whose lower half is grass and lamplight. */
.mp-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31, 47, 107, .58), rgba(31, 47, 107, .88));
}
.mp-hero__name {
  position: relative;
  z-index: 6;
  margin-top: auto;
  padding: 0 var(--over-hero-gutter) 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.mp-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  color: #fff;
}
.mp-hero__since {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .68);
}

/* ---- the column ---- */

.mp-body {
  max-width: calc(var(--container-md) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: 40px var(--page-gutter) 84px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mp-count {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}

/* ---- the shared card shell ---- */

.mp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bellamy-soft-gray);
  border-radius: 22px;
  box-shadow: 0 18px 48px -28px rgba(31, 47, 107, .4);
  padding: 40px;
}

/* ---- shared pieces used inside the cards ---- */

.mp-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.mp-eyebrow--on-navy { color: rgba(244, 244, 242, .72); }

.mp-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}

.mp-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--bellamy-navy-deep);
}
.mp-title--on-navy { color: #fff; }
.mp-title--caps {
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 26px;
}

.mp-body-copy {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(31, 47, 107, .78);
}
.mp-body-copy--on-navy { color: rgba(244, 244, 242, .82); }
.mp-body-copy strong { font-weight: 600; color: var(--bellamy-navy-deep); }

/* the frosted navy pill, the page's primary action */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1px solid rgba(244, 244, 242, .22);
  background: rgba(31, 47, 107, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 28px -14px rgba(31, 47, 107, .55);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
}
.mp-btn:hover { background: rgba(31, 47, 107, .94); color: #fff; }
.mp-btn--sm { height: 44px; padding: 0 26px; }

/* the outlined twin */
.mp-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--bellamy-navy);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-navy);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard);
}
.mp-ghost:hover { background: rgba(207, 231, 255, .4); color: var(--bellamy-navy-deep); }
.mp-ghost--lg { height: 48px; padding: 0 28px; font-size: 11px; letter-spacing: 0.22em; }

/* bare text link, no chrome */
.mp-textlink {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bellamy-navy);
}
.mp-textlink:hover { color: var(--bellamy-navy-deep); text-decoration: underline; text-underline-offset: 4px; }

/* ---- Self-Portrait card ---- */

/* The archetype panel runs to the card's edges, so the shell loses its padding
   and the left column carries it instead. */
.mp-sp { display: grid; grid-template-columns: 1fr 268px; padding: 0; overflow: hidden; }
.mp-sp__main { padding: 40px; }

.mp-sp__head { display: flex; align-items: flex-start; gap: 20px; }
.mp-sp__icon { width: 88px; height: auto; flex: none; margin-top: 2px; }
.mp-sp__headings { min-width: 0; }

.mp-sp__actions { margin-top: 26px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.mp-meta {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--bellamy-soft-gray);
  display: grid;
  grid-template-columns: 0.8fr 1.25fr 0.95fr;
  gap: 20px;
}
.mp-meta__cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-meta__value {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
  color: var(--bellamy-navy-deep);
}
.mp-meta__value--nowrap { white-space: nowrap; }
.mp-meta__value--serif { font-family: var(--font-serif); font-size: 16px; }

.mp-survey {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--bellamy-soft-gray);
}
.mp-survey__status { display: flex; align-items: center; gap: 14px; }
.mp-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bellamy-soft-gray);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellamy-muted-blue);
}
.mp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--bellamy-navy);
}
.mp-check svg { width: 18px; height: 18px; display: block; }

.mp-survey__actions { margin-top: 18px; display: flex; gap: 14px; }

/* ---- the five results panel ---- */

.mp-arch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 34px 26px;
  background-image: linear-gradient(180deg, rgba(31, 47, 107, .7), rgba(31, 47, 107, .9)),
                    url('/assets/photos/tuscan-lit-tree.webp');
  background-size: cover;
  background-position: center 62%;
}
.mp-arch__row { padding: 15px 0; border-top: 1px solid rgba(244, 244, 242, .22); }
.mp-arch__row:first-child { border-top: 0; padding-top: 0; }
.mp-arch__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .72);
}
/* The real result names are long ("The One Who Held Everything Together"), so
   this wraps by design rather than being sized for a two-word placeholder. */
.mp-arch__value {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.24;
  color: #fff;
  text-wrap: pretty;
}

/* ---- Invite ---- */

.mp-invite__head { display: flex; align-items: flex-start; gap: 22px; }
.mp-invite__icon { width: 132px; height: auto; flex: none; margin-top: -6px; }
.mp-invite__headings { min-width: 0; }

.mp-fields {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--bellamy-soft-gray);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
}
.mp-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mp-field__shell {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 6px 0 14px;
  border: 1.5px solid var(--bellamy-soft-gray);
  border-radius: 12px;
  background: var(--surface-page);
}
.mp-field__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--bellamy-navy-deep);
}
.mp-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bellamy-navy);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  transition: background var(--dur-base) var(--ease-standard);
}
.mp-copy:hover { background: var(--bellamy-navy-deep); }

.mp-copied {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--bellamy-muted-blue);
  min-height: 18px;
}
.mp-copied:empty { margin-top: 0; min-height: 0; }

/* ---- The Bellamy App ---- */

.mp-chip {
  position: absolute;
  top: 34px;
  right: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mp-chip__dot { width: 5px; height: 5px; border-radius: 999px; }
.mp-chip--on { background: rgba(207, 231, 255, .55); color: var(--bellamy-navy-deep); }
.mp-chip--on .mp-chip__dot { background: var(--bellamy-navy); }
.mp-chip--off { border: 1px solid var(--bellamy-soft-gray); color: var(--bellamy-muted-blue); }
.mp-chip--off .mp-chip__dot { border: 1px solid var(--bellamy-muted-blue); }

.mp-app__head { display: flex; align-items: flex-start; gap: 24px; }
.mp-app__icon { width: 88px; height: auto; flex: none; margin-top: 2px; }
/* room for the status chip, so a long name never runs under it */
.mp-app__headings { min-width: 0; padding-right: 140px; }

.mp-app__foot {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--bellamy-soft-gray);
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: 24px 40px;
}
.mp-app__cta { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mp-app__note { font-family: var(--font-sans); font-size: 12px; color: var(--bellamy-muted-blue); }

.mp-app__foot--join { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ---- Bellamy Discovery ---- */

.mp-disc {
  overflow: hidden;
  padding: 0;
  background: var(--bellamy-navy-deep);
  border-color: rgba(244, 244, 242, .18);
}
.mp-disc__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
.mp-disc__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31, 47, 107, .72), rgba(31, 47, 107, .9));
}
.mp-disc__body { position: relative; padding: 40px; }
.mp-disc__head { display: flex; align-items: flex-start; gap: 22px; }
.mp-disc__icon { width: 92px; height: auto; flex: none; margin-top: -4px; }
.mp-disc__headings { min-width: 0; }

.mp-tiles {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 244, 242, .2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mp-tile {
  padding: 18px 20px 20px;
  border: 1px solid rgba(244, 244, 242, .2);
  border-radius: 14px;
  background: rgba(207, 231, 255, .1);
}
.mp-tile__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, .72);
}
.mp-tile__value {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.24;
  color: #fff;
  text-wrap: pretty;
}
.mp-disc__cta { margin-top: 28px; }

/* ---- Free tools collected ---- */

.mp-tools { overflow: hidden; padding: 0; background: var(--bellamy-sky); }
.mp-tools__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.mp-tools__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(207, 231, 255, .88), rgba(224, 238, 255, .93));
}
.mp-tools__body { position: relative; padding: 40px; }

.mp-toollist { margin: 26px 0 0; padding: 0; list-style: none; }
.mp-toolrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(31, 47, 107, .16);
}
.mp-toolrow__mark {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(31, 47, 107, .28);
}
.is-collected .mp-toolrow__mark { border-color: var(--bellamy-navy); background: var(--bellamy-navy); }
.mp-toolrow__mark svg { width: 15px; height: 15px; display: block; margin: 0.5px auto; }
.mp-toolrow__title {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--bellamy-navy-deep);
}
.mp-toolrow__status {
  flex: none;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31, 47, 107, .5);
}
.is-collected .mp-toolrow__status { color: var(--bellamy-navy); }
.mp-tools__more { display: inline-block; margin-top: 22px; }

/* ---- Birthday ---- */

.mp-bday { display: grid; grid-template-columns: 96px 1fr auto; align-items: end; gap: 28px; }
.mp-bday__icon { width: 96px; height: auto; align-self: center; }
.mp-bday__text { min-width: 0; }
.mp-bday__inputs { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.mp-dateinput {
  width: 64px;
  height: 40px;
  border: 1.5px solid var(--bellamy-soft-gray);
  border-radius: 10px;
  background: #fff;
  outline: none;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--bellamy-navy-deep);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.mp-dateinput--year { width: 80px; }
.mp-dateinput::placeholder { color: var(--bellamy-muted-blue); opacity: .75; }
.mp-dateinput:focus { border-color: var(--bellamy-navy); }
.mp-bday__slash { font-family: var(--font-sans); font-size: 14px; color: var(--bellamy-muted-blue); }
.mp-bday__note { grid-column: 1 / -1; margin-top: 0; }

/* ---- account help ---- */

.mp-help {
  align-self: center;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--bellamy-muted-blue);
}
.mp-help:hover { color: var(--bellamy-navy); }

@media (max-width: 1120px) {
  .mp-sp { grid-template-columns: 1fr 240px; }
  .mp-app__headings { padding-right: 0; }
  .mp-chip { position: static; margin-bottom: 20px; }
}

@media (max-width: 900px) {
  .mp-hero { min-height: 420px; }
  .mp-hero__img { object-position: 58% 72%; }
  .mp-hero__name { padding: 0 20px 22px; gap: 9px; }
  .mp-hero__title { font-size: 34px; }
  .mp-hero__since { font-size: 9.5px; }

  .mp-body { padding: 24px 20px 44px; gap: 18px; }
  .mp-count { font-size: 9px; }

  .mp-card { border-radius: 18px; padding: 26px 22px; box-shadow: 0 14px 36px -24px rgba(31, 47, 107, .4); }
  /* the three cards that run their artwork to the edge keep no padding of
     their own here either, or the inner body would be inset twice */
  .mp-sp, .mp-disc, .mp-tools { padding: 0; }
  .mp-title { font-size: 24px; }
  .mp-title--caps { font-size: 20px; }
  .mp-body-copy { font-size: 13.5px; line-height: 1.65; }
  .mp-eyebrow { font-size: 9px; }

  /* the results panel becomes the card's opening band */
  .mp-sp { display: flex; flex-direction: column-reverse; }
  .mp-sp__main { padding: 26px 22px; }
  .mp-sp__head { gap: 14px; }
  .mp-sp__icon { width: 62px; }
  .mp-sp__actions { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 14px; }
  .mp-sp__actions .mp-btn { width: 100%; }
  .mp-sp__actions .mp-textlink { text-align: center; }

  .mp-meta { margin-top: 24px; padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
  .mp-meta__cell { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
  .mp-meta__value { font-size: 14px; text-align: right; }

  .mp-arch { padding: 22px; gap: 0; }
  .mp-arch__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; }
  .mp-arch__label { flex: none; }
  .mp-arch__value { margin-top: 0; font-size: 17px; text-align: right; }

  .mp-survey__actions { gap: 10px; }
  .mp-survey__actions .mp-ghost { flex: 1; padding: 0 10px; }

  /* the illustration sits above the words rather than beside them */
  .mp-invite__head,
  .mp-app__head,
  .mp-disc__head { flex-direction: column; gap: 14px; }
  .mp-invite__icon { width: 96px; margin-top: 0; }
  .mp-app__icon { width: 56px; }
  .mp-disc__icon { width: 68px; margin-top: 0; }

  .mp-fields { margin-top: 22px; padding-top: 20px; grid-template-columns: 1fr; gap: 16px; }
  .mp-copied { text-align: center; }

  .mp-app__foot { margin-top: 24px; padding-top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .mp-app__cta { justify-self: stretch; align-items: stretch; margin-top: 6px; }
  .mp-app__note { text-align: center; font-size: 11px; }
  .mp-app__foot--join .mp-btn { width: 100%; }
  .mp-app__foot--join .mp-textlink { text-align: center; width: 100%; }

  .mp-disc__body,
  .mp-tools__body { padding: 26px 22px; }
  .mp-tiles { margin-top: 22px; padding-top: 20px; grid-template-columns: 1fr; gap: 12px; }
  .mp-tile { padding: 14px 16px 16px; }
  .mp-tile__value { font-size: 17px; }
  .mp-disc__cta { margin-top: 22px; }
  .mp-disc__cta .pill-glass { width: 100%; }

  .mp-toollist { margin-top: 20px; }
  .mp-toolrow { gap: 12px; padding: 12px 0; }
  .mp-toolrow__title { font-size: 13.5px; }
  .mp-tools__more { display: block; text-align: center; margin-top: 18px; }

  .mp-bday { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .mp-bday__icon { width: 84px; }
  .mp-bday__inputs { justify-content: center; }
  .mp-dateinput { width: 58px; font-size: 16px; }
  .mp-dateinput--year { width: 74px; }
  .mp-bday__submit { width: 100%; display: flex; justify-content: center; }
  .mp-bday__note { text-align: center; }

  .mp-help { font-size: 9.5px; }
}

/* Inline status under the Contact form: shown while the note is in flight and
   if it fails to send. Matches .android-dialog__status, which does the same job
   for the Insider dialog. Hidden when empty so it never leaves a gap. */
.form-status {
  margin: 14px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31, 47, 107, .72);
}
.form-status:empty { display: none; }