*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#fff;color:#14295d;line-height:1.55;font-variant-numeric:tabular-nums;overflow-x:clip;max-width:100%;padding-bottom:96px}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}

:root{
  --navy:#14295d;--navy-2:#0a1f44;--blue:#2979ff;--blue-2:#1e63d6;
  --ink:#1b2d5c;--txt-2:#5c6a88;--txt-3:#7c8aa8;--txt-4:#96a1b8;
  --line:#d8dfec;--line-2:#eef2f9;--bg-soft:#f7f9fc;--bg-soft-2:#fbfcfe;
  --accent:#22a84a;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.page-top{padding-top:32px;padding-bottom:56px}

/* HEADER */
.site-head{border-bottom:1px solid var(--navy);background:#fff;position:sticky;top:0;z-index:900}
.site-head__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 24px;min-height:64px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.brand__mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--navy);color:#fff;font-size:.9rem;flex:0 0 36px}
.brand__mark i{color:#22a84a}
.brand__name em{font-style:normal;color:var(--blue);font-size:.65rem;letter-spacing:.1em;margin-left:6px}
.site-nav{display:flex;flex-wrap:wrap;gap:0}
.site-nav a{padding:8px 14px;font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#4a5877;border-left:1px solid var(--line);display:inline-flex;align-items:center;gap:6px}
.site-nav a:first-child{border-left:none}
.site-nav a:hover{color:var(--navy);background:var(--line-2)}
.site-nav a i{font-size:.72rem;opacity:.7}
.nav-toggle{display:none;background:#fff;border:1px solid var(--line);padding:8px 10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:42px;height:40px}
.nav-toggle-bar{display:block;width:20px;height:2px;background:var(--navy);transition:transform .2s,opacity .2s}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-drawer-ad{display:none}

/* HERO */
.hero{padding:56px 24px 32px;text-align:center;max-width:780px;margin:0 auto}
.hero__pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--line-2);color:var(--blue);font-size:.72rem;font-weight:600;letter-spacing:.02em;margin-bottom:18px;border:1px solid #e0e9ff}
.hero__title{font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin-bottom:14px}
.hero__title em{font-style:normal;color:var(--blue)}
.hero__sub{color:var(--txt-2);font-size:1rem;max-width:600px;margin:0 auto}

/* LAYOUT */
.layout-wrap{max-width:1400px;margin:0 auto;padding:0 24px 40px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.layout-main{min-width:0;display:flex;flex-direction:column;gap:24px}
.layout-aside{position:sticky;top:80px;align-self:start;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 100px);overflow-y:auto}
.aside-widget{border:1px solid var(--line-2);background:var(--bg-soft-2);padding:16px 18px}
.aside-widget--ad{background:#fff;padding:0;overflow:hidden;min-height:250px}
.aside-widget-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.aside-widget-label i{color:var(--blue)}
.aside-links{display:flex;flex-direction:column;gap:1px;background:var(--line-2);margin:0 -18px -16px}
.aside-link{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;padding:11px 18px;font-size:.8rem;color:var(--navy);border:none;transition:background .12s}
.aside-link:hover{background:var(--bg-soft)}
.aside-link span{display:flex;align-items:center;gap:10px}
.aside-link span i{color:var(--txt-2);font-size:.85rem;width:16px;text-align:center}
.aside-link:hover span i{color:var(--blue)}
.aside-link .arrow{color:var(--txt-4);font-size:.7rem;transition:transform .12s}
.aside-link:hover .arrow{transform:translateX(3px);color:var(--blue)}

/* PANELS */
.panel{border:1px solid var(--line);background:#fff}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);flex-wrap:wrap}
.panel-head i{color:var(--blue);margin-right:8px}
.panel-head .muted{text-transform:none;letter-spacing:0;font-weight:400;font-size:.78rem;color:var(--txt-3)}
.panel-body{padding:24px 20px}
.muted{color:var(--txt-3);font-size:.85rem;line-height:1.6}
.muted strong{color:var(--navy);font-weight:700}

/* FORMS */
label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%;padding:12px 14px;font-size:.9rem;font-family:inherit;
  border:1px solid #c8d1e0;background:#fff;color:var(--navy);
  outline:none;transition:border-color .12s;resize:vertical;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:100px;line-height:1.55;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.85rem}
select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2314295d' stroke-width='1.5' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 14px center}

.qrg-form{display:flex;flex-direction:column;gap:0}
.qrg-form label{margin-top:16px}
.qrg-form label:first-child{margin-top:0}
.qrg-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.qrg-row--btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.qrg-col{display:flex;flex-direction:column}
.qrg-logo-preview{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;background:var(--bg-soft);border:1px solid var(--line-2)}
.qrg-logo-preview img{border:1px solid var(--line);background:#fff;padding:4px;max-width:60px;max-height:60px}
.qrg-output{margin-top:24px;text-align:center;padding-top:24px;border-top:1px solid var(--line-2)}
.qrg-canvas-wrap{display:inline-block;padding:16px;background:#fff;border:1px solid var(--line);margin-bottom:16px}
.qrg-canvas-wrap canvas{display:block;max-width:100%;height:auto}
.qrg-download{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid;cursor:pointer;transition:.12s;text-decoration:none;white-space:nowrap}
.btn--sm{padding:8px 14px;font-size:.65rem}
.btn--brand{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--brand:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn--accent{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--accent:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn--ghost{background:#fff;color:var(--navy);border-color:#c8d1e0}
.btn--ghost:hover{background:var(--bg-soft);border-color:var(--navy)}

/* AD WRAPS */
.ad-wrap{padding:16px 20px;background:var(--bg-soft-2);text-align:center;min-height:100px}
.ad-wrap--in-content{margin:0;border-top:1px solid var(--line-2)}
.ad-wrap [data-ww-ad],.layout-aside [data-ww-ad]{display:block;max-width:970px;margin:0 auto;min-height:60px}

/* ABOUT */
.about-hero{text-align:center;max-width:760px;margin:0 auto}
.about-hero .lead{font-size:1.05rem;line-height:1.7;color:var(--navy);margin-bottom:16px}
.about-hero p{margin-bottom:14px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.feature{background:#fff;padding:24px 22px;transition:background .15s}
.feature:hover{background:var(--bg-soft)}
.feature i{font-size:1.4rem;color:var(--blue);margin-bottom:12px;display:block}
.feature h4{font-size:.95rem;font-weight:700;margin:0 0 8px;color:var(--navy)}
.feature p{font-size:.85rem;color:var(--txt-2);margin:0;line-height:1.55}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.service{display:block;background:#fff;padding:22px 20px;text-decoration:none;color:inherit;transition:background .15s}
.service:hover{background:var(--bg-soft)}
.service i{font-size:1.4rem;color:var(--blue);margin-bottom:10px;display:block}
.service h4{font-size:.9rem;font-weight:700;margin:0 0 6px;color:var(--navy)}
.service .price{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.35rem;font-weight:700;color:var(--accent);margin:6px 0;line-height:1}
.service .price small{font-size:.7rem;font-weight:400;color:var(--txt-2);margin-left:2px}
.service p{font-size:.78rem;color:var(--txt-2);margin:0;line-height:1.5}
.callout{border:1px solid var(--navy);background:var(--bg-soft-2);padding:24px;text-align:center;margin-top:20px}
.callout p{margin:0 0 16px;color:var(--navy);font-size:.95rem}
.callout p strong{color:var(--navy);font-weight:700}
.callout .btn{margin:0 auto}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;padding:0 24px 80px;max-width:1180px;margin:0 auto}
.contact-info h3{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.contact-info h3 i{color:var(--blue)}
.contact-list{list-style:none;margin:0 0 20px;padding:0}
.contact-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:.9rem;color:var(--navy)}
.contact-list li:last-child{border-bottom:none}
.contact-list i{color:var(--blue);width:18px;text-align:center;flex:0 0 auto}
.contact-list a{color:var(--navy);border-bottom:1px solid transparent}
.contact-list a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.contact-form-wrap{background:#fff;border:1px solid var(--line);padding:24px}
.contact-msg{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:18px;font-size:.85rem;border:1px solid}
.contact-msg--ok{background:#eaf9ee;border-color:#b9e5c4;color:#1a8a3c}
.contact-msg--err{background:#fef2f2;border-color:#fecaca;color:#c82333}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form label{display:flex;flex-direction:column;gap:6px}
.contact-form .label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);margin:0}
.contact-form .label b{color:var(--blue)}
.contact-form textarea{min-height:150px;font-family:inherit;font-size:.9rem}
.contact-form .honeypot{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;height:0;width:0}
.contact-form-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.contact-form-footer .muted{font-size:.78rem;flex:1;min-width:200px}

/* LEGAL */
.legal-body{max-width:820px;margin:0 auto;padding:56px 24px 80px}
.legal-body h1{font-size:2rem;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin:0 0 16px}
.legal-body .lead{font-size:1rem;color:var(--navy);margin-bottom:24px;line-height:1.65}
.legal-body h2{font-size:1.05rem;font-weight:700;color:var(--navy);margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line-2);display:flex;align-items:center;gap:10px}
.legal-body h2 i{color:var(--blue);font-size:.95rem}
.legal-body h3{font-size:.85rem;font-weight:700;color:var(--blue);text-transform:none;margin:20px 0 8px}
.legal-body p{line-height:1.7;color:var(--navy);font-size:.9rem;margin-bottom:14px}
.legal-body ul{margin:0 0 16px;padding-left:22px}
.legal-body li{line-height:1.65;color:var(--navy);font-size:.9rem;margin:6px 0}
.legal-body a{color:var(--blue);border-bottom:1px solid rgba(41,121,255,.4)}
.legal-body code{background:var(--bg-soft);padding:2px 6px;font-size:.85em;color:var(--navy);border:1px solid var(--line-2)}
.legal-foot{color:var(--txt-3);font-size:.78rem;margin-top:32px;padding-top:16px;border-top:1px solid var(--line-2)}
.legal-toc{background:var(--bg-soft);border:1px solid var(--line);padding:20px 24px;margin-bottom:32px}
.legal-toc h3{margin:0 0 12px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);font-weight:700;display:flex;align-items:center;gap:8px}
.legal-toc h3 i{color:var(--blue)}
.legal-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.legal-toc a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1px solid var(--line);font-size:.75rem;color:var(--blue);text-decoration:none;transition:.12s}
.legal-toc a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.legal-toc a i{font-size:.7rem}

/* PAGE (generic) */
.page{padding:56px 24px 40px;max-width:780px;margin:0 auto}
.page h1{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.page .lede{font-size:1.04rem;color:var(--navy)}
.notfound{text-align:center;padding-top:80px}
.notfound__icon{font-size:3rem;color:var(--blue);margin-bottom:16px}
.notfound .btn{margin-top:20px}

/* FOOTER */
.site-foot{border-top:1px solid var(--line);padding:20px 0;margin-top:24px}
.site-foot__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--txt-2)}
.site-foot a{color:var(--txt-2)}
.site-foot a:hover{color:var(--navy)}

/* STICKY-BOTTOM AD */
.ad-wrap-sticky-bottom{position:fixed;left:0;right:0;bottom:0;background:#0f1f42;box-shadow:0 -6px 24px rgba(0,0,0,.25);z-index:9990;min-height:64px;padding:0 16px;box-sizing:border-box}
.ert-sheet-header{display:none}
@media (max-width:640px){
  .ad-wrap-sticky-bottom{transform:translateY(100%);transition:transform .35s ease,border-radius .35s ease;border-radius:14px 14px 0 0;padding:0 14px}
  .ad-wrap-sticky-bottom:not([hidden]){transform:translateY(0)}
  .ad-wrap-sticky-bottom.ad-expanded{padding:12px 16px 18px}
  .ad-wrap-sticky-bottom.ad-expanded .ert-sheet-header{display:flex;align-items:center;gap:8px;padding:0 0 10px;border-bottom:1px solid #1b2d5c;margin-bottom:12px;color:#fff;font-size:.72rem}
  .ert-sheet-dot{width:6px;height:6px;background:#22a84a;flex:0 0 auto;animation:pulseAdmin 1.4s ease-in-out infinite}
  .ert-sheet-text{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e2e8f0}
  .ert-sheet-min{width:34px;height:34px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid #3f5688;color:#c8d1e0;flex:0 0 auto}
  .ert-sheet-min:hover{background:#1b2d5c;color:#fff}
}

@keyframes pulseAdmin{0%,100%{opacity:1}50%{opacity:.35}}

/* sr-only */
.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}

/* MOBILE */
@media (max-width:1024px){
  .layout-wrap{grid-template-columns:1fr;gap:24px;padding:0 16px 40px}
  .layout-aside{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .aside-widget--ad{grid-column:1/-1}
}
@media (max-width:800px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);
    background:#fff;border-left:1px solid var(--navy);
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;
    padding:68px 0 0;transform:translateX(100%);
    transition:transform .22s ease;z-index:1100;overflow-y:auto;
    box-shadow:-8px 0 24px rgba(20,41,93,.10);gap:0;
  }
  body.nav-open .site-nav{transform:translateX(0)}
  .site-nav a{padding:14px 22px;border-left:none;border-bottom:1px solid var(--line-2);font-size:.82rem;min-height:52px;display:flex;align-items:center;gap:10px}
  .site-nav a:last-of-type{border-bottom:none}
  .nav-drawer-ad{display:block;margin:20px 0 0;padding:18px 22px 24px;border-top:1px solid var(--line-2)}
  .nav-drawer-ad:empty{display:none}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .hero{padding:36px 16px 20px}
  .hero__title{font-size:1.5rem}
  .contact-grid{grid-template-columns:1fr;gap:24px;padding:0 16px 48px}
  .legal-body{padding:32px 16px 60px}
  .legal-body h1{font-size:1.4rem}
  .legal-toc{padding:16px 18px}
  .legal-toc ul{flex-direction:column}
  .legal-toc a{width:100%}
  .qrg-row{grid-template-columns:1fr;gap:0}
  .panel-head{padding:12px 14px;font-size:.62rem}
  .panel-body{padding:18px 14px}
  .page{padding:36px 16px 60px}
  .page h1{font-size:1.5rem}
  .feature{padding:20px 18px}
  .service{padding:18px 16px}
  .contact-form-wrap{padding:18px}
  .contact-form-footer{flex-direction:column;align-items:stretch}
  .contact-form-footer .btn{justify-content:center}
}

/* ============================================================
   v3 — 3-column layout (ad · tool · ad) — 25% / 50% / 25%
   ============================================================ */
.layout-wrap--3col{
  grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
  max-width:1600px;
  gap:24px;
}
.layout-wrap--3col .layout-main{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}
.layout-aside--left,
.layout-aside--right{
  position:sticky;
  top:80px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:20px;
  max-height:calc(100vh - 100px);
  overflow-y:auto;
}
.layout-aside--left .aside-widget--ad,
.layout-aside--right .aside-widget--ad{
  min-height:600px;
}
.layout-aside--left [data-ww-ad],
.layout-aside--right [data-ww-ad]{
  max-width:100%;
}

/* stack on tablet: two columns */
@media (max-width:1200px){
  .layout-wrap--3col{
    grid-template-columns:minmax(0,1fr) 300px;
    max-width:1200px;
  }
  .layout-aside--left{display:none}
  .layout-aside--right{position:sticky;top:80px;max-height:none}
  .layout-aside--right .aside-widget--ad{min-height:400px}
}

/* stack on mobile: single column, no asides */
@media (max-width:900px){
  .layout-wrap--3col{
    grid-template-columns:1fr;
    max-width:100%;
    padding:0 16px 40px;
  }
  .layout-aside--left,
  .layout-aside--right{
    display:none;
  }
}

/* ── v4: custom file input ── */
input[type=file]{
  padding:0;border:none;background:transparent;
  font-size:0;color:transparent;cursor:pointer;width:100%;
  display:block;line-height:0;
}
input[type=file]::file-selector-button{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:#fff;color:#14295d;
  border:1px solid #c8d1e0;cursor:pointer;
  transition:.12s;font-family:inherit;margin-right:14px;
}
input[type=file]::file-selector-button:hover{
  background:#14295d;color:#fff;border-color:#14295d;
}
input[type=file]:focus{outline:2px solid #2979ff;outline-offset:2px}
input[type=file]::-webkit-file-upload-button{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:#fff;color:#14295d;
  border:1px solid #c8d1e0;cursor:pointer;
  font-family:inherit;margin-right:14px;
}

/* ── v4: make sure left/right slots have height at boot ── */
.aside-widget--ad{min-height:280px}
.aside-widget--ad > [data-ww-ad]{min-height:250px;display:block}
.aside-widget--ad > [data-ww-ad] > .ww-ad-root{min-height:250px}

/* ── v4: sticky bottom hidden until JS marks it visible ── */
.ad-wrap-sticky-bottom:not(.ad-visible){display:none !important}


/* ── v6: thin scrollbars everywhere ── */
html,
body,
.layout-aside,
.layout-aside--left,
.layout-aside--right,
.admin-main,
.preview-scroll,
.admin-table-wrap,
textarea,
select{
  scrollbar-width:thin;                     /* Firefox */
  scrollbar-color:#c8d1e0 transparent;      /* thumb / track */
}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c8d1e0;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#96a1b8}
::-webkit-scrollbar-corner{background:transparent}

/* hide scrollbar on hover-scroll only for asides when idle */
.layout-aside::-webkit-scrollbar-thumb{background:#d8dfec}
.layout-aside:hover::-webkit-scrollbar-thumb{background:#96a1b8}

/* ── v9: brand logo image ── */
.brand{display:flex;align-items:center;gap:0;padding:0;line-height:0}
.brand__img{height:48px;width:auto;display:block;transition:height .15s ease}
.brand:hover .brand__img{opacity:.85}
@media (max-width:720px){ .brand__img{height:40px} }
@media (max-width:520px){ .brand__img{height:34px} }

/* ── QR design picker ── */
.qrg-style-picker{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eef2f9}
.qrg-style-label{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5c6a88;margin-bottom:12px}
.qrg-style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;max-width:560px;margin:0 auto}
.qrg-style-tile{cursor:pointer;border:2px solid #e0e7f1;background:#fff;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:.15s;position:relative}
.qrg-style-tile:hover{border-color:#2979ff;transform:translateY(-1px)}
.qrg-style-tile.is-active{border-color:#2979ff;background:#f0f6ff;box-shadow:0 0 0 3px rgba(41,121,255,.12)}
.qrg-style-tile canvas{display:block;width:56px;height:56px;image-rendering:pixelated}
.qrg-style-tile span{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5c6a88;text-align:center;line-height:1.2}
.qrg-style-tile.is-active span{color:#2979ff}

/* ── v12: 6 QR style tiles, 2-col × 3-row ── */
.qrg-styles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:24px 0 0;
  padding-top:24px;
  border-top:1px solid #eef2f9;
}
@media (max-width:720px){ .qrg-styles{grid-template-columns:1fr;gap:16px} }

.qrg-tile{
  border:2px solid #e0e7f1;
  background:#fff;
  padding:16px 14px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transition:.15s;
}
.qrg-tile:hover{border-color:#2979ff;box-shadow:0 4px 12px rgba(41,121,255,.08)}
.qrg-tile__label{
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#14295d;display:flex;align-items:center;gap:6px;
}
.qrg-tile__label i{color:#2979ff;font-size:.7rem}
.qrg-tile__preview{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:200px;
  background:#f7f9fc;
  padding:14px;
  border:1px solid #eef2f9;
}
.qrg-tile__preview canvas{display:block;max-width:100%;height:auto}
.qrg-tile__actions{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;
}
.qrg-tile__actions .btn{padding:8px 10px;font-size:.62rem}

/* ── v13: QR tiles fill their area, no extra padding ── */
.qrg-tile__preview{
  padding:0 !important;
  background:#ffffff !important;
  border:none !important;
  min-height:0 !important;
  width:100% !important;
  display:block !important;
}
.qrg-tile__preview canvas{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
}
/* tighten the tile overall */
.qrg-tile{
  padding:12px 10px 10px !important;
  gap:8px !important;
}
.qrg-tile__label{
  margin-bottom:2px;
}

/* ── v15: prominent logo upload zone ── */
.qrg-logo-zone{
  margin-top:8px;
  border:1px dashed #c8d1e0;
  background:#fbfcfe;
  transition:.15s;
}
.qrg-logo-zone:hover{border-color:#2979ff;background:#f0f6ff}
.qrg-logo-zone.is-drag{border-color:#2979ff;background:#e6f0ff;box-shadow:inset 0 0 0 3px rgba(41,121,255,.08)}

.qrg-logo-zone__empty{
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.qrg-logo-zone__empty > i{
  font-size:1.6rem;
  color:#2979ff;
  margin-bottom:2px;
}
.qrg-logo-zone__empty > strong{
  font-size:.9rem;
  font-weight:700;
  color:#14295d;
  letter-spacing:-.01em;
}
.qrg-logo-zone__empty > span{
  font-size:.74rem;
  color:#5c6a88;
  line-height:1.4;
  max-width:340px;
}
.qrg-logo-zone__empty > span b{color:#14295d;font-weight:700}
.qrg-logo-zone__empty .btn{margin-top:8px}

.qrg-logo-preview{
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
}
.qrg-logo-preview img{
  width:56px;height:56px;
  object-fit:contain;
  border:1px solid #d8dfec;
  background:#fff;
  padding:4px;
  flex:0 0 56px;
}
.qrg-logo-preview__meta{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.qrg-logo-preview__meta strong{
  font-size:.82rem;color:#14295d;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qrg-logo-preview__meta span{
  font-size:.68rem;color:#7c8aa8;
  font-family:ui-monospace,Menlo,monospace;
}
.qrg-logo-preview .btn{flex:0 0 auto}

@media (max-width:520px){
  .qrg-logo-zone__empty{padding:18px 14px}
  .qrg-logo-zone__empty > i{font-size:1.4rem}
  .qrg-logo-preview{padding:12px 14px;gap:10px}
  .qrg-logo-preview img{width:44px;height:44px;flex:0 0 44px}
}

/* ============================================================
   MOBILE RESPONSIVE PASS
   ============================================================ */

/* ── safe area (iOS notch, home bar) ── */
:root{
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* ── kill horizontal scroll, no scroll-container breakage ── */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;width:100%;padding-bottom:calc(90px + var(--safe-b))}
img,video,canvas,svg{max-width:100%;height:auto}

/* ============================================================
   TABLET — ≤1024px
   ============================================================ */
@media (max-width:1024px){
  .layout-wrap{
    grid-template-columns:1fr !important;
    gap:20px;
    padding:0 16px 40px;
  }
  .layout-aside--left,
  .layout-aside--right{
    position:static !important;
    max-height:none !important;
    overflow:visible !important;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
  }
  .layout-aside--left{ display:none; }  /* ads move to bottom on tablet */
  .layout-aside--right{
    grid-template-columns:1fr;
  }
  .layout-aside--right .aside-widget--ad{ min-height:280px; }
}

/* ============================================================
   MOBILE — ≤720px
   ============================================================ */
@media (max-width:720px){

  /* ── HEADER ── */
  .site-head__inner{
    padding:6px 14px;
    min-height:56px;
    gap:8px;
    flex-wrap:nowrap;
  }
  .brand__img{height:38px;width:auto}
  .nav-toggle{display:inline-flex;flex:0 0 auto;width:42px;height:38px;padding:6px 8px}
  .nav-toggle-bar{width:18px;height:2px}

  /* ── NAV DRAWER ── */
  .site-nav{
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(300px,86vw);
    background:#fff;
    border-left:1px solid #14295d;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0;
    padding:64px 0 0;
    margin:0;
    transform:translateX(100%);
    transition:transform .22s ease;
    z-index:1100;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:-8px 0 24px rgba(20,41,93,.10);
  }
  body.nav-open .site-nav{transform:translateX(0)}
  .site-nav a{
    padding:14px 22px;
    border-left:none;
    border-bottom:1px solid #eef2f9;
    font-size:.82rem;
    min-height:52px;
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    box-sizing:border-box;
  }
  .site-nav a:last-of-type{border-bottom:none}
  .site-nav a i{width:18px;color:#5c6a88;font-size:.9rem;text-align:center}
  .nav-drawer-ad{
    display:block;
    flex:0 0 auto;
    width:100%;
    margin:20px 0 0;
    padding:18px 22px 24px;
    border-top:1px solid #eef2f9;
    box-sizing:border-box;
  }
  .nav-drawer-ad:empty{display:none}

  /* ── HERO ── */
  .hero{padding:28px 16px 16px}
  .hero__pill{font-size:.6rem;padding:5px 10px;margin-bottom:12px}
  .hero__title{font-size:1.4rem;line-height:1.15;letter-spacing:-.02em}
  .hero__title br{display:none}
  .hero__sub{font-size:.85rem;line-height:1.5;padding:0 4px}

  /* ── LAYOUT ── */
  .layout-wrap{gap:16px;padding:0 12px 24px}
  .layout-aside--right{display:none}  /* ads out of the way on small screens */

  /* ── PANELS ── */
  .panel-head{padding:12px 14px;font-size:.6rem;gap:8px}
  .panel-head i{margin-right:4px}
  .panel-head .muted{font-size:.68rem}
  .panel-body{padding:18px 16px}

  /* ── FORM FIELDS ── */
  label{font-size:.62rem;margin-bottom:5px}
  input[type=text],
  input[type=email],
  input[type=password],
  select,
  textarea{
    padding:12px 12px;
    font-size:16px;         /* prevents iOS zoom-on-focus */
    border-radius:0;
  }
  textarea{min-height:90px}

  /* ── QR TOOL FORM ── */
  .qrg-form label{margin-top:14px}
  .qrg-row{grid-template-columns:1fr;gap:14px}
  .qrg-row--btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .qrg-row--btns .btn{width:100%}

  /* ── LOGO ZONE ── */
  .qrg-logo-zone__empty{padding:18px 14px}
  .qrg-logo-zone__empty > i{font-size:1.5rem}
  .qrg-logo-zone__empty > strong{font-size:.82rem}
  .qrg-logo-zone__empty > span{font-size:.7rem;max-width:260px}
  .qrg-logo-preview{padding:12px 14px;gap:10px}
  .qrg-logo-preview img{width:44px;height:44px;flex:0 0 44px}
  .qrg-logo-preview__meta strong{font-size:.78rem}
  .qrg-logo-preview__meta span{font-size:.62rem}

  /* ── QR OUTPUT / DESIGN TILES ── */
  .qrg-output{margin-top:20px;padding-top:20px}
  .qrg-styles{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:18px;
    padding-top:18px;
  }
  .qrg-tile{padding:12px 12px 10px;gap:10px}
  .qrg-tile__label{font-size:.6rem}
  .qrg-tile__preview{min-height:0}
  .qrg-tile__actions{grid-template-columns:1fr 1fr;gap:6px}
  .qrg-tile__actions .btn{padding:9px 8px;font-size:.6rem;min-height:38px}

  /* ── BUTTONS ── */
  .btn{padding:11px 16px;font-size:.68rem}
  .btn--sm{padding:8px 12px;font-size:.62rem}

  /* ── ASIDE / EXPLORE (when it survives on tablet) ── */
  .aside-widget{padding:14px 16px}
  .aside-link{padding:12px 16px;font-size:.78rem;min-height:48px}
  .aside-links{margin:0 -16px -14px}

  /* ── ABOUT / LEGAL / CONTACT ── */
  .container{padding:0 14px}
  .page{padding:28px 14px 40px}
  .page h1{font-size:1.4rem}
  .page .lede{font-size:.9rem}

  .about-hero{padding:0}
  .about-hero .lead{font-size:.92rem}
  .about-hero p{font-size:.85rem}
  .features,.services{grid-template-columns:1fr}
  .feature,.service{padding:18px 16px}
  .feature i,.service i{font-size:1.25rem}
  .feature h4,.service h4{font-size:.9rem}
  .feature p,.service p{font-size:.8rem}
  .service .price{font-size:1.15rem}
  .callout{padding:20px 16px}
  .callout p{font-size:.86rem}

  .contact-grid{grid-template-columns:1fr !important;gap:20px;padding:0 14px 40px}
  .contact-info h3{font-size:.62rem}
  .contact-list li{font-size:.85rem;padding:10px 0}
  .contact-form-wrap{padding:18px 16px}
  .contact-form label{gap:5px}
  .contact-form textarea{min-height:130px;font-size:16px}
  .contact-form-footer{flex-direction:column;align-items:stretch;gap:10px}
  .contact-form-footer .muted{font-size:.72rem}
  .contact-form-footer .btn{width:100%;justify-content:center}

  .legal-body{padding:28px 16px 48px}
  .legal-body h1{font-size:1.4rem}
  .legal-body .lead{font-size:.88rem;line-height:1.6}
  .legal-body h2{font-size:.95rem;margin-top:24px}
  .legal-body h3{font-size:.85rem}
  .legal-body p,.legal-body li{font-size:.85rem;line-height:1.65}
  .legal-toc{padding:14px 16px}
  .legal-toc h3{font-size:.62rem}
  .legal-toc ul{flex-direction:column;gap:6px}
  .legal-toc a{width:100%;justify-content:flex-start;font-size:.75rem;padding:10px 12px}
  .legal-foot{font-size:.72rem}

  /* ── FOOTER ── */
  .site-foot{padding:18px 0;margin-top:16px}
  .site-foot__inner{
    flex-direction:column;
    text-align:center;
    gap:6px;
    font-size:.72rem;
    line-height:1.5;
    padding:0 14px;
  }

  /* ── STICKY BOTTOM AD ── */
  .ad-wrap-sticky-bottom{
    padding:0 14px;
    min-height:60px;
  }
  .ad-wrap-sticky-bottom.ad-expanded{padding:0 14px 16px}
  body{padding-bottom:calc(80px + var(--safe-b)) !important}

  /* ── IN-CONTENT AD ── */
  .ad-wrap{padding:14px 12px;min-height:80px}
  .ad-wrap [data-ww-ad]{min-height:60px}
}

/* ============================================================
   SMALL PHONE — ≤520px
   ============================================================ */
@media (max-width:520px){
  .site-head__inner{padding:4px 12px;min-height:52px}
  .brand__img{height:32px}
  .nav-toggle{width:38px;height:36px;padding:5px 7px}
  .nav-toggle-bar{width:16px}

  .hero{padding:22px 14px 12px}
  .hero__title{font-size:1.2rem}
  .hero__sub{font-size:.78rem}

  .layout-wrap{padding:0 10px 20px;gap:12px}

  .panel-head{padding:10px 12px;font-size:.58rem}
  .panel-body{padding:16px 12px}

  .qrg-row--btns{grid-template-columns:1fr}
  .qrg-tile__actions{grid-template-columns:1fr 1fr}
  .qrg-tile__actions .btn{padding:8px 6px;font-size:.55rem}

  .contact-form-wrap{padding:16px 12px}
  .legal-body{padding:24px 12px 40px}

  .feature,.service{padding:16px 14px}
  .callout{padding:18px 14px}
}

/* ============================================================
   VERY SMALL — ≤380px
   ============================================================ */
@media (max-width:380px){
  .brand__img{height:28px}
  .hero__title{font-size:1.1rem}
  .hero__sub{font-size:.72rem}
  .qrg-tile__actions{grid-template-columns:1fr}
  .qrg-row--btns{grid-template-columns:1fr}
  .btn{padding:10px 12px;font-size:.62rem}
}

/* ============================================================
   TOUCH-FRIENDLY HIT ZONES
   ============================================================ */
@media (hover:none){
  a,button,.tab,.qrg-tile,.qrg-tile__actions .btn,.site-nav a,.aside-link{min-height:44px}
  .qrg-tile__actions .btn{min-height:40px}
}

/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */
@media (max-height:500px) and (orientation:landscape){
  .hero{padding:14px 20px 8px}
  .hero__title{font-size:1.15rem}
  .hero__title br{display:inline}
  .site-head__inner{min-height:48px;padding:4px 14px}
  .brand__img{height:28px}
  .layout-wrap{padding:0 20px 20px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── v18: header — bigger logo, less padding, taller bar ── */
.site-head__inner{
  padding:2px 20px !important;
  min-height:72px !important;
  gap:16px !important;
}
.brand__img{
  height:56px !important;
  width:auto !important;
  display:block !important;
}
@media (max-width:720px){
  .site-head__inner{
    padding:2px 12px !important;
    min-height:64px !important;
    gap:8px !important;
  }
  .brand__img{height:48px !important}
}
@media (max-width:520px){
  .site-head__inner{padding:0 10px !important;min-height:60px !important}
  .brand__img{height:44px !important}
}

/* ── v18: hamburger / X always above drawer ── */
@media (max-width:800px){
  .nav-toggle{
    position:fixed !important;
    top:14px !important;
    right:14px !important;
    z-index:1300 !important;
    width:44px !important;
    height:44px !important;
    padding:8px 10px !important;
    background:#fff !important;
    border:1px solid #c8d1e0 !important;
    display:inline-flex !important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    box-shadow:0 2px 8px rgba(20,41,93,.08);
  }
  body.nav-open .nav-toggle{
    background:#14295d !important;
    border-color:#14295d !important;
  }
  body.nav-open .nav-toggle-bar{
    background:#fff !important;
  }
  .site-head__inner{
    padding-right:68px !important;   /* reserve space for the fixed button */
  }
}
@media (max-width:520px){
  .nav-toggle{top:10px !important;right:10px !important;width:42px !important;height:42px !important}
}

/* ── v18: drawer ad styling ── */
.nav-drawer-ad{
  display:none;
}
@media (max-width:800px){
  body.nav-open .nav-drawer-ad{
    display:block !important;
    margin:20px 0 0 !important;
    padding:18px 22px 24px !important;
    border-top:1px solid #eef2f9 !important;
    background:#fff !important;
    box-sizing:border-box !important;
  }
  .nav-drawer-ad-label{
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#7c8aa8;
    margin-bottom:12px;
    display:flex;align-items:center;gap:8px;
  }
  .nav-drawer-ad-label i{color:#2979ff}
  .nav-drawer-ad .ww-ad-creative{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    text-decoration:none;color:inherit;
    border:1px solid #eef2f9;
    background:#fff;
    overflow:hidden;
  }
  .nav-drawer-ad .ww-ad-media-wrap{
    width:100% !important;
    max-height:150px;
    overflow:hidden;
    background:#0f1f42;
  }
  .nav-drawer-ad .ww-ad-media-wrap img{
    display:block;width:100%;height:auto;
    max-height:150px;object-fit:cover;
  }
  .nav-drawer-ad .ww-ad-body{
    padding:12px 14px;display:flex;flex-direction:column;gap:6px;
  }
  .nav-drawer-ad .ww-ad-title{
    font-weight:700;font-size:.88rem;color:#14295d;line-height:1.3;margin:0;
  }
  .nav-drawer-ad .ww-ad-price{
    font-family:ui-monospace,Menlo,monospace;
    font-size:1rem;font-weight:700;color:#2979ff;margin:0;
  }
  .nav-drawer-ad .ww-ad-price small{font-size:.68rem;color:#5c6a88;font-weight:400;margin-left:3px}
  .nav-drawer-ad .ww-ad-desc{font-size:.76rem;color:#5c6a88;line-height:1.45;margin:0}
  .nav-drawer-ad .ww-ad-cta{
    align-self:flex-start;margin-top:6px;
    background:#2979ff;color:#fff;padding:8px 14px;
    font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;
  }
}

/* ============================================================
   v19 — mobile typography scale bump
   Everything that was too small gets +1 to +3px on mobile.
   ============================================================ */

@media (max-width:720px){
  /* body baseline */
  body{font-size:16px;line-height:1.6}

  /* header / nav */
  .site-nav a{font-size:.88rem !important}
  .site-nav a i{font-size:1rem !important}

  /* hero */
  .hero__pill{font-size:.68rem !important;padding:6px 12px !important}
  .hero__title{font-size:1.55rem !important;line-height:1.18 !important}
  .hero__sub{font-size:.94rem !important;line-height:1.55 !important}

  /* panel heads */
  .panel-head{font-size:.7rem !important;padding:14px 16px !important}
  .panel-head .muted{font-size:.76rem !important}
  .panel-head i{font-size:.85rem}

  /* form labels */
  label{font-size:.72rem !important}
  input[type=text],input[type=email],input[type=password],select,textarea{
    font-size:16px !important;
    padding:13px 14px !important;
  }
  textarea{font-size:15px !important}

  /* buttons */
  .btn{font-size:.76rem !important;padding:13px 18px !important}
  .btn--sm{font-size:.7rem !important;padding:10px 14px !important}
  .btn i{font-size:.85rem}

  /* logo upload zone */
  .qrg-logo-zone__empty > i{font-size:1.7rem !important}
  .qrg-logo-zone__empty > strong{font-size:.92rem !important}
  .qrg-logo-zone__empty > span{font-size:.78rem !important;max-width:280px}
  .qrg-logo-zone__empty .btn{font-size:.72rem !important;padding:11px 16px !important}
  .qrg-logo-preview__meta strong{font-size:.88rem !important}
  .qrg-logo-preview__meta span{font-size:.72rem !important}

  /* design tiles */
  .qrg-tile__label{font-size:.7rem !important}
  .qrg-tile__label i{font-size:.78rem !important}
  .qrg-tile__actions .btn{font-size:.68rem !important;padding:11px 10px !important}

  /* aside / explore */
  .aside-widget-label{font-size:.68rem !important}
  .aside-link{font-size:.88rem !important;padding:14px 18px !important;min-height:52px !important}
  .aside-link span i{font-size:.95rem !important}
  .aside-link .arrow{font-size:.78rem !important}

  /* about page */
  .page h1{font-size:1.55rem !important}
  .page .lede{font-size:.98rem !important}
  .about-hero .lead{font-size:1rem !important;line-height:1.7 !important}
  .about-hero p{font-size:.92rem !important;line-height:1.65 !important}
  .feature{padding:20px 18px !important}
  .feature i{font-size:1.4rem !important}
  .feature h4{font-size:1rem !important}
  .feature p{font-size:.88rem !important;line-height:1.55 !important}
  .service{padding:20px 18px !important}
  .service i{font-size:1.4rem !important}
  .service h4{font-size:.98rem !important}
  .service .price{font-size:1.3rem !important}
  .service p{font-size:.85rem !important}
  .callout{padding:22px 18px !important}
  .callout p{font-size:.94rem !important;line-height:1.6 !important}

  /* contact */
  .contact-info h3{font-size:.7rem !important}
  .contact-list li{font-size:.92rem !important;padding:12px 0 !important}
  .contact-list i{font-size:1rem !important}
  .contact-form-wrap{padding:20px 16px !important}
  .contact-form .label{font-size:.7rem !important}
  .contact-form textarea{min-height:150px !important}
  .contact-msg{font-size:.88rem !important;padding:14px 16px !important}
  .contact-form-footer .muted{font-size:.8rem !important}

  /* legal */
  .legal-body h1{font-size:1.55rem !important}
  .legal-body .lead{font-size:.96rem !important;line-height:1.65 !important}
  .legal-body h2{font-size:1.05rem !important}
  .legal-body h2 i{font-size:.92rem}
  .legal-body h3{font-size:.92rem !important}
  .legal-body p,.legal-body li{font-size:.92rem !important;line-height:1.7 !important}
  .legal-toc h3{font-size:.68rem !important}
  .legal-toc a{font-size:.82rem !important;padding:12px 14px !important}
  .legal-foot{font-size:.78rem !important}

  /* footer */
  .site-foot__inner{font-size:.8rem !important;line-height:1.55 !important}

  /* 404 */
  .notfound h1{font-size:1.5rem !important}
  .notfound .lede{font-size:.95rem !important}
}

/* very small phones — one more notch */
@media (max-width:520px){
  .hero__title{font-size:1.42rem !important}
  .hero__sub{font-size:.9rem !important}
  .panel-head{font-size:.66rem !important}
  .btn{font-size:.72rem !important;padding:12px 16px !important}
  .qrg-tile__label{font-size:.66rem !important}
  .qrg-tile__actions .btn{font-size:.64rem !important}
  .aside-link{font-size:.84rem !important}
  .page h1,.legal-body h1,.notfound h1{font-size:1.42rem !important}
  .feature h4,.service h4{font-size:.94rem !important}
  .legal-body p,.legal-body li{font-size:.88rem !important}
}

/* tiny phones — keep readable, don't shrink further */
@media (max-width:380px){
  body{font-size:15px}
  .hero__title{font-size:1.32rem !important}
  .hero__sub{font-size:.85rem !important}
}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:9999;width:auto;height:auto;padding:10px 16px;background:#14295d;color:#fff;text-decoration:none}

/* ============================================================
   FIX: .legal-body combined with .wrap was losing its padding
   because .wrap appears later in this file with equal specificity.
   Higher-specificity selector wins this specific combination.
   ============================================================ */
.legal-body.wrap{
  max-width:820px;
  padding:48px 24px 80px;
  margin:0 auto;
}
@media (max-width:720px){
  .legal-body.wrap{padding:32px 16px 60px}
}

/* ============================================================
   Legal pages — bulletproof override
   .legal-body.wrap (two classes) beats any single-class rule
   in the file, no matter what order they appear.
   ============================================================ */
.legal-body.wrap{
  max-width:820px;
  margin:0 auto;
  padding:48px 24px 80px;
  box-sizing:border-box;
}
.legal-body.wrap h1{
  font-size:2rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.15;margin:0 0 16px;color:#1b2d5c;
}
.legal-body.wrap p.lead{
  font-size:1.05rem;color:#334155;line-height:1.65;
  margin-bottom:24px;
}
.legal-body.wrap h2{
  font-size:1.05rem;font-weight:700;letter-spacing:.02em;
  color:#1b2d5c;margin:36px 0 12px;padding-top:8px;
  display:flex;align-items:center;gap:10px;
}
.legal-body.wrap h2 i{color:#2979ff;font-size:.95rem}
.legal-body.wrap h3{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#5c6a88;margin:0 0 14px;
  display:flex;align-items:center;gap:8px;
}
.legal-body.wrap h3 i{color:#2979ff;font-size:.85rem}
.legal-body.wrap p{font-size:.95rem;line-height:1.75;color:#1b2d5c;margin:0 0 14px}
.legal-body.wrap ul{margin:0 0 18px 22px;padding:0}
.legal-body.wrap li{font-size:.92rem;line-height:1.7;color:#334155;margin:6px 0}
.legal-body.wrap a{color:#2979ff;text-decoration:underline;text-underline-offset:3px}
.legal-body.wrap a:hover{color:#1e63d6}
.legal-body.wrap strong{color:#1b2d5c;font-weight:700}
.legal-body.wrap .legal-foot{
  margin-top:36px;padding-top:20px;
  border-top:1px solid #eef2f9;
  font-size:.85rem;color:#7c8aa8;
}
.legal-body.wrap .legal-toc{
  background:#f7f9fc;border:1px solid #eef2f9;
  padding:20px 24px;margin:24px 0 32px;
}
.legal-body.wrap .legal-toc ul{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px;
}
.legal-body.wrap .legal-toc li{margin:0}
.legal-body.wrap .legal-toc a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;background:#fff;border:1px solid #d8dfec;
  color:#1b2d5c;font-size:.78rem;font-weight:600;
  text-decoration:none;transition:.15s;
}
.legal-body.wrap .legal-toc a:hover{
  background:#2979ff;color:#fff;border-color:#2979ff;
}
.legal-body.wrap .legal-toc a i{font-size:.75rem;opacity:.8}

@media (max-width:720px){
  .legal-body.wrap{padding:32px 16px 60px}
  .legal-body.wrap h1{font-size:1.5rem}
  .legal-body.wrap h2{font-size:.98rem}
  .legal-body.wrap .legal-toc{padding:16px 18px}
  .legal-body.wrap .legal-toc ul{flex-direction:column;gap:6px}
  .legal-body.wrap .legal-toc a{width:100%}
}

/* ============================================================
   QR Generator page — layout classes
   Complements the existing .wrap / .panel / .btn base styles.
   ============================================================ */

/* --- accessibility: visible to screen readers only --- */
.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;
}

/* --- content date under the header --- */
.page-date{
  text-align:center;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#7c8aa8;margin:6px 0 0;font-weight:600;
}
.page-date time{color:#7c8aa8}

/* --- hero tagline as <p> (was <h1>, now styled) --- */
.hero-sub{
  font-size:1.75rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.15;color:#1b2d5c;margin:0 0 12px;
  text-align:center;
}
.hero-sub em{font-style:normal;color:#2979ff}

/* --- 3-column layout: left ad | main | right sidebar --- */
@media (min-width:1025px){
  .layout-wrap--3col{
    display:grid;
    grid-template-columns:200px minmax(0,1fr) 280px;
    gap:24px;
    align-items:start;
    max-width:1400px;
    margin:0 auto;
    padding:0 24px 40px;
  }
}
.layout-wrap--3col .layout-main{min-width:0}
.layout-aside--left{position:sticky;top:80px;align-self:start}
.layout-aside--right{position:sticky;top:80px;align-self:start;display:flex;flex-direction:column;gap:16px}

/* stack on tablet/mobile */
@media (max-width:1024px){
  .layout-wrap--3col{
    display:block;
    max-width:1180px;
    margin:0 auto;
    padding:0 20px 40px;
  }
  .layout-aside--left{display:none}
  .layout-aside--right{
    position:static;margin-top:24px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
  }
}
@media (max-width:640px){
  .layout-wrap--3col{padding:0 14px 32px}
  .layout-aside--right{display:none}
}

/* --- QR generator form --- */
.qrg-form{display:flex;flex-direction:column;gap:14px}
.qrg-form label{
  font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#5c6a88;margin-bottom:-6px;
}
.qrg-form textarea,
.qrg-form input[type=text]{
  width:100%;min-height:90px;padding:12px 14px;
  border:1px solid #c8d1e0;background:#fff;color:#1b2d5c;
  font-family:inherit;font-size:.9rem;line-height:1.5;
  outline:none;transition:border-color .12s;resize:vertical;
  box-sizing:border-box;
}
.qrg-form textarea:focus,
.qrg-form input:focus{border-color:#2979ff}

.qrg-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
@media (max-width:640px){.qrg-row{grid-template-columns:1fr}}
.qrg-row--btns{
  grid-template-columns:auto auto 1fr;
  gap:10px;align-items:center;
}
@media (max-width:640px){
  .qrg-row--btns{grid-template-columns:1fr 1fr}
  .qrg-row--btns .btn{width:100%;justify-content:center}
}
.qrg-col{display:flex;flex-direction:column;gap:6px}
.qrg-col label{
  font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#5c6a88;margin:0;
}
.qrg-col select{
  padding:10px 12px;border:1px solid #c8d1e0;background:#fff;
  color:#1b2d5c;font-family:inherit;font-size:.9rem;
  outline:none;cursor:pointer;transition:border-color .12s;
}
.qrg-col select:focus{border-color:#2979ff}

/* --- logo upload zone --- */
.qrg-logo-zone{
  border:1px dashed #c8d1e0;background:#fbfcfe;
  padding:20px;margin-top:4px;position:relative;
}
.qrg-logo-zone input[type=file]{
  position:absolute;left:-9999px;width:1px;height:1px;opacity:0;
}
.qrg-logo-zone__empty{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;color:#5c6a88;
}
.qrg-logo-zone__empty i{font-size:1.5rem;color:#2979ff;margin-bottom:4px}
.qrg-logo-zone__empty strong{
  font-size:.9rem;color:#1b2d5c;font-weight:700;
}
.qrg-logo-zone__empty span{
  font-size:.78rem;color:#7c8aa8;line-height:1.5;
}
.qrg-logo-zone__empty .btn{margin-top:10px}
.qrg-logo-preview{
  display:flex;align-items:center;gap:14px;
}
.qrg-logo-preview img{
  width:56px;height:56px;object-fit:contain;
  border:1px solid #eef2f9;background:#fff;padding:4px;
}
.qrg-logo-preview__meta{
  flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.qrg-logo-preview__meta strong{
  font-size:.85rem;color:#1b2d5c;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qrg-logo-preview__meta span{font-size:.72rem;color:#7c8aa8}

/* --- small button variant --- */
.btn--sm{
  padding:8px 14px;font-size:.62rem;
  letter-spacing:.08em;
}

/* --- QR output grid of style tiles --- */
.qrg-output{margin-top:24px}
.qrg-styles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1px;background:#eef2f9;border:1px solid #eef2f9;
}
.qrg-style{
  background:#fff;padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:pointer;transition:background .12s;text-align:center;
}
.qrg-style:hover{background:#f7f9fc}
.qrg-style canvas,
.qrg-style img,
.qrg-style svg{
  display:block;max-width:100%;height:auto;
  border:1px solid #eef2f9;background:#fff;
}
.qrg-style__name{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#5c6a88;
}
.qrg-style__meta{font-size:.65rem;color:#96a1b8}
.qrg-style .qrg-style__actions{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  margin-top:4px;
}
.qrg-style__actions button{
  padding:5px 10px;font-size:.58rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid #c8d1e0;background:#fff;color:#1b2d5c;
  cursor:pointer;transition:.12s;
}
.qrg-style__actions button:hover{
  background:#1b2d5c;color:#fff;border-color:#1b2d5c;
}

/* --- hero__pill already exists, but ensure it centers --- */
.hero .hero__pill{display:inline-block}
.hero{text-align:center}
.hero__sub{max-width:640px;margin:0 auto;padding:0 8px}

/* --- fix footer stacking (footer nav was added inline) --- */
.site-foot__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-foot nav[aria-label="Legal"]{
  display:flex;gap:14px;flex-wrap:wrap;font-size:.72rem;
}
.site-foot nav[aria-label="Legal"] a{
  color:#5c6a88;text-decoration:none;
}
.site-foot nav[aria-label="Legal"] a:hover{color:#1b2d5c}
.foot-addr{
  width:100%;text-align:center;font-size:.7rem;
  color:#7c8aa8;margin:8px 0 0;
}

/* ============================================================
   Footer — clean stacked layout
   ============================================================ */
.site-foot{
  border-top:1px solid #d8dfec;
  padding:24px 0;
  font-size:.78rem;
  color:#5c6a88;
  background:#fbfcfe;
}
.site-foot__inner{
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:center;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
.site-foot__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:.78rem;
  color:#5c6a88;
}
.site-foot__row a{
  color:#5c6a88;
  text-decoration:none;
}
.site-foot__row a:hover{color:#1b2d5c}

.site-foot__nav{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  padding-top:10px;
  border-top:1px solid #eef2f9;
}
.site-foot__nav a{
  color:#5c6a88;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .12s;
}
.site-foot__nav a:hover{color:#2979ff}

.site-foot__addr{
  font-size:.7rem;
  color:#96a1b8;
  letter-spacing:.04em;
  margin:0;
}

@media (max-width:640px){
  .site-foot{padding:20px 0}
  .site-foot__inner{padding:0 16px;gap:12px}
  .site-foot__row{flex-direction:column;gap:6px;text-align:center}
  .site-foot__nav{gap:14px}
  .site-foot__nav a{font-size:.68rem}
}

/* ============================================================
   FIX: .legal-body combined with .wrap loses its padding and
   max-width because .wrap appears later with equal specificity.
   .legal-body.wrap (two classes) wins outright.
   ============================================================ */
.legal-body.wrap{
  max-width:820px;
  margin:0 auto;
  padding:48px 24px 80px;
  box-sizing:border-box;
}
.legal-body.wrap .legal-toc{
  background:#f7f9fc;
  border:1px solid #eef2f9;
  padding:20px 24px;
  margin:24px 0 32px;
}
.legal-body.wrap .legal-toc ul{
  margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px;
}
.legal-body.wrap .legal-toc li{margin:0}
.legal-body.wrap .legal-toc a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;background:#fff;border:1px solid #d8dfec;
  color:#1b2d5c;font-size:.78rem;font-weight:600;
  text-decoration:none;transition:.15s;
}
.legal-body.wrap .legal-toc a:hover{
  background:#2979ff;color:#fff;border-color:#2979ff;
}
@media (max-width:720px){
  .legal-body.wrap{padding:32px 16px 60px}
  .legal-body.wrap .legal-toc{padding:16px 18px}
  .legal-body.wrap .legal-toc ul{flex-direction:column;gap:6px}
  .legal-body.wrap .legal-toc a{width:100%}
}

/* Generate QR button — green */
#qrg-generate{
  background:#22a84a;
  border-color:#22a84a;
  color:#fff;
}
#qrg-generate:hover:not(:disabled){
  background:#1a8a3c;
  border-color:#1a8a3c;
}
#qrg-generate:active:not(:disabled){
  background:#167a33;
  border-color:#167a33;
}