/* Muhaya — shared responsive + accessibility layer. Inline styles define the desktop design; these rules adapt it. */
html{-webkit-text-size-adjust:100%}

/* skip-to-content link: off-screen until focused */
.skip-link{position:absolute;left:8px;top:-60px;z-index:999;background:#121826;color:#F7F9FC;padding:12px 18px;border-radius:4px;font-weight:700;font-size:15px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:8px}
[data-mfx-root]{width:100%!important;max-width:1440px;margin:0 auto;box-sizing:border-box}
[data-mfx-root] img{max-width:100%}
[data-mfx-root] [id]{scroll-margin-top:84px}
nav[data-mfx-nav]{box-shadow:0 1px 0 rgba(18,24,38,.04)}
:focus-visible{outline:3px solid #2F68FF!important;outline-offset:3px!important;border-radius:2px}
[data-mfx-dark] :focus-visible,[style*="background: rgb(18, 24, 38)"] :focus-visible{outline-color:#F5C84C!important}
[role="button"]{cursor:pointer}
@keyframes mhFlash{0%{box-shadow:0 0 0 0 rgba(245,200,76,.9)}40%{box-shadow:0 0 0 8px rgba(245,200,76,.55)}100%{box-shadow:0 0 0 0 rgba(245,200,76,0)}}
[data-flash="1"]{animation:mhFlash .8s ease-out}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* mobile menu (Site Nav + Home nav) */
[data-menu-btn]{display:none}
[data-menu-panel]{display:none}
nav[data-open] [data-menu-panel]{display:flex}
[data-menu-always="1"] [data-menu-btn]{display:inline-flex}
nav[data-mfx-nav]{position:relative}
nav[data-menu-always="1"]{grid-template-columns:1fr auto auto!important}

/* Hero photo (owner-supplied, 2026-11-02): the Saudi man and woman, back to
   back in warm yellow light, 1536x1024 with an opaque cream background. A soft
   oval mask lets the background dissolve into the page while both people stay
   sharp, with a longer fade at the foot. In light mode the photo is multiplied
   onto the paper so its cream ground disappears and the grid shows through;
   in dark mode it is shown as it is (multiplying would darken the people), and
   the mask alone carries the fade. The photo is never recoloured or flipped. */
[data-hero-photo] img{
  -webkit-mask-image:radial-gradient(ellipse 64% 72% at 48% 50%,#000 60%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 22%,#000 76%,transparent 100%);
  mask-image:radial-gradient(ellipse 64% 72% at 48% 50%,#000 60%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 22%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mix-blend-mode:multiply
}
/* Lower portrait (Home and Story "Why" sections): the woman with the tablet,
   1024x1536. Light mode: multiplied onto the paper, so the photo's cream
   background disappears and its yellow forms fade out on their own; a soft
   top and side fade, and she meets the section edge at the bottom. */
[data-warm-photo]{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 14%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 14%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mix-blend-mode:multiply
}
/* Dark mode: shown as is, so instead of one oval the mask is a union of soft,
   uneven patches that follow her silhouette (head, body, robe, tablet and
   hand) and, more faintly, the yellow forms around her. The image fades out
   irregularly, like diffused light, with no shape to read, and the patches
   avoid the photo's cream background, which would show as pale shapes. */
html[data-theme="dark"] [data-warm-photo]{
  -webkit-mask-image:radial-gradient(ellipse 32% 24% at 46% 27%,#000 50%,transparent 100%),radial-gradient(ellipse 27% 20% at 52% 52%,#000 55%,transparent 100%),radial-gradient(ellipse 24% 26% at 45% 84%,#000 60%,transparent 100%),radial-gradient(ellipse 12% 11% at 72% 58%,#000 62%,transparent 100%),radial-gradient(ellipse 9% 8% at 68% 74%,#000 50%,transparent 100%),radial-gradient(ellipse 16% 20% at 24% 52%,rgba(0,0,0,.42),transparent 100%),radial-gradient(ellipse 10% 12% at 76% 36%,rgba(0,0,0,.22),transparent 100%),radial-gradient(ellipse 22% 13% at 42% 12%,rgba(0,0,0,.4),transparent 100%);
  mask-image:radial-gradient(ellipse 32% 24% at 46% 27%,#000 50%,transparent 100%),radial-gradient(ellipse 27% 20% at 52% 52%,#000 55%,transparent 100%),radial-gradient(ellipse 24% 26% at 45% 84%,#000 60%,transparent 100%),radial-gradient(ellipse 12% 11% at 72% 58%,#000 62%,transparent 100%),radial-gradient(ellipse 9% 8% at 68% 74%,#000 50%,transparent 100%),radial-gradient(ellipse 16% 20% at 24% 52%,rgba(0,0,0,.42),transparent 100%),radial-gradient(ellipse 10% 12% at 76% 36%,rgba(0,0,0,.22),transparent 100%),radial-gradient(ellipse 22% 13% at 42% 12%,rgba(0,0,0,.4),transparent 100%);
  -webkit-mask-composite:source-over;mask-composite:add
}
html[data-theme="dark"] [data-hero-photo] img,html[data-theme="dark"] [data-warm-photo]{mix-blend-mode:normal}
/* dark mode: without the multiply the cream ground would read as a panel, so
   the fade closes in sooner on every side (clearing the transparent "How
   Muhaya works" button and the side texts) and leaves a soft warm light
   around the pair */
html[data-theme="dark"] [data-hero-photo] img{
  -webkit-mask-image:radial-gradient(ellipse 58% 64% at 48% 54%,#000 58%,transparent 100%),linear-gradient(to right,transparent 9%,#000 22%,#000 86%,transparent 98%),linear-gradient(to bottom,transparent 4%,#000 26%,#000 74%,transparent 98%);
  mask-image:radial-gradient(ellipse 58% 64% at 48% 54%,#000 58%,transparent 100%),linear-gradient(to right,transparent 9%,#000 22%,#000 86%,transparent 98%),linear-gradient(to bottom,transparent 4%,#000 26%,#000 74%,transparent 98%)
}
/* the kicker bar stays above the photo so the multiply never tints it */
[data-r="hero"] > [data-r="hero-tag"]{z-index:11}

/* "Why I built this": the highlighted word (after / بعد) keeps its blue and
   gets a hand-drawn coral underline on its baseline, so it reads as part of
   the headline line rather than a word set apart in a loop. */
[data-r="after-mark"]{position:absolute;left:-2%;width:104%;bottom:.02em;height:.18em;overflow:visible;pointer-events:none}

/* Hero glow: warm light escaping upward from the photo into the lower part
   of the headline. Two layers, both long feathered radial fades with no edge:
   ::before sits behind the letters (warms the page in the gaps and counters);
   in dark mode ::after sits over them with a faint multiply, so the lower
   part of the white letters catches a little warmth while staying fully
   readable (multiply never lightens and barely touches the dark page). The
   glow is centred on the photo's top edge (--glow-x/--glow-y; Arabic values
   in muhaya-rtl.css). Desktop layout only. */
@media (min-width:1101px){
  [data-r="hero"]::before,[data-r="hero"]::after{content:"";position:absolute;pointer-events:none;
    left:var(--glow-x,56%);top:var(--glow-y,47%);transform:translate(-50%,-50%)}
  [data-r="hero"]::before{z-index:0;width:66%;height:72%;
    background:radial-gradient(ellipse 50% 50% at 50% 54%,rgba(245,200,76,.46),rgba(245,200,76,.26) 30%,rgba(245,200,76,.1) 58%,rgba(245,200,76,.03) 80%,rgba(245,200,76,0) 100%)}
  html[data-theme="dark"] [data-r="hero"]::before{
    background:radial-gradient(ellipse 50% 50% at 50% 54%,rgba(245,200,76,.48),rgba(245,200,76,.26) 30%,rgba(245,200,76,.09) 58%,rgba(245,200,76,.02) 80%,rgba(245,200,76,0) 100%)}
  html[data-theme="dark"] [data-r="hero"]::after{z-index:2;width:50%;height:46%;mix-blend-mode:multiply;
    background:radial-gradient(ellipse 50% 50% at 50% 60%,rgba(245,190,90,.42),rgba(245,190,90,.2) 40%,rgba(245,190,90,.04) 75%,rgba(245,190,90,0) 100%)}
  [data-r="hero"] > [data-r="hero-mega"],[data-r="hero"] > [data-r="hero-the"]{z-index:1}
}

/* ---------- narrow desktop (1101px+) ---------- */
/* Featured book (Insights page and Home's Insights block): the one-word
   line "ORGANIZATION" at 150px sets a ~815px minimum for the left column,
   so below ~1415px the statistic card beside it was pushed off the right
   edge. The title now scales down just enough to keep both columns on
   screen; full 150px from ~1415px up. */
@media (min-width:1101px){
  [data-screen-label="Featured"] h2[style*="font-size: 150px"],
  [data-screen-label="Insights"] h3[style*="font-size: 150px"]{font-size:min(150px,calc((100vw - 580px) * .18))!important}
  /* Method step 2: the three lens cards can't shrink below ~600px, so
     below ~1215px the fixed 420px label column beside them pushed the row
     off the page. The label column gives way first; unchanged above that. */
  [data-mfx-root] [style*="grid-template-columns: 420px 1fr"]{grid-template-columns:minmax(0,420px) 1fr!important}
  /* Nav: "Reference Point" wrapped onto two lines at ~1101-1140px. Labels
     stay on one line and the gap eases down there; 36px from 1440px up. */
  [data-navlinks]{gap:min(36px,2.5vw)!important}
  [data-navlinks] a{white-space:nowrap}
  /* Reference Point bridge line: one 84px line ~1110px long, clipped by its
     section below ~1255px. Scales down there; unchanged above. */
  [data-screen-label="Bridge"] [style*="Caveat"]{font-size:min(84px,6.7vw)!important}
}

/* Home/Method four-step cards: each card's illustration is a fixed-size
   SVG (280/300px), which set the minimum width of all four columns, so
   below ~1460px the row ran past the page edge. They now scale down with
   their card (same drawing, via a matching viewBox). */
[data-mfx-root] [style*="repeat(4"] > * svg[viewBox]{max-width:100%;height:auto}

/* ---------- Home hero, English (desktop, 1101px+) ----------
   The English hero is composed on a 1440 x 860 canvas. Its pieces used to be
   placed at those fixed pixel offsets, which only held at 1440px: on a
   narrower desktop the right-hand subtitle, kicker and questions ran off the
   edge. The same composition is now expressed as proportions of the hero
   itself — positions as % of its width/height, sizes in cqw (1cqw = 1% of
   the hero's width) — and the hero keeps the canvas's aspect ratio, so the
   whole thing scales down as one piece. At 1440px and up the hero is 1440px
   wide (the page is capped there) and every value resolves to exactly the
   original pixels. The only things held at a minimum size are the small UI
   texts (buttons, credit line, kicker), which would otherwise become hard
   to read. The Arabic hero has its own layout in muhaya-rtl.css. */
@media (min-width:1101px){
  html:not([dir="rtl"]) [data-r="hero"]{height:auto!important;aspect-ratio:1440/860;container-type:inline-size}
  html:not([dir="rtl"]) [data-r="hero-the"]{left:3.194%!important;top:5.465%!important;width:auto!important;height:auto!important;font-size:5.764cqw!important}
  html:not([dir="rtl"]) [data-r="hero-mega"]{top:13.953%!important;font-size:22.083cqw!important}
  /* the photo: 470,393 to 1170,860 on the 1440x860 canvas, heads just under the headline */
  html:not([dir="rtl"]) [data-r="hero"] > [data-mfx-img]{left:32.639%!important;top:45.698%!important;width:48.611%!important;height:54.302%!important}
  /* side of work, / made clearer. — centred in its box, as designed */
  html:not([dir="rtl"]) [data-r="hero-rest"]{left:65.625%!important;right:auto!important;top:44.07%!important;width:34.722%!important;height:auto!important;overflow:visible!important;font-size:4.306cqw!important}
  /* The kicker keeps its 10px size, so it is anchored by its right edge
     (where the design ends it) and sized to its text. */
  html:not([dir="rtl"]) [data-r="hero-tag"]{left:auto!important;right:4.958%!important;top:59.302%!important;width:auto!important;min-width:23.056cqw;height:auto!important;line-height:12px;white-space:nowrap}
  html:not([dir="rtl"]) [data-r="hero-cta"]{left:6.944%!important;top:51.047%!important;width:33.333%!important}
  html:not([dir="rtl"]) [data-r="hero-cta"] > div[style*="top: 120px"]{top:8.333cqw!important}
  html:not([dir="rtl"]) [data-r="hero-cta"] > div[style*="top: 200px"]{top:13.889cqw!important;max-width:100%;white-space:normal!important;font-size:clamp(13px,1.042cqw,15px)!important}
  html:not([dir="rtl"]) [data-r="hero-cta"] > div[style*="top: 200px"] a{white-space:nowrap}
  html:not([dir="rtl"]) [data-r="hero-cta"] a[href="situations.html"]{font-size:clamp(14px,1.181cqw,17px)!important;padding:clamp(13px,1.25cqw,18px) clamp(18px,1.944cqw,28px)!important}
  html:not([dir="rtl"]) [data-r="hero-cta"] a[href="method.html"]{font-size:clamp(13.5px,1.111cqw,16px)!important;padding:clamp(12px,1.111cqw,16px) clamp(16px,1.667cqw,24px)!important}
  /* handwritten questions */
  html:not([dir="rtl"]) [data-r="hero"] > div[style*="top: 138px"]{left:1.806%!important;top:16.047%!important}
  html:not([dir="rtl"]) [data-r="hero"] > div[style*="top: 138px"] [data-mfx-note]{left:7.639cqw!important;top:18.75cqw!important;font-size:2.361cqw!important}
  html:not([dir="rtl"]) [data-r="hero"] > [data-mfx-note][style*="left: 130px"]{left:9.028%!important;top:84.884%!important;font-size:2.222cqw!important}
  html:not([dir="rtl"]) [data-r="hero"] > [data-mfx-note][style*="left: 1180px"]{left:81.944%!important;top:69.767%!important;font-size:2.083cqw!important}
  html:not([dir="rtl"]) [data-r="hero"] > [data-mfx-note][style*="left: 1150px"]{left:79.861%!important;top:81.744%!important;font-size:2.361cqw!important}
  /* dotted underline across the bottom */
  html:not([dir="rtl"]) [data-r="hero"] > svg[width="1440"]{left:-.139%!important;top:1.279%!important;width:100%!important;height:auto!important}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  [data-mfx-root] section,[data-mfx-root] footer,[data-mfx-root] nav{padding-left:32px!important;padding-right:32px!important}
  [data-mfx-root] [style*="repeat(4"],[data-mfx-root] [style*="repeat(5"],[data-mfx-root] [style*="repeat(6"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-mfx-root] [style*="grid-template-columns: 1fr 1.6fr 1fr 1fr"],[data-mfx-root] [style*="grid-template-columns: 1fr 2.4fr 1fr 1fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-mfx-root] [style*="grid-template-columns: 1fr 380px"],[data-mfx-root] [style*="grid-template-columns: 1fr 400px"],[data-mfx-root] [style*="grid-template-columns: 1fr 420px"],[data-mfx-root] [style*="grid-template-columns: 1fr 440px"],[data-mfx-root] [style*="grid-template-columns: 1fr 480px"],[data-mfx-root] [style*="grid-template-columns: 1fr 360px"],[data-mfx-root] [style*="grid-template-columns: 280px 1fr"],[data-mfx-root] [style*="grid-template-columns: 340px repeat"],[data-mfx-root] [style*="grid-template-columns: 360px 1fr"],[data-mfx-root] [style*="grid-template-columns: 380px 1fr"],[data-mfx-root] [style*="grid-template-columns: 420px 1fr"],[data-mfx-root] [style*="grid-template-columns: 440px 1fr"],[data-mfx-root] [style*="grid-template-columns: 120px 1fr 1fr"],[data-mfx-root] [style*="grid-template-columns: 120px 380px 1fr"],[data-mfx-root] [style*="grid-template-columns: 200px 1fr"],[data-mfx-root] [style*="grid-template-columns: 220px 1fr"],[data-mfx-root] [style*="grid-template-columns: 160px 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  [data-mfx-root] [style*="font-size: 150px"]{font-size:112px!important}
  [data-mfx-root] [style*="font-size: 128px"],[data-mfx-root] [style*="font-size: 120px"]{font-size:96px!important}
  [data-mfx-root] [style*="font-size: 112px"],[data-mfx-root] [style*="font-size: 104px"]{font-size:84px!important}
  [data-mfx-root] [style*="font-size: 220px"],[data-mfx-root] [style*="font-size: 196px"]{font-size:140px!important}
  [data-r="rail"]{display:none!important}
  [data-r="portrait"]{position:relative!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:440px;height:460px!important;margin:0 auto}
  [data-r="portrait"] img{height:460px!important}
  [data-mfx-root] [style*="font-size: 176px"]{font-size:120px!important}
  [data-mfx-root] [style*="grid-template-columns: 1.35fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  [data-mfx-root] [style*="height: 724px"]{height:auto!important}
  [data-r="stair"]{height:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  [data-r="stair"]>div,[data-r="stair"] [data-mfx-step]{position:static!important;width:auto!important}
  [data-mfx-root] svg[width="1320"],[data-mfx-root] svg[width="1440"],[data-r="concept-line"]{display:none}
  [data-mfx-root] [data-mfx-note][style*="position: absolute"]{display:none!important}
  [data-mfx-root] [style*="white-space: nowrap"]{white-space:normal!important}
}
@media (max-width:1100px){
  [data-navlinks]{display:none!important}
  [data-menu-btn]{display:inline-flex!important}
  [data-nav-cta]{display:none!important}
  nav[data-mfx-nav]{grid-template-columns:1fr auto!important;display:grid!important}
}

/* ---------- hero (home overlay layout) ---------- */
@media (max-width:1100px){
  [data-r="hero"]{height:auto!important;display:flex!important;flex-direction:column;padding:40px 32px 56px!important;gap:18px}
  [data-r="hero"]>*,[data-r="hero"] [data-r="hero-cta"]>*{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:auto!important;transform:none!important}
  [data-r="hero"] [data-r="hero-mega"]{text-align:left!important;font-size:min(22vw,220px)!important;order:2}
  /* "UNWRITTEN" is ~4.4em wide, so 22vw ran a few px past a phone screen;
     sized from the space inside the page margins instead. */
  html:not([dir="rtl"]) [data-r="hero"] [data-r="hero-mega"]{font-size:min(calc((100vw - 64px) / 4.4),220px)!important}
  [data-r="hero"] [data-r="hero-the"]{order:1;font-size:48px!important}
  [data-r="hero"] [data-r="hero-rest"]{order:3;text-align:left!important;font-size:min(9vw,56px)!important;letter-spacing:0!important;line-height:1!important;overflow:visible!important;text-shadow:none!important}
  [data-r="hero"] [data-r="hero-tag"]{order:4;text-align:left!important;height:auto!important;align-self:flex-start;padding:3px 8px;line-height:1.5}
  [data-r="hero"] [data-r="hero-cta"]{order:5}
  [data-r="hero"] [data-r="hero-cta"] div{flex-wrap:wrap!important;white-space:normal!important}
  /* the photo at full width, never cropped, centred under the CTAs */
  [data-r="hero"] [data-mfx-img]{order:6;height:auto!important;max-width:720px!important;width:100%!important;align-self:center;margin-top:12px}
  [data-r="hero"] [data-mfx-img] img{position:relative!important;display:block;width:100%!important;height:auto!important;left:auto!important;bottom:auto!important;transform:none!important}
  [data-r="hero"] svg,[data-r="hero"] sc-if{display:contents}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  [data-mfx-root] section,[data-mfx-root] footer,[data-mfx-root] nav{padding-left:20px!important;padding-right:20px!important}
  [data-mfx-root] section{padding-top:48px!important;padding-bottom:48px!important}
  [data-mfx-root] [style*="repeat("],[data-mfx-root] [style*="fr 1"],[data-mfx-root] [style*="fr 2"],[data-mfx-root] [style*="fr 4"],[data-mfx-root] [style*="1fr 40px 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  [data-mfx-root] [style*="1fr 40px 1fr"]>[style*="justify-content: center"]{transform:rotate(90deg)}
  [data-mfx-root] [style*="font-size: 150px"],[data-mfx-root] [style*="font-size: 176px"],[data-mfx-root] [style*="font-size: 196px"]{font-size:72px!important}
  /* Featured book title: "ORGANIZATION" is wider than the card at 72px. */
  [data-screen-label="Featured"] h2[style*="font-size: 150px"],
  [data-screen-label="Insights"] h3[style*="font-size: 150px"]{font-size:min(72px,calc((100vw - 128px) * .18))!important}
  [data-mfx-root] [style*="font-size: 128px"],[data-mfx-root] [style*="font-size: 120px"],[data-mfx-root] [style*="font-size: 112px"],[data-mfx-root] [style*="font-size: 104px"]{font-size:56px!important}
  [data-mfx-root] [style*="font-size: 96px"],[data-mfx-root] [style*="font-size: 88px"],[data-mfx-root] [style*="font-size: 84px"]{font-size:48px!important}
  [data-mfx-root] [style*="font-size: 80px"],[data-mfx-root] [style*="font-size: 72px"],[data-mfx-root] [style*="font-size: 64px"]{font-size:44px!important}
  [data-mfx-root] [style*="font-size: 60px"],[data-mfx-root] [style*="font-size: 56px"],[data-mfx-root] [style*="font-size: 52px"]{font-size:38px!important}
  [data-mfx-root] [style*="font-size: 44px"],[data-mfx-root] [style*="font-size: 40px"]{font-size:32px!important}
  [data-mfx-root] [style*="font-size: 220px"]{font-size:96px!important}
  [data-mfx-root] [style*="min-height: 600px"],[data-mfx-root] [style*="min-height: 640px"]{min-height:0!important}
  [data-r="stair"]{grid-template-columns:minmax(0,1fr)!important}
  [data-mfx-root] [style*="justify-content: space-between"][style*="display: flex"]{flex-wrap:wrap;gap:14px}
  [data-mfx-root] footer{flex-direction:column;align-items:flex-start!important;gap:14px}
  [data-mfx-root] footer div{flex-wrap:wrap}
  nav[data-mfx-nav]{height:56px!important}
  [data-menu-panel]{max-height:calc(100vh - 56px);overflow-y:auto}
  [data-mfx-root] a,[data-mfx-root] [role="button"]{min-height:44px;box-sizing:border-box}
  [data-mfx-root] footer a,[data-mfx-root] p a,[data-mfx-root] [data-inline-link]{min-height:0}
  [data-mfx-root] input{font-size:17px!important;min-width:0}
  [data-r="hide-sm"]{display:none!important}
  [data-mfx-root] [style*="grid-template-columns: 80px 1fr auto"]{grid-template-columns:40px minmax(0,1fr) 28px!important;gap:14px!important}
  [data-mfx-root] [style*="grid-template-columns: 80px 1fr auto"]>:nth-child(3){display:none}
  [data-mfx-root] [style*="height: 860px"],[data-mfx-root] [style*="height: 820px"]{height:auto!important}
  /* Reference Point: expanded shelf content is indented 104px to align with the
     desktop numeral column; on a phone that eats over a quarter of the width. */
  [data-mfx-root] [style*="104px"]{padding-left:0!important;margin-left:0!important}
}

/* Author name: links to her LinkedIn profile wherever it appears (headings,
   credit lines, footer). It keeps the surrounding colour and type, marked
   only by a quiet underline, in both themes. */
[data-mfx-root] a.author-link{color:inherit!important;text-decoration:underline;text-decoration-thickness:max(1px,.05em);text-underline-offset:.14em;text-decoration-color:currentColor}
[data-mfx-root] a.author-link:hover{text-decoration-thickness:max(2px,.08em)}

/* ---------- wide screens (1441px+) ----------
   At 1440px and below nothing here applies, so the approved design is
   unchanged. Above 1440px the page stops being a 1440px box in the middle
   of the window:
   - surfaces go full width: the root wrapper is uncapped, so the grid
     paper, nav and footer bars, section rules and colour bands run edge to
     edge;
   - the content sits on a frame that grows with the window up to a ceiling
     (1320px at 1440, ~1584px at 1920, 1760px from ~2240px), with the side
     gutter making up the rest;
   - major display headings grow a little with the frame (up to 10%, via
     zoom so the Arabic sizes in muhaya-rtl.css scale the same way); body
     copy, navigation, labels and metadata keep their sizes;
   - the Home hero gets its own width (up to 1600px) and redistributes
     its loose elements (see below). */
@media (min-width:1441px){
  :root{
    --frame:clamp(1320px, calc(1320px + (100vw - 1440px) * .55), 1760px);
    --gutter:max(60px, calc((100vw - var(--frame)) / 2));
    /* display growth: 1 at 1440, 1.08 at 1920, capped at 1.10 */
    --ds:clamp(1, calc(1 + tan(atan2(100vw - 1440px, 6000px))), 1.1);
    /* Home hero: its composition width, and how far its free-floating
       pieces may move out into the wider frame */
    --hero-w:clamp(1440px, calc(1440px + (100vw - 1440px) * .35), 1600px);
    --hero-field:min(100vw, calc(var(--frame) + 120px));
    --hero-spread:max(0px, calc((var(--hero-field) - var(--hero-w)) / 2));
  }
  [data-mfx-root]{max-width:none!important;background-position:calc(var(--gutter) - 60px) 0!important}
  /* every section, the nav and the footer: 60px side padding becomes the gutter */
  nav[data-mfx-nav],
  [data-mfx-root] > footer,
  [data-mfx-root] section:not([data-r="hero"]):not([data-screen-label="Why"]):not([data-screen-label="Why Muhaya exists"]){
    padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;
  }
  /* "Why I built this" (Home, About) has no section padding: its columns
     carry their own 60px, and the portrait is anchored inside the right
     column. Pulling the section in keeps both on the content frame. */
  [data-mfx-root] section:is([data-screen-label="Why"],[data-screen-label="Why Muhaya exists"]){
    padding-left:calc(var(--gutter) - 60px)!important;padding-right:calc(var(--gutter) - 60px)!important;
  }
  /* major display headings and big figures (not the hero, which has its own
     rules); lines are balanced so a wider measure doesn't leave a lone word */
  [data-mfx-root] :is([style*="font-size: 56px"],[style*="font-size: 60px"],[style*="font-size: 64px"],[style*="font-size: 72px"],[style*="font-size: 80px"],[style*="font-size: 83px"],[style*="font-size: 88px"],[style*="font-size: 96px"],[style*="font-size: 104px"],[style*="font-size: 112px"],[style*="font-size: 120px"],[style*="font-size: 128px"],[style*="font-size: 150px"],[style*="font-size: 176px"],[style*="font-size: 196px"],[style*="font-size: 220px"]):is([style*="font-weight: 800"],[style*="font-weight: 900"]):not([data-r="hero"] *){zoom:var(--ds);text-wrap:balance}
  /* Reading widths: blocks whose lines would otherwise lengthen with the
     frame keep the measure they have at 1440px. */
  [data-measure="banner"]{max-width:1320px}
  [data-measure="row"]{max-width:1060px}
  [data-measure="text"]{max-width:680px}
  [data-measure="card"]{max-width:640px}
  /* Situations library: four columns once the frame is wide enough */
  @media (min-width:1920px){ #sit-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important} }

  /* Home hero, English: the proportional composition (cqw units, see the
     1101px+ block) is laid out on its own width, which grows to 1600px;
     the grid paper behind it stays full width. Its free-floating pieces,
     the four handwritten questions, move out into the extra width so the
     negative space opens up around the portrait instead of the whole
     composition simply getting bigger. */
  html:not([dir="rtl"]) [data-r="hero"]{max-width:var(--hero-w);margin-inline:auto}
  html:not([dir="rtl"]) [data-r="hero"] > div[style*="top: 138px"] [data-mfx-note],
  html:not([dir="rtl"]) [data-r="hero"] > [data-mfx-note][style*="left: 130px"]{translate:calc(var(--hero-spread) * -1) 0}
  html:not([dir="rtl"]) [data-r="hero"] > [data-mfx-note][style*="left: 1180px"],
  html:not([dir="rtl"]) [data-r="hero"] > [data-mfx-note][style*="left: 1150px"]{translate:var(--hero-spread) 0}
}

/* ---------- About: calm, personal, editorial ----------
   Built from the owner's mockup (2026-11-04), version B with her refinements:
   one calm ground; the question (with a soft highlight on "Muhaya") beside a
   black-and-white portrait from her original photo, blended into the paper
   with no frame; what I knew beside the workplace example; the four questions
   and the "built from that gap" line each in a soft light panel; the statement;
   a closing on the grid paper with simply the name; the compact dark
   invitation. The supporting text is organised by one device: a hairline on
   the inner side of each small-text column (example, later, name). Hand-drawn
   treatments: the coral circle and the yellow brush only. Class-based (ab-*),
   so the inline-style size rules elsewhere in this file don't reach it. */
[data-about]{--ab-pad:60px;--ab-ink2:#3b4252;--ab-ground:#F0F0F0;--ab-ground0:rgba(240,240,240,0);--ab-panel:#F7F9FC;--ab-rule:rgba(18,24,38,.14)}
html[data-theme="dark"] [data-about]{--ab-ink2:#C3CAD7;--ab-ground:#0E1320;--ab-ground0:rgba(14,19,32,0);--ab-panel:#161D2C;--ab-rule:rgba(236,239,245,.14)}
[data-about] p{margin:0}
.ab-label{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ab-body{font-size:18px;line-height:1.7;color:var(--ab-ink2);text-wrap:pretty}
.ab-body+.ab-body{margin-top:16px!important}
/* the yellow brush: a hand-drawn stroke behind the lower half of the words */
[data-r="mark"],[data-r="mark-soft"]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 46 3, 128 2, 197 6 C 199 11, 198 16, 195 20 C 128 17, 62 19, 3 22 C 1 17, 2 12, 4 9 Z' fill='%23F5C84C' fill-opacity='.62'/%3E%3C/svg%3E") 0 96%/100% .64em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em}
/* dark mode: the brand yellow as a firmer stroke under the words (instead of a
   faint wash behind them), so it reads clearly on the dark ground without
   lowering the text contrast */
html[data-theme="dark"] [data-r="mark"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 46 3, 128 2, 197 6 C 199 11, 198 16, 195 20 C 128 17, 62 19, 3 22 C 1 17, 2 12, 4 9 Z' fill='%23F5C84C' fill-opacity='.85'/%3E%3C/svg%3E");background-position:0 100%;background-size:100% .3em}
/* "Muhaya" in the heading: the same stroke, lighter and lower, so it reads as
   a quiet emphasis rather than a marker */
[data-r="mark-soft"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 46 3, 128 2, 197 6 C 199 11, 198 16, 195 20 C 128 17, 62 19, 3 22 C 1 17, 2 12, 4 9 Z' fill='%23F5C84C' fill-opacity='.42'/%3E%3C/svg%3E");background-position:0 90%;background-size:100% .3em;padding:0 .04em}
html[data-theme="dark"] [data-r="mark-soft"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 46 3, 128 2, 197 6 C 199 11, 198 16, 195 20 C 128 17, 62 19, 3 22 C 1 17, 2 12, 4 9 Z' fill='%23F5C84C' fill-opacity='.8'/%3E%3C/svg%3E");background-position:0 98%;background-size:100% .2em}
[data-r="hand-circle"]{position:relative;display:inline-block;white-space:nowrap;margin-inline:.08em}
[data-r="hand-circle"]>svg{position:absolute;left:-9%;top:-10%;width:118%;height:130%;overflow:visible;pointer-events:none}
/* the shared structure for supporting text */
.ab-panel{background:var(--ab-panel);border-radius:6px}

/* the story: one calm ground (the grid paper is hidden until the closing) */
[data-mfx-root] section.ab-story{padding:56px var(--ab-pad) 56px!important;background:var(--ab-ground)}

/* 1 the question beside the portrait */
.ab-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:center}
.ab-h1{margin:22px 0 0;font-weight:800;font-stretch:80%;font-size:80px;line-height:.98;letter-spacing:-.03em;max-width:9em;text-wrap:balance}
.ab-lead{margin-top:40px!important;font-size:21px;line-height:1.6;max-width:28em;text-wrap:pretty}
.ab-lead+.ab-body{margin-top:16px!important}
.ab-hero-text .ab-body{max-width:31em}
/* her original photo, unedited (assets/razaz-portrait.jpg is the file as she
   sent it); black and white and the crop are CSS only. The frame shows the
   full width from the very top (the hijab sits ~40px below it) down past the
   shoulders. The soft edge is a hand-made alpha matte
   (assets/razaz-portrait-feather.png, drawn in the frame's coordinates):
   her silhouette stays solid, the room fades with distance from her along an
   irregular, eased edge, and every border eases to zero (shortest above the
   hijab and beside the cheek, where the photo has ~40px and ~50px; the
   top-right corner, where someone beside her appears, fades first). No
   gradient shapes, so there is no line, oval or ring to see. The matte
   matches this photo and crop; redraw it if either changes. */
.ab-portrait{margin:0;display:flex;justify-content:center}
.ab-portrait img{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:641/880;object-fit:cover;object-position:50% 0;filter:grayscale(1) contrast(1.05) brightness(1.03);
  -webkit-mask-image:url("assets/razaz-portrait-feather.png");mask-image:url("assets/razaz-portrait-feather.png");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha}
html[data-theme="dark"] .ab-portrait img{filter:grayscale(1) contrast(1.04) brightness(.88)}

/* 2 what I knew (end side) beside the example (start side, hairline inside) */
.ab-knew-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:center;margin-top:88px}
.ab-knew{grid-column:2;grid-row:1;font-stretch:85%;letter-spacing:-.02em}
.ab-knew>span{display:block}
.ab-k1,.ab-k3{font-weight:800;font-size:50px;line-height:1.08}
.ab-k2{font-weight:400;font-size:34px;line-height:1.2;margin:8px 0 10px}
.ab-example{grid-column:1;grid-row:1;max-width:30em;padding:6px 0;padding-inline-end:48px;border-inline-end:1px solid var(--ab-rule)}
.ab-example .ab-body{font-size:17px}

/* 3 the four questions, together in one soft panel */
.ab-q-row{margin-top:104px;padding:44px 32px 36px;text-align:center}
.ab-q{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none}
.ab-q li{padding:4px 20px;font-weight:700;font-stretch:85%;font-size:30px;line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.ab-q li+li{border-inline-start:1px solid var(--ab-rule)}
.ab-whole{margin:28px auto 0!important;max-width:40em}

/* 4 the statement, and what made it clearer */
/* two lines: the setup, then the payoff (heavier, larger, with the circle) */
.ab-statement{margin:120px auto 0!important;text-align:center;font-stretch:80%;letter-spacing:-.03em}
.ab-st1,.ab-st2{display:block;text-wrap:balance}
.ab-st1{font-weight:700;font-size:56px;line-height:1.05}
.ab-st2{margin-top:14px;font-weight:800;font-size:92px;line-height:1}
.ab-later{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;align-items:center;margin-top:104px}
.ab-later>div{padding:6px 0;padding-inline-end:48px;border-inline-end:1px solid var(--ab-rule)}
.ab-later .ab-body{max-width:32em;font-size:17px}
.ab-gap{font-size:26px;line-height:1.45;font-weight:500;max-width:22em;text-wrap:pretty}
.ab-built-box{margin-top:72px;padding:40px 40px 34px;text-align:center}
.ab-built{margin:0 auto!important;max-width:44em;font-size:20px;line-height:1.6;text-wrap:balance}
.ab-to-story{margin-top:16px!important}
.ab-to-story a{font-weight:700;font-size:17px}

/* 5 closing on the grid paper; the name sits behind a hairline */
[data-mfx-root] section.ab-close{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:72px;align-items:center;padding:72px var(--ab-pad) 120px!important;background:linear-gradient(var(--ab-ground),var(--ab-ground0) 96px)}
.ab-guide{font-weight:800;font-stretch:85%;font-size:54px;line-height:1.02;letter-spacing:-.025em;max-width:15em;text-wrap:balance}
.ab-hope{margin-top:28px!important;max-width:36em}
.ab-value{margin-top:36px!important;font-size:18px;line-height:1.6}
.ab-outcomes{margin:14px 0!important;font-weight:700;font-stretch:85%;font-size:34px;line-height:1.25;letter-spacing:-.015em}
.ab-outcomes+.ab-value{margin-top:0!important}
.ab-sign{padding:24px 0;padding-inline-start:56px;border-inline-start:1px solid var(--ab-rule)}
.ab-name{margin:0;font-weight:800;font-stretch:80%;font-size:48px;line-height:1;letter-spacing:-.02em}
.ab-contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
html[data-theme="dark"] [data-about] .ab-contact a[href^="mailto"]{color:#ECEFF5!important}


@media (min-width:1441px){[data-about]{--ab-pad:var(--gutter)}}
/* the payoff line stays on one line down to tablet width */
@media (max-width:1280px){.ab-st2{font-size:72px}}
@media (max-width:1100px){
  [data-about]{--ab-pad:32px}
  .ab-h1{font-size:60px}
  .ab-lead{font-size:19px;margin-top:28px!important}
  .ab-knew-row,.ab-later{gap:40px}
  .ab-example,.ab-later>div{padding-inline-end:32px}
  .ab-k1,.ab-k3{font-size:38px}
  .ab-k2{font-size:27px}
  .ab-q{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .ab-q li:nth-child(3){border-inline-start:0}
  .ab-q li{font-size:27px}
  .ab-st1{font-size:38px}
  .ab-st2{font-size:min(64px,calc((100vw - 64px) / 13.8))}
  [data-mfx-root] section.ab-close{grid-template-columns:minmax(0,1fr);gap:48px}
  .ab-sign{padding:32px 0 0;padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--ab-rule)}
  .ab-guide{font-size:44px}
  .ab-outcomes{font-size:28px}
}
@media (max-width:700px){
  [data-about]{--ab-pad:20px}
  [data-mfx-root] section.ab-story{padding:20px var(--ab-pad) 40px!important}
  .ab-hero{grid-template-columns:minmax(0,1fr);gap:4px}
  .ab-portrait{order:-1}
  .ab-portrait img{max-width:360px}
  .ab-h1{font-size:42px;line-height:1}
  .ab-lead{font-size:19px}
  .ab-body{font-size:17px}
  .ab-knew-row,.ab-later{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:72px}
  .ab-knew,.ab-example{grid-column:1}
  .ab-example{grid-row:2}
  .ab-example,.ab-later>div{padding:24px 0 0;padding-inline-end:0;border-inline-end:0;border-top:1px solid var(--ab-rule)}
  .ab-later>div{padding:0;border-top:0}
  .ab-gap{padding-top:24px;border-top:1px solid var(--ab-rule)}
  .ab-k1,.ab-k3{font-size:32px}
  .ab-k2{font-size:23px;margin:4px 0 6px}
  .ab-q-row{margin-top:64px;padding:12px 20px 28px}
  .ab-q{grid-template-columns:minmax(0,1fr);row-gap:0}
  .ab-q li{padding:16px 0;font-size:26px}
  .ab-q li+li{border-inline-start:0;border-top:1px solid var(--ab-rule)}
  .ab-whole{margin-top:16px!important}
  .ab-statement{margin-top:80px!important}
  .ab-st1{font-size:min(28px,calc((100vw - 40px) / 12.6))}
  .ab-st2{margin-top:8px;font-size:min(46px,calc((100vw - 40px) / 7.4))}
  [data-r="hand-circle"]>svg{top:-6%;height:114%}
  .ab-gap{font-size:21px}
  .ab-built-box{margin-top:48px;padding:28px 20px 24px}
  .ab-built{font-size:18px}
  [data-mfx-root] section.ab-close{gap:40px;padding:48px var(--ab-pad) 72px!important}
  .ab-guide{font-size:34px}
  .ab-outcomes{font-size:24px}
  .ab-name{font-size:36px}
}

/* ---------- closing invitation (every page) ----------
   One compact band on every page (owner, 2026-11-04), matching the approved
   About version: the two-line "Start with what happened" heading at 64px and
   the button on the end side, 48px above and below. Side padding follows the
   usual section rules (60 / 32 / 20px, the gutter on wide screens). */
[data-mfx-root] section.cta-compact{padding-top:48px!important;padding-bottom:48px!important}
@media (max-width:700px){
  [data-mfx-root] section.cta-compact{padding-top:40px!important;padding-bottom:40px!important}
}

/* ---------- print ---------- */
@media print{
  nav[data-mfx-nav],[data-menu-btn],footer,[data-mfx-dark],.skip-link{display:none!important}
  [data-mfx-root]{background-image:none!important;max-width:100%!important}
  [data-mfx-root],[data-mfx-root] *{color:#121826!important;background:#fff!important;box-shadow:none!important;text-shadow:none!important}
  [data-mfx-root] section{padding:16px 0!important;border-color:#121826!important}
  a{text-decoration:underline}
}