/* جلسة من واعدون — دليل الأسرة | التجربة البصرية الجديدة
   الهوية: واعدون، الخط الرسمي: Tajawal، الواجهة RTL. */
:root {
  --navy:#06283d;--navy2:#0b3f55;--ink:#15364a;--muted:#536e7f;
  --line:#dfebee;--sky:#20b7c9;--aqua:#e5f7f8;--gold:#e9b66f;
  --paper:#f8fbfb;--white:#fff;--green:#298c75;
  --sh:0 18px 55px rgba(8,46,65,.075);
}
html { scroll-padding-top:100px; }
body { font-family:'Tajawal',Tahoma,sans-serif!important; font-size:18px; line-height:1.75; background:var(--paper); color:var(--ink); overflow-x:hidden; }
body :is(button,input,select,textarea,h1,h2,h3,h4,summary), .brand-text strong, .hero-quote p,
.guide-timeline li::before, .ribbon-item .num, .step-list li::before, .screen-main h4 {font-family:'Tajawal',Tahoma,sans-serif!important}
h1,h2,h3,h4{letter-spacing:-.015em}
a,button{ -webkit-tap-highlight-color:transparent }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {outline:3px solid #009cad;outline-offset:3px}
.wrap{max-width:1340px;padding-inline:42px}
.topline{height:3px;background:linear-gradient(90deg,var(--navy),var(--sky) 65%,var(--gold))}
.header{background:rgba(255,255,255,.98);box-shadow:0 5px 28px rgba(2,38,61,.035);border-bottom:1px solid #e5eef0}
.header-inner{height:85px;gap:20px}
.brand{gap:11px;white-space:nowrap}
.brand-symbol{width:52px;height:52px;display:grid;place-items:center;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.brand-symbol img{width:100%;height:100%;object-fit:contain}
.brand-text strong{font-size:27px;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--navy)}
.brand-text small{font-size:12px;font-weight:700;letter-spacing:0;color:#638397}
.header-actions{gap:9px}
.btn{min-height:44px;border-radius:12px;padding:10px 19px;font-size:15px;line-height:1.2;font-weight:800;border-color:#dae8eb;box-shadow:none;transition:background-color .18s,border-color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--sky);border-color:var(--sky);color:#042c41}
.btn-primary:hover{background:#43c9d6;border-color:#43c9d6}
.btn-outline{background:#fff;border-color:#c8e1e5;color:#12435a}
.btn-wa{background:#effaf7;border-color:#ccece2;color:#126751}
.btn-wa:hover{background:#dff4ec;border-color:#a5d9c9}
.header-whatsapp{display:inline-flex;align-items:center;gap:8px}
.header-whatsapp svg,.whatsapp-btn svg{width:17px;height:17px;flex:none}
.header-login{white-space:nowrap}
.mobile-toggle{display:none}
.hero{background:radial-gradient(ellipse at 20% 25%,rgba(37,184,204,.16) 0,transparent 38%),linear-gradient(115deg,#052438 0%,#07384d 55%,#082d44 100%);overflow:hidden}
.hero::before{pointer-events:none;left:-150px;top:-190px;opacity:.56}
.hero::after{content:'';position:absolute;width:450px;height:450px;border:1px solid rgba(160,226,234,.09);border-radius:50%;right:-175px;bottom:-270px;pointer-events:none}
.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);min-height:520px;padding-top:70px;padding-bottom:75px;gap:70px}
.eyebrow{font-size:14px;color:#9ee6e7;font-weight:800}
.hero h1{font-weight:800;font-size:clamp(42px,4.15vw,64px);line-height:1.38;margin:17px 0 18px;letter-spacing:-.04em}
.hero h1 span{color:#6adddf}
.hero p{font-size:19px;color:#d5e9ee;line-height:1.85;margin:0 0 28px;max-width:610px}
.hero-actions{gap:10px;margin-bottom:25px}
.hero-actions .btn{min-height:49px;font-size:15px;padding-inline:23px}
.btn-plain{border-color:rgba(203,230,237,.36);color:#effbfc;background:rgba(255,255,255,.035)}
.btn-plain:hover{background:rgba(255,255,255,.12)}
.hero-meta{color:#b5d5df;font-size:14px;gap:17px}
.hero-meta span{gap:5px}
.hero-art{padding:16px;border-radius:28px;transform:rotate(-1.7deg);border:1px solid rgba(216,244,249,.24);background:rgba(255,255,255,.045);box-shadow:0 36px 90px rgba(1,14,24,.25)}
.mini-window{border-radius:21px;background:#fff;box-shadow:0 22px 55px rgba(0,9,15,.15);overflow:hidden}
.window-top{background:#f1f8f9;border-bottom:1px solid #e3eff0;padding:13px 17px}
.fake-logo{font-size:14px;font-weight:800;color:#0e4055}
.mini-body{padding:26px}
.mini-body h3{font-size:23px;font-weight:800;color:#12384e}
.mini-body p{font-size:15px;color:#5e7885;margin-bottom:16px}
.mini-row{gap:10px}
.mini-card{background:#f3f8fa;border-color:#e5eef0;padding:13px;min-height:94px}
.mini-card b{font-family:'Tajawal',Tahoma,sans-serif!important;font-size:16px;color:#0d3e57}
.mini-card span{font-size:12px;line-height:1.5}
.mini-chip{font-size:13px;background:#e1f5ef;color:#25735f}
.mini-banner{background:#e5f7f5;color:#27685e;border-radius:12px;border-right-color:#41b39c}
.art-caption{font-size:12px;color:#bed9e0}
.ribbon{margin-top:0;background:#fff;border-bottom:1px solid #e6eef0}
.ribbon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-block:19px}
.ribbon-item{display:flex;gap:12px;align-items:center;padding:17px 16px;border:1px solid #e4eff0;background:#f9fcfc;border-radius:16px;transition:transform .18s,border-color .18s,background .18s;min-width:0}
.ribbon-item::after{display:none!important}
a.ribbon-item:hover{transform:translateY(-2px);border-color:#a7dbe0;background:#f0fafa}
.ribbon-item .num{width:40px;height:40px;flex:none;display:grid;place-items:center;background:#dcf4f5;border-radius:12px;color:#16899d;font-size:23px;font-weight:800;line-height:1}
.ribbon-item b{display:block;font-size:16px;line-height:1.4;font-weight:800;color:#0b3449}
.ribbon-item small{font-size:13px;line-height:1.45;color:#6b8390;margin-top:2px}
.layout{max-width:1320px;grid-template-columns:232px minmax(0,1fr);gap:48px;padding-top:62px;padding-bottom:80px}
.sidebar{top:107px;max-height:calc(100dvh - 124px);padding:18px;background:white;border:1px solid #dce8eb;border-radius:19px;box-shadow:0 13px 37px rgba(0,41,59,.045)}
.sidebar .side-title{font-size:13px;letter-spacing:0;margin:6px 9px 14px;color:#476878}
.sidebar a{display:flex;gap:9px;align-items:center;padding:12px 13px;font-size:15px;line-height:1.45;font-weight:750;color:#466879;border-radius:11px;margin-bottom:3px}
.sidebar a.active,.sidebar a:hover{background:#e4f6f7;color:#066d80}
.sidebar a.active{border-right:3px solid #2bbacd}
.sidebar .side-num{color:#7f9aa5;font-size:12px}
.sidebar .toc-more{border-top:1px solid #e6eff1;padding-top:10px;margin-top:12px}
.sidebar .toc-more summary{cursor:pointer;padding:11px 10px;color:#1b6b7c;font-size:14px;font-weight:800;list-style:none;border-radius:10px}
.sidebar .toc-more summary::after{content:'＋';float:left;font-size:15px}
.sidebar .toc-more[open] summary::after{content:'−'}
.sidebar .toc-more[open] summary{background:#f0f9fa}
.sidebar .toc-more a{font-size:13.5px;padding:8px 12px}
.sidebar .side-end{margin-top:11px;border-top:1px solid #eaf0f1;color:#0d8293}
.sidebar .close-toc{display:none}
.main{min-width:0;max-width:100%}
.section{scroll-margin-top:107px;margin-bottom:61px;padding-bottom:57px;border-bottom:1px solid #e4edef}
.section:last-child{border-bottom:0}
.section-line{gap:11px;margin-bottom:11px}
.section-no{height:36px;min-width:36px;border-radius:11px;background:#dff4f5;color:#108397;font-size:14px;font-weight:800}
.kicker{font-size:14px;font-weight:800;color:#21839a}
.section h2{font-size:clamp(26px,2.3vw,36px);letter-spacing:-.028em;line-height:1.46;margin-bottom:12px;font-weight:800}
.lead{font-size:17.5px;line-height:1.85;margin-bottom:22px;color:#557082;max-width:850px}
.section h3{font-size:20px;font-weight:800;line-height:1.4;margin:19px 0 8px}
.section>p{font-size:17px;color:#516b7c}
.grid-2,.grid-3{gap:15px}
.card,.policy-list article{background:#fff;border:1px solid #e2ecee;border-radius:17px;padding:22px;box-shadow:0 5px 18px rgba(5,39,55,.025)}
.card h3{font-size:18px;margin:0 0 7px;color:#09364a}
.card p,.policy-list article p{font-size:16px;line-height:1.8;color:#536f7d}
.card .card-icon{width:42px;height:42px;background:#e8f7f7;border-radius:12px}
.hero-quote{border-radius:20px;background:linear-gradient(120deg,#082d43,#0e5970);padding:30px 33px;margin:22px 0}
.hero-quote p{font-size:24px;line-height:1.7;font-weight:800}
.notice,.v2-head{border-radius:14px;padding:19px 22px;font-size:16px;line-height:1.75}
.notice.gold{background:#fff8ec;color:#755c38}
.notice.soft{background:#f0f8f3;color:#2c6657}
.step-list{gap:11px}
.step-list li{padding:20px 21px;grid-template-columns:43px 1fr;border-radius:15px;border-color:#e1ecee;box-shadow:0 3px 14px rgba(3,32,50,.023)}
.step-list li::before{width:40px;height:40px;font-size:17px;border-radius:11px}
.step-list b{font-size:18px}
.step-list p{font-size:16px;line-height:1.7;color:#5d7685}
.sample{padding:17px;border-radius:14px}
.simple-list li{font-size:16.5px}
.ui-diagram,.screen-frame,.route-pane{border-radius:17px;box-shadow:0 6px 22px rgba(6,42,62,.035)}
.ui-diagram-main{padding:23px}
.ui-diagram-side{background:#0b3448}
.path-card h3{font-size:19px}
.route-controls{gap:12px}
.route-controls label{padding:17px;font-size:16px}
.route-controls select,.trouble-form select{min-height:48px;font-size:16px}
.route-result,.trouble-output{border-radius:18px;padding:23px}
.route-tabs button,.pill-tabs button{font-family:'Tajawal',Tahoma,sans-serif!important}
.route-tabs button[aria-selected="true"],.pill-tabs button[aria-selected="true"]{background:#0a4058}
.guide-timeline li{padding-bottom:27px}
.guide-timeline b{font-size:19px}
.guide-timeline p{font-size:16px;line-height:1.75}
.guide-timeline em{font-size:14px}
.screen-frame{padding:15px}
.screen-desc{font-size:14px}
.screen-side{background:#0a3449}
.screen-chip{font-size:14px}
.shot-slot{background:#f8fbfb;border-color:#cedfe2}
.dialogue{border-radius:16px;padding:22px}
.dialogue p,.dialogue blockquote{font-size:16px}
.faq-search,.guide-search input{min-height:51px;font-size:16px}
.faq details{border-radius:13px}
.faq summary{font-size:17px;padding:17px 19px 17px 48px;line-height:1.65}
.faq details p{font-size:16px;line-height:1.8}
.check-list label{border-radius:13px;padding:15px 17px}
.check-list span{font-size:16px}
.table-wrap{border-radius:16px}
td,th{font-size:16px;line-height:1.75}
.closing-cta{background:linear-gradient(112deg,#052a40,#0a5267);color:#fff;margin-top:5px}
.closing-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:40px}
.closing-cta h2{font-size:clamp(24px,2.3vw,32px);color:#fff;margin:0 0 7px}
.closing-cta p{font-size:16px;color:#cfebee;margin:0;max-width:630px}
.closing-actions{display:flex;gap:9px;flex-wrap:wrap;flex:none}
.closing-cta .btn-outline{background:transparent;color:#fff;border-color:#ffffff65}
.closing-cta .btn-outline:hover{background:#ffffff18}
.footer{padding:45px 0 22px;background:#031f32}
.footer p{font-size:16px;color:#c1dae3}
.footer .brand-text strong{color:white}
.footer .brand-text small{color:#a7c9d6}
.footer .brand-symbol{width:49px;height:49px}
.footer .foot-links{gap:15px}
.footer .foot-links a{font-size:15px;color:#93e0e4}
.footer-bottom{font-size:13px}
.mobile-head{display:none}
@media(max-width:1150px){
 .wrap{padding-inline:28px}
 .layout{grid-template-columns:205px minmax(0,1fr);gap:28px}
 .hero-grid{gap:35px;min-height:490px}
 .hero h1{font-size:clamp(39px,4.6vw,52px)}
 .mini-body{padding:19px}
 .ribbon-item{padding:14px 12px}
 .ribbon-item b{font-size:15px}
 .ribbon-item small{font-size:12px}
}
@media(max-width:900px){
 .hero-grid{grid-template-columns:1fr;gap:26px;padding-block:55px 55px;min-height:0}
 .hero-art{width:min(100%,540px);transform:none}
 .hero h1{font-size:clamp(38px,6vw,57px)}
 .ribbon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .layout{display:block;padding-top:36px}
 .sidebar{position:fixed;right:0;top:0;bottom:0;width:min(87vw,352px);max-height:none;border-radius:0;z-index:80;padding:24px 18px;box-shadow:none;transform:translateX(105%);transition:transform .22s;overflow:auto}
 .sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(0,25,43,.54)}
 .sidebar .close-toc{display:block;border:0;background:#edf8f9;border-radius:10px;color:#12495a;padding:10px 13px;margin-bottom:15px;font-size:15px;font-weight:800;width:100%;text-align:right}
 .header-actions .mobile-toggle{display:inline-flex;font-weight:800;align-items:center}
 .mobile-head{display:flex;background:#edf8f9;color:#0e5366;font-size:15px;font-weight:800;border:1px solid #d7eaed;border-radius:14px;padding:12px 14px;margin-bottom:34px}
 .mobile-head .btn{background:#fff;font-size:14px;min-height:38px;padding:8px 12px}
 .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .closing-cta .wrap{flex-direction:column;align-items:flex-start}
 .footer-grid{gap:24px}
}
@media(max-width:620px){
 body{font-size:16.5px}
 .wrap{padding-inline:18px}
 .header-inner{height:72px;gap:7px}
 .brand-symbol{height:38px;width:38px}
 .brand{gap:6px}
 .brand-text strong{font-size:20px}
 .brand-text small{font-size:10px}
 .header-actions{gap:5px}
 .header-actions .btn{min-height:37px;padding:7px 9px;border-radius:10px;font-size:12px}
 .header-actions .mobile-toggle{font-size:0;width:37px;justify-content:center}
 .header-actions .mobile-toggle::first-letter{font-size:20px}
 .header-whatsapp{font-size:0!important;gap:0}
 .header-whatsapp svg{width:18px;height:18px}
 .header-login{font-size:12px!important}
 .hero-grid{padding-top:38px;padding-bottom:38px;gap:24px}
 .hero h1{font-size:clamp(33px,9vw,43px);line-height:1.35}
 .hero p{font-size:17px;line-height:1.8}
 .hero-actions{gap:8px;margin-bottom:20px}
 .hero-actions .btn{font-size:14px;min-height:44px;padding:10px 13px}
 .hero-meta{font-size:12px;gap:9px}
 .hero-art{display:block;transform:none;background:transparent;padding:0;box-shadow:none;border:0;max-width:100%}
 .mini-window{border-radius:15px}
 .mini-body{padding:15px}
 .mini-body h3{font-size:18px}
 .mini-body p{font-size:13px}
 .mini-row{gap:5px}
 .mini-card{min-height:75px;padding:9px 7px}
 .mini-card b{font-size:13px}
 .mini-card span{font-size:10px;line-height:1.35}
 .mini-banner{padding:9px;font-size:12px}
 .art-caption{display:none}
 .ribbon-grid{padding-block:12px;gap:7px}
 .ribbon-item{padding:11px 9px;border-radius:12px;gap:8px}
 .ribbon-item .num{width:29px;height:29px;font-size:16px;border-radius:9px}
 .ribbon-item b{font-size:13px}
 .ribbon-item small{font-size:11px}
 .layout{padding-top:28px}
 .section{margin-bottom:43px;padding-bottom:42px}
 .section h2{font-size:clamp(25px,7vw,31px);line-height:1.42}
 .lead{font-size:16px}
 .section h3{font-size:18px}
 .grid-2,.grid-3,.screen-guides,.policy-list,.trouble-form,.compare,.route-controls{grid-template-columns:1fr}
 .card,.policy-list article{padding:18px}
 .card p,.policy-list article p{font-size:15.5px}
 .step-list li{padding:15px;grid-template-columns:37px 1fr;gap:9px}
 .step-list li::before{height:34px;width:34px}
 .step-list b{font-size:16.5px}
 .step-list p{font-size:15px}
 .hero-quote{padding:22px;border-radius:17px}
 .hero-quote p{font-size:20px}
 .screen-shell{grid-template-columns:95px 1fr}
 .screen-side span{font-size:11px}
 .guide-timeline li{padding-right:54px}
 .guide-timeline li::before{width:36px;height:36px}
 .guide-timeline li:not(:last-child)::after{right:17px;top:38px}
 .closing-cta .wrap{padding-block:34px}
 .closing-actions{width:100%;flex-direction:column}
 .closing-actions .btn{width:100%}
 .footer-grid,.footer-bottom{display:block}
 .footer p{font-size:15px}
 .faq-tools{display:grid;gap:10px}
 .faq-tools button{width:100%;margin:0}
 .route-result{padding:17px}
 .guide-search{display:flex;gap:8px}
 .guide-search button{margin:0}
}
@media(max-width:390px){
 .brand-text strong{font-size:18px}
 .brand-symbol{height:33px;width:33px}
 .header-actions .btn{padding:7px 6px}
 .hero-actions .btn{flex:1;min-width:42%}
 .ribbon-item small{display:none}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}