@font-face { font-family: "Noto Sans Arabic"; src: url("NotoSansArabic.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap; }
:root { --canvas: #FBF2DC; --paper: #FFFBF2; --ink: #263A32; --muted: #6A7169; --hair: rgba(38, 58, 50, .14); --mint: #9BD7B8; --mint-ink: #33705C; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); font: 500 17px/1.8 "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--mint-ink); outline-offset: 4px; border-radius: 6px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip-link { position: absolute; top: 8px; inset-inline-start: 16px; z-index: 2; padding: 8px 16px; background: var(--ink); color: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
main { flex: 1; padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 112px); }
.intro { max-width: 760px; margin-inline: auto; }
h1 { margin: 0; font-size: clamp(38px, 6.6vw, 72px); font-weight: 850; line-height: 1.3; }
.intro p { margin: 20px 0 0; color: var(--muted); font-size: clamp(17px, 1.9vw, 20px); }
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 760px; margin: 40px auto 0; }
.method { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px; border: 1px solid var(--hair); border-radius: 28px; background: var(--paper); text-decoration: none; }
.method:hover { border-color: var(--mint-ink); background: color-mix(in srgb, var(--mint) 12%, var(--paper)); }
.method svg { width: 32px; height: 32px; margin-bottom: 20px; color: var(--mint-ink); }
h2 { margin: 0; font-size: 23px; font-weight: 850; line-height: 1.5; }
.destination { max-width: 100%; margin-top: 8px; color: var(--muted); font-size: 16px; overflow-wrap: anywhere; }
.action { margin-top: 28px; color: var(--mint-ink); font-size: 15px; font-weight: 800; }
.action span { margin-inline-start: 6px; }
@media (max-width: 600px) { .methods { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } .method { padding: 24px; border-radius: 24px; } .method svg { margin-bottom: 14px; } .action { margin-top: 20px; } }