/* Saudi Women's Football — hub landing
   Rebuilt on the SAFF identity: the federation mark is a single green on white,
   and the federation's own site runs deep green grounds with white type over
   white content. So the page is white paper with green as the only accent —
   the hero and the footer are the only dark-green fields. Nothing else is
   coloured, because the guideline is green and white and that is all.

   Green #0B7B55 is lifted straight out of the supplied logo artwork, not
   guessed; #146F45 is the darker green saff.com.sa uses behind white type and
   is kept for the deep fields so the two sites sit next to each other.

   Type: Dubai W23, the family saff.com.sa actually serves (it declares the
   face as "AL-Sayf" and loads dubaiW23-*). Arabic and Latin in one family,
   four weights, nothing above 700. Dubai's caps are short — 648/1000 against
   Bukra's 811 — so every display size here is set larger than it looks on
   paper and the uppercase tracking is opened up to compensate. */

@font-face{font-family:Dubai;src:url(assets/fonts/DubaiW23-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Dubai;src:url(assets/fonts/DubaiW23-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Dubai;src:url(assets/fonts/DubaiW23-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Dubai;src:url(assets/fonts/DubaiW23-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* brand */
  --green:#0B7B55;        /* the logo's own green */
  --green-deep:#146F45;   /* the federation site's field green */
  --green-ink:#08402E;    /* deepest field, footer and hero floor */
  --green-tint:#EAF3EF;   /* green at 8% — section bands and chips */
  --green-line:#CBE0D6;

  /* paper */
  --paper:#FFFFFF;
  --paper2:#F6F8F7;
  --ink:#11241C;          /* body copy: near-black with a green cast */
  --muted:#5E7169;
  --line:#E2E9E5;
  --white:#fff;

  --pad:clamp(20px,5vw,120px); --maxw:1600px;
  --r:10px;               /* one radius everywhere; the mark is the only curve
                             that needs to be distinctive */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
section,footer{scroll-margin-top:104px}
body{
  margin:0;background:var(--paper);
  font-family:Dubai,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;width:auto;height:auto;clip:auto;margin:0;
  inset-inline-start:8px;top:8px;background:var(--green);color:#fff;
  padding:10px 16px;z-index:99;text-decoration:none;font-weight:700}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4,h5{margin:0;line-height:1.04;letter-spacing:-.005em;font-weight:700}
/* Uppercase in Dubai needs air — the caps are short and tightly fitted, and
   set solid they read as a grey bar rather than as words. */
.h{font-size:clamp(27px,2.7vw,42px);text-transform:uppercase;letter-spacing:.005em}
.sub{display:block;margin:12px 0 0;color:var(--muted);
  font-size:clamp(15px,1.05vw,19px);font-weight:400;letter-spacing:0}
.sec{padding:clamp(44px,5vw,84px) 0}
.sec.band{background:var(--paper2);border-block:1px solid var(--line)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,1.7vw,28px)}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:#fff;text-decoration:none;
  padding:14px 26px;border-radius:6px;font-size:17px;font-weight:700;
  letter-spacing:.01em;transition:background .14s,transform .12s}
.btn:hover{background:var(--green-deep);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px}
.btn-lg{padding:18px 34px;font-size:clamp(17px,1.2vw,21px)}
.btn-sm{padding:10px 18px;font-size:15px}
.btn-o{background:none;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green-line)}
.btn-o:hover{background:var(--green-tint);color:var(--green-deep)}
/* on the dark hero and footer the outline flips to white */
.hero .btn-o,footer .btn-o{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.hero .btn-o:hover,footer .btn-o:hover{background:rgba(255,255,255,.12);color:#fff}

/* ------------------------------------------------------------------- nav */
/* The bar is full-bleed but its contents sit on the same measure as every
   section below, so the mark starts on the page's left edge rather than 90px
   outside it on anything wider than --maxw. */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:clamp(14px,2vw,48px);
  padding-inline:max(var(--pad),calc((100% - var(--maxw))/2 + var(--pad)));
  height:88px;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* The federation mark leads, our own line sits beside it behind a rule — the
   guideline keeps the logo clear of other marks, so nothing touches it. */
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;line-height:1}
/* The lockup's ink is not centred inside its own box: the crest fills the full
   height while the SAFF wordmark and its sub-lines are inset and sit a little
   low. Centring the BOXES leaves a wide gap above the SAFF type and a narrow
   one below, which reads as the logo hanging off the bottom of our own two
   lines. So the crest tracks that two-line block and is lifted by a share of
   its own height until both type blocks share one centre line. */
.mark .crest{height:clamp(34px,calc(2.3vw + 4px),44px);width:auto;flex:0 0 auto;
  transform:translateY(-3.4%)}
.mark .word{display:flex;flex-direction:column;gap:3px;padding-inline-start:14px;
  border-inline-start:1px solid var(--line)}
.mark b{font-size:clamp(13px,1.05vw,16px);text-transform:uppercase;letter-spacing:.01em;
  color:var(--ink);font-weight:700}
.mark .word>span{font-size:clamp(11px,.8vw,13px);color:var(--muted);letter-spacing:.02em}
.nav nav{display:flex;gap:clamp(12px,1.6vw,30px);margin-inline-start:auto}
.nav nav a{text-decoration:none;font-size:16px;font-weight:500;color:var(--muted);
  padding:4px 0;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.nav nav a:hover{color:var(--ink)}
.nav nav a.on{color:var(--green);border-bottom-color:var(--green)}
.navr{display:flex;align-items:center;gap:clamp(10px,1.2vw,22px)}
.lang{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.lang b{color:var(--ink);font-weight:700}
.lang i{font-style:normal;color:var(--line)}
.lang a{text-decoration:none}
.lang a:hover{color:var(--green)}
@media (max-width:1000px){.nav nav{display:none}}
@media (max-width:560px){.mark .word{display:none}.nav{height:72px}
  .mark .crest{height:36px;transform:none}}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--green-ink);
  display:flex;align-items:center;min-height:clamp(430px,58vh,620px);
  padding:clamp(40px,5vw,72px) 0}
.herov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* A flat green wash, not a black one: the video reads as SAFF green rather
   than as a dimmed photo, and white type clears AA on it at every size. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,64,46,.94) 0%,rgba(8,64,46,.86) 42%,rgba(11,123,85,.62) 100%)}
.heroin{position:relative;z-index:2;color:#fff;max-width:var(--maxw);width:100%}
.kicker{margin:0 0 14px;font-size:clamp(12px,.95vw,15px);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.hero h1{font-size:clamp(38px,5.4vw,84px);text-transform:uppercase;color:#fff;
  letter-spacing:-.01em}
.lede{margin:18px 0 0;font-size:clamp(16px,1.25vw,22px);color:rgba(255,255,255,.86);
  font-weight:400;max-width:44ch}
.hero .btn-lg{margin-top:clamp(22px,2.4vw,34px)}

/* Next up sits on the hero as a white card — it is the only thing on the page
   that changes by itself, so it gets the one piece of contrast. */
.tonight{position:absolute;z-index:3;right:var(--pad);top:50%;translate:0 -50%;
  width:min(420px,36vw);background:var(--paper);border-radius:var(--r);
  padding:22px 24px;box-shadow:0 18px 44px rgba(8,64,46,.28)}
.tonight h2{font-size:13px;color:var(--green);letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:14px;font-weight:700}
.tonight ul{list-style:none;margin:0;padding:0}
.tonight li{display:grid;grid-template-columns:74px 1fr;gap:2px 14px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line)}
.tonight li:first-child{border-top:0;padding-top:0}
.tonight li b{font-size:17px;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.tonight li span{grid-column:1;color:var(--muted);font-size:13px}
.tonight li div{grid-column:2;grid-row:1/3;font-size:16px;line-height:1.3;font-weight:700}
.tonight li em{display:block;color:var(--muted);font-style:normal;font-weight:400;
  font-size:13px;margin-top:3px}
.tonight li div a{text-decoration:none}
.tonight li div a:hover{color:var(--green)}
.tonight .upl[hidden],.tonight .upsoon[hidden]{display:none}
.tonight .upsoon p{margin:0 0 14px;color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:1100px){
  /* relative, not static: the hero's green wash is an absolutely positioned
     ::after, and a static sibling has no stacking context to sit above it —
     which is exactly how the card went see-through once. */
  .tonight{position:relative;translate:0;width:auto;margin:28px var(--pad) 0;
    box-shadow:none;border:1px solid var(--line)}
  .hero{display:block}
}

/* --------------------------------------------------------------- leagues */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(24px,2.4vw,38px)}
@media (max-width:1000px){.lgrid{grid-template-columns:1fr}}
.lcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .16s,border-color .16s}
.lcard:hover{border-color:var(--green-line);box-shadow:0 10px 30px rgba(8,64,46,.08)}
.lshot{position:relative;background:var(--green-tint)}
.lshot .kv{width:100%;height:auto;aspect-ratio:2.4;object-fit:cover}
.lstatus{position:absolute;inset-inline-start:14px;top:14px;background:var(--green);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:20px}
.lbody{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.lbody h3{font-size:clamp(18px,1.35vw,24px);text-transform:uppercase;letter-spacing:.005em}
.lbody p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.lcta{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lcta .from{font-weight:700;color:var(--green-deep);font-size:15px}
/* The U-17 league used to run a second colour. Green and white only now, so it
   is told apart by its label, never by a different hue. */
.lcard.u17 .lstatus{background:var(--green-deep)}
.vscard.youth .vshead{background:var(--green-ink)}
.vscard.youth .vskind{color:rgba(255,255,255,.7)}
.vscard.youth .vshead h3{color:#fff}
.lcard.next{background:var(--green-tint);border-style:dashed;border-color:var(--green-line);
  display:grid;place-items:center;text-align:center}
.nextin{padding:32px 28px;display:flex;flex-direction:column;align-items:center;gap:12px}
.pip{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);background:var(--paper);border:1px solid var(--green-line);
  padding:5px 13px;border-radius:20px}
.nextin h3{font-size:clamp(19px,1.6vw,27px);text-transform:uppercase;max-width:18ch}
.nextin p{margin:0;color:var(--muted);font-size:15px;line-height:1.5;max-width:40ch}
.dots{display:flex;gap:7px;margin-top:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--green-line)}

/* --------------------------------------------------------------- compare */
.vsgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:clamp(24px,2.4vw,38px)}
@media (max-width:900px){.vsgrid{grid-template-columns:1fr}}
.vscard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden}
.vshead{padding:22px 26px 16px;border-bottom:1px solid var(--line);background:var(--green-tint)}
.vskind{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);margin-bottom:10px}
.vshead h3{font-size:clamp(17px,1.3vw,23px);text-transform:uppercase}
.vslist{margin:0;padding:6px 26px 4px}
.vsrow{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.vsrow:last-child{border-bottom:0}
.vsrow dt{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:500}
.vsrow dd{margin:0;font-size:15px;line-height:1.45}
.vsfoot{margin-top:auto;padding:16px 26px 22px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap}
.host{color:var(--muted);font-size:13px}
@media (max-width:560px){.vsrow{grid-template-columns:1fr;gap:3px}}

/* ------------------------------------------------------------------ info */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(24px,2.4vw,38px)}
@media (max-width:1000px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bgrid{grid-template-columns:1fr}}
.bt .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;
  background:var(--green-tint);color:var(--green);margin-bottom:14px}
.bt .ic svg{width:22px;height:22px}
.bt b{display:block;font-size:clamp(15px,1.05vw,18px);text-transform:uppercase;
  margin-bottom:8px;letter-spacing:.005em}
.bt p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

/* ------------------------------------------------------------------- why */
.whygrid{display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:20px;
  margin-top:clamp(24px,2.4vw,38px);align-items:stretch}
/* The gallery holds its 16/9 box; the stat card stretches to it and pins its
   counts line to the bottom, so both columns finish on the same line. */
.whynum{display:flex;flex-direction:column;background:var(--green-ink);color:#fff;
  border:0}
.whynum b{display:block;font-size:clamp(64px,7.6vw,124px);line-height:.86;
  letter-spacing:-.035em;font-weight:700}
.whynum em{display:block;margin-top:10px;color:#fff;font-style:normal;font-weight:700;
  font-size:clamp(15px,1.25vw,21px);text-transform:uppercase;letter-spacing:.06em;
  opacity:.85}
.whynum p{color:rgba(255,255,255,.8);font-size:clamp(14px,1vw,17px);line-height:1.55;max-width:46ch}
.whynum .counts{margin-top:auto;padding-top:22px;color:#fff;font-weight:700;
  letter-spacing:.06em;font-size:14px;text-transform:uppercase;opacity:.9}
.gal{position:relative;border-radius:var(--r);overflow:hidden;background:var(--green-ink);
  aspect-ratio:16/9;min-height:0;width:100%;
  max-width:calc(min(46vh,420px) * 1.778);justify-self:center;align-self:start}
.gs{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.gs.on{opacity:1;pointer-events:auto}
.gs img{width:100%;height:100%;object-fit:cover}
.gs figcaption{position:absolute;inset:auto 0 0 0;padding:24px 26px;color:#fff;
  background:linear-gradient(180deg,rgba(8,64,46,0),rgba(8,64,46,.92) 68%)}
.gs figcaption b{display:block;font-size:clamp(18px,1.7vw,28px);text-transform:uppercase;
  letter-spacing:.01em}
.gs figcaption span{display:block;margin-top:4px;color:rgba(255,255,255,.8);font-size:14px}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(8,64,46,.45);
  color:#fff;font-size:24px;font-family:inherit;cursor:pointer;line-height:1;z-index:3}
.gnav:hover{background:var(--green);border-color:#fff}
.gprev{left:14px}.gnext{right:14px}
.gdots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;
  justify-content:center;gap:8px}
.gd{width:8px;height:8px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.5)}
.gd.on{background:#fff;width:22px;border-radius:5px}
@media (max-width:1000px){
  .whygrid{grid-template-columns:1fr}
  .gal{max-width:none}
}
@media (max-width:760px){
  .gs figcaption{padding:16px 18px}
  .gnav{width:40px;height:40px;font-size:20px}
}

/* ------------------------------------------------------------- instagram
   One strip, six reels, no account headers. Tiles are 9/16 because every one
   of them is a reel — a square crop cut the top and bottom off each. */
.iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1320px;
  margin-top:clamp(24px,2.4vw,34px)}
.igt{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--r);background:var(--green-tint);border:1px solid var(--line)}
.igt img,.igt video{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.igt:hover img,.igt:hover video{transform:scale(1.04)}
.igt .vb{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%;
  background:rgba(8,64,46,.72);display:grid;place-items:center;pointer-events:none}
/* A border triangle's box is as wide as its base plus whatever the opposite
   border reserves, and the ink itself tapers — its centre of mass sits a third
   in from the flat edge. Centring that box therefore parks the glyph visibly
   back from the middle of the circle. The opposite border is dropped so the
   box is the triangle, then the whole thing is pushed out by a sixth of the
   base, which puts the centroid on the circle's centre. */
.igt .vb::after{content:"";width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:9px solid #fff;
  transform:translateX(1.5px)}
@media (max-width:1000px){.iggrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.iggrid{gap:10px}}

/* ------------------------------------------------------------------- faq */
.faq{margin-top:clamp(24px,2.4vw,34px);display:grid;gap:8px;max-width:1100px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.faq details[open]{border-color:var(--green-line)}
.faq summary{cursor:pointer;list-style:none;padding:16px 22px;font-weight:700;
  font-size:clamp(15px,1.05vw,18px);display:flex;justify-content:space-between;
  align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:1.25em;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.6;
  max-width:88ch}
.faq a{color:var(--green);font-weight:700}

/* ----------------------------------------------------------------- final */
.final{position:relative;overflow:hidden;background:var(--green-ink);color:#fff;
  padding:clamp(56px,6vw,104px) 0}
.final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.final::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,64,46,.9),rgba(8,64,46,.82))}
.final .wrap{position:relative;z-index:2}
.final h2{font-size:clamp(30px,4vw,62px);text-transform:uppercase;color:#fff}
.final .lede{margin:16px 0 0}
.final .btn-lg{margin-top:26px}

/* ---------------------------------------------------------------- footer */
footer{background:var(--green-ink);color:rgba(255,255,255,.78);
  padding:clamp(40px,4vw,64px) 0 28px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
footer .mark{align-items:flex-start}
footer .mark .crest{height:46px}
footer .mark .word{border-inline-start-color:rgba(255,255,255,.25)}
footer .mark b{color:#fff}
footer .mark .word>span{color:rgba(255,255,255,.65)}
.fnote{margin:18px 0 0;color:rgba(255,255,255,.65);line-height:1.6;font-size:14px}
.pays{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pays img{height:26px;width:auto;background:#fff;border-radius:4px;padding:3px 5px}
.fgrid h5{margin:0 0 14px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:#fff;font-weight:700}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fgrid a{text-decoration:none;color:rgba(255,255,255,.78)}
.fgrid a:hover{color:#fff}
.fbot{margin:36px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.55);font-size:13px;line-height:1.6}

/* ------------------------------------------------------------------- rtl */
[dir=rtl] .tonight{right:auto;left:var(--pad)}
[dir=rtl] .gprev{left:auto;right:14px}
[dir=rtl] .gnext{right:auto;left:14px}
[dir=rtl] .hero::after{background:linear-gradient(260deg,rgba(8,64,46,.94) 0%,rgba(8,64,46,.86) 42%,rgba(11,123,85,.62) 100%)}
/* Arabic does not have an uppercase, and Dubai's Arabic is drawn to sit at a
   single height — so every text-transform on this page is switched off in RTL
   rather than left to do nothing quietly. */
[dir=rtl] .h,[dir=rtl] .hero h1,[dir=rtl] .lbody h3,[dir=rtl] .nextin h3,
[dir=rtl] .vshead h3,[dir=rtl] .bt b,[dir=rtl] .gs figcaption b,[dir=rtl] .final h2,
[dir=rtl] .mark b,[dir=rtl] .kicker,[dir=rtl] .vskind,[dir=rtl] .lstatus,
[dir=rtl] .pip,[dir=rtl] .vsrow dt,[dir=rtl] .fgrid h5,[dir=rtl] .tonight h2,
[dir=rtl] .whynum em,[dir=rtl] .whynum .counts,[dir=rtl] .tonight li b{
  text-transform:none;letter-spacing:0}
[dir=rtl] .mark .word{border-inline-start:1px solid var(--line);padding-inline-start:14px}
@media (max-width:1100px){[dir=rtl] .tonight{left:auto}}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;
  scroll-behavior:auto!important}}

/* ------------------------------------------------------------ short window
   A laptop with a bookmarks bar leaves about 680px under the header; below
   that everything tightens a notch rather than growing scrollbars. */
@media (min-width:1000px) and (max-height:820px){
  .sec{padding:40px 0}
  .h{font-size:clamp(25px,2.3vw,36px)}
  .whynum b{font-size:clamp(56px,6.4vw,100px)}
  .gal{max-width:calc(38vh * 1.778)}
  .iggrid{max-width:1080px;margin-top:20px}
  .faq summary{padding:13px 20px}
  .faq p{padding:0 20px 16px}
}
@media (min-width:1000px) and (max-height:700px){
  .sec{padding:30px 0}
  .h{font-size:clamp(23px,2vw,31px)}
  .lbody{padding:16px 18px;gap:10px}
  .lbody p{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
  .iggrid{max-width:780px;gap:10px;margin-top:14px}
  .vsrow{padding:9px 0}
  .card{padding:16px}
  .bt p{font-size:14px}
  .bt .ic{width:38px;height:38px;margin-bottom:10px}
}