/* Combined: webfonts.css + arbsbuy.css + footer-dm.css
   Built to remove two render-blocking round trips on mobile.
   Order matters — it is the same order the three were linked in.
   Rebuild with: sudo -u www-data php build-site-css.php */

/* ==== webfonts.css ==== */
/* Self-hosted Inter (body) + Playfair Display (headings).
   Replaces the render-blocking fonts.googleapis.com stylesheet, which cost a
   third-party DNS + TLS handshake before a single byte of CSS arrived and was
   the largest render-blocking item on mobile.

   Both are variable fonts, so one file covers every weight we use.
   font-display:optional matches the existing Montserrat rules — the fallback is
   used if the font is not ready, which keeps CLS at zero. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: optional;
  src: url('../fonts/playfair-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==== arbsbuy.css ==== */
/* ==========================================================================
   Arbsbuy.com — Premium Theme (navy + gold), 1280px system
   Design: custom, unified Arbsbuy brand system
   ========================================================================== */
:root{
  --navy:#1B3A6B;
  --navy-2:#2A5298;
  --navy-deep:#0d2347;
  --gold:#E8A020;
  --gold-2:#f5b830;
  --gold-soft:#fbe9c9;
  --ink:#16233a;
  --body:#3a475c;
  --muted:#6b7890;
  --line:#e5eaf2;
  --line-2:#eef2f8;
  --bg:#ffffff;
  --bg-soft:#f6f8fc;
  --bg-navy-grad:linear-gradient(135deg,#1B3A6B 0%,#0d2347 100%);
  --ok:#1f9d63;
  --danger:#d9483b;
  --shadow-sm:0 1px 3px rgba(13,35,71,.06),0 1px 2px rgba(13,35,71,.04);
  --shadow:0 6px 24px rgba(13,35,71,.08);
  --shadow-lg:0 18px 50px rgba(13,35,71,.14);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --wrap:1280px;
  --gutter:24px;
  --font-head:"Playfair Display",Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--body);background:var(--bg);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--gold)}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--ink);line-height:1.18;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.4vw,3.15rem)}
h2{font-size:clamp(1.65rem,3.2vw,2.4rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 1rem}
strong{color:var(--ink);font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--gold);color:#fff}

/* ---- Layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.section{padding:72px 0}
.section-sm{padding:48px 0}
.bg-soft{background:var(--bg-soft)}
.bg-navy{background:var(--bg-navy-grad);color:#dce6f5}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff}
.text-center{text-align:center}
.eyebrow{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.bg-navy .eyebrow{color:var(--gold-2)}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.section-head p{color:var(--muted);font-size:1.06rem;margin:0}
.bg-navy .section-head p{color:#aebfd8}
.lead{font-size:1.18rem;color:var(--muted)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-body);
  font-weight:600;font-size:.98rem;padding:.85em 1.7em;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:all .2s var(--ease);line-height:1;text-align:center;white-space:nowrap}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;box-shadow:0 6px 18px rgba(232,160,32,.32)}
.btn-gold:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(232,160,32,.42)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-ghost-light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost-light:hover{background:#fff;color:var(--navy)}
.btn-lg{padding:1.05em 2.3em;font-size:1.05rem}
.btn-block{width:100%}

/* ---- Header ---- */
.top-bar{background:var(--navy-deep);color:#c9d6ec;font-size:.82rem}
.top-bar .wrap{display:flex;align-items:center;justify-content:space-between;height:38px}
.top-bar a{color:#c9d6ec}.top-bar a:hover{color:var(--gold-2)}
.top-bar .tb-left{display:flex;gap:20px;align-items:center}
.top-bar .tb-right{display:flex;gap:18px;align-items:center}
.top-bar .tb-hide{display:inline}
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:var(--shadow-sm);border-bottom:1px solid var(--line-2)}
.header-main{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav a{font-weight:600;font-size:.95rem;color:var(--ink);padding:.6em .9em;border-radius:8px;position:relative}
.nav a:hover{color:var(--navy);background:var(--bg-soft)}
.nav a.pill-gold{color:var(--gold);}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.hicon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:var(--ink);background:transparent}
.hicon:hover{background:var(--bg-soft);color:var(--navy)}
.hicon svg{width:22px;height:22px}
.cart-count{position:absolute;top:4px;right:4px;background:var(--gold);color:#fff;font-size:.64rem;font-weight:700;font-family:var(--font-body);min-width:17px;height:17px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)}

/* ---- Mega/dropdown ---- */
.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease);z-index:99}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:var(--wrap);margin:0 auto;padding:34px var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.mega h4{font-family:var(--font-body);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin:0 0 8px}
.mega li a{font-family:var(--font-body);color:var(--body);font-weight:500;font-size:.94rem;padding:0}
.mega li a:hover{color:var(--navy);background:none}
.mega-feature{background:var(--bg-navy-grad);border-radius:var(--radius);padding:26px;color:#fff;display:flex;flex-direction:column;justify-content:center}
.mega-feature h4{color:var(--gold-2)}
.mega-feature p{color:#c9d6ec;font-size:.9rem;margin:.3rem 0 1rem}

/* ---- Product card ---- */
.grid{display:grid;gap:26px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s var(--ease);display:flex;flex-direction:column;position:relative}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.pcard-media{position:relative;aspect-ratio:1/1;background:var(--bg-soft);overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-badge{position:absolute;top:12px;left:12px;background:var(--gold);color:#fff;font-size:.68rem;font-weight:700;padding:.32em .7em;border-radius:999px;letter-spacing:.02em;z-index:2}
.pcard-badge.sale{background:var(--danger)}
.pcard-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.pcard-cat{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px}
.pcard-title{font-family:var(--font-body);font-weight:600;font-size:.96rem;line-height:1.4;color:var(--ink);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pcard-title a{color:inherit}
.pcard-rating{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--muted);margin-bottom:10px}
.stars{color:var(--gold);letter-spacing:1px}
.pcard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-family:var(--font-body);font-weight:700;color:var(--navy);font-size:1.12rem;display:flex;align-items:baseline;gap:7px}
.price del{color:var(--muted);font-weight:400;font-size:.85em}
.pcard-btn{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:.6em .9em;font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s var(--ease);white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.pcard-btn:hover{background:var(--gold);color:#fff}

/* ---- Hero ---- */
.hero{background:var(--bg-navy-grad);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-10%;top:-30%;width:520px;height:520px;background:radial-gradient(circle,rgba(232,160,32,.22),transparent 62%);pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:76px 0}
.hero h1{color:#fff;margin-bottom:1rem}
.hero h1 em{color:var(--gold-2);font-style:normal}
.hero p{color:#c9d6ec;font-size:1.15rem;max-width:44ch;margin-bottom:1.8rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;margin-top:2rem;flex-wrap:wrap}
.hero-trust div{font-size:.85rem;color:#aebfd8}
.hero-trust b{display:block;font-family:var(--font-head);font-size:1.5rem;color:var(--gold-2);line-height:1}
.hero-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}

/* ---- Trust strip ---- */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:26px var(--gutter)}
.trust-item{display:flex;align-items:center;gap:12px}
.trust-item svg{width:30px;height:30px;color:var(--gold);flex-shrink:0}
.trust-item b{display:block;color:var(--ink);font-size:.92rem;font-family:var(--font-body)}
.trust-item span{font-size:.8rem;color:var(--muted)}

/* ---- Tabs ---- */
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.tab{padding:.6em 1.3em;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--body);font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s var(--ease)}
.tab:hover{border-color:var(--navy);color:var(--navy)}
.tab.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---- Category cards ---- */
.cat-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow)}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,35,71,.85),rgba(13,35,71,.05) 60%);z-index:1}
.cat-card-body{position:relative;z-index:2;padding:26px}
.cat-card h3{color:#fff;margin-bottom:.2rem}
.cat-card span{color:#cdd8ec;font-size:.86rem}

/* ---- Blog card ---- */
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s var(--ease);display:flex;flex-direction:column}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bcard-media{aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.bcard-media img{width:100%;height:100%;object-fit:cover}
.bcard-body{padding:20px;display:flex;flex-direction:column;flex:1}
.bcard-meta{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:9px}
.bcard h3{font-size:1.12rem;margin-bottom:.5rem}
.bcard h3 a{color:var(--ink)}.bcard h3 a:hover{color:var(--navy)}
.bcard p{font-size:.92rem;color:var(--muted);margin-bottom:1rem}
.bcard-more{margin-top:auto;font-weight:600;font-size:.88rem;color:var(--navy)}

/* ---- CTA band ---- */
.cta-band{background:var(--bg-navy-grad);color:#fff;border-radius:var(--radius-lg);padding:56px 44px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:#c9d6ec;max-width:52ch;margin:0 auto 1.6rem}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- Footer ---- */
.site-footer{background:var(--navy-deep);color:#a9bbd6;font-size:.92rem}
.footer-top{padding:60px 0 44px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-brand img{height:42px;margin-bottom:16px;filter:brightness(0) invert(1)}
.footer-brand p{color:#8ea3c4;font-size:.9rem;max-width:34ch}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#c9d6ec}
.footer-social a:hover{background:var(--gold);color:#fff}
.footer-social svg{width:18px;height:18px}
.site-footer h5{color:#fff;font-family:var(--font-body);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer li a{color:#a9bbd6}.site-footer li a:hover{color:var(--gold-2)}
.footer-news{margin-top:14px}
.footer-news form{display:flex;gap:8px;margin-top:12px}
.footer-news input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:.7em .9em;color:#fff;font-family:var(--font-body);font-size:.88rem}
.footer-news input::placeholder{color:#7d92b5}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 0}
.footer-bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom p{margin:0;color:#8296b6;font-size:.84rem}
.footer-pay{display:flex;gap:8px;align-items:center;opacity:.85}
.footer-pay span{background:rgba(255,255,255,.1);border-radius:6px;padding:4px 9px;font-size:.7rem;font-weight:600;color:#c9d6ec;letter-spacing:.03em}

/* ---- Breadcrumb ---- */
.crumb{background:var(--bg-soft);border-bottom:1px solid var(--line-2);font-size:.85rem;color:var(--muted)}
.crumb .wrap{padding:14px var(--gutter)}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--navy)}
.crumb span{color:var(--ink);font-weight:600}

/* ---- Page content (SEO body) ---- */
.page-body{font-size:1.04rem;color:var(--body)}
.page-body h2{margin-top:2.2rem}
.page-body h3{margin-top:1.6rem}
.page-body ul,.page-body ol{padding-left:1.3em;margin:0 0 1.2rem}
.page-body li{margin-bottom:.5rem}
.page-body img{border-radius:var(--radius-sm);margin:1.4rem 0}
.page-body a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px}
.page-body a:hover{color:var(--gold)}
.page-body blockquote{border-left:4px solid var(--gold);background:var(--bg-soft);padding:1em 1.4em;margin:1.6rem 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic;color:var(--ink)}
.page-body table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem}
.page-body th,.page-body td{border:1px solid var(--line);padding:.7em .9em;text-align:left}
.page-body th{background:var(--bg-soft);color:var(--ink);font-family:var(--font-body);font-weight:600}

/* ---- Forms ---- */
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;color:var(--ink);font-size:.9rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.8em 1em;font-family:var(--font-body);font-size:.96rem;color:var(--ink);background:#fff;transition:border-color .18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,58,107,.1)}
.field textarea{min-height:130px;resize:vertical}

/* ---- Alerts ---- */
.alert{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:.94rem}
.alert-ok{background:#e8f6ef;color:#15754a;border:1px solid #bce6d1}
.alert-err{background:#fdecea;color:#b23a2e;border:1px solid #f5c6c0}

/* ---- fade-up reveal ---- */
.arb-fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.arb-fade-up.visible{opacity:1;transform:none}

/* ---- Mobile drawer ---- */
.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;box-shadow:var(--shadow-lg);z-index:200;transform:translateX(100%);transition:transform .3s var(--ease);overflow-y:auto;padding:24px}
.mobile-panel.open{transform:none}
.overlay{position:fixed;inset:0;background:rgba(13,35,71,.5);z-index:150;opacity:0;visibility:hidden;transition:.25s}
.overlay.open{opacity:1;visibility:visible}
.mobile-panel .mclose{position:absolute;top:16px;right:16px;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}
.mobile-panel nav{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.mobile-panel nav a{padding:.85em .4em;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-2)}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .hero-inner{grid-template-columns:1fr;gap:32px;padding:56px 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .nav,.top-bar .tb-hide{display:none}
  .burger{display:flex}
  .header-actions{margin-left:auto}
}
@media(max-width:760px){
  .section{padding:52px 0}
  .grid-4,.grid-3,.grid-2{grid-template-columns:repeat(2,1fr);gap:16px}
  .trust-strip .wrap{grid-template-columns:1fr 1fr;gap:16px}
  .mega{display:none}
  .cta-band{padding:40px 22px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom .wrap{flex-direction:column;text-align:center}
}
@media(max-width:460px){
  .grid-4,.grid-3{grid-template-columns:1fr 1fr;gap:12px}
  .hero-trust{gap:16px}
  h1{font-size:1.9rem}
}

/* ===== Arbsbuy DM brand logo (header) ===== */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{display:inline-flex;flex:none}
.brand-mark svg{width:40px;height:40px;display:block;filter:drop-shadow(0 3px 8px rgba(27,58,107,.28))}
.brand-txt{display:flex;flex-direction:column;line-height:1.02}
.brand-txt b{font-family:'Playfair Display',Georgia,serif;font-size:1.42rem;color:#1B3A6B;font-weight:800;letter-spacing:-.01em}
.brand-txt i{font-style:normal;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#E8A020;font-weight:700;margin-top:3px}
.mobile-panel .brand-txt b{font-size:1.25rem}
@media(max-width:480px){.brand-txt b{font-size:1.2rem}.brand-mark svg{width:34px;height:34px}.hicon-hide{display:none}}
.brand-txt b .bd-g{color:#E8A020}
.brand-mark img{width:42px;height:42px;display:block}
.ftr-logo-icon img{width:40px;height:40px;display:block}

/* ================= ULTRA-PREMIUM HEADER (Tier-1 agency) ================= */
.top-bar{background:linear-gradient(90deg,#0b1e40,#12294f);color:#c9d6ec;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.06)}
.top-bar .wrap{height:40px}
.tb-strong{color:#fff;font-weight:600}
.tb-dim{color:#8ea3c4}
.tb-cta{color:#0b1e40!important;background:var(--gold);padding:.34em 1em;border-radius:20px;font-weight:700;font-size:.78rem;transition:.18s}
.tb-cta:hover{background:#f2b640;transform:translateY(-1px)}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 0 rgba(13,42,90,.06);border-bottom:1px solid rgba(13,42,90,.07);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 10px 34px rgba(13,42,90,.11)}
.header-main{height:80px;gap:32px}
.nav{gap:2px;margin-left:6px}
.nav .nav-top{font-weight:600;font-size:.88rem;color:var(--ink);padding:.62em .62em;border-radius:8px;display:inline-flex;align-items:center;gap:6px;position:relative;background:none}
.nav .nav-top::after{content:"";position:absolute;left:.62em;right:.62em;bottom:.55em;height:2px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav .nav-top:hover{color:var(--navy);background:none}
.nav .nav-top:hover::after,.has-mega:hover .nav-top::after{transform:scaleX(1)}
.nav-caret{width:9px;height:6px;color:#9aa7bd;transition:.22s}
.has-mega:hover .nav-caret{transform:rotate(180deg);color:var(--gold)}
.header-cta{margin-left:10px;padding:.72em 1.25em!important;font-size:.85rem;font-weight:700;border-radius:10px;box-shadow:0 6px 18px rgba(27,58,107,.22);white-space:nowrap}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,58,107,.34)}
.has-mega{position:static}
.mega{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 34px 64px rgba(13,42,90,.17);border-top:3px solid var(--gold);border-radius:0 0 18px 18px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.26s var(--ease);z-index:99}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:var(--wrap);margin:0 auto;padding:36px var(--gutter) 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.mega h4{font-family:var(--font-body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:700}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin:0 0 10px}
.mega li a{color:var(--body);font-weight:500;font-size:.92rem;transition:.15s;display:inline-block;padding:0;background:none}
.mega li a:hover{color:var(--navy);transform:translateX(4px);background:none}
.mega-dm{grid-template-columns:1.7fr 1fr;gap:40px}
.mega .mega-services{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mega .msvc{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px;transition:.16s;background:none}
.mega .msvc:hover{background:var(--bg-soft);transform:none}
.mega .msvc-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.12rem;flex-shrink:0;background:#eef2f9}
.mega .msvc-ic.ic-gold{background:rgba(232,160,32,.15)}.mega .msvc-ic.ic-blue{background:rgba(42,82,152,.13)}.mega .msvc-ic.ic-navy{background:rgba(13,42,90,.1)}.mega .msvc-ic.ic-pink{background:rgba(232,80,120,.13)}.mega .msvc-ic.ic-green{background:rgba(38,160,90,.13)}
.mega .msvc-c{display:flex;flex-direction:column;line-height:1.3}
.mega .msvc-c b{color:var(--navy);font-size:.9rem;font-weight:700}
.mega .msvc-c small{color:var(--muted);font-size:.76rem}
.mega-feature{background:var(--bg-navy-grad,linear-gradient(140deg,#0d2347,#1B3A6B));border-radius:16px;padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.mega-feature::after{content:"";position:absolute;right:-34px;top:-34px;width:130px;height:130px;background:radial-gradient(circle,rgba(232,160,32,.28),transparent 70%);pointer-events:none}
.mf-eyebrow{color:var(--gold);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;position:relative}
.mega-feature h4{color:#fff;font-size:1.28rem;font-family:var(--font-head,'Playfair Display',serif);margin:.3rem 0 .5rem;letter-spacing:0;text-transform:none;position:relative}
.mega-feature p{color:#c9d6ec;font-size:.85rem;margin:0 0 1.1rem;line-height:1.5;position:relative}
.mega-feature .btn{position:relative;padding:.85em 1.3em!important}
.btn-block{display:block;width:100%;text-align:center}
.mf-link{color:#aebfd8;font-size:.82rem;font-weight:600;margin-top:12px;text-align:center;position:relative}
.mf-link:hover{color:var(--gold)}
@media(max-width:1024px){.nav,.header-cta{display:none!important}.burger{display:flex!important}.header-main{height:66px;gap:16px}}
.mega .mega-dm-left{display:flex;flex-direction:column}
.mega-viewall{display:block;text-align:center;margin-top:16px;padding:12px;border:1.5px dashed rgba(232,160,32,.55);border-radius:12px;color:var(--gold)!important;font-weight:700;font-size:.9rem;transition:.16s;background:none}
.mega-viewall:hover{background:rgba(232,160,32,.08);border-color:var(--gold);transform:none!important;color:var(--gold)!important}

/* ===== MEDIUM.COM-STYLE READING TYPOGRAPHY (blog articles + content) ===== */
.post-body{font-size:1.2rem;line-height:1.8;color:#242424;letter-spacing:-.003em}
.post-body p,.post-body li{font-family:Charter,Georgia,'Times New Roman',serif;font-size:1.2rem;line-height:1.8;color:#242424;margin:0 0 1.6rem}
.post-body h2,.post-body h3,.post-body h4{font-family:'Inter',system-ui,-apple-system,sans-serif;color:#15181c;font-weight:800;letter-spacing:-.021em;line-height:1.25}
.post-body h2{font-size:1.72rem;margin:2.4rem 0 .6rem}
.post-body h3{font-size:1.36rem;margin:2rem 0 .5rem}
.post-body strong{font-weight:700;color:#15181c}
.post-body a{color:#1B3A6B;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(27,58,107,.35)}
.post-body a:hover{text-decoration-color:#1B3A6B}
.post-body ul,.post-body ol{margin:1.5rem 0;padding-left:1.4rem}
.post-body li{margin-bottom:.7rem}
.post-body blockquote{border-left:3px solid #E8A020;margin:1.8rem 0;padding:.2rem 0 .2rem 1.4rem;font-style:italic;color:#3a3a3a}
.post-hero h1{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:-.028em;line-height:1.15}

/* ===== MEDIUM.COM TYPOGRAPHY — SITE-WIDE ===== */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* reading/body text -> serif (Medium signature) */
p,li,blockquote,.lead,.sub,.page-body,.hero p,.dm-hero-copy p,.section p{font-family:Charter,Georgia,'Times New Roman',serif}
p{font-size:1.06rem;line-height:1.72;color:#2b2b2b}
/* headings -> bold sans (Medium style) */
h1,h2,h3,h4,h5,h6,.h2{font-family:'Inter',system-ui,-apple-system,sans-serif !important;font-weight:800;letter-spacing:-.021em}
/* keep ALL interactive / UI / label text sans (buttons, nav, chips, chat, forms, meta) */
.btn,button,input,select,textarea,.nav a,.nav-top,.eyebrow,.badge,.ab-badge,.pill-gold,.tag,.plan-tag,.bt-save,.top-bar,.top-bar *,.header-cta,.cart-count,.pcard-cat,.pcard-btn,.blogc-cat,.msvc-c small,.ftr-link,.ftr-badge,.arbc,.arbc *,.sm-bt,label,.plan-count span,.stat span,.dm-hero-stats span{font-family:'Inter',system-ui,-apple-system,sans-serif !important}
/* pcard-media-fullcover: ebook covers (tall 2:3) show FULL, no crop (was 1:1 + object-fit:cover) */
.pcard-media{aspect-ratio:2/3!important;background:linear-gradient(150deg,#eef2f8,#e6ecf6)!important;padding:10px}
.pcard-media img{object-fit:contain!important;border-radius:5px;box-shadow:0 6px 18px rgba(13,42,90,.18)}
.pcard-media:hover img,.pcard:hover .pcard-media img{transform:none!important}

/* highlighted nav entry for the free resume suite */
.nav .nav-top.nav-hot{color:var(--navy);font-weight:700}
.nav .nav-top.nav-hot:hover{color:var(--gold)}
.nav-pill{display:inline-block;background:linear-gradient(135deg,#E8A020,#f6c667);color:#3a2600;font-size:.58rem;font-weight:800;letter-spacing:.09em;padding:2px 7px;border-radius:999px;vertical-align:2px;margin-left:2px;box-shadow:0 2px 6px rgba(232,160,32,.4)}

/* ---- nav premium fit: one line, never wraps ---- */
.nav{gap:1px;margin-left:10px;flex-wrap:nowrap}
.nav .nav-top{white-space:nowrap;font-size:.9rem;padding:.62em .72em;letter-spacing:-.005em}
.nav .nav-top::after{left:.72em;right:.72em}
/* the FREE pill should not add to the hit area or push the row wider */
.nav .nav-top .nav-pill{margin-left:5px;padding:2px 6px;font-size:.55rem;letter-spacing:.07em;
  vertical-align:1px;box-shadow:0 1px 4px rgba(232,160,32,.35)}
/* free items read slightly warmer than the paid ones without shouting */
.nav .nav-top.nav-hot{color:var(--navy)}
.nav .nav-top.nav-hot:hover{color:var(--gold)}
.brand-txt{white-space:nowrap}
.header-actions{gap:4px}
/* below this the row genuinely runs out of room, so shed weight in stages
   rather than letting anything wrap */
@media(max-width:1400px){
  .nav .nav-top{font-size:.86rem;padding:.6em .58em}
  .nav .nav-top::after{left:.58em;right:.58em}
}
@media(max-width:1240px){
  .nav .nav-top .nav-pill{display:none}
  .nav .nav-top{font-size:.84rem;padding:.6em .5em}
  .nav .nav-top::after{left:.5em;right:.5em}
}
/* mobile drawer keeps the pills — there is room there */
.mobile-panel .nav-pill{display:inline-block!important;margin-left:6px;vertical-align:1px}
/* footer FREE pill — mirrors the header nav pill */
.ftr-free{display:inline-block;background:linear-gradient(135deg,#E8A020,#f6c667);color:#3a2600;font-size:.53rem;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:999px;margin-left:5px;vertical-align:1px;box-shadow:0 1px 4px rgba(232,160,32,.35)}
.ftr-link:hover .ftr-free{box-shadow:0 2px 7px rgba(232,160,32,.5)}

/* === header dropdowns + free suite in the topbar ================= */
.ddown{position:absolute;left:50%;transform:translate(-50%,10px);top:100%;min-width:292px;
  background:#fff;border-top:3px solid var(--gold);border-radius:0 0 14px 14px;
  box-shadow:0 30px 60px rgba(13,42,90,.18);padding:10px;opacity:0;visibility:hidden;
  transition:.22s var(--ease);z-index:99}
.has-dd:hover .ddown{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ddown a{display:block;padding:9px 12px;border-radius:9px;color:var(--body);line-height:1.3}
.ddown a:hover{background:var(--bg-soft)}
.ddown a b{display:block;font-family:var(--font-body);font-weight:600;font-size:.94rem;color:var(--navy)}
.ddown a small{display:block;font-size:.78rem;color:#55637d;margin-top:2px}
.ddown .dd-all{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;
  padding-top:11px;font-weight:700;font-size:.84rem;color:var(--navy)}
.ddown .dd-all:hover{color:var(--gold-3,#8A5A00)}

/* topbar free suite */
.top-bar{position:relative;z-index:120}
.top-bar .tb-free{display:inline-flex;align-items:stretch;gap:0;height:38px;border-radius:0;padding:0;
  background:linear-gradient(180deg,rgba(232,160,32,.20),rgba(232,160,32,.11));
  border-left:1px solid rgba(232,160,32,.45);border-right:1px solid rgba(232,160,32,.45);
  box-shadow:inset 0 2px 0 var(--gold-2)}
.tbf-i{font-style:normal;font-size:.92rem;line-height:1;margin-right:7px}
.tbf-c{width:9px;height:6px;margin-left:7px;opacity:.75;transition:transform .2s var(--ease)}
.tbf-item:hover .tbf-c{transform:rotate(180deg);opacity:1}
.tbf-item + .tbf-item .tbf-top{border-left:1px solid rgba(255,255,255,.13)}
.tb-free .tbf-tag{font-size:.63rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:#0b1e40;background:linear-gradient(180deg,#F3B44A,var(--gold-2));border-radius:0;
  padding:0 12px;line-height:38px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.tb-free .tbf-tag span{font-size:.72rem;line-height:1}
.tbf-item{position:relative}
.tbf-item .tbf-top{display:flex;align-items:center;padding:0 15px;height:38px;border-radius:0;
  color:#fff;font-weight:600;font-size:.81rem;position:relative;transition:.16s var(--ease)}
.tbf-item .tbf-top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--gold-2);transform:scaleX(0);transition:transform .18s var(--ease)}
.tbf-item:hover .tbf-top::after{transform:scaleX(1)}
.tbf-item:hover .tbf-top{background:rgba(255,255,255,.10);color:#fff}
.tbf-dd{position:absolute;right:0;top:100%;min-width:238px;background:#fff;
  border-top:3px solid var(--gold);border-radius:0;
  box-shadow:0 26px 52px rgba(13,42,90,.22);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.2s var(--ease);z-index:130}
.tbf-item:hover .tbf-dd{opacity:1;visibility:visible;transform:translateY(0)}
.tbf-dd a{display:block;padding:9px 12px;border-radius:0;color:var(--body);
  font-size:.87rem;font-weight:500}
.tbf-dd a:hover{background:var(--bg-soft);color:var(--navy)}
@media(max-width:1180px){.top-bar .tb-free{gap:2px}.tb-free .tbf-tag{display:none}}

/* === nav active state + hover lift ============================== */
.nav .nav-top:hover{background:rgba(13,42,90,.045)}
.nav .nav-top.is-on{color:var(--navy);font-weight:700}
.nav .nav-top.is-on::after{transform:scaleX(1)}
.nav .nav-top.is-on .nav-caret{color:var(--gold)}
/* the whole strip reads as one unit rather than five loose words */
.nav{gap:2px}
.nav .nav-top{transition:background .16s var(--ease),color .16s var(--ease)}
.has-mega:hover .nav-top{background:rgba(13,42,90,.045)}

/* === header resting-state polish ================================== */
/* Gold hairline ties the header to the topbar's gold accent. */
.site-header{border-bottom:1px solid rgba(13,42,90,.07);
  box-shadow:0 1px 0 rgba(232,160,32,.34),0 1px 0 rgba(13,42,90,.06)}
.site-header.scrolled{box-shadow:0 1px 0 rgba(232,160,32,.34),0 10px 34px rgba(13,42,90,.11)}

/* Nav: a touch larger and darker so five words read as a menu, not labels. */
.nav .nav-top{font-size:.93rem;color:#22304a}

/* Separate the utility group from the nav. */
.hact-sep{width:1px;height:26px;background:linear-gradient(180deg,transparent,rgba(13,42,90,.16),transparent);
  margin:0 12px 0 4px;flex-shrink:0}

/* Icons read as a deliberate set rather than three floating glyphs. */
.hicon{border:1px solid rgba(13,42,90,.09);background:#fff;transition:.16s var(--ease)}
.hicon:hover{border-color:rgba(232,160,32,.55);background:rgba(232,160,32,.07);color:var(--navy)}

/* The money button. */
.header-cta{display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#24467d,var(--navy))!important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 22px rgba(13,42,90,.30),inset 0 1px 0 rgba(255,255,255,.14);
  letter-spacing:.005em;transition:.18s var(--ease)}
.header-cta:hover{background:linear-gradient(180deg,#2c518f,#173463)!important;
  box-shadow:0 12px 28px rgba(13,42,90,.38),inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateY(-1px)}
.hcta-a{width:14px;height:10px;flex-shrink:0;transition:transform .18s var(--ease)}
.header-cta:hover .hcta-a{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.header-cta,.hcta-a{transition:none}
  .header-cta:hover{transform:none}.header-cta:hover .hcta-a{transform:none}}
@media(max-width:1180px){.hact-sep{display:none}}
/* === nav typography ============================================== */
.nav{gap:0;margin-left:14px}
.nav .nav-top{
  font-size:.96rem;
  font-weight:700;
  color:#16294d;
  letter-spacing:-.012em;
  padding:.74em .5em;
  gap:7px;
}
/* underline grows from the centre — reads as deliberate, not a hover box */
.nav .nav-top::after{
  left:.5em;right:.5em;bottom:.5em;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0);transform-origin:center;
}
.nav .nav-top:hover{color:#0D2A5A;background:transparent}
.nav .nav-top:hover::after,.has-mega:hover .nav-top::after{transform:scaleX(1)}
.has-mega:hover .nav-top{background:transparent}

/* the caret is a hint, not a second glyph */
.nav-caret{width:8px;height:5px;color:#aeb9cc;stroke-width:2;opacity:.85;
  transition:transform .22s var(--ease),color .18s var(--ease)}
.nav .nav-top:hover .nav-caret{color:var(--gold)}

/* current section */
.nav .nav-top.is-on{color:#0D2A5A;font-weight:800}
.nav .nav-top.is-on::after{transform:scaleX(1)}

/* keep five heavier items on one line */
@media(max-width:1300px){.nav .nav-top{font-size:.92rem;padding:.72em .85em}
  .nav .nav-top::after{left:.85em;right:.85em}}
@media(max-width:1180px){.nav .nav-top{font-size:.88rem;padding:.7em .68em;letter-spacing:-.015em}
  .nav .nav-top::after{left:.68em;right:.68em}.nav{margin-left:8px}}
@media(max-width:1100px){.nav .nav-top{font-size:.85rem;padding:.68em .55em}
  .nav .nav-top::after{left:.55em;right:.55em}}
/* === topbar: wide grouped dropdown for the resume suite ============ */
.tbf-item.tbf-wide{position:relative}
.tbf-dd-wide{display:grid;grid-template-columns:repeat(4,minmax(178px,1fr));gap:4px 18px;
  min-width:760px;right:0;padding:16px 18px 14px}
.tbf-col{display:flex;flex-direction:column}
.tbf-col b{font-size:.63rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-3,#8A5A00);padding:4px 10px 7px;white-space:nowrap}
.tbf-dd-wide a{padding:7px 10px;font-size:.85rem}
@media(max-width:1280px){.tbf-dd-wide{grid-template-columns:repeat(2,minmax(178px,1fr));min-width:400px}}

/* ==========================================================================
   RESPONSIVE + OVERFLOW HARDENING  (Aug 2026)
   Appended last on purpose: several earlier blocks re-declare the same
   selectors, so the cascade order is doing real work here. Do not move.
   ========================================================================== */

/* --- A. Global guard -----------------------------------------------------
   `clip` rather than `hidden` so position:sticky (the header) keeps working;
   `hidden` is listed first purely as the fallback for engines without clip. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
svg,video,iframe,canvas,embed,object{max-width:100%}
video,iframe,canvas{height:auto}

/* --- B. Top bar ----------------------------------------------------------
   ROOT CAUSE of the mobile side-scroll: `.top-bar .tb-free{display:inline-flex}`
   further up this file has the same specificity as the `.top-bar .tb-hide`
   hide inside @media(max-width:1024px) but comes later, so the free-suite row
   stayed laid out at 360px and pushed the document to 398px wide.            */
.top-bar .wrap{gap:14px;min-width:0}
.top-bar .tb-left{min-width:0;flex:1 1 auto}
.top-bar .tb-right{min-width:0;flex:0 0 auto}
.top-bar .tb-strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-bar .tb-dim{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tbf-dd,.tbf-dd-wide{max-width:calc(100vw - 24px)}

/* tablet + phone: the free suite lives in the burger menu instead */
@media(max-width:1024px){
  .top-bar .tb-right,.top-bar .tb-free,.top-bar .tb-desk,.top-bar .tb-hide{display:none!important}
  .top-bar .wrap{justify-content:center;height:34px}
  .top-bar .tb-left{flex:0 1 auto;justify-content:center;gap:10px}
}
@media(max-width:640px){
  .top-bar{font-size:.7rem}
  .top-bar .wrap{height:32px;padding:0 12px}
}
@media(max-width:380px){.top-bar{font-size:.66rem}}

/* --- C. Header row: stop it overrunning the viewport on desktop ----------
   brand + 6 nav items + 3 icons + CTA needed ~1420px but the wrap capped the
   row at 1232px, so the header overflowed at EVERY desktop width. Give the
   header its own wider rail and step the nav down more aggressively.        */
.site-header .wrap{max-width:1280px}
.header-main{min-width:0;gap:14px}
.header-main .brand{flex:0 0 auto;min-width:0}
.nav{min-width:0;flex:1 1 auto;flex-wrap:nowrap;justify-content:flex-end}
.nav .nav-top{white-space:nowrap}
.header-actions{flex:0 0 auto;min-width:0}
@media(max-width:1460px){
  .nav .nav-top{font-size:.88rem;padding:.68em .62em}
  .nav .nav-top::after{left:.62em;right:.62em}
  .header-cta{margin-left:6px;padding:.7em .95em!important;font-size:.8rem}
}
@media(max-width:1320px){
  .nav{margin-left:6px}
  .nav .nav-top{font-size:.84rem;padding:.66em .46em;letter-spacing:-.015em}
  .nav .nav-top::after{left:.46em;right:.46em}
  .header-actions{gap:2px}
  .hicon{width:38px;height:38px}
}
@media(max-width:1180px){
  .nav .nav-top{font-size:.8rem;padding:.64em .36em}
  .nav .nav-top::after{left:.36em;right:.36em}
  .nav-caret{display:none}
  .header-cta{padding:.68em .8em!important;font-size:.76rem}
}
@media(max-width:1080px){
  .nav .nav-top{font-size:.77rem;padding:.62em .28em}
  .header-main .brand-txt i{display:none}
}
/* mega panels must never be the thing that overflows */
.mega{max-width:100vw}
.mega-inner{max-width:100%;min-width:0}
.mega-dm-left,.mega-feature,.mega-services{min-width:0}
.mega-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.msvc,.msvc-c{min-width:0}
.msvc-c b,.msvc-c small{overflow-wrap:anywhere}

/* --- D. Mobile drawer ----------------------------------------------------
   Rebuilt to mirror the desktop nav: 4 service pillars first (services are
   the backbone of the site), then the free resources, then eBooks.          */
.mobile-panel{
  width:min(370px,92vw);max-width:100vw;padding:0;
  display:flex;flex-direction:column;overflow:hidden;
  visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s;
}
.mobile-panel.open{visibility:visible;transition:transform .3s var(--ease)}
.mobile-panel .mp-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.mobile-panel .mclose{
  position:static;width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;font-size:1.9rem;line-height:1;border-radius:10px;flex:0 0 auto;
}
.mobile-panel .mclose:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mobile-panel .mp-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:14px 16px 34px;
}
.mobile-panel .mp-cta{margin:0 0 12px;min-height:48px;display:flex;align-items:center;justify-content:center}
.mobile-panel .mp-nav{display:block;margin-top:0}
.mobile-panel .mp-eyebrow{
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 4px;padding:0 2px;
}
.mobile-panel .mp-eyebrow:first-of-type{margin-top:6px}
.mobile-panel .macc{border-bottom:1px solid var(--line-2)}
.mobile-panel .macc>summary{
  list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;
  padding:6px 2px;font-weight:700;font-size:.97rem;color:var(--ink);cursor:pointer;
}
.mobile-panel .macc>summary::-webkit-details-marker{display:none}
.mobile-panel .macc>summary::marker{content:""}
.mobile-panel .macc>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:8px}
.mobile-panel .macc[open]>summary{color:var(--navy)}
.mobile-panel .macc-ic{font-style:normal;flex:0 0 auto;font-size:1.06rem;line-height:1}
.mobile-panel .macc-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mobile-panel .macc-c{width:11px;height:7px;flex:0 0 auto;color:var(--muted);transition:transform .2s var(--ease)}
.mobile-panel .macc[open]>summary .macc-c{transform:rotate(180deg);color:var(--gold)}
.mobile-panel .macc-b{display:flex;flex-direction:column;padding:0 0 10px 30px}
.mobile-panel .macc-b a{
  display:flex;align-items:center;min-height:44px;padding:4px 2px;
  color:var(--body);font-size:.91rem;font-weight:500;border-bottom:0;overflow-wrap:anywhere;
}
.mobile-panel .macc-b a:hover,.mobile-panel .macc-b a:focus-visible{color:var(--navy)}
.mobile-panel .macc-h{
  display:block;font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 0;
}
.mobile-panel .mp-flat{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 2px;
  font-weight:700;font-size:.97rem;color:var(--ink);border-bottom:1px solid var(--line-2);
}
.mobile-panel .mp-all{
  display:flex;align-items:center;min-height:46px;padding:6px 2px;
  font-weight:700;font-size:.88rem;color:var(--navy);border-bottom:0;
}
.mobile-panel .brand-txt b{font-size:1.18rem}
.mobile-panel .nav-pill{flex:0 0 auto}
body.menu-open{overflow:hidden}

/* --- E. Brand lockdown ---------------------------------------------------
   Page-level sheets (arbd-content.css on the service pages, legacy-content.css
   on /tools/) reset `body{font-family}` to Open Sans, which leaked into the
   header lockup sub-line and made the logo measurably wider on those pages
   (145px on /seo-services/ vs 136px on /). These win regardless of load order. */
.top-bar,.top-bar *,
.site-header,.site-header *,
.mobile-panel,.mobile-panel *,
.ftr-main,.ftr-main *,.ftr-trust,.ftr-trust *,.ftr-bottom,.ftr-bottom *{
  font-family:var(--font-body)!important;
}
.brand-txt b,.mobile-panel .brand-txt b{font-family:var(--font-head)!important;font-weight:800!important;color:#1B3A6B!important}
.brand-txt b .bd-g{color:#E8A020!important}
.brand-txt i{color:#E8A020!important;font-weight:700!important;letter-spacing:.22em!important}
.brand-mark img{width:42px!important;height:42px!important}
.mobile-panel .brand-mark img{width:38px!important;height:38px!important}
.nav-caret{width:8px!important;height:5px!important;flex:0 0 auto}
.ftr-main h4,.ftr-main .ftr-col h4{font-family:var(--font-head)!important}

/* --- F. Site-wide responsive rules (standard section C) ------------------ */
h4{font-size:clamp(1.05rem,1.5vw,1.22rem)}
h5{font-size:clamp(.98rem,1.2vw,1.08rem)}
.grid>*,.grid-2>*,.grid-3>*,.grid-4>*,.mega-services>*{min-width:0}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
p,li,dd,dt,blockquote,figcaption,td,th,summary,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
.prose,.entry-content,.post-body,article{overflow-wrap:anywhere}
pre,code,kbd,samp{max-width:100%}
pre{overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
table{max-width:100%}
.table-wrap,.table-scroll,.scroll-x{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  .btn,.hicon,.burger,.mp-flat,.mp-all{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
}
.mobile-panel .mp-head .brand{min-height:44px}
/* the lockup sub-line only gets dropped in the narrow band where the desktop
   nav is still on-screen; below 1025px the nav is a burger and there is room */
@media(max-width:1080px){.header-main .brand-txt i{display:inline}}
@media(max-width:1080px) and (min-width:1025px){.header-main .brand-txt i{display:none}}
.mobile-panel .mp-all{display:block;padding:12px 2px;line-height:1.45}
/* the chat launcher (z-index 9999) otherwise floats over the open drawer */
body.menu-open .arbc{display:none}
/* …and below 420px the lockup sub-line genuinely has no room next to the
   burger + cart + search, so it goes again there (verified at 320px). */
@media(max-width:420px){
  .header-main .brand-txt i{display:none}
  .header-main .brand-txt b{font-size:1.12rem}
  .brand-mark img{width:36px!important;height:36px!important}
  .header-main{gap:8px}
}

/* --- E2. Brand lockdown, literal stacks ----------------------------------
   arbd-content.css (service pages) and legacy-content.css (/tools/) both
   REDEFINE the brand tokens at :root — `--font-head:'Montserrat'` and
   `--font-body:'Open Sans'` — and load after this bundle. That silently
   changed the meaning of every var(--font-*) on those pages, which is the
   real cause of the "the header looks different on /seo-services/" report.
   Neither font is served anywhere, so they fell back to the platform sans.
   The chrome therefore names its stacks literally; var() cannot be trusted.
   The page-level :root overrides themselves still need deleting — they are
   in files this agent does not own.                                        */
.top-bar,.top-bar *,
.site-header,.site-header *,
.mobile-panel,.mobile-panel *,
.ftr-main,.ftr-main *,.ftr-trust,.ftr-trust *,.ftr-bottom,.ftr-bottom *{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important;
}
.site-header .brand .brand-txt b,
.mobile-panel .brand .brand-txt b,
.brand-txt b{font-family:'Playfair Display',Georgia,serif!important}
.ftr-main h2,.ftr-main h3,.ftr-main h4,.ftr-main .ftr-col h4{font-family:'Playfair Display',Georgia,serif!important}

/* Aliases for the short token names used inside the 824 standalone tool bodies.
   Those files were written against --fh/--fb, which no loaded stylesheet ever
   defined, so their headings silently fell back to the platform sans instead of
   Playfair. Declared here rather than in each tool file so the brand holds. */
:root{--fh:var(--font-head);--fb:var(--font-body)}

/* ==========================================================================
   TOP-BAR FREE SERVICES + RESUME SUITE PANEL - enterprise polish (Aug 2026)
   CSS ONLY. No markup, no hrefs, no mobile rules touched. Every selector here
   lives under .tb-free / .tbf-*, and the mobile guard further up this file
   (`.top-bar .tb-right,.top-bar .tb-free,... {display:none!important}`) still
   wins because of its !important, so none of this can reach the mobile drawer.
   ========================================================================== */

/* --- the strip ---------------------------------------------------------- */
.top-bar .tb-free{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* --- "100% FREE" badge -------------------------------------------------- */
.tb-free .tbf-tag{
  background:linear-gradient(180deg,#F8C86F,#E19410);
  color:#33220A;
  letter-spacing:.125em;
  padding:0 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.10);
}
.tb-free .tbf-tag span{filter:drop-shadow(0 1px 0 rgba(255,255,255,.45))}

/* --- items -------------------------------------------------------------- */
/* solid 1px divider replaced by a hairline that fades at both ends */
.tbf-item + .tbf-item .tbf-top{border-left:0}
.tbf-item + .tbf-item::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.24),transparent);
}
.tbf-item .tbf-top{
  padding:0 16px;font-size:.805rem;font-weight:600;color:#D9E4F6;
}
.tbf-item:hover .tbf-top,
.tbf-item:focus-within .tbf-top{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.055));
  color:#fff;
}
.tbf-item .tbf-top::after{background:linear-gradient(90deg,var(--gold),#F8C86F)}
.tbf-item:focus-within .tbf-top::after{transform:scaleX(1)}
.tbf-item:focus-within .tbf-c{transform:rotate(180deg);opacity:1}
.tbf-top:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.tbf-i{font-size:.95rem;margin-right:8px;opacity:.96}

/* keyboard users can reach these panels now, not just pointer users */
.tbf-item:focus-within .tbf-dd{opacity:1;visibility:visible;transform:translateY(0)}

/* --- panels ------------------------------------------------------------- */
.tbf-dd{
  border-radius:0 0 14px 14px;
  padding:10px;
  box-shadow:0 30px 64px rgba(8,25,55,.28),0 3px 12px rgba(8,25,55,.10);
}
.tbf-dd a{
  position:relative;padding:9px 12px 9px 15px;border-radius:9px;
  font-size:.86rem;font-weight:500;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.tbf-dd a::before{
  content:"";position:absolute;left:5px;top:50%;width:3px;height:17px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),#F8C86F);
  transform:translateY(-50%) scaleY(0);transform-origin:center;
  transition:transform .17s var(--ease);
}
.tbf-dd a:hover::before,.tbf-dd a:focus-visible::before{transform:translateY(-50%) scaleY(1)}
.tbf-dd a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* --- the wide resume-suite panel ---------------------------------------- */
.tbf-dd-wide{
  min-width:812px;gap:1px 26px;padding:20px 22px 18px;
  grid-template-columns:repeat(4,minmax(184px,1fr));
}
.tbf-dd-wide .tbf-col + .tbf-col::before{
  content:"";position:absolute;left:-13px;top:4px;bottom:4px;width:1px;background:var(--line);
}
.tbf-dd-wide .tbf-col{position:relative}
.tbf-col b{
  font-size:.6rem;letter-spacing:.13em;color:var(--muted);
  padding:2px 10px 10px;position:relative;
}
.tbf-col b::after{
  content:"";position:absolute;left:10px;bottom:4px;width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),#F8C86F);
}
.tbf-dd-wide a{padding:7px 10px 7px 14px;font-size:.855rem}

@media(prefers-reduced-motion:reduce){
  .tbf-dd,.tbf-dd a,.tbf-dd a::before,.tbf-item .tbf-top,.tbf-c{transition:none}
}

/* Restore the panel's intended 2-column fallback: the min-width in the polish
   block above is declared later than the original @media rule and was silently
   winning, so the panel stayed 4-up and 858px wide on narrow desktops. */
@media(max-width:1280px){
  .tbf-dd-wide{grid-template-columns:repeat(2,minmax(186px,1fr));min-width:436px;padding:18px 18px 16px}
  .tbf-dd-wide .tbf-col:nth-child(3)::before{display:none}
}


/* ==== footer-dm.css ==== */
.ws-nl{background:linear-gradient(135deg,#1B3A6B,#12294D);border-radius:18px;padding:38px 30px;color:#fff;text-align:center;margin:30px 0}.ws-nl-title{color:#fff;font-size:24px;font-weight:800;margin:0 0 8px}.ws-nl-sub{color:#CDD8EA;font-size:14.5px;margin:0 auto 20px;max-width:700px}.ws-nl-form{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap}.ws-nl-form input{flex:1;min-width:140px;padding:13px 15px;border:0;border-radius:11px;font-size:15px;background:#fff;color:#0F1B2D}.ws-nl-form input:focus{outline:3px solid rgb(232 160 32 / .5)}.ws-nl-form button{background:linear-gradient(135deg,#E8A020,#C8880A);color:#fff;border:0;border-radius:11px;padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}.ws-nl-form button:hover{filter:brightness(1.06)}.ws-nl-msg{margin-top:13px;font-size:13.5px;min-height:18px}.ws-nl-msg.ok{color:#9be8c0}.ws-nl-msg.err{color:#ffc9c9}@media(max-width:520px){.ws-nl-form{flex-direction:column}}.ws-nl-band{max-width:1180px;margin:46px auto 0;padding:0 20px}

/* ── Main Footer ─────────────────────────────────────────── */
.ftr-main { background:#0A1628; color:rgba(255,255,255,0.6); padding:72px 0 0; }
.ftr-inner { max-width:1280px; margin:0 auto; padding:0 24px; }

/* ── CTA Strip ───────────────────────────────────────────── */
.ftr-cta-strip {
  background:linear-gradient(90deg,rgba(27,58,107,0.85),rgba(13,42,90,0.85));
  border:1px solid rgba(232,160,32,0.25); border-radius:12px;
  padding:18px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:56px;
}
.ftr-cta-text { font-family:var(--font-body); font-size:0.86rem; color:rgba(255,255,255,0.8); }
.ftr-cta-text strong { color:#fff; font-family:var(--font-body); }
.ftr-cta-btn  { display:inline-flex; align-items:center; gap:7px; background:#E8A020; color:#fff !important; font-family:var(--font-body); font-weight:700; font-size:0.82rem; padding:11px 22px; border-radius:6px; white-space:nowrap; flex-shrink:0; transition:all 0.3s; text-decoration:none !important; }
.ftr-cta-btn:hover { background:#C8880A; transform:translateY(-1px); }

/* ── 4-column Grid ───────────────────────────────────────── */
.ftr-grid { display:grid; grid-template-columns:1.6fr 1fr 1.1fr 1.1fr; gap:48px; margin-bottom:52px; }

/* ── Column headings ─────────────────────────────────────── */
.ftr-col h4 { font-family:var(--font-body); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:#fff; margin-bottom:18px; padding-bottom:10px; position:relative; }
.ftr-col h4::after { content:''; position:absolute; bottom:0; left:0; width:28px; height:2px; background:#E8A020; border-radius:2px; }

/* ── Col 1: Brand ────────────────────────────────────────── */
.ftr-logo-wrap { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ftr-logo-icon { width:40px; height:40px; background:linear-gradient(135deg,#1B3A6B,#2A5298); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ftr-logo-icon svg { width:18px; height:18px; fill:#fff; }
.ftr-logo-name { font-family:var(--font-body); font-weight:800; color:#fff; font-size:1.05rem; line-height:1; }
.ftr-logo-sub  { font-family:var(--font-body); font-size:0.58rem; color:rgba(255,255,255,0.38); letter-spacing:1.2px; text-transform:uppercase; margin-top:3px; }
.ftr-desc { font-family:var(--font-body); font-size:0.81rem; color:rgba(255,255,255,0.52); line-height:1.85; margin-bottom:18px; }
.ftr-badges { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.ftr-badge { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:0.74rem; color:rgba(255,255,255,0.58); }

/* ── Social icons ────────────────────────────────────────── */
.ftr-social { display:flex; gap:9px; flex-wrap:wrap; }
.ftr-soc-btn { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); font-size:0.82rem; font-family:var(--font-body); font-weight:700; transition:all 0.3s; text-decoration:none !important; }
.ftr-soc-btn:hover { background:#E8A020; color:#fff !important; border-color:#E8A020; transform:translateY(-2px); }

/* ── Col 2: Services ─────────────────────────────────────── */
.ftr-links { display:flex; flex-direction:column; gap:6px; }
.ftr-link  { font-family:var(--font-body); font-size:0.8rem; color:rgba(255,255,255,0.52); transition:all 0.25s; display:flex; align-items:center; gap:5px; padding:2px 0; text-decoration:none !important; }
.ftr-link::before { content:'›'; color:#E8A020; font-weight:700; flex-shrink:0; }
.ftr-link:hover { color:#E8A020 !important; padding-left:4px; }
.ftr-link.all { color:#E8A020 !important; font-weight:700; margin-top:6px; }

/* ── Col 3: Quick Links + Tools ──────────────────────────── */
.ftr-tools { display:flex; flex-direction:column; gap:7px; margin-top:18px; }
.ftr-tool  { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:8px; transition:all 0.25s; text-decoration:none !important; }
.ftr-tool:hover { background:rgba(232,160,32,0.1); border-color:rgba(232,160,32,0.25); }
.ftr-tool-icon { font-size:0.95rem; flex-shrink:0; margin-top:1px; }
.ftr-tool-name { font-family:var(--font-body); font-size:0.74rem; font-weight:700; color:rgba(255,255,255,0.72); display:block; }
.ftr-tool-desc { font-family:var(--font-body); font-size:0.66rem; color:rgba(255,255,255,0.36); line-height:1.4; }

/* ── Col 4: Contact + ArbsBuy ───────────────────────────── */
.ftr-arbsbuy { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:14px 16px; margin-bottom:18px; transition:all 0.3s; text-decoration:none !important; display:block; }
.ftr-arbsbuy:hover { border-color:rgba(232,160,32,0.35); background:rgba(232,160,32,0.06); }
.ftr-ab-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.ftr-ab-name { font-family:var(--font-body); font-size:0.84rem; font-weight:800; color:#E8A020; }
.ftr-ab-desc { font-family:var(--font-body); font-size:0.76rem; color:rgba(255,255,255,0.52); line-height:1.55; margin-bottom:8px; }
.ftr-ab-cta  { font-family:var(--font-body); font-size:0.72rem; font-weight:700; color:#E8A020; }

.ftr-contact { display:flex; flex-direction:column; gap:9px; }
.ftr-ci      { display:flex; align-items:flex-start; gap:9px; }
.ftr-ci-icon { font-size:0.88rem; margin-top:2px; flex-shrink:0; }
.ftr-ci-text { font-family:var(--font-body); font-size:0.78rem; color:rgba(255,255,255,0.52); line-height:1.5; }
.ftr-ci-text a { color:rgba(255,255,255,0.72) !important; transition:color 0.25s; text-decoration:none !important; }
.ftr-ci-text a:hover { color:#E8A020 !important; }
.ftr-ci-text .gold { color:#E8A020 !important; font-weight:700; }

/* ── Trust / Payment Bar ─────────────────────────────────── */
.ftr-trust { background:rgba(255,255,255,0.03); border-top:1px solid rgba(255,255,255,0.07); padding:18px 0; }
.ftr-trust-inner { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; max-width:1280px; margin:0 auto; padding:0 24px; }
.ftr-pay-badge { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); padding:5px 14px; border-radius:8px; font-size:0.71rem; font-family:var(--font-body); font-weight:600; color:rgba(255,255,255,0.45); }
.ftr-llc-badge { background:rgba(232,160,32,0.1); border:1px solid rgba(232,160,32,0.22); color:#E8A020; padding:5px 16px; border-radius:8px; font-size:0.71rem; font-family:var(--font-body); font-weight:700; }

/* ── Bottom Bar ──────────────────────────────────────────── */
.ftr-bottom { background:#070F1E; padding:16px 0; }
.ftr-bottom-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:1280px; margin:0 auto; padding:0 24px; }
.ftr-copy  { font-family:var(--font-body); font-size:0.74rem; color:rgba(255,255,255,0.28); }
.ftr-copy strong { color:rgba(255,255,255,0.45); }
.ftr-legal { display:flex; gap:0; flex-wrap:wrap; }
.ftr-legal a { font-family:var(--font-body); font-size:0.7rem; color:rgba(255,255,255,0.32); transition:color 0.25s; padding:0 10px; border-right:1px solid rgba(255,255,255,0.1); text-decoration:none !important; }
.ftr-legal a:last-child { border-right:none; }
.ftr-legal a:hover { color:#E8A020 !important; }
@media(max-width:640px){
  .ftr-grid{ grid-template-columns:1fr; gap:36px; }
  .ftr-bottom-inner{ flex-direction:column; text-align:center; }
  .ftr-legal{ justify-content:center; }
  .arb-cookie{ flex-direction:column; }
  .ftr-cta-strip{ flex-direction:column; text-align:center; }
}
/* ===== FOOTER PREMIUM POLISH (next-level) ===== */
.ftr-main{background:linear-gradient(180deg,#0b1e40 0%,#12294f 100%);position:relative}
.ftr-main::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#E8A020,transparent)}
.ftr-cta-strip{background:linear-gradient(120deg,rgba(232,160,32,.14),rgba(232,160,32,.03));border:1px solid rgba(232,160,32,.28);border-radius:16px;padding:26px 32px;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.ftr-cta-text strong{color:#fff}
.ftr-cta-btn{background:#E8A020;color:#0b1e40;font-weight:800;padding:.85em 1.6em;border-radius:10px;transition:.2s;box-shadow:0 6px 18px rgba(232,160,32,.35)}
.ftr-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,160,32,.5)}
.ftr-col h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;position:relative;padding-bottom:10px;margin-bottom:16px}
.ftr-col h4::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:#E8A020;border-radius:2px}
.ftr-link{color:#aebfd8;transition:.18s;display:inline-block}
.ftr-link:hover{color:#E8A020;transform:translateX(4px)}
.ftr-link.all{color:#E8A020;font-weight:700}
.ftr-logo-name{color:#fff}.ftr-logo-sub{color:#E8A020;letter-spacing:.08em}
.ftr-logo-icon svg{stroke:#E8A020}
.ftr-desc{color:#9fb2d1;line-height:1.7}
.ftr-badge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#c9d6ec;border-radius:8px}
.ftr-soc-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:.2s;font-weight:700}
.ftr-soc-btn:hover{background:#E8A020;color:#0b1e40;border-color:#E8A020;transform:translateY(-3px)}
.ftr-tool{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;transition:.2s;background:rgba(255,255,255,.02)}
.ftr-tool:hover{border-color:rgba(232,160,32,.5);background:rgba(232,160,32,.06);transform:translateY(-2px)}
.ftr-tool-name{color:#fff}.ftr-tool-desc{color:#8ea3c4}.ftr-tool-icon{color:#E8A020}
.ftr-ci-icon{color:#E8A020}.ftr-ci-text{color:#aebfd8}.ftr-ci-text a{color:#fff}.ftr-ci-text a:hover{color:#E8A020}
.gold{color:#E8A020}
.ftr-arbsbuy{display:block;background:linear-gradient(135deg,rgba(232,160,32,.1),rgba(255,255,255,.02));border:1px solid rgba(232,160,32,.3);border-radius:14px;padding:16px;transition:.25s}
.ftr-arbsbuy:hover{border-color:#E8A020;transform:translateY(-3px);box-shadow:0 14px 34px rgba(232,160,32,.2)}
.ftr-ab-name{color:#fff;font-weight:800;font-size:1.05rem}
.ftr-ab-desc{color:#9fb2d1;font-size:.85rem;margin:.4rem 0;line-height:1.6}
.ftr-ab-cta{color:#E8A020;font-weight:700;font-size:.88rem}
.ftr-trust{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.ftr-pay-badge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#c9d6ec;border-radius:8px;padding:.5em .9em;font-size:.8rem;transition:.15s}
.ftr-pay-badge:hover{border-color:rgba(232,160,32,.4)}
.ftr-llc-badge{background:rgba(232,160,32,.12);border:1px solid rgba(232,160,32,.3);color:#E8A020;border-radius:8px;padding:.5em .9em;font-weight:700;font-size:.8rem}
.ftr-copy{color:#9fb2d1}.ftr-copy strong{color:#fff}
.ftr-legal a{color:#aebfd8;transition:.15s}.ftr-legal a:hover{color:#E8A020}

/* footer logo badge + arrow spacing fixes */
.ftr-logo-icon{background:none!important;width:46px;height:46px;border-radius:12px;overflow:hidden}
.ftr-logo-icon img{width:46px;height:46px;display:block;border-radius:12px}
.ftr-link{display:flex;align-items:center;gap:7px}
.ftr-link::before{margin-right:1px}

/* ==========================================================================
   FOOTER — responsive + brand-token hardening (Aug 2026)
   The block above still names 'Montserrat' / 'Open Sans' in ~40 declarations.
   Neither font is loaded anywhere on the site, so they were silently falling
   back to the platform sans-serif and reading differently from the Inter used
   everywhere else. Mapped to the brand tokens here rather than editing 40
   lines, and the 4-column grid gets the intermediate steps it never had.
   ========================================================================== */
.ftr-main,.ftr-main *,
.ftr-trust,.ftr-trust *,
.ftr-bottom,.ftr-bottom *,
.ws-nl,.ws-nl *{font-family:var(--font-body,'Inter',system-ui,-apple-system,sans-serif)}
.ftr-main h2,.ftr-main h3,.ftr-main h4{font-family:var(--font-head,'Playfair Display',Georgia,serif)}

.ftr-main,.ftr-trust,.ftr-bottom{max-width:100%;overflow-x:clip}
.ftr-inner,.ftr-trust-inner,.ftr-bottom-inner{width:100%;min-width:0}
.ftr-grid>*,.ftr-col{min-width:0}
.ftr-col a,.ftr-link,.ftr-ci-text{overflow-wrap:anywhere}
.ftr-cta-strip{min-width:0}
.ftr-cta-text{min-width:0;overflow-wrap:anywhere}
.ftr-logo-icon{flex:0 0 auto}

/* 4 → 2 → 1. 640px straight from 4 columns to 1 left the tablet range broken. */
@media(max-width:1080px){
  .ftr-grid{grid-template-columns:1.4fr 1fr 1fr;gap:36px}
}
@media(max-width:860px){
  .ftr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px}
}
@media(max-width:640px){
  .ftr-main{padding:52px 0 0}
  .ftr-inner,.ftr-trust-inner,.ftr-bottom-inner{padding:0 16px}
  .ftr-grid{grid-template-columns:1fr;gap:30px;margin-bottom:36px}
  .ftr-cta-strip{padding:20px 18px;text-align:center;margin-bottom:36px}
  .ftr-cta-btn{width:100%;justify-content:center;min-height:46px}
  .ftr-legal{justify-content:center}
  .ftr-legal a{padding:6px 10px;min-height:32px;display:inline-flex;align-items:center}
  .ws-nl{padding:28px 18px;border-radius:14px}
  .ws-nl-band{padding:0 16px}
  .ws-nl-title{font-size:20px}
}
@media(max-width:400px){
  .ftr-trust-inner{gap:8px}
  .ftr-pay-badge,.ftr-llc-badge{font-size:.66rem;padding:5px 10px}
}
/* tap targets */
@media(max-width:760px){
  .ftr-col a,.ftr-link{display:inline-flex;align-items:center;min-height:38px}
  .ftr-soc-btn{width:44px;height:44px}
}