/* Content pages of https://shihab.co.uk (infra/scripts/build-site.py): the shared nav, prose, cards, steps,
   FAQ, link tiles and footer. style.css carries the tokens, the night-sky background and the home page's
   hero; this file adds everything the other pages need, so an inner page loads no JavaScript at all.
   Logical properties only (one stylesheet serves RTL and LTR). */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:5;padding:10px 16px;background:#0b1430;color:var(--ink);border:1px solid var(--gold);border-radius:0 0 10px 10px}
.skip:focus{inset-inline-start:16px}

/* ---- top bar: brand, page nav, language ---- */
.top{flex-wrap:wrap;gap:8px 16px}
.brand{min-height:44px}
.menu{order:3;flex:1 0 100%;margin-top:2px}
.menu ul{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;list-style:none;padding:0;margin:0 -10px}
.menu a{display:inline-flex;align-items:center;justify-content:center;padding:9px 10px;min-width:44px;min-height:44px;color:var(--mut);text-decoration:none;font-size:14.5px;border-radius:10px;transition:color .2s,background .2s}
.menu a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.menu a[aria-current=page]{color:var(--gold)}
html[lang=en] .menu a{font-family:var(--lat);font-size:14px}
a.lang{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;order:2}
@media(min-width:880px){.menu{order:2;flex:1 1 auto;margin-top:0}.menu ul{justify-content:center}a.lang{order:3}}

/* ---- page lead (inner pages) ---- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin-bottom:14px}
.crumb a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--gold)}
html[lang=en] .crumb{font-family:var(--lat)}
.lead{padding:clamp(14px,4vw,34px) 0 10px;max-width:46rem}
.lead h1,.h-title{font:700 clamp(27px,6.4vw,46px)/1.3 var(--kufi);letter-spacing:-.01em;background:linear-gradient(180deg,#fff 30%,#ffeccb);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang=en] .lead h1,html[lang=en] .h-title{font:600 clamp(26px,5.6vw,42px)/1.22 var(--lat)}
.h-title{margin-top:10px;max-width:22em}
.lead .lede{margin-top:14px}

/* ---- hero call to action ---- */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:99px;font-weight:600;font-size:15.5px;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn{color:#140d02;background:linear-gradient(135deg,#ffe3a6,var(--amber));border:1px solid rgba(255,210,122,.6)}
.btn:hover{background:linear-gradient(135deg,#fff0cf,#ffab58)}
.btn-ghost{color:var(--gold);background:rgba(255,255,255,.05);border:1px solid var(--line);font-family:var(--lat);font-size:15px}
.btn-ghost:hover{border-color:rgba(255,210,122,.5);background:rgba(255,255,255,.1)}

/* ---- sections and prose ---- */
.sec{padding:clamp(22px,5vw,40px) 0;border-top:1px solid var(--line);max-width:72rem}
main>.sec:first-child{border-top:0}
.sec h2{font:700 clamp(21px,4.4vw,29px)/1.35 var(--kufi);margin-bottom:12px;color:var(--ink)}
html[lang=en] .sec h2{font:600 clamp(20px,4vw,27px)/1.3 var(--lat)}
.sec>p{max-width:44rem;color:#d9dcf0;font-size:clamp(15.5px,3.9vw,17.5px);line-height:1.85}
.sec>p+p{margin-top:12px}
.sec h3{font:700 16.5px/1.45 var(--kufi);color:var(--ink)}
html[lang=en] .sec h3{font:600 16px/1.4 var(--lat)}

/* ---- ticked list ---- */
.ticks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px;max-width:50rem}
.ticks li{position:relative;padding-inline-start:28px;color:#d4d8ee;font-size:15.5px;line-height:1.75}
.ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:9px;height:9px;border-radius:50%;border:2px solid var(--gold);opacity:.8}

/* ---- cards ---- */
.cards{display:grid;gap:12px;margin-top:18px}
.cards article{padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cards svg{width:38px;height:38px;padding:8px;border-radius:12px;background:rgba(255,210,122,.1);border:1px solid rgba(255,210,122,.25);fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.cards h3{margin-bottom:6px}
.cards p{color:var(--mut);font-size:14.5px;line-height:1.7}
@media(min-width:680px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- app screens in phones above the cards (home «شو بيعمل شهاب بالضبط», screens/, Trello #123): three
   whole screens, the middle phone in front and the other two tilted behind it; plain dark frames. Under a
   mouse (Trello #126) the phone pointed at comes forward, zooms in and lights up with a warm glow; touch
   screens keep the still picture. Sizes are shares of the row so the same picture works from 320px to desktop ---- */
.phones{display:flex;justify-content:center;align-items:center;max-width:640px;margin:26px auto 4px;padding:4px 0 14px}
.phone{position:relative;z-index:1;flex:none;width:34%;margin:0;padding:1.6%;border-radius:15%/7%;background:linear-gradient(160deg,#252a42,#0b0e1c 45%,#161b30);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.95)}
.phone-screen{display:block;overflow:hidden;border-radius:12%/5.4%;background:#f8f9fc}
.phone-screen::before{content:"";display:block;width:30%;aspect-ratio:3.4;margin:3% auto 2%;border-radius:99px;background:#0b0e1c}
.phone img{display:block;width:100%;height:auto}
.phone-front{width:41%;z-index:2}
.phone:first-child{margin-inline-end:-6%;--tilt:-5deg}
.phone:last-child{margin-inline-start:-6%;--tilt:5deg}
[dir=rtl] .phone:first-child{--tilt:5deg}
[dir=rtl] .phone:last-child{--tilt:-5deg}
.phone:not(.phone-front){transform:translateY(5%) rotate(var(--tilt))}
@media(hover:hover) and (pointer:fine){
.phone{transition:border-color .45s ease,box-shadow .45s ease}
.phone:hover{z-index:3;border-color:rgba(255,210,122,.55);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.95),0 0 34px rgba(255,190,90,.38),0 0 90px -6px rgba(255,154,60,.3)}}
/* the zoom keeps each phone's tilt and only grows it, so the pointer never slips off the edge mid-animation;
   z-index waits for the shrink so a side phone does not drop behind the middle one while still zoomed */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.phone{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .45s ease,box-shadow .45s ease,z-index 0s .5s}
.phone:hover{transition-delay:0s;transform:translateY(-1%) scale(1.07)}
.phone:not(.phone-front):hover{transform:translateY(3%) rotate(var(--tilt)) scale(1.14)}}

/* ---- numbered steps ---- */
.steps{list-style:none;counter-reset:s;padding:0;margin:18px 0 0;display:grid;gap:14px;max-width:52rem}
.steps li{counter-increment:s;position:relative;padding-inline-start:52px;min-height:38px}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,210,122,.4);background:rgba(255,210,122,.1);color:var(--gold);font:600 15px var(--lat)}
.steps p{margin-top:4px;color:var(--mut);font-size:14.8px;line-height:1.7}

/* ---- questions and answers ---- */
.faq{margin-top:18px;display:grid;gap:4px;max-width:50rem}
.qa{padding:16px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa h3{font-size:16.5px}
.qa p{margin-top:6px;color:var(--mut);font-size:15px;line-height:1.75}

/* ---- link tiles (the internal links) ---- */
.tiles{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.tiles a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);text-decoration:none;transition:border-color .2s,background .2s}
.tiles a:hover{border-color:rgba(255,210,122,.45);background:rgba(255,255,255,.07)}
.tiles strong{display:block;color:var(--gold);font:700 16px/1.45 var(--kufi)}
html[lang=en] .tiles strong{font:600 15.5px/1.4 var(--lat)}
.tiles span{display:block;margin-top:4px;color:var(--mut);font-size:14.3px;line-height:1.65}
@media(min-width:680px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* ---- channel cards (the home page's «على أي قناة», Trello #121): the platform's logo on its app-icon tile, in
   the platform's own colours, and the name under it. 2 x 2 on a phone, one row of four from 760 px. ---- */
.chans{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.chans a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;padding:24px 12px 20px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.chans a:hover{border-color:rgba(255,210,122,.45);background:rgba(255,255,255,.08);transform:translateY(-3px)}
.chans .ch{display:flex;align-items:center;justify-content:center;width:clamp(70px,19vw,96px);aspect-ratio:1;border-radius:24%;color:#fff;box-shadow:0 16px 36px -16px var(--glow),inset 0 1px 0 rgba(255,255,255,.28)}
.chans svg{width:66%;height:66%;fill:currentColor}
.chans strong{color:var(--ink);font:700 clamp(15px,3.9vw,17.5px)/1.4 var(--kufi)}
html[lang=en] .chans strong{font:600 clamp(14.5px,3.7vw,16.5px)/1.35 var(--lat)}
.ch-whatsapp{background:linear-gradient(#5ffc7b,#25d366 55%,#1ebe57);--glow:rgba(37,211,102,.75)}
.ch-whatsapp svg{width:56%;height:56%}
.ch-messenger{background:radial-gradient(circle at 18% 100%,#0099ff,#a033ff 60%,#ff5280 90%,#ff7061);--glow:rgba(160,51,255,.75)}
.ch-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);--glow:rgba(214,36,159,.75)}
.chans .ch-online-ordering{background:linear-gradient(135deg,#ffe3a6,var(--amber));color:#140d02;--glow:rgba(255,154,60,.75)}
.ch-online-ordering svg{width:62%;height:62%}
@media(min-width:760px){.chans{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.chans a{padding:30px 14px 24px;gap:16px}}
@media(prefers-reduced-motion:reduce){.chans a{transition:none}.chans a:hover{transform:none}}

.cta{margin-top:4px}

/* ---- footer ---- */
footer{display:grid;gap:18px 40px;align-items:start;padding-top:26px;margin-top:clamp(18px,5vw,40px)}
.fnav h2{font:600 12.5px/1.4 var(--lat);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.fnav ul{list-style:none;padding:0;margin:0;display:grid;gap:1px}
.fnav a{display:inline-flex;align-items:center;min-inline-size:44px;min-height:44px;color:#cdd2e8;text-decoration:none;font-size:14.3px}
.fnav a:hover{color:var(--gold)}
html[lang=en] .fnav a{font-family:var(--lat);font-size:14px}
.fend{display:grid;gap:8px}
@media(min-width:760px){footer{grid-template-columns:1fr 1fr minmax(0,1.4fr)}}

@media(prefers-reduced-motion:reduce){.btn,.btn-ghost,.tiles a,.menu a{transition:none}}

/* The footer's e-mail link and the legal nav are tap targets: 44 px, as everywhere else on the page. */
.contact a{display:inline-flex;align-items:center;min-height:44px}

/* ---- pricing: three plans (home #pricing and /pricing; build-site.py `plans_block`) ----
   The trial once above the cards, three glass cards side by side (stacked on phones) with Pro raised in gold,
   then the payments once under them. The payment marks keep their own colours on light chips. */
.btn-alt{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:99px;font-weight:600;font-size:15.5px;text-decoration:none;color:var(--gold);background:rgba(255,210,122,.08);border:1px solid rgba(255,210,122,.5);transition:background .2s,border-color .2s}
.btn-alt:hover{background:rgba(255,210,122,.16);border-color:var(--gold)}
/* The hero on phones: the free-week button first and full width, the other two under it at the same width. */
@media(max-width:520px){.hero .hero-cta{align-self:stretch;flex-direction:column;align-items:stretch;gap:10px}.hero .hero-cta>a{width:100%}}
.sec-plan{border-top:0;padding-top:clamp(10px,3vw,24px)}
.plans{margin-top:18px}
.sec-plan .plans{margin-top:0}
.plans-trial{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:0 auto;padding:9px 16px;border-radius:14px;background:rgba(255,210,122,.11);border:1px solid rgba(255,210,122,.34);color:var(--gold);font-weight:600;font-size:15px;line-height:1.55}
html[lang=en] .plans-trial{font-size:14.5px}
.plans-trial svg,.tier-list svg,.pay-secure svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.plans-trial svg{width:20px;height:20px;flex:none;stroke-width:1.7}
.tiers{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:26px}
.tier{position:relative;display:flex;flex-direction:column;min-width:0;padding:24px 20px 22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 24px 60px -34px rgba(0,0,0,.8)}
.tier-top{border-color:rgba(255,210,122,.55);background:radial-gradient(120% 70% at 50% 0,rgba(108,75,255,.3),transparent 64%),radial-gradient(90% 60% at 50% 100%,rgba(255,154,60,.13),transparent 66%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 30px 80px -30px rgba(0,0,0,.85),0 0 70px -22px rgba(255,170,80,.45),0 0 0 1px rgba(255,210,122,.18) inset}
.tier-top::before{content:"";position:absolute;inset-inline:26px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tier-badge{position:absolute;top:-14px;inset-inline:0;width:max-content;margin-inline:auto;padding:4px 14px;border-radius:99px;background:linear-gradient(135deg,#ffe3a6,var(--amber));color:#140d02;font-weight:700;font-size:13px;line-height:1.5;box-shadow:0 8px 22px -8px rgba(255,154,60,.8)}
html[lang=en] .tier-badge{font-size:12.5px;letter-spacing:.01em}
.sec .tier-name{font:700 20px/1.4 var(--kufi);color:var(--ink)}
html[lang=en] .sec .tier-name{font:600 19px/1.4 var(--lat)}
.tier-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:8px}
.tier-price .amt{font:700 clamp(44px,12vw,54px)/1.05 var(--lat);letter-spacing:-.035em;padding-inline-end:.04em;background:linear-gradient(180deg,#fff 22%,#ffe3a6 70%,#ffb04d);-webkit-background-clip:text;background-clip:text;color:transparent}
.tier-price .per{color:var(--mut);font-size:15.5px}
html[lang=en] .tier-price .per{font-size:14.5px}
.tier-for{margin-top:8px;color:#d9dcf0;font-size:15px;line-height:1.7}
.tier-cta{width:100%;margin-top:18px;min-height:50px;font-size:16px}
.tier-top .tier-cta{box-shadow:0 12px 34px -12px rgba(255,154,60,.75)}
.tier-list li.tier-inc{color:var(--gold);font-weight:600}
.tier-plus{display:grid;place-items:center;width:20px;height:20px;flex:none;margin-top:2px;border-radius:50%;color:#1a1306;background:var(--gold);font:700 15px/1 var(--lat)}
.tier-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:11px}
.tier-cta+.tier-list{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.tier-list li{display:flex;align-items:flex-start;gap:10px;color:#d4d8ee;font-size:14.8px;line-height:1.6}
.tier-list svg{width:20px;height:20px;flex:none;margin-top:2px;padding:3px;border-radius:50%;color:var(--gold);background:rgba(255,210,122,.13);border:1px solid rgba(255,210,122,.32);stroke-width:2.8}
.plans-foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px;text-align:center}
.pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px}
.pay-l{color:var(--mut);font-size:13.5px}
.pay-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0;margin:0}
.pay-marks svg{display:block;width:46px;height:31px;border-radius:6px;background:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.pay-secure{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;color:#cdd2e8;font-size:14px}
.pay-secure svg{width:16px;height:16px;flex:none;color:var(--gold);stroke-width:1.9}
.pay-secure .dot-sep{color:var(--mut)}
@media(max-width:520px){.pay-secure .dot-sep{display:none}.pay-secure span:last-child{flex-basis:100%}}
#which .ticks+p{margin-top:16px}
.plans-note{max-width:44rem;color:var(--mut);font-size:13.5px;line-height:1.75}
.plan-tax{color:var(--mut);font-size:12.5px;line-height:1.6;opacity:.85}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}.tier{padding:28px 24px 26px}.tier-top{margin-block:-14px;padding-top:40px;padding-bottom:38px}.tier-for{min-height:3.4em}}
@media(prefers-reduced-motion:reduce){.btn-alt{transition:none}}
.plans-q{margin-top:10px;text-align:center;color:var(--mut);font-size:14px}
.plans-q a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px}