/* =========================================================
MakeSuccessOnline — editorial theme (v2, complete rewrite)
Tokens → base → layout → header → sections → single → footer
========================================================= */
:root {
--mso-bg: #FFFFFF; /* white */
--mso-surface: #FFFFFF;
--mso-ink: #0A0A0A; /* near black */
--mso-text: #1F2937; /* body text */
--mso-muted: #6B7280; /* cool gray */
--mso-line: #E5E7EB; /* cool hairline */
--mso-line-strong:#0A0A0A;
--mso-accent: #2563EB; /* vivid blue */
--mso-accent-ink:#1D4ED8; /* deeper blue for hover */
--mso-tag-bg: #EFF6FF; /* subtle blue tint */
--mso-footer-bg: #0A0A0A; /* near black */
--mso-footer-text:#D1D5DB;
--mso-radius: 6px;
--mso-radius-sm: 4px;
--mso-container: 1240px;
--mso-container-narrow: 760px;
--mso-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--mso-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--mso-serif: var(--mso-display); /* alias kept for backwards compat */
--mso-sans: var(--mso-body);
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
font-family: var(--mso-body);
font-size: 17px;
line-height: 1.6;
color: var(--mso-text);
background: var(--mso-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--mso-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease; }
a:hover { color: var(--mso-accent); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--mso-display);
color: var(--mso-ink);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 .6em;
}
h1 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 3vw, 38px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
em { font-style: italic; }
p { margin: 0 0 1em; }
::selection { background: var(--mso-ink); color: var(--mso-bg); }
.screen-reader-text {
border: 0; clip: rect(1px,1px,1px,1px); height: 1px; width: 1px;
overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
left: 10px; top: 10px; height: auto; width: auto; z-index: 1000;
background: var(--mso-ink); color: var(--mso-bg); padding: 10px 14px;
}
/* -------- Layout -------- */
.mso-container { width: 100%; max-width: var(--mso-container); margin: 0 auto; padding: 0 24px; }
.mso-container--narrow { max-width: var(--mso-container-narrow); }
/* -------- Reading progress bar (singles) -------- */
.mso-progress {
position: fixed; top: 0; left: 0; right: 0;
height: 2px; background: transparent;
z-index: 60;
}
.mso-progress__bar {
height: 100%; width: 0;
background: var(--mso-accent);
transition: width .1s linear;
}
/* -------- Header -------- */
.mso-site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in oklab, var(--mso-bg) 92%, transparent);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--mso-line);
}
.mso-site-header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 32px;
height: 72px;
}
/* Wordmark — serif editorial look */
.mso-wordmark {
display: inline-flex; align-items: baseline;
font-family: var(--mso-display);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.025em;
text-decoration: none;
color: var(--mso-ink);
}
.mso-wordmark__dark { color: var(--mso-ink); }
.mso-wordmark__accent { color: var(--mso-accent); font-weight: 600; font-style: normal; }
.mso-wordmark__accent em { font-style: normal; }
.mso-wordmark__dot { color: var(--mso-accent); }
.custom-logo-link img { max-height: 44px; width: auto; }
/* Nav */
.mso-nav { position: relative; }
.mso-nav__toggle {
display: none;
align-items: center; justify-content: center;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--mso-line);
border-radius: var(--mso-radius-sm);
cursor: pointer;
}
.mso-nav__bars { display: inline-block; width: 18px; height: 12px; position: relative; }
.mso-nav__bars span {
position: absolute; left: 0; right: 0; height: 1.5px; background: var(--mso-ink);
transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.mso-nav__bars span:nth-child(1) { top: 0; }
.mso-nav__bars span:nth-child(2) { top: 5px; }
.mso-nav__bars span:nth-child(3) { top: 10px; }
.mso-nav__toggle[aria-expanded="true"] .mso-nav__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.mso-nav__toggle[aria-expanded="true"] .mso-nav__bars span:nth-child(2) { opacity: 0; }
.mso-nav__toggle[aria-expanded="true"] .mso-nav__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
.mso-nav__menu {
list-style: none; margin: 0; padding: 0;
display: flex; gap: 4px;
align-items: center;
}
.mso-nav__menu a {
display: inline-block;
padding: 8px 14px;
color: var(--mso-ink);
font-size: 15px;
font-weight: 500;
text-decoration: none;
border-radius: var(--mso-radius-sm);
}
.mso-nav__menu a:hover { color: var(--mso-accent); }
.mso-nav__menu .current-menu-item > a { color: var(--mso-accent); }
@media (max-width: 820px) {
.mso-nav__toggle { display: inline-flex; }
.mso-nav__menu {
display: none;
position: absolute; right: 0; top: calc(100% + 12px);
flex-direction: column; align-items: stretch;
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: var(--mso-radius);
min-width: 220px;
padding: 8px;
box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
.mso-nav__menu.is-open { display: flex; }
.mso-nav__menu a { padding: 10px 14px; }
}
/* -------- Buttons -------- */
.mso-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 13px 22px;
border-radius: var(--mso-radius-sm);
font-family: var(--mso-sans);
font-weight: 600;
font-size: 15px;
line-height: 1;
text-decoration: none;
cursor: pointer;
border: 1.5px solid var(--mso-ink);
background: transparent;
color: var(--mso-ink);
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.mso-btn:hover { background: var(--mso-ink); color: var(--mso-bg); }
.mso-btn--primary { background: var(--mso-ink); color: var(--mso-bg); border-color: var(--mso-ink); }
.mso-btn--primary:hover { background: var(--mso-accent); border-color: var(--mso-accent); color: #fff; }
.mso-btn--accent { background: var(--mso-accent); color: #fff; border-color: var(--mso-accent); }
.mso-btn--accent:hover { background: var(--mso-accent-ink); border-color: var(--mso-accent-ink); color: #fff; }
.mso-btn--ghost { border-color: var(--mso-line); color: var(--mso-ink); }
.mso-btn--ghost:hover { border-color: var(--mso-ink); background: transparent; color: var(--mso-ink); }
.mso-btn--sm { padding: 9px 14px; font-size: 14px; }
/* -------- Chips / Tags -------- */
.mso-chip {
display: inline-flex; align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mso-ink);
background: var(--mso-tag-bg);
padding: 5px 10px;
border-radius: 999px;
text-decoration: none;
}
.mso-chip--accent { background: var(--mso-accent); color: #fff; }
.mso-chip a { text-decoration: none; color: inherit; }
/* -------- Section titles (editorial) -------- */
.mso-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--mso-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mso-muted);
margin: 0 0 14px;
}
.mso-eyebrow::before {
content: "";
display: inline-block;
width: 24px; height: 1.5px;
background: var(--mso-accent);
}
.mso-section-title {
font-family: var(--mso-display);
font-weight: 600;
letter-spacing: -0.025em;
margin: 0 0 36px;
line-height: 1.1;
}
.mso-section-title em { color: var(--mso-accent); font-style: normal; }
.mso-section-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: 36px;
padding-bottom: 18px;
border-bottom: 1px solid var(--mso-line);
}
.mso-section-header .mso-section-title { margin: 0; }
/* -------- Hero -------- */
.mso-hero { padding: 96px 0 72px; position: relative; overflow: hidden; }
.mso-hero--center { text-align: left; }
.mso-hero--center::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 60% at 15% 10%, color-mix(in oklab, var(--mso-accent) 10%, transparent), transparent 60%),
radial-gradient(ellipse 50% 50% at 100% 100%, color-mix(in oklab, var(--mso-accent) 6%, transparent), transparent 60%);
pointer-events: none;
}
.mso-hero > .mso-container { position: relative; }
.mso-hero__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.mso-eyebrow--center { justify-content: center; }
.mso-hero__title {
font-family: var(--mso-display);
font-weight: 600;
font-size: clamp(40px, 5.6vw, 72px);
line-height: 1.05;
letter-spacing: -0.035em;
margin: 14px 0 22px;
}
.mso-hero__title--center { text-align: center; }
.mso-hero__title em { font-style: normal; color: var(--mso-accent); font-weight: inherit; }
.mso-hero__sub {
font-size: clamp(16px, 1.4vw, 19px);
color: var(--mso-muted);
max-width: 60ch;
margin: 0 0 32px;
line-height: 1.6;
}
.mso-hero__sub--center { margin-left: auto; margin-right: auto; text-align: center; }
.mso-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mso-hero__actions--center { justify-content: center; }
/* Trust bar below the CTAs — live counts for each directory. */
.mso-hero__trust {
display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 0 20px;
margin-top: 44px;
padding: 18px 28px;
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 20px 48px -24px rgba(10,10,10,.08);
}
.mso-hero__trust-item {
display: inline-flex; align-items: baseline; gap: 6px;
color: var(--mso-ink); text-decoration: none;
padding: 6px 0;
border-bottom: 2px solid transparent;
transition: color .14s ease, border-color .14s ease;
}
.mso-hero__trust-item:hover { color: var(--mso-accent); border-bottom-color: var(--mso-accent); }
.mso-hero__trust-item strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mso-hero__trust-item span { font-size: 13px; color: var(--mso-muted); font-weight: 500; }
.mso-hero__trust-item--static { color: var(--mso-muted); font-size: 13px; }
.mso-hero__trust-item--static:hover { color: var(--mso-muted); border-bottom-color: transparent; }
.mso-hero__trust-sep { width: 1px; height: 20px; background: var(--mso-line); display: inline-block; }
@media (max-width: 640px) {
.mso-hero { padding: 72px 0 56px; }
.mso-hero__trust { padding: 14px 18px; gap: 10px 14px; }
.mso-hero__trust-sep { display: none; }
.mso-hero__trust-item { flex: 0 0 auto; }
}
/* Featured card inside hero */
.mso-featured {
position: relative;
display: block;
border: 1px solid var(--mso-line);
border-radius: var(--mso-radius);
overflow: hidden;
background: var(--mso-surface);
text-decoration: none;
color: inherit;
transition: transform .25s ease, border-color .2s ease, box-shadow .2s ease;
}
.mso-featured:hover {
transform: translateY(-3px);
border-color: var(--mso-ink);
box-shadow: 0 24px 50px rgba(0,0,0,.08);
}
.mso-featured__thumb {
aspect-ratio: 4 / 3;
background: #F3F4F6;
overflow: hidden;
}
.mso-featured__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mso-featured:hover .mso-featured__thumb img { transform: scale(1.03); }
.mso-featured__body { padding: 24px 26px 26px; }
.mso-featured__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mso-featured__title {
font-family: var(--mso-display);
font-weight: 600;
font-size: clamp(22px, 2.2vw, 26px);
line-height: 1.25;
margin: 0 0 10px;
color: var(--mso-ink);
letter-spacing: -0.02em;
}
.mso-featured__excerpt { color: var(--mso-muted); margin: 0; font-size: 15px; }
/* -------- Home-page pick strips (featured agencies + featured tools) -------- */
.mso-pickstrip { padding: 60px 0; border-top: 1px solid var(--mso-line); }
.mso-pickstrip__grid {
display: grid; gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mso-pickstrip__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mso-pickstrip__grid { grid-template-columns: repeat(4, 1fr); } }
.mso-pick {
position: relative;
display: flex; flex-direction: column;
padding: 22px 22px;
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 14px;
text-decoration: none; color: var(--mso-ink);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mso-pick:hover {
border-color: var(--mso-ink);
box-shadow: 0 10px 24px -10px rgba(10,10,10,.12);
transform: translateY(-2px);
}
.mso-pick--featured {
border-color: #F3C572;
box-shadow: 0 1px 2px rgba(234,179,8,.08), 0 10px 28px -16px rgba(234,179,8,.3);
}
.mso-pick--featured::before {
content: 'Featured';
position: absolute; top: 14px; right: 14px;
font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
background: linear-gradient(180deg, #FBBF24, #F59E0B); color: #432900;
padding: 4px 10px; border-radius: 999px;
box-shadow: 0 2px 8px rgba(234,179,8,.3);
}
.mso-pick__logo {
width: 56px; height: 56px; border-radius: 12px;
background: linear-gradient(135deg, #fff 0%, var(--mso-tag-bg) 100%);
display: flex; align-items: center; justify-content: center;
font-family: var(--mso-display); font-size: 24px; font-weight: 800;
color: var(--mso-accent);
letter-spacing: -0.02em;
overflow: hidden;
border: 1px solid var(--mso-line);
margin-bottom: 14px;
box-shadow: inset 0 -2px 0 rgba(10,10,10,.03);
}
.mso-pick__logo img { width: 100%; height: 100%; object-fit: cover; }
.mso-pick__name {
font-family: var(--mso-display); font-weight: 700; font-size: 17px;
line-height: 1.25; letter-spacing: -0.015em;
margin: 0 0 6px; color: var(--mso-ink);
}
.mso-pick:hover .mso-pick__name { color: var(--mso-accent); }
.mso-pick__tagline {
color: var(--mso-muted); font-size: 13.5px; line-height: 1.5;
margin: 0 0 14px; flex: 1;
}
.mso-pick__meta {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding-top: 12px;
border-top: 1px solid #F3F4F6;
}
.mso-pick__rating {
font-size: 13px; font-weight: 700; color: var(--mso-ink);
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 6px;
}
.mso-pick__sub { font-size: 12px; color: var(--mso-muted); text-align: right; }
/* -------- Latest posts (clean 3-column grid) -------- */
.mso-latest { padding: 60px 0; border-top: 1px solid var(--mso-line); }
.mso-latest__grid {
display: grid;
grid-template-columns: 1fr;
gap: 44px 36px;
}
@media (min-width: 700px) { .mso-latest__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mso-latest__grid { grid-template-columns: repeat(3, 1fr); } }
.mso-latest__more { margin-top: 44px; text-align: center; }
/* -------- Post card -------- */
.mso-card {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
background: transparent;
text-decoration: none;
color: inherit;
}
.mso-card__thumb {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #F3F4F6;
border-radius: var(--mso-radius-sm);
}
.mso-card__thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .4s ease, filter .25s ease;
}
.mso-card:hover .mso-card__thumb img { transform: scale(1.03); }
.mso-card__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mso-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; color: var(--mso-muted); font-size: 13px; }
.mso-card__title {
font-family: var(--mso-display);
font-weight: 600;
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.02em;
margin: 0 0 10px;
color: var(--mso-ink);
}
.mso-card__title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--mso-accent), var(--mso-accent)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.mso-card__title a:hover { background-size: 100% 1px; }
.mso-card__excerpt { color: var(--mso-muted); font-size: 15px; margin: 0; }
/* Big variant */
.mso-card--big .mso-card__thumb { aspect-ratio: 4 / 3; }
.mso-card--big .mso-card__title { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em; }
/* Compact (sidebar / list) */
.mso-card--mini {
display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start;
}
.mso-card--mini .mso-card__thumb { aspect-ratio: 1 / 1; border-radius: var(--mso-radius-sm); }
.mso-card--mini .mso-card__title { font-size: 17px; margin: 2px 0; }
.mso-card--mini .mso-card__meta { font-size: 12px; margin: 0 0 4px; }
/* -------- Topics / categories -------- */
.mso-topics { padding: 60px 0; border-top: 1px solid var(--mso-line); }
.mso-topics__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--mso-line);
border: 1px solid var(--mso-line);
border-radius: var(--mso-radius);
overflow: hidden;
}
@media (min-width: 700px) { .mso-topics__grid { grid-template-columns: repeat(4, 1fr); } }
.mso-topic {
background: var(--mso-surface);
padding: 28px 24px;
text-decoration: none;
color: var(--mso-ink);
display: flex; flex-direction: column; gap: 6px;
transition: background .2s ease;
}
.mso-topic:hover { background: var(--mso-tag-bg); color: var(--mso-ink); }
.mso-topic__name { font-family: var(--mso-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.mso-topic__count { color: var(--mso-muted); font-size: 13px; }
.mso-topic__arrow { margin-top: 8px; color: var(--mso-accent); font-size: 20px; line-height: 1; }
/* -------- Tool Reviews -------- */
.mso-reviews { padding: 60px 0; border-top: 1px solid var(--mso-line); }
.mso-reviews__list {
display: grid;
gap: 1px;
background: var(--mso-line);
border: 1px solid var(--mso-line);
border-radius: var(--mso-radius);
overflow: hidden;
}
.mso-review {
background: var(--mso-surface);
display: grid;
grid-template-columns: 1fr;
gap: 18px;
padding: 26px 28px;
text-decoration: none;
color: inherit;
align-items: center;
transition: background .2s ease;
}
@media (min-width: 800px) {
.mso-review { grid-template-columns: 60px 1fr auto auto; gap: 24px; }
}
.mso-review:hover { background: var(--mso-tag-bg); color: inherit; }
.mso-review__index { font-family: var(--mso-body); color: var(--mso-accent); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mso-review__title { font-family: var(--mso-display); font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 4px; letter-spacing: -0.02em; color: var(--mso-ink); }
.mso-review__meta { color: var(--mso-muted); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mso-review__rating { font-family: var(--mso-sans); font-weight: 600; color: var(--mso-ink); white-space: nowrap; }
.mso-review__rating span { color: var(--mso-accent); margin-right: 4px; letter-spacing: 1px; }
.mso-review__arrow { font-size: 20px; color: var(--mso-ink); line-height: 1; }
/* -------- Newsletter -------- */
.mso-newsletter { padding: 80px 0; border-top: 1px solid var(--mso-line); background: var(--mso-ink); color: var(--mso-bg); }
.mso-newsletter__inner {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.mso-newsletter__kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
color: var(--mso-accent);
margin: 0 0 16px;
}
.mso-newsletter__kicker::before { content: ""; width: 20px; height: 1.5px; background: var(--mso-accent); }
.mso-newsletter__kicker::after { content: ""; width: 20px; height: 1.5px; background: var(--mso-accent); }
.mso-newsletter__title { color: var(--mso-bg); font-family: var(--mso-display); font-weight: 600; font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.03em; margin: 0 0 14px; }
.mso-newsletter__sub { color: #D1D5DB; margin: 0 auto 28px; max-width: 46ch; font-size: 16px; line-height: 1.55; }
.mso-newsletter__form {
display: flex; gap: 8px;
max-width: 460px; margin: 0 auto;
padding: 6px; background: #171717; border: 1px solid #262626;
border-radius: 10px;
transition: border-color .15s ease;
}
.mso-newsletter__form:focus-within { border-color: var(--mso-accent); }
.mso-newsletter__form input[type=email] {
flex: 1; min-width: 0;
padding: 10px 14px;
border: 0;
background: transparent;
color: #fff;
font-family: inherit; font-size: 15px;
}
.mso-newsletter__form input[type=email]::placeholder { color: #9CA3AF; }
.mso-newsletter__form input[type=email]:focus { outline: none; }
.mso-newsletter__form button {
background: var(--mso-accent); color: #fff; border: 0; padding: 10px 20px; font-weight: 600; cursor: pointer;
border-radius: 6px; font-family: inherit; font-size: 15px;
white-space: nowrap;
transition: background .15s ease;
}
.mso-newsletter__form button:hover { background: var(--mso-accent-ink); }
.mso-newsletter__note { color: #9CA3AF; font-size: 13px; margin: 14px 0 0; }
/* -------- About strip -------- */
.mso-about-strip {
padding: 56px 24px;
background:
radial-gradient(1200px 240px at 50% 0%, #DCEAFE 0%, transparent 70%),
linear-gradient(180deg, #F5F8FF 0%, #EEF4FF 100%);
}
.mso-about-strip__inner {
max-width: 820px;
margin: 0 auto;
display: flex; align-items: center;
gap: 20px;
flex-wrap: wrap;
background: #FFFFFF;
border: 1px solid #DCE5F2;
border-radius: 12px;
padding: 20px 24px;
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.06);
}
.mso-about-strip__avatar {
width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
background: #EFF6FF;
flex-shrink: 0;
border: 2px solid #FFFFFF;
box-shadow: 0 0 0 1.5px var(--mso-accent);
}
.mso-about-strip__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mso-about-strip__text {
flex: 1; min-width: 240px;
color: var(--mso-text); font-size: 15px; line-height: 1.55;
margin: 0;
}
.mso-about-strip__text strong { color: var(--mso-ink); font-weight: 600; }
.mso-about-strip .mso-btn { flex-shrink: 0; }
/* -------- Social icons -------- */
.mso-social { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mso-social__link {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: transparent;
color: var(--mso-ink);
border: 1px solid var(--mso-line);
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mso-social__link:hover { background: var(--mso-ink); color: var(--mso-bg); border-color: var(--mso-ink); }
.mso-social--dark .mso-social__link { color: #fff; border-color: #2A2A2A; }
.mso-social--dark .mso-social__link:hover { background: var(--mso-accent); border-color: var(--mso-accent); color: #fff; }
.mso-icon { width: 16px; height: 16px; fill: currentColor; }
/* -------- Archive / search / page heros -------- */
.mso-page-hero {
padding: 80px 0 56px;
border-bottom: 1px solid var(--mso-line);
background:
radial-gradient(ellipse 60% 60% at 10% 0%, color-mix(in oklab, var(--mso-accent) 8%, transparent), transparent 55%),
radial-gradient(ellipse 50% 50% at 95% 100%, color-mix(in oklab, var(--mso-accent) 5%, transparent), transparent 55%);
}
.mso-page-hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
color: var(--mso-muted); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
margin: 0 0 18px; font-weight: 600;
}
.mso-page-hero__eyebrow::before {
content: ''; width: 28px; height: 2px; background: var(--mso-accent); display: inline-block;
}
.mso-page-hero__title {
font-family: var(--mso-display); font-weight: 600;
font-size: clamp(36px, 5vw, 60px);
letter-spacing: -0.03em; margin: 0; line-height: 1.08;
max-width: 22ch;
}
.mso-page-hero__desc { color: var(--mso-muted); margin: 18px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.6; }
.mso-page-hero__count {
color: var(--mso-muted); font-size: 13px; margin: 20px 0 0;
padding-top: 16px; border-top: 1px solid var(--mso-line);
display: inline-block; letter-spacing: .02em;
}
/* -------- Archive grid -------- */
.mso-archive { padding: 50px 0 70px; }
.mso-archive__grid {
display: grid; gap: 44px 36px;
grid-template-columns: 1fr;
}
@media (min-width: 760px) { .mso-archive__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .mso-archive__grid { grid-template-columns: repeat(3, 1fr); } }
/* -------- Single post -------- */
.mso-single { padding: 60px 0 80px; }
.mso-single__header { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.mso-single__meta-top { display: inline-flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 18px; }
.mso-single__title {
font-family: var(--mso-display);
font-weight: 600;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.15;
letter-spacing: -0.03em;
margin: 0 0 24px;
}
.mso-single__meta {
display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
color: var(--mso-muted); font-size: 14px;
}
.mso-single__meta img { width: 28px; height: 28px; border-radius: 50%; }
.mso-single__thumb {
max-width: 1100px; margin: 0 auto 50px;
border-radius: var(--mso-radius); overflow: hidden;
background: #0F172A;
}
.mso-single__thumb img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
display: block;
}
.mso-single__layout {
display: grid; gap: 56px;
grid-template-columns: 1fr;
max-width: 1180px; margin: 0 auto;
}
@media (min-width: 1024px) {
.mso-single__layout { grid-template-columns: 240px minmax(0, 760px) 180px; gap: 48px; justify-content: center; }
}
/* Sticky TOC */
.mso-toc { font-size: 14px; }
.mso-toc__title { font-family: var(--mso-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mso-muted); font-weight: 600; margin: 0 0 14px; }
.mso-toc ol, .mso-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--mso-line); }
.mso-toc li { margin: 0; padding: 0; }
.mso-toc a {
display: block;
padding: 6px 14px;
color: var(--mso-muted);
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -1px;
transition: color .15s ease, border-color .15s ease;
line-height: 1.4;
}
.mso-toc a:hover { color: var(--mso-ink); }
.mso-toc a.is-active { color: var(--mso-ink); border-left-color: var(--mso-accent); font-weight: 500; }
.mso-toc .mso-toc__h3 { padding-left: 28px; font-size: 13px; }
@media (min-width: 1024px) {
.mso-toc { position: sticky; top: 100px; align-self: start; }
}
@media (max-width: 1023px) {
.mso-toc { background: var(--mso-surface); border: 1px solid var(--mso-line); border-radius: var(--mso-radius); padding: 20px; }
.mso-toc ol, .mso-toc ul { border-left: 0; }
.mso-toc a { padding-left: 0; border-left: 0; }
.mso-toc a.is-active { border-left: 0; color: var(--mso-accent); }
}
/* Share buttons rail */
.mso-share {
display: flex; flex-direction: column; gap: 10px;
}
.mso-share__label { font-family: var(--mso-sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--mso-muted); margin: 0 0 4px; }
.mso-share__btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border: 1px solid var(--mso-line); border-radius: 50%;
color: var(--mso-ink); text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mso-share__btn:hover { background: var(--mso-ink); color: var(--mso-bg); border-color: var(--mso-ink); }
@media (min-width: 1024px) {
.mso-share { position: sticky; top: 100px; align-self: start; }
}
@media (max-width: 1023px) {
.mso-share { flex-direction: row; align-items: center; flex-wrap: wrap; }
.mso-share__label { margin: 0 10px 0 0; }
}
/* -------- Prose -------- */
.mso-prose { font-size: 18px; line-height: 1.7; color: var(--mso-text); font-family: var(--mso-body); }
.mso-prose > * + * { margin-top: 1.1em; }
.mso-prose h2 { font-size: clamp(26px, 2.4vw, 34px); margin-top: 2em; letter-spacing: -0.01em; }
.mso-prose h3 { font-size: clamp(20px, 1.8vw, 24px); margin-top: 1.5em; }
.mso-prose a { color: var(--mso-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mso-prose a:hover { color: var(--mso-accent); }
.mso-prose img { border-radius: var(--mso-radius-sm); }
.mso-prose blockquote {
margin: 1.4em 0;
padding: 12px 0 12px 24px;
border-left: 3px solid var(--mso-accent);
font-family: var(--mso-display);
font-size: 20px;
font-weight: 500;
color: var(--mso-ink);
line-height: 1.5;
letter-spacing: -0.015em;
}
.mso-prose blockquote p { margin: 0; }
.mso-prose pre {
background: #0F0F0F; color: #e6edf3;
padding: 18px 20px; border-radius: var(--mso-radius-sm); overflow: auto;
font-size: 14px; line-height: 1.6;
font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.mso-prose code {
background: var(--mso-tag-bg); color: var(--mso-ink);
padding: 2px 6px; border-radius: 4px; font-size: .9em;
font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.mso-prose pre code { background: transparent; padding: 0; color: inherit; }
.mso-prose ul, .mso-prose ol { padding-left: 1.4em; }
.mso-prose li + li { margin-top: 6px; }
.mso-prose hr { border: 0; border-top: 1px solid var(--mso-line); margin: 2em 0; }
.mso-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.mso-prose table th, .mso-prose table td { border-bottom: 1px solid var(--mso-line); padding: 12px 14px; text-align: left; vertical-align: top; }
.mso-prose table th { font-family: var(--mso-body); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mso-muted); border-bottom: 1.5px solid var(--mso-ink); }
/* Single footer: tags, author, related */
.mso-single__footer { max-width: 760px; margin: 56px auto 0; }
.mso-tags { margin: 0 0 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.mso-tags a { background: var(--mso-tag-bg); color: var(--mso-ink); padding: 6px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; }
.mso-tags a:hover { background: var(--mso-ink); color: var(--mso-bg); }
.mso-author {
display: grid;
grid-template-columns: 72px 1fr;
gap: 20px;
border-top: 1px solid var(--mso-line);
border-bottom: 1px solid var(--mso-line);
padding: 28px 0;
margin-bottom: 48px;
}
.mso-author__avatar img { border-radius: 50%; }
.mso-author__kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mso-muted); margin: 0 0 4px; }
.mso-author__name { font-family: var(--mso-display); font-size: 20px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.02em; }
.mso-author__bio { margin: 0; color: var(--mso-text); font-size: 15px; }
.mso-related { max-width: 1180px; margin: 0 auto; padding: 20px 24px 60px; }
.mso-related__title { font-family: var(--mso-display); font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; margin: 0 0 30px; }
.mso-related__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mso-related__grid { grid-template-columns: repeat(3, 1fr); } }
.mso-post-nav {
max-width: 760px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.mso-post-nav a { display: block; padding: 20px 0; color: var(--mso-ink); text-decoration: none; border-top: 1px solid var(--mso-line); }
.mso-post-nav__dir { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mso-muted); margin-bottom: 6px; }
.mso-post-nav__title { font-family: var(--mso-display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; line-height: 1.35; }
.mso-post-nav__next { text-align: right; }
.mso-post-nav a:hover .mso-post-nav__title { color: var(--mso-accent); }
/* -------- Pagination -------- */
.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nav-links a, .nav-links span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px; padding: 0 12px;
border-radius: var(--mso-radius-sm);
border: 1px solid var(--mso-line);
color: var(--mso-ink); font-weight: 600; text-decoration: none;
background: transparent;
}
.nav-links .current { background: var(--mso-ink); color: var(--mso-bg); border-color: var(--mso-ink); }
.nav-links a:hover { background: var(--mso-ink); color: var(--mso-bg); border-color: var(--mso-ink); }
/* -------- Comments -------- */
.mso-comments { max-width: 760px; margin: 60px auto 0; padding-top: 30px; border-top: 1px solid var(--mso-line); }
.mso-comments__title { font-family: var(--mso-display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; margin-bottom: 24px; }
.mso-comments__list { list-style: none; margin: 0; padding: 0; }
.mso-comments__list .comment { padding: 24px 0; border-bottom: 1px solid var(--mso-line); }
.mso-comments__list .children { list-style: none; padding-left: 32px; margin-top: 20px; }
.comment-body { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.comment-author .avatar { border-radius: 50%; }
.comment-meta { font-size: 13px; color: var(--mso-muted); margin-bottom: 6px; }
.comment-form label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--mso-ink); font-size: 14px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
width: 100%; padding: 12px 14px; border: 1px solid var(--mso-line); border-radius: var(--mso-radius-sm);
font-family: inherit; font-size: 15px; margin-bottom: 14px; background: var(--mso-surface); color: var(--mso-ink);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--mso-ink); }
.comment-form .form-submit input { background: var(--mso-ink); color: var(--mso-bg); border: 0; padding: 12px 22px; border-radius: var(--mso-radius-sm); font-weight: 600; cursor: pointer; }
/* -------- 404 -------- */
.mso-404 { padding: 80px 0 100px; }
.mso-404__inner {
max-width: 760px; text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.mso-404__title {
font-family: var(--mso-display); font-weight: 600;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.08; letter-spacing: -0.03em;
margin: 10px 0 20px;
max-width: 20ch;
}
.mso-404__title em { font-style: normal; color: var(--mso-accent); }
.mso-404__sub { color: var(--mso-muted); font-size: 17px; line-height: 1.55; margin: 0 0 32px; max-width: 54ch; }
.mso-404__search { width: 100%; max-width: 480px; margin: 0 auto 40px; }
.mso-404__search .mso-searchform { width: 100%; }
.mso-404__links {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 12px;
grid-template-columns: 1fr;
width: 100%; max-width: 560px;
text-align: left;
}
@media (min-width: 640px) {
.mso-404__links { grid-template-columns: 1fr 1fr; }
}
.mso-404__links a {
display: block; padding: 18px 20px;
border: 1px solid var(--mso-line); border-radius: var(--mso-radius);
background: #fff;
text-decoration: none; color: var(--mso-ink);
transition: border-color .15s ease, transform .15s ease;
}
.mso-404__links a:hover {
border-color: var(--mso-accent);
transform: translateY(-1px);
}
.mso-404__links-title {
display: block; font-weight: 600; font-size: 16px;
letter-spacing: -0.01em;
}
.mso-404__links-sub {
display: block; margin-top: 4px;
color: var(--mso-muted); font-size: 13px; line-height: 1.45;
}
.mso-404__recent {
margin-top: 80px; padding-top: 56px;
border-top: 1px solid var(--mso-line);
}
.mso-404__recent .mso-section-title { text-align: center; margin: 0 0 40px; }
/* Search form */
.mso-searchform { display: flex; gap: 8px; max-width: 480px; }
.mso-searchform__input {
flex: 1; padding: 12px 16px; border: 1px solid var(--mso-line); border-radius: var(--mso-radius-sm);
font-family: inherit; font-size: 15px; background: var(--mso-surface); color: var(--mso-ink);
}
.mso-searchform__input:focus { outline: none; border-color: var(--mso-ink); }
.mso-searchform__btn {
background: var(--mso-ink); color: var(--mso-bg); border: 0; border-radius: var(--mso-radius-sm);
padding: 0 18px; font-weight: 600; cursor: pointer;
}
.mso-searchform__btn:hover { background: var(--mso-accent); color: #fff; }
/* -------- Footer -------- */
.mso-site-footer {
background: var(--mso-footer-bg);
color: var(--mso-footer-text);
margin-top: 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mso-site-footer__top {
padding: 70px 0 40px;
display: grid; grid-template-columns: 1fr; gap: 44px;
}
@media (min-width: 900px) {
.mso-site-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.mso-site-footer .mso-wordmark,
.mso-site-footer .mso-wordmark__dark,
.mso-site-footer .mso-wordmark__accent { color: #fff; }
.mso-site-footer__about { margin: 18px 0 20px; color: #D1D5DB; max-width: 42ch; }
.mso-site-footer__col h4, .mso-site-footer__col .widget-title {
font-family: var(--mso-sans); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: #fff; margin: 0 0 18px;
}
.mso-site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.mso-site-footer__col li { padding: 6px 0; }
.mso-site-footer__col a { color: var(--mso-footer-text); text-decoration: none; }
.mso-site-footer__col a:hover { color: var(--mso-accent); }
.mso-site-footer__col--follow .mso-social { margin-top: 14px; }
.mso-site-footer__follow-note { margin: 0; color: #D1D5DB; max-width: 32ch; font-size: 14px; line-height: 1.55; }
.mso-site-footer__bottom {
border-top: 1px solid #1F1F1F;
padding: 20px 0;
}
.mso-site-footer__bottom-inner {
display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
font-size: 13px; color: #9CA3AF;
}
.mso-site-footer__bottom-inner p { margin: 0; }
.mso-site-footer__bottom-inner a { color: #D1D5DB; }
.mso-site-footer__bottom-inner a:hover { color: var(--mso-accent); }
/* -------- Alignments / Gutenberg basics -------- */
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.alignwide { width: calc(100% + 160px); max-width: 100vw; margin-left: -80px; margin-right: -80px; }
.alignleft { float: left; margin: .5em 1.2em .8em 0; }
.alignright { float: right; margin: .5em 0 .8em 1.2em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: var(--mso-muted); text-align: center; margin-top: 8px; font-family: var(--mso-sans); }
/* -------- Misc -------- */
.mso-empty { text-align: center; color: var(--mso-muted); padding: 60px 20px; }
.mso-noresults { text-align: center; padding: 70px 20px; }
.mso-noresults .mso-searchform { margin: 24px auto 0; }
/* ================= About page ================= */
.mso-about-hero { padding: 80px 0 60px; }
.mso-about-hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 900px) { .mso-about-hero__grid { grid-template-columns: 1.3fr 1fr; gap: 72px; } }
.mso-about-hero__title {
font-family: var(--mso-display);
font-weight: 600;
font-size: clamp(36px, 5vw, 60px);
line-height: 1.1;
letter-spacing: -0.035em;
margin: 12px 0 20px;
}
.mso-about-hero__title em { color: var(--mso-accent); font-style: normal; }
.mso-about-hero__sub { font-size: 18px; color: var(--mso-muted); line-height: 1.6; margin: 0 0 28px; max-width: 50ch; }
.mso-about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.mso-about-hero__photo {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border: 1px solid #DCE5F2;
box-shadow: 0 20px 60px rgba(37, 99, 235, 0.08);
}
.mso-about-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Stats row */
.mso-stats { padding: 50px 0; border-top: 1px solid var(--mso-line); border-bottom: 1px solid var(--mso-line); background: #FAFBFC; }
.mso-stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--mso-line);
border: 1px solid var(--mso-line);
border-radius: 10px;
overflow: hidden;
}
@media (min-width: 700px) { .mso-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.mso-stat {
background: #FFFFFF;
padding: 28px 24px;
text-align: center;
}
.mso-stat__value { font-family: var(--mso-display); font-weight: 600; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.03em; color: var(--mso-ink); line-height: 1; }
.mso-stat__value em { color: var(--mso-accent); font-style: normal; }
.mso-stat__label { display: block; color: var(--mso-muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; font-weight: 500; }
/* Topics cards (about page) */
.mso-about-topics { padding: 80px 0; }
.mso-about-topics__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 700px) { .mso-about-topics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mso-about-topics__grid { grid-template-columns: repeat(3, 1fr); } }
.mso-topic-card {
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 10px;
padding: 28px 26px;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mso-topic-card:hover { border-color: var(--mso-accent); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08); }
.mso-topic-card__icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: #EFF6FF; color: var(--mso-accent);
border-radius: 10px;
margin-bottom: 18px;
font-weight: 700; font-size: 18px; font-family: var(--mso-display); letter-spacing: -0.02em;
}
.mso-topic-card__name { font-family: var(--mso-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--mso-ink); }
.mso-topic-card__desc { margin: 0; color: var(--mso-muted); font-size: 15px; line-height: 1.55; }
/* About story — long form */
.mso-about-story { padding: 80px 0; }
.mso-about-story__inner { max-width: 760px; margin: 0 auto; }
.mso-about-story .mso-section-title { font-size: clamp(28px, 3.4vw, 44px); margin: 10px 0 24px; max-width: 22ch; }
.mso-about-story .mso-prose p { font-size: 17px; line-height: 1.7; color: var(--mso-text); }
.mso-about-story .mso-prose p + p { margin-top: 20px; }
/* Hero monogram fallback when no featured image is uploaded */
.mso-about-hero__initial {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--mso-display); font-weight: 600;
font-size: clamp(80px, 14vw, 180px);
letter-spacing: -0.05em;
color: var(--mso-accent);
background:
radial-gradient(ellipse 60% 60% at 20% 20%, rgba(37, 99, 235, 0.14), transparent 70%),
linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
}
/* Centered eyebrow helper for CTA / section headers */
.mso-eyebrow--center { justify-content: center; }
/* Principles */
.mso-about-principles {
padding: 90px 0;
background: #FAFBFC;
border-top: 1px solid var(--mso-line);
border-bottom: 1px solid var(--mso-line);
}
.mso-about-principles__header { max-width: 720px; margin: 0 0 48px; }
.mso-about-principles__header .mso-section-title {
font-size: clamp(30px, 3.8vw, 48px);
line-height: 1.1; max-width: 20ch; margin: 10px 0 0;
}
.mso-about-principles__header .mso-section-title em { color: var(--mso-accent); font-style: normal; }
.mso-about-principles__grid {
display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 760px) { .mso-about-principles__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.mso-principle {
background: #FFFFFF;
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 32px 28px;
display: flex; flex-direction: column; gap: 14px;
transition: border-color .2s ease, transform .2s ease;
}
.mso-principle:hover { border-color: var(--mso-accent); transform: translateY(-2px); }
.mso-principle__number {
font-family: var(--mso-display); font-weight: 600;
font-size: 28px; letter-spacing: -0.03em;
color: var(--mso-accent);
display: inline-block;
line-height: 1;
}
.mso-principle__title {
font-family: var(--mso-display); font-weight: 600;
font-size: 20px; letter-spacing: -0.02em;
margin: 0; color: var(--mso-ink);
}
.mso-principle__desc { margin: 0; color: var(--mso-muted); font-size: 15px; line-height: 1.6; }
/* Personas */
.mso-about-personas { padding: 90px 0; }
.mso-about-personas .mso-section-title {
max-width: 24ch; margin: 10px 0 48px;
font-size: clamp(28px, 3.6vw, 44px);
}
.mso-about-personas__grid {
display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 760px) { .mso-about-personas__grid { grid-template-columns: repeat(3, 1fr); } }
.mso-persona {
padding: 28px 0;
border-top: 2px solid var(--mso-ink);
}
.mso-persona__title {
font-family: var(--mso-display); font-weight: 600;
font-size: 18px; letter-spacing: -0.01em;
margin: 0 0 10px; color: var(--mso-ink);
}
.mso-persona__desc { margin: 0; color: var(--mso-muted); font-size: 15px; line-height: 1.6; }
/* Latest-from-the-blog strip on About */
.mso-about-latest {
padding: 80px 0;
border-top: 1px solid var(--mso-line);
}
.mso-about-latest .mso-section-header {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 16px; flex-wrap: wrap; margin-bottom: 40px;
}
/* Final CTA */
.mso-about-cta {
padding: 100px 0;
background:
radial-gradient(ellipse 60% 60% at 50% 0%, color-mix(in oklab, var(--mso-accent) 10%, transparent), transparent 60%),
linear-gradient(180deg, #F5F8FF 0%, #EEF4FF 100%);
border-top: 1px solid var(--mso-line);
}
.mso-about-cta__inner {
text-align: center;
max-width: 720px;
display: flex; flex-direction: column; align-items: center;
}
.mso-about-cta__title {
font-family: var(--mso-display); font-weight: 600;
font-size: clamp(32px, 4.4vw, 54px);
line-height: 1.1; letter-spacing: -0.03em;
margin: 12px 0 20px; max-width: 22ch;
}
.mso-about-cta__title em { color: var(--mso-accent); font-style: normal; }
.mso-about-cta__sub {
color: var(--mso-muted); font-size: 17px; line-height: 1.6;
max-width: 56ch; margin: 0 0 32px;
}
.mso-about-cta__actions {
display: flex; flex-wrap: wrap; gap: 12px;
justify-content: center; margin-bottom: 32px;
}
.mso-about-cta .mso-social { justify-content: center; }
.mso-social--center { justify-content: center; }
/* ================= Contact page ================= */
.mso-contact-hero { padding: 80px 0 50px; text-align: center; }
.mso-contact-hero__title {
font-family: var(--mso-display);
font-weight: 600;
font-size: clamp(40px, 5.2vw, 64px);
letter-spacing: -0.035em;
line-height: 1.1;
margin: 10px 0 18px;
}
.mso-contact-hero__sub { color: var(--mso-muted); font-size: 18px; max-width: 50ch; margin: 0 auto; line-height: 1.6; }
.mso-contact-main { padding: 20px 0 80px; }
.mso-contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 900px) { .mso-contact-grid { grid-template-columns: 1.3fr .9fr; gap: 56px; } }
.mso-contact-form-wrap {
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 14px;
padding: 36px;
}
.mso-contact-form-wrap h2 { font-family: var(--mso-display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; margin: 0 0 20px; }
.mso-contact-form { display: grid; gap: 18px; }
.mso-contact-form__row { display: grid; gap: 18px; }
@media (min-width: 600px) { .mso-contact-form__row { grid-template-columns: 1fr 1fr; } }
.mso-contact-form label {
display: block;
font-size: 13px; font-weight: 500; color: var(--mso-ink);
margin-bottom: 6px;
}
.mso-contact-form input,
.mso-contact-form textarea,
.mso-contact-form select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--mso-line);
border-radius: var(--mso-radius-sm);
background: var(--mso-surface);
color: var(--mso-ink);
font-family: inherit; font-size: 15px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.mso-contact-form textarea { min-height: 140px; resize: vertical; }
.mso-contact-form input:focus,
.mso-contact-form textarea:focus,
.mso-contact-form select:focus {
outline: none; border-color: var(--mso-accent);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.mso-contact-side { display: flex; flex-direction: column; gap: 28px; }
.mso-contact-side__block {
background: #F9FAFB;
border: 1px solid var(--mso-line);
border-radius: 14px;
padding: 26px 24px;
}
.mso-contact-side__block h3 { font-family: var(--mso-display); font-weight: 600; font-size: 16px; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--mso-ink); }
.mso-contact-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mso-contact-side__list a { display: flex; align-items: center; gap: 12px; color: var(--mso-ink); text-decoration: none; font-size: 15px; }
.mso-contact-side__list a:hover { color: var(--mso-accent); }
.mso-contact-side__list svg { width: 18px; height: 18px; color: var(--mso-muted); }
.mso-contact-side__list a:hover svg { color: var(--mso-accent); }
/* FAQ (shared — Contact page section wrapper + inline tool-page block) */
.mso-faq { padding: 60px 0 80px; border-top: 1px solid var(--mso-line); background: #FAFBFC; }
.mso-faq__inner { max-width: 760px; margin: 0 auto; }
.mso-faq__list {
counter-reset: faq;
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 14px;
overflow: hidden;
margin-top: 28px;
display: flex;
flex-direction: column;
}
.mso-faq__list details {
counter-increment: faq;
border-top: 1px solid var(--mso-line);
background: var(--mso-surface);
transition: background .15s ease;
}
.mso-faq__list details:first-child { border-top: 0; }
.mso-faq__list details[open] { background: #F5F8FF; }
.mso-faq__list summary {
cursor: pointer;
list-style: none;
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 32px;
gap: 16px;
align-items: center;
padding: 20px 24px;
font-family: var(--mso-display);
font-weight: 600;
font-size: 16px;
letter-spacing: -0.015em;
color: var(--mso-ink);
transition: color .15s ease;
line-height: 1.35;
}
.mso-faq__list summary::-webkit-details-marker { display: none; }
.mso-faq__list summary::marker { content: ""; display: none; font-size: 0; }
.mso-faq__list summary:hover { color: var(--mso-accent); }
/* Number badge */
.mso-faq__list summary::before {
content: "0" counter(faq);
font-family: var(--mso-body);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
color: var(--mso-muted);
font-variant-numeric: tabular-nums;
transition: color .15s ease;
}
/* Toggle button */
.mso-faq__list summary::after {
content: '';
justify-self: end;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #F1F5F9;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
transition: background-color .2s ease, transform .25s ease;
}
.mso-faq__list details[open] summary { color: var(--mso-accent); padding-bottom: 12px; }
.mso-faq__list details[open] summary::before { color: var(--mso-accent); }
.mso-faq__list details[open] summary::after {
background-color: var(--mso-accent);
background-image: url("data:image/svg+xml;utf8,");
transform: rotate(180deg);
}
/* Answer body — indents under the question (past the number) */
.mso-faq__list details > p,
.mso-faq__list .mso-faq__answer {
margin: 0;
padding: 0 72px 22px 72px;
color: var(--mso-text);
font-size: 15px;
line-height: 1.65;
max-width: 68ch;
}
.mso-faq__list details > p strong,
.mso-faq__list .mso-faq__answer strong { color: var(--mso-ink); font-weight: 600; }
@media (max-width: 600px) {
.mso-faq__list summary {
grid-template-columns: 28px minmax(0, 1fr) 28px;
gap: 12px;
padding: 16px 18px;
font-size: 15px;
}
.mso-faq__list summary::after {
width: 28px; height: 28px; background-size: 12px 12px;
}
.mso-faq__list details > p,
.mso-faq__list .mso-faq__answer { padding: 0 18px 18px 58px; }
}
/* ================= Tools directory ================= */
.mso-tools-hero { padding: 70px 0 40px; }
.mso-tools-hero__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.mso-tools-hero__title {
font-family: var(--mso-display);
font-weight: 600;
font-size: clamp(36px, 4.8vw, 56px);
letter-spacing: -0.03em;
line-height: 1.1;
margin: 10px 0 18px;
}
.mso-tools-hero__title em { color: var(--mso-accent); font-style: normal; }
.mso-tools-hero__sub { color: var(--mso-muted); font-size: 18px; max-width: 56ch; margin: 0 auto 28px; line-height: 1.55; }
.mso-tools-hero__search {
max-width: 500px; margin: 0 auto;
position: relative;
}
.mso-tools-hero__search input {
width: 100%;
padding: 14px 18px 14px 44px;
border: 1px solid var(--mso-line);
border-radius: 10px;
background: var(--mso-surface);
font-family: inherit; font-size: 15px;
transition: border-color .15s ease, box-shadow .15s ease;
}
.mso-tools-hero__search input:focus { outline: none; border-color: var(--mso-accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.mso-tools-hero__search::before {
content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
background: no-repeat center / contain url("data:image/svg+xml;utf8,");
}
/* Filter bar */
.mso-tools-filters {
position: sticky; top: 72px; z-index: 20;
background: color-mix(in oklab, var(--mso-bg) 92%, transparent);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--mso-line);
padding: 14px 0;
}
.mso-tools-filters__inner {
display: flex; flex-wrap: wrap; gap: 10px;
align-items: center;
}
.mso-filter-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border: 1px solid var(--mso-line);
border-radius: 999px;
background: var(--mso-surface);
font-size: 13px; font-weight: 500; color: var(--mso-ink);
cursor: pointer; text-decoration: none;
transition: all .15s ease;
font-family: inherit;
white-space: nowrap;
flex-shrink: 0;
}
.mso-filter-chip:hover { border-color: var(--mso-ink); color: var(--mso-ink); }
.mso-filter-chip.is-active { background: var(--mso-ink); color: var(--mso-bg); border-color: var(--mso-ink); }
.mso-filter-chip__count {
display: inline-block;
color: var(--mso-muted);
font-size: 11px; font-weight: 500;
font-variant-numeric: tabular-nums;
}
.mso-filter-chip.is-active .mso-filter-chip__count { color: rgba(255,255,255,.6); }
.mso-filter-chip:hover .mso-filter-chip__count { color: var(--mso-ink); }
/* "More categories" button + dropdown panel */
.mso-filter-more {
position: relative;
flex-shrink: 0;
}
.mso-filter-more__btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border: 1px solid var(--mso-line);
border-radius: 999px;
background: var(--mso-surface);
font-size: 13px; font-weight: 500; color: var(--mso-ink);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .15s ease;
}
.mso-filter-more__btn:hover { border-color: var(--mso-ink); }
.mso-filter-more__btn::after {
content: ""; width: 10px; height: 10px;
background: no-repeat center / contain url("data:image/svg+xml;utf8,");
transition: transform .2s ease;
}
.mso-filter-more[open] .mso-filter-more__btn { border-color: var(--mso-ink); background: var(--mso-tag-bg); }
.mso-filter-more[open] .mso-filter-more__btn::after { transform: rotate(180deg); }
.mso-filter-more__panel {
display: none;
position: absolute;
right: 0;
top: calc(100% + 10px);
width: min(640px, 90vw);
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,.08);
padding: 20px 22px 22px;
z-index: 30;
}
.mso-filter-more[open] .mso-filter-more__panel { display: block; }
.mso-filter-group { margin-bottom: 18px; }
.mso-filter-group:last-child { margin-bottom: 0; }
.mso-filter-group__title {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mso-muted);
font-weight: 600;
margin: 0 0 10px;
}
.mso-filter-group__chips {
display: flex; flex-wrap: wrap; gap: 6px;
}
.mso-filter-group__chips .mso-filter-chip { padding: 5px 10px; font-size: 12px; }
.mso-tools-filters__count {
margin-left: auto; font-size: 13px; color: var(--mso-muted);
flex-shrink: 0;
padding-left: 12px;
border-left: 1px solid var(--mso-line);
}
@media (max-width: 700px) {
.mso-filter-more__panel { width: calc(100vw - 32px); right: -16px; }
.mso-tools-filters__count { display: none; }
}
/* Tool grid */
.mso-tools-section { padding: 40px 0 80px; }
.mso-tools-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 640px) { .mso-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mso-tools-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .mso-tools-grid { grid-template-columns: repeat(4, 1fr); } }
.mso-tool-card {
display: flex; flex-direction: column;
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 20px;
text-decoration: none;
color: inherit;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mso-tool-card:hover {
border-color: var(--mso-accent);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08);
}
.mso-tool-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mso-tool-card__logo {
width: 44px; height: 44px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
background: var(--mso-tag-bg);
display: flex; align-items: center; justify-content: center;
color: var(--mso-ink);
font-family: var(--mso-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
}
.mso-tool-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.mso-tool-card__name {
font-family: var(--mso-display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
color: var(--mso-ink); margin: 0 0 2px;
}
.mso-tool-card__cat { font-size: 12px; color: var(--mso-muted); font-weight: 500; }
.mso-tool-card__tagline {
color: var(--mso-text); font-size: 14px; line-height: 1.5;
margin: 0 0 14px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mso-tool-card__footer {
display: flex; align-items: center; justify-content: space-between;
margin-top: auto; padding-top: 14px;
border-top: 1px solid var(--mso-line);
gap: 10px;
}
.mso-tool-card__rating {
display: inline-flex; align-items: center; gap: 4px;
color: var(--mso-ink); font-size: 13px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.mso-tool-card__rating span { color: var(--mso-accent); }
.mso-tool-card__price {
font-size: 12px; color: var(--mso-muted); font-weight: 500;
background: var(--mso-tag-bg); color: var(--mso-ink); padding: 3px 8px; border-radius: 999px;
}
.mso-tool-card__price--free { background: #DCFCE7; color: #166534; }
/* ================= Single Tool page ================= */
.mso-tool-hero {
padding: 50px 0 30px;
border-bottom: 1px solid var(--mso-line);
}
.mso-tool-hero__inner {
display: grid; gap: 32px;
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 900px) { .mso-tool-hero__inner { grid-template-columns: 90px 1fr auto; gap: 36px; } }
.mso-tool-hero__logo {
width: 90px; height: 90px;
border-radius: 18px;
overflow: hidden;
background: var(--mso-tag-bg);
display: flex; align-items: center; justify-content: center;
color: var(--mso-ink);
font-family: var(--mso-display); font-weight: 700; font-size: 32px; letter-spacing: -0.03em;
border: 1px solid var(--mso-line);
}
.mso-tool-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.mso-tool-hero__text { min-width: 0; }
.mso-tool-hero__crumbs {
display: flex; gap: 6px; font-size: 13px; color: var(--mso-muted); margin-bottom: 8px;
}
.mso-tool-hero__crumbs a { color: var(--mso-muted); text-decoration: none; }
.mso-tool-hero__crumbs a:hover { color: var(--mso-ink); }
.mso-tool-hero__title {
font-family: var(--mso-display); font-weight: 600;
font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.03em;
line-height: 1.1; margin: 0 0 8px;
}
.mso-tool-hero__tagline { font-size: 17px; color: var(--mso-muted); margin: 0 0 12px; }
.mso-tool-hero__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 14px; }
.mso-tool-hero__rating {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; color: var(--mso-ink);
}
.mso-tool-hero__rating .stars { color: var(--mso-accent); letter-spacing: 2px; }
.mso-tool-hero__actions {
display: flex; flex-direction: column; gap: 10px; min-width: 220px;
}
@media (max-width: 899px) { .mso-tool-hero__actions { flex-direction: row; min-width: 0; } }
/* Stat strip */
.mso-tool-stats {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--mso-line);
border: 1px solid var(--mso-line);
border-radius: 12px;
overflow: hidden;
margin: 40px 0;
}
@media (min-width: 700px) {
.mso-tool-stats { grid-template-columns: repeat(3, 1fr); }
.mso-tool-stats--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mso-tool-stats--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.mso-tool-stat { background: var(--mso-surface); padding: 20px 22px; }
.mso-tool-stat__label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mso-muted); font-weight: 600; margin-bottom: 6px; }
.mso-tool-stat__value { font-family: var(--mso-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--mso-ink); line-height: 1.3; }
/* Tool page layout: content + sidebar */
.mso-tool-layout {
display: grid; gap: 48px;
grid-template-columns: 1fr;
padding: 20px 0 80px;
}
@media (min-width: 1024px) { .mso-tool-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
/* Section blocks inside tool page */
.mso-tool-block { margin-bottom: 48px; }
.mso-tool-block__title {
font-family: var(--mso-display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em;
margin: 0 0 20px; display: flex; align-items: center; gap: 10px;
}
.mso-tool-block__title::before {
content: ""; display: inline-block; width: 18px; height: 1.5px; background: var(--mso-accent);
}
.mso-tool-block__intro {
color: var(--mso-muted);
font-size: 15px;
line-height: 1.6;
margin: -8px 0 22px;
max-width: 62ch;
}
/* Pros / Cons split */
.mso-pros-cons {
display: grid; gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .mso-pros-cons { grid-template-columns: 1fr 1fr; } }
.mso-pros, .mso-cons {
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 22px 24px;
background: var(--mso-surface);
}
.mso-pros__title, .mso-cons__title {
font-family: var(--mso-display); font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
margin: 0 0 14px;
display: flex; align-items: center; gap: 8px;
}
.mso-pros__title { color: #166534; }
.mso-cons__title { color: #991B1B; }
.mso-pros__badge, .mso-cons__badge {
width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; line-height: 1;
}
.mso-pros__badge { background: #DCFCE7; color: #166534; }
.mso-cons__badge { background: #FEE2E2; color: #991B1B; }
.mso-pros ul, .mso-cons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mso-pros li, .mso-cons li { position: relative; padding-left: 24px; color: var(--mso-text); font-size: 15px; line-height: 1.5; }
.mso-pros li::before {
content: ""; position: absolute; left: 0; top: 6px;
width: 14px; height: 14px; border-radius: 50%;
background: #DCFCE7 no-repeat center / 10px url("data:image/svg+xml;utf8,");
}
.mso-cons li::before {
content: ""; position: absolute; left: 0; top: 6px;
width: 14px; height: 14px; border-radius: 50%;
background: #FEE2E2 no-repeat center / 10px url("data:image/svg+xml;utf8,");
}
/* Features grid */
.mso-features-grid {
display: grid; gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .mso-features-grid { grid-template-columns: 1fr 1fr; } }
.mso-feature {
padding: 24px 24px 22px;
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
transition: border-color .15s ease, box-shadow .15s ease;
display: flex;
flex-direction: column;
}
.mso-feature:hover { border-color: var(--mso-accent); box-shadow: 0 2px 20px rgba(37, 99, 235, 0.06); }
.mso-feature--rich { padding: 26px 26px 24px; }
.mso-feature__num {
display: inline-block;
font-family: var(--mso-body);
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
color: var(--mso-accent);
font-variant-numeric: tabular-nums;
margin-bottom: 10px;
}
.mso-feature__name {
font-family: var(--mso-display);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--mso-ink);
margin: 0 0 4px;
line-height: 1.3;
}
.mso-feature__tag {
font-size: 13px;
font-weight: 500;
color: var(--mso-accent);
margin: 0 0 10px;
line-height: 1.4;
}
.mso-feature__text {
font-size: 14.5px; color: var(--mso-text); line-height: 1.6; margin: 0;
}
.mso-feature__tag + .mso-feature__text { margin-top: 0; }
.mso-feature__sub {
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mso-muted);
margin: 16px 0 8px;
}
.mso-feature__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.mso-feature__list li {
position: relative;
padding-left: 18px;
font-size: 14px;
color: var(--mso-text);
line-height: 1.5;
}
.mso-feature__list li::before {
content: "";
position: absolute;
left: 2px;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mso-accent);
}
/* At-a-glance snapshot */
.mso-snapshot {
background: linear-gradient(135deg, #FAFBFF 0%, #F3F6FF 100%);
border: 1px solid #E2E8F7;
border-radius: 14px;
padding: 28px 32px;
}
.mso-snapshot__kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
color: var(--mso-accent);
margin: 0 0 10px;
}
.mso-snapshot__kicker::before {
content: "";
width: 14px;
height: 1.5px;
background: var(--mso-accent);
display: inline-block;
}
.mso-snapshot__text { color: var(--mso-text); font-size: 17px; line-height: 1.65; margin: 0; }
.mso-snapshot__text p { margin: 0 0 10px; }
.mso-snapshot__text p:last-child { margin-bottom: 0; }
.mso-snapshot__chips {
list-style: none;
margin: 20px 0 0;
padding: 18px 0 0;
border-top: 1px solid #E2E8F7;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px 24px;
}
@media (min-width: 700px) { .mso-snapshot__chips { grid-template-columns: repeat(4, 1fr); } }
.mso-snapshot__chips li { display: flex; flex-direction: column; gap: 2px; }
.mso-snapshot__chip-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mso-muted); font-weight: 600; }
.mso-snapshot__chip-value { font-family: var(--mso-display); font-weight: 600; font-size: 15px; color: var(--mso-ink); letter-spacing: -0.01em; }
/* Standout points */
.mso-standout { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mso-standout__item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 18px;
align-items: start;
padding: 20px 22px;
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
transition: border-color .15s ease;
}
.mso-standout__item:hover { border-color: var(--mso-accent); }
.mso-standout__num {
font-family: var(--mso-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
color: var(--mso-accent);
background: var(--mso-tag-bg);
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mso-standout__body { min-width: 0; }
.mso-standout__title {
font-family: var(--mso-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--mso-ink);
margin: 0 0 4px;
line-height: 1.35;
}
.mso-standout__title--solo { margin: 10px 0; font-size: 15px; }
.mso-standout__text { font-size: 14.5px; color: var(--mso-text); line-height: 1.6; margin: 0; }
/* How-it-works steps */
.mso-howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: howto; }
.mso-howto__step {
display: grid;
grid-template-columns: 40px 1fr;
gap: 18px;
align-items: start;
padding: 18px 22px;
background: #F9FAFB;
border-left: 3px solid var(--mso-accent);
border-radius: 0 10px 10px 0;
}
.mso-howto__num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--mso-ink);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
font-family: var(--mso-display);
font-variant-numeric: tabular-nums;
}
.mso-howto__body { min-width: 0; }
.mso-howto__title {
font-family: var(--mso-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--mso-ink);
margin: 2px 0 4px;
line-height: 1.35;
}
.mso-howto__text { font-size: 14.5px; color: var(--mso-text); line-height: 1.6; margin: 0; }
/* Scorecard */
.mso-scorecard {
border: 1px solid var(--mso-line);
border-radius: 14px;
background: var(--mso-surface);
overflow: hidden;
}
.mso-scorecard__overall {
display: flex;
align-items: baseline;
gap: 14px;
padding: 22px 26px;
background: #FAFBFF;
border-bottom: 1px solid var(--mso-line);
flex-wrap: wrap;
}
.mso-scorecard__overall-label {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mso-muted);
font-weight: 600;
}
.mso-scorecard__overall-value {
font-family: var(--mso-display);
font-weight: 700;
font-size: 32px;
letter-spacing: -0.03em;
color: var(--mso-ink);
}
.mso-scorecard__overall-value small { font-size: 15px; color: var(--mso-muted); font-weight: 500; margin-left: 2px; }
.mso-scorecard__overall-stars { color: var(--mso-accent); letter-spacing: 2px; font-size: 16px; }
.mso-scorecard__list { list-style: none; margin: 0; padding: 10px 26px 20px; display: flex; flex-direction: column; gap: 18px; }
.mso-scorecard__item { padding-top: 14px; border-top: 1px solid var(--mso-line); }
.mso-scorecard__item:first-child { border-top: 0; padding-top: 6px; }
.mso-scorecard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.mso-scorecard__name { font-family: var(--mso-display); font-weight: 600; font-size: 15px; color: var(--mso-ink); letter-spacing: -0.01em; }
.mso-scorecard__value { font-family: var(--mso-display); font-weight: 600; font-size: 15px; color: var(--mso-ink); font-variant-numeric: tabular-nums; }
.mso-scorecard__value small { font-size: 12px; color: var(--mso-muted); font-weight: 500; }
.mso-scorecard__bar {
position: relative;
width: 100%;
height: 6px;
background: var(--mso-line);
border-radius: 999px;
overflow: hidden;
}
.mso-scorecard__bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--mso-accent) 0%, var(--mso-accent-ink) 100%);
border-radius: 999px;
transition: width .3s ease;
}
.mso-scorecard__note { font-size: 13.5px; color: var(--mso-muted); line-height: 1.5; margin: 8px 0 0; }
/* Sidebar additions */
.mso-tool-side__card--cta .mso-tool-side__price {
margin: 12px 0 0;
font-size: 13px;
color: var(--mso-muted);
text-align: center;
}
.mso-tool-side__free { color: var(--mso-accent); font-weight: 600; }
.mso-tool-side__facts { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mso-tool-side__fact {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--mso-line);
}
.mso-tool-side__fact:last-child { border-bottom: 0; padding-bottom: 0; }
.mso-tool-side__fact:first-child { padding-top: 0; }
.mso-tool-side__fact dt {
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mso-muted);
font-weight: 600;
margin: 0;
}
.mso-tool-side__fact dd {
margin: 0;
font-family: var(--mso-display);
font-weight: 600;
font-size: 14px;
color: var(--mso-ink);
letter-spacing: -0.01em;
text-align: right;
}
/* Use cases list */
.mso-usecases { display: flex; flex-direction: column; gap: 12px; }
.mso-usecase {
display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start;
padding: 16px 18px;
border-left: 3px solid var(--mso-accent);
background: #F9FAFB;
border-radius: 0 10px 10px 0;
}
.mso-usecase__num {
width: 28px; height: 28px; border-radius: 50%;
background: var(--mso-accent); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; font-family: var(--mso-display);
}
.mso-usecase__text { font-size: 15px; color: var(--mso-text); line-height: 1.5; margin: 0; }
.mso-usecase__text strong { color: var(--mso-ink); display: block; font-weight: 600; margin-bottom: 2px; }
/* Verdict block */
.mso-verdict {
background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
border: 1px solid #DCE5F2;
border-radius: 14px;
padding: 32px 36px;
}
.mso-verdict__kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
color: var(--mso-accent); margin: 0 0 12px;
}
.mso-verdict__title { font-family: var(--mso-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 14px; }
.mso-verdict__text { color: var(--mso-text); font-size: 16px; line-height: 1.6; margin: 0; }
/* Platform / Integrations strip */
.mso-tool-strip {
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
margin: 0 0 40px;
overflow: hidden;
}
.mso-tool-strip__group {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 18px 22px;
flex-wrap: wrap;
}
.mso-tool-strip__group + .mso-tool-strip__group { border-top: 1px solid var(--mso-line); }
.mso-tool-strip__label {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mso-muted);
font-weight: 600;
flex: 0 0 130px;
padding-top: 5px;
line-height: 1.3;
}
.mso-pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1 1 0;
min-width: 0;
}
.mso-pill {
display: inline-flex;
align-items: center;
padding: 5px 11px;
font-size: 12px;
font-weight: 500;
color: var(--mso-ink);
background: var(--mso-tag-bg);
border-radius: 999px;
white-space: nowrap;
line-height: 1.4;
}
.mso-pill--outline { background: transparent; border: 1px solid var(--mso-line); }
@media (max-width: 600px) {
.mso-tool-strip__label { flex: 0 0 100%; padding-top: 0; }
}
/* Who it's for / Who it's not for */
.mso-who {
display: grid; gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .mso-who { grid-template-columns: 1fr 1fr; } }
.mso-who__card {
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 22px 24px;
}
.mso-who__card--for {
background: linear-gradient(180deg, #F5F8FF 0%, var(--mso-surface) 70%);
border-color: #DCE5F2;
}
.mso-who__card--not {
background: linear-gradient(180deg, #FAFAFA 0%, var(--mso-surface) 70%);
}
.mso-who__header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--mso-line);
}
.mso-who__badge {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; line-height: 1;
flex-shrink: 0;
}
.mso-who__badge--for { background: #DBEAFE; color: var(--mso-accent); }
.mso-who__badge--not { background: #F1F5F9; color: #94A3B8; }
.mso-who__title {
font-family: var(--mso-display);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--mso-ink);
margin: 0;
}
.mso-who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mso-who li {
position: relative;
padding-left: 20px;
color: var(--mso-text);
font-size: 14px;
line-height: 1.55;
}
.mso-who li::before {
content: "";
position: absolute;
left: 2px; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
}
.mso-who__card--for li::before { background: var(--mso-accent); }
.mso-who__card--not li::before { background: #CBD5E1; }
/* Pricing tiers table */
.mso-pricing {
display: grid; gap: 1px;
background: var(--mso-line);
border: 1px solid var(--mso-line);
border-radius: 12px;
overflow: hidden;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .mso-pricing { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.mso-pricing-tier {
background: var(--mso-surface);
padding: 24px 22px;
display: flex; flex-direction: column;
}
.mso-pricing-tier--highlight { background: #FAFBFF; position: relative; }
.mso-pricing-tier--highlight::after {
content: "Popular";
position: absolute; top: 10px; right: 12px;
font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
background: var(--mso-accent); color: #fff;
padding: 3px 7px; border-radius: 999px;
}
.mso-pricing-tier__name {
font-family: var(--mso-body);
font-weight: 600;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mso-muted);
margin: 0 0 14px;
}
.mso-pricing-tier__price {
font-family: var(--mso-display);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.03em;
color: var(--mso-ink);
line-height: 1.15;
margin: 0 0 20px;
min-height: 32px;
}
.mso-pricing-tier__price small { font-size: 13px; color: var(--mso-muted); font-weight: 500; letter-spacing: 0; }
.mso-pricing-tier__sub { font-size: 13px; color: var(--mso-muted); margin: 0 0 18px; }
.mso-pricing-tier__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
color: var(--mso-text);
flex: 1;
}
.mso-pricing-tier__list li {
position: relative;
padding-left: 22px;
line-height: 1.4;
}
.mso-pricing-tier__list li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #DCFCE7 no-repeat center / 9px url("data:image/svg+xml;utf8,");
}
/* Alternatives comparison */
.mso-alts {
border: 1px solid var(--mso-line);
border-radius: 12px;
overflow: hidden;
}
.mso-alts__row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid var(--mso-line);
align-items: center;
}
@media (min-width: 800px) { .mso-alts__row { grid-template-columns: 1.2fr 2fr .8fr .8fr; gap: 24px; } }
.mso-alts__row:last-child { border-bottom: 0; }
.mso-alts__row--head {
background: #FAFBFC;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--mso-muted); font-weight: 600;
padding: 12px 24px;
}
.mso-alts__name { font-family: var(--mso-display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; color: var(--mso-ink); display: flex; align-items: center; gap: 10px; }
.mso-alts__name img, .mso-alts__name .tl { width: 32px; height: 32px; border-radius: 8px; }
.mso-alts__diff { color: var(--mso-text); font-size: 15px; line-height: 1.45; }
.mso-alts__price { font-size: 14px; color: var(--mso-ink); font-weight: 500; }
.mso-alts__rating { font-size: 14px; color: var(--mso-ink); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.mso-alts__rating span { color: var(--mso-accent); }
/* Screenshots gallery */
.mso-shots {
display: grid; gap: 14px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .mso-shots { grid-template-columns: repeat(2, 1fr); } }
.mso-shot {
aspect-ratio: 16 / 10;
background: #F3F4F6;
border: 1px solid var(--mso-line);
border-radius: 10px;
overflow: hidden;
position: relative;
display: flex; align-items: center; justify-content: center;
color: var(--mso-muted); font-size: 13px;
}
.mso-shot img { width: 100%; height: 100%; object-fit: cover; }
.mso-shot__caption {
position: absolute; left: 12px; bottom: 10px;
background: rgba(10,10,10,.72); color: #fff;
padding: 4px 10px; border-radius: 6px;
font-size: 12px; font-weight: 500;
backdrop-filter: blur(4px);
}
/* Reviewer's take */
.mso-reviewer {
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-left: 3px solid var(--mso-accent);
border-radius: 0 10px 10px 0;
padding: 22px 26px;
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
align-items: start;
}
.mso-reviewer__avatar {
width: 56px; height: 56px; border-radius: 50%;
overflow: hidden;
background: var(--mso-tag-bg);
}
.mso-reviewer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mso-reviewer__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mso-muted); font-weight: 600; margin: 0 0 6px; }
.mso-reviewer__quote {
font-family: var(--mso-display); font-weight: 500; font-size: 18px; line-height: 1.5;
color: var(--mso-ink); letter-spacing: -0.015em; margin: 0 0 10px;
}
.mso-reviewer__by { font-size: 13px; color: var(--mso-muted); }
.mso-reviewer__by strong { color: var(--mso-ink); font-weight: 600; }
/* Related tool-review blog posts */
.mso-tool-related { padding-top: 24px; border-top: 1px solid var(--mso-line); margin-top: 20px; }
/* Table of Contents (inside the right sidebar) */
.mso-tool-toc {
font-size: 14px;
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 22px 18px 20px;
}
.mso-tool-toc__title { font-family: var(--mso-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mso-muted); font-weight: 600; margin: 0 0 14px; padding: 0 6px; }
.mso-tool-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--mso-line); counter-reset: toc; }
.mso-tool-toc li { margin: 0; padding: 0; counter-increment: toc; }
.mso-tool-toc a {
display: block;
padding: 7px 12px;
color: var(--mso-muted);
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -1px;
transition: color .15s ease, border-color .15s ease;
line-height: 1.4;
font-size: 13px;
}
.mso-tool-toc a::before {
content: counter(toc, decimal-leading-zero);
display: inline-block;
width: 22px;
font-variant-numeric: tabular-nums;
color: var(--mso-muted);
opacity: .6;
font-size: 11px;
font-weight: 500;
}
.mso-tool-toc a:hover { color: var(--mso-ink); }
.mso-tool-toc a.is-active { color: var(--mso-ink); border-left-color: var(--mso-accent); font-weight: 500; }
.mso-tool-toc a.is-active::before { color: var(--mso-accent); opacity: 1; }
/* Layout: content (left/center) + sidebar (right) — TOC lives inside the sidebar */
.mso-tool-layout { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .mso-tool-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; } }
@media (min-width: 1200px) { .mso-tool-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } }
/* Sidebar */
.mso-tool-side { display: flex; flex-direction: column; gap: 24px; }
.mso-tool-side__card {
background: var(--mso-surface);
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 24px;
}
.mso-tool-side__title {
font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mso-muted);
font-weight: 600; margin: 0 0 14px;
}
.mso-tool-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mso-tool-side__list a { color: var(--mso-ink); text-decoration: none; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mso-line); }
.mso-tool-side__list a:last-child { border-bottom: 0; }
.mso-tool-side__list a:hover { color: var(--mso-accent); }
.mso-tool-side__list .meta { color: var(--mso-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .mso-tool-side { position: sticky; top: 100px; align-self: start; } }
/* ================= Agency Directory — classic directory layout =================
Left filter sidebar + horizontal agency cards. Clutch / SortList style.
Prominent logo, star rating + review count, service chips, structured stat row,
explicit Visit website / View profile CTAs on every card.
============================================================================ */
.mso-adir { background: #F7F8FA; color: var(--mso-ink); }
.mso-adir-icon { display: inline-flex; align-items: center; justify-content: center; }
.mso-adir-icon svg { width: 16px; height: 16px; display: block; }
.mso-adir-icon--sm svg { width: 14px; height: 14px; }
/* ---- Hero ---- */
.mso-adir-hero {
background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
padding: 72px 0 52px;
border-bottom: 1px solid var(--mso-line);
}
.mso-adir-hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.mso-adir-hero__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mso-body);
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--mso-accent);
background: var(--mso-tag-bg);
padding: 6px 14px; border-radius: 999px;
margin-bottom: 18px;
}
.mso-adir-hero__title {
font-family: var(--mso-display);
font-weight: 600; font-size: clamp(32px, 4.6vw, 48px);
line-height: 1.1; letter-spacing: -0.025em;
margin: 0 0 16px; color: var(--mso-ink);
}
.mso-adir-hero__sub {
color: var(--mso-muted); font-size: 17px; line-height: 1.55;
max-width: 54ch; margin: 0 auto 28px;
}
.mso-adir-hero__searchbox {
display: flex; max-width: 580px; margin: 0 auto;
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 10px 24px -16px rgba(10,10,10,.08);
overflow: hidden;
}
.mso-adir-hero__searchbox:focus-within { border-color: var(--mso-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mso-accent) 18%, transparent); }
.mso-adir-hero__search {
flex: 1; min-width: 0;
border: 0; outline: none; background: transparent;
padding: 16px 20px;
font-size: 15px; font-family: inherit; color: var(--mso-ink);
}
.mso-adir-hero__searchbtn {
border: 0; background: var(--mso-ink); color: #fff;
padding: 0 24px; font-size: 14px; font-weight: 600;
cursor: pointer;
}
.mso-adir-hero__searchbtn:hover { background: var(--mso-accent); }
.mso-adir-hero__stats {
display: inline-flex; align-items: center; gap: 20px;
margin-top: 24px;
font-size: 13px; color: var(--mso-muted);
}
.mso-adir-hero__stats b { color: var(--mso-ink); font-weight: 700; }
.mso-adir-hero__stats-sep { width: 3px; height: 3px; background: currentColor; border-radius: 50%; opacity: .4; }
/* ---- Toolbar ---- */
.mso-adir-toolbar {
background: #fff;
border-bottom: 1px solid var(--mso-line);
padding: 14px 0;
position: sticky; top: 0; z-index: 20;
}
.mso-adir-toolbar__inner {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
flex-wrap: wrap;
}
.mso-adir-toolbar__count { font-size: 14px; color: var(--mso-muted); }
.mso-adir-toolbar__count b { color: var(--mso-ink); font-weight: 700; }
.mso-adir-toolbar__right { display: flex; align-items: center; gap: 10px; }
.mso-adir-toolbar__sort {
padding: 9px 36px 9px 14px; border: 1px solid var(--mso-line); border-radius: 8px;
background: #fff; color: var(--mso-ink); font-size: 14px; font-weight: 500;
appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--mso-ink) 50%), linear-gradient(135deg, var(--mso-ink) 50%, transparent 50%);
background-position: calc(100% - 16px) 50%, calc(100% - 12px) 50%;
background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.mso-adir-toolbar__sort:focus { outline: none; border-color: var(--mso-accent); }
.mso-adir-toolbar__viewtoggle {
display: inline-flex; border: 1px solid var(--mso-line); border-radius: 8px; overflow: hidden; background: #fff;
}
.mso-adir-toolbar__viewbtn {
padding: 10px 12px; background: #fff; border: 0; cursor: pointer; color: var(--mso-muted);
font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
min-width: 40px;
}
.mso-adir-toolbar__viewbtn svg { width: 15px; height: 15px; }
.mso-adir-toolbar__filterbtn svg { width: 14px; height: 14px; margin-right: 2px; }
.mso-adir-toolbar__viewbtn + .mso-adir-toolbar__viewbtn { border-left: 1px solid var(--mso-line); }
.mso-adir-toolbar__viewbtn.is-active { background: var(--mso-ink); color: #fff; }
.mso-adir-toolbar__filterbtn {
display: none;
padding: 10px 16px; border: 1px solid var(--mso-line); background: #fff; border-radius: 8px;
font-size: 14px; font-weight: 600; color: var(--mso-ink); cursor: pointer;
align-items: center; gap: 8px;
}
@media (max-width: 960px) { .mso-adir-toolbar__filterbtn { display: inline-flex; } }
/* ---- Body: sidebar + list ---- */
.mso-adir-body { padding: 28px 0 80px; }
.mso-adir-grid {
display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 960px) { .mso-adir-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; } }
@media (min-width: 1200px) { .mso-adir-grid { grid-template-columns: 300px minmax(0, 1fr); } }
/* ---- Sidebar filters ---- */
.mso-adir-sidebar {
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 20px 20px;
}
@media (min-width: 960px) {
.mso-adir-sidebar { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
}
@media (max-width: 960px) {
.mso-adir-sidebar { display: none; }
.mso-adir-sidebar.is-open { display: block; }
}
.mso-adir-sidebar__head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 14px; border-bottom: 1px solid var(--mso-line); margin-bottom: 14px;
}
.mso-adir-sidebar__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--mso-ink); }
.mso-adir-sidebar__clear { background: none; border: 0; color: var(--mso-accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.mso-adir-sidebar__clear:hover { text-decoration: underline; }
.mso-adir-fgroup { border: 0; margin: 0 0 8px; padding: 0; border-bottom: 1px solid var(--mso-line); }
.mso-adir-fgroup:last-child { border-bottom: 0; }
.mso-adir-fgroup__sum {
list-style: none; cursor: pointer; padding: 12px 0;
font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mso-ink);
display: flex; align-items: center; justify-content: space-between;
}
.mso-adir-fgroup__sum::-webkit-details-marker { display: none; }
.mso-adir-fgroup__sum::after { content: '+'; font-weight: 400; color: var(--mso-muted); font-size: 16px; }
.mso-adir-fgroup[open] > .mso-adir-fgroup__sum::after { content: '−'; }
.mso-adir-fgroup__opts { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 14px; max-height: 220px; overflow-y: auto; }
.mso-adir-fopt {
display: flex; align-items: center; gap: 10px;
padding: 6px 4px; border-radius: 6px; cursor: pointer;
font-size: 14px; color: var(--mso-ink);
}
.mso-adir-fopt:hover { background: #F3F4F6; }
.mso-adir-fopt input { accent-color: var(--mso-accent); margin: 0; }
.mso-adir-fopt__label { flex: 1; }
.mso-adir-fopt__count { color: var(--mso-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* ---- Active filter chip bar ---- */
.mso-adir-active {
display: none;
flex-wrap: wrap; align-items: center; gap: 8px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 10px;
margin-bottom: 16px;
}
.mso-adir-active.has-filters { display: flex; }
.mso-adir-active__label {
font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--mso-muted);
margin-right: 2px;
}
.mso-adir-active__chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 6px 5px 12px;
background: var(--mso-tag-bg);
border: 1px solid color-mix(in oklab, var(--mso-accent) 30%, var(--mso-line));
border-radius: 999px;
font-size: 13px; font-weight: 500; color: var(--mso-accent-ink);
cursor: pointer;
line-height: 1.2;
}
.mso-adir-active__chip:hover { background: #fff; }
.mso-adir-active__chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
background: color-mix(in oklab, var(--mso-accent) 15%, transparent);
color: var(--mso-accent-ink); font-size: 13px; font-weight: 700;
line-height: 1;
}
.mso-adir-active__chip:hover .mso-adir-active__chip-x { background: var(--mso-accent); color: #fff; }
.mso-adir-active__clear {
margin-left: auto;
background: none; border: 0; cursor: pointer;
font-size: 13px; font-weight: 500; color: var(--mso-muted);
padding: 6px 8px; border-radius: 6px;
}
.mso-adir-active__clear:hover { color: var(--mso-ink); background: #F3F4F6; }
/* ---- Agency cards (list view, default) ---- */
.mso-adir-list { display: flex; flex-direction: column; gap: 16px; }
.mso-adir-card {
position: relative;
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 12px;
padding: 24px 24px;
display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 20px;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
color: var(--mso-ink); text-decoration: none;
}
@media (min-width: 760px) { .mso-adir-card { grid-template-columns: 100px minmax(0, 1fr) auto; gap: 24px; padding: 24px 28px; } }
.mso-adir-card:hover { border-color: color-mix(in oklab, var(--mso-ink) 20%, var(--mso-line)); box-shadow: 0 8px 24px -8px rgba(10,10,10,.1); transform: translateY(-2px); }
.mso-adir-card--featured {
border-color: #F3C572;
background: #fff;
box-shadow: 0 1px 2px rgba(234,179,8,.08), 0 12px 36px -18px rgba(234,179,8,.3);
}
.mso-adir-card--featured::before {
content: '';
position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px;
background: linear-gradient(180deg, #EAB308, #F59E0B);
border-radius: 12px 0 0 12px;
}
.mso-adir-card--featured .mso-adir-card__ribbon {
position: absolute; top: 0; right: 20px;
transform: translateY(-50%);
background: linear-gradient(180deg, #FBBF24, #F59E0B); color: #432900;
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
box-shadow: 0 4px 12px rgba(234,179,8,.35);
display: inline-flex; align-items: center; gap: 6px;
}
.mso-adir-card__ribbon::before { content: '★'; color: #78350F; }
/* Logo */
.mso-adir-card__logo {
width: 72px; height: 72px; border-radius: 12px;
background: linear-gradient(135deg, #fff 0%, #EFF4FB 100%);
display: flex; align-items: center; justify-content: center;
font-family: var(--mso-display); font-size: 28px; font-weight: 800;
color: var(--mso-accent);
overflow: hidden; flex-shrink: 0;
border: 1px solid var(--mso-line);
letter-spacing: -0.02em;
box-shadow: inset 0 -2px 0 rgba(10,10,10,.03);
}
@media (min-width: 760px) { .mso-adir-card__logo { width: 88px; height: 88px; font-size: 36px; } }
.mso-adir-card__logo img { width: 100%; height: 100%; object-fit: cover; }
/* Body */
.mso-adir-card__body { min-width: 0; }
.mso-adir-card__topline {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.mso-adir-card__name {
font-family: var(--mso-display);
font-weight: 700; font-size: 20px;
line-height: 1.2; margin: 0;
color: var(--mso-ink);
}
.mso-adir-card:hover .mso-adir-card__name { color: var(--mso-accent); }
.mso-adir-card__verified {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 600; letter-spacing: .01em;
color: #047857;
background: none; padding: 0; border-radius: 0;
line-height: 1;
position: relative; top: -1px;
}
.mso-adir-card__verified-icon {
display: inline-block;
width: 18px; height: 18px;
flex-shrink: 0;
color: #10B981;
filter: drop-shadow(0 1px 2px rgba(16,185,129,.25));
}
.mso-adir-card__verified-icon svg { width: 100%; height: 100%; display: block; }
.mso-adir-card__rating {
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: 12px;
font-size: 13px; color: var(--mso-muted);
}
.mso-adir-card__stars { display: inline-flex; gap: 2px; color: #F59E0B; letter-spacing: 0; font-size: 15px; line-height: 1; }
.mso-adir-card__stars .star-empty { color: #E5E7EB; }
.mso-adir-card__rating-num {
font-weight: 700; color: var(--mso-ink); font-size: 14px;
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px;
background: #FFFBEB;
border: 1px solid #FDE68A;
border-radius: 6px;
line-height: 1.2;
}
.mso-adir-card__tagline {
color: var(--mso-text); font-size: 14px; line-height: 1.55;
margin: 0 0 14px;
}
.mso-adir-card__chips {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.mso-adir-chip {
display: inline-flex; align-items: center;
padding: 4px 10px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 6px;
font-size: 12px; font-weight: 500; color: #374151;
line-height: 1.4;
white-space: nowrap;
}
.mso-adir-chip--more { background: transparent; color: var(--mso-muted); border-style: dashed; }
.mso-adir-card__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px 20px;
padding-top: 16px;
border-top: 1px solid #F3F4F6;
}
.mso-adir-card__stat { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.mso-adir-card__stat-icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 8px;
background: var(--mso-tag-bg);
display: inline-flex; align-items: center; justify-content: center;
color: var(--mso-accent);
}
.mso-adir-card__stat-icon svg { width: 14px; height: 14px; display: block; }
.mso-adir-card__stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mso-adir-card__stat-label {
font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--mso-muted);
line-height: 1.2;
white-space: nowrap;
}
.mso-adir-card__stat-value {
font-size: 13.5px; font-weight: 600; color: var(--mso-ink);
font-variant-numeric: tabular-nums;
line-height: 1.35;
word-break: break-word;
overflow-wrap: anywhere;
}
/* Right-side CTA column (desktop) */
.mso-adir-card__cta {
display: flex; flex-direction: column; gap: 8px;
grid-column: 1 / -1;
padding-top: 14px;
border-top: 1px solid var(--mso-line);
}
@media (min-width: 760px) {
.mso-adir-card__cta {
grid-column: auto;
border-top: 0; padding-top: 0;
justify-content: center;
min-width: 180px;
}
}
.mso-adir-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 11px 20px;
border-radius: 8px;
font-weight: 600; font-size: 14px;
text-decoration: none;
border: 1px solid transparent;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.mso-adir-btn--primary { background: var(--mso-accent); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.2); }
.mso-adir-btn--primary:hover, .mso-adir-btn--primary:focus-visible {
background: var(--mso-ink); color: #fff;
box-shadow: 0 8px 20px -6px rgba(10,10,10,.22);
transform: translateY(-1px);
}
.mso-adir-btn--ghost { background: #fff; color: var(--mso-ink); border-color: var(--mso-line); }
.mso-adir-btn--ghost:hover, .mso-adir-btn--ghost:focus-visible { border-color: var(--mso-ink); background: var(--mso-ink); color: #fff; }
/* Grid view (compact tiles) */
.mso-adir-list.is-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .mso-adir-list.is-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .mso-adir-list.is-grid { grid-template-columns: repeat(3, 1fr); } }
.mso-adir-list.is-grid .mso-adir-card {
grid-template-columns: 1fr; gap: 14px; padding: 20px;
}
.mso-adir-list.is-grid .mso-adir-card__logo { width: 56px; height: 56px; font-size: 24px; }
.mso-adir-list.is-grid .mso-adir-card__cta { flex-direction: column; grid-column: auto; min-width: 0; border-top: 1px solid var(--mso-line); padding-top: 14px; }
.mso-adir-list.is-grid .mso-adir-card__stats { grid-template-columns: 1fr 1fr; }
/* Empty state */
.mso-adir-empty {
padding: 60px 20px; text-align: center;
color: var(--mso-muted); font-size: 15px;
background: #fff; border: 1px dashed var(--mso-line); border-radius: 12px;
}
.mso-agency-pill {
display: inline-flex; align-items: center;
padding: 4px 10px; border-radius: 999px;
background: rgba(18,18,18,.06); color: var(--mso-ink);
font-size: 12px; font-weight: 500; letter-spacing: .01em;
}
.mso-agency-pill--muted { background: transparent; color: var(--mso-muted); border: 1px solid var(--mso-line); }
.mso-agency-pill--outline { background: transparent; border: 1px solid var(--mso-line); color: var(--mso-ink); }
.mso-agency-pill--soft { background: var(--mso-tag-bg); color: var(--mso-accent); }
/* ================= Single Agency page ================= */
.mso-agency-profile { background: var(--mso-bg); }
.mso-agency-hero {
padding: 44px 0 44px;
background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
border-bottom: 1px solid var(--mso-line);
position: relative;
}
.mso-agency-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in oklab, var(--mso-accent) 6%, transparent), transparent 60%),
radial-gradient(ellipse 40% 50% at 100% 100%, color-mix(in oklab, var(--mso-accent) 4%, transparent), transparent 60%);
pointer-events: none;
}
.mso-agency-hero > * { position: relative; }
.mso-agency-hero__crumbs { font-size: 13px; color: var(--mso-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.mso-agency-hero__crumbs a { color: var(--mso-muted); text-decoration: none; }
.mso-agency-hero__crumbs a:hover { color: var(--mso-accent); }
.mso-agency-hero__inner { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 760px) { .mso-agency-hero__inner { grid-template-columns: 112px minmax(0, 1fr); gap: 32px; } }
.mso-agency-hero__logo {
width: 96px; height: 96px; border-radius: 18px;
background: linear-gradient(135deg, #fff 0%, var(--mso-tag-bg) 100%);
display: flex; align-items: center; justify-content: center;
font-family: var(--mso-display); font-size: 44px; font-weight: 800;
color: var(--mso-accent);
letter-spacing: -0.02em;
overflow: hidden;
border: 1px solid var(--mso-line);
box-shadow: inset 0 -2px 0 rgba(10,10,10,.03), 0 6px 20px -8px rgba(10,10,10,.08);
}
@media (min-width: 760px) { .mso-agency-hero__logo { width: 112px; height: 112px; font-size: 48px; } }
.mso-agency-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.mso-agency-hero__text { padding-top: 2px; }
/* Chrome row above the title: ribbon + verified badge together. */
.mso-agency-hero__badges {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-bottom: 14px;
}
.mso-agency-hero__ribbon {
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(180deg, #FBBF24, #F59E0B); color: #432900;
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
box-shadow: 0 4px 12px rgba(234,179,8,.35);
line-height: 1;
margin: 0;
}
.mso-agency-hero__ribbon::before { content: '★'; color: #78350F; }
.mso-agency-hero__title {
font-family: var(--mso-display);
font-weight: 700; font-size: clamp(30px, 4vw, 42px);
line-height: 1.08; letter-spacing: -0.025em;
margin: 0 0 10px; color: var(--mso-ink);
}
.mso-agency-hero__verified {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: #047857;
background: #ECFDF5;
border: 1px solid #A7F3D0;
padding: 6px 12px 6px 8px;
border-radius: 999px;
line-height: 1;
}
.mso-agency-hero__verified-icon { display: inline-block; width: 14px; height: 14px; color: #10B981; }
.mso-agency-hero__verified-icon svg { width: 100%; height: 100%; display: block; }
.mso-agency-hero__tagline {
color: var(--mso-text); font-size: 17px; line-height: 1.55;
margin: 0 0 20px; max-width: 60ch;
}
.mso-agency-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; align-items: center; }
.mso-agency-hero__rating {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: #FFFBEB;
border: 1px solid #FDE68A;
border-radius: 999px;
font-size: 14px; font-weight: 700; color: var(--mso-ink);
line-height: 1;
}
.mso-agency-hero__rating-stars { color: #F59E0B; letter-spacing: 1px; }
.mso-agency-hero__rating small { color: var(--mso-muted); font-weight: 500; font-size: 12px; margin-left: 2px; }
.mso-agency-hero__chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500; color: #374151;
background: #fff; padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--mso-line);
line-height: 1.3;
}
.mso-agency-hero__chip svg { width: 14px; height: 14px; color: var(--mso-muted); flex-shrink: 0; }
.mso-agency-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.mso-agency-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid transparent; transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease; }
.mso-agency-btn--primary { background: var(--mso-accent); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.2); }
.mso-agency-btn--primary:hover, .mso-agency-btn--primary:focus-visible {
background: var(--mso-ink);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 24px -8px rgba(10,10,10,.25);
}
.mso-agency-btn--ghost { background: #fff; color: var(--mso-ink); border-color: var(--mso-line); }
.mso-agency-btn--ghost:hover, .mso-agency-btn--ghost:focus-visible {
border-color: var(--mso-ink);
background: var(--mso-ink);
color: #fff;
}
.mso-agency-btn--block { display: flex; width: 100%; margin-top: 12px; }
/* Stat strip — each metric is its own icon-tile card with hover state. */
.mso-agency-stats { background: #fff; border-bottom: 1px solid var(--mso-line); padding: 32px 0; }
.mso-agency-stats__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14px;
margin: 0;
}
.mso-agency-stats__cell {
display: flex; align-items: flex-start; gap: 14px;
padding: 18px 20px;
background: #FAFBFC;
border: 1px solid #EEF0F3;
border-radius: 12px;
transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.mso-agency-stats__cell:hover {
border-color: color-mix(in oklab, var(--mso-accent) 35%, var(--mso-line));
background: #fff;
transform: translateY(-1px);
}
.mso-agency-stats__cell-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 10px;
background: var(--mso-tag-bg);
display: inline-flex; align-items: center; justify-content: center;
color: var(--mso-accent);
}
.mso-agency-stats__cell-icon svg { width: 16px; height: 16px; display: block; }
.mso-agency-stats__cell-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mso-agency-stats__cell dt {
font-size: 10px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--mso-muted);
margin: 0;
line-height: 1.2;
white-space: nowrap;
}
.mso-agency-stats__cell dd {
margin: 0;
font-weight: 700; font-size: 15px; color: var(--mso-ink);
line-height: 1.3;
word-break: break-word;
overflow-wrap: anywhere;
}
.mso-agency-layout { display: grid; gap: 28px; grid-template-columns: 1fr; padding: 36px 0 60px; }
@media (min-width: 960px) { .mso-agency-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } }
.mso-agency-body { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
/* Every content section on the profile is wrapped in a bordered card for
consistent grouping. Each gets an accent eyebrow + a tight serif-free title. */
.mso-agency-block {
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 14px;
padding: 28px 32px;
}
@media (max-width: 760px) { .mso-agency-block { padding: 22px 24px; } }
.mso-agency-block__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--mso-body);
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--mso-accent);
margin: 0 0 10px;
line-height: 1;
}
.mso-agency-block__eyebrow::before {
content: ''; width: 22px; height: 2px; background: var(--mso-accent); display: inline-block; border-radius: 2px;
}
.mso-agency-block__title {
font-family: var(--mso-display);
font-weight: 700; font-size: 22px;
line-height: 1.2; letter-spacing: -0.02em;
margin: 0 0 18px;
color: var(--mso-ink);
}
.mso-agency-block__lead { font-size: 16px; line-height: 1.65; color: var(--mso-text); margin: 0 0 0; }
.mso-agency-block__lead + * { margin-top: 20px; }
.mso-agency-block--verdict { background: linear-gradient(180deg, color-mix(in oklab, var(--mso-accent) 5%, #fff) 0%, #fff 60%); border-color: color-mix(in oklab, var(--mso-accent) 25%, var(--mso-line)); }
.mso-agency-block--verdict .mso-agency-block__eyebrow { margin-bottom: 12px; }
.mso-agency-block--verdict p:not(.mso-agency-block__eyebrow) { font-size: 17px; line-height: 1.6; margin: 0; color: var(--mso-ink); }
/* Two-column arrangement for complementary cards (Services + Industries).
align-items: start so cards size to content and don't stretch unevenly. */
.mso-agency-twoup {
display: grid; grid-template-columns: 1fr; gap: 20px;
align-items: start;
}
@media (min-width: 760px) { .mso-agency-twoup { grid-template-columns: 1fr 1fr; } }
/* Service chip-row — flowing pills with a filled checkmark circle. */
.mso-agency-servicelist {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.mso-agency-servicelist li {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px 7px 10px;
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 999px;
font-size: 13px; font-weight: 500; color: var(--mso-ink);
line-height: 1.3;
transition: border-color .16s ease, background .16s ease;
}
.mso-agency-servicelist li:hover { border-color: var(--mso-accent); background: color-mix(in oklab, var(--mso-accent) 4%, #fff); }
.mso-agency-servicelist__check {
flex-shrink: 0;
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--mso-accent);
color: #fff;
}
.mso-agency-servicelist__check svg { width: 10px; height: 10px; display: block; stroke-width: 3.5; }
/* Industry list — subtle accent-dot pill cloud. */
.mso-agency-industrylist { display: flex; flex-wrap: wrap; gap: 6px; }
.mso-agency-industrylist__item {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
background: var(--mso-tag-bg);
color: var(--mso-accent-ink);
border-radius: 999px;
font-size: 13px; font-weight: 600;
line-height: 1.3;
}
.mso-agency-industrylist__item::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--mso-accent); opacity: .7; flex-shrink: 0;
}
/* Client type pills + their mini label. */
.mso-agency-tags__label {
font-family: var(--mso-body);
font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--mso-muted);
margin: 20px 0 10px;
}
.mso-agency-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mso-agency-tag {
display: inline-flex; align-items: center;
padding: 5px 12px;
background: #fff;
border: 1px solid var(--mso-line);
border-radius: 999px;
font-size: 12px; font-weight: 500; color: #374151;
line-height: 1.4;
}
.mso-agency-pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* FAQ accordion. Each question is a → the browser handles state. */
.mso-agency-faqs { list-style: none; margin: 0; padding: 0; }
.mso-agency-faqs > li { border-top: 1px solid var(--mso-line); }
.mso-agency-faqs > li:first-child { border-top: 0; }
.mso-agency-faq { }
.mso-agency-faq__q {
list-style: none; cursor: pointer;
padding: 20px 0;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-family: var(--mso-display);
font-weight: 600; font-size: 16px; line-height: 1.4;
color: var(--mso-ink);
transition: color .16s ease;
}
.mso-agency-faq__q::-webkit-details-marker { display: none; }
.mso-agency-faq__q:hover { color: var(--mso-accent); }
.mso-agency-faq__icon {
flex-shrink: 0;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid var(--mso-line);
color: var(--mso-muted);
transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}
.mso-agency-faq__icon svg { width: 14px; height: 14px; display: block; }
.mso-agency-faq[open] .mso-agency-faq__icon {
background: var(--mso-ink); color: #fff; border-color: var(--mso-ink);
transform: rotate(45deg);
}
.mso-agency-faq__a { padding: 0 0 22px; color: var(--mso-text); line-height: 1.65; font-size: 15px; }
.mso-agency-faq__a p { margin: 0 0 10px; }
.mso-agency-faq__a p:last-child { margin-bottom: 0; }
.mso-agency-proscons { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .mso-agency-proscons { grid-template-columns: 1fr 1fr; } }
.mso-agency-proscons__col { background: #fff; border: 1px solid var(--mso-line); border-radius: 14px; padding: 20px 22px; }
.mso-agency-proscons__col h3 { margin: 0 0 12px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.mso-agency-proscons__col--pros h3 { color: #15803d; }
.mso-agency-proscons__col--cons h3 { color: #b91c1c; }
.mso-agency-proscons__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mso-agency-proscons__col li { position: relative; padding-left: 22px; line-height: 1.5; font-size: 15px; }
.mso-agency-proscons__col--pros li::before { content: '+'; position: absolute; left: 0; top: 0; color: #15803d; font-weight: 700; }
.mso-agency-proscons__col--cons li::before { content: '−'; position: absolute; left: 0; top: 0; color: #b91c1c; font-weight: 700; }
.mso-agency-proscons__empty { color: var(--mso-muted); padding-left: 0 !important; }
.mso-agency-proscons__empty::before { content: '' !important; }
.mso-agency-pricing-card { background: #fff; border: 1px solid var(--mso-line); border-radius: 14px; overflow: hidden; }
.mso-agency-pricing-card__row { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--mso-line); gap: 12px; }
.mso-agency-pricing-card__row:last-child { border-bottom: 0; }
.mso-agency-pricing-card__row span { color: var(--mso-muted); font-size: 14px; }
.mso-agency-pricing-card__row strong { color: var(--mso-ink); font-size: 15px; text-align: right; }
.mso-agency-awards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mso-agency-awards li { padding: 10px 14px; background: #fff; border: 1px solid var(--mso-line); border-radius: 10px; font-size: 15px; }
.mso-agency-side { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 960px) { .mso-agency-side { position: sticky; top: 100px; align-self: start; } }
.mso-agency-side__card { background: #fff; border: 1px solid var(--mso-line); border-radius: 16px; padding: 22px 22px; }
.mso-agency-side__title { font-family: var(--mso-serif); font-weight: 500; font-size: 20px; margin: 0 0 14px; }
.mso-agency-side__facts { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mso-agency-side__facts > div { display: flex; flex-direction: column; gap: 2px; }
.mso-agency-side__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mso-muted); margin: 0; }
.mso-agency-side__facts dd { margin: 0; font-size: 14px; color: var(--mso-ink); line-height: 1.5; }
.mso-agency-side__facts a { color: var(--mso-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mso-line); }
.mso-agency-side__facts a:hover { color: var(--mso-accent); text-decoration-color: var(--mso-accent); }
.mso-agency-side__social { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mso-line); }
.mso-agency-side__social-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mso-muted); margin: 0 0 8px; }
.mso-agency-side__social ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mso-agency-side__social a { font-size: 14px; color: var(--mso-ink); text-decoration: none; padding: 6px 10px; background: var(--mso-tag-bg); border-radius: 999px; }
.mso-agency-side__social a:hover { color: var(--mso-accent); }
.mso-agency-related { background: #fff; padding: 50px 0 70px; border-top: 1px solid var(--mso-line); }
.mso-agency-related__title { font-family: var(--mso-serif); font-weight: 500; font-size: 28px; margin: 0 0 20px; }
.mso-agency-related__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .mso-agency-related__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mso-agency-related__grid { grid-template-columns: repeat(4, 1fr); } }
.mso-agency-related__card { display: flex; gap: 12px; align-items: flex-start; padding: 18px 18px; background: var(--mso-bg); border: 1px solid var(--mso-line); border-radius: 14px; text-decoration: none; color: var(--mso-ink); transition: border-color .18s ease, transform .18s ease; }
.mso-agency-related__card:hover { border-color: var(--mso-accent); transform: translateY(-1px); }
.mso-agency-related__logo { width: 44px; height: 44px; border-radius: 10px; background: var(--mso-tag-bg); display: flex; align-items: center; justify-content: center; font-family: var(--mso-serif); font-weight: 600; color: var(--mso-accent); overflow: hidden; flex-shrink: 0; }
.mso-agency-related__logo img { width: 100%; height: 100%; object-fit: cover; }
.mso-agency-related__name { margin: 0; font-family: var(--mso-serif); font-weight: 500; font-size: 17px; line-height: 1.25; }
.mso-agency-related__tagline { margin: 4px 0 6px; font-size: 13px; color: var(--mso-muted); line-height: 1.4; }
.mso-agency-related__rating { font-size: 12px; color: var(--mso-ink); font-weight: 600; }