/* Signature Studio. One stylesheet, two brands.
   Brand tokens (--ink, --primary, --accent, --onDark, --bg, --highlight) are
   written into :root by View::head() from the brand config. Nothing here may
   hardcode a brand colour. */

/* The family is loaded by View::head from fonts.bhd.om. Inter is retired across
   the BHD system; IBM Plex Sans Arabic carries Latin and Arabic in one family,
   so the RTL build needs no second pairing. */

*{box-sizing:border-box}
/* An author display rule beats the UA rule for [hidden]; without this, any
   element we hide with the hidden attribute AND style with display stays visible. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:#12172b;
  font:400 16px/1.6 'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
/* A rendered signature must be shown at its real pixel size. The global
   max-width above shrinks an image's width while its height attribute stays
   put, which distorts the logo and makes the preview lie about what the
   recipient will see. Both containers already scroll horizontally. */
#preview img,.galBody img{max-width:none}
a{color:var(--primary)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0 0 .4em}
h1{font-size:clamp(30px,5vw,50px);font-weight:700}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:700}
h3{font-size:17px;font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.muted{color:#5b6478}
.lede{font-size:clamp(16px,1.5vw,18px);color:#454d61;max-width:70ch}
.opt{font-weight:400;color:#6c727f;font-size:.85em}
/* Clip the skip link, never park it at a negative offset. In RTL the scroll
   origin flips, so left:-9999px extends the scrollable width and made the
   whole Arabic page scroll sideways by ten thousand pixels. */
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Visually hidden but still in the accessibility tree and still focusable by script. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;inset-inline-start:8px;top:8px;width:auto;height:auto;margin:0;overflow:visible;clip:auto;z-index:99;background:#fff;color:#12172b;padding:10px 16px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.2)}

/* ---------- header / footer ---------- */
header.site{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.navwrap{display:flex;align-items:center;gap:24px;min-height:62px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:16px}
.brand img{display:block;height:26px;width:auto}
header.site nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
header.site nav a{color:var(--onDark);text-decoration:none;font-size:14.5px;font-weight:600;padding:8px 12px;border-radius:8px}
header.site nav a:hover{background:rgba(255,255,255,.1);color:#fff}
header.site nav a.cta{background:var(--solid);color:#fff;margin-left:6px}
header.site nav a.cta:hover{filter:brightness(1.12)}

footer.site{background:var(--ink);color:var(--onDark);margin-top:72px;padding:48px 0 0}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1.4fr 1fr;gap:32px}
footer.site h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:8px}
footer.site a{color:var(--onDark);text-decoration:none;font-size:14.5px}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .muted{color:var(--onDark);opacity:.75;font-size:14px;max-width:38ch}
.brand.foot{margin-bottom:12px}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:18px;padding-bottom:26px}
.legal p{margin:0;font-size:13px;opacity:.7}
@media (max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footgrid{grid-template-columns:1fr}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--bg),#fff);padding:56px 0 40px;text-align:center}
.hero .lede{margin:0 auto 26px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--primary);
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:6px 14px;margin:0 0 18px}
.heroCta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font:700 14.5px/1 inherit;font-family:inherit;
  border-radius:10px;padding:13px 20px;cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:transform .08s,background .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn.lg{padding:15px 26px;font-size:16px}
.btn.sm{padding:9px 14px;font-size:13.5px}
.btn.primary{background:var(--solid);color:#fff}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:#fff;border-color:#dfe4ee;color:#2a3350}
.btn.ghost:hover{border-color:#b9c2d6}
.btn.done{background:#12855a !important;color:#fff !important;border-color:#12855a !important}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:#6c727f;font:600 13px inherit;font-family:inherit;cursor:pointer;text-decoration:underline}

/* ---------- template strip ---------- */
.builder{padding:34px 0 10px;background:#fff}
.tplStrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:22px}
@media (max-width:1080px){.tplStrip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.tplStrip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tplCard{text-align:left;background:#fff;border:1px solid #dfe4ee;border-radius:12px;padding:12px 13px;
  cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:5px;transition:border-color .15s,box-shadow .15s}
.tplCard:hover{border-color:#b9c2d6}
.tplCard.on{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 22%,transparent)}
.tplName{font-weight:700;font-size:14px;color:#12172b;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tplBlurb{font-size:12px;line-height:1.4;color:#6b7385}
.badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:2px 7px}
.badge.free{background:#e6f6ec;color:#12704a}
.badge.pro{background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--deep)}

/* ---------- builder grid ---------- */
.bgrid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:980px){.bgrid{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid #dfe4ee;border-radius:14px;padding:22px}
.sticky{position:sticky;top:78px}
@media (max-width:980px){.sticky{position:static}}

fieldset{border:0;padding:0;margin:0 0 22px}
fieldset:last-child{margin-bottom:0}
legend{font-weight:700;font-size:14px;color:#12172b;display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:0}
legend i{color:var(--accent)}
label{display:block;font-size:13px;font-weight:700;color:#2a3350;margin-bottom:13px}
label.sml{font-weight:600;font-size:12.5px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;margin-top:6px;padding:11px 13px;border:1px solid #dfe4ee;border-radius:10px;
  font:400 15px inherit;font-family:inherit;color:#12172b;background:#fff}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
a:focus-visible,button:focus-visible,label.btn:focus-visible,summary:focus-visible{
  outline:3px solid var(--deep);outline-offset:2px;border-radius:6px}
::placeholder{color:#6c727f}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.hint{font-size:12.5px;color:#6b7385;margin:-4px 0 14px}
.check{display:flex;align-items:center;gap:10px;font-weight:400;font-size:14px}
.check input{width:17px;height:17px;accent-color:var(--accent);margin:0;flex:0 0 auto}

.colorRow{display:flex;gap:8px;align-items:center;margin-top:6px}
.colorRow input[type=color]{width:44px;height:42px;padding:2px;border:1px solid #dfe4ee;border-radius:9px;background:#fff;cursor:pointer;flex:0 0 auto}
.hexIn{margin-top:0 !important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px !important;text-transform:uppercase}

/* ---------- logo ---------- */
.logoRow{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.logoPrev{width:104px;height:78px;border:1px dashed #cdd4e2;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:#fafbfd;overflow:hidden}
.logoPrev img{max-width:92px;max-height:66px;display:block}
.logoPrev .ph{color:#8c94a3;font-size:22px}
.logoAct{flex:1;min-width:0}
.logoAct .hint{margin:8px 0 0}
.logoRow.locked .logoPrev{opacity:.5}
.logoPrev{position:relative}
.animBadge{position:absolute;left:4px;bottom:4px;background:var(--ink);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.06em;border-radius:4px;padding:2px 5px}
.logoPrev.frame1{border-style:solid;border-color:#e6d3a8;background:#fffdf6}
.logoPrev.frame1 .cap{position:absolute;left:4px;bottom:4px;background:#9a5b00;color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.05em;border-radius:4px;padding:2px 5px}
.lockNote{font-size:13px;color:#6b7385;margin:0 0 10px;display:flex;gap:8px;align-items:flex-start}
.lockNote i{color:var(--accent);margin-top:3px}

/* ---------- preview ---------- */
.pvHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pvHead h2{font-size:16px;margin:0;display:flex;align-items:center;gap:9px}
.pvHead h2 i{color:var(--accent)}
.modes{display:flex;gap:6px}
.chip{border:1px solid #dfe4ee;background:#fff;border-radius:999px;padding:6px 14px;
  font:700 12.5px inherit;font-family:inherit;color:#6b7385;cursor:pointer}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.previewBox{border:1px solid #dfe4ee;border-radius:12px;background:#fff;padding:26px;overflow-x:auto;min-height:150px}
.previewBox.dark{background:#1b1d22;border-color:#1b1d22}
.previewBox p.muted{margin:0;font-size:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 10px}

.lockBar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:13px 15px;
  border-radius:11px;background:color-mix(in srgb,var(--accent) 9%,#fff);border:1px solid color-mix(in srgb,var(--accent) 26%,#fff);font-size:13.5px}
.lockBar > i{color:var(--primary)}
.lockBar strong{display:block}
.lockBar span{color:#5b6478}
.lockBar .btn{margin-left:auto}

.warnBox{margin-top:14px;padding:12px 14px;border-radius:11px;background:#fff8e8;border:1px solid #f2d9a0;font-size:13px;color:#7a5a12}
.warnBox p{margin:0 0 6px}
.warnBox p:last-child{margin:0}

/* ---------- content sections ---------- */
.rules{padding:64px 0 8px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{border:1px solid #dfe4ee;border-radius:14px;padding:22px;background:#fff}
.card > i{font-size:19px;color:var(--accent);margin-bottom:12px;display:block}
.card p{margin:0;font-size:14.5px;color:#54596b;line-height:1.55}

.faq{padding:56px 0 10px}
.faq details{border:1px solid #dfe4ee;border-radius:12px;padding:16px 18px;margin-bottom:10px;background:#fff}
.faq summary{font-weight:700;cursor:pointer;font-size:15.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--accent);font-weight:700}
.faq details[open] summary::after{content:'\2212'}
.faq p{margin:12px 0 0;color:#54596b;font-size:15px;max-width:78ch}

/* ---------- pricing ---------- */
.priceGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px;max-width:840px}
@media (max-width:760px){.priceGrid{grid-template-columns:1fr}}
.plan{border:1px solid #dfe4ee;border-radius:16px;padding:28px;background:#fff}
.plan.best{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 20%,transparent)}
.plan .amt{font-size:40px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:6px 0 2px}
.plan .per{color:#6b7385;font-size:14px;margin:0 0 20px}
.plan ul{list-style:none;margin:0 0 24px;padding:0}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#3f4550;margin-bottom:10px}
.plan li i{color:#12855a;margin-top:4px;font-size:13px;flex:0 0 auto}
.plan li.no i{color:#c2c9d6}
.plan li.no{color:#6c727f}

/* ---------- template gallery ---------- */
/* Cards size to their own content. A grid row otherwise stretches every card to
   the tallest in it, which left the short designs with a quarter of the card
   empty and the button stranded at the bottom of the void. */
.galGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px;align-items:start}
@media (max-width:860px){.galGrid{grid-template-columns:1fr}}
.galItem{border:1px solid #e3e8f0;border-radius:16px;overflow:hidden;background:#fff;
  transition:border-color .18s,box-shadow .18s}
.galItem:hover{border-color:#cdd6e6;box-shadow:0 6px 24px rgba(18,23,43,.07)}
.galHead{display:flex;align-items:center;gap:10px;padding:16px 20px 14px}
.galHead h2{margin:0;font-size:16px;letter-spacing:-.01em}
/* The signature sits on its own inset panel, so it reads as the thing you are
   about to paste rather than as more page furniture. */
.galBody{margin:0 20px;padding:24px 20px;background:#fbfcfe;border:1px solid #eaeff7;
  border-radius:12px;overflow-x:auto}
.galFoot{padding:16px 20px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.galFoot p{margin:0;font-size:13.5px;line-height:1.5;color:#6b7385;flex:1;min-width:180px}
.galFoot .btn{flex:0 0 auto}

/* ---------- guides ---------- */
.article{max-width:74ch;padding:48px 0 0}
.article h2{margin-top:38px}
.article h3{margin-top:26px;font-size:17px}
.article p,.article li{color:#3f4550;font-size:16px}
.article ol,.article ul{padding-left:22px}
.article li{margin-bottom:9px}
.article code{background:#eef1f8;border-radius:5px;padding:1px 6px;font-size:13.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.callout{background:color-mix(in srgb,var(--accent) 8%,#fff);border:1px solid color-mix(in srgb,var(--accent) 24%,#fff);
  border-radius:11px;padding:14px 16px;margin:22px 0;font-size:14.5px;display:flex;gap:11px;align-items:flex-start}
.callout i{color:var(--primary);margin-top:3px}
.crumb{font-size:13px;color:#6b7385;padding-top:22px}
.crumb a{color:#6b7385}


/* ---------- Arabic and RTL ----------
   Two rules that matter more than the mirroring:

   1. NEVER letter-space Arabic. Arabic letters join; spacing them apart breaks
      the word into disconnected glyphs. Every tracked style below is neutralised
      under [lang="ar"], including the uppercase labels in the Formal design's
      grid, which are the worst offender.
   2. Numbers, code, email addresses and the rendered signature stay LTR inside
      an RTL page. A phone number reversed by the bidi algorithm is a wrong
      phone number. */

[dir="rtl"] .navwrap nav{margin-left:0;margin-right:auto}
[dir="rtl"] header.site nav a.cta{margin-left:0;margin-right:6px}
[dir="rtl"] .hero{text-align:center}
[dir="rtl"] .lede{margin-left:auto}
[dir="rtl"] .tplCard{text-align:right}
[dir="rtl"] .crumb,[dir="rtl"] .legal{text-align:right}
[dir="rtl"] .faq summary::after{float:left}
[dir="rtl"] .article ol,[dir="rtl"] .article ul{padding-left:0;padding-right:22px}
[dir="rtl"] .lockBar .btn{margin-left:0;margin-right:auto}
[dir="rtl"] .galFoot,[dir="rtl"] .actions,[dir="rtl"] .heroCta{flex-direction:row-reverse}
[dir="rtl"] .galFoot p{text-align:right}

/* Arabic must never be tracked. */
[lang="ar"],[lang="ar"] *{letter-spacing:normal !important}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{letter-spacing:normal !important}

/* Latin-shaped content keeps its own direction inside an Arabic page. */
[dir="rtl"] .hexIn,[dir="rtl"] input[type=email],[dir="rtl"] input[type=tel],
[dir="rtl"] input[type=url],[dir="rtl"] code,[dir="rtl"] .plan .amt{
  direction:ltr;text-align:left;unicode-bidi:plaintext}
[dir="rtl"] #preview,[dir="rtl"] .galBody,[dir="rtl"] .previewBox{direction:ltr;text-align:left}
[dir="rtl"] .langtog{margin-inline-start:0}

/* The official Rial sign must not drift to the right of the number in RTL.
   currency.css already isolates it; this only guards a nested override. */
[dir="rtl"] .bhd-omr{direction:ltr;unicode-bidi:isolate-override}

.langtog{display:inline-flex;align-items:center;gap:7px}