/* OmniBrief — omnibrief.webdazzle.online
   Palette locked to the brand kit. The page is the product's portfolio: every
   image here is real OmniBrief output, so the layout's job is to pour that work
   onto the screen and get out of its way.

   The decorative language (circles, rounded squares, half-pills, the ruled
   "brief paper" lines behind the dark sections) is lifted from the brand's own
   creatives, not from a component kit. */

:root{
  --ink:#2A1130;
  --plum:#3A1745;
  --purple:#5E296D;
  --purple-lift:#7A3A8C;
  --lilac:#EFE4F3;
  --purple-soft:#EFE4F3;
  --orange:#E15D32;
  --orange-deep:#C64A22;
  --peach:#FCE7DE;
  --orange-soft:#FCE7DE;
  --paper:#F7F7F5;
  --white:#FFFFFF;
  --muted:#6B5A72;
  --line:#E7DFEA;

  --ar:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
  --lat:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-sm:12px; --r:20px; --r-lg:30px;
  --shadow:0 1px 2px rgba(42,17,48,.05), 0 12px 32px rgba(42,17,48,.07);
  --shadow-lg:0 2px 6px rgba(42,17,48,.06), 0 30px 70px rgba(42,17,48,.16);
  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ar);font-size:17px;line-height:1.85;
  direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.lat{font-family:var(--lat);direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.only-narrow{display:none}

/* ── type scale ─────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:800;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(40px,5.2vw,64px);line-height:1.12;letter-spacing:-.03em;font-weight:900}
h2{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.02em;line-height:1.14}
h3{font-size:clamp(19px,2.2vw,24px)}
p{margin:0 0 18px}
.lead{font-size:clamp(17px,2.1vw,21px);color:var(--muted);line-height:1.75}
.accent{color:var(--orange)}

/* the eyebrow is a small pill built from the brand's rounded-square glyph */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:800;color:var(--purple);
  background:var(--lilac);padding:6px 15px 6px 13px;border-radius:100px;margin:0 0 18px
}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--orange);flex:0 0 auto}
.dark .eyebrow{background:rgba(255,255,255,.1);color:#E9D4F0}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ar);font-size:17px;font-weight:700;
  padding:15px 30px;border-radius:100px;border:2px solid transparent;
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 26px rgba(225,93,50,.34)}
.btn-primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .7s var(--ease)
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(225,93,50,.16),0 16px 34px rgba(225,93,50,.42)}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple);background:var(--lilac)}
.btn-light{background:#fff;color:var(--purple)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.btn-lg{font-size:18.5px;padding:18px 38px}
.btn-block{display:flex;width:100%}
.btn.only-narrow{display:none}

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(247,247,245,.82);
  backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s
}
.nav.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(42,17,48,.06)}
.nav-in{display:flex;align-items:center;gap:26px;height:74px;transition:height .25s}
.nav.stuck .nav-in{height:64px}
.brand img{height:34px;width:auto}
.nav-links{display:flex;gap:4px;margin-inline-start:auto;font-size:15.5px;font-weight:700;color:var(--muted)}
.nav-links a{padding:8px 13px;border-radius:100px;transition:background .18s,color .18s}
.nav-links a:hover{color:var(--purple);background:var(--lilac)}
.nav .btn{padding:11px 22px;font-size:15.5px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s}

/* ── brand shapes: circles, rounded squares, half-pills ─── */
.shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.shapes i{position:absolute;display:block;animation:float 11s ease-in-out infinite alternate}
.s1{width:46vw;max-width:620px;aspect-ratio:1;border-radius:50%;background:var(--lilac);top:-30%;inset-inline-start:-14%;animation-duration:14s}
.s2{width:170px;height:170px;border-radius:52px;background:var(--peach);bottom:6%;inset-inline-start:44%;--r:16deg;transform:rotate(16deg);animation-duration:12s}
.s3{width:110px;height:220px;border-radius:0 110px 110px 0;background:rgba(94,41,109,.09);top:36%;inset-inline-end:-4px;animation-duration:9s}
.s4{width:260px;height:260px;border-radius:50%;background:var(--peach);top:-90px;inset-inline-end:-80px;animation-duration:13s}
.s5{width:120px;height:120px;border-radius:38px;background:var(--lilac);top:38%;inset-inline-end:5%;--r:-14deg;transform:rotate(-14deg);animation-duration:10s}
.s6{width:340px;height:340px;border-radius:50%;background:rgba(225,93,50,.08);top:-120px;inset-inline-start:-110px;animation-duration:15s}
.s7{width:200px;height:100px;border-radius:100px 100px 0 0;background:rgba(94,41,109,.08);bottom:0;inset-inline-end:10%;animation-duration:11s}
@keyframes float{to{transform:translateY(-16px) rotate(var(--r,0deg))}}
.hero,#how,#trial{position:relative}
.hero > .wrap,#how > .wrap,#trial > .wrap{position:relative;z-index:1}

/* ── hero: the product's own work IS the hero ───────────── */
.hero{padding:44px 0 72px;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:center;
  position:relative
}
.hero h1{margin-bottom:22px}
.hero .ln{display:block}
.hero .ln em{font-style:normal}
.hero .lead{margin-bottom:28px;max-width:38ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hero-note{font-size:15px;color:var(--muted);display:flex;align-items:center;gap:9px;margin:0}
.dot{width:8px;height:8px;border-radius:50%;background:#3BA776;box-shadow:0 0 0 4px rgba(59,167,118,.16);flex:0 0 auto}

/* one orchestrated entrance, CSS only, gated behind .js so nothing is hidden without it */
.js .hero .ln,.js .hero .lead,.js .hero-cta,.js .hero-note,.js .wall{opacity:0;animation:enter .85s var(--ease) forwards}
.js .hero .ln:nth-child(2){animation-delay:.08s}
.js .hero .ln:nth-child(3){animation-delay:.16s}
.js .wall{animation-delay:.24s}
.js .hero .lead{animation-delay:.3s}
.js .hero-cta{animation-delay:.38s}
.js .hero-note{animation-delay:.46s}
@keyframes enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .hero .ln,.js .hero .lead,.js .hero-cta,.js .hero-note,.js .wall{opacity:1;animation:none}
  .shapes i{animation:none}
}

/* the wall: two drifting columns of real creatives, tilted into the page and
   bleeding off the far edge so it reads as a stream, not a grid */
.wall{
  position:relative;height:660px;overflow:hidden;
  margin-inline-end:-12vw;padding-inline-end:6vw;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  perspective:1100px
}
.wall-cols{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;height:100%;
  transform:rotateY(-18deg);transform-origin:right center;transform-style:preserve-3d
}
.wall-col{display:flex;flex-direction:column;gap:16px;animation:drift 58s linear infinite}
.wall-col.b{animation-direction:reverse;animation-duration:70s}
.wall:hover .wall-col{animation-play-state:paused}
.wall-col img{
  width:100%;border-radius:var(--r);box-shadow:var(--shadow-lg);
  background:var(--lilac);aspect-ratio:4/5;object-fit:cover
}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.wall-col{animation:none}.wall-cols{transform:none}}
.made-badge{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;
  background:rgba(42,17,48,.92);color:#fff;font-size:13.5px;font-weight:700;
  padding:10px 20px;border-radius:100px;backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:var(--shadow-lg)
}

/* ── trust strip: a slow marquee, pauses on hover ───────── */
.strip{border-block:1px solid var(--line);background:var(--white);overflow:hidden}
.strip-in{display:flex;width:max-content;animation:marquee 38s linear infinite;padding:18px 0}
.strip:hover .strip-in{animation-play-state:paused}
.strip-set{display:flex;gap:46px;padding-inline-end:46px;font-size:15.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.strip-set span{display:inline-flex;align-items:center;gap:11px}
.strip-set b{color:var(--ink);font-weight:800}
.sq{width:10px;height:10px;border-radius:3px;background:var(--orange);flex:0 0 auto;display:inline-block}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){
  .strip-in{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .strip-set{flex-wrap:wrap;justify-content:center;gap:12px 32px;padding:0}
  .strip-set[aria-hidden]{display:none}
}

/* ── sections ───────────────────────────────────────────── */
section{padding:96px 0}
.sec-head{max-width:62ch;margin-bottom:50px}
.sec-head p{margin-top:16px}
.dark{
  background:linear-gradient(165deg,var(--plum),var(--ink) 58%);color:#fff;position:relative;overflow:hidden
}
/* ruled "brief paper" lines + a soft purple glow behind the dark sections */
.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% 10%,rgba(122,58,140,.42),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.045) 35px 36px);
}
.dark > .wrap{position:relative;z-index:1}
.dark .lead,.dark .muted{color:#C6B4CE}
.tint{background:var(--white)}

/* ── the money comparison ───────────────────────────────── */
.cost{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.cost-img img{border-radius:var(--r-lg);box-shadow:0 40px 80px rgba(0,0,0,.4);width:100%}
.bills{display:flex;flex-direction:column;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.bill{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 20px;border-radius:var(--r-sm);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1)
}
.bill .what{font-size:16.5px}
.bill .amt{font-family:var(--lat);font-weight:800;font-size:18px;color:#F0A88C;white-space:nowrap;font-variant-numeric:tabular-nums}
.bill.us{
  background:rgba(225,93,50,.18);border-color:rgba(225,93,50,.55);
  border-radius:var(--r);padding:19px 22px;margin-top:8px
}
.bill.us .amt{color:#FFD9CB;font-size:21px}
.bill.us .what{font-weight:800;font-size:17.5px}
.bills.in .bill.us{animation:landed 1.1s .45s var(--ease) both}
@keyframes landed{
  0%{box-shadow:0 0 0 0 rgba(225,93,50,.7);transform:scale(1)}
  35%{transform:scale(1.025)}
  100%{box-shadow:0 0 0 18px rgba(225,93,50,0);transform:scale(1)}
}

/* ── video proof: the reel ──────────────────────────────── */
.vid-tag{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:14.5px;
  color:var(--muted);justify-content:center;width:100%
}
.play-btn{
  position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.96);border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.34);transition:transform .2s var(--ease),box-shadow .2s
}
.play-btn:hover{transform:scale(1.09);box-shadow:0 0 0 8px rgba(255,255,255,.28),0 14px 40px rgba(0,0,0,.4)}
.play-btn svg{margin-inline-start:4px}
.play-btn.hidden{display:none}

.reel{position:relative}
.reel-track{
  display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline-start:2px;
  padding:14px 2px 8px;scrollbar-width:none;-ms-overflow-style:none
}
.reel-track::-webkit-scrollbar{display:none}
.reel-card{margin:0;flex:0 0 auto;width:268px;scroll-snap-align:start}
.reel-media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:#000;aspect-ratio:9/16;
  transition:transform .45s var(--ease),opacity .45s var(--ease)
}
.js .reel-media{transform:scale(.94);opacity:.72}
.js .reel-card.focus .reel-media,.js .reel-media:hover{transform:scale(1);opacity:1}
.reel-media video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.reel-len{
  position:absolute;top:14px;inset-inline-start:14px;z-index:2;
  font-size:12.5px;font-weight:800;color:#fff;background:rgba(42,17,48,.72);
  padding:4px 10px;border-radius:100px;backdrop-filter:blur(6px);pointer-events:none
}
.reel-card figcaption{padding:16px 6px 0;text-align:center}
.reel-brand{font-size:15px;font-weight:800;color:var(--ink)}
.reel-cat{
  display:inline-block;font-size:12px;font-weight:700;color:var(--purple);
  background:var(--lilac);padding:2px 10px;border-radius:100px;margin-inline-start:8px;vertical-align:2px
}
.reel-title{display:block;font-size:14.5px;color:var(--muted);line-height:1.6;margin-top:6px}

.reel-nav{
  position:absolute;top:37%;transform:translateY(-50%);z-index:4;
  width:50px;height:50px;border-radius:50%;border:0;
  background:var(--ink);color:#fff;cursor:pointer;
  display:none;place-items:center;box-shadow:var(--shadow-lg);transition:transform .2s var(--ease),opacity .2s,background .2s
}
.js .reel-nav{display:grid}
.reel-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.08);background:var(--purple)}
.reel-nav:disabled{opacity:.22;cursor:default}
.reel-nav.prev{inset-inline-start:-16px}
.reel-nav.next{inset-inline-end:-16px}

.reel-dots{display:none;justify-content:center;gap:7px;margin-top:24px}
.js .reel-dots{display:flex}
.reel-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:100px;cursor:pointer;
  background:var(--line);transition:width .25s var(--ease),background .25s
}
.reel-dots button.on{background:var(--orange);width:28px}

/* ── steps: a real sequence, drawn as one ───────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:s;position:relative}
.steps::before{
  content:"";position:absolute;top:27px;inset-inline:calc(16.66% + 30px);
  border-top:2px dashed var(--line);z-index:0
}
.step{position:relative;counter-increment:s;z-index:1}
.step::before{
  content:counter(s,arabic-indic);
  width:56px;height:56px;border-radius:18px;background:var(--purple);color:#fff;
  display:grid;place-items:center;font-size:23px;font-weight:800;margin-bottom:22px;
  box-shadow:0 10px 24px rgba(94,41,109,.28)
}
.step:nth-child(2)::before{background:var(--orange);box-shadow:0 10px 24px rgba(225,93,50,.3)}
.step h3{margin-bottom:10px}
.step p{color:var(--muted);font-size:16px;margin:0}

/* ── outputs grid: what actually comes out ──────────────── */
.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.out{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);border-end-start-radius:8px;
  overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.out:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.out img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease)}
.out:hover img{transform:scale(1.035)}
.out-b{padding:20px 22px 24px}
.out-b h3{font-size:19px;margin-bottom:7px}
.out-b p{font-size:15.5px;color:var(--muted);margin:0;line-height:1.65}

/* ── pricing ────────────────────────────────────────────── */
.toggle{
  display:inline-flex;background:var(--lilac);border-radius:100px;padding:5px;
  margin-bottom:38px;font-weight:700
}
.toggle button{
  border:0;background:none;font-family:var(--ar);font-size:15.5px;font-weight:700;
  padding:11px 24px;border-radius:100px;cursor:pointer;color:var(--purple);transition:.2s
}
.toggle button.on{background:var(--purple);color:#fff;box-shadow:0 6px 16px rgba(94,41,109,.3)}
.save-pill{background:var(--orange);color:#fff;font-size:12px;padding:3px 9px;border-radius:100px;margin-inline-start:7px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:34px 30px;box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.plan.best{
  position:relative;border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,var(--purple),var(--orange)) border-box;
  box-shadow:0 30px 70px rgba(94,41,109,.22)
}
.plan.best::after{
  content:"";position:absolute;width:64px;height:64px;border-radius:22px;
  background:var(--peach);top:-22px;inset-inline-end:-18px;z-index:-1;transform:rotate(14deg)
}
.plan-tag{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--purple);color:#fff;font-size:13px;font-weight:700;padding:6px 18px;border-radius:100px;white-space:nowrap;
  box-shadow:0 8px 18px rgba(94,41,109,.3)
}
.plan h3{font-size:22px;margin-bottom:6px}
.plan .who{font-size:15px;color:var(--muted);margin-bottom:20px;min-height:48px}
.price{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.price .n{font-family:var(--lat);font-size:48px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price .u{font-size:16px;color:var(--muted);font-weight:600}
.price-note{font-size:14px;color:var(--muted);margin-bottom:22px;min-height:22px}
.feat{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.feat li{display:flex;gap:11px;font-size:15.5px;line-height:1.6;align-items:flex-start}
.feat svg{flex:0 0 auto;margin-top:5px}
.plan .btn{margin-top:auto}
.price-foot{margin-top:28px;font-size:14.5px;color:var(--muted);text-align:center}

/* ── objections: a rail of quotes, not a card grid ──────── */
.obj{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 56px}
.obj-card{
  position:relative;padding-inline-start:26px;
  border-inline-start:3px solid var(--orange)
}
.obj-card h3{font-size:20px;margin-bottom:11px;color:#fff;line-height:1.4}
.obj-card p{color:#C6B4CE;font-size:16px;margin:0;line-height:1.75}

/* ── trial form ─────────────────────────────────────────── */
#trial{background:linear-gradient(180deg,var(--paper),var(--lilac));overflow:hidden}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  border-top:6px solid var(--orange);
  padding:34px;box-shadow:var(--shadow-lg)
}
.f{display:block;margin-bottom:17px}
.f span{display:block;font-size:15px;font-weight:700;margin-bottom:7px}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--ar);font-size:16px;color:var(--ink);
  padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);transition:border-color .16s,background .16s,box-shadow .16s
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px var(--lilac)}
.f textarea{min-height:92px;resize:vertical}
.f .hint{font-size:13.5px;color:var(--muted);font-weight:400;margin-top:6px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.slug-wrap{display:flex;align-items:center;gap:0;direction:ltr}
.slug-wrap input{border-start-start-radius:0;border-end-start-radius:0;text-align:left;font-family:var(--lat)}
.slug-suffix{
  font-family:var(--lat);font-size:14.5px;color:var(--muted);background:var(--lilac);
  border:1.5px solid var(--line);border-inline-end:0;padding:13px 14px;white-space:nowrap;
  border-start-end-radius:var(--r-sm);border-end-end-radius:var(--r-sm)
}
.form-msg{padding:15px 18px;border-radius:var(--r-sm);font-size:15.5px;margin-bottom:18px;display:none}
.form-msg.err{display:block;background:var(--peach);color:#A8340F;border:1px solid #F3C0AE}
.form-msg.ok{display:block;background:#E4F1EB;color:#1F5B48;border:1px solid #A9D6C4}
.perks{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:15px}
.perks li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.perks svg{flex:0 0 auto;margin-top:4px}

/* success panel */
.done{display:none;text-align:center;padding:22px 6px}
.done.on{display:block}
.done .tick{
  width:76px;height:76px;border-radius:50%;background:#E4F1EB;color:#2F6B5A;
  display:grid;place-items:center;margin:0 auto 20px
}
.done h3{margin-bottom:10px}
.done p{color:var(--muted);margin-bottom:6px}

/* ── footer ─────────────────────────────────────────────── */
footer{
  background:var(--ink);color:#C6B4CE;padding:60px 0 34px;font-size:15.5px;position:relative;overflow:hidden
}
footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.04) 35px 36px)
}
footer > .wrap{position:relative;z-index:1}
.foot-in{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
footer img{height:32px;margin-bottom:14px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-links a:hover{color:#fff}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.11);margin-top:34px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px
}

/* ── reveal on scroll ───────────────────────────────────── */
.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none}}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:960px){
  .hero-grid,.cost,.form-grid{grid-template-columns:1fr;gap:38px}
  .steps,.outs,.plans,.obj{grid-template-columns:1fr}
  .steps{gap:30px;padding-inline-start:0}
  .steps::before{top:70px;bottom:70px;inset-inline:27px auto;border-top:0;border-inline-start:2px dashed var(--line)}
  .step{padding-inline-start:78px}
  .step::before{position:absolute;inset-inline-start:0;top:0;margin:0}
  .wall{height:440px;margin-inline-end:0;padding-inline-end:0}
  .wall-cols{transform:none}
  .cost-img{order:-1}
  .plan.best{order:-1}
}

/* phones: title, wall, button and note all sit above the fold; the wall turns
   into two rows sliding in opposite directions so it fits the height budget */
@media (max-width:720px){
  body{font-size:16px}
  section{padding:64px 0}
  .nav-links{
    display:none;position:absolute;top:74px;inset-inline:0;background:#fff;
    flex-direction:column;gap:0;padding:10px 20px 18px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow)
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:17px;border-radius:0}
  .nav-links a:last-child{border-bottom:0}
  .nav-toggle{display:block;margin-inline-start:auto}
  .nav .btn{display:none}

  .hero{padding:38px 0 56px}
  .hero-grid{display:grid;grid-template-columns:1fr;row-gap:0}
  .hero-copy{display:contents}
  /* centred on phones: the wall and the button under it are full-width, and a
     right-aligned three-line title of uneven lengths left a ragged hole on the
     left. Arabic script also needs more leading than Latin at this size. */
  .hero > .wrap{padding-inline:14px}
  .hero h1{order:1;margin-bottom:22px;font-size:clamp(30px,9vw,36px);line-height:1.2;text-align:right;position:relative}
  /* three short lines leave a pocket of empty paper on the left; anchor it with
     the brand's own mark (rounded square + circle) instead of stretching type */
  .hero h1::before,.hero h1::after{content:"";position:absolute;top:50%;pointer-events:none}
  .hero h1::before{left:34px;width:58px;height:58px;margin-top:-20px;border-radius:19px;background:var(--purple);transform:rotate(14deg)}
  .hero h1::after{left:80px;width:30px;height:30px;margin-top:-50px;border-radius:50%;background:var(--orange)}
  .hero-note{justify-content:flex-start}
  .wall{order:2;height:auto;margin:0 -20px 20px;padding:0;perspective:none;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
  .wall-cols{display:flex;flex-direction:column;gap:10px;height:auto;direction:ltr;transform:none}
  .wall-col{flex-direction:row;gap:10px;width:max-content;max-width:none;animation:driftX 44s linear infinite}
  .wall-col.b{animation-direction:reverse;animation-duration:52s}
  .wall-col img{width:auto;height:132px;border-radius:14px;box-shadow:var(--shadow)}
  .made-badge{display:none}
  .hero-cta{order:3;margin-bottom:14px}
  .hero-cta .btn{flex:1 1 100%}
  .btn.only-wide{display:none}
  .hero-note{order:4;margin-bottom:26px;font-size:14.5px}
  .hero .lead{order:5;margin-bottom:18px;font-size:16.5px}
  .btn.only-narrow{display:inline-flex;order:6;align-self:flex-start;justify-self:start;padding:13px 26px;font-size:16px}
  .s1{width:72vw;top:-22vw;inset-inline-start:-24%}
  .s2{width:110px;height:110px;border-radius:34px;bottom:3%;inset-inline-start:auto;inset-inline-end:6%}

  .strip-in{padding:14px 0}
  .strip-set{gap:30px;padding-inline-end:30px;font-size:14.5px}
  .reel-card{width:72vw;max-width:300px}
  .js .reel-nav{display:none}
  .f-row{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .plan{padding:26px 22px}
  .obj{gap:28px}
  .price .n{font-size:40px}
}
@keyframes driftX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── RTL overflow guards ─────────────────────────────────
   A single element wider than the viewport makes the whole RTL document
   scroll sideways and pushes the right-hand (start) edge out of view. The
   wall and the strip are wider than the viewport BY DESIGN; they are clipped
   by their own overflow:hidden parents, which is why they are excluded here. */
html,body{overflow-x:clip;max-width:100%}
.slug-wrap input{flex:1 1 auto;min-width:0;width:auto}
.slug-wrap{max-width:100%}
.hero-grid,.cost,.form-grid,.steps,.outs,.plans,.obj{min-width:0}
.hero-grid > *,.cost > *,.form-grid > *{min-width:0}
img,video{height:auto}