/* ==========================================================================
   Interview.ps — Flat modern theme
   Loaded after handbook.css on every page. Same palette as the original site
   (navy #012970, blue #1647a5, page #f5f7fb, focus/accent #b45309,
   green #236342); flat surfaces only: no shadows, no gradients.
   Logical properties keep the layout mirrored for Arabic RTL.
   ========================================================================== */

:root {
  --site-tint: #eef3fc;
  --site-green: #236342;
  --site-green-tint: #e8f5ec;
  --site-accent: #b45309;
  --fm-radius-s: .6rem;
  --fm-radius: 1rem;
  --fm-radius-l: 1.75rem;
  --fm-ease: cubic-bezier(.2, .8, .2, 1);
  --hb-header-height: 4.25rem;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== Typography =====
   Plus Jakarta Sans for headings and UI labels, Inter for reading text,
   IBM Plex Sans Arabic for Arabic (fonts.css, self-hosted). */

:root {
  --fm-font-body: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --fm-font-display: "Plus Jakarta Sans", "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --site-font-family: var(--fm-font-body);
  font-family: var(--fm-font-body);
  font-feature-settings: "cv11", "ss01";
}

[dir="rtl"],
:root[lang="ar"] {
  --fm-font-body: "IBM Plex Sans Arabic", "Inter", system-ui, Tahoma, Arial, sans-serif;
  --fm-font-display: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, Tahoma, Arial, sans-serif;
  font-feature-settings: normal;
}

body,
button,
input,
select,
textarea {
  font-family: var(--fm-font-body);
}

body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--site-ink);
}

[dir="rtl"] body {
  line-height: 1.8;
}

h1, h2, h3, h4,
.hb-logo span,
.fm-footer-logo,
.hb-hero-kicker,
.hb-btn-primary,
.hb-btn-secondary,
.hb-nav #primary-menu > li > a,
.language-control-group a,
.language-control-group button,
.navbar .language-control-group button[data-language],
.fm-ticker-track span,
.hb-navgroup > h2,
.hb-toc > h2,
.hb-sidenav-home,
.hb-pg-dir,
.hb-pg-title,
.hb-mobile-nav > summary,
.hb-toc-inline > summary,
.resource-card a,
.stage-list a,
#footer.fm-footer h2 {
  font-family: var(--fm-font-display);
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

.hb-article p,
.hb-article li {
  line-height: 1.7;
}

[dir="rtl"] .hb-article p,
[dir="rtl"] .hb-article li {
  line-height: 1.85;
}

code, kbd, samp, pre {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Arabic script needs no negative tracking */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hb-logo span {
  letter-spacing: 0 !important;
}

/* Arabic: roomier leading and optically centered labels */
html[dir="rtl"] #hero.hb-hero.fm-hero .hb-hero-sub,
html[dir="rtl"] .hb-article .hero > p,
html[dir="rtl"] .fm-stages-head > p {
  line-height: 1.95;
}

html[dir="rtl"] .hb-article h1,
html[dir="rtl"] #hero.hb-hero.fm-hero h1 {
  font-weight: 700;
  line-height: 1.45;
}

html[dir="rtl"] .hb-article h2,
html[dir="rtl"] .hb-article h3 {
  line-height: 1.5;
}

html[dir="rtl"] .hb-btn-primary,
html[dir="rtl"] .hb-btn-secondary,
html[dir="rtl"] .hb-nav #primary-menu > li > a {
  line-height: 1.5;
}

html[dir="rtl"] .hb-btn-primary > span:first-child {
  padding-block-start: .1em;
}

/* Bold lead-ins inside lists read as labels */
.hb-article li > strong:first-child {
  color: var(--site-navy);
  font-weight: 700;
}

body {
  background: var(--site-page);
}

::selection {
  color: #fff;
  background: var(--site-blue);
}

/* ===== Header ===== */

.hb-header,
#header.hb-header {
  background: #fff;
  border-block-end: 2px solid var(--site-line);
  box-shadow: none;
  transition: border-color .25s var(--fm-ease);
}

.hb-header.fm-scrolled,
#header.hb-header.header-scrolled {
  border-block-end-color: var(--site-navy);
  box-shadow: none;
}

.hb-logo span,
#header.hb-header .hb-logo span {
  color: var(--site-navy);
  font-weight: 800;
  letter-spacing: -.02em;
}

.hb-logo img {
  transition: transform .4s var(--fm-ease);
}

.hb-logo:hover img {
  transform: rotate(-10deg) scale(1.08);
}

.hb-nav #primary-menu {
  gap: .35rem;
}

.hb-nav #primary-menu > li > a,
.hb-nav #primary-menu > li > a:focus {
  padding: .5rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  transition: background-color .2s var(--fm-ease), color .2s var(--fm-ease);
}

.hb-nav #primary-menu > li > a:hover,
.hb-nav #primary-menu > li > a[aria-current="page"],
.hb-nav #primary-menu > li > a[aria-current="location"] {
  color: var(--site-blue);
  background: var(--site-tint);
}

.hb-nav #primary-menu > li > a.getstarted,
.hb-nav #primary-menu > li > a.getstarted:focus {
  padding: .55rem 1.15rem;
  border: 2px solid var(--site-blue);
  border-radius: 999px;
  color: #fff;
  background: var(--site-blue);
}

.hb-nav #primary-menu > li > a.getstarted:hover {
  border-color: var(--site-navy);
  background: var(--site-navy);
}

.language-control-group {
  padding: .2rem;
  border: 2px solid var(--site-line);
  border-radius: 999px;
}

.language-control-group a,
.language-control-group button,
.navbar .language-control-group button[data-language] {
  border-radius: 999px;
  padding-inline: .8rem;
  transition: background-color .2s var(--fm-ease), color .2s var(--fm-ease);
}

.language-control-group a:hover,
.language-control-group button:hover {
  background: var(--site-tint);
}

.language-control-group a[aria-current="page"],
.language-control-group button[aria-pressed="true"] {
  color: #fff;
  background: var(--site-navy);
}

.mobile-nav-toggle {
  border: 2px solid var(--site-line);
  border-radius: 999px;
}

@media (max-width: 1200px) {
  .hb-nav.navbar-mobile #primary-menu {
    padding: .75rem;
    border: 2px solid var(--site-navy);
    border-radius: var(--fm-radius);
    box-shadow: none;
    animation: fm-drop .25s var(--fm-ease);
  }
}

@keyframes fm-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Home page
   ========================================================================== */

#hero.hb-hero.fm-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--hb-header-height) + 3rem) 4rem;
  background: var(--site-page);
  background-image: none;
  text-align: start;
}

/* Large flat circle behind the hero */
#hero.fm-hero::before {
  content: "";
  position: absolute;
  inset-block-start: -18rem;
  inset-inline-end: -14rem;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: var(--site-tint);
  pointer-events: none;
}

.fm-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: min(calc(100% - 2.5rem), 78rem);
  margin-inline: auto;
}

.fm-hero .hb-hero-inner {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: start;
}

.fm-hero .hb-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
  padding: .45rem 1rem .45rem .7rem;
  border-radius: 999px;
  color: var(--site-blue);
  background: #fff;
  border: 2px solid var(--site-line);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[dir="rtl"] .fm-hero .hb-hero-kicker {
  letter-spacing: 0;
  padding: .45rem .7rem .45rem 1rem;
}

.fm-kicker-dot {
  position: relative;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--site-accent);
}

.fm-kicker-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--site-accent);
  animation: fm-ping 1.8s var(--fm-ease) infinite;
}

@keyframes fm-ping {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(2.8); opacity: 0; }
}

#hero.hb-hero.fm-hero h1 {
  max-width: 16ch;
  margin: 0 0 1.4rem;
  color: var(--site-navy);
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  font-weight: 850;
  letter-spacing: -.028em;
  line-height: 1.04;
}

[dir="rtl"] #hero.hb-hero.fm-hero h1 {
  max-width: 20ch;
  letter-spacing: 0;
  line-height: 1.3;
}

#hero.hb-hero.fm-hero .hb-hero-sub {
  max-width: 36rem;
  margin: 0 0 2rem;
  color: var(--site-muted);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
}

.fm-hero .hb-hero-actions {
  justify-content: flex-start;
  gap: .8rem;
  margin: 0 0 1.4rem;
}

.hb-btn-primary,
.hb-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  box-sizing: border-box;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .2s var(--fm-ease), color .2s var(--fm-ease), border-color .2s var(--fm-ease), transform .2s var(--fm-ease);
}

.hb-btn-primary {
  padding-inline-end: .55rem;
  color: #fff;
  border: 2px solid var(--site-blue);
  background: var(--site-blue);
}

.hb-btn-primary:hover {
  color: #fff;
  border-color: var(--site-navy);
  background: var(--site-navy);
  transform: translateY(-2px);
}

.hb-btn-primary .hb-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.1rem;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  border-radius: 50%;
  color: var(--site-blue);
  background: #fff;
  transition: transform .25s var(--fm-ease), color .2s var(--fm-ease);
}

.hb-btn-primary .hb-arrow svg {
  display: block;
}

/* handbook.css mirrors the whole arrow badge in RTL; mirror only the icon instead */
[dir="rtl"] .hb-btn-primary .hb-arrow {
  transform: none;
}

[dir="rtl"] .hb-btn-primary .hb-arrow svg {
  transform: scaleX(-1);
}

.hb-btn-primary:hover .hb-arrow {
  color: var(--site-navy);
  transform: translateX(3px);
}

[dir="rtl"] .hb-btn-primary:hover .hb-arrow {
  transform: translateX(-3px);
}

.hb-btn-secondary {
  border: 2px solid var(--site-navy);
  color: var(--site-navy);
  background: #fff;
}

.hb-btn-secondary:hover {
  color: #fff;
  background: var(--site-navy);
  transform: translateY(-2px);
}

.fm-hero .hb-hero-alt {
  margin: 0;
  text-align: start;
}

.fm-hero .hb-hero-alt a {
  color: var(--site-blue);
  font-weight: 700;
}

/* Hero visual: Remotion player in a flat frame */
.fm-hero-visual {
  position: relative;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
}

.fm-motion-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--fm-radius-l);
  background: var(--site-navy);
}

.fm-motion-fallback {
  display: grid;
  align-content: center;
  gap: .8rem;
  height: 100%;
  padding: 16%;
}

.fm-motion-fallback span {
  height: 2.6rem;
  border-radius: .8rem;
  background: #fff;
}

.fm-motion-fallback span:nth-child(3) {
  background: var(--site-blue);
}

.fm-shape {
  position: absolute;
  z-index: 0;
  display: block;
}

.fm-shape-a {
  inset-block-start: -1.6rem;
  inset-inline-start: -1.6rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: var(--site-accent);
  animation: fm-float 7s ease-in-out infinite;
}

.fm-shape-b {
  inset-block-end: -1.4rem;
  inset-inline-end: -1.4rem;
  width: 8rem;
  height: 8rem;
  border-radius: 1.5rem;
  background: var(--site-blue);
  animation: fm-float 9s ease-in-out infinite reverse;
}

.fm-shape-c {
  z-index: 2;
  inset-block-end: 12%;
  inset-inline-start: -2rem;
  width: 4.5rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--site-green);
  animation: fm-float 6s ease-in-out infinite;
}

@keyframes fm-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(6deg); }
}

/* Ticker band */
.fm-ticker {
  overflow: hidden;
  padding-block: 1.1rem;
  color: #fff;
  background: var(--site-navy);
  white-space: nowrap;
}

.fm-ticker-track {
  display: inline-flex;
  width: max-content;
  animation: fm-marquee 38s linear infinite;
}

[dir="rtl"] .fm-ticker-track {
  animation-name: fm-marquee-rtl;
}

.fm-ticker-track span {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding-inline-end: 2.2rem;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 850;
  letter-spacing: -.02em;
}

.fm-ticker-track span::after {
  content: "";
  width: .8rem;
  height: .8rem;
  border-radius: .2rem;
  background: var(--site-accent);
  transform: rotate(45deg);
}

.fm-ticker-track span:nth-child(5n+2)::after { background: #fff; border-radius: 50%; }
.fm-ticker-track span:nth-child(5n+3)::after { background: var(--site-blue); }
.fm-ticker-track span:nth-child(5n+4)::after { background: var(--site-green); border-radius: 50%; }

@keyframes fm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes fm-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* Stages */
.home-stages.fm-stages {
  width: min(calc(100% - 2.5rem), 78rem);
  max-width: none;
  margin-inline: auto;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.fm-stages-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 4rem;
  align-items: end;
  margin-block-end: 2.5rem;
}

.fm-stages .fm-stages-head > h2 {
  margin: 0;
  color: var(--site-navy);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.05;
  text-align: start;
}

[dir="rtl"] .fm-stages .fm-stages-head > h2 {
  letter-spacing: 0;
  line-height: 1.3;
}

.fm-stages .fm-stages-head > p {
  max-width: 34rem;
  margin: 0;
  color: var(--site-muted);
  font-size: 1.1rem;
  text-align: start;
}

.fm-stages .home-stage-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.fm-stages .home-stage-list > li {
  display: flex;
}

.fm-stages .home-stage-list a {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 17rem;
  padding: 1.5rem 1.35rem 4.5rem;
  border: 2px solid var(--site-line);
  border-radius: var(--fm-radius-l);
  color: var(--site-ink);
  background: #fff;
  box-shadow: none;
  text-decoration: none;
  transition: background-color .3s var(--fm-ease), border-color .3s var(--fm-ease), transform .3s var(--fm-ease), color .3s var(--fm-ease);
}

.fm-stages .home-stage-list a::after {
  content: "→";
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.35rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--site-navy);
  background: var(--site-tint);
  font-weight: 800;
  transition: background-color .3s var(--fm-ease), color .3s var(--fm-ease), transform .3s var(--fm-ease);
}

[dir="rtl"] .fm-stages .home-stage-list a::after {
  content: "←";
}

.fm-stages .home-stage-num {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-block-end: 1.4rem;
  border-radius: 1rem;
  color: var(--site-blue);
  background: var(--site-tint);
  font-size: 1.6rem;
  font-weight: 850;
  transition: background-color .3s var(--fm-ease), color .3s var(--fm-ease), border-radius .3s var(--fm-ease);
}

.fm-stages .home-stage-list > li:nth-child(2) .home-stage-num { border-radius: 50%; }
.fm-stages .home-stage-list > li:nth-child(4) .home-stage-num { border-radius: 50%; }

.fm-stages .home-stage-list h3 {
  margin: 0 0 .5rem;
  color: var(--site-navy);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  transition: color .3s var(--fm-ease);
}

.fm-stages .home-stage-list p {
  margin: 0;
  color: var(--site-muted);
  font-size: .96rem;
  transition: color .3s var(--fm-ease);
}

.fm-stages .home-stage-list a:hover,
.fm-stages .home-stage-list a:focus-visible {
  border-color: var(--site-navy);
  background: var(--site-navy);
  transform: translateY(-6px);
}

.fm-stages .home-stage-list a:hover h3,
.fm-stages .home-stage-list a:focus-visible h3 {
  color: #fff;
}

.fm-stages .home-stage-list a:hover p,
.fm-stages .home-stage-list a:focus-visible p {
  color: var(--site-line);
}

.fm-stages .home-stage-list a:hover .home-stage-num,
.fm-stages .home-stage-list a:focus-visible .home-stage-num {
  color: #fff;
  background: var(--site-blue);
}

.fm-stages .home-stage-list a:hover::after,
.fm-stages .home-stage-list a:focus-visible::after {
  color: var(--site-navy);
  background: #fff;
  transform: translateX(6px);
}

[dir="rtl"] .fm-stages .home-stage-list a:hover::after,
[dir="rtl"] .fm-stages .home-stage-list a:focus-visible::after {
  transform: translateX(-6px);
}

.fm-stages .home-stage-more {
  margin: 2.5rem 0 0;
  text-align: center;
}

.fm-stages .home-stage-more a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: .7rem 1.5rem;
  border: 2px solid var(--site-navy);
  border-radius: 999px;
  color: var(--site-navy);
  font-weight: 800;
  text-decoration: none;
  transition: background-color .2s var(--fm-ease), color .2s var(--fm-ease);
}

.fm-stages .home-stage-more a:hover {
  color: #fff;
  background: var(--site-navy);
}

/* Home footer */
#footer.fm-footer {
  padding: 0;
  color: #fff;
  background: var(--site-navy);
  font-size: 1rem;
}

.fm-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  width: min(calc(100% - 2.5rem), 78rem);
  margin-inline: auto;
  padding-block: 3.5rem;
}

.fm-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-block-end: 1rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 850;
  letter-spacing: -.02em;
  text-decoration: none;
  direction: ltr;
}

.fm-footer-logo img {
  max-height: 34px;
  padding: .25rem;
  border-radius: .6rem;
  background: #fff;
}

#footer.fm-footer .copyright {
  color: var(--site-line);
  text-align: start;
}

#footer.fm-footer .copyright strong {
  font-weight: 600;
}

#footer.fm-footer h2 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[dir="rtl"] #footer.fm-footer h2 {
  letter-spacing: 0;
}

.fm-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

#footer.fm-footer a:not(.fm-footer-logo) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: .25em;
  transition: text-decoration-color .2s var(--fm-ease);
}

#footer.fm-footer a:not(.fm-footer-logo):hover {
  text-decoration-color: var(--site-accent);
}

#footer.fm-footer a:focus-visible {
  outline-color: #fff;
}

.back-to-top {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 996;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--site-blue);
  line-height: 0;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--fm-ease), transform .3s var(--fm-ease), visibility .3s, background-color .2s var(--fm-ease);
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  color: #fff;
  background: var(--site-accent);
}

/* ==========================================================================
   Guide, resource, technical and search pages
   ========================================================================== */

.hb-shell {
  padding-block-start: calc(var(--hb-header-height) + 2rem);
}

/* Side navigation */
.hb-sidenav-home {
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 2px solid var(--site-line);
  background: #fff;
  text-align: center;
  transition: background-color .2s var(--fm-ease), color .2s var(--fm-ease), border-color .2s var(--fm-ease);
}

.hb-sidenav-home:hover {
  border-color: var(--site-navy);
}

.hb-sidenav-home[aria-current="page"] {
  border-color: var(--site-navy);
  color: #fff;
  background: var(--site-navy);
}

.hb-navgroup > h2 {
  padding-inline: .85rem;
  color: var(--site-accent);
  font-weight: 800;
}

.hb-navgroup-articles > summary {
  padding: .45rem .85rem;
  color: var(--site-accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.hb-navgroup-articles > summary:hover {
  color: var(--site-blue);
}

.hb-navgroup-articles > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-sidenav a {
  padding: .4rem .85rem;
  border-inline-start: 0;
  border-radius: .7rem;
  transition: background-color .2s var(--fm-ease), color .2s var(--fm-ease), padding .2s var(--fm-ease);
}

[dir="rtl"] .hb-sidenav a {
  border-radius: .7rem;
}

.hb-sidenav a:hover {
  color: var(--site-blue);
  background: var(--site-tint);
  padding-inline-start: 1.1rem;
}

.hb-sidenav a[aria-current="page"] {
  color: #fff;
  background: var(--site-blue);
}

/* Article hero: flat navy panel */
.hb-article > .hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-block-end: 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--fm-radius-l);
  color: #fff;
  background: var(--site-navy);
}

.hb-article > .hero::before,
.hb-article > .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.hb-article > .hero::before {
  inset-block-start: -6rem;
  inset-inline-end: -5rem;
  width: 16rem;
  height: 16rem;
  background: var(--site-blue);
}

.hb-article > .hero::after {
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: .35rem;
  background: var(--site-accent);
  transform: rotate(45deg);
}

.hb-article > .hero h1 {
  max-width: 22ch;
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.08;
}

[dir="rtl"] .hb-article > .hero h1 {
  letter-spacing: 0;
  line-height: 1.3;
}

.hb-article .hero > p {
  color: var(--site-line);
}

.hb-article > .hero a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .45);
}

.hb-article > .hero a:hover {
  color: #fff;
  text-decoration-color: var(--site-accent);
}

.hb-article > .hero a:focus-visible {
  outline-color: #fff;
}

.hb-article > .hero .small {
  color: var(--site-line);
}

.hb-article > .hero .callout {
  margin-block-end: 0;
  border: 0;
  border-radius: var(--fm-radius);
  color: var(--site-ink);
  background: var(--site-green-tint);
}

.hb-article > .hero .callout a {
  color: var(--site-blue);
}

.hb-article > .hero .stage-list {
  gap: .5rem;
  padding: 0;
  list-style: none;
  counter-reset: fm-stage;
}

.hb-article > .hero .stage-list li {
  counter-increment: fm-stage;
}

.hb-article > .hero .stage-list a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.6rem;
  padding: .35rem 1rem .35rem .4rem;
  border-radius: 999px;
  color: var(--site-navy);
  background: #fff;
  text-decoration: none;
  transition: background-color .2s var(--fm-ease), color .2s var(--fm-ease);
}

[dir="rtl"] .hb-article > .hero .stage-list a {
  padding: .35rem .4rem .35rem 1rem;
}

.hb-article > .hero .stage-list a::before {
  content: counter(fm-stage);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: #fff;
  background: var(--site-blue);
  font-size: .85rem;
}

.hb-article > .hero .stage-list a:hover {
  color: #fff;
  background: var(--site-accent);
}

/* Article body */
.hb-article h2 {
  border-block-start: 2px solid var(--site-line);
  font-weight: 850;
  letter-spacing: -.02em;
}

[dir="rtl"] .hb-article h2 {
  letter-spacing: 0;
}

.hb-article h3 {
  color: var(--site-navy);
  font-weight: 800;
}

.content-card.stage {
  margin-block: 1.25rem;
}

.content-card.stage > h2 {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.content-card.stage > h2::before {
  content: "";
  flex: 0 0 .75rem;
  width: .75rem;
  height: .75rem;
  border-radius: .2rem;
  background: var(--site-accent);
  transform: rotate(45deg);
}

.resource-grid {
  gap: 1rem;
}

.article-directory-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .5rem 1.5rem;
  padding-inline-start: 1.25rem;
}

.article-directory-list li {
  break-inside: avoid;
}

.article-directory-list a {
  display: inline-block;
  padding-block: .2rem;
}

.resource-card {
  position: relative;
  padding: 1.4rem 1.35rem 1.25rem;
  border: 2px solid var(--site-line);
  border-radius: var(--fm-radius);
  background: #fff;
  box-shadow: none;
  transition: border-color .25s var(--fm-ease), transform .25s var(--fm-ease), background-color .25s var(--fm-ease);
}

.resource-card::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: .4rem;
  margin-block-end: 1rem;
  border-radius: 999px;
  background: var(--site-blue);
  transition: width .3s var(--fm-ease), background-color .3s var(--fm-ease);
}

.resource-grid > .resource-card:nth-child(3n+2)::before { background: var(--site-accent); }
.resource-grid > .resource-card:nth-child(3n+3)::before { background: var(--site-green); }

.resource-card:hover {
  border-color: var(--site-navy);
  transform: translateY(-4px);
}

.resource-card:hover::before {
  width: 4rem;
}

.resource-card h3 {
  margin-block-start: 0;
  color: var(--site-navy);
}

.resource-card a {
  display: inline-flex;
  align-self: flex-start;
  margin-block-start: auto;
  padding: .45rem 0 0;
  color: var(--site-blue);
  text-decoration: none;
}

.resource-card a:hover {
  color: var(--site-navy);
  text-decoration: underline;
}

/* Make the whole card clickable while keeping one real link */
.resource-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.callout {
  border-inline-start: 0;
  border-radius: var(--fm-radius);
  padding: 1rem 1.2rem 1rem 3rem;
  position: relative;
}

[dir="rtl"] .callout {
  padding: 1rem 3rem 1rem 1.2rem;
}

.callout::before {
  content: "";
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: 1.2rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--site-green);
}

.template {
  border: 2px solid var(--site-line);
  border-radius: var(--fm-radius);
  background: #fff;
}

.hb-article pre {
  padding: 1.1rem 1.25rem;
  border-radius: var(--fm-radius);
  color: #f5f7fb;
  background: var(--site-navy);
  overflow-x: auto;
}

.hb-article pre code {
  padding: 0;
  color: inherit;
  background: transparent;
}

.hb-article :not(pre) > code {
  padding: .1em .4em;
  border-radius: .35rem;
  color: var(--site-navy);
  background: var(--site-tint);
}

.hb-article details:not(.hb-toc-inline) {
  margin-block: .75rem;
  border: 2px solid var(--site-line);
  border-radius: var(--fm-radius);
  background: #fff;
}

.hb-article details:not(.hb-toc-inline) > summary {
  padding: .8rem 1.1rem;
  color: var(--site-navy);
  font-weight: 800;
  cursor: pointer;
}

.hb-article details:not(.hb-toc-inline)[open] {
  border-color: var(--site-blue);
}

.hb-article details:not(.hb-toc-inline) > :not(summary) {
  padding-inline: 1.1rem;
}

/* On-this-page rail */
.hb-toc {
  border-inline-start: 2px solid var(--site-line);
}

.hb-toc > h2 {
  color: var(--site-accent);
  font-weight: 800;
}

.hb-toc a {
  position: relative;
  transition: color .2s var(--fm-ease), transform .2s var(--fm-ease);
}

.hb-toc a:hover {
  color: var(--site-blue);
  transform: translateX(3px);
}

[dir="rtl"] .hb-toc a:hover {
  transform: translateX(-3px);
}

.hb-toc-inline,
.hb-mobile-nav {
  border: 2px solid var(--site-line) !important;
  border-radius: var(--fm-radius) !important;
  background: #fff;
}

/* Pagination */
.hb-pagination a {
  border: 2px solid var(--site-line);
  border-radius: var(--fm-radius);
  background: #fff;
  box-shadow: none;
  transition: border-color .25s var(--fm-ease), background-color .25s var(--fm-ease), transform .25s var(--fm-ease);
}

.hb-pagination a:hover {
  border-color: var(--site-navy);
  background: var(--site-navy);
  transform: translateY(-3px);
}

.hb-pagination a:hover .hb-pg-dir,
.hb-pagination a:hover .hb-pg-title {
  color: #fff;
}

.hb-pagination .hb-pg-dir {
  color: var(--site-accent);
  font-weight: 800;
}

/* Guide footer */
.hb-footer {
  border-block-start: 0;
  color: #fff;
  background: var(--site-navy);
}

.hb-footer p,
.hb-footer a {
  color: #fff;
}

.hb-footer a:hover {
  color: #fff;
  text-decoration-color: var(--site-accent);
}

.hb-footer a:focus-visible {
  outline-color: #fff;
}

/* ==========================================================================
   Motion (enabled by site-motion.js; skipped for reduced motion)
   ========================================================================== */

.fm-motion .fm-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--fm-ease), transform .7s var(--fm-ease);
  transition-delay: var(--fm-delay, 0ms);
}

.fm-motion .fm-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Hover transforms on revealed cards must not wait for the reveal delay */
.fm-motion .resource-card.is-in,
.fm-motion .home-stage-list > li.is-in {
  transition-delay: 0ms;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .fm-stages .home-stage-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .fm-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fm-hero-visual {
    max-width: 28rem;
    margin-block-start: 1rem;
  }

  .fm-stages-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .fm-footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .fm-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #hero.hb-hero.fm-hero {
    padding-block: calc(var(--hb-header-height) + 2.5rem) 3.5rem;
  }

  .fm-stages .home-stage-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .fm-stages .home-stage-list a {
    min-height: 0;
  }

  .fm-hero .hb-hero-actions > a {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding-block: .5rem;
  }

  .fm-hero .hb-hero-actions > .hb-btn-primary {
    padding-inline-start: 1.6rem;
  }

  .fm-shape-a { width: 4.5rem; height: 4.5rem; inset-block-start: -1rem; inset-inline-start: -.75rem; }
  .fm-shape-b { width: 5.5rem; height: 5.5rem; inset-block-end: -1rem; inset-inline-end: -.75rem; }
  .fm-shape-c { inset-inline-start: -.75rem; }

  .fm-footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fm-ticker-track,
  .fm-shape,
  .fm-kicker-dot::after {
    animation: none !important;
  }

  .fm-motion .fm-reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .fm-hero-visual,
  .fm-ticker,
  .hb-article > .hero::before,
  .hb-article > .hero::after {
    display: none !important;
  }

  .hb-article > .hero {
    color: #000;
    background: none;
  }

  .hb-article > .hero h1,
  .hb-article .hero > p,
  .hb-article > .hero a {
    color: #000;
  }
}

/* ==========================================================================
   Responsive refinements (phones and tablets)
   ========================================================================== */

/* Menu toggle: drawn icon, always centered; turns into an X when open */
.mobile-nav-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: #fff;
}

.mobile-nav-toggle > span {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: var(--site-navy);
  font-size: 0;
  color: transparent;
  overflow: visible;
  transition: background-color .2s var(--fm-ease);
}

[dir="rtl"] .mobile-nav-toggle > span {
  margin: -1px -9px 0 0;
}

.mobile-nav-toggle > span::before,
.mobile-nav-toggle > span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--site-navy);
  transition: transform .25s var(--fm-ease), top .25s var(--fm-ease);
}

.mobile-nav-toggle > span::before { top: -6px; }
.mobile-nav-toggle > span::after { top: 6px; }

.mobile-nav-toggle[aria-expanded="true"] {
  border-color: var(--site-navy);
}

.mobile-nav-toggle[aria-expanded="true"] > span {
  background: transparent;
}

.mobile-nav-toggle[aria-expanded="true"] > span::before {
  top: 0;
  transform: rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] > span::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (max-width: 1200px) {
  .hb-nav.navbar-mobile #primary-menu {
    inset-inline: .75rem;
    gap: .35rem;
    padding: .6rem;
  }

  .hb-nav.navbar-mobile #primary-menu > li > a,
  .hb-nav.navbar-mobile #primary-menu > li > a:focus {
    min-height: 48px;
    padding: .7rem 1rem;
    border-radius: .8rem;
    font-size: 1rem;
    white-space: normal;
  }

  .hb-nav.navbar-mobile #primary-menu > li > a.getstarted,
  .hb-nav.navbar-mobile #primary-menu > li > a.getstarted:focus {
    min-height: 48px;
    margin-block-start: .25rem;
    padding: .7rem 1rem;
    border-radius: 999px;
    line-height: 1.25;
    text-align: center;
  }

  .hb-nav.navbar-mobile #primary-menu > li.language-item {
    padding-block-start: .4rem;
    border-block-start: 2px solid var(--site-tint);
  }

  .hb-nav.navbar-mobile .language-control-group {
    display: flex;
    width: 100%;
    margin: 0;
  }

  .hb-nav.navbar-mobile .language-control-group > * {
    flex: 1 1 50%;
  }
}

/* Tablet: one centered column instead of a left-heavy layout */
@media (max-width: 900px) {
  .fm-hero-grid {
    max-width: 40rem;
    gap: 2.5rem;
  }

  #hero.hb-hero.fm-hero h1 {
    max-width: none;
  }

  .fm-hero-visual {
    width: 100%;
    max-width: 30rem;
    margin-block-start: 0;
  }

  .fm-footer-inner {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 2rem;
  }

  .fm-footer-brand {
    grid-column: auto;
  }
}

/* Guide pages on tablets and phones */
@media (max-width: 992px) {
  .hb-shell {
    padding-block-start: calc(var(--hb-header-height) + 1.25rem);
  }

  .hb-mobile-nav > summary,
  .hb-toc-inline > summary {
    min-height: 52px;
    padding: .8rem 1.1rem;
    font-size: 1rem;
    font-weight: 800;
  }

  .hb-mobile-nav > summary::after,
  .hb-toc-inline > summary::after {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    color: var(--site-blue);
    background: var(--site-tint);
    font-size: .8rem;
  }

  .hb-mobile-nav > .hb-sidenav,
  .hb-toc-inline > nav {
    border-block-start: 2px solid var(--site-tint);
  }

  .hb-toc-inline a {
    padding-block: .4rem;
  }
}

@media (max-width: 640px) {
  :root {
    --hb-header-height: 3.75rem;
  }

  /* Home */
  #hero.hb-hero.fm-hero {
    padding-block: calc(var(--hb-header-height) + 1.75rem) 3rem;
  }

  .fm-hero-grid {
    width: min(calc(100% - 2rem), 40rem);
  }

  #hero.hb-hero.fm-hero h1 {
    font-size: clamp(1.85rem, 8.2vw, 2.4rem);
    line-height: 1.16;
  }

  [dir="rtl"] #hero.hb-hero.fm-hero h1 {
    line-height: 1.35;
  }

  #hero.hb-hero.fm-hero .hb-hero-sub {
    font-size: 1.02rem;
    margin-block-end: 1.5rem;
  }

  .fm-hero .hb-hero-kicker {
    max-width: 100%;
    margin-block-end: 1.1rem;
    font-size: .72rem;
    white-space: normal;
  }

  .fm-hero .hb-hero-alt {
    text-align: center;
  }

  .fm-ticker {
    padding-block: .85rem;
  }

  .fm-ticker-track span {
    font-size: 1.25rem;
    gap: 1.4rem;
    padding-inline-end: 1.4rem;
  }

  .fm-footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    width: min(calc(100% - 2rem), 78rem);
    padding-block: 2.5rem;
  }

  .back-to-top {
    inset-block-end: .9rem;
    inset-inline-end: .9rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  /* Guide pages */
  .hb-shell {
    width: min(calc(100% - 1.5rem), var(--hb-shell-width));
  }

  .hb-article > .hero {
    margin-block-end: 1.25rem;
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
  }

  .hb-article > .hero::before {
    width: 10rem;
    height: 10rem;
    inset-block-start: -4.5rem;
    inset-inline-end: -4rem;
  }

  .hb-article > .hero::after {
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    width: 1rem;
    height: 1rem;
  }

  .hb-article > .hero h1 {
    font-size: clamp(1.65rem, 7.4vw, 2.1rem);
    line-height: 1.15;
  }

  .hb-article .hero > p {
    font-size: 1rem;
  }

  .hb-article > .hero .stage-list {
    gap: .4rem;
  }

  .hb-article > .hero .stage-list a {
    min-height: 2.4rem;
    font-size: .92rem;
  }

  .hb-article h2 {
    margin-block: 1.75rem .6rem;
    font-size: 1.35rem;
    line-height: 1.25;
  }

  .hb-article h3 {
    font-size: 1.08rem;
    line-height: 1.3;
  }

  .hb-article pre,
  .template {
    padding: 1rem;
    font-size: .84rem;
    line-height: 1.55;
  }

  .resource-card {
    padding: 1.15rem 1.1rem 1rem;
  }

  .callout {
    padding: .9rem 1rem .9rem 2.6rem;
  }

  [dir="rtl"] .callout {
    padding: .9rem 2.6rem .9rem 1rem;
  }

  .callout::before {
    inset-inline-start: 1rem;
    inset-block-start: 1.2rem;
  }

  .hb-article details:not(.hb-toc-inline) > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .hb-pagination {
    flex-direction: column;
  }

  .hb-pagination a {
    width: 100%;
    max-width: none;
  }

}

@media (max-width: 360px) {
  .hb-logo span,
  #header.hb-header .hb-logo span {
    font-size: 1.05rem;
  }

  .fm-hero .hb-hero-kicker {
    letter-spacing: .03em;
  }
}