.route-page .application-main { padding-block-start: var(--space-8); }
.route-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--space-12); padding-block: var(--space-8) var(--space-12); }
.route-hero__copy { display: grid; gap: var(--space-5); }
.route-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); color: var(--color-text-accent); line-height: 1.2; text-wrap: balance; }
.route-lead { font-size: var(--text-lg); color: var(--color-text-secondary); max-inline-size: 48ch; }
.route-back { color: var(--color-text-accent); text-underline-offset: .25em; }
.route-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.route-note { font-size: var(--text-sm); color: var(--color-text-secondary); }
.route-hero__image { margin: 0; }
.route-hero__image img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius-xl); }
.route-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-xl); background: var(--color-surface-lavender); padding: var(--space-7); gap: var(--space-6); }
.route-facts dt { color: var(--color-text-secondary); font-size: var(--text-sm); }
.route-facts dd { margin: 0; margin-block-start: var(--space-2); font-weight: 700; color: var(--color-text-accent); }
/* Match the homepage section jump links, including mobile spacing and focus. */
.route-navigation { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); border-block-end: var(--border-width-hairline) solid var(--color-border); padding-block: var(--space-5) var(--space-8); text-align: center; }
.route-navigation a { display: grid; flex: 0 1 15rem; place-items: center; min-block-size: var(--space-12); padding-block: var(--space-3); padding-inline: var(--space-4); border: var(--border-width-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-lavender); color: var(--color-text-accent); font-size: var(--text-sm); font-weight: 700; text-align: center; text-decoration: none; }
.route-navigation a:hover { border-color: var(--color-action-primary); text-decoration: underline; text-underline-offset: var(--space-1); }
.route-navigation a:focus-visible { outline-offset: calc(var(--space-1) / 2); }
@media (max-width: 47.999rem) {
  .route-navigation { gap: var(--space-2); padding-block: var(--space-4) var(--space-7); }
  .route-navigation a { flex-basis: min(100%, 18rem); min-block-size: var(--space-14); padding-inline: var(--space-2); }
}
.route-detail-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-12); padding-block: var(--space-12); }
.route-page h2 { color: var(--color-text-accent); font-size: var(--text-2xl); }
.route-benefits ol { list-style: none; margin: 0; padding: 0; }
.route-benefits li { display: flex; align-items: start; gap: var(--space-5); padding-block: var(--space-6); border-block-end: 1px solid var(--color-border); }
.route-benefits li > span { color: var(--color-text-gold-safe); font-weight: 700; }
.route-expectations { align-self: start; padding: var(--space-7); border-radius: var(--radius-xl); background: var(--color-surface-accent); display: grid; gap: var(--space-4); }
.route-expectations h2 { font-size: var(--text-xl); }
.route-preparation { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); padding: var(--space-8); background: var(--color-surface-lavender); border-radius: var(--radius-xl); }
.route-preparation > div { display: grid; align-content: start; gap: var(--space-3); }
.route-preparation li + li { margin-block-start: var(--space-4); }
.route-application { padding-block: var(--space-12); }
.route-application__intro { display: grid; gap: var(--space-3); max-inline-size: 65ch; margin-block-end: var(--space-8); }
.route-page .application-heading { display: none; }
.route-page :is(#route-details, #route-prepare, #route-application) { scroll-margin-block-start: 8rem; }
.route-page .route-preview-note { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-accent); }
.financial-readiness { display: grid; gap: var(--space-5); max-inline-size: 58rem; }
.financial-readiness .application-readiness-list { display: grid; gap: var(--space-3); }
.application-cta { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(var(--space-6), 5vw, var(--space-12)); margin-block-start: var(--space-2); padding: clamp(var(--space-6), 5vw, var(--space-10)); border-radius: var(--radius-xl); overflow: hidden; color: var(--color-text-inverse); background: linear-gradient(135deg, var(--color-surface-inverse), var(--color-action-primary)); box-shadow: var(--elevation-2); }
.application-cta::before { position: absolute; z-index: -1; inset-block-start: -6rem; inset-inline-end: -4rem; inline-size: 15rem; block-size: 15rem; border: 2.25rem solid color-mix(in srgb, var(--color-surface) 8%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.application-cta::after { position: absolute; z-index: -1; inset-block-end: 0; inset-inline-start: 0; inline-size: 38%; block-size: var(--space-1); background: var(--color-accent); content: ""; }
.application-cta__content { display: grid; gap: var(--space-3); max-inline-size: 48rem; }
.application-cta__eyebrow { color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.application-cta h2, .application-cta h3 { max-inline-size: 24ch; color: inherit; font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); line-height: 1.2; text-wrap: balance; }
.application-cta--direct { margin-block-start: var(--space-8); }
.application-cta--direct[hidden] { display: none; }
.application-cta__description { max-inline-size: 62ch; color: color-mix(in srgb, var(--color-text-inverse) 88%, transparent); line-height: 1.75; }
.application-cta__note { display: flex; align-items: center; gap: var(--space-2); color: color-mix(in srgb, var(--color-text-inverse) 76%, transparent); font-size: var(--text-sm); }
.application-cta__note::before { flex: none; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--color-accent); content: ""; }
.application-cta__action { display: grid; justify-items: stretch; min-inline-size: min(100%, 15rem); }
.application-cta__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-block-size: 3.5rem; padding-inline: var(--space-6); border-color: var(--color-accent); color: var(--color-text-accent); background: var(--color-accent); box-shadow: 0 .75rem 2rem color-mix(in srgb, #000 18%, transparent); }
.application-cta__button:not(:disabled):hover { border-color: var(--color-surface); background: var(--color-surface); transform: translateY(-2px); }
.application-cta__button:disabled { border-color: color-mix(in srgb, var(--color-surface) 28%, transparent); color: color-mix(in srgb, var(--color-text-inverse) 58%, transparent); background: color-mix(in srgb, var(--color-surface) 12%, transparent); opacity: 1; cursor: not-allowed; box-shadow: none; }
/* Standalone readiness button sits on a light surface. */
.application-intro-screen > .application-cta__button { justify-self: start; max-inline-size: 100%; box-shadow: none; }
.application-intro-screen > .application-cta__button:disabled { border-color: var(--color-border); color: var(--color-text-muted); background: var(--color-surface-muted); }
.application-intro-screen > .application-cta__button:not(:disabled):hover { border-color: var(--color-text-accent); background: var(--color-surface-accent); }

.application-cta__button svg { inline-size: 1.2rem; block-size: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) var(--ease-standard); }
.application-cta__button:not(:disabled):hover svg { transform: translateX(.2rem); }
[dir="rtl"] .application-cta__button svg { transform: scaleX(-1); }
[dir="rtl"] .application-cta__button:not(:disabled):hover svg { transform: scaleX(-1) translateX(.2rem); }
.financial-form .choice-group--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.financial-form .consent-list { display: grid; gap: var(--space-3); }
.financial-review { margin-block-start: var(--space-6); }
.financial-form .review-section__edit { border: 0; padding: var(--space-2); color: var(--color-text-accent); background: transparent; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 55rem) {
  .route-hero, .route-detail-layout, .route-preparation { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .route-hero__image { max-inline-size: 36rem; }
  .route-facts { grid-template-columns: minmax(0, 1fr); }
  .route-facts > div + div { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-4); }
  .route-preparation { padding: var(--space-5); }
  .application-cta { grid-template-columns: minmax(0, 1fr); }
  .application-cta__action { justify-items: start; min-inline-size: 0; }
  .financial-form .choice-group--grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) {
  .application-cta__action,
  .application-cta__button { inline-size: 100%; }
}

/* September 2026 growth questionnaire: shared design, logical RTL spacing. */
.growth-programme-overview { display: grid; gap: var(--space-4); padding-block-end: var(--space-6); border-block-end: 1px solid var(--color-border); min-inline-size: 0; }
.growth-programme-overview h3 { color: var(--color-text-accent); font-size: var(--text-xl); }
.growth-programme-overview p, .growth-programme-overview li { line-height: 1.8; overflow-wrap: break-word; }
.growth-programme-overview ul { display: grid; gap: var(--space-3); padding-inline-start: var(--space-5); }

/* Programme-details readiness screen: header band, highlight cards and checklist cards. */
.route-page .application-intro-screen { --intro-pad: clamp(var(--space-5), 4vw, var(--space-10)); gap: var(--space-8); padding: var(--intro-pad); overflow: hidden; box-shadow: var(--elevation-1); }
.route-page .application-intro-screen__header { position: relative; gap: var(--space-3); max-inline-size: none; margin-block-start: calc(-1 * var(--intro-pad)); margin-inline: calc(-1 * var(--intro-pad)); padding: var(--intro-pad); padding-block-end: var(--space-8); border-block-end: var(--border-width-hairline) solid var(--color-border); background: var(--color-surface-lavender); }
.route-page .application-intro-screen__header::after { position: absolute; inset-block-end: calc(-1 * var(--border-width-hairline)); inset-inline-start: var(--intro-pad); inline-size: var(--space-16); block-size: var(--space-1); border-radius: var(--radius-pill); background: var(--color-accent); content: ""; }
.route-page .application-intro-screen__header > * { max-inline-size: 62ch; }
.route-page .application-intro-screen__header .eyebrow { color: var(--color-text-gold-safe); }
.route-page .application-intro-screen__header h2 { font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl)); line-height: 1.25; text-wrap: balance; }
.route-page .application-intro-screen__header p:not(.eyebrow) { color: var(--color-text-secondary); line-height: 1.8; }

.route-page .growth-programme-overview { gap: var(--space-6); padding-block-end: var(--space-8); }
.growth-programme-overview__intro { display: grid; gap: var(--space-4); max-inline-size: 72ch; }
.growth-programme-overview h3 { line-height: 1.35; text-wrap: balance; }
.growth-programme-overview__lead { color: var(--color-text-secondary); }
.growth-programme-overview__dates { display: flex; align-items: center; gap: var(--space-3); justify-self: start; max-inline-size: 100%; padding-block: var(--space-2); padding-inline: var(--space-4); border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); border-radius: var(--radius-lg); background: var(--color-surface-accent); color: var(--color-text-primary); font-size: var(--text-sm); font-weight: 700; }
.growth-programme-overview .growth-programme-overview__dates p { line-height: 1.5; }
.growth-programme-overview__dates svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: var(--color-text-gold-safe); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.growth-programme-overview .growth-programme-overview__highlights { counter-reset: overview-highlight; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.growth-programme-overview__highlights li { counter-increment: overview-highlight; position: relative; padding: var(--space-5); padding-block-start: calc(var(--space-5) + var(--space-10) + var(--space-3)); border: var(--border-width-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-subtle); font-size: var(--text-sm); }
.growth-programme-overview__highlights li::before { position: absolute; inset-block-start: var(--space-5); inset-inline-start: var(--space-5); display: grid; place-items: center; inline-size: var(--space-10); block-size: var(--space-10); border-radius: 50%; background: var(--color-surface-lavender); color: var(--color-text-accent); font-weight: 800; content: counter(overview-highlight, decimal-leading-zero); }
.growth-programme-overview__commitment { padding-block: var(--space-4); padding-inline: var(--space-5); border-inline-start: var(--space-1) solid var(--color-accent); border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); background: var(--color-surface-accent); color: var(--color-text-primary); font-weight: 600; }
.growth-programme-overview__criteria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: var(--text-sm); }

.route-page .application-intro-screen__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: var(--space-6); }
.route-page .application-intro-screen__section { gap: var(--space-4); padding: clamp(var(--space-5), 3vw, var(--space-8)); border: var(--border-width-hairline) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.route-page .application-intro-screen__section:first-child { border-color: transparent; background: var(--color-surface-lavender); }
.route-page .application-intro-screen__section p { color: var(--color-text-secondary); line-height: 1.75; }
.route-page .application-intro-screen__list { gap: var(--space-3); padding: 0; list-style: none; }
.route-page .application-intro-screen__list li { position: relative; min-block-size: var(--space-6); padding-inline-start: var(--space-9); line-height: 1.6; }
.route-page .application-intro-screen__list li::before,
.route-page .application-intro-screen__list li::after { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: var(--space-6); block-size: var(--space-6); content: ""; }
.route-page .application-intro-screen__list li::before { border-radius: 50%; background: var(--color-surface); box-shadow: var(--elevation-1); }
.route-page .application-intro-screen__list li::after { background: var(--color-action-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 70% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 70% no-repeat; }

.readiness-card__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.readiness-meter { --readiness-progress: 0%; position: relative; display: grid; flex: none; place-items: center; inline-size: 3.75rem; block-size: 3.75rem; border-radius: 50%; background: conic-gradient(var(--color-action-primary) var(--readiness-progress), var(--color-surface-muted) 0); color: var(--color-text-accent); font-size: var(--text-sm); font-weight: 800; }
.readiness-meter::before { position: absolute; inset: var(--space-1); border-radius: 50%; background: var(--color-surface); content: ""; }
.readiness-meter.is-complete::before { background: var(--color-surface-lavender); }
.readiness-meter > span { position: relative; }
.route-page .application-intro-screen .application-readiness-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.route-page .application-readiness-list .choice { min-block-size: var(--space-13); padding-block: var(--space-3); padding-inline: var(--space-4); border-color: var(--color-border); border-radius: var(--radius-md); line-height: 1.55; transition: border-color 150ms ease, background-color 150ms ease; }
.route-page .application-readiness-list .choice:hover { border-color: var(--color-action-primary); background: var(--color-surface-subtle); }
.route-page .application-readiness-list .choice:has(.choice__input:checked) { border-color: var(--color-action-primary); background: var(--color-surface-lavender); }
.route-page .application-readiness-list .choice__input { border-color: var(--color-border-strong); border-radius: var(--radius-sm); }
.route-page .application-readiness-list .choice__input:checked { border-color: var(--color-action-primary); background: var(--color-action-primary); color: var(--color-action-primary-text); }
.route-page .application-readiness-list .choice__input::before { inline-size: .8rem; block-size: .8rem; border-radius: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.route-page .application-intro-screen .support-note { max-inline-size: none; padding: var(--space-4); border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); border-radius: var(--radius-md); background: var(--color-surface-accent); color: var(--color-text-primary); line-height: 1.7; }

.route-page .application-intro-screen > .application-cta__button { min-inline-size: min(100%, 18rem); border-radius: var(--radius-md); }
.route-page .application-intro-screen > .application-cta__button:disabled { border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text-muted); background: var(--color-surface-muted); }
.route-page .application-intro-screen > .application-cta__button:not(:disabled) { border-color: var(--color-action-primary); color: var(--color-action-primary-text); background: var(--color-action-primary); box-shadow: var(--elevation-1); }
.route-page .application-intro-screen > .application-cta__button:not(:disabled):hover { border-color: var(--color-action-primary-hover); background: var(--color-action-primary-hover); }
@media (max-width: 55rem) {
  .route-page .application-intro-screen__grid,
  .growth-programme-overview .growth-programme-overview__highlights,
  .growth-programme-overview__criteria { grid-template-columns: minmax(0, 1fr); }
  .growth-programme-overview__highlights li { min-block-size: calc(var(--space-10) + 2 * var(--space-5)); padding-block-start: var(--space-5); padding-inline-start: calc(var(--space-5) + var(--space-10) + var(--space-3)); }
}
@media (max-width: 36rem) {
  .route-page .application-intro-screen > .application-cta__button { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .route-page .application-readiness-list .choice { transition: none; }
}

/* Client notes, October 2026 — track pages. */
/* Long Arabic titles wrap onto two lines; keep the marks clear of the line above. */
.route-hero h1:lang(ar) { line-height: 1.45; }
/* The confirmation heading sits on the purple panel, so it uses the panel's text colour. */
.route-page .form-success h2 { color: inherit; }
/* Business Growth lists what the track includes without the side panel. */
.route-detail-layout--single { grid-template-columns: minmax(0, 1fr); }
.route-detail-layout--single .route-benefits :is(li, p) { max-inline-size: none; }
/* Client notes (3): a larger application button on the track pages. */
.route-hero__actions .button--large { min-block-size: 3.5rem; padding-inline: var(--space-10); font-size: var(--text-lg); }
