/* Inner pages in the original www.rnp.ma palette (tokens in main.css), the homepage's family: a gold-tinted head,
   breadcrumb, white cards on grey hairlines, the portal's short red title rules, gold accents and two-tone pictograms. */
.inner-page { background: #fff; }
.inner-page main { min-height: 50vh; }

/* Page head: header and title share one tinted band, with the family star on the far side. */
.inner-page .site-header { background: var(--head-bg); box-shadow: none; }
.page-head { position: relative; isolation: isolate; overflow: hidden; padding-block: 46px 58px; background: var(--head-bg); border-block-start: 1px solid var(--hairline); }
.page-head::after { content: ""; position: absolute; z-index: -1; inset-inline-end: max(12px, calc(50% - 690px)); top: 50%; width: 290px; height: 290px; transform: translateY(-50%); opacity: .35; background: var(--gold); -webkit-mask: url("../assets/brand/ornament.svg") center / contain no-repeat; mask: url("../assets/brand/ornament.svg") center / contain no-repeat; pointer-events: none; }
.page-kicker { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; color: var(--green-hover); font-size: 14px; font-weight: 800; line-height: 1.45; }
.page-kicker::before { content: ""; flex: 0 0 auto; width: 20px; height: 3px; border-radius: 999px; background: var(--red); }
.page-title { max-width: 820px; color: var(--deep-green); font-size: clamp(34px, 3.2vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; overflow-wrap: break-word; }
.page-intro { max-width: 720px; margin-block-start: 18px; color: var(--text); font-size: 17px; line-height: 1.65; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }
.page-actions .button { min-height: 48px; padding: 12px 22px; }
.service-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 22px; }
.service-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--gold-line); border-radius: 999px; color: var(--deep-green); background: var(--gold-soft); font-size: 13px; font-weight: 700; line-height: 1.4; }
.service-chips span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.service-chips .service-chip--group { color: #fff; border-color: transparent; background: var(--deep-green); }
.service-chips .service-chip--group::before { background: var(--accent-light); }
.head-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 26px; }
.head-links-label { margin-inline-end: 6px; color: var(--deep-green); font-size: 15px; font-weight: 800; }
.head-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--deep-green); background: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .2s, background .2s; }
.head-link:hover { border-color: var(--gold-line); background: var(--gold-soft); }
.head-link .link-icon { width: 16px; height: 16px; }

/* Breadcrumb below the head, then a 292px sidebar beside the main column, as on RSU. */
.page-body { padding-block: 34px 90px; }
.breadcrumbs { margin-block-end: 24px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--gold); }
.breadcrumbs a { color: var(--deep-green); font-weight: 700; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.page-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); align-items: start; gap: 30px; }
.page-aside { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 961px) and (min-height: 820px) { .page-aside { position: sticky; top: 22px; } }
.page-content { display: grid; gap: 22px; min-width: 0; }
.page-content--wide { gap: 44px; }

/* Shared label: a short red bar before a small uppercase line. */
.card-kicker { display: flex; width: fit-content; align-items: center; gap: 8px; margin-block-end: 10px; color: var(--green-hover); font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: .07em; text-transform: uppercase; }
.card-kicker::before { content: ""; flex: 0 0 auto; width: 4px; height: 16px; border-radius: 999px; background: var(--red); }
html[dir="rtl"] .card-kicker { letter-spacing: 0; }

/* Sidebar cards: a deep-green help card and a white note card. */
.aside-card { position: relative; isolation: isolate; overflow: hidden; padding: 20px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; box-shadow: var(--card-shadow); }
.aside-card--dark { color: #fff; border-color: transparent; background: var(--green-band); }
.aside-card--dark::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -46px; bottom: -52px; width: 140px; height: 140px; opacity: .1; background: #fff; -webkit-mask: url("../assets/brand/ornament.svg") center / contain no-repeat; mask: url("../assets/brand/ornament.svg") center / contain no-repeat; pointer-events: none; }
.aside-title { color: var(--deep-green); font-size: 19px; font-weight: 800; line-height: 1.3; }
.aside-card--dark .aside-title { color: #fff; }
.aside-card--dark .card-kicker { color: #fff; }   /* gold is too light for small text on green: white, gold marker */
.aside-card--dark .card-kicker::before { background: var(--gold); }
.aside-card > p { margin-block-start: 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.aside-card--dark > p { color: rgba(255, 255, 255, .84); }
.aside-card .button { width: 100%; margin-block-start: 16px; padding-inline: 16px; }
.aside-card--dark a:focus-visible, .aside-card--dark button:focus-visible { outline-color: #fff; }
.feature-caption { margin-block-start: 12px; font-size: 12.5px; }
.aside-card--dark > .feature-caption { color: rgba(255, 255, 255, .7); }
.feature-links { display: grid; margin-block-start: 14px; }
.feature-links > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-block: 8px; border-block-start: 1px solid var(--line); color: var(--deep-green); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.feature-links > a:hover { text-decoration: underline; }
.feature-links .link-icon { width: 16px; height: 16px; }
.aside-card--dark .feature-links > a { color: #fff; border-color: rgba(255, 255, 255, .16); }
.aside-card--dark .feature-links .link-icon { filter: brightness(0) invert(1); }
.page-sidebar ul { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.page-sidebar ul a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; line-height: 1.45; text-decoration: none; }
.page-sidebar ul a:hover { color: var(--deep-green); background: var(--grey-bg); }
.page-sidebar ul a[aria-current] { color: var(--deep-green); background: var(--gold-soft); font-weight: 700; }
.essentials-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.essentials-list li { position: relative; padding-inline-start: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.essentials-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* Section cards: 20px corners, a hairline, soft depth, a light tint and the star in the far corner. */
.section-card { position: relative; isolation: isolate; overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--section-shadow); scroll-margin-block-start: 24px; }
.section-card::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -58px; top: -66px; width: 190px; height: 190px; opacity: .12; background: var(--gold); -webkit-mask: url("../assets/brand/ornament.svg") center / contain no-repeat; mask: url("../assets/brand/ornament.svg") center / contain no-repeat; pointer-events: none; }
.section-card > h2, .section-head h2 { margin-block-end: 14px; color: var(--ink); font-size: clamp(25px, 2.4vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.section-head { max-width: 760px; margin-block-end: 22px; }
.section-head h2 { margin-block-end: 0; }
.section-head p { margin-block-start: 12px; color: var(--muted); font-size: 16px; line-height: 1.7; }
/* The portal's short red rule under section titles (gold on deep green), as under the footer column titles. */
.section-card > h2::after, .section-head h2::after, .step-heading h2::after, .pillar h2::after, .support-desk h2::after, .support-answers h2::after, .identity-copy h2::after, .related-band h2::after { content: ""; display: block; width: 48px; height: 3px; margin-block-start: 14px; border-radius: 2px; background: var(--red); }
.identity-copy h2::after, .support-desk:first-of-type h2::after { background: var(--gold); }
.related-band h2::after { margin-inline: auto; }
.content-section { min-width: 0; scroll-margin-block-start: 24px; }
.content-section p, .content-section li { max-width: 74ch; color: var(--text); font-size: 16px; line-height: 1.8; overflow-wrap: break-word; }
.content-section p + p { margin-block-start: 14px; }
.content-section h3 { margin-block: 22px 10px; color: var(--deep-green); font-size: 20px; font-weight: 800; line-height: 1.35; }
.content-section ul, .content-section ol { display: grid; gap: 10px; margin-block: 16px; padding: 0; list-style: none; }
.content-section ul > li { position: relative; padding-inline-start: 22px; }
.content-section ul > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.content-section .inline-link, .faq-answer a { color: var(--green-hover); font-weight: 700; }
.content-section strong { color: var(--deep-green); }
.source-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-block-start: 14px; }
.source-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; color: var(--green-hover); font-size: 14.5px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.source-links a:hover { text-decoration: underline; }
.source-links .link-icon { width: 16px; height: 16px; }
.content-section p .source-links { margin-block-start: 6px; }

/* Directory cards: RSU resource cards with a deep-green icon circle. */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.page-layout .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.directory-card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 200px; padding: 24px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 12px; color: var(--deep-green); background: #fff; box-shadow: var(--card-shadow); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.directory-card::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -34px; bottom: -42px; width: 130px; height: 130px; opacity: .12; background: var(--gold); -webkit-mask: url("../assets/brand/ornament.svg") center / contain no-repeat; mask: url("../assets/brand/ornament.svg") center / contain no-repeat; pointer-events: none; }
.directory-card:hover { transform: translateY(-3px); border-color: var(--gold-line); box-shadow: 0 24px 58px rgba(0, 0, 0, .1); }
.directory-card:focus-visible { outline-offset: 4px; }
.directory-chip { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 64px; border: 1px solid var(--gold-line); border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--head-bg); }
.directory-chip .link-icon { width: 40px; height: 40px; }
.directory-card h3 { margin-block: 24px 8px; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.3; }
.directory-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.card-action { display: inline-flex; align-items: center; gap: 8px; margin-block-start: auto; padding-block-start: 18px; color: var(--green-hover); font-size: 14px; font-weight: 700; line-height: 1.4; }
.card-action .link-icon { width: 16px; height: 16px; transition: transform .18s ease; }
.directory-card:hover .card-action .link-icon { transform: translateX(3px); }
.service-group + .service-group { margin-block-start: 56px; }

/* Registration procedure: RSU step cards with a numbered circle and a pill tag. */
.procedure-list { display: grid; gap: 22px; }
.step-head { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.step-marker { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: var(--gold); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.step-tag { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--gold-line); border-radius: 999px; color: var(--deep-green); background: var(--gold-soft); font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.step-overview { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px 36px; }
.step-heading h2 { margin-block-end: 10px; color: var(--ink); font-size: 26px; font-weight: 800; line-height: 1.2; }
.content-section .step-heading p { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.content-section .step-summary ul { gap: 9px; margin-block: 2px 0; }
.content-section .step-summary li { font-size: 15px; line-height: 1.6; }
.procedure-action { margin-block-start: 18px; min-height: 46px; padding: 11px 20px; font-size: 14px; }
#pieces-justificatives { scroll-margin-block-start: 45px; }

/* Disclosures: RSU white rows with a green chevron. */
.procedure-details { margin-block-start: 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .04); }
.procedure-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 20px; color: var(--deep-green); font-size: 15px; font-weight: 800; line-height: 1.4; cursor: pointer; list-style: none; }
.procedure-details > summary::-webkit-details-marker { display: none; }
.procedure-details > summary:hover { background: var(--grey-bg); }
.procedure-details > summary .link-icon, .faq-chevron .link-icon { width: 18px; height: 18px; flex: 0 0 auto; filter: var(--tint-green); transition: transform .2s ease; }
.procedure-details[open] > summary .link-icon, .faq-item[open] .faq-chevron .link-icon { transform: rotate(180deg); }
.procedure-details[open] > summary { border-block-end: 1px solid var(--line); }
.procedure-full { padding: 8px 20px 20px; }
.procedure-full h3 { margin-block: 12px 12px; font-size: 19px; }
.content-section .procedure-full p, .content-section .procedure-full li { font-size: 15px; line-height: 1.8; }
.inner-page .faq-list { display: grid; gap: 12px; margin: 0; padding: 0; }
.inner-page .faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .04); transition: border-color .2s ease, box-shadow .2s ease; scroll-margin-block-start: 24px; }
.inner-page .faq-item[open] { border-color: var(--gold-line); box-shadow: 0 18px 42px rgba(0, 0, 0, .06); }
.inner-page .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 0; padding: 20px 22px; color: var(--deep-green); font-size: 17px; font-weight: 800; line-height: 1.35; cursor: pointer; list-style: none; }
.inner-page .faq-item > summary:hover { background: var(--grey-bg); }
.faq-chevron { display: grid; place-items: center; flex: 0 0 auto; }
.inner-page .faq-answer { max-width: 80ch; padding: 0 22px 22px; color: var(--text); font-size: 15px; line-height: 1.75; }
.inner-page .faq-answer p, .inner-page .faq-answer li { max-width: none; color: inherit; font-size: inherit; line-height: inherit; }
.inner-page .faq-answer p + p { margin-block-start: 10px; }
.inner-page .faq-answer ul, .inner-page .faq-answer ol { display: grid; gap: 8px; margin-block: 12px; padding-inline-start: 22px; }

/* Questions page: search in the head, categories in the sidebar, grey pill questions as on RSU. */
.page-head .faq-tools { display: grid; gap: 10px; max-width: 640px; margin-block-start: 26px; }
.faq-tools > label { color: var(--deep-green); font-size: 15px; font-weight: 700; }
.faq-search-row { display: flex; flex-wrap: wrap; gap: 10px; }
#faq-search { flex: 1 1 260px; min-width: 0; min-height: 54px; padding: 14px 22px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: #fff; font-size: 16px; line-height: 1.4; box-shadow: var(--card-shadow); }
#faq-search::placeholder { color: var(--muted); opacity: 1; }
#faq-search:hover { border-color: var(--gold); }
#faq-clear { min-height: 54px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; color: var(--deep-green); background: #fff; font-size: 14px; font-weight: 700; }
#faq-clear:hover { border-color: var(--gold-line); background: var(--gold-soft); }
.faq-nav .aside-title { margin-block-end: 12px; font-size: 22px; }
.faq-filters { display: grid; gap: 4px; }
.faq-filters button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--text); background: transparent; font-size: 15px; font-weight: 600; line-height: 1.35; text-align: start; transition: background .2s, border-color .2s; }
.faq-filters button:hover { background: var(--grey-bg); }
.faq-filters button[aria-pressed="true"] { color: var(--deep-green); border-color: var(--gold-line); background: var(--gold-soft); font-weight: 800; }
.faq-count { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 24px; height: 24px; padding-inline: 7px; border-radius: 999px; color: var(--deep-green); background: var(--gold-soft); font-size: 11.5px; font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.faq-filters button[aria-pressed="true"] .faq-count { color: #fff; background: var(--deep-green); }
.faq-enhanced .faq-anchors { display: none; }
.faq-results-status { color: var(--muted); font-size: 14px; line-height: 1.6; }
.faq-empty { padding: 24px 26px; border-radius: 16px; color: var(--muted); background: var(--grey-bg); font-size: 16px; line-height: 1.7; }
.faq-category { scroll-margin-block-start: 24px; }
.faq-category + .faq-category { margin-block-start: 40px; }
.faq-category > h2 { display: flex; align-items: center; gap: 12px; margin-block-end: 18px; padding-block-end: 14px; border-block-end: 1px solid var(--line); color: var(--deep-green); font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
html[dir="rtl"] .faq-category > h2 { letter-spacing: 0; }
.page--faq .faq-item { border: 0; border-radius: 34px; background: var(--grey-bg); box-shadow: none; }
.page--faq .faq-item[open] { border-radius: 24px; box-shadow: none; }
.page--faq .faq-item > summary { padding: 21px 28px; color: var(--text); font-size: 17.5px; font-weight: 400; }
.page--faq .faq-item > summary:hover { background: transparent; color: var(--deep-green); }
.page--faq .faq-item[open] > summary { color: var(--deep-green); font-weight: 700; }
.page--faq .faq-chevron { width: 26px; height: 26px; border-radius: 50%; background: rgba(231, 172, 70, .2); }
.page--faq .faq-chevron .link-icon { width: 13px; height: 13px; }
.page--faq .faq-answer { padding: 0 28px 24px; color: var(--text); }

/* Service guides: guidance cards, related services, then the official handoff. */
.service-steps { counter-reset: service-step; }
.content-section .service-steps > li { position: relative; min-height: 36px; padding-inline-start: 50px; padding-block: 4px 6px; counter-increment: service-step; }
.service-steps > li::before { content: counter(service-step); position: absolute; inset-inline-start: 0; top: 2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink); background: var(--gold); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.service-handoff.section-card { border-color: var(--gold-line); background: var(--head-bg); }
.service-handoff > p { max-width: 70ch; color: var(--muted); font-size: 16px; line-height: 1.75; }
.service-handoff .button { margin-block-start: 22px; }

/* À propos: a deep-green identity card, three pillars and the journeys. */
.identity-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 40px; padding: 46px 44px; border-radius: 20px; color: #fff; background: var(--green-band); box-shadow: 0 24px 56px -24px rgba(0, 0, 0, .35); }
.identity-card::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -70px; bottom: -90px; width: 300px; height: 300px; opacity: .08; background: #fff; -webkit-mask: url("../assets/brand/ornament.svg") center / contain no-repeat; mask: url("../assets/brand/ornament.svg") center / contain no-repeat; pointer-events: none; }
.identity-card .card-kicker { color: #fff; }
.identity-card .card-kicker::before { background: var(--gold); }
.identity-copy h2 { color: #fff; font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1.15; }
.identity-copy p { max-width: 56ch; margin-block-start: 16px; color: rgba(255, 255, 255, .84); font-size: 16px; line-height: 1.7; }
.identity-copy .button { margin-block-start: 24px; }
.identity-card a:focus-visible { outline-color: #fff; }
.identity-visual { display: grid; gap: 14px; padding: 26px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(255, 255, 255, .06); }
.identity-label { color: rgba(255, 255, 255, .86); font-size: 13px; font-weight: 700; }
.identity-digits { display: flex; justify-content: space-between; gap: 6px; direction: ltr; }
.identity-digits span { display: grid; place-items: center; flex: 1 1 0; max-width: 34px; height: 44px; border-radius: 8px; background: rgba(255, 255, 255, .12); }
.identity-digits span:empty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light); }
.identity-caption { color: rgba(255, 255, 255, .72); font-size: 13px; }
.about-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pillar { position: relative; min-width: 0; padding: 30px 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pillar-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-block-end: 22px; border: 1px solid var(--gold-line); border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--head-bg); }
.pillar-icon .link-icon { width: 40px; height: 40px; }
.pillar h2 { margin-block-end: 14px; color: var(--ink); font-size: 23px; font-weight: 700; line-height: 1.3; }
.story-copy p { color: var(--text); font-size: 15px; line-height: 1.75; }
.story-copy p + p { margin-block-start: 12px; }
.story-copy .inline-link { color: var(--green-hover); font-weight: 700; }
.journey-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.page-layout .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.journey-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; box-shadow: var(--card-shadow); }
.journey-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-block-end: 18px; border: 1px solid var(--gold-line); border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--head-bg); }
.journey-icon .link-icon { width: 36px; height: 36px; }
.journey-card h3 { margin: 0; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.3; }
.journey-card p { margin-block-start: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.journey-card .source-links { display: grid; gap: 0; margin-block-start: 14px; }
.journey-card .source-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 10px; border-block-start: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.45; }
.journey-card .source-links a:hover { color: var(--green-hover); text-decoration: none; }

/* Assistance: a deep-green complaint desk beside a light tracking desk, then FAQ topics. */
.support-desks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.support-desk { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px; border: 1px solid var(--hairline); border-radius: 20px; background: #fff; box-shadow: var(--section-shadow); }
.support-desk:first-of-type { color: #fff; border-color: transparent; background: var(--green-band); }
.desk-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-block-end: 22px; border: 1px solid var(--gold-line); border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--head-bg); }
.desk-icon .link-icon { width: 40px; height: 40px; }
.support-desk:first-of-type .desk-icon { border-color: transparent; box-shadow: 0 0 0 5px rgba(255, 255, 255, .12); }
.support-desk h2 { color: var(--ink); font-size: 27px; font-weight: 800; line-height: 1.25; }
.support-desk p { max-width: 52ch; margin-block: 14px 24px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.support-desk:first-of-type h2 { color: #fff; }
.support-desk:first-of-type p { color: rgba(255, 255, 255, .84); }
.support-desk .button { margin-block-start: auto; }
.support-desk:first-of-type .button-primary { color: var(--deep-green); background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.support-desk:first-of-type .button-primary .link-icon { filter: none; }
.support-desk:first-of-type .button:focus-visible { outline-color: #fff; }
.support-answers { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 24px 44px; }
.support-answers h2 { color: var(--ink); font-size: 27px; font-weight: 800; line-height: 1.25; }
.support-answers p { margin-block-start: 12px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.support-answers .button { margin-block-start: 22px; }
.support-topics { display: grid; }
.support-topics > h3 { margin-block-end: 8px; color: var(--deep-green); font-size: 17px; font-weight: 800; }
.support-topics > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 10px; border-block-start: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.support-topics > a:hover { color: var(--green-hover); }

/* Documents: the registration form, then RSU legal-text cards with a green top edge. */
.doc-feature { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--hairline); border-radius: 20px; background: #fff; box-shadow: var(--section-shadow); }
.doc-feature-mark { display: grid; place-content: center; justify-items: center; gap: 12px; padding: 28px; background: var(--green-band); }
.doc-feature-mark .link-icon { width: 84px; height: 84px; padding: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
.doc-feature-mark .file-type { padding: 4px 12px; border-radius: 999px; color: var(--ink); background: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.doc-feature-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 34px; }
.doc-feature-copy h3 { color: var(--deep-green); font-size: 26px; font-weight: 800; line-height: 1.25; }
.doc-feature-copy p { max-width: 60ch; margin-block-start: 10px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.doc-feature-copy .button { margin-block-start: 22px; }
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 30px; border: 1px solid var(--hairline); border-radius: 20px; background: #fff; box-shadow: var(--section-shadow); }
.doc-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 26px 24px; border: 1px solid var(--hairline); border-block-start: 3px solid var(--gold); border-radius: 14px; background: #fff; }
.doc-tag { display: inline-flex; padding: 5px 11px; border-radius: 999px; color: var(--deep-green); background: var(--gold-soft); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.doc-card h3 { margin-block: 16px 8px; color: var(--deep-green); font-size: 19px; font-weight: 800; line-height: 1.3; }
.doc-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.doc-card .button { margin-block-start: auto; min-height: 46px; padding: 11px 18px; font-size: 14px; }
.doc-card > :nth-last-child(2) { margin-block-end: 22px; }

/* Legal notices: numbered contents in the sidebar, the attributed text on one reading card. */
.legal-toc ol { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.legal-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.45; text-decoration: none; }
.legal-toc a span { color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums; }
.legal-toc a:hover { color: var(--deep-green); background: var(--grey-bg); }
.legal-toc a[aria-current] { color: var(--deep-green); background: var(--gold-soft); }
.legal-paper.section-card { padding: 34px; }
.source-note { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 14px; margin-block-end: 30px; padding: 18px 20px; border: 1px solid var(--gold-line); border-radius: 12px; background: var(--head-bg); }
.source-note > .link-icon { width: 40px; height: 40px; }
.source-note strong { color: var(--deep-green); font-size: 15px; line-height: 1.5; }
.source-note p { margin-block-start: 6px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.legal-clause { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; scroll-margin-block-start: 24px; }
.legal-clause + .legal-clause { margin-block-start: 28px; padding-block-start: 28px; border-block-start: 1px solid var(--line); }
.legal-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: var(--gold); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.legal-clause h2 { margin-block-end: 12px; color: var(--ink); font-size: 23px; font-weight: 800; line-height: 1.35; }
.legal-clause p { max-width: 74ch; color: var(--text); font-size: 16px; line-height: 1.85; }
.legal-clause .inline-link { color: var(--green-hover); }

/* Continuation band: RSU's light help band, centred. */
.related-band { padding-block: 64px; background: var(--head-bg); }
.related-inner { display: grid; justify-items: center; text-align: center; }
.related-band h2 { color: var(--ink); font-size: 32px; font-weight: 700; line-height: 1.35; }
.related-band p { max-width: 640px; margin-block-start: 14px; color: var(--text); font-size: 18px; line-height: 1.6; }
.related-band ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.related-band .button-light { border: 1px solid var(--line); box-shadow: none; }
.related-band li:first-child .button { color: #fff; border-color: transparent; background: var(--deep-green); box-shadow: 0 10px 24px rgba(0, 107, 55, .2); }
.related-band li:first-child .button .link-icon { filter: brightness(0) invert(1); }

/* RTL: arrows follow the reading direction. */
html[dir="rtl"] a > .link-icon, html[dir="rtl"] .card-action > .link-icon { transform: scaleX(-1); }
html[dir="rtl"] .directory-card:hover .card-action .link-icon { transform: scaleX(-1) translateX(3px); }
html[dir="rtl"] .page-title { line-height: 1.4; letter-spacing: 0; }
html[dir="rtl"] .page-intro { line-height: 1.9; }
html[dir="rtl"] .content-section p, html[dir="rtl"] .content-section li, html[dir="rtl"] .story-copy p, html[dir="rtl"] .legal-clause p { line-height: 2; }
html[dir="rtl"] .directory-card p, html[dir="rtl"] .journey-card p, html[dir="rtl"] .aside-card > p { line-height: 1.85; }
html[dir="rtl"] .section-card > h2, html[dir="rtl"] .section-head h2, html[dir="rtl"] .identity-copy h2 { line-height: 1.45; letter-spacing: 0; }

@media (max-width: 1150px) {
  .page-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
  .card-grid, .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-overview { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .page-head { padding-block: 36px 44px; }
  .page-head::after { width: 220px; height: 220px; inset-inline-end: -50px; opacity: .25; }
  .page-layout { grid-template-columns: 1fr; gap: 22px; }
  .page-aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
  .identity-card { grid-template-columns: 1fr; gap: 28px; padding: 36px 30px; }
  .about-pillars { grid-template-columns: 1fr; }
  .support-answers { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  /* Phones reach the content sooner: the contents list and FAQ shortcuts repeat what follows. */
  .page--service .page-sidebar, .page--faq .help-feature { display: none; }
  .page-head { padding-block: 28px 36px; }
  .page-title { font-size: clamp(28px, 7.4vw, 34px); }
  .page-intro { margin-block-start: 14px; font-size: 16px; }
  .page-actions .button { flex: 1 1 auto; }
  .page-body { padding-block: 24px 60px; }
  .breadcrumbs { margin-block-end: 18px; font-size: 13px; }
  .section-card, .legal-paper.section-card { padding: 22px 20px; border-radius: 16px; }
  .section-card > h2, .section-head h2 { font-size: 24px; }
  .content-section p, .content-section li, .legal-clause p { font-size: 15px; }
  .card-grid, .page-layout .card-grid, .journey-grid, .page-layout .journey-grid, .doc-grid, .support-desks { grid-template-columns: 1fr; }
  .directory-card { min-height: 0; padding: 20px; }
  .directory-card h3 { margin-block-start: 18px; font-size: 19px; }
  .step-heading h2 { font-size: 23px; }
  .procedure-action { width: 100%; }
  .procedure-details > summary { padding-inline: 16px; }
  .procedure-full { padding-inline: 16px; }
  .inner-page .faq-item > summary { padding: 18px; font-size: 16px; }
  .inner-page .faq-answer { padding: 0 18px 20px; }
  .page--faq .faq-item > summary { padding: 18px 22px; font-size: 16px; }
  .page--faq .faq-answer { padding: 0 22px 20px; }
  .identity-card { padding: 28px 22px; border-radius: 16px; }
  .identity-visual { padding: 18px; }
  .identity-digits span { height: 36px; }
  .support-desk { padding: 24px 22px; border-radius: 16px; }
  .support-desk h2, .support-answers h2 { font-size: 23px; }
  .doc-feature { grid-template-columns: 1fr; border-radius: 16px; }
  .doc-feature-mark { grid-auto-flow: column; justify-content: start; padding: 18px 22px; }
  .doc-feature-mark .link-icon { width: 56px; height: 56px; padding: 10px; }
  .doc-feature-copy { padding: 22px; }
  .doc-feature-copy .button { width: 100%; }
  .doc-grid { padding: 16px; border-radius: 16px; }
  .legal-clause { grid-template-columns: 1fr; gap: 10px; }
  .legal-number { width: 38px; height: 38px; font-size: 13px; }
  .related-band { padding-block: 48px; }
  .related-band h2 { font-size: 26px; }
  .related-band p { font-size: 16px; }
  .related-band ul { display: grid; width: 100%; }
  .related-band .button { width: 100%; }
}
@media (forced-colors: active) {
  .aside-card, .section-card, .directory-card, .journey-card, .pillar, .support-desk, .identity-card, .doc-feature, .doc-grid, .doc-card, .faq-item { border: 1px solid CanvasText; }
  .page-head::after, .section-card::after, .directory-card::after, .aside-card--dark::after, .identity-card::after { display: none; }
  .faq-filters button[aria-pressed="true"], .page-sidebar a[aria-current] { outline: 2px solid Highlight; outline-offset: -3px; }
}
@media print {
  .inner-page, .page-head, .aside-card--dark, .identity-card, .support-desk { color: #000; background: #fff; }
  .page-head::after, .page-aside, .page-actions, .head-links, .faq-tools, .faq-filters, .faq-results-status, .related-band, .breadcrumbs { display: none !important; }
  .page-layout { display: block; }
  .section-card, .directory-card, .journey-card, .doc-feature, .doc-grid, .support-desk { box-shadow: none; border: 1px solid #aaa; background: #fff; }
  .section-card::after, .directory-card::after, .identity-card::after { display: none; }
  .identity-copy h2, .identity-copy p, .support-desk:first-of-type h2, .support-desk:first-of-type p { color: #000; }
  .section-card, .directory-card, .support-desk { break-inside: avoid; }
}