/* ===========================================================
   Mailroom Guides — design tokens
   Concept: a postal "routing" system for email knowledge.
   Categories are "routes", articles are "stops" along them.
=========================================================== */

:root{
  --paper:      #F2F4EE;
  --paper-dim:  #E4E8DD;
  --ink:        #10192E;
  --ink-soft:   #4E5972;
  --stamp:      #D68A2D;
  --stamp-deep: #B06B18;
  --route:      #1F7A68;
  --route-deep: #145C4D;
  --route-bright: #2FA88C;
  --line:       #D2D6C9;
  --white:      #FFFFFF;
  --danger:     #B33F2B;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 6px;
  --max: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--route-deep); text-decoration-thickness:1px; transition:color .15s ease;}
a:hover{color:var(--stamp-deep);}
a:focus-visible{outline:2px solid var(--route-bright); outline-offset:2px; border-radius:2px;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

h1,h2,h3{font-family:var(--font-display); color:var(--ink); line-height:1.15; margin:0 0 .5em;}
h1{font-size:clamp(2rem,4.5vw,3.2rem); font-weight:600;}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:600;}
h3{font-size:1.2rem; font-weight:600;}
p{margin:0 0 1em;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--route-deep);
}

/* ---- postmark badge, the signature element ---- */
.postmark{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--stamp-deep);
  border:1.5px solid var(--stamp);
  border-radius:999px;
  padding:3px 10px 3px 8px;
  transform:rotate(-1.5deg);
  background:rgba(201,138,46,.06);
}
.postmark::before{content:"✉";}

/* ---- route line: dotted horizontal rail with stops ---- */
.route-rail{
  display:flex;
  align-items:center;
  gap:0;
  margin:2.5rem 0;
  overflow-x:auto;
  padding-bottom:4px;
}
.route-rail .stop{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--ink-soft);
  white-space:nowrap;
  padding:0 14px;
  position:relative;
}
.route-rail .stop::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--route);
  display:inline-block;
  margin-right:6px;
  vertical-align:middle;
}
.route-rail .seg{
  flex:1 1 40px;
  height:1px;
  min-width:24px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px);
}

/* ---- header ---- */
header.site{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.brand .mark{
  width:26px; height:20px;
  border:2px solid var(--ink);
  border-radius:3px;
  position:relative;
  flex:0 0 auto;
}
.brand .mark::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 49%, var(--ink) 49% 51%, transparent 51%);
}
.navlinks{display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
.navlinks a{
  color:var(--ink); text-decoration:none; font-weight:500; font-size:.94rem;
}
.navlinks a:hover{color:var(--route-deep);}
.nav-search{
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 14px;
  font-family:var(--font-body);
  font-size:.85rem;
  background:var(--white);
  min-width:170px;
}
.navbtn{display:none;}

/* ---- hero ---- */
.hero{
  padding:64px 0 48px;
  border-bottom:1px solid var(--line);
}
.hero .lede{
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:640px;
}
.hero-disclaimer{
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--ink-soft);
  border-left:2px solid var(--stamp);
  padding-left:10px;
  max-width:560px;
}

/* ---- cards / grid ---- */
.grid{display:grid; gap:20px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .grid.cols-4, .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;}
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  text-decoration:none;
  color:var(--ink);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.card{border-top:3px solid transparent;}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(16,25,46,.10); border-top-color:var(--route);}
.card h3{margin:0; font-size:1.05rem;}
.card p{margin:0; color:var(--ink-soft); font-size:.92rem;}
.card .cat-tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--route-deep);
  background:rgba(31,122,104,.08);
  display:inline-block; padding:2px 8px; border-radius:4px; width:fit-content;
}

section.block{padding:48px 0;}
section.block.alt{background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap;}
.section-head a.viewall{font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;}

/* ---- category pill nav on category pages ---- */
.subnav{
  display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px;
}
.subnav a{
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  font-size:.85rem; text-decoration:none; color:var(--ink);
  background:var(--white);
}
.subnav a:hover, .subnav a.active{border-color:var(--route); color:var(--route-deep);}

/* ---- article layout ---- */
.article-header{padding:44px 0 24px; border-bottom:1px solid var(--line);}
.breadcrumbs{
  font-family:var(--font-mono); font-size:.75rem; color:var(--ink-soft);
  margin-bottom:14px;
}
.breadcrumbs a{color:var(--ink-soft);}
.meta-row{
  display:flex; gap:18px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft); margin-top:14px;
}
.article-body{max-width:720px; padding:36px 0;}
.article-body h2{margin-top:2em;}
.article-body h3{margin-top:1.6em;}
.article-body ul,.article-body ol{padding-left:1.3em;}
.article-body li{margin-bottom:.4em;}
.toc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; margin:28px 0;
}
.toc .eyebrow{margin-bottom:8px; display:block;}
.toc ul{margin:0; padding-left:1.1em;}
.toc a{color:var(--ink);}

.faq details{
  border-bottom:1px solid var(--line); padding:14px 0;
}
.faq summary{
  cursor:pointer; font-weight:600; font-family:var(--font-body);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+ "; color:var(--route-deep);}
.faq details[open] summary::before{content:"– ";}
.faq p{margin-top:10px; color:var(--ink-soft);}

.author-box{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-top:40px; background:var(--white);
}
.author-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--paper-dim); border:1px solid var(--line);
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; color:var(--route-deep);
}

aside.related{
  border-top:1px solid var(--line); padding:36px 0;
}

.callout{
  border-left:3px solid var(--route);
  background:var(--white);
  padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:1.6em 0;
  font-size:.95rem;
}
.callout.warn{border-color:var(--stamp);}

/* ---- footer ---- */
footer.site{
  border-top:1px solid var(--line);
  background:var(--paper-dim);
  padding:44px 0 28px;
  margin-top:40px;
  font-size:.9rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;
}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}
footer.site h4{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink); font-weight:700; margin:0 0 10px;
}
footer.site ul{list-style:none; margin:0; padding:0;}
footer.site li{margin-bottom:6px;}
footer.site a{color:var(--ink); text-decoration:none;}
footer.site a:hover{color:var(--route-deep);}
.footer-disclaimer{
  margin-top:32px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--ink-soft); font-size:.8rem; max-width:800px;
}
.footer-bottom{
  margin-top:18px; color:var(--ink-soft); font-size:.78rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}

/* ---- search box on 404 / homepage widget ---- */
.searchbox{
  display:flex; gap:8px; max-width:420px; margin-top:20px;
}
.searchbox input{
  flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.95rem;
}
.searchbox button{
  padding:10px 18px; border:none; border-radius:var(--radius);
  background:var(--ink); color:var(--white); font-weight:600; cursor:pointer;
}
.searchbox button:hover{background:var(--route-deep);}

.btn{
  display:inline-block; padding:10px 20px; border-radius:var(--radius);
  background:var(--route-deep); color:var(--white); text-decoration:none; font-weight:600; font-size:.92rem;
  transition:background .15s ease;
}
.btn:hover{background:var(--route-bright); color:var(--white);}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.ghost:hover{border-color:var(--route);}

@media (max-width:760px){
  .navlinks{display:none;}
  .nav-search{display:none;}
}

/* ============ emwb- namespaced tool styles (safe for WordPress embedding) ============ */
.emwb-tool-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  margin:24px 0;
}
.emwb-tool-label{
  display:block;
  font-family:var(--font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.emwb-tool-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.emwb-tool-input{
  flex:1;
  min-width:220px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:.95rem;
}
.emwb-tool-input:focus{outline:2px solid var(--route); outline-offset:1px;}
.emwb-tool-error{
  color:var(--danger);
  font-size:.85rem;
  margin-top:10px;
}
.emwb-results{margin-top:24px;}
.emwb-result-block{margin-bottom:22px;}
.emwb-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.emwb-result-head h3{margin:0; font-size:1rem;}
.emwb-tag{
  font-family:var(--font-mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px 8px;
  margin-left:8px;
  vertical-align:middle;
}
.emwb-tag-recommended{color:var(--route-deep); border-color:var(--route);}
.emwb-setting-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
}
@media (max-width:700px){
  .emwb-setting-grid{grid-template-columns:1fr 1fr;}
}
.emwb-setting{display:flex; flex-direction:column; gap:4px;}
.emwb-setting span{
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-soft);
}
.emwb-setting code{
  font-family:var(--font-mono);
  font-size:.88rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:4px 8px;
  word-break:break-all;
}
.emwb-copy-btn{
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
  color:var(--ink);
}
.emwb-copy-btn:hover{border-color:var(--route); color:var(--route-deep);}

.emwb-diagram-wrap{
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin:24px 0;
}

/* ===========================================================
   VISUAL ENHANCEMENT LAYER
   Refined colour system, subtle motion, stronger hierarchy.
   Additive only — does not remove or rename existing rules.
=========================================================== */

:root{
  --shadow-sm: 0 1px 2px rgba(16,25,46,.06);
  --shadow-md: 0 6px 16px rgba(16,25,46,.08);
  --shadow-lg: 0 14px 32px rgba(16,25,46,.12);
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 350ms;
  --success: #2E7D4F;
  --success-bg: rgba(46,125,79,.08);
}

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

/* ---- page-load fade-in ---- */
@keyframes emwb-fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero > .wrap{ animation: emwb-fade-up var(--dur-slow) var(--ease) both; }
.hero .lede{ animation: emwb-fade-up var(--dur-slow) var(--ease) 60ms both; }
.hero .searchbox{ animation: emwb-fade-up var(--dur-slow) var(--ease) 120ms both; }

/* ---- scroll reveal for cards/sections ---- */
.card, .emwb-tool-card, .emwb-diagram-wrap{
  animation: emwb-fade-up var(--dur-base) var(--ease) both;
}

/* ---- header ---- */
header.site{
  backdrop-filter: saturate(1.1);
  transition: box-shadow var(--dur-base) var(--ease);
}
header.site.emwb-scrolled{ box-shadow: var(--shadow-sm); }
.navlinks a{
  position:relative;
  padding-bottom:2px;
  transition: color var(--dur-fast) var(--ease);
}
.navlinks a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:var(--route);
  transition: right var(--dur-base) var(--ease);
  border-radius:2px;
}
.navlinks a:hover::after{ right:0; }
.nav-search{ transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.nav-search:focus{
  outline:none;
  border-color:var(--route);
  box-shadow:0 0 0 3px rgba(31,122,104,.14);
}

/* ---- buttons ---- */
.btn{
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active{ transform:translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible{ outline:2px solid var(--route-bright); outline-offset:2px; }
.btn.ghost{ box-shadow:none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn.ghost:hover{ transform:none; box-shadow:none; background:rgba(31,122,104,.06); }

/* ---- cards ---- */
.card{
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.card:hover{ box-shadow: var(--shadow-md); }

/* ---- inputs ---- */
.emwb-tool-input, .searchbox input{
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.emwb-tool-input:focus, .searchbox input:focus{
  outline:none;
  border-color:var(--route);
  box-shadow:0 0 0 3px rgba(31,122,104,.14);
}
.searchbox button{
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.searchbox button:hover{ transform:translateY(-1px); }

/* ---- tool result reveal ---- */
@keyframes emwb-result-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.emwb-results:not([hidden]){ animation: emwb-result-in var(--dur-base) var(--ease) both; }
.emwb-result-block{
  animation: emwb-result-in var(--dur-base) var(--ease) both;
}
.emwb-result-block:nth-of-type(2){ animation-delay: 60ms; }
.emwb-result-block:nth-of-type(3){ animation-delay: 120ms; }
.emwb-setting-grid{ transition: box-shadow var(--dur-fast) var(--ease); }

/* ---- copy button feedback ---- */
.emwb-copy-btn{ transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.emwb-copy-btn.emwb-copied{
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

/* ---- tool error state ---- */
.emwb-tool-error{
  animation: emwb-fade-up var(--dur-fast) var(--ease) both;
}
.emwb-tool-input.emwb-invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(179,63,43,.12);
}

/* ---- faq details animation ---- */
.faq details > summary{ transition: color var(--dur-fast) var(--ease); }
.faq details[open] p{ animation: emwb-fade-up var(--dur-fast) var(--ease) both; }

/* ---- footer link hover ---- */
footer.site a{ transition: color var(--dur-fast) var(--ease); }

/* ---- typography polish ---- */
h1{ letter-spacing:-0.01em; }
h2{ letter-spacing:-0.005em; }
.lede{ color: var(--ink-soft); }

/* ---- refined section rhythm on small screens ---- */
@media (max-width:480px){
  .hero{ padding:44px 0 32px; }
  section.block{ padding:36px 0; }
  .card{ padding:16px; }
  .emwb-tool-card{ padding:18px; }
  .emwb-setting-grid{ padding:10px; gap:8px; }
  .btn{ width:100%; text-align:center; }
  .searchbox{ flex-direction:column; }
  .searchbox button{ width:100%; }
}
@media (min-width:481px) and (max-width:767px){
  .emwb-tool-row{ flex-direction:column; }
  .emwb-tool-row .btn{ width:100%; }
}

.emwb-client-note{
  font-size:.85rem;
  color:var(--route-deep);
  background:rgba(31,122,104,.06);
  border-left:2px solid var(--route);
  padding:8px 12px;
  margin:0 0 18px;
  border-radius:0 4px 4px 0;
}

section[id], div[id]{scroll-margin-top: 90px;}
.page-section{border-bottom:6px solid var(--line);}


/* ================= LiberoMail.blog layer (v1) ================= */
html,body{max-width:100%;}
body.lmb{overflow-x:clip;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--white);padding:8px 14px;border-radius:var(--radius);}
.skip-link:focus{left:12px;}
#main{display:block;min-height:50vh;}
.page-section{border-bottom:0;}

/* header */
.lmb-header.emwb-scrolled{box-shadow:0 4px 18px rgba(16,25,46,.06);}
.lmb-header .nav{gap:20px;padding:12px 0;min-height:64px;}
.brand{gap:10px;flex:0 0 auto;}
.brand-mark{display:block;flex:0 0 auto;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink);line-height:1;}
.brand-tld{color:var(--route-deep);font-weight:600;}
.brand:hover .brand-name{color:var(--ink);}
.lmb-nav{flex:1 1 auto;display:flex;justify-content:center;}
.lmb-nav .navlinks{gap:4px;flex-wrap:nowrap;align-items:center;}
.lmb-nav .navlinks > li > a,.lmb-more{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border-radius:var(--radius);font-weight:500;font-size:.93rem;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--font-body);white-space:nowrap;}
.lmb-nav .navlinks > li > a:hover,.lmb-more:hover{color:var(--route-deep);background:rgba(31,122,104,.07);}
.lmb-nav .navlinks a[aria-current="page"]{color:var(--route-deep);box-shadow:inset 0 -2px 0 var(--route);border-radius:0;}
.has-sub{position:relative;}
.submenu{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:230px;list-style:none;margin:0;padding:6px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 28px rgba(16,25,46,.12);z-index:30;}
.has-sub.open .submenu{display:block;}
.has-sub.open .lmb-more svg{transform:rotate(180deg);}
.submenu a{display:block;padding:9px 12px;border-radius:4px;color:var(--ink);text-decoration:none;font-size:.92rem;}
.submenu a:hover{background:var(--paper);color:var(--route-deep);}
.lmb-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.lmb-search{display:flex;align-items:center;position:relative;}
.lmb-search .nav-search{min-width:0;width:180px;padding:8px 36px 8px 14px;}
.lmb-search-submit{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:none;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.lmb-search-submit:hover{color:var(--route-deep);}
.lmb-icon-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink);cursor:pointer;}
.lmb-icon-btn:hover{border-color:var(--route);color:var(--route-deep);}
.lmb-mobile-search{border-top:1px solid var(--line);padding:12px 0;background:var(--paper);}
.lmb-mobile-search .lmb-search .nav-search{width:100%;font-size:16px;padding:11px 40px 11px 14px;}
.lmb-mobile-search .lmb-search{width:100%;}

@media (max-width:1060px){
  .lmb-header .nav{gap:10px;}
  .lmb-search-desktop{display:none;}
  .lmb-icon-btn{display:inline-flex;}
  .lmb-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(16,25,46,.10);max-height:calc(100vh - 64px);overflow-y:auto;}
  .lmb-nav.open{display:block;}
  .lmb-header .wrap.nav{position:relative;}
  .lmb-nav .navlinks,.lmb-nav.open .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;max-width:var(--max);margin:0 auto;}
  .lmb-nav .navlinks > li{border-bottom:1px solid var(--line);}
  .lmb-nav .navlinks > li > a{display:flex;padding:14px 4px;min-height:48px;font-size:1rem;}
  .lmb-nav .navlinks a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--route);padding-left:12px;}
  .lmb-more{display:none;}
  .has-sub{border-bottom:0!important;}
  .submenu{display:block;position:static;box-shadow:none;border:0;background:none;padding:6px 0 0;min-width:0;}
  .submenu a{padding:12px 4px;min-height:44px;font-size:.95rem;color:var(--ink-soft);}
}
@media (max-width:760px){
  .navlinks{display:none;}
  .lmb-nav.open .navlinks{display:flex;}
  .brand-name{font-size:1.15rem;}
  .brand-mark{width:26px;height:21px;}
  .wrap{padding:0 18px;}
}

/* homepage */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none;}
.hero-chips a{display:inline-flex;align-items:center;min-height:38px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.86rem;text-decoration:none;color:var(--ink);background:var(--white);}
.hero-chips a:hover{border-color:var(--route);color:var(--route-deep);}
.hero .searchbox{max-width:520px;}
.hero .searchbox input{font-size:16px;min-width:0;}
.card-compact{padding:18px;}
.card-compact h3{font-size:1.05rem;}
.card-compact p{font-size:.88rem;}
.home-article{max-width:760px;}
.home-article h3{margin-top:1.6em;font-size:1.25rem;}
.home-article .faq h3{margin-top:2em;}
.topic-links{list-style:none;margin:6px 0 0;padding:0;}
.topic-links li{padding:7px 0;border-top:1px solid var(--line);font-size:.92rem;}
.topic-links a{text-decoration:none;color:var(--ink);}
.topic-links a:hover{color:var(--route-deep);}
.topic-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.topic-box h3{margin:0 0 6px;font-size:1.1rem;}
.topic-box h3 a{color:var(--ink);text-decoration:none;}
.topic-box .viewall{display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;}

/* hubs + posts */
.hub-hero{padding:44px 0 30px;}
.lmb-link-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;}
.lmb-link-list li{border-top:1px solid var(--line);}
.lmb-link-list a{display:block;padding:12px 0;color:var(--ink);text-decoration:none;font-weight:500;}
.lmb-link-list a:hover{color:var(--route-deep);}
.lmb-more-in{margin-top:0;}
.lmb-count{color:var(--ink-soft);font-size:.9rem;}
footer.site .brand{margin-bottom:10px;}
.footer-about{max-width:280px;color:var(--ink-soft);font-size:.88rem;}
@media (max-width:600px){
  .lmb-link-list{grid-template-columns:1fr;}
  .hero{padding:40px 0 32px;}
  section.block{padding:36px 0;}
  .article-header{padding:30px 0 20px;}
  .article-body{padding:26px 0;}
  .searchbox{flex-wrap:wrap;}
  .searchbox button{min-height:44px;}
  .section-head{margin-bottom:16px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  footer.site li a{display:inline-block;padding:4px 0;}
}

/* overflow safety */
.article-body table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;}
.article-body pre,.article-body code{white-space:pre-wrap;word-break:break-word;}
.article-body,.card,.callout,.emwb-tool-card{overflow-wrap:break-word;}
.subnav{max-width:100%;}