/* M-01–M-04 الموقع التسويقي — مصدر القياسات design/website/site.css (D-114). الألوان من design/tokens.css. لا موارد خارجية (القاعدة 8). */
/* رموز النظام كمتغيرات CSS (القيم من tokens.json المنشور) — مكوّنات Dour تعتمد عليها */
:root {
  --dour-primary-50: #EAF2F1; --dour-primary-100: #CDE1DF; --dour-primary-200: #9FC6C2; --dour-primary-300: #6FA9A4; --dour-primary-400: #3D8781;
  --dour-primary-500: #1A6B65; --dour-primary-600: #0E5C56; --dour-primary-700: #0B4A45; --dour-primary-800: #083832; --dour-primary-900: #052622;
  --dour-accent: #E0A64B; --dour-whatsapp: #1E8E5A; --dour-whatsapp-fill: #166F47; --dour-whatsapp-hover: #105536; --dour-whatsapp-press: #0B4A45;
  --dour-success: #1E8E5A; --dour-success-ink: #166F47; --dour-danger: #C7362F; --dour-danger-hover: #AE2C26; --dour-danger-press: #92231E; --dour-danger-tint: #FDF2F1;
  --dour-warning: #D98324; --dour-warning-ink: #9A5A12; --dour-warning-tint: #FFF8EF; --dour-info: #2A6F97;
  --dour-bg: #FAF9F7; --dour-canvas: #EDEBE7; --dour-surface: #FFFFFF; --dour-border: #E4E1DC; --dour-fg: #1C1B19; --dour-fg-muted: #6B6862; --dour-ink-raised: #252320;
  --surface-page: var(--dour-bg); --surface-card: var(--dour-surface); --surface-selected: var(--dour-primary-50); --surface-nav: var(--dour-primary-600); --surface-toast: var(--dour-fg);
  --text-body: var(--dour-fg); --text-muted: var(--dour-fg-muted); --text-on-primary: #FFFFFF; --text-on-accent: var(--dour-fg); --text-link: var(--dour-primary-600); --text-disabled: var(--dour-primary-200);
  --action-primary: var(--dour-primary-600); --action-primary-hover: var(--dour-primary-500); --action-primary-press: var(--dour-primary-700); --action-cta: var(--dour-accent); --action-disabled: var(--dour-border);
  --line: var(--dour-border); --line-strong: var(--dour-fg-muted); --scrim: rgba(28, 27, 25, 0.45);
  --dour-radius-sm: 6px; --dour-radius-md: 10px; --dour-radius-pill: 999px; --dour-radius-brand: 3px; --dour-border-w: 1px; --dour-edge-flag: 4px;
  --dour-ring-inner: #1C1B19; --dour-ring-color: #E0A64B; --dour-ring: 0 0 0 2px #1C1B19, 0 0 0 5px #E0A64B; --dour-popover: 0 4px 12px rgb(28 27 25 / 0.10);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --dour-tap: 44px; --dour-tap-critical: 56px; --dour-field-h: 48px; --dour-nav-bottom-h: 72px;
  --font-dour: Tajawal, system-ui, "Noto Sans Arabic", Tahoma, sans-serif; 
}
.site, .rf {
  --p50: var(--dour-primary-50, #EAF2F1); --p100: var(--dour-primary-100, #CDE1DF); --p200: var(--dour-primary-200, #9FC6C2);
  --p500: var(--dour-primary-500, #1A6B65); --p600: var(--dour-primary-600, #0E5C56); --p700: var(--dour-primary-700, #0B4A45);
  --amber: var(--dour-accent, #E0A64B); --wa: #166F47; --ok: #1E8E5A;
  --bg: var(--dour-bg, #FAF9F7); --canvas: #EDEBE7; --line: var(--dour-border, #E4E1DC);
  --ink: var(--dour-fg, #1C1B19); --mut: var(--dour-fg-muted, #6B6862);
  --warn: #D98324; --warn-ink: #9A5A12; --warn-tint: #FFF8EF; --dng: #C7362F;
  font-family: var(--font-dour, Tajawal, system-ui, "Noto Sans Arabic", Tahoma, sans-serif);
  font-size: 16px; line-height: 26px; color: var(--ink); direction: rtl; text-align: start;
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.site *, .rf * { box-sizing: border-box; }
.site { background: var(--bg); }
.site h1, .site h2, .site h3, .site p, .site ul, .site ol, .rf h3, .rf p { margin: 0; padding: 0; }
.site ul, .site ol { list-style: none; }
.site a:focus-visible, .site summary:focus-visible, .site button:focus-visible, .rf select:focus-visible, .rf a:focus-visible {
  outline: 2px solid #1C1B19; outline-offset: 0; box-shadow: 0 0 0 5px #E0A64B; border-radius: 6px;
}
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.wrap { max-width: 1248px; margin-inline: auto; padding-inline: 48px; }
.sec { padding-block: 96px; }
.sec-white { background: #fff; border-block: 1px solid var(--line); }
.sec-canvas { background: var(--canvas); }
.d1 { font-size: 104px; line-height: 1.12; font-weight: 700; }
.d2 { font-size: 64px; line-height: 1.16; font-weight: 700; }
.lead { font-size: 22px; line-height: 36px; color: var(--mut); }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 22px; font-weight: 700; color: var(--p600); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--p600); }
.tlink { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.tlink:hover { background: var(--p50); color: var(--p600); }
.wa-num { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: none; }
.wa-num:hover { color: var(--wa); }

/* 1 الشريط */
.hdr { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.hdr-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: 24px; flex: 1; }
.hdr-end { display: flex; align-items: center; gap: 12px; }
.hdr-menu { display: none; position: relative; }
.hdr-menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.hdr-menu summary::-webkit-details-marker { display: none; }
.hdr-menu .bars { width: 18px; height: 12px; border-block: 2px solid var(--ink); position: relative; }
.hdr-menu .bars::after { content: ""; position: absolute; inset-inline: 0; top: 3px; height: 2px; background: var(--ink); }
.hdr-pop { position: absolute; inset-inline-end: 0; top: 52px; width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; box-shadow: 0 4px 12px rgb(28 27 25 / 0.10); }
.hdr-pop .tlink { min-height: 48px; }

/* 2 البطل */
.hero { padding-block: 64px 96px; }
.hero h1 { max-width: 1100px; }
.hero h1 em { font-style: normal; color: var(--p600); }
.hero-row { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: center; margin-top: 48px; }
.hero-vis { position: relative; padding-inline-end: 220px; padding-bottom: 48px; }
.hero-txt { display: flex; flex-direction: column; gap: 32px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; line-height: 22px; color: var(--mut); border-top: 1px solid var(--line); padding-top: 16px; }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 6px; height: 6px; background: var(--p600); }

.tv { container-type: inline-size; container-name: tv; }
.tv-screen { aspect-ratio: 16 / 9; display: grid; grid-template-rows: auto 1fr auto; background: #fff; border: 10px solid var(--ink); border-radius: 10px; overflow: hidden; }
.tv-top { display: flex; align-items: center; justify-content: space-between; padding: calc(2 * var(--u)) calc(3 * var(--u)); border-bottom: 1px solid var(--line); font-weight: 700; font-size: calc(2.6 * var(--u)); line-height: 1.3; }
.tv-clinic { display: flex; align-items: center; gap: calc(1.6 * var(--u)); }
.tv-ini { display: grid; place-items: center; width: calc(5 * var(--u)); height: calc(5 * var(--u)); background: var(--p600); color: #fff; border-radius: 6px; font-size: calc(2.4 * var(--u)); }
.tv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.6 * var(--u)); background: var(--bg); border-inline-start: 1px solid var(--line); padding: calc(2 * var(--u)) calc(1 * var(--u)); text-align: center; }
.tv-col:first-child { border-inline-start: 0; }
.tv-doc { font-size: calc(3.2 * var(--u)); line-height: 1.3; font-weight: 700; }
.tv-room { font-size: calc(2 * var(--u)); line-height: 1.4; color: var(--mut); }
.tv-num { font-size: calc(17 * var(--u)); line-height: 1; font-weight: 700; color: var(--p600); }
.tv-col.mute .tv-num { color: var(--mut); }
.tv-next { font-size: calc(2.3 * var(--u)); line-height: 1.4; color: var(--mut); }
.tv-foot { padding: calc(1.4 * var(--u)) calc(3 * var(--u)); border-top: 1px solid var(--line); font-size: calc(1.9 * var(--u)); line-height: 1.4; color: var(--mut); display: flex; justify-content: space-between; }
.tv-stand { width: 28%; height: 10px; margin: 0 auto; background: var(--ink); border-radius: 0 0 6px 6px; }
.tv-col.call { background: var(--amber); animation: callIn 4s ease-out infinite; }
.tv-col.call .tv-num, .tv-col.call .tv-room, .tv-col.call .tv-next { color: var(--ink); }
.tv-col.call .tv-num { animation: numIn 4s ease-out infinite; }
.tv-wave { display: none; position: absolute; top: calc(2 * var(--u)); inset-inline-start: calc(2 * var(--u)); height: calc(5 * var(--u)); padding: 0 calc(1.4 * var(--u)); align-items: center; gap: calc(0.5 * var(--u)); background: var(--ink); border-radius: 999px; }
.tv-col.call .tv-wave { display: flex; }
.tv-wave i, .wave i { display: block; width: 3px; height: 60%; background: var(--amber); border-radius: 2px; animation: wave 0.9s ease-in-out infinite; transform-origin: center; }
.tv-wave i:nth-child(2), .wave i:nth-child(2) { animation-delay: 0.09s; }
.tv-wave i:nth-child(3), .wave i:nth-child(3) { animation-delay: 0.18s; }
.tv-wave i:nth-child(4), .wave i:nth-child(4) { animation-delay: 0.27s; }
.tv-wave i:nth-child(5), .wave i:nth-child(5) { animation-delay: 0.36s; }
@keyframes callIn { 0% { background: #fff; } 10%, 100% { background: var(--amber); } }
@keyframes numIn { 0% { opacity: 0; transform: translateY(8%); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.callline { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 16px; line-height: 26px; font-weight: 500; }
.wave { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 10px; background: var(--ink); border-radius: 999px; flex: none; }

.ph { position: absolute; inset-inline-end: 0; bottom: 0; width: 196px; height: 393px; border: 8px solid var(--ink); border-radius: 24px; background: var(--bg); overflow: hidden; }
.ph-in { width: 360px; height: 754px; transform: scale(0.5); transform-origin: top right; display: flex; flex-direction: column; }
.ph-top { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #fff; border-bottom: 1px solid var(--line); }
.ph-top b { font-size: 20px; line-height: 28px; display: block; }
.ph-top small { font-size: 12px; line-height: 18px; color: var(--mut); }
.ph-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ph-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ph-tk { display: flex; align-items: center; gap: 16px; }
.ph-tk .n { font-size: 48px; line-height: 1; font-weight: 700; color: var(--p600); }
.ph-tk b { font-size: 20px; line-height: 28px; display: block; }
.ph-tk small { font-size: 14px; line-height: 22px; color: var(--mut); }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 22px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.ph-nav { display: grid; grid-template-columns: repeat(3, 1fr); height: 72px; background: #fff; border-top: 1px solid var(--line); }
.ph-nav span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--mut); }
.ph-nav span.on { color: var(--p600); font-weight: 700; box-shadow: inset 0 2px 0 var(--p600); }

/* 3 الرحلة */
.jr-head { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; margin-bottom: 48px; }
.jr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.st { display: flex; flex-direction: column; gap: 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.st-no { font-size: 48px; line-height: 1; font-weight: 700; color: var(--p200); }
.st-who { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--p600); }
.st-text h3 { font-size: 24px; line-height: 32px; font-weight: 700; margin-block: 4px 8px; }
.st-text p { color: var(--mut); }
.st-top { display: flex; align-items: baseline; gap: 16px; }
.jr-prog { display: none; }
.jr.sticky { grid-template-columns: 5fr 6fr; column-gap: 64px; row-gap: 0; }
.jr.sticky .st { display: contents; }
.jr.sticky .st-text { grid-column: 1; min-height: 440px; display: flex; flex-direction: column; justify-content: center; opacity: 0.35; transition: opacity 0.45s ease; }
.jr.sticky .st.on .st-text { opacity: 1; }
.jr.sticky .st-screen { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 148px; align-self: start; opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
.jr.sticky .st.on .st-screen { opacity: 1; transform: none; pointer-events: auto; }
.jr.sticky .jr-prog { display: flex; align-items: center; gap: 8px; grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 96px; align-self: start; height: 44px; z-index: 2; }
.jr-prog a { display: grid; place-items: center; width: 24px; height: 44px; }
.jr-prog a i { display: block; width: 10px; height: 10px; border-radius: 999px; background: var(--p200); transition: width 0.3s ease, background 0.3s ease; }
.jr-prog a.on { width: 44px; }
.jr-prog a.on i { width: 32px; background: var(--p600); }
.jr-prog span { margin-inline-start: 12px; font-size: 14px; line-height: 22px; color: var(--mut); }

.scr { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.scr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--mut); }
.scr-bar b { color: var(--ink); }
.scr-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 16px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 22px; background: #fff; }
.chip.on { background: var(--p50); border-color: var(--p600); color: var(--p600); font-weight: 700; }
.tk { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--p50); border: 1px solid var(--p600); border-radius: 10px; }
.tk .n { font-size: 48px; line-height: 1; font-weight: 700; color: var(--p600); }
.tk small { display: block; font-size: 14px; line-height: 22px; color: var(--mut); }
.lbl { font-size: 14px; line-height: 22px; font-weight: 500; margin-bottom: 8px; display: block; }
.box { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: #fff; }
.rx { display: flex; flex-direction: column; gap: 8px; direction: ltr; text-align: left; }
.rx div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 22px; }
.rx b { font-weight: 700; }
.rows > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.rows > div.sum { border-bottom: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.note { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 22px; color: var(--mut); }
.lab { display: grid; }
.lab > div { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); border-inline-start: 4px solid transparent; font-size: 14px; line-height: 22px; }
.lab > div.hd { color: var(--mut); font-size: 12px; line-height: 18px; font-weight: 500; padding-block: 8px; }
.lab > div.flag { background: var(--warn-tint); border-inline-start-color: var(--warn); }
.lab .t { direction: ltr; text-align: left; font-weight: 700; }
.lab .v { direction: ltr; text-align: left; }
.lab .f { display: inline-flex; align-items: center; gap: 4px; justify-self: end; font-weight: 700; color: var(--warn-ink); }
.lab .f.okv { color: var(--mut); font-weight: 400; }
.chat { background: var(--canvas); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bub { align-self: flex-start; max-width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 22px; }
.bub a { color: var(--p600); font-weight: 700; }
.bub time { display: block; text-align: end; font-size: 12px; line-height: 18px; color: var(--mut); }
.pub { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pub b { font-size: 20px; line-height: 28px; }

/* 4 المالك */
.own { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.own-txt { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 120px; }
.own-txt strong { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--p600); }
.own-board { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.log h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: 12px; }
.log li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.log time { font-size: 14px; line-height: 26px; color: var(--mut); direction: ltr; }
.log b { display: block; font-weight: 700; }
.log .who { font-size: 14px; line-height: 22px; color: var(--mut); }
.log .why { display: block; margin-top: 8px; padding: 8px 12px; background: var(--warn-tint); border: 1px solid var(--line); border-inline-start: 4px solid var(--warn); border-radius: 6px; font-size: 14px; line-height: 22px; color: var(--warn-ink); }

/* 5 عدن */
.aden-head { max-width: 860px; margin-bottom: 48px; }
.aden { display: grid; grid-template-columns: 7fr 5fr; column-gap: 64px; }
.aden li { border-top: 2px solid var(--ink); padding-block: 24px 48px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; }
.aden li > span { font-size: 14px; line-height: 40px; font-weight: 700; color: var(--mut); direction: ltr; text-align: right; }
.aden h3 { font-size: 32px; line-height: 40px; font-weight: 700; margin-bottom: 8px; }
.aden p { color: var(--mut); max-width: 520px; }

/* 6 الأسعار */
.pr-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.seg { display: inline-flex; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 6px; gap: 4px; }
.seg button { min-height: 44px; padding-inline: 16px; border: 0; border-radius: 4px; background: transparent; font: inherit; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.seg button:hover { background: var(--p50); }
.seg button.on { background: var(--p600); color: #fff; font-weight: 700; }
.seg button small { font-size: 12px; line-height: 18px; font-weight: 500; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 10px; transition: border-color 0.2s ease, background-color 0.2s ease; }
.plan:hover { border-color: var(--p600); background: var(--p50); }
.plan-feat { background: var(--p50); border-color: var(--p600); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.plan-top b { font-size: 20px; line-height: 28px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font-size: 64px; line-height: 1; font-weight: 700; color: var(--p600); direction: ltr; }
.price span { color: var(--mut); }
.lim { display: grid; }
.lim li { display: flex; justify-content: space-between; gap: 12px; padding-block: 12px; border-top: 1px solid var(--line); }
.lim li b { font-weight: 700; }
.plan-btn { margin-top: auto; }
.pr-all { display: grid; grid-template-columns: 7fr 5fr; gap: 12px; margin-top: 12px; }
.pr-all > div { padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.pr-all h3 { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--mut); margin-bottom: 12px; }
.incl { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 20px; line-height: 28px; font-weight: 700; }
.incl li { display: flex; align-items: center; gap: 8px; }
.incl li::before { content: ""; width: 8px; height: 8px; background: var(--p600); }

/* 7 الأسئلة */
.faq { display: grid; grid-template-columns: 4fr 8fr; gap: 64px; align-items: start; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding-block: 16px; font-size: 24px; line-height: 32px; font-weight: 700; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--p600); }
.faq-list summary::after { content: "+"; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; font-size: 24px; font-weight: 400; color: var(--p600); transition: transform 0.2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 24px; max-width: 640px; color: var(--mut); font-size: 18px; line-height: 30px; }

/* 8 التسجيل */
.reg { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.reg-txt { display: flex; flex-direction: column; gap: 24px; }
.reg-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding-block: 12px; border-top: 1px solid var(--line); }
.reg-steps li span { font-weight: 700; color: var(--p600); direction: ltr; text-align: right; }
.rf { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.rf form, .rf-done { display: flex; flex-direction: column; gap: 24px; }
.rf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rf h3 { font-size: 24px; line-height: 32px; font-weight: 700; }
.cg { border: 0; padding: 0; margin: 0; min-width: 0; }
.cg legend, .rf .lbl { font-size: 14px; line-height: 22px; font-weight: 500; padding: 0; margin-bottom: 8px; }
.cg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ch { position: relative; flex: 1 1 auto; }
.ch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ch span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; white-space: nowrap; }
.ch span small { font-size: 12px; line-height: 18px; color: var(--mut); direction: ltr; }
.ch input:hover + span { border-color: var(--mut); }
.ch input:checked + span { background: var(--p50); border-color: var(--p600); color: var(--p600); font-weight: 700; }
.ch input:focus-visible + span { outline: 2px solid #1C1B19; box-shadow: 0 0 0 5px #E0A64B; }
.ch input:disabled + span { background: var(--bg); color: var(--mut); }
.sel { width: 100%; height: 48px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.sel:disabled { background: var(--bg); color: var(--mut); }
.rf-err { display: block; margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--dng); }
.rf-act { display: flex; flex-direction: column; gap: 12px; }
.rf-fine { font-size: 14px; line-height: 22px; color: var(--mut); }
.rf-done { align-items: flex-start; padding-block: 24px; animation: fadeIn 0.3s ease both; }
.rf-done .tile { width: 88px; height: 88px; display: grid; place-items: center; background: var(--p50); border: 1px solid var(--ok); border-radius: 10px; color: var(--wa); }
.rf-done h3 { font-size: 32px; line-height: 40px; }
.rf-done p { font-size: 18px; line-height: 30px; color: var(--mut); max-width: 440px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 761px) {
  .rf { padding: 32px; }
  .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-full { grid-column: 1 / -1; }
  .rf-act { flex-direction: row; align-items: center; gap: 16px; }
}
.rp-top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.rp { padding-block: 48px 96px; }
.rp h1 { font-size: 64px; line-height: 1.16; font-weight: 700; }

/* 9 الختام */
.fin { background: var(--p600); color: #fff; }
.fin-in { display: grid; grid-template-columns: 8fr 4fr; gap: 64px; align-items: center; }
.fin-txt { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.fin .lead { color: var(--p100); }
.fin-card { background: #fff; color: var(--ink); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.fin-card img { width: 200px; height: 200px; display: block; }
.fin-card p { font-weight: 700; }

/* 10 التذييل */
.ftr { background: var(--canvas); padding-block: 48px 32px; }
.ftr-in { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 48px; align-items: start; }
.ftr p { color: var(--mut); max-width: 360px; margin-top: 16px; }
.ftr nav { display: grid; }
.ftr nav a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.ftr nav a:hover { color: var(--p600); text-decoration: underline; }
.dev { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dev span { font-size: 14px; line-height: 22px; color: var(--mut); }
.dev a { display: block; padding: 24px; margin: -24px; margin-top: 0; border-radius: 6px; }
.dev img { display: block; width: 160px; height: auto; }
.ftr-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--mut); }

/* الظهور عند التمرير — يعمل فقط مع .js */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .rv.s1 { transition-delay: 0.08s; }
.js .rv.s2 { transition-delay: 0.16s; }
.js .rv.s3 { transition-delay: 0.24s; }
.js .rv[data-in] { opacity: 1; transform: none; }
.js .aden li.rv { transform: none; border-top-color: transparent; background: linear-gradient(var(--ink), var(--ink)) top right / 0% 2px no-repeat; transition: opacity 0.5s ease 0.2s, background-size 0.5s ease; }
.js .aden li.rv[data-in] { background-size: 100% 2px; }


/* الجوال */
@media (max-width: 760px) {
  .wrap { padding-inline: 16px; }
  .sec { padding-block: 48px; }
  .d1 { font-size: 40px; line-height: 1.25; }
  .d2 { font-size: 36px; line-height: 1.25; }
  .lead { font-size: 18px; line-height: 30px; }
  .hdr-in { height: 64px; gap: 8px; justify-content: space-between; }
  .hdr-nav, .hdr-login { display: none; }
  .hdr-menu { display: block; }
  .hero { padding-block: 32px 48px; }
  .hero-row { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
  .hero-txt { order: -1; gap: 24px; }
  .hero-vis { padding-inline-end: 0; padding-bottom: 0; }
  .tv-screen { border-width: 6px; }
  .tv-wave i { width: 2px; }
  .callline { font-size: 14px; line-height: 22px; }
  .ph { position: relative; margin-top: 24px; margin-inline-start: auto; }
  .jr-head, .own, .aden, .faq, .reg, .fin-in, .ftr-in, .pr-all { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jr-head { margin-bottom: 24px; }
  .jr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st { padding: 16px; gap: 16px; }
  .own-txt { position: static; }
  .own-board { padding: 12px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .log li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .aden-head { margin-bottom: 24px; }
  .aden li { grid-template-columns: 32px 1fr; padding-block: 16px 24px; }
  .aden h3 { font-size: 24px; line-height: 32px; }
  .pr-head { margin-bottom: 24px; }
  .price b { font-size: 48px; }
  .faq-list summary { font-size: 20px; line-height: 28px; min-height: 64px; }
  .faq-list details p { font-size: 16px; line-height: 26px; }
  .rf { padding: 16px; }
  .rp { padding-block: 24px 48px; }
  .rp h1 { font-size: 36px; line-height: 1.25; }
  .rp-top { height: 64px; }
  .fin-card img, .fin-card .qr-line { display: none; }
  .fin-card { align-items: stretch; padding: 16px; }
  .ftr-end { margin-top: 24px; }
  .js .rv { transform: translateY(12px); transition-duration: 0.3s; transition-delay: 0s !important; }
  .js .aden li.rv { background: none; border-top-color: var(--ink); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after, .rf * { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .aden li.rv { background: none; border-top-color: var(--ink); }
}

/* ---- إضافات الإنتاج: ما كانت ترسمه مكوّنات Dour في لوحة التصميم ---- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; }
a { color: #0E5C56; }
/* قيمة احتياطية لمتصفح بلا وحدات cqw: 1% من عرض التلفزيون تقريباً (505px على سطح المكتب، 326–358px على الجوال) */
.tv-screen { --u: 5px; }
@supports (width: 1cqw) { .tv-screen { --u: 1cqw; } }
:focus-visible { outline: none; box-shadow: var(--dour-ring); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-20 { width: 20px; height: 20px; }
.ic-16 { width: 16px; height: 16px; }
.ic-40 { width: 40px; height: 40px; }
.ic-wa { color: var(--dour-whatsapp); }
.logo { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; font-size: 24px; line-height: 1; font-weight: 700; }
.site a.logo { color: var(--ink); }
.logo svg { width: 36px; height: 36px; flex: none; }
.logo-lg { font-size: 30px; }
.logo-lg svg { width: 44px; height: 44px; }
.logo small { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--mut); padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 16px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 44px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 20px; font-weight: 700; }
.btn-full { display: flex; width: 100%; }
.site .btn-primary { background: var(--p600); color: #fff; }
.site .btn-primary:hover { background: var(--p500); }
.site .btn-primary:active { background: var(--p700); }
.site .btn-accent { background: var(--amber); color: var(--ink); font-weight: 700; }
.site .btn-secondary { background: #fff; color: var(--p600); border-color: var(--p600); }
.site .btn-secondary:hover { background: var(--p50); }
.site .btn-secondary:active { background: var(--p100); }
.site .btn-wa { background: var(--dour-whatsapp-fill); color: #fff; font-weight: 700; }
.site .btn-wa:hover { background: var(--dour-whatsapp-hover); }
.site .btn-wa:active { background: var(--dour-whatsapp-press); }
.btn[aria-busy="true"] { cursor: progress; }
.spin { width: 16px; height: 16px; border: 2px solid currentColor; border-inline-start-color: transparent; border-radius: 999px; animation: dourSpin 1s linear infinite; }
@keyframes dourSpin { to { transform: rotate(360deg); } }
.bdg { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--p600); border-radius: 999px; padding: 4px 14px; background: #fff; color: var(--p600); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.bdg-active { background: var(--p600); color: #fff; font-weight: 700; }
.bdg-warn { border-color: var(--warn); color: var(--warn-ink); }
.bdg-wa { background: var(--dour-whatsapp-fill); border-color: var(--dour-whatsapp-fill); color: #fff; font-weight: 700; }
.bdg .ic { width: 12px; height: 12px; stroke-width: 2.25; }
.conn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; background: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; }
.conn::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--dour-success); }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld b { font-size: 14px; line-height: 22px; font-weight: 500; }
.fld span { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.fld small { font-size: 14px; color: var(--mut); }
.hero-vis { margin: 0; }
.box-ltr { display: block; direction: ltr; text-align: left; }
.grow { flex: 1; }
.b7 { font-weight: 700; }
.own-title { color: var(--ink); font-size: 20px; line-height: 28px; }
.pr-sub { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--mut); }
.bub span.ltr { color: var(--p600); font-weight: 700; }
.lab .f.end { justify-self: end; }
/* البطل لا يُخفى بانتظار السكربت (LCP): دخول بالإزاحة فقط */
@keyframes up { from { transform: translateY(24px); } }
.up { animation: up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.up.s1 { animation-delay: 0.08s; }
.up.s2 { animation-delay: 0.16s; }
[data-calltext] { transition: opacity 0.3s ease; }
@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .btn-lg { height: auto; min-height: 56px; padding: 8px 16px; font-size: 18px; white-space: normal; text-align: center; }
  .cta-row .btn { width: 100%; }
  .tv-screen { --u: 3.3px; }
  .logo small { display: none; }
}
@media (max-width: 760px) { @supports (width: 1cqw) { .tv-screen { --u: 1cqw; } } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .up { animation: none; } }

/* ---- تصحيحات المراجعة الأولى + باقي الأقسام ---- */
[hidden] { display: none !important; }
/* الرحلة: 60vh لكل محطة، والشاشة الثابتة في منتصف الارتفاع بجانب نص المحطة النشطة */
.jr.sticky .st-text { min-height: 60vh; opacity: 0.65; }
.jr.sticky .st:last-child .st-text { min-height: 45vh; }
.jr.sticky .st:not(.on) .st-text p, .jr.sticky .st:not(.on) .st-who { color: var(--ink); }
.jr.sticky .st-screen { top: max(148px, calc(50vh - 200px)); }
.jr.sticky .jr-prog { top: max(96px, calc(50vh - 252px)); }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.stat span { font-size: 14px; line-height: 22px; color: var(--mut); }
.stat b { font-size: 32px; line-height: 40px; font-weight: 700; }
.stat small { font-size: 14px; font-weight: 400; color: var(--mut); }
.price, .pr-sub[data-alt] { animation: fadeIn 0.2s ease both; }
.fin-card img { width: 200px; height: 200px; }
.rf-full { grid-column: 1 / -1; }
.tf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf label { font-size: 14px; line-height: 22px; font-weight: 500; }
.tf-box { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.tf-box:hover { border-color: var(--mut); }
.tf-box:focus-within { border-color: var(--p600); box-shadow: var(--dour-ring); }
.tf-box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.tf-box input:focus-visible { box-shadow: none; }
.tf-pre { font-size: 14px; color: var(--mut); }
.tf-hint { font-size: 12px; line-height: 18px; color: var(--mut); }
.tf.bad .tf-box { padding: 0 11px; border: 2px solid var(--dng); }
.tf.bad .sel { border: 2px solid var(--dng); }
.tf.bad .tf-hint { display: none; }
.cg.bad .ch span { border-color: var(--dng); }
.rf-err { font-weight: 500; }
.bn { border: 1px solid; border-inline-start-width: 4px; border-radius: 6px; padding: 12px 16px; }
.bn b { display: block; font-weight: 700; }
.bn-danger { border-color: var(--dng); background: var(--dour-danger-tint); }
.bn-danger b { color: var(--dng); }
.bn-warn { border-color: var(--warn); background: var(--warn-tint); }
.bn-warn b { color: var(--warn-ink); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rf[data-busy] .rf-grid { opacity: 0.6; pointer-events: none; }
.rf-done:focus-visible { box-shadow: none; }
.legal { max-width: 808px; padding-block: 48px 96px; }
.legal h1 { font-size: 40px; line-height: 1.25; font-weight: 700; margin-bottom: 16px; }
.legal h2 { font-size: 24px; line-height: 32px; font-weight: 700; margin: 32px 0 8px; }
.legal h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 24px 0 8px; }
.legal p, .legal li { margin: 8px 0; }
.legal ul { list-style: disc; padding-inline-start: 24px; }
.legal .dr { border: 1px solid var(--amber); border-inline-start-width: 4px; border-radius: 6px; background: #fff; padding: 12px 16px; font-weight: 700; }
.legal-other { margin-top: 24px; }
.legal a, .ftr-end a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 760px) {
  .hero .ph { display: none; }
  .rf-act .btn { width: 100%; }
  .legal { padding-block: 24px 48px; }
  .legal h1 { font-size: 32px; }
  .stat b { font-size: 24px; line-height: 32px; }
}
.rf h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
.rf-done h2 { font-size: 32px; line-height: 40px; }