@font-face {
  font-family: "SOS Arabic";
  src: url("/fonts/NotoNaskhArabic-Regular.ttf") format("truetype");
  font-display: swap;
}

.friendly-page {
  --ink: #173b55;
  --blue: #168fc0;
  --blue-deep: #0879a9;
  --blue-soft: #e7f4f8;
  --paper: #f8f7f1;
  --white: #fffefa;
  --muted: #587081;
  --line: #d9e3e4;
  --sage: #e7eee5;
  --sand: #f3e8d7;
  --coral: #bd765d;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 85% 16%, rgba(225, 239, 237, .72), transparent 34rem),
    var(--paper);
  font-family: "SOS Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  overflow: hidden;
  position: relative;
}

.friendly-page *, .friendly-page *::before, .friendly-page *::after { box-sizing: border-box; }
.friendly-page[lang="en"] { font-family: system-ui, sans-serif; }
.friendly-page button { font: inherit; }
.friendly-shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; position: relative; z-index: 1; }
.friendly-topbar { min-height: 94px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(23,59,85,.11); }
.friendly-brand { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; }
.friendly-brand img { width: 192px; height: auto; display: block; }
.friendly-brand-note { font-size: 13px; line-height: 1.4; color: #587081; border-inline-start: 1px solid var(--line); padding-inline-start: 15px; }
.friendly-tools { display: flex; align-items: center; gap: 11px; }
.friendly-staff, .friendly-language { min-height: 44px; border: 1px solid #cad9dc; background: rgba(255,254,250,.72); color: var(--ink); padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.friendly-staff { display: flex; gap: 9px; align-items: center; }
.friendly-staff:hover, .friendly-language:hover { background: white; border-color: #82b9ca; transform: translateY(-1px); }
.friendly-language { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 650; }
.friendly-page button:focus-visible, .friendly-page [tabindex]:focus-visible { outline: 3px solid #b96645; outline-offset: 3px; }

.friendly-main { padding: 56px 0 0; }
.friendly-intro { max-width: 790px; margin: 0 auto; text-align: center; animation: friendly-in .55s ease both; }
.friendly-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-deep); background: var(--blue-soft); border: 1px solid #c8e2e9; border-radius: 999px; padding: 7px 15px; font-size: 14px; }
.friendly-eyebrow-mark { width: 8px; height: 8px; border-radius: 50%; background: #319a82; box-shadow: 0 0 0 4px rgba(49,154,130,.12); }
.friendly-title { font-size: clamp(38px, 5vw, 60px); letter-spacing: -.025em; line-height: 1.3; font-weight: 700; margin: 19px 0 12px; color: #153d59; }
.friendly-subtitle { max-width: 650px; margin: auto; color: #4f6878; font-size: 20px; line-height: 1.85; }
.friendly-note { display: flex; align-items: flex-start; gap: 12px; max-width: 670px; margin: 24px auto 0; padding: 15px 19px; border-radius: 14px; background: rgba(255,254,250,.76); border: 1px solid #e6dfcf; text-align: start; color: #536c78; font-size: 15px; line-height: 1.7; }
.friendly-note svg { flex: 0 0 auto; color: #b3754f; margin-top: 4px; }

.friendly-choice-head { display: flex; align-items: center; gap: 16px; margin: 41px 0 16px; }
.friendly-choice-head::before, .friendly-choice-head::after { content: ""; height: 1px; flex: 1; background: #d9e2df; }
.friendly-choice-head span { color: #557080; font-size: 16px; white-space: nowrap; }
.friendly-regions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; max-width: 780px; margin: 0 auto; }
.friendly-region {
  min-height: 174px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: start; cursor: pointer; padding: 23px 26px; border-radius: 20px;
  border: 1px solid #d9e4e3; background: var(--white); color: var(--ink);
  box-shadow: 0 8px 26px rgba(36,72,83,.045);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.friendly-region:hover { transform: translateY(-3px); border-color: #8dbfce; box-shadow: 0 15px 34px rgba(36,72,83,.1); }
.friendly-region-copy { display: flex; flex-direction: column; gap: 5px; }
.friendly-region-label { font-size: 13px; color: #66808d; }
.friendly-region-name { font-size: 29px; line-height: 1.45; font-weight: 700; }
.friendly-region-action { color: var(--blue-deep); font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.friendly-region-icon { width: 58px; height: 58px; border-radius: 19px; background: #e9f4f5; color: #2088a8; display: grid; place-items: center; flex: 0 0 auto; }
.friendly-region:nth-child(2) .friendly-region-icon { background: #f3ece0; color: #a76f4c; }

.friendly-secondary { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 27px auto 0; }
.friendly-secondary button { border: 0; background: transparent; color: #176f91; cursor: pointer; padding: 9px 10px; text-decoration: underline; text-decoration-color: #a4c5cd; text-underline-offset: 5px; border-radius: 7px; font-size: 16px; }
.friendly-secondary button:hover { color: #0c536e; background: rgba(219,238,240,.45); }
.friendly-secondary-divider { width: 1px; height: 19px; background: #d3dfdf; }

.friendly-after { width: min(850px, calc(100% - 64px)); margin: 53px auto 0; border-top: 1px solid #dce4e0; padding: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 23px; }
.friendly-promise { display: flex; gap: 12px; align-items: flex-start; color: #496475; font-size: 14px; line-height: 1.65; }
.friendly-promise-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #247f95; background: #e3f0ef; border-radius: 12px; }
.friendly-promise strong { display: block; color: #244b62; font-size: 15px; margin-bottom: 2px; }
.friendly-emergency { width: min(850px, calc(100% - 64px)); margin: 25px auto 0; background: #f5ebdc; border-inline-start: 3px solid #ba795b; padding: 12px 15px; border-radius: 4px 12px 12px 4px; color: #674e40; font-size: 14px; line-height: 1.7; }
.friendly-footer { padding: 24px 12px 28px; text-align: center; color: #7b8c8e; font-size: 12px; }

.friendly-art { position: absolute; width: 240px; height: 240px; left: max(2vw, calc((100vw - 1340px)/2)); top: 195px; opacity: .64; pointer-events: none; }
.friendly-art svg { width: 100%; height: 100%; overflow: visible; }
.friendly-art-right { left: auto; right: max(2vw, calc((100vw - 1340px)/2)); top: 295px; width: 155px; height: 155px; opacity: .5; }

.friendly-modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(15,42,59,.42); backdrop-filter: blur(4px); animation: friendly-fade .16s ease both; }
.friendly-dialog { width: min(470px, 100%); position: relative; background: #fffefa; border: 1px solid rgba(255,255,255,.7); border-radius: 23px; padding: 30px; box-shadow: 0 25px 80px rgba(18,48,64,.25); animation: friendly-dialog-in .2s ease both; }
.friendly-dialog-close { position: absolute; top: 15px; inset-inline-end: 15px; width: 42px; height: 42px; border: 1px solid #d9e3e3; border-radius: 50%; background: #f7f8f3; color: #31566a; display: grid; place-items: center; cursor: pointer; }
.friendly-dialog-symbol { width: 48px; height: 48px; border-radius: 16px; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; margin-bottom: 16px; }
.friendly-dialog h2 { font-size: 27px; line-height: 1.5; margin: 0 45px 8px 0; color: var(--ink); }
.friendly-dialog p { color: #536d7b; font-size: 16px; line-height: 1.8; margin: 0 0 18px; }
.friendly-dialog-preview { background: #f4f4ed; color: #586e73; border: 1px solid #e3e5da; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.friendly-dialog-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 12px; padding: 10px 16px; background: var(--blue-deep); color: white; cursor: pointer; font-weight: 650; }
.friendly-dialog-action:hover { background: #08678f; }
.friendly-preview-input { width: 100%; min-height: 49px; margin: 0 0 13px; padding: 10px 13px; direction: inherit; border: 1px solid #bdced0; border-radius: 11px; color: var(--ink); background: white; font: inherit; }
.friendly-preview-input:focus-visible { outline: 3px solid #b96645; outline-offset: 2px; }

@keyframes friendly-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes friendly-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes friendly-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 950px) { .friendly-art { width: 170px; height: 170px; top: 220px; left: 0; opacity: .37; } .friendly-art-right { display: none; } }
@media (max-width: 680px) {
  .friendly-shell { width: min(100% - 36px, 520px); }
  .friendly-topbar { min-height: 78px; }
  .friendly-brand img { width: 144px; }
  .friendly-brand-note { display: none; }
  .friendly-tools { gap: 7px; }
  .friendly-staff { padding: 9px 12px; }
  .friendly-staff-label { display: none; }
  .friendly-staff svg { width: 19px; height: 19px; }
  .friendly-language { min-height: 42px; padding: 7px 12px; }
  .friendly-main { padding-top: 37px; }
  .friendly-title { font-size: clamp(35px, 10vw, 47px); margin-top: 16px; }
  .friendly-subtitle { font-size: 17px; line-height: 1.8; }
  .friendly-note { margin-top: 19px; font-size: 14px; padding: 12px 14px; }
  .friendly-choice-head { margin-top: 30px; gap: 10px; }
  .friendly-choice-head span { font-size: 14px; }
  .friendly-regions { grid-template-columns: 1fr; gap: 12px; }
  .friendly-region { min-height: 126px; padding: 18px 20px; border-radius: 17px; }
  .friendly-region-name { font-size: 25px; }
  .friendly-region-icon { width: 49px; height: 49px; }
  .friendly-secondary { margin-top: 20px; gap: 6px; }
  .friendly-secondary button { font-size: 15px; padding: 9px 7px; }
  .friendly-after { width: calc(100% - 36px); grid-template-columns: 1fr; gap: 14px; margin-top: 32px; padding-top: 19px; }
  .friendly-promise { font-size: 14px; }
  .friendly-emergency { width: calc(100% - 36px); margin-top: 22px; }
  .friendly-footer { padding-bottom: 23px; }
  .friendly-art { width: 110px; height: 110px; top: 178px; left: -39px; opacity: .23; }
  .friendly-dialog { padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .friendly-page *, .friendly-page *::before, .friendly-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* The approved React preview becomes server-rendered, progressively enhanced
   navigation. These adaptations retain its styling without a new UI runtime. */
body { margin: 0; }
.friendly-page svg { display: block; flex-shrink: 0; }
.friendly-page a { text-decoration: none; }
.friendly-page a:focus-visible { outline: 3px solid #b96645; outline-offset: 3px; }
.friendly-secondary a { color: #176f91; cursor: pointer; padding: 9px 10px; text-decoration: underline; text-decoration-color: #a4c5cd; text-underline-offset: 5px; border-radius: 7px; font-size: 16px; }
.friendly-secondary a:hover { color: #0c536e; background: rgba(219,238,240,.45); }
.friendly-language { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.friendly-help-fallback { max-width: 850px; margin-top: 25px; color: #536d7b; line-height: 1.8; }
.friendly-empty { text-align: center; color: var(--ink); line-height: 1.8; padding: 20px; }
dialog.friendly-dialog { position: fixed; inset: 0; max-width: calc(100vw - 40px); max-height: calc(100dvh - 40px); overflow: auto; margin: auto; color: var(--ink); }
.friendly-dialog::backdrop { background: rgba(15,42,59,.42); backdrop-filter: blur(4px); }
@media (max-width: 680px) {
  .friendly-secondary a { font-size: 15px; padding: 9px 7px; }
}