/* CFO+ site: everything beyond the owner's first screen and his service pages.
   The vocabulary is his (lp.css): a dark opening with the amber light, paper sections ("leaf") with a
   kicker and a serif heading, white cards with one navy card, numbered steps, and the story window that
   shows real screens. This file adds what his pages did not need: the bar's menu, the home page below
   the first screen, Nashmi's page, the price plans, and the footer. Values come from tokens.css.

   ONE GRID. The bar, every opening, every section, the closing line and the footer hang from the same
   two edges: --inset, which is the page gutter until the window is wider than --wide (1280px) and the
   centred 1280px column after that. Only the three paintings of the first screen run edge to edge.
   ONE SCALE. Page headline 62 (Arabic 64); headline beside a window 52 (56); section headline 46 (50);
   card title 26 (28); intro 20; text 17; secondary 16; small 14.5; label 12.5 (Arabic 14).
   ONE RHYTHM. A section is --sec tall at top and bottom; cards are padded --pad; corners are 12 or 16. */
.page[hidden],[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root{
  --nashmi-cyan:#4FD8EA;--nashmi-cyan-rgb:79,216,234;      /* Nashmi's eyes are part of his identity */
  --nav-stuck:68px;
  --wide:1280px;
  --inset:max(var(--gutter),calc(50% - var(--wide)/2));
  --sec:clamp(56px,6.2vw,92px);
  --pad:clamp(22px,2.4vw,32px);
  --h1:clamp(34px,4.4vw,62px);--h1-ar:clamp(36px,4.6vw,64px);
  --h1-side:clamp(32px,3.7vw,52px);--h1-side-ar:clamp(34px,3.9vw,56px);
  --h2:clamp(28px,3.4vw,46px);--h2-ar:clamp(30px,3.6vw,50px);
  --h3:clamp(21px,2vw,26px);--h3-ar:clamp(22px,2.1vw,28px);
}
@media (max-height:740px),(max-width:520px){:root{--nav-stuck:62px}
}
body{font-variant-numeric:lining-nums}
.skip{position:absolute;z-index:20;inset-inline-start:var(--gutter);top:-80px;padding:10px var(--sp-5);border-radius:var(--r-pill);background:var(--amber);color:var(--ink);font-weight:var(--fw-bold);transition:top var(--t-base)}
.skip:focus{top:var(--sp-3)}
main:focus{outline:0}
/* places the menu can land on stop below the bar, not under it */
#inside,#faq,#students,#companies,#why,#letter,#contact,#quote,#p-analysis,#p-cash,#p-budget{scroll-margin-top:calc(var(--nav-stuck) + var(--sp-6))}
.lp h3,.lp .leaf h2,.lp .opening h1,.lp .lede,.lp .leaf__note{text-wrap:balance}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.lp .reveal,.reveal{animation-range:entry 0px entry 140px}
.lp .plan.reveal,.lp .cmp.reveal,.lp .fam.reveal,.lp .ask.reveal{animation:none}
}
}
.lp p,.lp li{text-wrap:pretty}
/* ---------- the bar: stays with the reader; once the page moves it is lower, lighter, and wears the short mark ---------- */
.nav{position:sticky;top:calc(var(--nav-stuck) - var(--nav-h));display:grid;grid-template-columns:1fr auto 1fr;padding-inline:var(--inset);transition:background var(--t-base),box-shadow var(--t-base)}
.nav > .brand{position:relative;justify-self:start}
.nav > .nav__actions{justify-self:end}
.nav > .nav__links,.nav > .nav__actions{transition:transform var(--t-base) var(--ease)}
.brand__full{transform-origin:0 100%;transition:opacity var(--t-base),transform var(--t-base) var(--ease)}
html[dir="rtl"] .brand__full{transform-origin:100% 100%}
.brand .brand__mark{position:absolute;inset-inline-start:0;top:50%;width:auto;height:38px;opacity:0;transform:translateY(-50%);transition:opacity var(--t-base),transform var(--t-base) var(--ease);pointer-events:none}
html.is-scrolled .nav{box-shadow:0 var(--line) 0 var(--hair),0 12px 24px -18px rgba(4,12,30,.55)}
html.is-scrolled .nav > .nav__links,html.is-scrolled .nav > .nav__actions{transform:translateY(calc((var(--nav-h) - var(--nav-stuck))/2))}
html.is-scrolled .brand__full{opacity:0;transform:scale(.5)}
html.is-scrolled .brand .brand__mark{opacity:1;transform:translateY(calc(-50% + (var(--nav-h) - var(--nav-stuck))/2))}
html.intro-on:not(.intro-done) .nav{position:relative;top:auto}
html.intro-on:not(.intro-done) .brand .brand__mark{opacity:0}
.nav__nashmi{display:inline-flex;align-items:center;gap:var(--sp-2)}
.nav__face{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 var(--line) var(--hair-strong)}
.nav__more.is-here{color:var(--cream);box-shadow:0 var(--rule) 0 var(--amber)}
/* the language is a quiet word; "sign in" is the one outlined action in the bar */
.nav .lang{border-color:transparent;padding-inline:var(--sp-3)}
.nav .lang,.signin--bar{font-size:var(--fs-nav)}
.nav .lang:hover{border-color:transparent;color:var(--amber)}
.signin--bar{min-height:var(--tap);padding-inline:var(--sp-5);border:var(--line) solid var(--hair-strong);border-radius:var(--r-pill)}
.signin--bar:hover{border-color:var(--amber)}
/* while the menu is open nothing of the first screen pokes out from under it */
.nav:has(.nav__more[aria-expanded="true"]) ~ main .roller{visibility:hidden}
html.is-scrolled .mega,html.is-scrolled .sheet{top:var(--nav-h)}
/* the services menu: three groups of three, each item a small drawing, a name and one line;
   beside them a real screen; under them, three ways out */
.mega{padding:var(--sp-7) 0 0}
.mg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.95fr);gap:0 clamp(24px,3vw,48px);padding:0 var(--inset) var(--sp-6)}
.mg__col{display:flex;flex-direction:column}
.mg__h{margin:0;font-family:var(--body);font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--gilt)}
html[lang="ar"] .mg__h{letter-spacing:0;text-transform:none;font-size:var(--fs-label-ar)}
.mg__s{margin:2px 0 var(--sp-2);padding-bottom:var(--sp-3);border-bottom:var(--line) solid rgba(var(--gilt-rgb),.45);font-size:var(--fs-small);color:var(--dim)}
.mg__item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--sp-3);min-height:76px;margin-inline:calc(var(--sp-3)*-1);padding:var(--sp-3);border-radius:var(--r-md);transition:background var(--t-base)}
.mg__item:hover{background:var(--fill-hover)}
.mg__item:active{background:var(--fill-press)}
.mg__i{width:20px;height:20px;margin-top:3px;color:var(--gilt);transition:color var(--t-base)}
.mg__item:hover .mg__i{color:var(--amber)}
.mg__w{display:flex;flex-direction:column;gap:2px}
.mg__t{font-weight:var(--fw-medium);font-size:var(--fs-body);line-height:var(--lh-tight);color:var(--cream);transition:color var(--t-base)}
.mg__item:hover .mg__t,.mg__item[aria-current="page"] .mg__t{color:var(--amber)}
.mg__d{font-size:var(--fs-small);line-height:1.5;color:var(--dim);text-wrap:balance}
.mg__feat{align-self:start;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3) var(--sp-4);border:var(--line) solid var(--hair);border-radius:var(--r-lg);background:rgba(var(--cream-rgb),.03);transition:border-color var(--t-base),background var(--t-base)}
.mg__feat:hover{border-color:rgba(var(--gilt-rgb),.7);background:var(--fill-hover)}
.mg__feat img{flex:none;display:block;width:100%;height:auto;aspect-ratio:720/412;object-fit:cover;border-radius:var(--r-md);margin-bottom:var(--sp-1)}
html[lang="en"] .mg__item{min-height:94px}
.mg__feat{justify-content:flex-start}
.mg__ft{font-weight:var(--fw-bold);color:var(--cream)}
.mg__fd{font-size:var(--fs-small);line-height:1.5;color:var(--dim)}
.mg__foot{display:flex;flex-wrap:wrap;gap:0 var(--sp-8);padding:0 var(--inset);border-top:var(--line) solid var(--hair);background:rgba(var(--cream-rgb),.025)}
.mg__foot a{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:52px;font-size:var(--fs-control);font-weight:var(--fw-medium);color:var(--mist);transition:color var(--t-base)}
.mg__foot a:hover{color:var(--amber)}
.mg__foot i,.next i,.door__to i{flex:none;width:8px;height:8px;border-top:2px solid currentColor;border-inline-end:2px solid currentColor;transform:rotate(45deg);transition:transform var(--t-base)}
html[dir="rtl"] .mg__foot i,html[dir="rtl"] .next i,html[dir="rtl"] .lp .door__to i{transform:rotate(-45deg)}
.mg__foot a:hover i,.next:hover i,.door:hover .door__to i{transform:translateX(4px) rotate(45deg)}
html[dir="rtl"] .mg__foot a:hover i,html[dir="rtl"] .next:hover i,html[dir="rtl"] .lp .door:hover .door__to i{transform:translateX(-4px) rotate(-45deg)}
.sheet{padding-inline:var(--inset)}
html.menu-open{overflow:hidden}
html.menu-open main,html.menu-open .foot,html.mega-open main,html.mega-open .foot{pointer-events:none}
/* ---------- the owner's first screen: execution only ---------- */
/* the three titles sit on one line, and the three "Explore" links on another */
.screen{container-type:inline-size}
@media (min-width:860px){/* past the grid's width the first and last cards grow outward; their words and pictures stay on the grid */
.band{--x:calc(max(var(--gutter),50cqw - var(--wide)/2) - var(--gutter));--col:calc((100% - 2*var(--x))/3);grid-template-columns:calc(var(--x) + var(--col)) var(--col) calc(var(--x) + var(--col))}
.roller + .panel{padding-inline-start:calc(var(--gutter) + var(--x))}
}
@media (max-width:520px){.roller + .panel{padding-top:calc(var(--pad-card-y) + var(--sp-3))}
}
.panel p{min-height:calc(3*1.5em)}
@media (min-width:1100px){.panel h2{white-space:nowrap}
}
.trust{padding-inline:var(--inset)}
/* the entrance is brisk. Build 23b (owner 8/10: «الكلام يتأخر»): the whole first screen is in place within about a second */
.screen::before{animation-delay:.1s}
.tag{animation-delay:.05s}
.w{animation-delay:calc(.1s + var(--w)*40ms)}
.hero .lede{animation-delay:.3s}
.hero .cta{animation-delay:.4s}
.band::before{animation-delay:.3s}
.panel{animation-delay:calc(.3s + var(--c)*.08s)}
.trust{animation-delay:.45s}
.hero{padding-top:clamp(12px,3vh,32px)}
@media (max-width:520px){.tag::before,.tag::after{display:none}
}
/* ---------- shared small pieces ---------- */
.lp .num{font-variant-numeric:tabular-nums lining-nums}
.lp .kicker{margin:0}
.lp .leaf a:focus-visible,.lp .leaf button:focus-visible,.lp .leaf summary:focus-visible,.lp .leaf input:focus-visible,.lp .story button:focus-visible,.lp .vision a:focus-visible,.lp .band-navy a:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:var(--r-focus)}
/* build 21: the ring takes the colour of its ground (tokens.css): navy was invisible on the navy bands */
.lp .opening .story button:focus-visible{outline-color:var(--navy)}
.lp .plan--key a:focus-visible,.lp .offer--key a:focus-visible{outline-color:var(--cream)}
.lp .leaf{padding-block:var(--sec)}
.lp .leaf__inner,.lp .vision__inner{max-width:var(--wide)}
.lp .leaf h2{font-size:var(--h2)}
html[lang="ar"] .lp .leaf h2{font-size:var(--h2-ar)}
.lp .step h3,.lp .offer h3{font-size:var(--h3)}
html[lang="ar"] .lp .step h3,html[lang="ar"] .lp .offer h3{font-size:var(--h3-ar)}
.lp .offer{padding:var(--pad)}
.lp .offers--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.lp .offer .points{margin-top:var(--sp-3);font-size:16px;line-height:1.7}
.lp .offer--key .points{color:var(--cream)}
.lp .offer{transition:border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base)}
.lp .btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding-inline:var(--btn-pad);border:var(--line) solid var(--navy);border-radius:var(--r-pill);font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-btn);white-space:nowrap;cursor:pointer;transition:background var(--t-base),color var(--t-base),border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base)}
.lp .btn--line{background:transparent;color:var(--navy)}
.lp .btn--line:hover{background:var(--navy);color:var(--white)}
.lp .btn--amber{border-color:var(--amber);background:var(--amber);color:var(--ink)}
.lp .btn--amber:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.lp .btn:active{transform:none;box-shadow:none}
/* an outline button on the dark ground */
.lp .ghost{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h-lg);padding-inline:var(--btn-pad);border:var(--line) solid var(--hair-strong);border-radius:var(--r-pill);font-weight:var(--fw-bold);font-size:var(--fs-btn);color:var(--cream);transition:border-color var(--t-base),color var(--t-base)}
.lp .ghost:hover{border-color:var(--amber);color:var(--amber)}
/* a struck price: one line through the middle of the figure, wherever it appears */
.lp s.num{text-decoration:none;padding-inline:.14em;background:linear-gradient(currentColor,currentColor) 50% 54%/100% .075em no-repeat}
.lp .ico{flex:none;width:22px;height:22px}
/* ---------- openings ---------- */
.lp .opening{padding-inline:var(--inset)}
.lp .opening h1{font-size:var(--h1)}
html[lang="ar"] .lp .opening h1{font-size:var(--h1-ar)}
.lp .opening--story h1{font-size:var(--h1-side)}
html[lang="ar"] .lp .opening--story h1{font-size:var(--h1-side-ar)}
.lp .opening .lede,.lp .launch .lede{font-size:clamp(17px,1.45vw,20px)}
/* an opening that stands on text alone */
.lp .opening--plain{grid-template-columns:minmax(0,1fr);padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,72px)}
.lp .opening--plain .opening__text{max-width:46em}
/* words above, and under them a window as wide as the page */
.lp .opening.opening--stack{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(28px,3.6vw,52px);padding-block:clamp(40px,5.6vw,80px) var(--sec)}
.lp .opening--stack .opening__text{max-width:46em}
/* the story windows on the owner's pages keep to a reading size on a very wide screen, and a short slide sits in the middle */
.lp .opening--story > .story{width:100%;max-width:720px;justify-self:end}
.lp .slide{justify-content:center}
/* a tab strip never cuts a name short: when the names do not fit, the strip slides */
.lp .story__top{overflow-x:auto;scrollbar-width:none}
.lp .story__top::-webkit-scrollbar{display:none}
.lp .story__step{flex:1 0 auto}
.lp .story__step > span{overflow:visible;text-overflow:clip}
.lp .story__step b{font-variant-numeric:lining-nums tabular-nums}
.lp .story__arrow:hover{border-color:var(--navy);background:var(--navy);color:var(--paper)}
.lp .story__arrow--next:hover{border-color:var(--ink);background:var(--ink)}
.lp .story__arrow:active,.lp .story__step:active,.lp .tabs [role="tab"]:active,.lp .seg button:active,.lp .next:active,.lp .wear button:active,.lp .lightbox__x:active,.lp .lightbox__nav:active{transform:translateY(1px)}
.lp .door:active::before{opacity:1;background:var(--niche)}
.lp .qa summary:active{color:var(--caramel)}
.lp .step__n{font-variant-numeric:lining-nums}
/* ---------- a real screen in its frame ----------
   Above the picture, a strip names the screen as a window's title would; under it, a bar says what to do.
   Nothing is ever printed on the picture itself. */
.lp .shot--bar{display:flex;flex-direction:column;border-radius:var(--r-md);text-align:start}
.lp .shot--bar img{aspect-ratio:auto;object-fit:contain}
.lp .shot__top{flex:none;display:flex;align-items:center;gap:6px;min-height:30px;padding-inline:var(--sp-3);border-bottom:var(--line) solid var(--paper-hair);background:var(--niche)}
.lp .shot__top i{flex:none;width:8px;height:8px;border-radius:50%;background:rgba(4,44,83,.2)}
.lp .shot__top b{flex:1;min-width:0;padding-inline-end:36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:12.5px;font-weight:var(--fw-medium);color:var(--slate)}
.lp .shot__pic{position:relative;display:block;min-height:0;background:var(--paper)}
.lp .shot--fade .shot__pic::after{content:"";position:absolute;inset:auto 0 0;height:13%;background:linear-gradient(rgba(247,245,239,0),rgba(247,245,239,.96));pointer-events:none}
.lp .shot__bar{flex:none;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:36px;padding:6px var(--sp-3);border-top:var(--line) solid var(--paper-hair);background:var(--card);color:var(--navy);font-size:12.5px;font-weight:var(--fw-bold);line-height:1.4;text-align:center}
.lp .shot__bar svg{flex:none;width:15px;height:15px;color:var(--caramel)}
.lp .shot:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.lp .opening .shot:focus-visible,.lp .opening .exhibit .shot:focus-visible{outline-color:var(--navy)}
/* a still exhibit: the same gilt frame as the story window, holding one real screen */
.lp .exhibit{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);margin:10px;padding:clamp(14px,1.6vw,22px);border-radius:22px;background:var(--paper);color:var(--navy);box-shadow:0 44px 90px -44px rgba(0,0,0,.9)}
.lp .exhibit::before{content:"";position:absolute;inset:-10px;border:1px solid var(--gilt);border-radius:31px;opacity:.7;pointer-events:none}
.lp .exhibit figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--slate);font-size:12.5px}
.lp .exhibit .shot img{width:100%;height:auto}
/* ---------- the wide story window: one real screen at a time, as large as the page allows ---------- */
.lp .inside{display:block;padding-block:var(--sec);border-top:var(--line) solid var(--hair);background:var(--ink)}
.lp .inside__in{max-width:var(--wide);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.lp .inside__head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.5vw,18px)}
.lp .inside h2,.lp .meet h2,.lp .launch h2,.lp .band-navy h2{font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h2);line-height:var(--lh-h2);letter-spacing:var(--tr-display);color:var(--cream);text-wrap:balance}
html[lang="ar"] .lp .inside h2,html[lang="ar"] .lp .meet h2,html[lang="ar"] .lp .launch h2,html[lang="ar"] .lp .band-navy h2{letter-spacing:0;font-weight:var(--fw-semi);font-size:var(--h2-ar);line-height:var(--lh-h2-ar)}
.lp .inside .kicker{color:var(--amber)}
.lp .story--wide{--pic-h:clamp(200px,min(34cqw,43vh),470px);--pic-h-side:clamp(240px,min(40cqw,50vh),520px);width:auto;max-width:none;margin:10px;font-size:16px}
.lp .story--wide .slide{padding:clamp(16px,2cqw,26px) clamp(16px,2.6cqw,34px) clamp(14px,1.8cqw,22px);gap:clamp(12px,1.5cqw,18px)}
.lp .story--wide .slide__head{display:flex;flex-direction:column;gap:2px}
.lp .slide h3.slide__title{margin:0}
.lp .story--wide .slide__title{font-size:clamp(21px,2.1cqw,26px)}
html[lang="ar"] .lp .story--wide .slide__title{font-size:clamp(22px,2.3cqw,28px)}
.lp .story--wide .story__step{font-size:15px;min-height:52px}
.lp .story--wide .pic--wide{grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.5cqw,18px)}
.lp .story--wide .pic--wide .shot{order:-1;width:fit-content;max-width:100%;margin-inline:auto}
.lp .story--wide .pic--wide .shot img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--pic-h)}
.lp .story--wide .pic--wide .points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3) clamp(20px,3cqw,44px);font-size:17px;line-height:1.7}
.lp .story--wide .pic--side{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4cqw,64px)}
.lp .story--wide .pic--side .shot{width:fit-content;max-width:100%}
.lp .story--wide .pic--side .shot img{display:block;width:auto;height:auto;max-width:min(100%,56cqw);max-height:var(--pic-h-side)}
.lp .story--wide .pic--side .points{gap:var(--sp-5);max-width:34em;font-size:17px;line-height:1.7}
.lp .story--wide .pic--side .points li{padding-inline-start:28px}
@container story (max-width:700px){
  .lp .story--wide .pic--wide .points{grid-template-columns:minmax(0,1fr)}
  .lp .story--wide .pic--side{grid-template-columns:minmax(0,1fr)}
  .lp .story--wide .pic--side .shot{order:-1;margin-inline:auto}
  .lp .story--wide .pic--side .shot img{width:100%;max-width:440px;max-height:none}
  .lp .story--wide .pic--wide .shot{width:100%}
  .lp .story--wide .pic--wide .shot img{width:100%;max-height:none}
  .lp .story--wide .pic--side .points{font-size:16px;gap:var(--sp-3)}
}
/* on a narrow window the steps of these stories keep their names and slide sideways */
@container story (max-width:520px){
  .lp .story__step > span,.lp .story__step.is-on > span{display:inline}
  .lp .story__step,.lp .story__step.is-on{flex:none;min-height:48px;padding-inline:12px}
}
.lp .leaf--chats .story{margin-inline:10px}
/* ---------- home: the platform in figures, on navy ---------- */
.lp .band-navy{position:relative;isolation:isolate;overflow:hidden;padding:var(--sec) var(--inset);background:var(--navy);color:var(--cream)}
.lp .band-navy::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 50% 0,rgba(var(--cream-rgb),.07),rgba(var(--cream-rgb),0) 70%)}
.lp .band-navy__in{max-width:var(--wide);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(32px,4.4vw,56px)}
.lp .band-navy .kicker{color:var(--amber)}
.lp .fig{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-6) clamp(16px,2.4vw,36px) var(--sp-2)}
.lp .fig:first-child{padding-inline-start:0}
.lp .fig + .fig{border-inline-start:var(--line) solid rgba(var(--cream-rgb),.16)}
.lp .fig dt{font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(52px,7.2vw,104px);line-height:1;color:var(--cream)}
.lp .fig dt::after{content:"";display:block;width:34px;height:3px;margin-top:var(--sp-4);border-radius:2px;background:var(--amber)}
.lp .fig dd{margin:0;max-width:22ch;color:var(--mist);font-size:17px;line-height:1.6}
html[lang="ar"] .lp .fig dd{line-height:1.8}
.lp .sectors{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--sp-5) clamp(24px,4vw,64px);padding-top:clamp(24px,3vw,40px);border-top:var(--line) solid rgba(var(--cream-rgb),.16)}
.lp .sectors h3{margin:0;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h3);line-height:1.3;color:var(--cream)}
html[lang="ar"] .lp .sectors h3{font-weight:var(--fw-semi);font-size:var(--h3-ar);line-height:1.5}
.lp .sectors ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);margin:0;padding:0;list-style:none}
.lp .sectors li{display:grid;grid-template-columns:minmax(0,11.5em) minmax(40px,1fr) 30px;align-items:center;gap:var(--sp-4);min-height:44px;border-bottom:var(--line) solid rgba(var(--cream-rgb),.1);color:var(--cream);font-size:16px}
.lp .sectors li i{position:relative;height:6px;border-radius:3px;background:rgba(var(--cream-rgb),.1)}
.lp .sectors li i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);border-radius:3px;background:var(--gilt)}
.lp .sectors b{font-family:var(--display);font-weight:var(--fw-medium);font-size:19px;text-align:end;color:var(--amber)}
/* the method: three statements between hairlines, numbered, with no boxes */
/* where to start: the heading keeps its place while the six sentences pass beside it */
.lp .duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:clamp(28px,5vw,72px)}
.lp .duo--faq{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.lp .duo--faq .leaf__head{position:sticky;top:calc(var(--nav-stuck) + var(--sp-7))}
.lp .doors{isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) max-content;column-gap:clamp(16px,2.4vw,36px);border-top:var(--line) solid var(--navy)}
.lp .door{position:relative;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;row-gap:var(--sp-2);min-height:88px;padding-block:var(--sp-4);border-bottom:var(--line) solid var(--paper-hair)}
.lp .door::before{content:"";position:absolute;z-index:-1;inset:0 calc(var(--sp-3)*-1);border-radius:var(--r-md);background:var(--card);opacity:0;transition:opacity var(--t-base)}
.lp .door:hover::before,.lp .door:focus-visible::before{opacity:1}
.lp .door__to{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);font-weight:var(--fw-bold);font-size:15px;color:var(--caramel);white-space:nowrap}
/* Nashmi says hello: he stands on the gilt rule that closes the band */
.lp .meet{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,6vw,88px) var(--inset) 0;background:var(--ink);color:var(--cream)}
.lp .meet::before{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:74%;pointer-events:none}
html[dir="rtl"] .lp .meet::before{background:radial-gradient(42% 100% at 24% 100%,var(--glow))}
html[dir="ltr"] .lp .meet::before{background:radial-gradient(42% 100% at 76% 100%,var(--glow))}
.lp .meet .kicker{color:var(--amber)}
.lp .meet__lead{max-width:30em;font-family:var(--display);font-size:clamp(19px,1.9vw,25px);line-height:1.5;color:var(--cream)}
html[lang="ar"] .lp .meet__lead{font-weight:var(--fw-semi);line-height:1.8}
/* the launch offer */
.lp .launch{position:relative;isolation:isolate;overflow:hidden;padding:var(--sec) var(--inset);background:var(--ink-deep);color:var(--cream)}
.lp .launch::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(60% 90% at 50% 100%,rgba(var(--amber-rgb),.2),rgba(var(--amber-rgb),.06) 46%,rgba(var(--amber-rgb),0) 76%)}
.lp .launch .kicker{color:var(--amber)}
.lp .plan__list{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:0;list-style:none;font-size:16px;line-height:1.7}
.lp .plan__list li{position:relative;padding-inline-start:26px}
.lp .plan__list li::before{content:"";position:absolute;inset-inline-start:2px;inset-block-start:.46em;width:11px;height:6px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
/* questions */
.lp .faq{border-top:var(--line) solid var(--navy)}
.lp .qa{border-bottom:var(--line) solid var(--paper-hair)}
.lp .qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:68px;padding-block:var(--sp-4);list-style:none;cursor:pointer;font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(19px,1.8vw,24px);line-height:1.35;color:var(--navy);transition:color var(--t-base)}
html[lang="ar"] .lp .qa summary{font-weight:var(--fw-semi);line-height:1.6}
.lp .qa summary::-webkit-details-marker{display:none}
.lp .qa summary::after{content:"";flex:none;width:16px;height:16px;background:linear-gradient(var(--caramel),var(--caramel)) center/100% 2px no-repeat,linear-gradient(var(--caramel),var(--caramel)) center/2px 100% no-repeat;transition:transform var(--t-base) var(--ease)}
.lp .qa[open] summary::after{transform:rotate(45deg)}
.lp .qa summary:hover{color:var(--caramel)}
.lp .qa p{max-width:66ch;padding-bottom:var(--sp-6);color:var(--slate);font-size:17px;line-height:1.7}
html[lang="ar"] .lp .qa p{line-height:1.85}
/* two cards that say where to go next */
.lp .nexts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.lp .next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-1) var(--sp-5);padding:var(--sp-6) var(--pad);border:var(--line) solid var(--paper-hair);border-radius:var(--r-lg);background:var(--card);color:var(--navy);transition:border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base)}
.lp .next:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 22px 40px -30px rgba(4,44,83,.7)}
.lp .next__k{grid-column:1;font-size:12.5px;font-weight:var(--fw-bold);letter-spacing:.16em;text-transform:uppercase;color:var(--caramel)}
html[lang="ar"] .lp .next__k{letter-spacing:0;text-transform:none;font-size:14px}
.lp .next strong{grid-column:1;font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(20px,1.9vw,24px);line-height:1.3}
html[lang="ar"] .lp .next strong{font-weight:var(--fw-semi);line-height:1.5}
.lp .next__d{grid-column:1;color:var(--slate);font-size:16px;line-height:1.6}
.lp .next i{grid-column:2;grid-row:1/4;width:10px;height:10px;color:var(--caramel)}
/* ---------- after the model: five families, each counted ---------- */
.lp .fams{display:flex;flex-direction:column;border-top:var(--line) solid var(--navy)}
.lp .fam{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--sp-4) clamp(24px,4vw,64px);padding-block:clamp(22px,3vw,36px);border-bottom:var(--line) solid var(--paper-hair)}
.lp .fam__h{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.lp .fam__n{font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(40px,4.4vw,56px);line-height:1;color:var(--navy)}
.lp .fam__n::after{content:"";display:block;width:34px;height:3px;margin-top:var(--sp-3);border-radius:2px;background:var(--amber)}
.lp .fam__h h3{margin:0;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h3);line-height:1.3;color:var(--navy);hyphens:none}
html[lang="ar"] .lp .fam__h h3{font-weight:var(--fw-semi);font-size:var(--h3-ar);line-height:1.5}
.lp .fam__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5) clamp(20px,3vw,40px);align-content:start;margin:0;padding:var(--sp-2) 0 0;list-style:none}
.lp .fam__list li{min-width:0;display:flex;flex-direction:column;gap:2px}
.lp .fam__list strong{font-weight:var(--fw-bold);font-size:17px;color:var(--navy)}
.lp .fam__list li > span{color:var(--slate);font-size:16px;line-height:1.6}
/* ---------- on your actual numbers: three services, one row each ---------- */
.lp .chapters{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:var(--line) solid var(--navy)}
.lp .chapter{display:grid;grid-template-columns:3ch 48px minmax(0,4fr) minmax(0,6fr) max-content;align-items:center;gap:var(--sp-3) clamp(16px,2.4vw,36px);padding-block:clamp(22px,2.8vw,34px);border-bottom:var(--line) solid var(--paper-hair)}
.lp .chapter__n{font-family:var(--display);font-weight:var(--fw-medium);font-size:26px;color:var(--gold-text)}
.lp .chapter__i{display:grid;place-items:center;width:48px;height:48px;border:var(--line) solid var(--paper-hair);border-radius:var(--r-md);background:var(--card);color:var(--navy)}
.lp .chapter__t{display:flex;flex-direction:column;gap:2px}
.lp .chapter h3{font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h3);line-height:1.25;color:var(--navy)}
html[lang="ar"] .lp .chapter h3{font-weight:var(--fw-semi);font-size:var(--h3-ar);line-height:1.5}
.lp .chapter__d p{color:var(--slate);font-size:17px;line-height:1.62}
html[lang="ar"] .lp .chapter__d p{line-height:1.85}
.lp .chapter__d .chapter__note{margin-top:var(--sp-1);font-size:var(--fs-small);color:var(--gold-text)}
.lp .chip-ok{display:inline-flex;align-items:center;min-height:28px;padding-inline:var(--sp-3);border:var(--line) solid rgba(24,95,165,.4);border-radius:var(--r-pill);background:rgba(24,95,165,.06);font-size:12.5px;font-weight:var(--fw-bold);color:var(--blue);white-space:nowrap}
/* the owner's "connected to the systems you work on": three equal tiles across the page, not three small pills */
.lp .systems{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;border-top:var(--line) solid var(--navy)}
.lp .systems li{justify-content:flex-start;gap:var(--sp-3);min-height:76px;padding:0 clamp(16px,2.4vw,36px);border:0;border-radius:0;background:none;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h3);color:var(--navy)}
html[lang="ar"] .lp .systems li{font-weight:var(--fw-semi);font-size:var(--h3-ar)}
.lp .systems li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--gilt);box-shadow:0 0 0 4px rgba(var(--gilt-rgb),.22)}
.lp .systems li:first-child{padding-inline-start:0}
.lp .systems li + li{border-inline-start:var(--line) solid var(--paper-hair)}
/* ---------- Nashmi ---------- */
.lp .opening--nashmi{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,5vw,80px);padding-block:clamp(24px,4vw,56px) calc(var(--tap) + var(--sp-6))}
.lp .opening--nashmi::after{display:none}
.lp .nsh__words{gap:var(--sp-5);padding-bottom:clamp(32px,6vh,72px);min-width:0}
.lp .nsh__hi{max-width:100%;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h1);line-height:1.3;letter-spacing:var(--tr-display);color:var(--cream)}
html[lang="ar"] .lp .nsh__hi{letter-spacing:0;font-weight:var(--fw-semi);font-size:var(--h1-ar);line-height:1.55}
.lp .nsh__hi.is-long{font-size:clamp(28px,3.4vw,46px)}
.lp .nsh__hi.is-longer{font-size:clamp(24px,2.6vw,36px)}
.lp .nsh__lead{max-width:34em;color:var(--cream)}
.lp .nsh__how{max-width:32em;font-size:clamp(18px,1.6vw,22px);line-height:2.1;color:var(--mist)}
.lp .nsh__means{max-width:38em;min-height:1.7em;padding-inline-start:var(--sp-4);border-inline-start:var(--rule) solid var(--amber);color:var(--mist)}
.lp .nw{white-space:nowrap}
/* a word you can change, inside the sentence. A hidden twin of the same text gives the field its exact
   width, so the punctuation after it sits where it would after any word; the field itself is real,
   and its caret moves through the letters. A long name takes a line of its own and never leaves the column. */
.lp .fld{position:relative;display:inline-block;vertical-align:bottom;min-width:1.1em;max-width:calc(100% - .45em);border-bottom:var(--rule) solid rgba(var(--amber-rgb),.75);border-radius:3px 3px 0 0;transition:border-color var(--t-base),background var(--t-base)}
.lp .nsh__hi .nw{max-width:100%}
.lp .nsh__hi .fld{max-width:min(calc(100% - 3.6em),calc(100vw - 2*var(--gutter) - 3.6em))}
.lp .fld__s{display:block;visibility:hidden;overflow:hidden;white-space:pre;padding:0 .05em;pointer-events:none}
.lp .inl{position:absolute;inset:-4px 0;box-sizing:border-box;width:100%;height:calc(100% + 8px);margin:0;padding:0 .05em;border:0;border-radius:0;background:transparent;font:inherit;color:var(--amber);caret-color:var(--cream);text-align:start;cursor:text}
.lp .inl::placeholder{color:var(--amber);opacity:1}
.lp .inl:focus::placeholder{opacity:.55}
.lp .fld:hover{border-bottom-color:var(--amber);background:rgba(var(--amber-rgb),.1)}
.lp .fld:focus-within{border-bottom-color:var(--cream);background:rgba(var(--amber-rgb),.16);outline:2px solid var(--amber);outline-offset:3px}
.lp .inl:focus,.lp .inl:focus-visible{outline:0}
.lp .inl::selection{background:rgba(var(--cream-rgb),.3)}
.lp select.inl{-webkit-appearance:none;appearance:none;cursor:pointer;color-scheme:dark}
.lp select.inl option{background:#0B1322;color:var(--cream)}
.lp .nsh__keep{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.lp .nsh__kept{font-size:var(--fs-small);color:var(--mist)}
.lp .stage{position:relative;align-self:end;justify-self:center;display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px;border-bottom:var(--line) solid rgba(var(--gilt-rgb),.55)}
.lp .figure{position:relative;height:clamp(320px,56vh,580px);aspect-ratio:482/620;max-width:calc(100% - 132px)}
.avatar{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;animation:step .45s var(--ease) backwards}
.avatar > img{display:block;height:100%;width:auto;max-width:none}
.avatar .face{position:absolute;bottom:0;left:50%;height:100%;transform:translateX(-50%);overflow:visible}
.face path{fill:none;stroke:var(--nashmi-cyan);stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(var(--nashmi-cyan-rgb),.85))}
.face__eyes{transform-box:fill-box;transform-origin:center;animation:eyeblink 5.2s infinite}
@keyframes eyeblink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.08)}}
@keyframes step{from{opacity:0;transform:translateX(calc(var(--dir,1)*24px))}}
.lp .arrow{position:absolute;top:46%;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border:var(--line) solid var(--hair-strong);border-radius:50%;background:rgba(var(--ink-rgb),.5);color:var(--cream);cursor:pointer;transition:border-color var(--t-base),color var(--t-base),background var(--t-press)}
.lp .arrow svg{width:22px;height:22px}
html[dir="rtl"] .lp .arrow svg{transform:scaleX(-1)}
.lp .arrow--a{inset-inline-start:0}
.lp .arrow--b{inset-inline-end:0}
.lp .arrow:hover{border-color:var(--amber);color:var(--amber)}
.lp .arrow:active{background:var(--fill-press)}
.lp .wear{position:absolute;inset:100% 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(8px,1.4vw,20px)}
.lp .wear button{min-height:var(--tap);padding:var(--sp-3) var(--sp-2) 0;border:0;border-top:var(--rule) solid transparent;margin-top:calc(var(--line)*-1);background:none;font:inherit;font-weight:var(--fw-medium);font-size:var(--fs-control);color:var(--mist);cursor:pointer;transition:color var(--t-base),border-color var(--t-base)}
.lp .wear button:hover{color:var(--cream)}
.lp .wear button[aria-selected="true"]{color:var(--cream);border-top-color:var(--amber)}
/* ---------- pricing ---------- */
.lp .opening--price{padding-block:clamp(28px,3.4vw,48px) clamp(28px,3.4vw,44px)}
/* three equal segments: the three things that are priced */
.lp .tabs{align-self:center;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border:var(--line) solid var(--paper-hair);border-radius:var(--r-pill);background:var(--card)}
.lp .tabs [role="tab"]{min-height:48px;padding:var(--sp-1) clamp(16px,2.6vw,36px);border:0;border-radius:var(--r-pill);background:none;font:inherit;font-weight:var(--fw-bold);font-size:16px;line-height:1.2;color:var(--slate);cursor:pointer;transition:background var(--t-base),color var(--t-base)}
.lp .tabs [role="tab"]:hover{color:var(--navy)}
.lp .tabs [role="tab"][aria-selected="true"]{background:var(--navy);color:var(--white)}
.lp .leaf--plans{padding-top:clamp(28px,3.4vw,44px)}
.lp .leaf--plans .leaf__inner{gap:clamp(24px,3vw,40px)}
.lp .tabpanel,.lp [data-acview]{display:flex;flex-direction:column;gap:clamp(22px,3vw,36px)}
/* the three plans share their rows: name, line, price, list and button sit level across the cards */
.lp .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,auto) 1fr auto;gap:0 clamp(16px,2vw,26px);padding-top:13px}
.lp .plan{position:relative;min-width:0;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:var(--sp-3);padding:var(--pad);border:var(--line) solid var(--paper-hair);border-radius:var(--r-lg);background:var(--card);color:var(--navy)}
.lp .plan--key{border-color:var(--navy);background:var(--navy);color:var(--cream);box-shadow:0 30px 60px -36px rgba(4,44,83,.75)}
.lp .plan__tag{position:absolute;inset-block-start:-13px;inset-inline-start:var(--pad);min-height:26px;display:inline-flex;align-items:center;padding-inline:var(--sp-3);border-radius:var(--r-pill);background:var(--amber);font-size:12.5px;font-weight:var(--fw-bold);color:var(--ink);white-space:nowrap}
.lp .plan__tag--none{display:none}
.lp .plans--plain{grid-template-rows:repeat(4,auto) 1fr auto;padding-top:0}
.lp .plan h3{align-self:end;margin:0;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h3);line-height:1.25}
html[lang="ar"] .lp .plan h3{font-weight:var(--fw-semi);font-size:var(--h3-ar);line-height:1.5}
.lp .plan__blurb{color:var(--slate);font-size:16px;line-height:1.6}
.lp .plan--key .plan__blurb{color:var(--mist)}
.lp .price{display:flex;flex-direction:column;justify-content:flex-end;padding-block:var(--sp-3) var(--sp-4);border-bottom:3px double currentColor}
.lp .price .was{min-height:1.8em;font-size:15px;color:var(--mist)}
.lp .price .was s{font-family:var(--display);font-size:22px;color:var(--mist)}
.lp .price .now{font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(44px,4.8vw,62px);line-height:1.1}
html[lang="ar"] .lp .price--free .now{font-weight:var(--fw-semi);font-size:clamp(40px,4.2vw,54px);line-height:1.26}
.lp .price--free .now{color:var(--amber)}
.lp .price .until{font-size:15px;font-weight:var(--fw-bold);color:var(--slate)}
.lp .plan--key .price .until{color:var(--cream)}
.lp .price--basis .now--text{font-family:var(--body);font-weight:var(--fw-bold);font-size:17px;line-height:1.5;color:var(--caramel)}
.lp .plan--key .price--basis .now--text{color:var(--amber)}
.lp .plan__lead{margin-top:var(--sp-2);font-size:14.5px;font-weight:var(--fw-bold);color:var(--caramel)}
.lp .plan--key .plan__lead{color:var(--amber)}
.lp .plan__list{margin-bottom:var(--sp-4)}
.lp .plan:not(.plan--key) .plan__list li::before{border-color:var(--gold-text)}
.lp .plan .btn{width:100%}
.lp .plan--key .btn--line{border-color:var(--cream);color:var(--cream)}
.lp .seg{align-self:center;display:inline-flex;padding:4px;border:var(--line) solid var(--paper-hair);border-radius:var(--r-pill);background:var(--card)}
.lp .seg button{min-height:40px;padding-inline:var(--sp-5);border:0;border-radius:var(--r-pill);background:none;font:inherit;font-weight:var(--fw-bold);font-size:15px;color:var(--slate);cursor:pointer;transition:background var(--t-base),color var(--t-base)}
.lp .seg button:hover{color:var(--navy)}
.lp .seg button[aria-pressed="true"]{background:var(--niche);color:var(--navy)}
/* the full table under the cards: every item, plan by plan */
.lp .cmp{border:var(--line) solid var(--paper-hair);border-radius:var(--r-lg);background:var(--card);color:var(--navy);overflow:clip}
.lp .cmp > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:64px;padding:var(--sp-3) var(--pad);list-style:none;cursor:pointer;font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(19px,1.8vw,23px);transition:color var(--t-base)}
html[lang="ar"] .lp .cmp > summary{font-weight:var(--fw-semi)}
.lp .cmp > summary::-webkit-details-marker{display:none}
.lp .cmp > summary:hover{color:var(--caramel)}
.lp .cmp > summary i{flex:none;width:10px;height:10px;margin-inline:4px;border-right:2px solid var(--caramel);border-bottom:2px solid var(--caramel);transform:rotate(45deg);transition:transform var(--t-base)}
.lp .cmp[open] > summary i{transform:rotate(-135deg)}
.lp .cmp__wrap{border-top:var(--line) solid var(--paper-hair)}
.lp .cmp__t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:16px}
.lp .cmp__t thead th{position:sticky;top:var(--nav-stuck);z-index:1;padding:var(--sp-3) var(--sp-2);border-bottom:var(--line) solid var(--navy);background:var(--card);vertical-align:bottom;font-weight:var(--fw-bold);line-height:1.3}
.lp .cmp__t thead th.cmp__first{width:46%;padding-inline:var(--pad) var(--sp-3);text-align:start;font-size:var(--fs-small);color:var(--slate)}
.lp .cmp__n{display:block;font-size:15px}
.lp .cmp__p{display:block;margin-top:2px;font-size:14px;font-weight:var(--fw-medium);color:var(--caramel)}
.lp .cmp__p s{color:var(--slate)}
.lp .cmp__t tbody th{padding:var(--sp-3) var(--sp-3);padding-inline-start:var(--pad);border-bottom:var(--line) solid var(--paper-hair);text-align:start;font-weight:var(--fw-regular);line-height:1.5}
.lp .cmp__t td{padding:var(--sp-3) var(--sp-2);border-bottom:var(--line) solid var(--paper-hair);text-align:center;vertical-align:middle}
.lp .cmp__t tbody tr:last-child > *{border-bottom:0}
.lp .cmp__t thead th.is-key,.lp .cmp__t tbody td:nth-child(2){background:#F1F4F8}
.lp .cmp__g th{padding-block:var(--sp-5) var(--sp-2) !important;background:none;font-size:12.5px !important;font-weight:var(--fw-bold) !important;letter-spacing:.14em;text-transform:uppercase;color:var(--caramel)}
html[lang="ar"] .lp .cmp__g th{letter-spacing:0;text-transform:none;font-size:14px !important}
.lp .yes{display:inline-block;width:13px;height:7px;margin-bottom:3px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)}
.lp .no{display:inline-block;width:12px;height:2px;border-radius:1px;background:rgba(4,44,83,.22)}
.lp .ask{color-scheme:light;display:grid;grid-template-columns:minmax(0,4fr) auto auto auto;align-items:start;gap:var(--sp-5) clamp(20px,3vw,44px);padding:var(--pad);border:var(--line) solid var(--paper-hair);border-radius:var(--r-lg);background:var(--card)}
.lp .ask__head{display:flex;flex-direction:column;gap:var(--sp-2)}
.lp .ask > .btn{align-self:end}
.lp .ask h3{margin:0;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h3);line-height:1.3;color:var(--navy)}
html[lang="ar"] .lp .ask h3{font-weight:var(--fw-semi);font-size:var(--h3-ar);line-height:1.5}
.lp .ask__head p{color:var(--slate);font-size:16px;line-height:1.6}
.lp .ask__f,.lp .ask__set{display:flex;flex-direction:column;gap:var(--sp-2);margin:0;padding:0;border:0;font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--caramel)}
.lp .ask__set{gap:0}
.lp .ask__set .tick{min-height:36px}
.lp .ask legend{width:100%;padding:0;margin-bottom:var(--sp-2)}
.lp .ask input[type="number"]{width:112px;min-height:var(--btn-h);padding:0 var(--sp-4);border:var(--line) solid rgba(4,44,83,.55);border-radius:var(--r-md);background:var(--paper);font:inherit;font-family:var(--display);font-weight:var(--fw-medium);font-size:22px;color:var(--navy)}
.lp .ask input[type="number"]:hover{border-color:var(--navy)}
.lp .ask input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.lp .ask__msg{grid-column:1/-1;min-height:1.5em;margin-top:calc(var(--sp-3)*-1);font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--bad)}
.lp .ask__msg:empty{display:none}
.lp .tick{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--btn-h);font-size:16px;font-weight:var(--fw-regular);color:var(--navy);cursor:pointer}
.lp .tick input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:0;border:var(--line) solid var(--navy);border-radius:6px;background:var(--card);cursor:pointer;transition:background var(--t-base)}
.lp .tick input::after{content:"";width:11px;height:6px;margin-top:-3px;border-left:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(-45deg);opacity:0}
.lp .tick input:checked{background:var(--navy)}
.lp .tick input:checked::after{opacity:1}
.lp .pnotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--sp-4) clamp(20px,3vw,40px);margin:0;padding:var(--sp-5) 0 0;border-top:var(--line) solid var(--paper-hair);list-style:none;color:var(--slate);font-size:15px;line-height:1.7}
.lp .pnotes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3)}
.lp .pnotes .ico{margin-top:2px;color:var(--gold-text)}
/* ---------- about ---------- */
.lp .vision{animation:none}
.lp .leaf--why{border-top:var(--line) solid var(--paper-hair)}
.lp .leaf--why h2{max-width:22em}
/* ---------- a real screen, opened large ---------- */
.lp .lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--cream)}
.lp .lightbox[open]{display:flex;flex-direction:column}
.lp .lightbox::backdrop{background:rgba(4,7,14,.97)}
html:has(dialog.lightbox[open]){overflow:hidden}
.lp .lightbox__bar{flex:none;display:flex;align-items:center;gap:var(--sp-4);min-height:64px;padding:var(--sp-2) var(--inset)}
.lp .lightbox__cap{flex:1;min-width:0;font-size:16px;font-weight:var(--fw-medium);line-height:1.4;color:var(--cream)}
.lp .lightbox__n{flex:none;font-size:var(--fs-small);color:var(--mist)}
.lp .lightbox__x,.lp .lightbox__nav{flex:none;display:grid;place-items:center;width:44px;height:44px;border:var(--line) solid var(--hair-strong);border-radius:50%;background:rgba(var(--ink-rgb),.6);color:var(--cream);cursor:pointer;transition:border-color var(--t-base),color var(--t-base)}
.lp .lightbox__x:hover,.lp .lightbox__nav:hover{border-color:var(--amber);color:var(--amber)}
.lp .lightbox__x svg,.lp .lightbox__nav svg{width:20px;height:20px}
html[dir="rtl"] .lp .lightbox__nav svg{transform:scaleX(-1)}
.lp .lightbox__nav[hidden]{display:none}
.lp .lightbox__stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:var(--sp-4);padding:0 var(--gutter) var(--sp-6);overscroll-behavior:contain}
.lp .lightbox__scroll{min-width:0;max-width:100%;max-height:100%;overflow:auto;border-radius:var(--r-md);background:var(--paper);box-shadow:0 30px 80px -30px #000;overscroll-behavior:contain}
.lp .lightbox__scroll:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.lp .lightbox__scroll img{display:block;width:auto;height:auto;max-width:min(1560px,calc(100vw - 2*var(--gutter) - 2*44px - 2*var(--sp-4)));max-height:calc(100dvh - 64px - var(--sp-6) - 2px)}
.lp .lightbox.is-tall .lightbox__scroll img{width:min(560px,calc(100vw - 2*var(--gutter)));max-width:none;max-height:none}
/* ---------- the closing section and the footer ---------- */
.finale h2 em{display:block}
.finale .pill{margin-top:var(--sp-2)}
.finale[data-conv] .contact__label{display:none}
.cta .ghost{font-size:var(--fs-btn-lg)}
.foot{padding-inline:var(--inset)}
.foot__top{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr))}
.foot__brand > img{width:92px;height:auto}
.foot__brand p{margin-bottom:var(--sp-2)}
.foot__mail{gap:var(--sp-2);min-height:44px !important}
.foot__mail bdi{transition:color var(--t-base)}
.foot__mail:hover bdi{color:var(--amber)}
.foot__k{min-width:5.4em;color:var(--dim)}
.foot h3{margin:0;color:var(--cream)}
html[lang="ar"] .foot h3{letter-spacing:0;text-transform:none;font-size:15px}
details.foot__col{display:flex;flex-direction:column;align-items:stretch}
.foot__col > summary{list-style:none;margin-bottom:var(--sp-2);pointer-events:none;outline:0}
.foot__col > summary::-webkit-details-marker{display:none}
.foot__col > nav{display:flex;flex-direction:column;align-items:flex-start}
.foot__col a{min-height:36px}
.foot__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-8);padding-block:var(--sp-5);border-top:var(--line) solid var(--hair)}
.foot__set{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.foot__lbl{margin-inline-end:var(--sp-2);color:var(--cream)}
/* the marks from the owner's picture, each in the same quiet ring on the footer's own ground */
.foot .mark{display:grid;place-items:center;width:42px;height:42px;min-height:0;border:var(--line) solid var(--hair);border-radius:50%;transition:border-color var(--t-base),transform var(--t-base),background var(--t-base)}
.foot .mark img{display:block;width:auto;height:20px;max-width:24px;object-fit:contain;opacity:.9;transition:opacity var(--t-base)}
.foot .mark:hover{border-color:rgba(var(--gilt-rgb),.8);background:var(--fill-hover);transform:translateY(-2px)}
.foot .mark:hover img{opacity:1}
.foot__bottom{padding-block:var(--sp-4)}
.foot__legal{align-items:center}
.foot__lang{min-height:var(--tap);padding-inline:var(--sp-4);border:var(--line) solid var(--hair-strong);border-radius:var(--r-pill);background:none;font:inherit;font-size:var(--fs-small);color:var(--cream);cursor:pointer;transition:border-color var(--t-base),color var(--t-base)}
.foot__lang:hover{border-color:var(--amber);color:var(--amber)}
/* ---------- narrower windows ---------- */
@media (max-width:1180px){.mg{grid-template-columns:repeat(3,minmax(0,1fr))}
.mg__feat{display:none}
.lp .chapter{grid-template-columns:3ch 48px minmax(0,1fr) max-content}
.lp .chapter__d{grid-column:3/-1}
}
@media (max-width:1000px){.lp .plans,.lp .plans--plain{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--sp-5)}
.lp .plan,.lp .plans--plain .plan{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
.lp .plan h3{align-self:auto}
.lp .plans{gap:var(--sp-6)}
.lp .price .was[aria-hidden]{display:none}
.lp .ask{grid-template-columns:minmax(0,1fr)}
.lp .ask .btn{justify-self:start}
.lp .fam__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:940px){.nav{grid-template-columns:1fr auto}
.lp .opening--nashmi{grid-template-columns:minmax(0,1fr);gap:var(--sp-9);padding-bottom:var(--sp-7)}
.lp .opening--nashmi .stage{order:-1}
.lp .nsh__words{padding-bottom:0}
.lp .figure{height:clamp(240px,34vh,340px)}
.lp .duo,.lp .duo--faq,.lp .fam,.lp .sectors{grid-template-columns:minmax(0,1fr)}
.lp .duo--faq .leaf__head{position:static}
.lp .fig:nth-child(odd){padding-inline-start:0}
.lp .fig:nth-child(odd){border-inline-start:0}
.lp .fig:nth-child(n+3){border-top:var(--line) solid rgba(var(--cream-rgb),.16)}
.lp .doors{grid-template-columns:minmax(0,1fr) max-content}
.lp .door__to{grid-column:2;grid-row:1}
.foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
.foot__brand{grid-column:1/-1}
}
@media (max-width:640px){.lp .tabs{align-self:stretch;display:grid}
.lp .tabs [role="tab"]{padding-inline:var(--sp-2);font-size:14.5px}
.lp .cmp__n{font-size:12px;line-height:1.25}
.lp .cmp__t thead th{padding-block:var(--sp-2)}
.lp .qa summary{min-height:60px}
.lp .door__to span{display:none}
.lp .seg{align-self:stretch}
.lp .seg button{flex:1;padding-inline:var(--sp-3)}
.lp .nexts,.lp .sectors ul,.lp .fam__list{grid-template-columns:minmax(0,1fr)}
.lp .sectors li{grid-template-columns:minmax(0,9.5em) minmax(30px,1fr) 30px;gap:var(--sp-3);font-size:15px}
.lp .sectors ul{grid-auto-flow:row;grid-template-rows:none}
.lp .chapter{grid-template-columns:3ch 48px minmax(0,1fr);row-gap:var(--sp-3)}
.lp .chapter__d{grid-column:1/-1}
.lp .chapter .chip-ok{grid-column:1/-1;justify-self:start}
.lp .cmp__t{font-size:14.5px}
.lp .cmp__t thead th.cmp__first{width:40%;padding-inline:var(--sp-4) var(--sp-2)}
.lp .cmp__t tbody th{padding-inline-start:var(--sp-4)}
.lp .cmp > summary{padding-inline:var(--sp-4)}
.lp .cmp__p{font-size:12.5px}
.lp .lightbox__stage{padding-inline:var(--sp-2);gap:var(--sp-1);align-items:flex-start}
.lp .lightbox__nav{position:fixed;bottom:var(--sp-5);z-index:2}
.lp .lightbox__nav--prev{inset-inline-start:var(--sp-4)}
.lp .lightbox__nav--next{inset-inline-end:var(--sp-4)}
/* on a phone the enlarged screen is tall enough to read and slides sideways under the finger */
.lp .lightbox:not(.is-tall) .lightbox__scroll img{height:min(70dvh,560px);width:auto;max-width:none;max-height:none}
.lp .lightbox.is-tall .lightbox__scroll img{width:calc(100vw - 2*var(--sp-2))}
.lp .lightbox__scroll{max-height:calc(100dvh - 64px - 84px)}
/* the footer folds: one block for the name and the addresses, four groups that open on a touch */
.foot__top{grid-template-columns:minmax(0,1fr);gap:0;padding-block:var(--sp-7) var(--sp-4)}
.foot__brand{padding-bottom:var(--sp-5)}
details.foot__col{border-top:var(--line) solid var(--hair)}
.foot__col > summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;margin:0;cursor:pointer;pointer-events:auto}
.foot__col > summary::after{content:"";flex:none;width:8px;height:8px;margin-inline:4px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg);transition:transform var(--t-base)}
.foot__col[open] > summary::after{transform:rotate(-135deg)}
.foot__col > nav{padding-bottom:var(--sp-3)}
.foot__col a{min-height:var(--tap)}
.foot__meta{gap:var(--sp-4)}
.foot__set{gap:var(--sp-2)}
.foot__lbl{flex:1 1 100%}
}
@media (max-width:420px){.lp .tabs [role="tab"]{font-size:13px;padding-inline:6px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.avatar,.face__eyes{animation:none !important}
.nav,.nav > *,.brand img,.lp .btn,.lp .arrow,.lp .ghost,.lp .door::before,.lp .fld,.foot .mark,.lp .next,.mg__foot i,.next i{transition:none}
}
/* ================= build 7: three chapters on the home page, the AI FP&A chapter, the About page =================
   THE CHAPTER LINE. The first screen offers three services; below it the page now says, in one small
   line above each part, which of the three it is about: its number of three, its name, and one sentence. */
#fpa-home,#academy-home,#about-top{scroll-margin-top:calc(var(--nav-stuck) + var(--sp-6))}
.lp .chap{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-4);margin:0;font-size:15.5px;line-height:1.55;color:var(--slate)}
.lp .chap__no{display:inline-flex;align-items:baseline;gap:6px;direction:ltr;unicode-bidi:isolate}
/* a count reads 01 / 03 in both languages */
.lp .chap__no b{font-family:var(--display);font-weight:var(--fw-medium);font-size:24px;line-height:1;color:var(--gold-text)}
.lp .chap__no i{font-style:normal;font-size:13px;color:var(--slate);opacity:.75}
.lp .chap__n{font-size:12.5px;font-weight:var(--fw-bold);letter-spacing:.18em;text-transform:uppercase;color:var(--caramel)}
html[lang="ar"] .lp .chap__n{letter-spacing:0;text-transform:none;font-size:15px}
.lp .chap__d{display:inline-flex;align-items:baseline;gap:var(--sp-4)}
.lp .chap__d::before{content:"";flex:none;align-self:center;width:28px;height:1px;background:currentColor;opacity:.45}
.lp .chap .chip{align-self:center}
.lp .inside .chap{color:var(--mist)}
.lp .inside .chap__no b{color:var(--gilt)}
.lp .inside .chap__no i{color:var(--mist)}
.lp .inside .chap__n{color:var(--amber)}
/* what follows the model, said once under the window of screens */
/* THE AI FP&A CHAPTER. Words beside words at the top; then the owner's picture of the connection on the
   ink ground (his five marks, one model, what comes out); then six questions between hairlines. */
.lp .asks{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.lp .about__head h1,.lp .about__head .lede,.lp .about__say,.lp .leaf .about__h{margin:0}
/* THE ABOUT PAGE. What the platform is, in one breath; its three services as three rows on one grid;
   the one advisor and what the platform holds itself to; why it was built; and only then the letter. */
.lp .leaf--about{padding-top:clamp(40px,5.4vw,80px)}
.lp .leaf--about .leaf__inner{gap:clamp(36px,5vw,72px)}
.lp .about__head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.8vw,24px)}
.lp .about__head h1{max-width:19em;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h1-side);line-height:1.12;letter-spacing:-.01em;color:var(--navy);text-wrap:balance}
html[lang="ar"] .lp .about__head h1{letter-spacing:0;font-weight:var(--fw-semi);font-size:var(--h1-side-ar);line-height:1.42}
.lp .about__head .lede{max-width:44em;color:var(--slate);font-size:clamp(17px,1.45vw,20px);line-height:1.7;text-wrap:pretty}
html[lang="ar"] .lp .about__head .lede{line-height:1.9}
.lp .about__svc{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.lp .leaf .about__h{max-width:none;font-family:var(--display);font-weight:var(--fw-medium);font-size:var(--h3);line-height:1.3;letter-spacing:0;color:var(--navy)}
html[lang="ar"] .lp .leaf .about__h{font-weight:var(--fw-semi);font-size:var(--h3-ar);line-height:1.5}
.lp .svc{isolation:isolate;display:grid;grid-template-columns:max-content minmax(0,3fr) minmax(0,7fr) max-content;column-gap:clamp(16px,2.8vw,44px);border-top:var(--line) solid var(--navy)}
.lp .svc__row{position:relative;grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;row-gap:var(--sp-3);padding-block:clamp(22px,2.8vw,36px);border-bottom:var(--line) solid var(--paper-hair);color:var(--navy)}
.lp .svc__row::before{content:"";position:absolute;z-index:-1;inset:0 calc(var(--sp-3)*-1);border-radius:var(--r-md);background:var(--card);opacity:0;transition:opacity var(--t-base)}
.lp .svc__row:hover::before,.lp .svc__row:focus-visible::before{opacity:1}
.lp .svc__no{font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(26px,2.8vw,38px);line-height:1.05;color:var(--gold-text)}
.lp .svc__n{display:flex;flex-direction:column;gap:var(--sp-2);font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(22px,2.3vw,30px);line-height:1.2}
html[lang="ar"] .lp .svc__n{font-weight:var(--fw-semi);line-height:1.45}
.lp .svc__n small{font-family:var(--body,inherit);font-weight:var(--fw-bold);font-size:14.5px;line-height:1.5;color:var(--caramel)}
.lp .svc__d{color:var(--slate);font-size:17px;line-height:1.7}
html[lang="ar"] .lp .svc__d{line-height:1.9}
.lp .svc__to{align-self:center;display:inline-flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-bold);font-size:15px;color:var(--caramel);white-space:nowrap}
.lp .svc__to i{flex:none;width:8px;height:8px;border-top:2px solid currentColor;border-inline-end:2px solid currentColor;transform:rotate(45deg);transition:transform var(--t-base)}
html[dir="rtl"] .lp .svc__to i{transform:rotate(-45deg)}
.lp .svc__row:hover .svc__to i{transform:translateX(4px) rotate(45deg)}
html[dir="rtl"] .lp .svc__row:hover .svc__to i{transform:translateX(-4px) rotate(-45deg)}
.lp .svc__also{max-width:60em;margin:0;color:var(--slate);font-size:16.5px;line-height:1.7}
.lp .svc__also a{font-weight:var(--fw-bold);color:var(--navy);text-decoration:underline;text-decoration-color:var(--gilt);text-underline-offset:5px}
.lp .svc__also a:hover{color:var(--caramel)}
.lp .about__band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(28px,5vw,80px)}
.lp .about__nashmi{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.lp .about__face{display:block;width:64px;height:64px;border-radius:50%;border:var(--line) solid rgba(var(--gilt-rgb),.6)}
.lp .about__say{max-width:34em;font-size:17px;line-height:1.7;color:var(--mist)}
html[lang="ar"] .lp .about__say{line-height:1.9}
.lp .keeps{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:var(--line) solid rgba(var(--gilt-rgb),.55)}
.lp .keep{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:baseline;gap:var(--sp-2) clamp(16px,2.4vw,36px);padding-block:var(--sp-5);border-bottom:var(--line) solid var(--hair)}
.lp .keep b{font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(19px,1.8vw,23px);line-height:1.35;color:var(--cream)}
html[lang="ar"] .lp .keep b{font-weight:var(--fw-semi);line-height:1.6}
.lp .keep > span{font-size:16px;line-height:1.65;color:var(--mist)}
html[lang="ar"] .lp .keep > span{line-height:1.85}
.lp .vision{border-top:var(--line) solid var(--paper-hair)}
.lp .letter .letter__h{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.2vw,54px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
html[lang="ar"] .lp .letter .letter__h{letter-spacing:0;font-weight:600;line-height:1.42;font-size:clamp(34px,4.5vw,58px)}
.lp .leaf--nexts{padding-block:clamp(32px,4vw,56px);border-top:var(--line) solid var(--paper-hair)}
@media (max-width:1000px){.lp .about__band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){.lp .svc{grid-template-columns:max-content minmax(0,1fr)}
.lp .svc__d,.lp .svc__to{grid-column:2}
.lp .svc__to{justify-self:start}
}
@media (max-width:760px){/* on a narrow screen the picture of the connection reads downward: systems, the model, what comes out */
}
@media (max-width:640px){.lp .chap__d::before{display:none}
.lp .chap__d{flex-basis:100%}
.lp .keep{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.lp .svc__row::before,.lp .svc__to i{transition:none}
}
/* ================= build 8: a finished model to download, under the window of screens ================= */
.lp .sample{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4) clamp(18px,2.6vw,36px);padding:clamp(18px,2.4vw,30px) clamp(18px,2.8vw,36px);border:var(--line) solid rgba(var(--gilt-rgb),.5);border-radius:var(--r-lg);background:rgba(var(--cream-rgb),.04)}
@media (max-width:860px){.lp .sample{grid-template-columns:auto minmax(0,1fr)}
}
/* ===== build 10 · the journey =====
   The next step stays within reach: under the first button, at a chapter's end, at the foot of the comparison,
   and in a quiet bar that follows the reader after the first screen. One wording for the main button everywhere. */
.cta__fine{flex:0 0 100%;margin-top:calc(var(--sp-2)*-1 + 2px);font-size:14.5px;line-height:1.6;text-align:center;color:var(--mist)}
html[lang="en"] .cta__fine{letter-spacing:.01em}
/* build 18: Arabic is never letter-spaced */
html[lang="ar"] .cta__fine{font-size:15px}
.lp .cmp__t tfoot th{padding:var(--sp-4) var(--sp-3);padding-inline-start:var(--pad);border-top:var(--line) solid var(--navy);text-align:start;font-family:var(--display);font-weight:var(--fw-medium);font-size:18px;color:var(--navy)}
html[lang="ar"] .lp .cmp__t tfoot th{font-weight:var(--fw-semi)}
.lp .cmp__t tfoot td{padding:var(--sp-4) var(--sp-2);border-top:var(--line) solid var(--navy);border-bottom:0}
.lp .cmp__t tfoot td:nth-child(2){background:#F1F4F8}
.lp .cmp__t tfoot .btn{min-height:42px;padding-inline:clamp(10px,1.6vw,24px);font-size:15px}
.pathbar{position:fixed;z-index:var(--z-nav);inset-inline:0;bottom:0;border-top:1px solid var(--hair);background:rgba(7,11,22,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--cream);box-shadow:0 -18px 40px -24px rgba(0,0,0,.6);animation:pathbar-in .46s cubic-bezier(.2,.7,.2,1) both}
.pathbar[hidden]{display:none}
@keyframes pathbar-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.pathbar__in{display:flex;align-items:center;gap:var(--sp-3) clamp(14px,2vw,28px);min-height:64px;padding:10px var(--inset);padding-bottom:max(10px,env(safe-area-inset-bottom))}
.pathbar__say{flex:1 1 auto;display:flex;align-items:baseline;gap:.7em;min-width:0;margin:0;font-size:16px;line-height:1.5}
.pathbar__say b{flex:none;font-family:var(--display);font-weight:var(--fw-medium);font-size:19px;color:var(--cream);white-space:nowrap}
html[lang="ar"] .pathbar__say b{font-weight:var(--fw-semi)}
.pathbar .pathbar__go{flex:none;min-height:44px;padding-inline:24px}
.pathbar__x{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-inline-end:-8px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mist);cursor:pointer;transition:color var(--t-base),background var(--t-base)}
.pathbar__x svg{width:18px;height:18px}
.pathbar__x:hover{background:rgba(var(--cream-rgb),.08);color:var(--cream)}
.pathbar a:focus-visible,.pathbar button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--r-focus)}
html.path-on .toast{bottom:calc(var(--sp-6) + 68px)}
@media (prefers-reduced-motion:reduce){.pathbar{animation:none}
}
@media (max-width:760px){.pathbar__say{flex-direction:column;align-items:flex-start;gap:0;font-size:13.5px}
.pathbar__say b{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pathbar .pathbar__go{min-height:42px;padding-inline:18px;font-size:15px}
.pathbar__in{min-height:60px}
.cta__fine{font-size:13px}
html[lang="ar"] .cta__fine{font-size:13.5px}
.lp .cmp__t tfoot{display:none}
/* three buttons do not fit three narrow columns; the cards above and the closing section carry the button */
}
/* ===== build 11 · weight and smoothness =====
   The home page is long. A chapter that is not near the screen is not laid out or painted until the reader
   approaches it; the browser keeps the room it will need (and remembers the real height once it has seen it).
   The first chapter is left out: it sits right under the first screen. */
.lp.home-more > section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 900px}
/* ----- the start sheet: what follows "Get started" ----- */
.lp .start{width:min(760px,calc(100vw - 2*var(--gutter)));max-width:none;max-height:min(92vh,92dvh);margin:auto;padding:0;border:var(--line) solid rgba(var(--gilt-rgb),.45);border-radius:var(--r-lg);background:var(--paper);color:var(--navy);box-shadow:0 40px 100px -40px #000;overflow:auto;overscroll-behavior:contain}
.lp .start::backdrop{background:rgba(4,7,14,.78)}
html:has(dialog.start[open]){overflow:hidden}
.lp .start[open]{animation:start-in .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes start-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lp .start__in{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,24px);margin:0;padding:clamp(18px,2.8vw,32px)}
.lp .start__head{display:flex;align-items:flex-start;gap:var(--sp-4)}
.lp .start__head img{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink)}
.lp .start__head div{flex:1;min-width:0}
.lp .start__head h2{margin:0;font-family:var(--display);font-weight:var(--fw-medium);font-size:clamp(22px,2.6vw,30px);line-height:1.3;color:var(--navy)}
html[lang="ar"] .lp .start__head h2{font-weight:var(--fw-semi);line-height:1.5}
.lp .start__head p{margin:var(--sp-1) 0 0;font-size:16px;line-height:1.7;color:var(--slate)}
.lp .start__x{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-6px;margin-inline-start:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--slate);cursor:pointer;transition:background var(--t-base),color var(--t-base)}
.lp .start__x:hover{background:rgba(4,44,83,.08);color:var(--navy)}
.lp .start__x svg{width:20px;height:20px}
.lp .start__foot{display:flex;flex-direction:column;gap:var(--sp-4);padding-top:clamp(14px,2vw,20px);border-top:var(--line) solid var(--paper-hair)}
.lp .start__go{white-space:normal;text-align:center;max-width:15em;line-height:1.35;padding-block:10px}
.lp .start a:focus-visible,.lp .start button:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:var(--r-focus)}
@media (prefers-reduced-motion:reduce){.lp .start[open]{animation:none}
}
@media (max-width:640px){.lp .start{width:100vw;max-height:min(94vh,94dvh);margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-inline:0;border-bottom:0}
.lp .start__go{max-width:none}
.lp .start__head img{width:44px;height:44px}
}
/* ----- a whole screen, enlarged (build 11): as wide as the room allows up to its own width; it scrolls down ----- */
.lp .lightbox.is-page .lightbox__scroll img{width:min(1320px,calc(100vw - 2*var(--gutter) - 2*44px - 2*var(--sp-4)));max-width:none;max-height:none}
@media (max-width:760px){.lp .lightbox.is-page .lightbox__scroll img{width:max(940px,235vw);height:auto}
}
/* ---------- build 14: an account screen over the site (single file) ---------- */
.acct{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:2147483000;background:#F7F5EF}
html.acct-on{overflow:hidden}
html.acct-on .toast{z-index:2147483600}
/* build 18 — the terms of the free period beside the button that starts it; the questions asked at the price */
.lp .plan__cta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.lp .start__terms{margin:0;font-size:13.5px;line-height:1.7;color:var(--slate);max-width:44ch}
.lp .start__terms{max-width:none}
.lp .leaf--pfaq{padding-block-start:0}
/* build 18 — craft review: a tag on paper must be readable (gilt on paper measured 2.1:1), and a paragraph is not wider than a line can be read */
.lp .chap .chip{color:var(--gold-text);border-color:rgba(122,91,22,.5);font-size:12px}
html[lang="ar"] .lp .chap .chip{font-size:var(--fs-chip-ar)}
/* build 19 (7/10): the Academy's certificates and its talent market */
.lp .offers--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.lp .leaf--certs .offer .points li strong,.lp .leaf--talent .offer .points li strong{font-weight:var(--fw-bold)}
.lp .ladder7{margin-top:clamp(22px,3vw,40px);padding:clamp(22px,2.6vw,34px);border:1px solid var(--paper-hair);border-radius:16px;background:var(--card);display:grid;gap:var(--sp-5)}
.lp .ladder7__h h3{margin:0;font-size:clamp(20px,1.7vw,24px);line-height:1.4}
.lp .ladder7__h p{margin:var(--sp-2) 0 0;max-width:40em;color:var(--slate);font-size:16px;line-height:1.7}
.lp .ladder7__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
.lp .ladder7__l li{position:relative;display:grid;gap:var(--sp-2);align-content:start;padding:var(--sp-4) var(--sp-3) 0 0;border-top:2px solid var(--navy);font-size:15px;line-height:1.5}
[dir=rtl] .lp .ladder7__l li{padding:var(--sp-4) 0 0 var(--sp-3)}
.lp .ladder7__l li::before{content:"";position:absolute;inset-block-start:-6px;inset-inline-start:0;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.lp .ladder7__l li:first-child::before{background:var(--amber);box-shadow:0 0 0 4px rgba(var(--amber-rgb),.22)}
.lp .ladder7__c{font-weight:var(--fw-bold);color:var(--gold-text);font-size:13.5px}
.lp .ladder7__n{font-weight:var(--fw-bold);color:var(--navy)}
@media (max-width:900px){.lp .ladder7__l{grid-template-columns:minmax(0,1fr);gap:0}
.lp .ladder7__l li{grid-template-columns:auto 1fr;align-items:baseline;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5) var(--sp-3);border-top:0;border-inline-start:2px solid var(--navy)}
[dir=rtl] .lp .ladder7__l li{padding:var(--sp-3) var(--sp-5) var(--sp-3)}
.lp .ladder7__l li::before{inset-block-start:calc(var(--sp-3) + .45em);inset-inline-start:-6px}
}
.lp .tm{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) auto;align-items:center;gap:var(--sp-5) clamp(20px,3vw,44px);margin-top:clamp(16px,2vw,26px);padding:var(--pad);border:var(--line) solid var(--paper-hair);border-radius:var(--r-lg);background:var(--card)}
.lp .tm h3{margin:var(--sp-3) 0 0;font-size:clamp(20px,1.7vw,24px);line-height:1.4}
.lp .tm p{margin:var(--sp-2) 0 0;color:var(--slate);font-size:16px;line-height:1.7}
.lp .tm__tag{display:inline-flex;align-items:center;min-height:26px;padding-inline:var(--sp-3);border-radius:var(--r-pill);background:var(--amber);font-size:12.5px;font-weight:var(--fw-bold);color:var(--ink);white-space:nowrap}
.lp .tm .plan__list{margin:0}
.lp .tm .plan__list li::before{border-color:var(--gold-text)}
@media (max-width:900px){.lp .tm{grid-template-columns:minmax(0,1fr)}
}
/* ----- build 21: the notice shown when a paid plan is chosen before paid plans open ----- */
.lp .soon{width:min(520px,calc(100vw - 2*var(--gutter)))}
.lp .soon .start__foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.lp .soon button.pill{border:0;cursor:pointer;font:inherit;font-weight:var(--fw-semi)}
html:has(dialog.soon[open]){overflow:hidden}