/* Mecavoy — the founding advisor pages.
 *
 *   advisors.html        body.page-advisors   program landing
 *   advisor-apply.html   body.page-apply      the multi-step application
 *   advisor-terms.html   body.page-doc        the program terms
 *
 * Loaded after /styles.css and /ui.css, and built entirely on the ui.css
 * tokens and components. Nothing here redefines a ui.css component; where a
 * page needs a variant it adds a class of its own.
 *
 * Class names avoid every legacy styles.css name (.card, .field, .done,
 * .icon, .policy, .terms and friends), because those rules are global and
 * would otherwise reach into this markup.
 *
 * Motion: everything animated here is wrapped in
 * `prefers-reduced-motion: no-preference`, and styles.css additionally zeroes
 * every animation and transition under `reduce`, so the static state is
 * always the complete state.
 */

/* ══ 0. shared ════════════════════════════════════════════════════════════ */

/* The inline icon sprite: present for <use>, invisible and out of flow. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* The menu button comes before the menu in the markup, so that once it opens
   the links are the next stops in the tab order. It still belongs at the end
   of the header row, after the call to action; the row's gap spaces it. At
   960px and up it is display:none and takes no part in the row. */
@media (max-width:959px){
  .site-header__inner > .nav-toggle{order:1;flex:none}
}

/* Running text breaks without leaving a single word alone on its last line. */
.page-advisors main p{text-wrap:pretty}

.checklist{display:grid;gap:12px}
.checklist li{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:10px;
  align-items:start;
  font-size:16px;
  line-height:1.5;
  color:var(--c-ink-2);
}
.checklist .ico{width:18px;height:18px;margin-top:3px;color:var(--c-ok)}

/* Short facts, each behind a small icon tile: who the program is for, and
   how a step handles your files. Used on both advisor pages. */
.tracks__facts{
  display:grid;
  justify-content:center;
  justify-items:start;
  gap:14px;
  max-width:1040px;
  margin:40px auto 0;
}
.tracks__facts li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.45;color:var(--c-ink-2)}
.tracks__facts .ico-tile{flex:none}
.tracks__facts .ico-tile{width:36px;height:36px;border-radius:10px}
.tracks__facts .ico{width:19px;height:19px}
@media (max-width:760px){
  .tracks__facts{display:grid;justify-content:start;gap:14px;margin-top:28px}
}

/* ══ 1. advisors.html ═════════════════════════════════════════════════════ */

/* ── 1.1 hero ── */
.adv-hero{
  position:relative;
  padding-block:clamp(36px,6vw,88px) clamp(72px,9vw,120px);
  overflow:clip;
}
.adv-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(40px,6vw,88px);
  align-items:center;
}
.adv-hero__copy .display-xl{font-size:clamp(40px,5.2vw,70px)}
/* The program's name is the first line of the heading, so the heading says
   what the page is about. It keeps the label's own face, with the gap it had
   when it was a paragraph above the heading. */
.adv-hero__copy h1 > .kicker{display:flex;margin-bottom:20px;font-family:var(--f-sans)}
.adv-hero__copy .lede{margin-top:22px}
.adv-hero__ctas{margin-top:34px}
/* Three short facts under the buttons, instead of a sentence. */
.adv-hero__facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px}
.adv-hero__facts li{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;line-height:1.4;color:var(--c-ink-2)}
.adv-hero__facts .ico{width:18px;height:18px;stroke-width:2.2;color:var(--c-ok)}

.adv-hero__visual{position:relative;padding:0 0 64px 44px}
.adv-hero__photo{aspect-ratio:6/5;box-shadow:var(--sh-3)}
/* Two short lines, right-aligned in the space under the photograph, so the
   caption stays clear of the brief card. */
.adv-hero__caption{
  position:absolute;
  right:4px;
  bottom:6px;
  display:grid;
  justify-items:end;
  font-weight:650;
  letter-spacing:.04em;
}

/* The floating product cards. */
.brief-card{
  position:absolute;
  left:0;
  bottom:0;
  width:min(348px,80%);
  padding:18px 18px 16px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-4);
}
.brief-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brief-card__label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-ink-3);
}
.brief-card__label .ico{color:var(--c-navy)}
.brief-card__title{margin-top:12px;font-size:17px;font-weight:750;line-height:1.3;color:var(--c-ink)}
.brief-card__meta{margin-top:3px;font-size:14px;color:var(--c-ink-3)}
.brief-card__route{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:14px;
  font-size:12.5px;
  font-weight:650;
  color:var(--c-ink-2);
}
.brief-card__route svg{width:100%;height:24px}
.brief-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.brief-card__tags .chip{cursor:default}

.draft-card{
  position:absolute;
  top:26px;
  right:-14px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px 12px 12px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
}
.draft-card .ico-tile{width:38px;height:38px;border-radius:10px}
.draft-card__text{display:grid;gap:7px}
.draft-card__title{font-size:14px;font-weight:700;color:var(--c-ink)}
.draft-card__lines{display:grid;gap:4px}
.draft-card__lines span{display:block;height:5px;border-radius:5px;background:var(--c-navy-100)}
.draft-card__lines span:nth-child(1){width:150px}
.draft-card__lines span:nth-child(2){width:118px}
.draft-card__lines span:nth-child(3){width:132px}

@media (prefers-reduced-motion:no-preference){
  .brief-card{animation:adv-slide-in .8s .3s var(--ease-out) both}
  .brief-card__badge{animation:ui-pop .42s 1.1s var(--ease-spring) both}
  .draft-card{animation:ui-rise .7s .85s var(--ease-out) both}
}
@keyframes adv-slide-in{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}

/* On narrow screens the brief card leaves the photo's corner and overlaps
   only its lower edge, so the photograph stays readable. */
@media (max-width:899px){
  .adv-hero__grid{grid-template-columns:minmax(0,1fr)}
  .adv-hero__visual{padding:0;max-width:620px}
  .adv-hero__photo{aspect-ratio:4/3}
  .draft-card{right:10px;top:14px}
  .brief-card{position:relative;left:auto;bottom:auto;width:auto;max-width:400px;margin:-64px 12px 0}
  .adv-hero__caption{position:static;margin-top:12px;padding-right:12px;text-align:right}
}
@media (max-width:480px){
  .adv-hero__ctas .btn-primary{width:100%}
  .draft-card{padding:10px 14px 10px 10px}
  .draft-card__lines{display:none}
  .brief-card{padding-inline:16px}
  .brief-card__label{white-space:nowrap;letter-spacing:.08em}
}
/* Stacked under a full-width button, the text button's own padding would
   indent its label; line it up with the text above instead. body.ui is
   needed to outrank the padding body.ui .btn sets in ui.css. */
@media (max-width:560px){
  body.ui .adv-hero__ctas .btn-ghost{padding-inline:0}
}

/* ── 1.2 what advisors do ── */
.what-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
.what-card{display:flex;flex-direction:column;padding:12px}
.what-card__copy{padding:22px 16px 18px}
.what-card__copy p{margin-top:8px;color:var(--c-ink-3);font-size:16px}

/* Mini product UIs. Decorative (aria-hidden); built from real markup rather
   than screenshots so they stay sharp and share the page's type and colors. */
.mini{
  display:grid;
  align-content:center;
  gap:10px;
  min-height:272px;
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-paper);
  font-size:14px;
  line-height:1.35;
}
.mini strong{font-weight:700;color:var(--c-ink)}

.mini-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:12px;
  box-shadow:var(--sh-1);
}
.mini-row__text{display:grid;gap:2px;flex:1;min-width:0}
.mini-row__text span{font-size:12.5px;color:var(--c-ink-3)}
.mini-row--faint{opacity:.55}

.mini-day{
  padding:14px 16px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:12px;
  box-shadow:var(--sh-1);
}
.mini-day__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:10px;
  margin-bottom:4px;
  border-bottom:1px solid var(--c-line);
  font-weight:750;
  color:var(--c-ink);
}
.mini-day__ai{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:700;
  color:var(--c-navy);
}
.mini-day__row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px 6px;
  border-radius:8px;
  color:var(--c-ink-2);
}
.mini-day__row .tabular{font-size:12.5px;font-weight:650;color:var(--c-ink-3)}
.mini-day__row--edit{background:var(--c-sun-100);box-shadow:inset 3px 0 0 var(--c-sun)}
.mini-day__flag{font-size:11.5px;font-weight:750;color:#8A4A0D}
.mini-shimmer{
  display:block;
  height:8px;
  width:72%;
  border-radius:8px;
  background:linear-gradient(90deg,var(--c-line) 0%,var(--c-paper-2) 50%,var(--c-line) 100%);
  background-size:200% 100%;
}
@media (prefers-reduced-motion:no-preference){
  .mini-shimmer{animation:ui-shimmer 2.4s linear 2}
}

.mini-work{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.mini-work__trips{
  display:grid;
  align-content:start;
  gap:4px;
  padding:8px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:12px;
  box-shadow:var(--sh-1);
}
.mini-work__trips li{display:grid;gap:5px;justify-items:start;padding:8px 10px;border-radius:8px}
.mini-work__trips li strong{font-size:13px}
.mini-work__trips .is-active{background:var(--c-navy-50)}
.mini-work__trips .badge{min-height:20px;padding:0 8px;font-size:11px}
.mini-work__chat{display:grid;align-content:end;gap:8px}
.mini-bubble{
  justify-self:start;
  max-width:100%;
  padding:9px 12px;
  border-radius:14px 14px 14px 4px;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  font-size:12.5px;
  color:var(--c-ink-2);
}
.mini-bubble--me{
  justify-self:end;
  border-radius:14px 14px 4px 14px;
  background:var(--c-navy);
  border-color:var(--c-navy);
  color:#FBF7EF;
}

.mini-cover{
  overflow:hidden;
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:14px;
  box-shadow:var(--sh-2);
}
.mini-cover__art{
  position:relative;
  height:96px;
  background:
    radial-gradient(120% 140% at 0% 100%,rgba(217,130,43,.28) 0%,rgba(217,130,43,0) 55%),
    linear-gradient(135deg,var(--c-navy-800) 0%,var(--c-navy-600) 100%);
}
.mini-cover__art svg{position:absolute;inset:6px 10px;width:calc(100% - 20px);height:calc(100% - 12px)}
.mini-cover__art .route-line{stroke:rgba(251,247,239,.7)}
.mini-cover__art .badge{position:absolute;left:12px;top:12px;background:rgba(251,247,239,.16);color:#FBF7EF}
.mini-cover__body{display:grid;gap:4px;padding:14px 16px 16px}
.mini-cover__body span{font-size:12.5px;color:var(--c-ink-3)}
.mini-cover__by{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-weight:650}
.mini-cover__dot{width:8px;height:8px;border-radius:50%;background:var(--c-ok)}

@media (max-width:760px){
  .what-grid{grid-template-columns:minmax(0,1fr)}
  .mini{min-height:0}
}
/* On phones each illustration keeps only what carries its idea. */
@media (max-width:600px){
  .mini{padding:16px}
  .mini-row--faint,
  .mini-day__row--ghost{display:none}
  .what-card__copy{padding:18px 10px 14px}
}
@media (max-width:420px){
  .mini-work{grid-template-columns:minmax(0,1fr)}
  .mini-work__trips li:nth-child(3){display:none}
}

/* ── 1.3 the two tracks ── */
.tracks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  max-width:1040px;
  margin-inline:auto;
}
.track-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(24px,3vw,36px);
  overflow:hidden;
}
.track-card__desc{color:var(--c-ink-2)}
/* Side by side, both descriptions hold two lines, so the two lists start
   level. */
@media (min-width:761px){
  .track-card__desc{min-height:3.3em}
}
.track-card__need{
  margin-top:6px;
  padding-top:18px;
  border-top:1px dashed var(--c-line-2);
  font-size:12.5px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-ink-3);
}
.track-card .btn{margin-top:auto;white-space:normal;text-align:center}
.track-card .checklist{margin-bottom:12px}
@media (max-width:760px){
  .tracks{grid-template-columns:minmax(0,1fr)}
}

/* ── 1.4 founding benefits (navy band) ── */
.founding__split{align-items:center}
@media (min-width:900px){
  .founding__split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.founding__media{max-width:460px}
.founding__photo{box-shadow:0 36px 64px -32px rgba(0,0,0,.6)}
.founding__credit{margin-top:12px;color:var(--c-on-navy-3)}

.founding__head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.seal{
  flex:none;
  width:136px;
  height:136px;
  color:#F2B77A;
}
.seal svg{width:100%;height:100%;overflow:visible}
.seal__bg{fill:var(--c-navy-800);stroke:rgba(251,247,239,.12);stroke-width:1}
.seal__ring{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55}
.seal__text{
  fill:#FBF7EF;
  font-family:var(--f-sans);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.18em;
}
.seal__mark{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.seal__spin{transform-box:view-box;transform-origin:50% 50%}

/* The seal turns only while the page scrolls where scroll-linked animation is
   supported, and otherwise turns once, briefly, as it is revealed. Either way
   it never keeps moving on its own. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .seal__spin{
      animation:adv-seal-turn linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
  @supports not (animation-timeline:view()){
    .seal.is-in .seal__spin{animation:adv-seal-turn 4.6s var(--ease-out) both}
  }
}
@keyframes adv-seal-turn{from{transform:rotate(-50deg)}to{transform:rotate(70deg)}}

/* Hairline rows: an icon, the benefit, then what it means. */
.benefits{display:grid;margin-top:32px}
.benefits li{
  display:grid;
  grid-template-columns:36px minmax(0,.9fr) minmax(0,1.1fr);
  gap:6px 22px;
  align-items:center;
  padding:20px 0;
  border-top:1px solid var(--c-line);
}
.benefits .ico-tile{width:36px;height:36px;border-radius:10px}
.benefits .ico-tile .ico{width:19px;height:19px}
.benefits p{color:var(--c-ink-2)}
.founding__foot{
  padding-top:18px;
  border-top:1px solid var(--c-line);
  font-weight:650;
  color:var(--c-ink);
}
@media (max-width:899px){
  .founding__media{max-width:420px;margin-bottom:36px}
}
@media (max-width:560px){
  .seal{width:104px;height:104px}
  .founding__head{gap:16px}
  .benefits li{grid-template-columns:36px minmax(0,1fr);column-gap:16px;align-items:start}
  .benefits .ico-tile{grid-row:span 2}
  .benefits h3{align-self:center;min-height:36px;display:flex;align-items:center}
  .benefits p{grid-column:2}
}
/* A landscape crop on phones, so the heading is not a screen away. */
@media (max-width:600px){
  .founding__photo.ratio-4x5{aspect-ratio:3/2}
  .founding__photo img{object-position:50% 28%}
}

/* ── 1.5 expectations ── */
.expect{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  align-items:stretch;
}
.expect__col{
  padding:clamp(26px,3.6vw,48px);
  border:1px solid var(--c-line);
  border-radius:var(--r-xl);
}
.expect__col--ask{background:var(--c-sand);border-color:var(--c-line-2)}
.expect__col--give{background:var(--c-surface);box-shadow:var(--sh-2)}
.expect__col .display-md{margin-bottom:24px;max-width:18ch}
.expect__list li{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:15px 0;
  border-top:1px solid var(--c-line-2);
  color:var(--c-ink-2);
}
.expect__col--give .expect__list li{border-top-color:var(--c-line)}
.expect__list--plain li{grid-template-columns:minmax(0,1fr)}
.expect__list--check .ico{width:20px;height:20px;margin-top:3px;color:var(--c-ok)}
.expect__foot{margin-top:6px;padding-top:16px;border-top:1px solid var(--c-line-2);font-size:15.5px;color:var(--c-ink-3)}
.expect__links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:6px;padding-top:18px;border-top:1px solid var(--c-line)}
@media (max-width:820px){
  .expect{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .expect__col{padding:28px 20px}
  .expect__list li{padding:13px 0;font-size:16px}
  .expect__list--check li{grid-template-columns:22px minmax(0,1fr);gap:12px}
}

/* ── 1.6 how joining works (timeline) ── */
.timeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}
/* The route between the stops: a dashed line that draws across when the
   timeline is revealed, behind the numbered stops. */
.timeline::before{
  content:"";
  position:absolute;
  top:27px;
  left:28px;
  right:calc(25% - 28px);
  height:2px;
  background-image:repeating-linear-gradient(90deg,var(--c-navy-400) 0 7px,transparent 7px 14px);
  transform-origin:left center;
}
.timeline__stop{position:relative;display:grid;gap:10px;align-content:start}
.timeline__num{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:10px;
  border:1.5px solid var(--c-navy);
  border-radius:50%;
  background:var(--c-surface);
  box-shadow:0 0 0 8px var(--c-paper-2);
  font-size:16px;
  font-weight:800;
  color:var(--c-navy);
}
.timeline__stop--end .timeline__num{background:var(--c-navy);color:#FBF7EF}
.timeline__stop--end .ico{stroke-width:2.2;transform:rotate(-90deg)}
.timeline__stop p{color:var(--c-ink-3);max-width:30ch}

@media (prefers-reduced-motion:no-preference){
  .timeline::before{transition:transform 1.4s var(--ease-in-out) .15s}
  .js .timeline:not(.is-in)::before{transform:scaleX(0);animation:ui-reveal-failsafe 0s 4s forwards}
}
@media (max-width:899px){
  .timeline{grid-template-columns:minmax(0,1fr);gap:26px}
  .timeline::before{
    top:28px;
    bottom:28px;
    left:27px;
    right:auto;
    width:2px;
    height:auto;
    background-image:repeating-linear-gradient(180deg,var(--c-navy-400) 0 7px,transparent 7px 14px);
    transform-origin:center top;
  }
  .timeline__stop{grid-template-columns:56px minmax(0,1fr);column-gap:20px;row-gap:4px}
  .timeline__num{grid-row:1 / span 2;margin:0}
  .timeline__stop h3{align-self:end}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .js .timeline:not(.is-in)::before{transform:scaleY(0)}
}

/* ── 1.7 advisor FAQ ── */
/* Matches the landing page FAQ (.qa in home.css): hairlines, the question in
   bold, and a plus in a 30px circle that turns into a cross when open. */
.faq{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(36px,6vw,96px);
  align-items:start;
}
.faq__head{position:sticky;top:calc(var(--header-h) + 40px)}
.faq__head > * + *{margin-top:18px}
.faq__more{font-size:15.5px;color:var(--c-ink-3)}
.faq__list{border-top:1px solid var(--c-line)}
.faq__item{border-bottom:1px solid var(--c-line)}
.faq__item > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 4px 22px 0;
  list-style:none;
  cursor:pointer;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  color:var(--c-ink);
  border-radius:6px;
  transition:color var(--d-1) var(--ease-out);
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > summary::marker{content:""}
.faq__item > summary:hover{color:var(--c-navy)}
.faq__item > summary:focus-visible{outline:2px solid var(--c-navy);outline-offset:4px}
.faq__item > summary .ico{
  box-sizing:border-box;
  width:30px;
  height:30px;
  padding:8px;
  border:1px solid var(--c-line-2);
  border-radius:50%;
  background:var(--c-surface);
  color:var(--c-navy);
  stroke-width:3.2;
  transition:transform var(--d-2) var(--ease-out),border-color var(--d-1) var(--ease-out);
}
.faq__item > summary:hover .ico{border-color:var(--c-navy-400)}
.faq__item[open] > summary .ico{transform:rotate(45deg)}
.faq__answer{max-width:54ch;padding:0 56px 24px 0;font-size:16.5px;line-height:1.65;color:var(--c-ink-2)}
@media (prefers-reduced-motion:no-preference){
  .faq__item[open] .faq__answer{animation:ui-fade var(--d-3) var(--ease-out) both}
}
@media (max-width:899px){
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq__head{position:static}
  .faq__item > summary{font-size:17px}
  .faq__answer{padding-right:0}
}

/* ── 1.8 final call to action ── */
.cta-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--c-navy-950);
  color:var(--c-on-navy-2);
}
.cta-band__bg,
.cta-band__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-band__bg{z-index:-2}
.cta-band__bg img{filter:saturate(.9) sepia(.07) contrast(1.03)}
.cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,rgba(20,26,61,.95) 0%,rgba(20,26,61,.86) 48%,rgba(20,26,61,.66) 100%);
}
.cta-band__inner{
  display:grid;
  justify-items:start;
  gap:22px;
  padding-block:clamp(88px,11vw,152px);
}
.cta-band .kicker{color:#F2B77A}
.cta-band .display-lg{max-width:19ch;color:#FBF7EF}
.cta-band__line{font-size:clamp(17px,1.5vw,19px);color:var(--c-on-navy-2)}
.cta-band .btn{margin-top:10px}
/* body.ui is needed to outrank body.ui .btn in ui.css (outline color and
   white-space:nowrap), which would otherwise win on both counts. */
body.ui .cta-band .btn:focus-visible{outline-color:var(--c-on-navy)}
@media (max-width:480px){
  body.ui .cta-band .btn{width:100%;white-space:normal}
}

/* Room for the fixed mobile call-to-action bar beneath the footer's last line.
   One Apply button per screen: below 900px the hero button, the sticky bar
   and the in-page buttons already put one in every view (the bar steps
   aside while an in-page one shows), so the header's copy goes and the menu
   button takes its place at the end of the row. */
@media (max-width:899px){
  .page-advisors .site-footer{padding-bottom:104px}
  .page-advisors .site-header__actions{display:none}
  .page-advisors .site-header__inner > .nav-toggle{margin-left:auto}
  .page-advisors .sticky-cta p{font-size:15px}
}

/* ══ 2. advisor-apply.html ════════════════════════════════════════════════ */

/* Without script the form cannot upload anything or send its JSON, so it is
   withheld and the <noscript> notice explains why. boot.js sets html.js. */
html:not(.js) .page-apply .apply-form,
html:not(.js) .page-apply .apply-card__foot{display:none}

.apply{padding-block:clamp(20px,3vw,40px) clamp(64px,8vw,104px)}
.apply__grid{
  display:grid;
  grid-template-columns:minmax(290px,360px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}

/* ── 2.1 the rail ── */
.apply-rail{
  position:sticky;
  top:calc(var(--header-h) + 20px);
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:min(700px,calc(100svh - var(--header-h) - 40px));
  overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--c-navy-900);
  color:var(--c-on-navy-2);
  box-shadow:var(--sh-3);
}
.apply-rail__media{position:absolute;inset:0;z-index:-2}
.apply-rail__media picture,
.apply-rail__media img{width:100%;height:100%;object-fit:cover}
.apply-rail__media img{filter:saturate(.85) sepia(.08) contrast(1.02)}
.apply-rail::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(20,26,61,.7) 0%,rgba(20,26,61,.88) 38%,rgba(20,26,61,.97) 100%);
}
.apply-rail__body{display:flex;flex:1;flex-direction:column;padding:32px 30px 28px}
.apply-rail__logo{align-self:flex-start;width:auto;height:22px}
.apply-rail__title{
  margin-top:36px;
  font-family:var(--f-display);
  font-size:clamp(26px,2.4vw,31px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.014em;
  color:#FBF7EF;
}
.apply-rail__count{margin-top:12px;font-size:14px;font-weight:700;color:#F2B77A}
.apply-rail__bar{display:none}

.apply-steps{position:relative;display:grid;gap:2px;margin-top:34px}
.apply-steps::before,
.apply-steps::after{
  content:"";
  position:absolute;
  top:22px;
  bottom:22px;
  left:11px;
  width:2px;
  border-radius:2px;
}
.apply-steps::before{background:rgba(251,247,239,.16)}
.apply-steps::after{
  background:#F2B77A;
  transform-origin:center top;
  transform:scaleY(var(--progress,0));
  transition:transform var(--d-3) var(--ease-out);
}
.apply-steps__item{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:44px;
  font-size:15px;
  font-weight:600;
  color:var(--c-on-navy-3);
  transition:color var(--d-2) var(--ease-out);
}
.apply-steps__item[hidden]{display:none}
.apply-steps__dot{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:2px solid rgba(251,247,239,.34);
  border-radius:50%;
  background:var(--c-navy-900);
  transition:background-color var(--d-2) var(--ease-out),border-color var(--d-2) var(--ease-out),box-shadow var(--d-2) var(--ease-out);
}
.apply-steps__item[data-state=current]{color:#FBF7EF}
.apply-steps__item[data-state=current] .apply-steps__dot{border-color:#F2B77A;box-shadow:0 0 0 5px rgba(242,183,122,.18)}
.apply-steps__item[data-state=current] .apply-steps__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#F2B77A}
.apply-steps__item[data-state=done]{color:var(--c-on-navy-2)}
.apply-steps__item[data-state=done] .apply-steps__dot{
  border-color:#F2B77A;
  background:#F2B77A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2452' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.apply-steps__hint{display:block;font-size:13.5px;font-weight:500;color:var(--c-on-navy-3)}

.apply-rail__note{
  margin-top:auto;
  padding-top:30px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--c-on-navy-2);
}

/* ── 2.2 the form card ── */
.apply-main{min-width:0}
.apply-card{
  padding:clamp(22px,4vw,48px);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
}
.apply-noscript{
  padding:20px 22px;
  border-left:4px solid var(--c-sun);
  border-radius:var(--r-md);
  background:var(--c-sun-100);
  color:var(--c-ink);
}
.apply-noscript h2{font-size:18px;font-weight:750}
.apply-noscript p{margin-top:6px}
.apply-noscript a{color:var(--c-navy);font-weight:650}

.apply-notice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 18px;
  margin-bottom:26px;
  padding:14px 18px;
  border:1px solid var(--c-navy-100);
  border-radius:var(--r-md);
  background:var(--c-navy-50);
  font-size:14.5px;
  color:var(--c-ink-2);
}
.apply-notice[hidden]{display:none}
.page-apply .apply-notice{font-size:15.5px}
.apply-notice p{flex:1 1 280px}

/* Error summary: what is wrong on this step, each item a link to the field. */
.error-summary{
  margin-bottom:28px;
  padding:18px 20px 18px 18px;
  border:1px solid rgba(180,53,43,.32);
  border-left:4px solid var(--c-err);
  border-radius:var(--r-md);
  background:var(--c-err-100);
  color:#6F211A;
}
.error-summary[hidden]{display:none}
.error-summary:focus{outline:2px solid var(--c-err);outline-offset:3px}
.error-summary__title{font-size:16px;font-weight:750;color:#6F211A}
.error-summary__list{display:grid;gap:4px;margin-top:8px;padding-left:20px;list-style:disc}
.error-summary__list li::marker{color:var(--c-err)}
.error-summary__list a{
  color:#6F211A;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:3px;
}
.error-summary__list a:hover{text-decoration-thickness:2px}

/* ── 2.3 steps ── */
.apply-step{min-width:0}
.apply-step[hidden]{display:none}
/* A rendered <legend> shrink-wraps and sits on the fieldset's border line;
   floating it turns it back into an ordinary full-width block. */
.apply-step__head{float:left;width:100%;margin:0 0 12px;padding:0}
.apply-step__head + *{clear:both}
.apply-step__title{margin-top:12px}
.apply-step__title:focus{outline:none}
.apply-step__title:focus-visible{outline:2px solid var(--c-navy);outline-offset:6px;border-radius:4px}
.apply-step__lede{max-width:60ch;font-size:16.5px;color:var(--c-ink-3)}
.apply-step__lede + .tracks__facts{margin-top:-10px}
.apply-step__body{display:grid;gap:28px}
/* Grid cells in a row share a height; keep each group's content at the top
   so a field with a hint and an error beside one without stays aligned. */
.apply .fgroup{align-content:start}
/* The region field is a list or free text depending on the country: the
   control not in use, and the whole field before a country is chosen, are
   hidden. */
.apply .fgroup[hidden],
.apply .select[hidden],
.apply .input[hidden]{display:none}
.apply-step__lede + .apply-sub{padding-top:0;border-top:0}
.apply-step__req{font-size:14.5px;color:var(--c-ink-3)}

/* Page-scoped type and spacing for the form. ui.css stays shared, so the
   larger hints, labels and checkbox rows here apply to this page alone. */
.page-apply .fhint{max-width:58ch;font-size:14.5px}
.page-apply .flabel{font-size:15px}
.page-apply .check{font-size:15.5px}
.page-apply .fgrid{row-gap:26px}

/* Short facts in a step (who can apply, how files are kept) sit in one
   left-aligned column. */
.apply-step .tracks__facts{display:grid;justify-content:start;gap:12px;margin:0}
.doc-facts{display:grid;gap:14px;padding-top:4px}

@media (prefers-reduced-motion:no-preference){
  .apply-step[data-enter=forward]{animation:apply-in-forward var(--d-2) var(--ease-out) both}
  .apply-step[data-enter=back]{animation:apply-in-back var(--d-2) var(--ease-out) both}
}
@keyframes apply-in-forward{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes apply-in-back{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* Sub-sections within a long step. */
.apply-sub{
  display:grid;
  gap:22px;
  padding-top:28px;
  border-top:1px solid var(--c-line);
}
.apply-sub:first-child{padding-top:0;border-top:0}
.apply-sub__title{font-size:13px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3)}

/* Groups built on <fieldset>: the legend is the label. */
.fset{margin:0;padding:0;border:0;min-width:0}
.fset > legend{float:left;width:100%;padding:0;margin:0 0 8px}
.fset > legend + *{clear:both}
.fset > * + *:not(legend){margin-top:8px}
.fset > .fhint + *{margin-top:12px}

.fmeta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fcount{
  flex:none;
  margin-left:auto;
  font-size:13px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--c-ink-3);
}
.fcount[data-state=short]{color:var(--c-warn)}
.fcount[data-state=full]{color:var(--c-err)}

.input--years{max-width:140px}

/* Inline error rows carry a small icon ahead of the message. */
.ferror .ico{width:16px;height:16px;margin-top:2px;stroke-width:2}
.ferror .fix-btn{margin-left:6px}
.ferror__text{flex:1;min-width:0}
.ferror__action{display:block;margin-top:8px}

/* ── 2.4 track choice ── */
.track-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.track-option{padding:24px 22px 22px 56px;align-content:start}
.track-option > label{font-size:18px;font-weight:750;line-height:1.3;color:var(--c-ink);cursor:pointer}
/* The label stretches over the whole card, so a click anywhere selects it. */
.track-option > label::after{content:"";position:absolute;inset:0;border-radius:inherit}
.track-option__desc{font-size:15px;color:var(--c-ink-2)}
/* Where each track is open, one short line with the map icon. */
.track-option__where{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--c-ink-3);
}
.track-option__where .ico{flex:none;width:16px;height:16px;color:var(--c-navy)}
.track-option__need{
  margin-top:6px;
  padding-top:14px;
  border-top:1px dashed var(--c-line-2);
  font-size:12px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-ink-3);
}
.track-option .checklist li{font-size:15.5px}
/* What each track needs shows once that card is chosen. Until then it is
   hidden visually only, so the description the radio points at still reads
   it in full. */
.track-option:not(:has(> input:checked)) .track-option__need,
.track-option:not(:has(> input:checked)) .checklist{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media (prefers-reduced-motion:no-preference){
  .track-option:has(> input:checked) .track-option__need,
  .track-option:has(> input:checked) .checklist{animation:ui-fade var(--d-2) var(--ease-out) both}
}
.apply-step__note{max-width:58ch;font-size:15px;color:var(--c-ink-3)}
@media (max-width:640px){
  .track-options{grid-template-columns:minmax(0,1fr)}
}
/* The text under the title uses the card's full width, not just the column
   beside the radio. */
.track-option__more{margin-left:-34px}
@media (max-width:480px){
  .track-option{padding:20px 18px 20px 52px}
}

/* ── 2.5 chips and tags ── */
.chip-group{display:flex;flex-wrap:wrap;gap:10px}
.chip-group .chip{min-height:42px;padding:0 16px;font-size:14.5px}
.chip-group .chip[aria-pressed=true]::before{
  content:"";
  width:12px;
  height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7EF' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.chip-group[data-invalid] .chip:not([aria-pressed=true]){--bd:var(--c-err)}

.tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:7px 8px;
  border:1px solid var(--c-ink-4);
  border-radius:var(--r-sm);
  background:var(--c-surface);
  box-shadow:var(--sh-1);
  cursor:text;
  transition:border-color var(--d-1) var(--ease-out),box-shadow var(--d-1) var(--ease-out);
}
.tags:hover{border-color:var(--c-ink-3)}
.tags:focus-within{border-color:var(--c-navy);box-shadow:var(--ring)}
.tags[data-invalid]{border-color:var(--c-err);box-shadow:0 0 0 4px rgba(180,53,43,.12)}
.tags__list{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.tags__list:empty{display:none}
.tag{
  display:inline-flex;
  align-items:center;
  gap:2px;
  max-width:100%;
  min-height:34px;
  padding:0 3px 0 12px;
  border:1px solid var(--c-navy-100);
  border-radius:var(--r-pill);
  background:var(--c-navy-50);
  color:var(--c-navy);
  font-size:14px;
  font-weight:650;
  line-height:1.2;
}
.tag__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag__remove{
  --bg:transparent;
  --fg:var(--c-navy);
  --bg-hover:var(--c-navy-100);
  display:grid;
  flex:none;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
}
.tag__remove .ico{width:14px;height:14px;stroke-width:2.4}
.tags__input{
  flex:1 1 150px;
  min-width:120px;
  min-height:36px;
  margin:0;
  padding:4px 6px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--c-ink);
  font-family:var(--f-sans);
  font-size:16px;
  font-weight:500;
}
.tags__input::placeholder{color:var(--c-ink-3);font-weight:400}
.tags__input:focus-visible{outline:none}

/* ── 2.6 service and registration groups ── */
.service-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.service-option{gap:4px;padding:18px 18px 18px 52px;align-content:start}
.service-option > input{top:20px;left:18px}
.service-option__title{font-size:15.5px;font-weight:700;color:var(--c-ink)}
.service-option__desc{font-size:15px;color:var(--c-ink-3)}
@media (max-width:640px){
  .service-options{grid-template-columns:minmax(0,1fr)}
}

.sot-list{display:grid;gap:12px}
.sot-list:empty{display:none}
.sot-row{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;
  gap:12px 14px;
  align-items:end;
  margin:0;
  padding:16px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-paper);
  min-width:0;
}
.sot-row > legend:not(.visually-hidden){float:left;width:100%;padding:0;font-size:13px;font-weight:700;color:var(--c-ink-3)}
.sot-row > legend + *{clear:both}
.sot-row > .ferror{grid-column:1 / -1}
.sot-row .btn{min-height:48px}
.sot-add{justify-self:start}
@media (max-width:640px){
  .sot-row{grid-template-columns:minmax(0,1fr)}
  .sot-row .btn{justify-self:start;min-height:40px}
}

/* ── 2.7 document uploads ── */
.uploads{display:grid;gap:16px}
.upload{
  position:relative;
  display:grid;
  gap:16px;
  padding:20px;
  border:1px solid var(--c-line-2);
  border-radius:var(--r-lg);
  background:var(--c-surface);
  transition:border-color var(--d-1) var(--ease-out),background-color var(--d-1) var(--ease-out),box-shadow var(--d-1) var(--ease-out);
}
.upload[hidden]{display:none}
.upload[data-drag]{border-color:var(--c-navy);background:var(--c-navy-50);box-shadow:0 0 0 4px rgba(46,58,125,.1)}
.upload[data-state=error]{border-color:rgba(180,53,43,.55)}
.upload[data-state=done]{border-color:var(--c-line)}
.upload__head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.upload__title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:16.5px;font-weight:750;color:var(--c-ink)}
.upload__head .fhint{margin-top:4px}

.upload__zone{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 12px;
  min-height:92px;
  padding:18px;
  border:1.5px dashed var(--c-line-2);
  border-radius:var(--r-md);
  background:var(--c-paper);
  color:var(--c-ink-2);
  font-size:15px;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--d-1) var(--ease-out),background-color var(--d-1) var(--ease-out);
}
.upload__zone:hover{border-color:var(--c-navy-400);background:var(--c-navy-50)}
.upload__zone strong{color:var(--c-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.upload__zone .ico{width:24px;height:24px;color:var(--c-navy)}
.upload__input:focus-visible + .upload__zone{outline:2px solid var(--c-navy);outline-offset:3px;border-color:var(--c-navy)}
.upload__pick[hidden]{display:none}

.upload__file{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:12px 12px 12px 14px;
  border:1px solid var(--c-line);
  border-radius:var(--r-md);
  background:var(--c-paper);
}
.upload__file[hidden]{display:none}
.upload__thumb{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  overflow:hidden;
  border-radius:12px;
  background:var(--c-navy-50);
  color:var(--c-navy);
}
.upload__thumb img{width:100%;height:100%;object-fit:cover}
.upload__thumb img[hidden]{display:none}
.upload__thumb[data-has-preview] .ico{display:none}
.upload--photo .upload__thumb{width:64px;height:64px;border-radius:50%}
.upload__info{min-width:0}
.upload__name{overflow:hidden;font-weight:650;color:var(--c-ink);text-overflow:ellipsis;white-space:nowrap}
.upload__meta{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--c-ink-3)}
.upload__meta .ico{width:15px;height:15px}
.upload[data-state=done] .upload__meta{color:var(--c-ok)}
.upload[data-state=error] .upload__meta{color:var(--c-err)}
.upload__bar{height:6px;margin-top:8px;overflow:hidden;border-radius:6px;background:var(--c-line)}
.upload__bar[hidden]{display:none}
.upload__bar > span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--c-navy);
  transform-origin:left center;
  transform:scaleX(var(--progress,0));
  transition:transform var(--d-2) linear;
}
.upload__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.upload__actions .btn[hidden]{display:none}
@media (max-width:560px){
  .upload{padding:16px}
  .upload__file{grid-template-columns:auto minmax(0,1fr)}
  .upload__actions{grid-column:1 / -1;justify-content:flex-start}
}
/* On a phone the icon tile gives its width back to the text, and the file
   actions read as one row of text buttons. body.ui is needed to outrank
   body.ui .btn in ui.css. */
@media (max-width:480px){
  .upload__head{grid-template-columns:minmax(0,1fr)}
  .upload__head .ico-tile{display:none}
  .upload__actions{gap:2px 4px;margin-left:-8px}
  body.ui .upload__actions .btn{
    --bg:transparent;
    --bd:transparent;
    --sh:none;
    min-height:36px;
    padding:0 8px;
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  }
}

/* ── 2.8 review ── */
.review{display:grid;gap:14px}
.review-block{padding:20px 22px;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-paper)}
.review-block__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.review-block__head h3{font-size:16.5px;font-weight:750}
.review-dl{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:9px 20px;font-size:15px;line-height:1.5}
.review-dl dt{font-weight:600;color:var(--c-ink-3)}
.review-dl dd{min-width:0;color:var(--c-ink);overflow-wrap:anywhere;white-space:pre-line}
.review-dl dd.is-empty{color:var(--c-ink-3);font-style:italic}
.review-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:6px}
/* On a phone the label and answer stay side by side; a long answer (the
   About you text) takes the full width under its label. */
@media (max-width:560px){
  .review-block{padding:16px}
  .review-dl{grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:8px 14px;font-size:16px}
  .review-dl .is-long{grid-column:1 / -1}
  .review-dl dt.is-long{margin-bottom:-4px}
}

.apply-checks{
  display:grid;
  gap:16px;
  margin:0;
  padding:22px;
  border:1px solid var(--c-navy-100);
  border-radius:var(--r-lg);
  background:var(--c-navy-50);
}
.apply-checks > legend{float:left;width:100%;padding:0;margin-bottom:4px;font-size:15px;font-weight:750;color:var(--c-ink)}
.apply-checks > legend + *{clear:both}
.apply-checks .fgroup{gap:6px}
.apply-checks .ferror{padding-left:32px}

/* ── 2.9 navigation and status ── */
.apply-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--c-line);
}
.apply-nav__next{margin-left:auto}
.apply-nav .btn[hidden]{display:none}
.apply-status{min-height:1.5em;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--c-ink-3)}
.apply-status:empty{display:none}
.apply-status[data-state=error]{color:var(--c-err)}
.apply-card__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:10px 20px;
  margin-top:18px;
  padding-inline:4px;
  font-size:13.5px;
  color:var(--c-ink-3);
}
.apply-card__foot[hidden]{display:none}
.text-btn{
  --bg:transparent;
  --fg:var(--c-navy);
  --fg-hover:var(--c-navy-800);
  padding:4px 2px;
  border-radius:4px;
  font-size:13.5px;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
}
.text-btn:hover{text-decoration-color:currentColor}
@media (max-width:480px){
  .apply-nav .apply-nav__next{flex:1 1 auto}
}

/* ── 2.10 success ── */
.apply-done{padding:clamp(20px,4vw,48px) clamp(4px,3vw,32px);text-align:center}
.apply-done[hidden]{display:none}
.apply-done__stamp{display:flex;justify-content:center}
.apply-done__stamp svg{width:138px;height:138px;transform:rotate(-8deg)}
@media (prefers-reduced-motion:no-preference){
  .apply-done:not([hidden]) .apply-done__stamp svg{animation:ui-stamp .62s .12s cubic-bezier(.2,1.42,.45,1) both}
  .apply-done:not([hidden]) .apply-done__rise{animation:ui-rise .56s var(--ease-out) both;animation-delay:calc(.45s + var(--i,0) * 80ms)}
}
.apply-done .lede{--i:0}
.apply-next li:nth-child(1){--i:1}
.apply-next li:nth-child(2){--i:2}
.apply-next li:nth-child(3){--i:3}
.apply-done__cta{--i:4}
.apply-done__title{margin-top:24px}
.apply-done__title:focus{outline:none}
.apply-done .lede{margin:14px auto 0;max-width:46ch}
.apply-done__addr{font-weight:700;color:var(--c-navy);overflow-wrap:anywhere}
.apply-next{
  display:grid;
  max-width:480px;
  margin:34px auto 0;
  text-align:left;
  counter-reset:next;
}
.apply-next li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:14px;
  padding:16px 0;
  border-top:1px dashed var(--c-line-2);
}
.apply-next li:last-child{border-bottom:1px dashed var(--c-line-2)}
.apply-next li::before{
  counter-increment:next;
  content:counter(next,decimal-leading-zero);
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--c-navy-50);
  font-size:13px;
  font-weight:800;
  color:var(--c-navy);
}
.apply-next strong{display:block;color:var(--c-ink)}
.apply-next span{font-size:16px;color:var(--c-ink-3)}
.apply-done__cta{margin-top:34px}

/* The repeat-application case, one click away rather than in the flow. */
.apply-done__more{--i:5;max-width:46ch;margin:28px auto 0;font-size:15px;line-height:1.55;color:var(--c-ink-3)}
.apply-done__more > summary{
  display:inline-block;
  padding:2px 4px;
  border-radius:4px;
  list-style:none;
  cursor:pointer;
  font-weight:650;
  color:var(--c-navy);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
}
.apply-done__more > summary::-webkit-details-marker{display:none}
.apply-done__more > summary::marker{content:""}
.apply-done__more > summary:hover{text-decoration-color:currentColor}
.apply-done__more > summary:focus-visible{outline:2px solid var(--c-navy);outline-offset:3px}
.apply-done__more p{margin-top:10px}

/* ── 2.11 small screens: the rail becomes a progress band ── */
@media (max-width:899px){
  .apply__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .apply-rail{position:relative;top:auto;min-height:0;border-radius:var(--r-lg)}
  .apply-rail__media{display:none}
  .apply-rail::before{background:linear-gradient(120deg,var(--c-navy-900) 0%,var(--c-navy-800) 100%)}
  .apply-rail__body{padding:18px 20px 20px}
  .apply-rail__logo,
  .apply-steps{display:none}
  .apply-rail__title{margin-top:0;font-size:22px}
  .apply-rail__count{margin-top:6px;font-size:13.5px}
  .apply-rail__bar{
    display:block;
    height:5px;
    margin-top:14px;
    overflow:hidden;
    border-radius:5px;
    background:rgba(251,247,239,.16);
  }
  .apply-rail__bar > span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:#F2B77A;
    transform-origin:left center;
    transform:scaleX(var(--progress,0));
    transition:transform var(--d-3) var(--ease-out);
  }
  /* The band already shows the step count and bar, so the step's own
     "Step N of 6" is read by screen readers only, and the note shows only
     when progress cannot be saved. */
  .apply-rail__note{display:none;margin-top:12px;padding-top:0;font-size:14px}
  .apply-rail__note[data-unsaved]{display:block}
  .apply-step__head [data-step-kicker]{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
  }
  .apply-step__title{margin-top:0}
  .apply-card{border-radius:var(--r-lg)}
}
@media (max-width:560px){
  .apply-card{padding:22px 16px}
  .apply-checks{padding:18px 16px}
  .page-apply .fhint{font-size:15px;line-height:1.5}
  .page-apply .flabel{font-size:15.5px}
  .page-apply .check{font-size:16px}
}

/* ══ phones: 16px copy and 44px tap targets on both advisor pages ═════════ */
@media (max-width:599px){
  .track-option__desc,
  .apply-step__note,
  .service-option__desc{font-size:16px;line-height:1.55}
  body.ui:is(.page-advisors,.page-apply) .btn-sm{min-height:44px}
  .page-apply .text-btn{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;font-size:14.5px}
  .apply-done__more > summary{display:inline-flex;align-items:center;min-height:44px}
  .page-apply .chip-group .chip{min-height:44px}
  .page-apply .tags__input{min-height:44px}
  .page-apply .stepper{grid-template-columns:44px minmax(0,1fr) 44px}
  .page-apply .stepper__btn{width:44px;height:44px}
  :is(.page-advisors,.page-apply) .site-footer nav{gap:0}
  :is(.page-advisors,.page-apply) .site-footer nav a{padding-block:10px}
  :is(.page-advisors,.page-apply) .site-header__logo{padding-block:10px}
  .page-advisors .expect__links .link{display:inline-flex;align-items:center;min-height:44px}
}

/* ══ 3. advisor-terms.html ════════════════════════════════════════════════ */

.doc-page{padding-block:clamp(20px,3vw,40px) clamp(64px,8vw,104px)}
.doc-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(28px,4vw,52px) clamp(24px,4vw,52px) clamp(96px,10vw,132px);
  border-radius:var(--r-xl);
  background:var(--c-navy-900);
  color:var(--c-on-navy-2);
}
.doc-hero__bg,
.doc-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.doc-hero__bg{z-index:-2}
.doc-hero__bg img{filter:saturate(.9) sepia(.07) contrast(1.03)}
.doc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,rgba(20,26,61,.95) 0%,rgba(20,26,61,.84) 55%,rgba(20,26,61,.7) 100%);
}
.doc-hero .kicker{color:#F2B77A}
.doc-hero__line{margin-top:14px;max-width:52ch;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#FBF7EF}

.doc-layout{
  position:relative;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  margin-top:calc(-1 * clamp(64px,7vw,92px));
  padding-inline:clamp(0px,2vw,28px);
}
.doc-toc{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  align-self:start;
  max-height:calc(100svh - var(--header-h) - 48px);
  margin-top:clamp(88px,9vw,116px);
  overflow:auto;
  overscroll-behavior:contain;
}
.doc-toc__title{
  margin-bottom:10px;
  padding-left:12px;
  font-size:12px;
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-ink-3);
}
.doc-toc ol{display:grid;gap:1px}
.doc-toc a{
  display:block;
  padding:6px 12px;
  border-left:2px solid transparent;
  border-radius:0 8px 8px 0;
  font-size:14px;
  line-height:1.35;
  color:var(--c-ink-2);
  text-decoration:none;
  transition:color var(--d-1) var(--ease-out),background-color var(--d-1) var(--ease-out),border-color var(--d-1) var(--ease-out);
}
.doc-toc a:hover{background:rgba(46,58,125,.06);color:var(--c-navy)}

/* ui.js scroll spy sets data-spy-active on .doc-layout to the section in the
   middle of the viewport; the matching contents link is marked here. */
.doc-layout[data-spy-active=who-we-are] .doc-toc a[href="#who-we-are"],
.doc-layout[data-spy-active=scope] .doc-toc a[href="#scope"],
.doc-layout[data-spy-active=eligibility] .doc-toc a[href="#eligibility"],
.doc-layout[data-spy-active=application] .doc-toc a[href="#application"],
.doc-layout[data-spy-active=verification] .doc-toc a[href="#verification"],
.doc-layout[data-spy-active=no-guarantee] .doc-toc a[href="#no-guarantee"],
.doc-layout[data-spy-active=benefits] .doc-toc a[href="#benefits"],
.doc-layout[data-spy-active=commitments] .doc-toc a[href="#commitments"],
.doc-layout[data-spy-active=independent] .doc-toc a[href="#independent"],
.doc-layout[data-spy-active=agreement] .doc-toc a[href="#agreement"],
.doc-layout[data-spy-active=confidentiality] .doc-toc a[href="#confidentiality"],
.doc-layout[data-spy-active=content] .doc-toc a[href="#content"],
.doc-layout[data-spy-active=information] .doc-toc a[href="#information"],
.doc-layout[data-spy-active=communications] .doc-toc a[href="#communications"],
.doc-layout[data-spy-active=withdrawing] .doc-toc a[href="#withdrawing"],
.doc-layout[data-spy-active=ending] .doc-toc a[href="#ending"],
.doc-layout[data-spy-active=changes] .doc-toc a[href="#changes"],
.doc-layout[data-spy-active=liability] .doc-toc a[href="#liability"],
.doc-layout[data-spy-active=indemnity] .doc-toc a[href="#indemnity"],
.doc-layout[data-spy-active=law] .doc-toc a[href="#law"],
.doc-layout[data-spy-active=general] .doc-toc a[href="#general"],
.doc-layout[data-spy-active=contact] .doc-toc a[href="#contact"],
.doc-toc a[aria-current=location]{
  border-left-color:var(--c-navy);
  background:rgba(46,58,125,.06);
  color:var(--c-navy);
  font-weight:650;
}

/* The article reuses the legacy .doc typography from styles.css, so these
   terms read as the same family as terms.html and privacy.html. The rules
   here only give it the new page's surface and a slightly larger measure. */
.doc-article{
  min-width:0;
  padding:clamp(24px,5vw,64px);
  border:1px solid var(--c-line);
  border-radius:var(--r-xl);
  background:var(--c-surface);
  box-shadow:var(--sh-2);
}
.page-doc .doc p,
.page-doc .doc li{font-size:15.5px}
.page-doc .doc section{scroll-margin-top:calc(var(--header-h) + 16px)}
.page-doc .doc .tldr{background:var(--c-paper)}
.page-doc .doc .tldr li{font-size:15px}
.page-doc .doc .btn-quiet{font-size:14px}

.doc-contents{display:none}
.doc-contents > summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--c-line-2);
  border-radius:10px;
  list-style:none;
  cursor:pointer;
  font-size:14.5px;
  font-weight:700;
  color:var(--c-navy);
}
.doc-contents > summary::-webkit-details-marker{display:none}
.doc-contents > summary::marker{content:""}
.doc-contents > summary .ico{transition:transform var(--d-2) var(--ease-out)}
.doc-contents[open] > summary .ico{transform:rotate(180deg)}
.page-doc .doc .doc-contents ol{margin-top:12px;padding-left:22px}
.page-doc .doc .doc-contents li{margin-top:4px;font-size:15px}

@media (max-width:959px){
  .doc-layout{grid-template-columns:minmax(0,1fr);padding-inline:0}
  .doc-toc{display:none}
  .doc-contents{display:block;margin-top:26px}
}