/* ==========================================================================
   Be Online — site chrome 8.0 (every page)
   Loaded at wp_enqueue_scripts priority 100, i.e. AFTER be-shell.css (99), so
   these declarations win on source order without specificity tricks.

   1. Type scale — the Be Connect 2026 scale the owner reads as "natural".
      Measured at 1440px on 2026-10-08: Be Connect body 15.5 / h2 32 / card
      title 17.5; Be Online was 17.5 / 40 / 28.4. Hanken Grotesk has a smaller
      x-height than Poppins, so body is set at 16 to read at the same size.
   2. Footer — dark forest, brand block + four columns, button accordions.
   ========================================================================== */

:root{
  --be-body:16px;
  --be-body-card:15px;
  --be-small:13.5px;
  --be-eyebrow:11.5px;
  --be-h1-page:clamp(30px,calc(23px + 1.5vw),46px);
  --be-h2:clamp(24px,calc(19.5px + .95vw),34px);
  --be-h3:clamp(18px,calc(16.6px + .3vw),21px);
  --be-h3-card:clamp(16px,calc(15.3px + .17vw),18px);
  --be-lede:clamp(16px,calc(15.3px + .18vw),18px);
  --be-lede-hero:clamp(16.5px,calc(15.5px + .25vw),19px);
  --be-sec-y:clamp(28px,3vw,46px);
  --be-sec-y-tight:clamp(22px,2.3vw,32px);
  --be-btn:15px;
  --be-btn-h:46px;
}
@media (max-width:640px){
  :root{ --be-body:16px; }
}
body{font-size:var(--be-body)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bf{position:relative;isolation:isolate;overflow:hidden;color:#b9cdb4;font:400 14px/1.6 "Hanken Grotesk",system-ui,sans-serif;
  background:
    radial-gradient(55% 120% at 92% 0%,rgba(140,198,63,.20),transparent 60%),
    radial-gradient(40% 90% at 0% 100%,rgba(21,160,78,.16),transparent 60%),
    linear-gradient(180deg,#0b3520,#06170e)}
.bf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.bf a{color:inherit;text-decoration:none}
.bf-wrap{max-width:var(--maxw,1680px);margin:0 auto;padding-inline:var(--be-gutter,clamp(16px,2.6vw,44px))}

.bf-top{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(0,3fr);gap:clamp(28px,4.5vw,80px);padding-block:clamp(30px,3.2vw,48px) 26px}
.bf-logo{display:inline-flex;align-items:center;gap:14px}
.bf-logo img{height:38px;width:auto;display:block}
.bf-tag{padding-left:13px;border-left:1px solid rgba(255,255,255,.26);font:600 9.5px/1.5 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:#d5e6cd;white-space:nowrap}
.bf-blurb{margin:16px 0 0;max-width:360px;font-size:14px;line-height:1.6;color:#b9cdb4}
.bf-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px}
.bf-phone{display:inline-flex;align-items:center;gap:8px;min-height:40px;font:700 20px "Bricolage Grotesque",system-ui,sans-serif;color:#fff !important;white-space:nowrap}
.bf-phone svg{color:#8CC63F}
.bf-avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#cfe2c8}
.bf-avail i{width:8px;height:8px;border-radius:50%;background:#8CC63F;box-shadow:0 0 0 3px rgba(140,198,63,.25)}
.bf-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bf-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  background:#8CC63F;color:#10240f !important;font:700 14px "Bricolage Grotesque",system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 10px 22px -14px rgba(140,198,63,.9);transition:transform .16s,background .2s}
.bf-b:hover{transform:translateY(-2px);background:#9bd24f}
.bf-b2{background:rgba(255,255,255,.06);color:#fff !important;border:1px solid rgba(255,255,255,.26);box-shadow:none}
.bf-b2:hover{background:rgba(255,255,255,.12)}

.bf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.bf-h{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0 0 10px;border:0;background:none;text-align:left;
  font:700 15.5px "Bricolage Grotesque",system-ui,sans-serif;color:#fff;cursor:default}
.bf-h::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;background:#8CC63F}
.bf-h svg{display:none;flex:none;color:#a9c4a3;transition:transform .22s}
.bf-l{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.bf-l a{display:inline-block;font-size:14px;color:#b9cdb4;transition:color .15s,transform .15s}
.bf-l a:hover{color:#fff;transform:translateX(3px)}

.bf-bot{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-block:16px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#93ad8e}
.bf-bot p{margin:0;max-width:90ch}
.bf-legal{display:flex;gap:18px}
.bf-legal a{display:inline-flex;align-items:center;min-height:36px;color:#b9cdb4}
.bf-legal a:hover{color:#fff}
.bf-disc{margin:0 auto;padding-bottom:20px;font-size:12px;line-height:1.55;color:#7f9a7a}

/* tablet: brand block across the top, four columns under */
@media (max-width:1180px) and (min-width:901px){
  .bf-top{grid-template-columns:minmax(0,1fr)}
  .bf-brand{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"logo row" "blurb btns";gap:12px 40px;align-items:center}
  .bf-logo{grid-area:logo}.bf-row{grid-area:row;margin:0;justify-self:end}.bf-blurb{grid-area:blurb;margin:0}.bf-btns{grid-area:btns;margin:0;justify-self:end}
}
@media (max-width:900px) and (min-width:601px){
  .bf-top{grid-template-columns:minmax(0,1fr);gap:24px}
  .bf-blurb{max-width:none}
  .bf-btns{display:grid;grid-template-columns:1fr 1fr}
  .bf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .bf-bot{flex-direction:column;align-items:flex-start;gap:6px}
}
/* phone: button accordions — collapsed only once JS has armed them */
@media (max-width:600px){
  .bf-top{grid-template-columns:minmax(0,1fr);gap:18px;padding-block:26px 6px}
  .bf-logo img{height:34px}
  .bf-blurb{display:none}
  .bf-row{justify-content:space-between}
  .bf-btns{display:grid;grid-template-columns:1fr 1fr}
  .bf-cols{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid rgba(255,255,255,.1)}
  .bf-c{border-bottom:1px solid rgba(255,255,255,.1)}
  .bf-h{min-height:52px;padding:0 2px;cursor:pointer}
  .bf-h::after{display:none}
  .bf-h svg{display:block}
  html.bf-js .bf-l{display:none}
  .bf-l{margin:0 0 14px;grid-template-columns:1fr 1fr;gap:2px 12px}
  html.bf-js .bf-c.is-open .bf-l{display:grid}
  .bf-c.is-open .bf-h svg{transform:rotate(90deg)}
  .bf-l a{display:flex;align-items:center;min-height:42px;font-size:14.5px}
  .bf-bot{flex-direction:column;align-items:flex-start;gap:2px;padding-block:12px}
  .bf-bot p{font-size:12px}
  .bf-disc{font-size:11.5px;padding-bottom:16px}
  .bf-row{margin-top:12px}
  .bf-btns{margin-top:12px}
}
@media (max-width:380px){
  .bf-phone{font-size:18px}
  .bf-b{font-size:13px;padding:0 12px}
}
/* be-shell reserves the tab bar's 64px as padding on <html>, which paints in
   the canvas colour — the light page ground, propagated from <body>. Give the
   canvas the footer's colour on tab-bar widths so that strip continues the
   footer instead of showing a pale band beneath it. (body keeps its own
   background, so nothing above the footer changes.) */
@media (max-width:899px){
  html.be-has-tabbar{background:#06170e}
}

/* ==========================================================================
   8.0.1 — HEADER LOCKUP ON TABLET AND PHONE
   The tagline is two lines broken where the sentence breaks, the same at every
   width. No clamp and no ellipsis: on tablet and phone it used to read
   "Create Your / Online Presenc...". Each line is a block, so it only wraps
   further when the row has no room left (a 320px phone).
   ========================================================================== */
.bo-tag.bo-tag-2{display:block;max-width:none;min-width:0;overflow:visible;-webkit-line-clamp:none}
.bo-tag.bo-tag-2>span{display:block}
@media (max-width:899px){
  .bo-tag.bo-tag-2{font-size:11.5px;line-height:1.22}
}

/* Login: a person icon and the word, never a bare arrow */
.bo-login svg{flex:none;opacity:.85}
.bo-msheet-tr{display:flex;align-items:center;gap:8px}
.bo-msheet-acct{display:none !important}

/* Phone: the tagline needs Login's room (two lines of the tagline take ~150px;
   with Login in the row only ~116px is left on a 375px phone). Login moves to
   the top of the menu sheet, which the burger and the tab bar both open. */
@media (max-width:560px){
  .bo-navcta .bo-login{display:none !important}
  .bo-tag.bo-tag-2{font-size:clamp(10px,2.9vw,11.5px);line-height:1.2}
  .bo-msheet-acct{display:inline-flex !important;align-items:center;gap:7px;min-height:42px;padding:0 15px;border-radius:999px;
    border:1px solid var(--hair-strong);color:var(--ink);font:600 14.5px "Bricolage Grotesque",system-ui,sans-serif}
  .bo-msheet-acct[style*="display:none"],.bo-msheet-acct[style*="display: none"]{display:none !important}
  .bo-msheet-acct:hover{border-color:var(--accent);color:var(--accent)}
}

/* 8.0.1 — THE DESKTOP ROW BETWEEN 1241 AND 1480px
   Logo + two-line tagline + seven menu items + Login + Find Your Domain need
   ~1262px; at 1241 the row has 1147px. The browser was taking the difference
   out of the logo (squeezed from 130px to 79px wide) and the tagline (four
   lines). Now the logo never gives up width, and the row buys the room back
   from menu padding, gaps and the word "Login" (its icon and its accessible
   name stay) — in steps, so each width keeps as much as it can. Up to 1480: at 1440 the
   default row had 6px to spare, and at 1401 the tagline wrapped. */
.bo-brand{flex:none}
@media (min-width:1241px) and (max-width:1480px){
  .bo-tag.bo-tag-2{font-size:11.5px}
  .bo-mi>a{padding:0 9px}
  .bo-nav{gap:12px}
}
@media (min-width:1241px) and (max-width:1360px){
  .bo-navcta .bo-login{width:44px;padding:0;justify-content:center}
  .bo-navcta .bo-login span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:1241px) and (max-width:1300px){
  .bo-mi>a{padding:0 7px}
  .bo-nav{gap:10px;padding-inline:32px}
  .bo-brand img,.bo-brand .custom-logo,.bo-brand .custom-logo-link img{height:36px !important;max-height:36px}
}

/* 8.0.2 — corrected prices. The lime dot added after a price the browser had
   to correct made three hero chips 11px wider and wrapped the row at
   1101–1280px; the corrected number (and its brief tint) is signal enough.
   The dot stays on the domain price list, where it was designed to sit. */
.bo-price-live::after{content:none}
.bo-tld-price .bo-price-live::after{content:""}

/* ==========================================================================
   8.1.0 — MOBILE POLISH (from a 13-page phone sweep) + GUIDES RAIL
   ========================================================================== */
/* footer: the tagline was 9.5px; the legal links 36px tall */
.bf-tag{font-size:11px}
.bf-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.bf-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.bf-legal a:first-child{padding-left:0}
.bf-by{color:#cfe2c7;gap:.3em}
.bf-by b{font-weight:700;color:#fff}
.bf-by:hover b{color:#d6f5a8}

/* tap targets: everything you press is at least 44px tall */
.bo-brand .custom-logo-link{padding-block:7px}
.bo-crumb a{display:inline-flex;align-items:center;min-height:44px}
.bo-faq summary,.be-faq summary,.bo-seo-faq summary{min-height:48px;align-items:center;padding-block:12px}
.bo-single-help{min-height:44px;display:flex;align-items:center;justify-content:center}
.be-crumb a{display:inline-flex;align-items:center;min-height:44px}
.bf-logo{min-height:44px}
.bo-handoff-mark .custom-logo-link{display:flex;align-items:center;justify-content:center;min-height:44px}

/* compare table on a phone: wide enough columns to read, labels in plain
   type (not 11.5px uppercase mono), and buttons that stay one line — they
   were squeezed into three-line circles */
@media (max-width:760px){
  .bo-compare{min-width:0;width:max-content}
  .bo-compare tbody th,.bo-compare th[scope="row"]{min-width:128px;max-width:150px;font:600 13px/1.35 "Hanken Grotesk",system-ui,sans-serif;text-transform:none;letter-spacing:0;color:var(--ink-soft)}
  .bo-compare td,.bo-compare thead th:not(:first-child){width:164px;min-width:164px}
  .bo-compare .rstore-add-to-cart,.bo-compare button,.bo-compare .bo-btn{white-space:nowrap;min-height:42px;padding:0 16px!important;width:auto;border-radius:999px}
}

/* guides: a reading-progress line, and on wide screens a sticky rail beside
   the 760px reading column — contents, a domain search, a phone number */
.bo-progress{position:fixed;left:0;right:0;top:0;z-index:90;height:3px;pointer-events:none}
.bo-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--green));transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.bo-post-aside{display:none}
@media (min-width:1200px){
  .bo-post{--bo-post-gap:clamp(48px,5vw,104px)}
  /* the title block sits on the same grid, so crumb, title and text share one left edge */
  .bo-post .bo-sec-hero .bo-sec-inner{max-width:calc(760px + var(--bo-post-gap) + 330px + 2 * var(--be-gutter))}
  .bo-post-layout{display:grid;grid-template-columns:minmax(0,760px) 330px;gap:var(--bo-post-gap);justify-content:center;max-width:var(--maxw);margin:0 auto;padding:var(--be-sec-y) var(--be-gutter)}
  .bo-post-body .bo-post-layout .bo-post-main{max-width:none;margin:0;padding:0}
  .bo-post-aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--be-header-h,72px) + 24px);align-self:start}
}
.bo-post-body .bo-post-toc{padding:16px 14px 10px;border:1px solid var(--hair);border-radius:18px;background:var(--surface)}
.bo-post-body .bo-post-toc-h{margin:0 6px 6px;font:600 11.5px/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bo-post-body .bo-post-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.bo-post-body .bo-post-toc li{margin:0;font-size:inherit;line-height:inherit}
.bo-post-body .bo-post-toc a{text-decoration:none;font-weight:500;display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px;padding:7px 6px;border-radius:10px;font-size:14px;line-height:1.35;color:var(--ink-soft);transition:background-color .15s,color .15s}
.bo-post-body .bo-post-toc a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font:600 11px/1.6 "JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.bo-post-body .bo-post-toc a:hover,.bo-post-body .bo-post-toc a.is-here{background:var(--surface-2);color:var(--accent)}
.bo-post-body .bo-post-tool{padding:18px;border-radius:18px;color:#fff;background:radial-gradient(120% 90% at 100% 0%,rgba(140,198,63,.35),transparent 60%),linear-gradient(160deg,#124a2c,#0a2a19)}
.bo-post-body .bo-post-tool-h{color:#fff;margin:0 0 10px;font:700 18px/1.2 "Bricolage Grotesque",system-ui,sans-serif}
.bo-post-body .bo-post-search{display:flex;gap:6px;padding:5px 5px 5px 14px;border-radius:999px;background:#fff}
.bo-post-body .bo-post-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 15px "Hanken Grotesk",system-ui,sans-serif;color:#12261a}
.bo-post-body .bo-post-search button{flex:none;min-height:40px;padding:0 15px;border:0;border-radius:999px;background:var(--grad);color:#fff;font:600 14px "Bricolage Grotesque",system-ui,sans-serif;cursor:pointer}
.bo-post-body .bo-post-tool-note{margin:10px 4px 0;font-size:13px;color:rgba(255,255,255,.8)}
.bo-post-body .bo-post-tool-note b{color:#fff}
.bo-post-body .bo-post-help{text-decoration:none;font-weight:400;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border-radius:16px;border:1px solid var(--hair);background:var(--surface-2);font-size:14px;color:var(--muted)}
.bo-post-body .bo-post-help svg{flex:none;color:var(--accent)}
.bo-post-body .bo-post-help b{color:var(--ink)}


/* touch screens wider than a phone, in the house tiers: a tablet (601-899px)
   gets the AAA 44px phones get; a big touchscreen (900px+, which includes the
   owner's own laptop) gets 34px - still well clear of WCAG 2.5.8's 24px - so
   it keeps the compact desktop layout. A mouse is untouched. */
@media (pointer:coarse) and (min-width:601px){
  .bf-l{gap:0}
  .bf-l a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .bo-card-buy .bo-card-more{display:flex;align-items:center;justify-content:center;min-height:44px;padding-block:0}
  .bo-seo-links a{display:inline-flex;align-items:center;min-height:44px}
}
@media (pointer:coarse) and (min-width:900px){
  .bf-l a,.bo-card-buy .bo-card-more,.bo-seo-links a{min-height:34px}
  .bo-post-body .bo-post-toc a{padding-block:8px}
}