/* 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. */

@font-face{font-family:'Inter';src:url('https://fonts.bhd.om/Inter/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('https://fonts.bhd.om/Inter/Inter-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*{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 'Inter',-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}
.skip{position:absolute;left:-9999px}
/* 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{left:8px;top:8px;z-index:99;background:#fff;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 ---------- */
.galGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:30px}
@media (max-width:860px){.galGrid{grid-template-columns:1fr}}
.galItem{border:1px solid #dfe4ee;border-radius:14px;overflow:hidden;background:#fff}
.galHead{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid #eef1f6;flex-wrap:wrap}
.galHead h2{margin:0;font-size:17px}
.galBody{padding:26px 18px;background:#fff;overflow-x:auto}
.galFoot{padding:14px 18px;border-top:1px solid #eef1f6;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.galFoot p{margin:0;font-size:13.5px;color:#6b7385;flex:1;min-width:200px}

/* ---------- 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}