/* 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;
  text-align:start;-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}

/* ═══════════════════════════════════════════════════════════════════════
   Round 3: physically-fixed nav, two languages, and the websites reel
   ═══════════════════════════════════════════════════════════════════════ */

/* ── nav: Latin wordmark on the left, menu button on the right, in BOTH
   languages. The bar is forced LTR; only the link group reads in the page
   direction, so Arabic menus still read right-to-left inside it. ─────── */
.nav-in{direction:ltr}
.nav-links{margin-inline-start:0;margin-left:auto}
[dir=rtl] .nav-links{direction:rtl}
.nav .lang{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:36px;padding:0 13px;
  border-radius:100px;border:1.5px solid var(--line);font-size:14px;font-weight:800;color:var(--purple);
  font-family:var(--ar);transition:background .18s,border-color .18s;letter-spacing:0
}
.nav .lang:hover{background:var(--lilac);border-color:var(--purple)}
[dir=ltr] .nav .lang{font-family:var(--ar)}   /* the Arabic word on the English page */
[dir=rtl] .nav .lang{font-family:var(--lat)}  /* the English word on the Arabic page */
.nav-toggle{margin-left:0}
@media (max-width:720px){
  .nav-toggle{display:block;margin-inline-start:0;margin-left:0}
  .nav .lang{margin-left:auto;height:34px;min-width:40px;padding:0 11px;font-size:13.5px}
  .nav-links{text-align:start}
}

/* ── the English page reads in the brand's Latin face ───────────────── */
html[lang=en] body,html[lang=en] .btn,html[lang=en] .toggle button,
html[lang=en] .f input,html[lang=en] .f select,html[lang=en] .f textarea{font-family:var(--lat)}
html[lang=en] body{line-height:1.7}
html[lang=en] h1{letter-spacing:-.04em;line-height:1.02}
@media (min-width:721px){ html[lang=en] h1{font-size:clamp(38px,4.6vw,58px)} }  /* keeps "and all your content" on one line */
html[lang=en] h2{letter-spacing:-.03em}
html[lang=en] .lead{line-height:1.65}
html[lang=en] .eyebrow{letter-spacing:.01em}

/* ── mirrors for left-to-right: the few places that used physical sides ─ */
body{text-align:start}
[dir=ltr] .wall{margin-inline-end:-12vw}                         /* same logical bleed, now to the right */
[dir=ltr] .wall-cols{transform:rotateY(18deg);transform-origin:left center}
[dir=ltr] .reel-nav svg{transform:scaleX(-1)}                    /* chevrons point toward the edge they sit on */
[dir=ltr] .reel-nav:hover:not(:disabled) svg{transform:scaleX(-1)}
[dir=ltr] .btn-primary::after{transform:translateX(130%)}
[dir=ltr] .btn-primary:hover::after{transform:translateX(-130%)}
@media (max-width:720px){
  [dir=ltr] .hero h1{text-align:left}
  /* the English lines run nearly full width on a phone, so there is no empty
     pocket to anchor — the brand mark would sit on top of the words */
  [dir=ltr] .hero h1::before,[dir=ltr] .hero h1::after{display:none}
  [dir=ltr] .wall-cols{transform:none}
  [dir=ltr] .wall{margin:0 -20px 20px}
}
@media (max-width:960px){ [dir=ltr] .wall-cols{transform:none} [dir=ltr] .wall{margin-inline-end:0} }

/* ── the websites reel: browser and phone frames, a slow vertical pan ── */
.sites-reel .reel-card{width:400px}
.site-card{position:relative}
.site-card .frames{position:relative;height:460px;display:grid;place-items:center}
.site-card .frame{position:absolute;inset:0;margin:auto;display:none}
.site-card[data-view=desktop] .frame.desk,.site-card[data-view=mobile] .frame.phone{display:block}
.js .site-card .frame{transform:scale(.94);opacity:.72;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.js .site-card.focus .frame,.js .site-card:hover .frame{transform:scale(1);opacity:1}

/* the browser window */
.frame.desk{width:100%;height:auto;top:50%;bottom:auto;transform:translateY(-50%);border-radius:14px;
  background:#fff;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line)}
.js .frame.desk{transform:translateY(-50%) scale(.94)}
.js .site-card.focus .frame.desk,.js .site-card:hover .frame.desk{transform:translateY(-50%) scale(1)}
.frame.desk .bar{height:34px;background:#F1EDF3;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px;direction:ltr}
.frame.desk .bar i{width:10px;height:10px;border-radius:50%;background:#D9CFDD}
.frame.desk .bar i:nth-child(1){background:#F0A88C}
.frame.desk .bar i:nth-child(2){background:#E9C9B0}
.frame.desk .bar i:nth-child(3){background:#C9B6D1}
.frame.desk .bar .url{
  margin-left:10px;flex:1;height:20px;border-radius:6px;background:#fff;font-family:var(--lat);font-size:11.5px;
  color:var(--muted);display:flex;align-items:center;padding:0 10px;font-weight:600;overflow:hidden;white-space:nowrap
}
.frame.desk .shot{aspect-ratio:4/3;overflow:hidden;background:#fff;position:relative}

/* the phone */
.frame.phone{width:214px;height:440px;border-radius:34px;background:#1E1420;padding:10px;box-shadow:var(--shadow-lg)}
.frame.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:70px;height:18px;border-radius:10px;background:#1E1420;z-index:2}
.frame.phone .shot{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#fff;position:relative}

.site-card .shot img{width:100%;height:auto;display:block;will-change:transform}
.site-card.panning .shot img{animation:pan var(--dur,20s) linear infinite alternate;animation-delay:.6s}
@keyframes pan{from{transform:translateY(0)}to{transform:translateY(var(--pan,0px))}}
@media (prefers-reduced-motion:reduce){.site-card.panning .shot img{animation:none}}

/* the desktop / mobile switch sits on the card, above the frame */
.view-switch{
  position:absolute;top:-6px;inset-inline-end:8px;z-index:5;display:inline-flex;gap:2px;padding:3px;
  background:#fff;border:1px solid var(--line);border-radius:100px;box-shadow:var(--shadow)
}
.view-switch button{
  width:32px;height:28px;border:0;border-radius:100px;background:none;color:var(--muted);cursor:pointer;
  display:grid;place-items:center;transition:background .18s,color .18s
}
.view-switch button.on{background:var(--purple);color:#fff}
.view-switch button:hover:not(.on){background:var(--lilac);color:var(--purple)}
.site-card figcaption{padding-top:14px}

@media (max-width:720px){
  .sites-reel .reel-card{width:82vw;max-width:340px}
  .site-card .frames{height:420px}
  .frame.phone{width:196px;height:404px}
}

/* ── phones: the websites carousel centres its card; the video carousel
   keeps its start-aligned peek (a slice of the next ad is the invitation to
   swipe). Arrows come back on phones as a compact purple pair above the cards. */
@media (max-width:720px){
  .reel{padding-top:60px}
  .sites-reel .reel-card{scroll-snap-align:center}
  .sites-reel .reel-track{padding-inline:calc(50% - min(41vw,170px));scroll-padding-inline:0}
  .js .reel-nav{display:grid;top:0;transform:none;width:46px;height:46px}
  .js .reel-nav:hover:not(:disabled){transform:scale(1.06)}
  .reel-nav.prev{inset-inline-start:calc(50% - 52px)}
  .reel-nav.next{inset-inline-end:calc(50% - 52px)}
  .reel-card{width:min(72vw,300px)}
  .sites-reel .reel-card{width:min(82vw,340px)}
  .view-switch{top:-4px}
}

/* ── arrows in the palette, every size: purple disc, orange on hover, lilac when spent ── */
.reel-nav{background:var(--purple);color:#fff}
.reel-nav:hover:not(:disabled){background:var(--orange)}
.reel-nav:disabled{opacity:1;background:var(--lilac);color:#B79CC0}

/* ── a trial button closes every section ─────────────────────────────── */
.sec-cta{display:flex;justify-content:center;margin-top:46px}
.sec-cta .btn{min-width:280px}
#work .sec-cta,#sites .sec-cta{margin-top:28px}
.dark .sec-cta .btn-primary{box-shadow:0 14px 34px rgba(225,93,50,.45)}
.cost .sec-cta{justify-content:flex-start;margin-top:0;display:inline-flex;margin-inline-start:12px}
.cost .sec-cta .btn{min-width:0}
@media (max-width:720px){
  .sec-cta{margin-top:34px}
  .sec-cta .btn{width:100%}
  .cost .sec-cta{display:flex;margin:12px 0 0}
}

/* ── The honeypot: off-screen for people, irresistible to bots ───────── */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ── WhatsApp button ─────────────────────────────────────────────────
   inset-inline-end is bottom-right in English and bottom-left in Arabic,
   because the document direction decides what "end" means.             */
.wa-fab{
  position:fixed;bottom:22px;inset-inline-end:22px;z-index:1200;
  display:inline-flex;align-items:center;gap:9px;
  background:#25D366;color:#0b2e19;text-decoration:none;
  padding:12px 16px;border-radius:999px;font-weight:800;font-size:14px;
  box-shadow:0 10px 28px -10px rgba(37,211,102,.75),0 2px 6px rgba(0,0,0,.16);
  transition:transform .16s ease,box-shadow .16s ease;
}
.wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(37,211,102,.9),0 2px 6px rgba(0,0,0,.18);color:#0b2e19}
.wa-fab svg{width:22px;height:22px;flex:none;fill:#0b2e19}
.wa-fab .wa-txt{white-space:nowrap}
@media (max-width:640px){
  .wa-fab{bottom:16px;inset-inline-end:16px;padding:13px}
  .wa-fab .wa-txt{display:none}
  .wa-fab svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){.wa-fab{transition:none}}

/* ── The loader between the form and the showroom ──────────────────── */
.ldr{display:none;text-align:center;padding:26px 6px 18px}
.ldr.on{display:block}
.ldr .ring{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;position:relative;
  background:conic-gradient(#E15D32 0 28%,#EFE7F3 28% 100%);animation:ldspin 1.1s linear infinite}
.ldr .ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff}
.ldr .ring span{position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;background:#5E296D;z-index:1;animation:ldpulse 1.1s ease-in-out infinite}
.ldr h3{margin-bottom:8px}
.ldr p{color:var(--muted);min-height:1.7em;transition:opacity .25s}
.ldr .bar{height:6px;border-radius:99px;background:#EFE7F3;overflow:hidden;margin:16px auto 0;max-width:280px}
.ldr .bar i{display:block;height:100%;width:34%;border-radius:99px;background:#E15D32;animation:ldslide 1.5s ease-in-out infinite}
.ldr .ld-link{display:inline-block;margin-top:16px;font-weight:700}
@keyframes ldspin{to{transform:rotate(360deg)}}
@keyframes ldpulse{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.1);opacity:1}}
@keyframes ldslide{0%{transform:translateX(-120%)}100%{transform:translateX(420%)}}
[dir="rtl"] .ldr .bar i{animation-name:ldslide-rtl}
@keyframes ldslide-rtl{0%{transform:translateX(120%)}100%{transform:translateX(-420%)}}
@media (prefers-reduced-motion:reduce){.ldr .ring,.ldr .ring span,.ldr .bar i{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════
   Inner pages (/privacy, /contact), footer social links, and the thin
   Webdazzle bar on the webdazzle.online copy — 2026-09-11
   ═══════════════════════════════════════════════════════════════════════ */
.obp-doc{padding:64px 0 96px}
.obp-narrow{max-width:800px}
.obp-doc h1{font-size:clamp(34px,4.4vw,52px);margin:12px 0 10px}
.obp-meta{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.obp-doc .lead{margin:0 0 28px}
.obp-doc h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 12px;scroll-margin-top:90px}
.obp-doc h3{font-size:18px;margin:22px 0 8px}
.obp-doc p,.obp-doc li{line-height:1.85}
.obp-doc ul{padding-inline-start:22px;margin:8px 0 14px}
.obp-doc li{margin:6px 0}
.obp-doc a:not(.btn){color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.obp-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.obp-doc .obp-toc a{font-size:14px;font-weight:700;padding:6px 12px;border-radius:100px;background:var(--lilac);color:var(--purple);text-decoration:none}
.obp-table{overflow-x:auto;margin:12px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.obp-table table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.obp-table th,.obp-table td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.obp-table th{background:var(--paper);font-weight:800}
.obp-table tr:last-child td{border-bottom:0}
.obp-head{max-width:62ch;margin-bottom:40px}
.obp-head h1{margin:12px 0 14px}
.obp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.obp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.obp-card h2{font-size:21px;margin:4px 0 0}
.obp-card p{margin:0;color:var(--muted)}
.obp-card address{font-style:normal;line-height:1.8}
.obp-card .btn{margin-top:auto}
.obp-card--wa{border-color:#25D366;box-shadow:0 10px 30px -14px rgba(37,211,102,.55)}
.obp-card .obp-num{font-family:var(--lat);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:.02em}
.obp-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--lilac);color:var(--purple)}
.obp-card--wa .obp-ico{background:#E3F8EA;color:#128C4A}
.obp-ico svg{width:24px;height:24px}
.obp-social{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.obp-social a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;border:1.5px solid var(--line);font-weight:800;font-size:14.5px;color:var(--ink)}
.obp-social a:hover{border-color:var(--purple);color:var(--purple);background:var(--lilac)}
.obp-doc .obp-social a{color:var(--ink);text-decoration:none}          /* pills, not text links */
.obp-doc .obp-social a:hover{color:var(--purple)}
.obp-social svg{width:20px;height:20px}
.obp-cta{margin-top:48px;padding:40px 28px;border-radius:var(--r-lg);background:var(--purple);color:#fff;text-align:center}
.obp-cta h2{color:#fff;font-size:clamp(24px,3vw,34px)}
.obp-cta p{color:#E9DDEE;margin:12px auto 22px;max-width:52ch}
.obp-fine{margin-top:22px;color:var(--muted);font-size:14px;text-align:center}
.obp-fine a{color:var(--purple);text-decoration:underline}

.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;transition:background .18s}
.foot-social a:hover{background:rgba(255,255,255,.18)}
.foot-social svg{width:20px;height:20px}
.foot-addr{opacity:.85}

.wd-bar{background:var(--ink);color:#D9CCE0;font-size:13.5px;line-height:1.4}
.wd-bar-in{display:flex;align-items:center;gap:10px;min-height:38px;flex-wrap:wrap}
.wd-bar a{color:#fff;font-weight:700}
.wd-bar a:hover{text-decoration:underline}
.wd-bar .sep{opacity:.5}
.wd-bar-out{margin-inline-start:auto;opacity:.85;font-family:var(--lat)}
@media (max-width:720px){ .obp-doc{padding:44px 0 80px} .wd-bar-out{display:none} }

/* the privacy link lives in the phone menu (and every footer), not the desktop bar */
.nav-links a.menu-only{display:none}
@media (max-width:720px){ .nav-links a.menu-only{display:block} }

/* six links in the bar: never break a label over two lines; tighten on small
   laptops; below 960px use the ☰ menu (the orange button stays visible) */
.nav-links a{white-space:nowrap}
@media (min-width:961px) and (max-width:1180px){
  .nav-in{gap:14px}
  .nav-links a{padding:8px 9px;font-size:14.5px}
  .nav .btn{padding:10px 18px;font-size:14.5px}
}
@media (min-width:721px) and (max-width:960px){
  .nav-links{
    display:none;position:absolute;top:74px;inset-inline:0;background:#fff;
    flex-direction:column;gap:0;padding:10px 24px 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-links a.menu-only{display:block}
  .nav .nav-cta{margin-left:auto}
  .nav-toggle{display:block}
}