/* ═══════════════════════════════════════════════════════════════
   Monasbati «ليلة العمر» — subpage shell
   Shared by /support, /faq, /privacy, /delete-account.
   Same tokens, fonts, header, garland and motion language as the
   landing page: the canvas is the night, gold is light.
   ═══════════════════════════════════════════════════════════════ */

/* Fonts: same self-hosted variable subsets as the landing page */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:700 800;font-display:swap;src:url('/assets/fonts/alexandria-var-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC;}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:700 800;font-display:swap;src:url('/assets/fonts/alexandria-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/rubik-var-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/rubik-var-hebrew.woff2') format('woff2');unicode-range:U+0590-05FF,U+FB1D-FB4F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/rubik-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;}

:root{
  --bg-0:#0D0818; --bg-1:#1A1230; --bg-2:#3D2A66;
  --purple:#543C82;
  --lavender:#CFC6E4; --lavender-bright:#F3EFFB; --lavender-dim:#8F84AC;
  --gold-hot:#F0D375; --gold-core:#E5C550; --gold-deep:#C89C3E;
  --line:rgba(233,227,245,.09); --line-gold:rgba(229,197,80,.32);
  --danger:#EE8B8B; --danger-line:rgba(238,139,139,.5);
  --ok:#9BD9A8;
  --font-display:'Alexandria','Rubik',sans-serif;
  --font-body:'Rubik','Alexandria',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:#543C82 #0D0818}
body{
  margin:0;
  background:
    radial-gradient(70rem 40rem at 50% -14%, rgba(84,60,130,.38), transparent 62%),
    radial-gradient(46rem 28rem at 50% 120%, rgba(229,197,80,.06), transparent 55%),
    var(--bg-0);
  color:var(--lavender);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.8;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* film grain over everything — the landing's texture */
body::after{
  content:""; position:fixed; inset:-50%; z-index:60; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:soft-light;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0D0818}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5c4290,#3D2A66);border-radius:999px;border:2px solid #0D0818}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#E5C550,#C89C3E)}
::-webkit-scrollbar-corner{background:#0D0818}

h1,h2,h3{font-family:var(--font-display);color:var(--lavender-bright);line-height:1.45;margin:0;font-weight:800;text-wrap:balance}
p{margin:0}
a{color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
svg{display:block}
::selection{background:rgba(229,197,80,.85);color:#241a3e}
:focus-visible{outline:2px solid var(--gold-core);outline-offset:3px;border-radius:4px}
/* the hidden attribute must beat component display rules */
[hidden]{display:none !important}
.sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:200;
  background:var(--gold-core);color:#241a3e;font-weight:600;text-decoration:none;
  padding:10px 18px;border-radius:999px;transform:translateY(-64px);transition:transform .2s ease;
}
.skip-link:focus-visible{transform:translateY(0)}

/* ─── header — identical to the landing page ─────────────── */
.site-head{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(16px,4vw,44px);
  background:linear-gradient(180deg,rgba(13,8,24,.92) 0%,rgba(13,8,24,.55) 60%,transparent 100%);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-badge{width:34px;height:34px;filter:drop-shadow(0 0 12px rgba(229,197,80,.35))}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--lavender-bright)}
.lang-switch{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(13,8,24,.55)}
.lang-switch button{
  font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--lavender-dim);
  background:transparent;border:0;border-radius:999px;padding:6px 13px;cursor:pointer;
  transition:color .2s ease,background-color .2s ease;
}
.lang-switch button:hover{color:var(--lavender-bright)}
.lang-switch button[aria-pressed="true"]{color:var(--gold-hot);background:rgba(229,197,80,.1)}

/* ─── page hero: garland + gold title ────────────────────── */
.page-hero{
  position:relative;text-align:center;
  padding:108px clamp(20px,5vw,64px) clamp(30px,5vh,52px);
  overflow:clip;
}
.hero-garland{max-width:660px;margin:0 auto clamp(6px,2vh,18px)}
.hero-garland svg{inline-size:100%;block-size:auto;overflow:visible}
.hero-garland .wire{stroke:rgba(229,197,80,.22);stroke-width:1.6;fill:none}

/* string-light bulb anatomy — same as the landing garlands */
.bulb .stem{stroke:rgba(229,197,80,.3);stroke-width:1.2}
.bulb .socket{fill:#35294f;stroke:rgba(229,197,80,.35);stroke-width:.7}
.bulb .glass{fill:url(#bulb-off);stroke:rgba(229,197,80,.3);stroke-width:.8;transition:stroke .4s ease}
.bulb .core{fill:#FFFBEA;opacity:0;transition:opacity .35s ease}
.bulb .halo{fill:url(#bulb-halo);opacity:0;transition:opacity .5s ease}
.bulb.is-lit .glass{fill:url(#bulb-on);stroke:rgba(255,240,190,.55)}
.bulb.is-lit .core{opacity:.95}
.bulb.is-lit .halo{opacity:.9;animation:bulb-flicker 4.5s ease-in-out infinite;animation-delay:var(--fl,0s)}
@keyframes bulb-flicker{
  0%,100%{opacity:.9} 7%{opacity:.72} 11%{opacity:.92}
  46%{opacity:.8} 52%{opacity:.95} 81%{opacity:.75} 86%{opacity:.9}
}

.kicker{
  font-family:var(--font-body);font-weight:600;font-size:.82rem;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:10px;margin-block-end:14px;
}
.kicker::before{content:"";inline-size:26px;block-size:1px;background:linear-gradient(to inline-end,transparent,var(--gold-deep))}
:lang(en) .kicker{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}

.page-title{
  font-size:clamp(1.9rem,6vw,3.3rem);font-weight:800;line-height:1.4;
  background:linear-gradient(175deg,var(--gold-hot) 20%,var(--gold-core) 55%,var(--gold-deep) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(229,197,80,.22));
}
.page-sub{
  color:var(--lavender);font-size:clamp(1rem,1.6vw,1.15rem);
  max-inline-size:38em;margin:16px auto 0;
}

/* ─── content column ─────────────────────────────────────── */
.wrap{
  max-inline-size:960px;margin-inline:auto;
  padding:0 clamp(20px,5vw,44px) clamp(64px,9vh,110px);
  display:grid;gap:clamp(20px,3vh,30px);
}

/* band-card — the landing's partner-band surface */
.card{
  border:1px solid var(--line);border-radius:26px;
  padding:clamp(26px,4.5vw,46px) clamp(22px,4.5vw,48px);
  background:
    radial-gradient(ellipse 90% 120% at 50% -20%, rgba(229,197,80,.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(61,42,102,.32), rgba(26,18,48,.18));
}
.card--gold{border-color:var(--line-gold);box-shadow:0 8px 70px rgba(229,197,80,.07);scroll-margin-block-start:96px}

.card h2{
  font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:700;
  display:flex;align-items:center;gap:12px;
}
.card h2 svg{inline-size:22px;block-size:22px;color:var(--gold-core);flex:none}
.card h3{
  font-size:1.02rem;font-weight:700;color:var(--gold-hot);
  margin-block:26px 8px;
}
.card > p, .card .body-copy{color:var(--lavender);font-size:.98rem}
.card .muted{color:var(--lavender-dim);font-size:.92rem}
.card a{color:var(--gold-hot);text-decoration:none;border-block-end:1px solid rgba(229,197,80,.35);transition:border-color .2s ease,color .2s ease}
.card a:hover{color:var(--gold-core);border-block-end-color:var(--gold-core)}
/* buttons keep their own colors even inside cards (beat `.card a`) */
.card a.btn-gold,.card a.btn-gold:hover{color:var(--bg-0);border-block-end:0}
.card a.btn-ghost{color:var(--lavender-bright);border-block-end:0}
.card a.btn-ghost:hover{color:var(--lavender-bright)}

/* lists with gold sparks */
.list{display:grid;gap:10px;margin-block-start:12px}
.list li{
  position:relative;padding-inline-start:24px;
  color:var(--lavender);font-size:.95rem;
}
.list li::before{
  content:"✦";position:absolute;inset-inline-start:2px;inset-block-start:0;
  color:var(--gold-deep);font-size:.72rem;line-height:2.4;
}
.steps{display:grid;gap:14px;margin-block-start:14px;counter-reset:step}
.steps li{
  position:relative;padding-inline-start:44px;counter-increment:step;
  color:var(--lavender);font-size:.95rem;
}
.steps li::before{
  content:counter(step);
  position:absolute;inset-inline-start:0;inset-block-start:2px;
  inline-size:28px;block-size:28px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--gold-hot);
  border:1px solid var(--line-gold);
  background:radial-gradient(circle at 32% 28%, rgba(240,211,117,.14), transparent 65%);
}

/* ─── buttons ────────────────────────────────────────────── */
.btn-gold,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;padding:13px 32px;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn-gold{
  color:var(--bg-0);border:0;
  background:linear-gradient(180deg,var(--gold-hot),var(--gold-core));
  box-shadow:0 6px 22px rgba(229,197,80,.28);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(229,197,80,.4)}
.btn-gold:disabled{opacity:.6;transform:none;cursor:default;box-shadow:0 6px 22px rgba(229,197,80,.15)}
.btn-ghost{color:var(--lavender-bright);border:1px solid var(--line-gold);background:transparent}
.btn-ghost:hover{background:rgba(229,197,80,.08);transform:translateY(-2px)}

/* ─── form (support) ─────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-block-start:22px}
.form-grid .full{grid-column:1 / -1}
.field{display:grid;gap:7px}
.field label,.field .field-label{
  font-size:.8rem;font-weight:600;color:var(--lavender-dim);
  transition:color .2s ease;
}
.field label small,.field .field-label small{font-weight:400;color:var(--lavender-dim);opacity:.75}
.field:focus-within label,.field:focus-within .field-label{color:var(--gold-hot)}
.field input,.field select,.field textarea{
  width:100%;
  font:inherit;font-size:.95rem;color:var(--lavender-bright);
  background:rgba(233,227,245,.045);
  border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(143,132,172,.55)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--line-gold);
  background:rgba(233,227,245,.06);
  box-shadow:0 0 0 3px rgba(229,197,80,.12), 0 0 30px rgba(229,197,80,.06);
}
.field textarea{min-height:150px;resize:vertical}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C89C3E' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-inline-end:40px;
}
[dir="rtl"] .field select{background-position:left 16px center}
.field select option{background:var(--bg-1);color:var(--lavender-bright)}

/* custom dropdown — replaces native selects (their popups can't be themed) */
.dd{position:relative}
.dd-btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;cursor:pointer;text-align:start;
  font:inherit;font-size:.95rem;color:var(--lavender-bright);
  background:rgba(233,227,245,.045);
  border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.dd-btn:focus-visible,.dd.open .dd-btn{
  outline:none;border-color:var(--line-gold);
  background:rgba(233,227,245,.06);
  box-shadow:0 0 0 3px rgba(229,197,80,.12), 0 0 30px rgba(229,197,80,.06);
}
.dd-btn::after{
  content:"";flex:none;inline-size:12px;block-size:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C89C3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.dd.open .dd-btn::after{transform:rotate(180deg)}
.dd-panel{
  position:absolute;inset-inline:0;inset-block-start:calc(100% + 8px);z-index:40;
  border:1px solid var(--line-gold);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#221845,var(--bg-1));
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(229,197,80,.08);
  padding:6px;
  opacity:0;translate:0 -6px;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,translate .22s cubic-bezier(.2,.7,.2,1),visibility .22s;
}
.dd.open .dd-panel{opacity:1;translate:0 0;visibility:visible;pointer-events:auto}
.dd-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:11px;cursor:pointer;
  padding:10px 14px;font-size:.92rem;color:var(--lavender);
  transition:background-color .15s ease,color .15s ease;
}
.dd-opt:hover,.dd-opt.is-focused{background:rgba(229,197,80,.1);color:var(--gold-hot)}
.dd-opt.is-selected{color:var(--gold-hot)}
.dd-opt.is-selected::after{
  content:"";inline-size:12px;block-size:9px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1' fill='none' stroke='%23F0D375' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce){.dd-panel{transition:none}.dd-btn::after{transition:none}}

.field.is-invalid input,.field.is-invalid textarea{border-color:var(--danger-line);box-shadow:0 0 0 3px rgba(238,139,139,.08)}
.field-error{font-size:.78rem;color:var(--danger);min-block-size:0;display:none}
.field.is-invalid .field-error{display:block}

.char-count{font-size:.75rem;color:var(--lavender-dim);text-align:end;margin-block-start:2px;direction:ltr}
.char-count.is-low{color:var(--danger)}

.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-block-start:24px}
.form-meta{display:grid;gap:4px}
.form-note{font-size:.8rem;color:var(--lavender-dim)}
.form-hours{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--gold-deep)}
.form-hours svg{inline-size:13px;block-size:13px;flex:none}

/* attachments — a dashed gold tray that fills with thumbnails */
.attach-zone{
  display:grid;gap:10px;
  border:1px dashed var(--line-gold);border-radius:16px;padding:12px;
  background:rgba(233,227,245,.03);
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease;
}
.attach-zone.is-over{border-style:solid;background:rgba(229,197,80,.07);box-shadow:0 0 0 3px rgba(229,197,80,.12)}
.attach-btn{
  display:inline-flex;align-items:center;gap:10px;justify-self:start;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--gold-hot);
  background:rgba(229,197,80,.08);border:1px solid var(--line-gold);border-radius:999px;
  padding:9px 18px;
  transition:background .2s ease,transform .18s ease,opacity .2s ease;
}
.attach-btn svg{inline-size:18px;block-size:18px;color:var(--gold-core);flex:none}
.attach-btn:hover{background:rgba(229,197,80,.14);transform:translateY(-1px)}
.attach-btn:disabled{opacity:.45;cursor:default;transform:none}
.attach-list{display:grid;gap:8px}
.attach-list:empty{display:none}
.attach-item{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:8px 10px;
  background:rgba(13,8,24,.35);
  animation:alert-in .25s ease;
}
.attach-item img{inline-size:52px;block-size:52px;border-radius:9px;object-fit:cover;flex:none;border:1px solid var(--line-gold);background:var(--bg-1)}
.attach-meta{display:grid;gap:2px;min-inline-size:0;flex:1}
.attach-name{font-size:.86rem;color:var(--lavender-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-size{font-size:.74rem;color:var(--lavender-dim)}
.attach-rm{
  flex:none;inline-size:30px;block-size:30px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--lavender-dim);cursor:pointer;
  display:grid;place-items:center;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.attach-rm svg{inline-size:13px;block-size:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.attach-rm:hover{color:var(--danger);border-color:var(--danger-line);background:rgba(238,139,139,.08)}
.attach-hint{font-size:.76rem;color:var(--lavender-dim)}
.field.is-invalid .attach-zone{border-color:var(--danger-line);box-shadow:0 0 0 3px rgba(238,139,139,.08)}

/* Turnstile — the widget sits in its own slot, dark-themed to match the night */
.turnstile-box{min-block-size:65px;border-radius:14px;overflow:hidden}
.turnstile-box iframe{max-inline-size:100%}
.field.is-invalid .turnstile-box{box-shadow:0 0 0 2px var(--danger-line)}

/* honeypot — off-canvas, invisible to humans */
.hp{position:absolute;inset-inline-start:-9999px;inset-block-start:-9999px;block-size:0;inline-size:0;overflow:hidden}

/* submit spinner: three gold dots */
.dots{display:none;gap:5px}
.dots span{
  inline-size:6px;block-size:6px;border-radius:50%;background:var(--bg-0);
  animation:dot-pulse 1s ease-in-out infinite;
}
.dots span:nth-child(2){animation-delay:.15s}
.dots span:nth-child(3){animation-delay:.3s}
@keyframes dot-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.btn-gold.is-busy .dots{display:inline-flex}
.btn-gold.is-busy .btn-label{display:none}

/* error banner */
.form-alert{
  display:none;align-items:flex-start;gap:10px;
  border:1px solid var(--danger-line);border-radius:14px;
  background:rgba(238,139,139,.07);
  color:var(--danger);font-size:.88rem;
  padding:13px 16px;margin-block-start:18px;
}
.form-alert.show{display:flex;animation:alert-in .3s ease}
@keyframes alert-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
.form-alert a{color:var(--gold-hot)}

/* success panel — swaps in over the form */
.form-stage{position:relative}
.form-body{transition:opacity .35s ease,transform .35s ease}
.form-stage.is-done .form-body{opacity:0;transform:scale(.985);pointer-events:none;position:absolute;inset:0}
.form-success{
  display:none;position:relative;text-align:center;
  padding:clamp(20px,4vh,44px) 10px;
}
.form-stage.is-done .form-success{display:block;animation:success-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes success-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
#burst-canvas{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}
.success-ring{
  position:relative;inline-size:84px;block-size:84px;margin:0 auto 18px;border-radius:50%;
  border:1px solid var(--line-gold);
  background:radial-gradient(circle at 34% 28%, rgba(240,211,117,.18), transparent 60%);
  display:grid;place-items:center;
  box-shadow:0 0 44px rgba(229,197,80,.25);
}
.success-ring svg{inline-size:38px;block-size:38px}
.success-ring path{
  stroke:var(--gold-hot);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:34;stroke-dashoffset:34;
}
.form-stage.is-done .success-ring path{animation:check-draw .55s .25s ease forwards}
@keyframes check-draw{to{stroke-dashoffset:0}}
.form-success h3{font-size:1.3rem;color:var(--lavender-bright);margin:0 0 8px}
.form-success p{color:var(--lavender);font-size:.95rem;max-inline-size:34em;margin-inline:auto}
.form-success .btn-ghost{margin-block-start:24px}
/* server reference — a small gold ticket the customer can quote back */
.form-success .success-ref{
  display:inline-flex;align-items:center;gap:8px;
  margin-block-start:14px;padding:7px 16px;
  border:1px solid var(--line-gold);border-radius:999px;
  background:rgba(229,197,80,.06);
  font-size:.84rem;color:var(--lavender-dim);
}
.success-ref code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:600;font-size:.92rem;letter-spacing:.14em;color:var(--gold-hot);
}

/* ─── FAQ accordion ──────────────────────────────────────── */
.acc{display:grid;gap:14px}
.acc-item{
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,rgba(233,227,245,.045),rgba(233,227,245,.015));
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
  overflow:clip;
}
.acc-item.open{
  border-color:var(--line-gold);
  background:linear-gradient(180deg,rgba(229,197,80,.06),rgba(233,227,245,.02));
  box-shadow:0 8px 50px rgba(229,197,80,.09);
}
.acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:start;cursor:pointer;
  background:none;border:0;color:var(--lavender-bright);
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1.6;
  padding:19px 22px;
}
.acc-btn:hover{color:var(--gold-hot)}
.acc-icon{
  inline-size:26px;block-size:26px;flex:none;border-radius:50%;
  border:1px solid var(--line-gold);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E5C550' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat,
    radial-gradient(circle at 32% 28%, rgba(240,211,117,.12), transparent 65%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.acc-item.open .acc-icon{transform:rotate(180deg);box-shadow:0 0 16px rgba(229,197,80,.25)}
.acc-panel{
  max-block-size:0;overflow:hidden;
  transition:max-block-size .4s cubic-bezier(.2,.7,.2,1);
}
.acc-panel p{
  color:var(--lavender);font-size:.93rem;line-height:1.9;
  padding:0 22px 20px;
}
.acc-panel a{color:var(--gold-hot);text-decoration:none;border-block-end:1px solid rgba(229,197,80,.35)}
.acc-panel a:hover{border-block-end-color:var(--gold-core)}

/* two-up info cards (support channels) */
/* Two Monasbati routes pair on the top row; the technical route takes the full
   width beneath them. Three equal columns gave the longest copy the narrowest
   measure, so the Arabic broke into a ragged block. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,24px)}
.duo .card{display:grid;gap:8px;align-content:start}
.duo .wa-link{justify-self:start;margin-block-start:8px;padding:11px 24px;font-size:.9rem}
/* The wide card lays its icon beside the text rather than above it, so the extra
   width carries the copy instead of leaving a short line in a tall empty box.
   Grid areas mirror with the writing direction, so this is correct in RTL too. */
.duo .card--tech{
  grid-column:1 / -1;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icon title" "icon body";
  column-gap:clamp(16px,2vw,24px);row-gap:6px;align-items:center;
  padding-block:clamp(20px,2.4vw,28px);
}
.duo .card--tech .icon-disc{grid-area:icon;inline-size:64px;block-size:64px;margin-block-end:0}
.duo .card--tech h3{grid-area:title;font-size:clamp(1.05rem,1.6vw,1.22rem)}
.duo .card--tech p{grid-area:body;max-inline-size:68ch}
.card--wa{border-color:rgba(155,217,168,.22)}
.card--wa .icon-disc{color:var(--ok);border-color:rgba(155,217,168,.4);background:radial-gradient(circle at 32% 28%, rgba(155,217,168,.16), transparent 65%)}
.icon-disc{
  inline-size:52px;block-size:52px;border-radius:50%;
  border:1px solid var(--line-gold);color:var(--gold-core);
  display:grid;place-items:center;margin-block-end:8px;
  background:radial-gradient(circle at 32% 28%, rgba(240,211,117,.14), transparent 65%);
}
.icon-disc svg{inline-size:24px;block-size:24px}

/* ghost link row */
.link-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.link-row a{
  border:1px solid var(--line);border-radius:999px;
  color:var(--lavender);text-decoration:none;
  font-size:.88rem;font-weight:500;padding:10px 22px;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.link-row a:hover{color:var(--gold-hot);border-color:var(--line-gold);background:rgba(229,197,80,.06)}

/* effective-date chip */
.date-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:999px;
  color:var(--lavender-dim);font-size:.8rem;padding:7px 16px;
  margin-block-start:18px;
}
.date-chip svg{inline-size:13px;block-size:13px;color:var(--gold-deep)}

/* ─── footer — identical to the landing page ─────────────── */
.site-foot{
  border-block-start:1px solid var(--line);background:var(--bg-0);
  text-align:center;padding:52px clamp(20px,5vw,64px) 42px;
  display:grid;gap:22px;justify-items:center;
}
.foot-brand{display:grid;justify-items:center;gap:14px}
.foot-brand .brand-badge{width:40px;height:40px}
.foot-tagline{color:var(--lavender-dim);font-size:.92rem;max-inline-size:34em}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.foot-links a{
  color:var(--lavender);text-decoration:none;font-size:.9rem;
  border-block-end:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.foot-links a:hover{color:var(--gold-hot);border-block-end-color:var(--gold-deep)}
.foot-rights{color:var(--lavender-dim);font-size:.78rem}

/* ─── entrances ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0;translate:0 16px;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
  @keyframes rise{to{opacity:1;translate:0 0}}
  .reveal{opacity:0;translate:0 26px;transition:opacity .65s cubic-bezier(.2,.7,.2,1),translate .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .reveal.in{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion: reduce){
  .bulb.is-lit .halo{animation:none;opacity:.8}
  .acc-panel{transition:none}
  .dots span{animation:none;opacity:1}
}

/* ─── responsive ─────────────────────────────────────────── */
@media (max-width:900px){
  .duo.has-wa{grid-template-columns:1fr 1fr}
  .duo.has-wa .card--wa{grid-column:1 / -1}
}
@media (max-width:720px){
  .form-grid{grid-template-columns:1fr}
  .duo,.duo.has-wa{grid-template-columns:1fr}
  /* Single column: the icon goes back above the text like every other card. */
  .duo .card--tech{grid-template-columns:1fr;grid-template-areas:"icon" "title" "body";align-items:start}
  .duo .card--tech .icon-disc{inline-size:52px;block-size:52px;margin-block-end:8px}
  .page-hero{padding-block-start:96px}
}
@media (max-width:540px){
  .lang-switch button{padding:5px 10px;font-size:.74rem}
  .brand-word{font-size:1.05rem}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn-gold{width:100%}
}