/* ===== One type family site-wide: the header's Fivo Sans (all weights under one name, same files as main-shared). Monospace only for real code. ===== */
@font-face{font-family:"Fivo";src:url("../fonts/fivosans/fivosans-light-webfont.woff2") format("woff2"),url("../fonts/fivosans/fivosans-light-webfont.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Fivo";src:url("../fonts/fivosans/fivosans-regular-webfont.woff2") format("woff2"),url("../fonts/fivosans/fivosans-regular-webfont.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fivo";src:url("../fonts/fivosans/fivosans-medium-webfont.woff2") format("woff2"),url("../fonts/fivosans/fivosans-medium-webfont.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fivo";src:url("../fonts/fivosans/fivosans-bold-webfont.woff2") format("woff2"),url("../fonts/fivosans/fivosans-bold-webfont.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
body.tools-page{--font-inter:"Fivo","Fivo Sans Regular",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--font-mono:"Fivo","Fivo Sans Regular",system-ui,sans-serif;--font-eyebrow:"Fivo","Fivo Sans Regular",system-ui,sans-serif;--font-code:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace}
body.tools-page svg text{font-family:"Fivo","Fivo Sans Bold",system-ui,sans-serif}
/* Tool-specific UI on top of the Mgroup site bundles (main-shared.css + main-service.css).
   Uses only canonical tokens from the design system. */

/* Stats row (hub) */
.stats{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(2,1fr);margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow-sm)}
.stat__num{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);color:var(--c-navy);line-height:1;margin-bottom:.4rem;letter-spacing:var(--tracking-tight)}
.stat__label{color:var(--c-text-muted);font-size:var(--fs-small)}

/* Tool layout */
.tool{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
@media (min-width:1024px){.tool{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.tool--wide{grid-template-columns:1fr}.panel--sticky{position:sticky;top:96px}}
.panel{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:clamp(1.25rem,2.5vw,2rem);box-shadow:var(--shadow-sm)}
.panel h2{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--c-navy);margin:0 0 1rem;letter-spacing:var(--tracking-tight)}
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label,.field__label{font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--c-navy)}
.field .hint{font-size:var(--fs-xs);color:var(--c-slate);line-height:1.5}
.field .hint a{color:var(--c-indigo)}
.input{width:100%;font:inherit;font-size:var(--fs-body);color:var(--c-ink);background:var(--c-white);border:1.5px solid var(--c-line);border-radius:var(--r-md);padding:.75rem .9rem;transition:border-color var(--d-fast)}
.input:focus{border-color:var(--c-indigo);outline:none;box-shadow:0 0 0 3px rgba(90,88,226,.15)}
.input-money{position:relative}
.input-money .input{padding-left:1.8rem}
.input-money::before{content:"$";position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--c-slate);font-weight:500}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-pill);padding:4px}
.seg label{position:relative;cursor:pointer;text-align:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);color:var(--c-charcoal);padding:.55rem .5rem;border-radius:var(--r-pill);transition:background var(--d-fast),color var(--d-fast)}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.seg label:has(input:checked){background:var(--c-navy);color:var(--c-white)}
.range{width:100%;accent-color:var(--c-indigo)}
.tool .btn{width:auto}

/* Results */
.result-hero{background:var(--c-navy);color:var(--c-white);border-radius:var(--r-lg);padding:1.5rem;position:relative;overflow:hidden;isolation:isolate;margin-bottom:var(--grid-gap)}
.result-hero::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(35% 45% at 90% 20%,rgba(64,208,255,.35),transparent 70%),radial-gradient(35% 45% at 10% 90%,rgba(90,88,226,.4),transparent 70%)}
.result-hero .eyebrow{color:var(--c-cyan);margin-bottom:.4rem}
.result-hero__num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1;letter-spacing:var(--tracking-tight)}
.result-hero__sub{color:var(--c-text-on-dark-muted);font-size:var(--fs-small);margin-top:.5rem}
.result-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(2,1fr);margin-bottom:var(--grid-gap)}
.result-mini{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-md);padding:1rem}
.result-mini__label{font-size:var(--fs-xs);color:var(--c-slate);font-family:var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;font-weight:700}
.result-mini__num{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);color:var(--c-navy);margin-top:.25rem}
.bars{display:grid;gap:.6rem}
.bar{display:grid;grid-template-columns:minmax(120px,160px) 1fr auto;align-items:center;gap:.75rem;font-size:var(--fs-small)}
.bar__label{color:var(--c-charcoal);font-weight:500}
.bar__track{height:10px;background:var(--c-paper);border-radius:var(--r-pill);overflow:hidden;box-shadow:inset 0 0 0 1px var(--c-line)}
.bar__fill{height:100%;border-radius:var(--r-pill);background:var(--gradient-brand);transition:width var(--d-normal) var(--ease-out)}
.bar__val{font-family:var(--font-display);font-weight:700;color:var(--c-navy);min-width:5ch;text-align:right}
.note{font-size:var(--fs-small);color:var(--c-slate);border-left:2px solid var(--c-line);padding-left:.9rem;margin:1.25rem 0 0;line-height:1.55}
.callout{background:var(--gradient-soft);border:1px solid rgba(90,88,226,.14);border-radius:var(--r-lg);padding:1.25rem 1.5rem;margin-top:var(--grid-gap)}
.callout p{margin:0;color:var(--c-text-muted)}
.callout strong{color:var(--c-navy)}
.callout a{color:var(--c-indigo)}

/* Checklist */
.progress{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.progress__track{flex:1;height:12px;background:var(--c-paper);border-radius:var(--r-pill);overflow:hidden;box-shadow:inset 0 0 0 1px var(--c-line)}
.progress__fill{height:100%;background:var(--gradient-brand);border-radius:var(--r-pill);transition:width var(--d-normal) var(--ease-out)}
.progress__num{font-family:var(--font-display);font-weight:700;color:var(--c-navy);min-width:4ch;text-align:right}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--grid-gap)}
.phase{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--grid-gap);overflow:hidden}
.phase summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1.1rem 1.5rem}
.phase summary::-webkit-details-marker{display:none}
.phase__num{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;color:var(--c-indigo);letter-spacing:var(--tracking-mono)}
.phase__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);color:var(--c-navy);margin:0;letter-spacing:var(--tracking-tight)}
.phase__count{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-slate);white-space:nowrap}
.phase__count.is-done{color:var(--c-indigo);font-weight:700}
.phase__body{border-top:1px solid var(--c-line);padding:1rem 1.5rem 1.25rem}
.phase__desc{color:var(--c-text-muted);font-size:var(--fs-small);margin:0 0 .9rem;line-height:1.55}
.phase__desc a{color:var(--c-indigo);font-weight:500}
.task{display:flex;gap:.9rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--c-line)}
.task:last-child{border-bottom:0}
.task input{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;height:22px;margin:1px 0 0;border-radius:6px;background:var(--c-paper);box-shadow:inset 0 0 0 1px var(--c-border-on-light,#D9DEE8);cursor:pointer;transition:background var(--d-fast)}
.task input:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 8' fill='none' stroke='%235A58E2' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,linear-gradient(135deg,rgba(64,208,255,.22),rgba(90,88,226,.22));box-shadow:inset 0 0 0 1px rgba(90,88,226,.14)}
.task label{cursor:pointer;flex:1;color:var(--c-text);line-height:1.5}
.task input:checked + label{color:var(--c-slate);text-decoration:line-through;text-decoration-color:rgba(90,88,226,.4)}

/* Snippets */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--grid-gap)}
.chip{font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);padding:.5rem 1rem;border-radius:var(--r-pill);border:1.5px solid var(--c-border-on-light,#D9DEE8);background:var(--c-white);color:var(--c-charcoal);cursor:pointer;transition:all var(--d-fast)}
.chip:hover{border-color:var(--c-indigo);color:var(--c-indigo)}
.chip[aria-pressed="true"]{background:var(--c-navy);border-color:var(--c-navy);color:var(--c-white)}
.snippet{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--grid-gap);overflow:hidden}
.snippet__head{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-start;justify-content:space-between;padding:1.25rem 1.5rem 0}
.snippet__head h2{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--c-navy);margin:0 0 .35rem;letter-spacing:var(--tracking-tight)}
.snippet__meta{display:flex;gap:.5rem;flex-wrap:wrap}
.tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--c-indigo);background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-pill);padding:3px 8px}
.snippet__desc{color:var(--c-text-muted);font-size:var(--fs-small);padding:0 1.5rem;margin:.5rem 0 1rem;line-height:1.55}
.snippet__desc a{color:var(--c-indigo);font-weight:500}
.snippet pre{margin:0;background:var(--c-navy);color:#E7ECFF;font-size:13px;line-height:1.6;padding:1.25rem 1.5rem;overflow-x:auto;tab-size:2;border-top:1px solid rgba(255,255,255,.08)}
.snippet pre code{font-family:var(--font-code);background:none;padding:0;color:inherit}
.tok-tag{color:var(--c-cyan)}.tok-obj{color:#B7B5FF}.tok-str{color:#9AE6B4}.tok-cmt{color:rgba(255,255,255,.45);font-style:italic}
.copy-btn.is-copied{background:var(--c-indigo);color:var(--c-white)}

/* Prose blocks under tools */
.prose p,.prose li{color:var(--c-text-muted);line-height:1.65}
.prose ul{padding-left:1.25rem;margin:0 0 1em}
.prose li{margin-bottom:.4rem}
.prose a{color:var(--c-indigo);font-weight:500}
.prose code{font-family:var(--font-code);font-size:.9em;background:var(--c-paper);border:1px solid var(--c-line);border-radius:6px;padding:.1em .4em}
.prose .section__title{margin-bottom:1rem}

/* Bento chips used as in-page anchors on the hub */
.bento__chips a{text-decoration:none}

@media (prefers-reduced-motion:reduce){.bar__fill,.progress__fill{transition:none}}

/* SEO content tables + h3 snippet titles */
.tools-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);margin:0 0 1.25rem}
.tools-table th,.tools-table td{text-align:left;vertical-align:top;padding:.8rem 1rem;border-bottom:1px solid var(--c-line);color:var(--c-text-muted);line-height:1.5}
.tools-table thead th{font-family:var(--font-display);font-weight:700;color:var(--c-white);background:var(--c-navy);border-bottom:0}
.tools-table tbody th{font-family:var(--font-display);font-weight:700;color:var(--c-navy);white-space:nowrap}
.tools-table tbody tr:last-child td,.tools-table tbody tr:last-child th{border-bottom:0}
.snippet__head h3{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--c-navy);margin:0 0 .35rem;letter-spacing:var(--tracking-tight)}
.prose h2.section__title{max-width:none}

/* Domain Authority Checker (hub) */
textarea.input{resize:vertical;min-height:9.5rem;font-family:var(--font-mono);font-size:var(--fs-small);line-height:1.6}
.tools-table-wrap{overflow-x:auto;margin:0 0 1rem}
.auth-table td,.auth-table th{white-space:nowrap}
.auth-table td small{color:var(--c-slate);white-space:normal;display:block;max-width:34ch;line-height:1.4;font-size:var(--fs-xs)}
.auth-table .is-up{color:#1E9E63;font-weight:700}
.auth-table .is-down{color:#C2410C;font-weight:700}
.score-pill{display:inline-block;min-width:3ch;text-align:center;font-family:var(--font-display);font-weight:700;padding:.2rem .6rem;border-radius:var(--r-pill);background:var(--c-paper);color:var(--c-navy);box-shadow:inset 0 0 0 1px var(--c-line)}
.score-pill--high{background:linear-gradient(135deg,rgba(64,208,255,.22),rgba(90,88,226,.22));color:var(--c-navy)}
.score-pill--mid{background:var(--c-paper)}
.score-pill--low{color:var(--c-slate)}
.score-pill--none{color:var(--c-slate);background:transparent;box-shadow:inset 0 0 0 1px var(--c-line)}
#auth-results .result-hero{margin-bottom:1rem}

.auth-table .muted{color:var(--c-slate)}
.score-pill--spam{background:transparent;box-shadow:inset 0 0 0 1px var(--c-line);color:var(--c-charcoal)}
.tool--wide .panel + .panel{margin-top:var(--grid-gap)}
.alert{background:var(--gradient-soft);border:1px solid rgba(90,88,226,.25);border-left:3px solid var(--c-indigo);border-radius:var(--r-md);padding:.9rem 1.1rem;margin:0 0 1rem;color:var(--c-navy);font-size:var(--fs-small);line-height:1.5}

.section__head .section__title--wide,.section__title--wide{max-width:none}

/* Hub bento: 2 full rows — hero + 2 tools on top, Brand Kit across the full width below */
/* Hub bento: two rows of two, staggered widths (3:2 on top, 2:3 below) */
@media (min-width:992px){.bento--staggered{grid-template-columns:repeat(5,minmax(0,1fr))}
.bento--staggered>.bento__cell:nth-child(1),.bento--staggered>.bento__cell:nth-child(4){grid-column:span 3}
.bento--staggered>.bento__cell:nth-child(2),.bento--staggered>.bento__cell:nth-child(3){grid-column:span 2}
.bento--staggered .bento__cell--hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.bento--staggered>.bento__cell:not(.bento__cell--hero) .bento__visual{padding-top:clamp(1.5rem,3vw,2.5rem)}.bento--staggered>.bento__cell:not(.bento__cell--hero) .bento__visual svg{max-height:220px}}
@media (min-width:640px) and (max-width:991px){.bento__cell--hero{grid-column:1/-1}}

/* ===== Hub full-screen hero (brand palette only) ===== */
/* Canonical mgroupweb.com nav, homepage on-dark variant, edge to edge (top and scrolled states). */
.is-page-inner .hero-nav--on-dark:not(.is-scrolled){max-width:none;margin-inline:0}
.hero-nav--on-dark.is-scrolled{left:0;right:0;top:0;max-width:none;border-radius:0}
.hero-nav--on-dark.is-scrolled::before{border-radius:0}
.hero-nav--on-dark.is-scrolled.is-hidden{transform:translateY(-100%)}
body:not(.is-menu-open) .hero-nav--on-dark:not(.is-scrolled) .hero-nav__logo{color:var(--c-white)}
@media (min-width:992px){.is-page-inner .hero-nav--on-dark:not(.is-scrolled) .hero-nav__links a{color:var(--c-text-on-dark)}
.is-page-inner .hero-nav--on-dark:not(.is-scrolled) .hero-nav__links a:hover,.is-page-inner .hero-nav--on-dark:not(.is-scrolled) .hero-nav__links a[aria-current=page]{color:var(--c-white)}
.is-page-inner .hero-nav--on-dark:not(.is-scrolled) .hero-nav__cta{background:transparent;color:var(--c-white);border-color:rgba(255,255,255,.4)}
.is-page-inner .hero-nav--on-dark:not(.is-scrolled) .hero-nav__cta:hover,.is-page-inner .hero-nav--on-dark:not(.is-scrolled) .hero-nav__cta:focus-visible{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.7);color:var(--c-white)}}
body:not(.is-menu-open) .hero-nav--on-dark:not(.is-scrolled) .menuicon__bar,body:not(.is-menu-open) .hero-nav--on-dark:not(.is-scrolled) .menuicon__circle{stroke:var(--c-white)}
.fx-body{background:#F5F6FA}
.fx-hero{position:relative;z-index:1;height:100vh;height:100svh;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--container-pad) 3rem;overflow:hidden;background:#1F2544;color:#fff}
@media (min-width:768px){.fx-hero{justify-content:center;padding:0 var(--container-pad)}}
.fx-hero__video{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:70% center;background:#1F2544}
.fx-hero__veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg,rgba(31,37,68,.92) 0%,rgba(31,37,68,.35) 45%,rgba(31,37,68,0) 70%)}
@media (min-width:768px){.fx-hero__veil{background:linear-gradient(90deg,rgba(31,37,68,.9) 0%,rgba(31,37,68,.55) 35%,rgba(31,37,68,0) 60%)}}
.fx-hero__content{position:relative;z-index:1;max-width:36rem}
.fx-hero__intro{pointer-events:none;user-select:none;margin:0 0 1.25rem;font-size:clamp(18px,4vw,26px);line-height:1.3;font-weight:400;color:#fff;filter:blur(4px)}
.fx-type{margin:0 0 1.25rem;font-family:var(--font-body);font-size:clamp(18px,4vw,26px);line-height:1.35;font-weight:400;color:#fff;min-height:54px;letter-spacing:0}
@media (min-width:640px){.fx-hero__intro,.fx-type{margin-bottom:1.5rem}}
.fx-type .fx-word{white-space:nowrap}
.fx-type.is-typing .fx-ch{opacity:0}.fx-type.is-typing .fx-ch.on{opacity:1}
.fx-cursor{display:inline-block;width:2px;height:1.1em;background:#40D0FF;vertical-align:middle;margin-left:2px;animation:fx-blink 1s step-end infinite}
@keyframes fx-blink{0%,100%{opacity:1}50%{opacity:0}}
.fx-pills{display:flex;flex-wrap:wrap;row-gap:.25rem;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.fx-pills.is-in{opacity:1;transform:none}
.fx-pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;border-radius:999px;font-size:13px;line-height:1.4;padding:.3em 1rem;margin:0 .2em .4em;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s;cursor:pointer;font-family:var(--font-body)}
@media (min-width:640px){.fx-pill{font-size:15px;padding-left:1.25rem;padding-right:1.25rem}}
.fx-pill--solid{background:#fff;color:#1F2544;border:1px solid rgba(31,37,68,.1)}
.fx-pill--solid:hover,.fx-pill--solid:focus-visible{background:#5A58E2;color:#fff;border-color:#5A58E2}
.fx-pill--outline{background:transparent;color:#fff;border:1px solid #fff}
@media (min-width:640px){.fx-pill--outline{gap:.75rem}}
.fx-pill--outline u{text-underline-offset:2px}
.fx-pill--outline:hover,.fx-pill--outline:focus-visible{background:#fff;color:#1F2544}
.fx-pill--outline.is-copied{background:#40D0FF;color:#1F2544;border-color:#40D0FF}
.fx-pill svg{width:12px;height:12px;flex:0 0 12px}
.fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.fx-pills{transition:none}.fx-cursor{animation:none}}

/* Hero byline: author + updated date (E-E-A-T / freshness) */
.hero-byline{display:block;margin-top:.75rem;font-size:.875em;opacity:.72}
.hero-byline a{color:inherit;text-decoration:underline;text-underline-offset:3px}
