:root {
--ink: #112241;
--ink-2: #1b2d52;
--bone: #f4f7fc;
--chip: #eef2f8;
--soft: 0 1px 2px rgba(17, 34, 65, .06), 0 10px 26px rgba(17, 34, 65, .07);
--surface: #ffffff;
--surface-2: #eef3fa;
--surface-3: #e6f0fe;
--text: #112241;
--muted: #4a5773;
--faint: #5a6780;
--on-dark: #ffffff;
--on-dark-2: #c9d3e6;
--on-dark-3: #9aa8c2;
--line: #e2e8f2;
--line-2: #7d8ba3;
--line-dark: rgba(255, 255, 255, .14);
--brand: #065df6;
--on-brand: #ffffff;
--brand-tint: #e6f0fe;
--brand-on-dark: #5cb8ff;
--action: #065df6;
--action-dark: #0139e3;
--action-tint: var(--brand-tint);
--score: #b57700;
--score-ink: #8a5a00;
--score-tint: #fff3d9;
--verified: #0e7a52;
--verified-ink: #0b6645;
--verified-tint: #e3f5ec;
--sponsored: #5a6780;
--sponsored-ink: #3b4760;
--sponsored-tint: var(--surface-2);
--alert: #b8391f;
--alert-tint: #fdecea;
--display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--t-xs: .75rem;
--t-meta: .8125rem;
--t-sm: .875rem;
--t-body-sm: .9375rem;
--t-base: 1rem;
--t-md: 1.125rem;
--t-lg: 1.25rem;
--t-xl: 1.75rem;
--t-2xl: 2.5rem;
--t-3xl: 3.5rem;
--t-d-1: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem);
--t-d-2: clamp(2rem, 1.5rem + 1.6vw, 3rem);
--t-d-3: clamp(1.5rem, 1.3rem + .8vw, 2rem);
--lh-tight: 1.15;
--lh-snug: 1.35;
--lh-base: 1.6;
--lh-loose: 1.7;
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 24px;
--s6: 32px;
--s7: 48px;
--s8: 72px;
--s9: 96px;
--gutter: clamp(30px, 5vw, 50px);
--max: 1320px;
--max-outer: calc(var(--max) + 2 * var(--gutter));
--measure: 62ch;
--section: 72px;
--header-h: 60px;
--radius: 22px;
--radius-sm: 12px;
--radius-lg: 28px;
--radius-pill: 999px;
--radius-xl: 32px;
--accent: #065df6;
--accent-hover: #0139e3;
--on-accent: #ffffff;
--accent-tint: #e6f0fe;
--accent-ink: #065df6;
--brand-2: #029cfc;
--hero-mid: #0139e3;
--on-hero: rgba(255, 255, 255, .9);
--on-hero-2: rgba(255, 255, 255, .8);
--hero-em: #9ed3ff;
--focus-halo: 0 0 0 3px rgba(6, 93, 246, .25);
--glow: 0 10px 24px -12px rgba(17, 34, 65, .45);
--glow-accent: 0 10px 24px -10px rgba(6, 93, 246, .5);
--lift: 0 2px 6px rgba(17, 34, 65, .05), 0 24px 48px -24px rgba(17, 34, 65, .18);
--lift-lg: 0 4px 12px rgba(17, 34, 65, .06), 0 36px 64px -28px rgba(17, 34, 65, .26);
--dur: .15s;
--dur-slow: .22s;
--ease: cubic-bezier(.2, .7, .2, 1);
--canvas: var(--bone);
--oan-canvas: var(--bone);
--oan-surface: var(--surface);
--oan-surface-2: var(--surface-2);
--oan-ink: var(--ink);
--oan-ink-2: var(--ink-2);
--oan-text: var(--text);
--oan-muted: var(--muted);
--oan-faint: var(--faint);
--oan-line: var(--line);
--oan-line-strong: var(--line-2);
--oan-primary: var(--action);
--oan-primary-dark: var(--action-dark);
--oan-primary-tint: var(--action-tint);
--oan-score: var(--score);
--oan-score-ink: var(--score-ink);
--oan-score-tint: var(--score-tint);
--oan-verified: var(--verified);
--oan-verified-ink: var(--verified-ink);
--oan-verified-tint: var(--verified-tint);
--oan-sponsored: var(--sponsored);
--oan-sponsored-tint: var(--sponsored-tint);
--oan-alert: var(--alert);
--oan-alert-tint: var(--alert-tint);
--oan-display: var(--display);
--oan-body: var(--sans);
--oan-mono: var(--mono);
--oan-radius: var(--radius);
--oan-radius-sm: var(--radius-sm);
--oan-gap: var(--gutter);
--oan-max: var(--max);
--oan-measure: var(--measure);
--oan-section: var(--section);
--oan-block: var(--s5);
--oan-header-h: var(--header-h);
--oan-shadow: none;
--oan-shadow-lift: var(--lift);
--oan-shadow-deep: var(--lift-lg);
--oan-s1: var(--s1); --oan-s2: var(--s2); --oan-s3: var(--s3); --oan-s4: var(--s4);
--oan-s5: var(--s5); --oan-s6: var(--s6); --oan-s7: var(--s7); --oan-s8: var(--s8);
--oan-dur: var(--dur);
--oan-dur-slow: var(--dur-slow);
--oan-ease: var(--ease);
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("fonts/jakarta-latin.woff2") format("woff2");
font-weight: 200 800; font-style: normal; font-display: swap;
}
body {
margin: 0;
background: var(--bone);
color: var(--text);
font-family: var(--sans);
font-size: var(--t-base);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-weight: 400;
}
[class^="oan-"], [class*=" oan-"] { box-sizing: border-box; }
[class^="oan-"] *, [class*=" oan-"] * { box-sizing: inherit; }
html { overflow-x: clip; }
body { overflow-x: clip; }
h1, h2, h3, h4 {
font-family: var(--sans);
color: var(--ink);
letter-spacing: -.02em;
line-height: var(--lh-tight);
}
.oan-tile--anchor :is(h1, h2, h3, h4),
.oan-footer :is(h1, h2, h3, h4),
.oan-cta__panel:first-child :is(h1, h2, h3, h4) {
color: inherit;
}
h1, h2, h3 { font-family: var(--display); }
h1 { font-size: var(--t-d-1); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: var(--t-d-2); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
h3 { font-size: var(--t-d-3); font-weight: 600; letter-spacing: -.015em; line-height: 1.22; }
:where(body:not(.home)) h2 { font-size: var(--t-d-3); }
body { font-feature-settings: "cv11" 1, "ss01" 0; }
.oan-fact dd, .oan-cell--num, time, .oan-count { font-variant-numeric: tabular-nums; }
h4 { font-size: var(--t-base); font-weight: 600; }
a {
color: var(--action);
text-decoration-color: currentColor;
text-underline-offset: 3px;
}
a:hover { color: var(--action-dark); text-decoration-thickness: 2px; }
::selection { background: var(--brand-tint); color: var(--text); }
.oan-tile--anchor a:not(.oan-btn),
.oan-footer a:not(.oan-btn) {
color: var(--on-dark-2);
text-decoration-color: currentColor;
}
.oan-tile--anchor p a:not(.oan-btn),
.oan-footer p a:not(.oan-btn) {
color: var(--brand-on-dark);
text-decoration: underline;
}
.oan-tile--anchor a:not(.oan-btn):hover,
.oan-footer a:not(.oan-btn):hover { color: var(--on-dark); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--action);
outline-offset: 2px;
border-radius: 3px;
}
:where(.wp-site-blocks) :focus:not(:focus-visible) {
outline: none;
}
.oan-tile--anchor :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.oan-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.oan-pagehead__lead :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.oan-homehead__lead :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline-color: var(--brand-on-dark);
}
img, svg { max-width: 100%; }
img { height: auto; }
.oan-count, .oan-mix__key b, .oan-pagehead__route, .oan-gate__n,
.oan-compare__rank, .oan-rating__value, .oan-chip, .oan-job__meta, .oan-score-rail__value,
.oan-fact dd, .oan-cell--num, time {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "calt" 0;
}
.oan-fact--text dd, .oan-cell--text, .oan-compare__name, .oan-stat--text dd {
font-family: var(--sans);
font-variant-numeric: normal;
}
.oan-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.oan-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important; height: 1px !important;
overflow: hidden !important;
}
.wp-block-post-title {
font-family: var(--display);
font-size: var(--t-d-1);
font-weight: 600;
line-height: 1.02;
letter-spacing: -.025em;
color: var(--text);
}
main > [class*="oan-"],
.entry-content > [class*="oan-"],
.wp-site-blocks > [class*="oan-"] {
margin-block: 0 var(--section);
}
.entry-content > :is(p, ul, ol, blockquote):not([class*="oan-"]) + [class*="oan-"] {
margin-block-start: var(--s6);
}
body.oan-wide {
--wp--style--global--content-size: var(--max);
--wp--style--global--wide-size: var(--max);
}
.oan-band {
max-width: var(--max-outer);
margin-inline: auto;
padding-inline: var(--gutter);
}
.has-global-padding .oan-band { max-width: var(--max); padding-inline: 0; }
.oan-prose {
max-width: var(--measure);
font-size: var(--t-md);
line-height: var(--lh-loose);
}
.oan-prose p { margin: 0 0 var(--s4); }
.oan-prose > :last-child { margin-bottom: 0; }
.oan-sec-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
flex-wrap: wrap;
padding-top: var(--s5);
border-top: 1px solid var(--line);
margin-bottom: var(--s5);
}
.oan-sec-head h2 { margin: 0; }
.oan-sec-head a {
display: inline-flex;
align-items: center;
min-height: 24px;
font-size: var(--t-base);
font-weight: 700;
text-decoration: none;
}
.oan-eyebrow {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--faint);
margin: 0 0 var(--s2);
}
.oan-eyebrow--sm { font-size: var(--t-xs); }
.oan-bento {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--s5);
max-width: var(--max);
margin-inline: auto;
align-items: stretch;
}
.oan-t-12 { grid-column: span 12; }
.oan-t-9  { grid-column: span 9; }
.oan-t-8  { grid-column: span 8; }
.oan-t-6  { grid-column: span 6; }
.oan-t-4  { grid-column: span 4; }
.oan-t-3  { grid-column: span 3; }
.oan-t-r2 { grid-row: span 2; }
.entry-content.is-layout-flow > .oan-bento,
.wp-site-blocks > .oan-bento {
width: 100vw;
max-width: none;
margin-inline: calc(50% - 50vw);
padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2));
}
.entry-content.is-layout-flow > .oan-bento > *,
.wp-site-blocks > .oan-bento > * { min-width: 0; }
.oan-tile {
display: flex;
flex-direction: column;
gap: var(--s4);
min-width: 0;
padding: var(--s6);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-tile--link:hover {
border-color: var(--line-2);
box-shadow: var(--lift);
transform: translateY(-1px);
}
.oan-tile--sunken {
background: var(--surface-2);
border-color: transparent;
}
.oan-tile--anchor { align-self: start; }
.oan-tile--anchor {
background: var(--ink);
border-color: var(--ink);
color: var(--on-dark-2);
}
.oan-tile--anchor h1,
.oan-tile--anchor h2,
.oan-tile--anchor h3,
.oan-tile--anchor strong { color: var(--on-dark); }
.oan-tile__lede {
margin: 0;
max-width: 46ch;
font-size: var(--t-md);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-bento > .oan-t-12 { padding: var(--s7) var(--s6); }
.oan-tile__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
flex-wrap: wrap;
margin-bottom: var(--s4);
}
.oan-tile__head h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -.022em; line-height: 1.15; }
.oan-tile__foot { margin-top: auto; padding-top: var(--s4); }
.oan-header {
position: relative;
z-index: 40;
background: var(--bone);
border-bottom: 1px solid transparent;
transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.oan-header.is-condensed {
background: color-mix(in srgb, var(--bone) 90%, transparent);
backdrop-filter: saturate(1.6) blur(8px);
box-shadow: 0 1px 0 var(--line), var(--lift);
}
.oan-header__inner {
position: relative;
max-width: var(--max-outer);
margin-inline: auto;
padding: var(--s2) var(--gutter);
min-height: 76px;
display: flex;
align-items: center;
gap: var(--s5);
}
.oan-header.is-condensed .oan-header__inner { padding-block: var(--s1); }
.oan-header__brand {
display: inline-flex;
align-items: center;
gap: var(--s3);
text-decoration: none;
min-width: 0;
}
.oan-brand__logo {
display: block;
height: 44px;
width: auto;
max-width: 100%;
}
.oan-brand__name {
font-family: var(--display);
font-weight: 700;
font-size: 1.3125rem;
letter-spacing: -.02em;
color: var(--text);
white-space: nowrap;
}
.oan-brand__short { display: none; }
.oan-header__actions {
display: flex;
align-items: center;
gap: var(--s3);
margin-left: auto;
}
.oan-header__login {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: var(--s2) var(--s3);
font-size: var(--t-body-sm);
font-weight: 600;
color: var(--text);
text-decoration: none;
white-space: nowrap;
border-radius: var(--radius-pill);
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.oan-header__login:hover { color: var(--action); background: var(--surface-2); }
.oan-header .oan-header__cta {
min-height: 40px;
padding: var(--s2) var(--s4);
font-size: var(--t-sm);
border-radius: var(--radius-pill);
box-shadow: none;
}
form.oan-search {
display: flex;
align-items: center;
gap: var(--s2);
}
form.oan-search input[type="search"] {
min-width: 0;
min-height: 40px;
font-family: var(--sans);
font-size: var(--t-sm);
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
padding: var(--s2) var(--s4);
}
form.oan-search input[type="search"]:focus-visible {
outline: 2px solid var(--action);
outline-offset: 1px;
border-color: var(--action);
z-index: 1;
}
form.oan-search button[type="submit"] {
flex: 0 0 auto;
min-height: 36px;
padding: var(--s1) var(--s4);
border: 1px solid var(--action);
border-radius: var(--radius-pill);
background: var(--action);
color: var(--on-brand);
font-size: var(--t-sm);
font-weight: 700;
white-space: nowrap;
}
form.oan-search button[type="submit"]:hover {
background: var(--action-dark);
border-color: var(--action-dark);
}
.home .oan-search { display: none; }
.oan-nav {
display: flex;
align-items: stretch;
gap: var(--s4);
flex-wrap: nowrap;
list-style: none;
margin: 0;
padding: 0;
}
.oan-nav__item {
position: relative;
display: flex;
align-items: center;
gap: var(--s1);
flex: 0 0 auto;
white-space: nowrap;
}
.oan-nav__item > a {
display: inline-flex;
align-items: center;
gap: var(--s1);
padding: var(--s2) 0;
font-size: var(--t-body-sm);
font-weight: 500;
color: var(--text);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur) var(--ease);
}
.oan-nav__item > a:hover { color: var(--action); }
.oan-nav__caret {
display: inline-grid;
place-items: center;
width: 16px;
height: 20px;
margin-left: -2px;
}
.oan-nav__caret::before {
content: "";
width: 7px;
height: 7px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.oan-nav__item--mega:hover > .oan-nav__caret::before,
.oan-nav__item--mega:has(> .oan-mega:focus-within) > .oan-nav__caret::before,
.oan-sub-toggle:checked ~ .oan-nav__caret::before {
transform: translateY(1px) rotate(-135deg);
border-color: var(--action);
}
.oan-nav__item--mega:hover > a,
.oan-nav__item--mega:focus-within > a,
.oan-nav__item--mega:has(> .oan-sub-toggle:checked) > a { color: var(--action); }
.oan-nav .oan-nav__item.is-dismissed > .oan-nav__caret::before {
transform: translateY(-2px) rotate(45deg);
border-color: var(--muted);
}
.oan-nav .oan-nav__item--cta > a.oan-btn--primary { color: var(--on-dark); }
.oan-nav .oan-nav__item--cta > a.oan-btn--primary:hover { color: var(--on-brand); }
.oan-nav__item > a.is-current {
color: var(--action);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 10px;
}
.oan-nav-toggle, .oan-nav-burger, .oan-nav-scrim { display: none; }
.oan-sub-toggle {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}
.oan-mega__col-toggle,
.oan-mega__back,
.oan-nav__back { display: none; }
.oan-mega .oan-mega__label > label {
cursor: inherit;
pointer-events: none;
}
.oan-sub-toggle:focus-visible ~ .oan-nav__caret {
outline: 2px solid var(--action);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.oan-mega {
position: absolute;
top: 100%;
left: var(--gutter);
right: var(--gutter);
width: fit-content;
margin-inline: auto;
white-space: normal;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
background: var(--surface);
border: 1px solid transparent;
border-radius: var(--radius);
box-shadow: var(--lift-lg);
transition:
opacity .15s var(--ease) .12s,
transform .15s var(--ease) .12s,
visibility 0s linear .27s;
z-index: 50;
}
.oan-mega::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: var(--s4);
}
.oan-nav__item:hover > .oan-mega,
.oan-mega:focus-within,
.oan-sub-toggle:checked ~ .oan-mega {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: .06s, .06s, .06s;
}
.oan-nav .oan-nav__item.is-dismissed > .oan-mega {
opacity: 0;
visibility: hidden;
transition-delay: 0s;
}
.oan-mega__inner {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(180px, 248px);
gap: var(--s6);
padding: var(--s5);
max-height: calc(100vh - 92px);
overflow-y: auto;
overscroll-behavior: contain;
}
.oan-mega__col {
display: flex;
flex-direction: column;
min-width: 0;
}
.oan-mega__label {
font-size: var(--t-xs);
line-height: 1.4;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--faint);
margin: 0 0 var(--s2);
}
.oan-mega__col--cont::before {
content: "";
display: block;
height: calc(var(--t-xs) * 1.4);
margin-bottom: var(--s2);
}
.oan-mega__col ul {
display: grid;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.oan-mega__col li { display: block; }
.oan-mega__col li > a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
margin-inline: -10px;
padding: 5px 10px;
border-radius: 10px;
font-size: var(--t-body-sm);
font-weight: 500;
line-height: 1.35;
color: var(--text);
text-decoration: none;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-mega__col li > a:hover,
.oan-mega__col li > a:focus-visible {
background: var(--brand-tint);
color: var(--action);
}
.oan-mega__col .oan-nav__name { min-width: 0; }
.oan-mega__col .oan-nav__count {
flex: 0 0 auto;
font-size: var(--t-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--faint);
}
.oan-mega__col li > a:hover .oan-nav__count { color: var(--action); }
.oan-mega__more {
margin: 0;
margin-top: auto;
padding-top: var(--s4);
}
.oan-mega__more a {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: var(--t-sm);
font-weight: 600;
color: var(--action);
text-decoration: none;
}
.oan-mega__more a:hover { color: var(--action-dark); text-decoration: underline; }
.oan-mega__main {
grid-column: span 3;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-items: center;
gap: var(--s2);
min-width: 0;
}
.oan-mega__tab-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.oan-mega__tab {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 8px 14px;
border-radius: var(--radius-pill);
font-size: var(--t-body-sm);
font-weight: 600;
color: var(--text);
background: var(--surface-2);
cursor: pointer;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-mega__tab:hover { background: var(--brand-tint); color: var(--action); }
.oan-mega__tab-input:checked + .oan-mega__tab {
background: var(--ink);
color: var(--on-dark);
}
.oan-mega__tab-input:focus-visible + .oan-mega__tab {
outline: 2px solid var(--action);
outline-offset: 2px;
}
.oan-mega__country {
display: inline-flex;
align-items: baseline;
gap: var(--s2);
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
}
.oan-mega__tab .oan-nav__count,
.oan-mega__country .oan-nav__count,
.oan-mega__all .oan-nav__count {
font-size: var(--t-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--faint);
}
.oan-mega__tab-input:checked + .oan-mega__tab .oan-nav__count { color: var(--on-dark-2); }
.oan-mega__all {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin-left: auto;
font-size: var(--t-sm);
font-weight: 600;
color: var(--action);
text-decoration: none;
}
.oan-mega__all:hover { color: var(--action-dark); text-decoration: underline; }
.oan-mega__tabpanel {
display: none;
flex: 1 1 100%;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: var(--s4) var(--s6);
margin-top: var(--s3);
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.oan-mega__main > .oan-mega__tabpanel:only-of-type,
.oan-mega__tab-input:nth-of-type(1):checked ~ .oan-mega__tabpanel:nth-of-type(1),
.oan-mega__tab-input:nth-of-type(2):checked ~ .oan-mega__tabpanel:nth-of-type(2),
.oan-mega__tab-input:nth-of-type(3):checked ~ .oan-mega__tabpanel:nth-of-type(3),
.oan-mega__tab-input:nth-of-type(4):checked ~ .oan-mega__tabpanel:nth-of-type(4),
.oan-mega__tab-input:nth-of-type(5):checked ~ .oan-mega__tabpanel:nth-of-type(5),
.oan-mega__tab-input:nth-of-type(6):checked ~ .oan-mega__tabpanel:nth-of-type(6),
.oan-mega__tab-input:nth-of-type(7):checked ~ .oan-mega__tabpanel:nth-of-type(7),
.oan-mega__tab-input:nth-of-type(8):checked ~ .oan-mega__tabpanel:nth-of-type(8) {
display: grid;
}
.oan-mega__tabfoot {
grid-column: 1 / -1;
margin: 0;
padding-top: var(--s3);
border-top: 1px solid var(--line);
}
.oan-mega__tabfoot a {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: var(--t-sm);
font-weight: 600;
color: var(--action);
text-decoration: none;
}
.oan-mega__tabfoot a:hover { color: var(--action-dark); text-decoration: underline; }
.oan-mega__tabfoot .oan-nav__count {
font-size: var(--t-xs);
font-weight: 600;
color: var(--faint);
}
.oan-mega__aside {
display: flex;
flex-direction: column;
gap: var(--s3);
min-width: 0;
padding: var(--s5);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.oan-mega__aside .oan-mega__label { margin: 0; }
.oan-mega__who-list {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.oan-mega__who-list a {
display: flex;
align-items: center;
gap: var(--s3);
margin-inline: -8px;
padding: 6px 8px;
border-radius: 10px;
color: var(--text);
text-decoration: none;
transition: background-color var(--dur) var(--ease);
}
.oan-mega__who-list a:hover { background: var(--surface); }
.oan-mega__logo,
.oan-mega__mark {
display: grid;
place-items: center;
flex: 0 0 auto;
object-fit: contain;
border-radius: 10px;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line);
font-size: var(--t-meta);
font-weight: 700;
color: var(--ink);
}
.oan-mega__logo { width: 40px; height: 40px; }
.oan-mega__who { display: grid; min-width: 0; }
.oan-mega__who-name {
font-size: var(--t-body-sm);
font-weight: 600;
line-height: 1.3;
}
.oan-mega__who-list a:hover .oan-mega__who-name { color: var(--action); }
.oan-mega__who-place {
font-size: var(--t-xs);
color: var(--muted);
}
.oan-mega__cta {
margin-top: auto;
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.oan-mega__cta-title {
margin: 0;
font-size: var(--t-body-sm);
font-weight: 700;
color: var(--text);
}
.oan-mega__cta-text {
margin: 4px 0 var(--s3);
font-size: var(--t-sm);
line-height: 1.45;
color: var(--muted);
}
.oan-mega__cta-btn {
justify-content: center;
width: 100%;
min-height: 40px;
}
.oan-mega__col .oan-mega__marks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3);
margin: 0;
padding: 0;
list-style: none;
}
.oan-mega__col .oan-mega__marks li { display: flex; }
.oan-mega__col .oan-mega__marks li > a {
flex: 1 1 auto;
display: flex;
justify-content: flex-start;
margin: 0;
flex-direction: column;
align-items: center;
gap: 6px;
padding: var(--s3) var(--s2);
border-radius: var(--radius-sm);
background: var(--surface-2);
font-size: var(--t-xs);
font-weight: 600;
line-height: 1.3;
text-align: center;
color: var(--text);
text-decoration: none;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-mega__col .oan-mega__marks li > a:hover { background: var(--brand-tint); color: var(--action); }
.oan-mega__mark { width: 48px; height: 48px; border-radius: 12px; }
.oan-mega__nudge {
margin: var(--s4) 0 0;
font-size: var(--t-sm);
line-height: 1.45;
color: var(--muted);
}
.oan-mega__nudge a {
font-weight: 600;
color: var(--action);
text-decoration: none;
white-space: nowrap;
}
.oan-mega__nudge a:hover { color: var(--action-dark); text-decoration: underline; }
.oan-mega__cover {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--ink);
color: var(--on-dark);
}
.oan-mega__cover-icon {
width: 32px;
height: 32px;
}
.oan-mega__new {
display: inline-block;
margin-right: 4px;
padding: 1px 8px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--surface);
font-size: var(--t-xs);
font-weight: 700;
color: var(--ink);
vertical-align: 1px;
}
.oan-mega__feature {
display: grid;
gap: var(--s2);
margin-bottom: var(--s3);
color: var(--text);
text-decoration: none;
}
.oan-mega__feature-title {
font-size: var(--t-body-sm);
font-weight: 600;
line-height: 1.35;
}
.oan-mega__feature:hover .oan-mega__feature-title { color: var(--action); }
.oan-mega__events {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.oan-mega__col li > a.oan-mega__event {
display: flex;
align-items: flex-start;
justify-content: flex-start;
font-size: inherit;
font-weight: inherit;
gap: var(--s3);
margin-inline: -8px;
padding: 6px 8px;
border-radius: 10px;
color: var(--text);
text-decoration: none;
transition: background-color var(--dur) var(--ease);
}
.oan-mega__col li > a.oan-mega__event:hover { background: var(--brand-tint); color: var(--text); }
.oan-mega__date {
display: grid;
justify-items: center;
flex: 0 0 44px;
padding: 4px 0;
border-radius: 10px;
background: var(--surface-2);
line-height: 1.1;
}
.oan-mega__day {
font-size: 1.125rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.oan-mega__mon {
font-size: var(--t-xs);
font-weight: 600;
color: var(--muted);
}
.oan-mega__event-body { display: grid; min-width: 0; }
.oan-mega__event-title {
font-size: var(--t-body-sm);
font-weight: 600;
line-height: 1.3;
}
.oan-mega__event:hover .oan-mega__event-title { color: var(--action); }
.oan-mega__event-place {
font-size: var(--t-xs);
color: var(--muted);
}
.oan-mega__col--latest { grid-column: span 3; }
.oan-mega__col .oan-mega__posts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s4);
margin: 0;
padding: 0;
list-style: none;
}
.oan-mega__col li > a.oan-mega__post {
display: grid;
align-content: start;
justify-content: stretch;
gap: 6px;
margin: 0;
padding: 0;
border-radius: 0;
font-size: inherit;
font-weight: inherit;
color: var(--text);
text-decoration: none;
}
.oan-mega__col li > a.oan-mega__post:hover { background: none; color: var(--text); }
.oan-mega__post .oan-mega__cover { margin-bottom: 4px; }
.oan-mega .oan-mega__cover:has(> .oan-mega__cover-picture) {
background: var(--surface);
border: 1px solid var(--line);
}
.oan-mega__cover-picture {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oan-mega__post-topic {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--action);
}
.oan-mega__post-title {
font-size: var(--t-body-sm);
font-weight: 600;
line-height: 1.35;
}
.oan-mega__post:hover .oan-mega__post-title { color: var(--action); }
.oan-mega__post-meta {
font-size: var(--t-xs);
color: var(--muted);
}
.oan-footer {
background: var(--ink);
color: var(--on-dark-2);
padding-block: var(--s8) var(--s6);
margin-block-start: var(--section);
}
.oan-footer__inner {
max-width: var(--max-outer);
margin-inline: auto;
padding-inline: var(--gutter);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
gap: var(--s6) var(--s5);
}
.oan-footer__col { min-width: 0; }
.oan-footer__col h3 {
font-family: var(--sans);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--on-dark-3);
margin: 0 0 var(--s3);
}
.oan-foot-toggle { display: none; }
.oan-footer__col h3 label { cursor: inherit; }
.oan-footer__col ul { list-style: none; margin: 0; padding: 0; }
.oan-footer__col li { margin-bottom: var(--s2); }
.oan-footer__col a {
font-size: var(--t-sm);
color: var(--on-dark-2);
text-decoration: none;
transition: color var(--dur) var(--ease);
}
.oan-footer__col a:hover { color: var(--on-dark); text-decoration: underline; }
.oan-footer__legal {
max-width: var(--max-outer);
margin: var(--s7) auto 0;
padding: var(--s5) var(--gutter) 0;
border-top: 1px solid var(--line-dark);
font-size: var(--t-sm);
color: var(--on-dark-3);
}
.oan-footer__legal a { color: var(--on-dark-2); }
.wp-block-template-part:has(> .oan-header) {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 40;
}
.oan-header { position: relative; }
.oan-header__nav,
.oan-header__actions { min-width: 0; margin-left: auto; padding-left: var(--s5); }
.oan-header__nav { flex: 0 0 auto; }
.oan-header__nav { display: flex; align-self: stretch; align-items: stretch; }
.oan-header__brand { flex: 0 0 auto; }
.oan-nav__item--mega { position: static; }
.oan-nav__item--narrow { position: relative; }
.oan-nav__item--narrow > .oan-mega {
top: calc(100% + var(--s2));
left: 50%;
right: auto;
width: max-content;
max-width: min(640px, calc(100vw - 2 * var(--gutter)));
margin-inline: 0;
transform: translate(-50%, -6px);
}
.oan-nav__item--narrow:hover > .oan-mega,
.oan-nav__item--narrow > .oan-mega:focus-within,
.oan-nav__item--narrow > .oan-sub-toggle:checked ~ .oan-mega { transform: translate(-50%, 0); }
.oan-search__icon { display: none; }
.oan-header .oan-search { position: relative; }
.oan-header .oan-search__icon {
display: block;
position: absolute;
top: 50%;
left: 14px;
z-index: 2;
width: 16px;
height: 16px;
margin-top: -8px;
color: var(--muted);
pointer-events: none;
}
.oan-header .oan-search__icon svg { display: block; width: 16px; height: 16px; }
.oan-header form.oan-search input[type="search"] { padding-left: 38px; }
.oan-header form.oan-search button[type="submit"] { display: none; }
.oan-footer__brand {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s4) var(--s6);
max-width: var(--max-outer);
margin: 0 auto var(--s7);
padding: 0 var(--gutter) var(--s6);
border-bottom: 1px solid var(--line-dark);
}
.oan-footer__brand img { display: block; height: 52px; width: auto; }
.oan-footer__brand p {
margin: 0;
max-width: 46ch;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--on-dark-2);
}
.oan-pagehead {
position: relative;
padding: 0 var(--wp--style--root--padding-left, var(--gutter));
margin-block: 0 var(--s6);
color: var(--text);
}
.entry-content.is-layout-flow > .oan-pagehead { padding-inline: 0; }
.oan-pagehead__inner {
position: relative;
max-width: var(--max);
margin-inline: auto;
container: oan-head / inline-size;
}
body:not(.oan-wide) .entry-content h2:not(.oan-eyebrow),
body:not(.oan-wide) .oan-prose h2:not(.oan-eyebrow) {
font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
letter-spacing: -.014em;
}
body:not(.oan-wide) .entry-content h3,
body:not(.oan-wide) .oan-prose h3 {
font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
}
body:not(.oan-wide) .oan-pagehead__inner {
max-width: var(--wp--style--global--content-size, 645px);
}
.oan-pagehead__route {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
}
.oan-pagehead__route ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s1) var(--s2);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.oan-pagehead__route li {
display: flex;
align-items: center;
gap: var(--s2);
min-width: 0;
}
.oan-pagehead__route li:not(:last-child)::after {
content: "/";
opacity: .55;
}
.oan-pagehead__route a { text-decoration: none; }
.oan-byline { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.oan-byline a { color: var(--action); }
.oan-byline strong { color: var(--text); font-weight: 700; }
.oan-gates { margin: 0; }
.oan-gates__head {
display: flex;
align-items: center;
gap: var(--s2);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--on-dark-3);
margin: 0 0 var(--s4);
}
.oan-gates ol { list-style: none; margin: 0; padding: 0; }
.oan-gate {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: var(--s3);
align-items: baseline;
padding: var(--s3) 0;
border-bottom: 1px solid var(--line-dark);
}
.oan-gate:last-child { border-bottom: 0; }
.oan-gate__n { font-size: var(--t-sm); font-weight: 700; color: var(--brand-on-dark); }
.oan-gate__t { font-size: var(--t-base); color: var(--on-dark-2); }
.oan-gates__foot { margin: var(--s4) 0 0; font-size: var(--t-sm); color: var(--on-dark-3); }
.oan-gates__foot a { color: var(--on-dark-2); }
.oan-gates--panel { color: var(--text); }
.oan-gates--panel .oan-gates__head { color: var(--faint); }
.oan-gates--panel .oan-gate { border-color: var(--line); }
.oan-gates--panel .oan-gate__n { color: var(--verified-ink); }
.oan-gates--panel .oan-gate__t { color: var(--text); }
.oan-gates--panel .oan-gates__foot { color: var(--muted); }
main:has(> .oan-pagehead:first-child),
main:has(> .wp-block-group:first-child > .oan-pagehead:first-child),
main:has(> .entry-content:first-child > .oan-pagehead:first-child) {
margin-top: 0 !important;
}
main > .wp-block-group:has(> .oan-pagehead:first-child) {
padding-top: 0 !important;
}
main > .wp-block-group:has(> .oan-pagehead:first-child):has(> .entry-content > [class*="oan-"]:last-child) {
padding-bottom: 0 !important;
}
main > .wp-block-group:has(> .oan-pagehead:first-child) > .entry-content > [class*="oan-"]:last-child { margin-bottom: 0; }
.oan-pagehead:first-child { margin-block-start: 0; }
main:has(> .oan-bento:first-child) { margin-top: 0 !important; }
.oan-breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s1) var(--s2);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--mono);
font-size: var(--t-xs);
letter-spacing: .04em;
text-transform: uppercase;
}
.oan-breadcrumbs li {
display: flex;
align-items: center;
gap: var(--s2);
min-width: 0;
}
.oan-breadcrumbs li + li::before {
content: "/";
color: var(--muted);
opacity: .55;
}
.oan-breadcrumbs a { color: inherit; text-decoration: none; }
.oan-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-breadcrumbs [aria-current="page"] { color: var(--text); }
.oan-tile--anchor .oan-breadcrumbs { color: var(--on-dark-2); }
.oan-tile--anchor .oan-breadcrumbs [aria-current="page"] { color: var(--on-dark); }
.oan-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 44px;
padding: 11px 18px;
font-family: var(--sans);
font-size: var(--t-body-sm);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-btn:hover {
color: var(--text);
border-color: var(--line-2);
box-shadow: var(--lift);
}
.oan-btn:active { transform: translateY(1px); }
.oan-btn--sm {
min-height: 36px;
padding: 7px 14px;
font-size: var(--t-sm);
}
.oan-btn--primary {
background: var(--ink);
border-color: var(--ink);
color: var(--on-dark);
box-shadow: none;
}
.oan-btn--primary:hover {
background: var(--action);
border-color: var(--action);
color: var(--on-brand);
box-shadow: none;
}
.oan-btn--accent {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
box-shadow: var(--glow-accent);
}
.oan-btn--accent:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: var(--on-accent);
box-shadow: var(--glow-accent);
}
.oan-btn--secondary { background: var(--surface); border-color: var(--line); color: var(--text); }
.oan-btn--secondary:hover {
background: var(--surface);
border-color: var(--line-2);
color: var(--text);
box-shadow: var(--lift);
}
.oan-tile--anchor .oan-btn--primary {
background: var(--on-dark);
border-color: var(--on-dark);
color: var(--ink);
box-shadow: none;
}
.oan-tile--anchor .oan-btn--primary:hover {
background: var(--on-dark-2);
border-color: var(--on-dark-2);
color: var(--ink);
box-shadow: none;
}
.oan-tile--anchor .oan-btn--secondary {
background: none;
border-color: var(--on-dark-3);
color: var(--on-dark);
}
.oan-tile--anchor .oan-btn--secondary:hover {
background: none;
border-color: var(--on-dark);
color: var(--on-dark);
box-shadow: none;
}
.oan-btn--ghost {
background: none;
border-color: transparent;
color: var(--text);
padding-inline: var(--s3);
}
.oan-btn--ghost:hover {
background: var(--brand-tint);
border-color: transparent;
color: var(--text);
box-shadow: none;
}
.oan-field, .oan-form-row { margin: 0 0 var(--s4); }
.oan-field label,
.oan-filter__field label,
.oan-form-row label {
display: block;
margin-bottom: var(--s1);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-field input, .oan-field select, .oan-field textarea,
.oan-filter select, .oan-filter input[type="text"],
.oan-form-row input, .oan-form-row select, .oan-form-row textarea {
width: 100%;
min-height: 44px;
padding: 10px 14px;
font-family: var(--sans);
font-size: var(--t-body-sm);
line-height: 1.4;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.oan-field textarea, .oan-form-row textarea { min-height: 140px; line-height: var(--lh-base); }
.oan-field input:focus-visible, .oan-field select:focus-visible, .oan-field textarea:focus-visible,
.oan-filter select:focus-visible, .oan-filter input[type="text"]:focus-visible,
.oan-form-row input:focus-visible, .oan-form-row select:focus-visible, .oan-form-row textarea:focus-visible {
border-color: var(--action);
box-shadow: var(--focus-halo);
outline: 2px solid transparent;
outline-offset: 2px;
}
.oan-field-note { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--muted); }
.oan-check, .oan-check-field, .oan-consent {
display: flex;
align-items: center;
gap: var(--s2);
min-height: 24px;
font-size: var(--t-base);
color: var(--text);
cursor: pointer;
}
.oan-check input[type="checkbox"],
.oan-check-field input[type="checkbox"],
.oan-consent input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--action);
flex: 0 0 auto;
}
label[for], summary, .oan-nav__caret, .oan-nav-burger, .oan-row__pick { cursor: pointer; }
.oan-filter {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s6);
margin-block-end: var(--s6);
}
.oan-filter__toggle-input { display: none; }
.oan-filter__toggle {
display: flex;
align-items: center;
gap: var(--s2);
min-height: 24px;
font-size: var(--t-base);
font-weight: 700;
color: var(--text);
user-select: none;
}
.oan-filter__toggle-caret {
width: 7px;
height: 7px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--dur) var(--ease);
}
.oan-filter__toggle-input:checked ~ .oan-filter__toggle .oan-filter__toggle-caret {
transform: rotate(225deg) translate(-2px, -2px);
}
.oan-filter__toggle-input:focus-visible ~ .oan-filter__toggle {
outline: 2px solid var(--action);
outline-offset: 3px;
}
.oan-filter__fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
gap: var(--s3) var(--s4);
align-items: end;
margin-top: var(--s4);
}
.oan-filter__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s3);
margin-top: var(--s3);
}
.oan-t-4 .oan-filter__fields,
.oan-t-3 .oan-filter__fields { grid-template-columns: 1fr; }
.oan-filter__toggle,
.oan-filter__toggle-input { display: none; }
.oan-bento > .oan-t-4 > .oan-filter,
.oan-bento > .oan-t-3 > .oan-filter,
.oan-filter--rail {
position: sticky;
top: calc(var(--header-h) + var(--s4));
max-height: calc(100vh - var(--header-h) - var(--s6));
overflow-y: auto;
overscroll-behavior: contain;
}
.oan-filter__field { margin: 0; }
.oan-search {
display: flex;
align-items: stretch;
flex: 1 1 240px;
min-width: 190px;
max-width: 320px;
border-radius: var(--radius-pill);
}
.oan-search:focus-within { box-shadow: var(--focus-halo); }
.oan-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
min-height: 40px;
border: 1px solid var(--line-2);
border-right: 0;
border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.oan-search input[type="search"]:focus-visible {
border-color: var(--action);
outline: 2px solid transparent;
outline-offset: 2px;
}
.oan-search button[type="submit"] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: var(--s4);
border: 1px solid var(--action);
border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
background: var(--action);
color: var(--on-brand);
font: inherit;
font-size: var(--t-sm);
font-weight: 700;
cursor: pointer;
}
.oan-search button[type="submit"]:hover { background: var(--action-dark); border-color: var(--action-dark); }
.oan-search button[type="submit"]:focus-visible {
outline: 2px solid var(--action);
outline-offset: 2px;
}
.oan-listing {
display: flex;
flex-direction: column;
gap: var(--s4);
margin: 0;
padding: 0;
list-style: none;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
}
.oan-row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 176px;
align-items: stretch;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition:
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.oan-row:hover {
box-shadow: var(--lift);
transform: translateY(-1px);
}
.oan-row.is-picked { border-color: var(--action); }
.oan-row__main {
display: flex;
align-items: center;
gap: var(--s5);
min-width: 0;
padding: var(--s5) var(--s6);
}
.oan-row__mark {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--s3);
}
.oan-row__body { flex: 1 1 auto; min-width: 0; }
.oan-row__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s4);
font-size: var(--t-sm);
color: var(--muted);
}
.oan-row__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s1) var(--s3);
margin-bottom: var(--s1);
}
.oan-row__logo {
width: 56px;
height: 56px;
object-fit: contain;
border-radius: var(--radius);
flex: 0 0 auto;
}
span.oan-row__logo {
display: grid;
place-items: center;
background: var(--brand);
font-family: var(--display);
font-size: var(--t-md);
font-weight: 700;
letter-spacing: -.01em;
color: var(--on-dark);
}
.oan-row .oan-row__name {
margin: 0;
font-family: var(--display);
font-size: 19px;
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: -.02em;
}
.oan-row__name a { color: var(--text); text-decoration: none; }
.oan-row__name a:hover { color: var(--action); }
.oan-row__excerpt {
margin: var(--s2) 0 var(--s3);
font-size: var(--t-body-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-row__facts {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s1) var(--s4);
margin: 0;
}
.oan-row__facts .oan-fact {
display: flex;
align-items: baseline;
gap: 5px;
}
.oan-fact { margin: 0; }
.oan-fact dt {
font-size: var(--t-meta);
font-weight: 500;
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-fact dd {
margin: 0;
font-size: var(--t-sm);
font-weight: 600;
line-height: var(--lh-snug);
color: var(--text);
}
.oan-row__side {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: var(--s2);
padding: var(--s4) var(--s5) var(--s4) 0;
}
.oan-row__actions { display: flex; flex-direction: column; gap: var(--s2); }
.oan-row__actions .oan-btn { font-size: var(--t-sm); }
.oan-row__pick {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s2);
font-size: var(--t-sm);
color: var(--muted);
}
.oan-row__pick input { width: 18px; height: 18px; accent-color: var(--action); }
.oan-row__pick { min-height: 24px; }
.oan-row.is-picked .oan-row__pick { color: var(--action-dark); }
.oan-score-chip {
display: inline-flex;
align-items: baseline;
gap: var(--s2);
padding: 4px 9px;
border-radius: var(--radius-pill);
background: var(--score-tint);
color: var(--score-ink);
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.oan-score-chip__v {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.oan-score-chip__k {
font-weight: 600;
letter-spacing: .02em;
}
.oan-score-chip--none {
background: var(--surface-2);
color: var(--muted);
}
.oan-score-rail {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s2);
padding: var(--s4) var(--s3);
background: var(--surface-2);
border-right: 1px solid var(--line);
text-align: center;
}
.oan-score-rail__dial {
position: relative;
display: grid;
place-items: center;
width: 72px;
height: 72px;
}
.oan-score-rail__dial svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(135deg);
overflow: visible;
}
.oan-score-rail__dial circle {
fill: none;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 131.95 175.93;
}
.oan-dial__track { stroke: var(--line-2); }
.oan-score-rail__dial .oan-dial__read {
stroke: var(--score);
stroke-dasharray: calc(131.95 * var(--dial, 0)) 175.93;
}
.oan-score-rail__value {
position: relative;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: var(--t-xl);
font-weight: 600;
line-height: 1;
letter-spacing: -.03em;
color: var(--text);
}
.oan-score-rail__band {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--score-ink);
line-height: 1.2;
}
.oan-score-rail__band:empty { display: none; }
.oan-score-rail__label {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--faint);
line-height: 1.2;
}
.oan-mix { margin: 0; flex: 1 1 360px; max-width: 560px; }
.oan-mix__bar {
display: flex;
height: 6px;
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--surface-3);
gap: 2px;
}
.oan-mix__seg { height: 100%; }
.oan-mix__key {
display: flex;
flex-wrap: wrap;
gap: var(--s1) var(--s3);
list-style: none;
margin: var(--s2) 0 0;
padding: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-mix__key li { display: flex; align-items: center; gap: var(--s1); }
.oan-mix__dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.oan-mix__key b { font-weight: 700; color: var(--text); }
.oan-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--s3);
list-style: none;
margin: 0;
padding: 0;
}
.oan-chip {
font-size: var(--t-sm);
color: var(--muted);
white-space: nowrap;
}
.oan-chips > * + *::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin-right: var(--s3);
vertical-align: -1px;
background: var(--line-2);
}
.oan-badges { display: inline-flex; flex-wrap: wrap; gap: var(--s2); }
.oan-badge {
display: inline-flex;
align-items: center;
gap: var(--s1);
padding: 4px 9px;
font-family: var(--sans);
font-size: var(--t-xs);
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
background: var(--surface-2);
color: var(--text);
border-radius: var(--radius-pill);
}
.oan-badge--verified { background: var(--verified-tint); color: var(--verified-ink); }
.oan-badge--verified svg { width: 11px; height: 11px; flex: 0 0 11px; }
.oan-badge--tier { background: var(--brand-tint); color: var(--action); }
.oan-badge--trial { background: var(--action-tint); color: var(--action-dark); }
.oan-badge--sponsored { background: var(--sponsored-tint); color: var(--sponsored-ink); }
.oan-rating {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--t-sm);
color: var(--muted);
text-decoration: none;
}
.oan-rating:hover { color: var(--action); }
.oan-rating__stars { display: inline-flex; }
.oan-rating__value { font-weight: 700; color: var(--text); }
.oan-listing-order {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s3);
margin: 0 0 var(--s4);
font-size: var(--t-sm);
color: var(--muted);
}
.oan-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2);
margin-block-start: var(--s6);
}
.oan-pagination ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-pagination a, .oan-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 0 var(--s3);
font-size: var(--t-sm);
font-weight: 600;
text-decoration: none;
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text);
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-pagination a:hover { border-color: var(--action); color: var(--action); }
.oan-pagination [aria-current] { background: var(--action); border-color: var(--action); color: var(--on-brand); }
.oan-results {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s3);
margin: 0 0 var(--s3);
}
.oan-results__count { margin: 0; font-size: var(--t-body-sm); color: var(--muted); }
.oan-results__count b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.oan-results__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-results__chip {
display: inline-flex;
align-items: center;
gap: var(--s2);
min-height: 32px;
padding: 0 var(--s3);
border-radius: var(--radius-pill);
background: var(--brand-tint);
color: var(--text);
font-size: var(--t-sm);
font-weight: 600;
text-decoration: none;
}
.oan-results__chip::after { content: "\00d7"; font-size: 1.15em; line-height: 1; color: var(--muted); }
.oan-results__chip:hover { box-shadow: inset 0 0 0 1px var(--action); color: var(--text); }
.oan-results__chip:hover::after { color: var(--action); }
.oan-results__clear { font-size: var(--t-sm); font-weight: 600; color: var(--action); }
.oan-row .oan-row__actions .oan-btn--secondary,
.oan-row .oan-row__actions .oan-btn--secondary:hover {
min-height: 0;
padding: var(--s1) 0;
background: none;
border-color: transparent;
box-shadow: none;
color: var(--action);
font-weight: 600;
}
.oan-row .oan-row__actions .oan-btn--secondary:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-card__budget,
.oan-case__metrics dd,
.oan-score-factor__val,
.oan-score-panel__big,
.oan-reviews__big,
.oan-plan__price {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.oan-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
gap: var(--s5);
}
.oan-card {
display: flex;
flex-direction: column;
gap: var(--s3);
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition:
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.oan-card:hover {
box-shadow: var(--lift);
transform: translateY(-1px);
}
.oan-card__media {
display: block;
aspect-ratio: 16 / 9;
margin: calc(var(--s5) * -1) calc(var(--s5) * -1) 0;
overflow: hidden;
background: var(--surface-2);
border-radius: var(--radius) var(--radius) 0 0;
}
.oan-card__media--drawn,
.oan-insight__media--drawn {
background: var(--surface-3);
}
.oan-profile-main > .oan-post-cover {
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--lift);
}
.oan-profile-main > .oan-post-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oan-drawn {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oan-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oan-card__head {
display: flex;
align-items: center;
gap: var(--s3);
min-width: 0;
}
.oan-card__id {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2);
min-width: 0;
}
.oan-card__id > h3 { flex: 1 0 100%; }
.oan-card h3 {
margin: 0;
font-family: var(--display);
font-size: 19px;
font-weight: 600;
line-height: var(--lh-tight);
letter-spacing: -.02em;
}
.oan-card h3 a { color: var(--text); text-decoration: none; }
.oan-card h3 a:hover { color: var(--action); }
.oan-card__logo {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: var(--radius-sm);
flex: 0 0 auto;
}
span.oan-card__logo {
display: grid;
place-items: center;
background: var(--brand);
font-family: var(--display);
font-size: var(--t-base);
font-weight: 700;
color: var(--on-dark);
}
.oan-card__tags {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-card__excerpt {
margin: 0;
font-size: var(--t-body-sm);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-card__budget {
margin: 0;
font-size: var(--t-sm);
font-weight: 700;
color: var(--text);
}
.oan-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s4);
margin: auto 0 0;
font-size: var(--t-sm);
}
.oan-card__actions time { color: var(--faint); }
.oan-exhibit {
margin: 0;
font-family: var(--mono);
font-size: var(--t-xs);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--faint);
}
.oan-case__metrics {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
gap: var(--s3) var(--s4);
margin: 0;
}
.oan-case__metrics dt {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-case__metrics dd {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
color: var(--text);
}
.oan-case__quote {
margin: 0;
display: grid;
gap: var(--s2);
}
.oan-case__quote blockquote {
margin: 0;
font-size: var(--t-base);
color: var(--text);
}
.oan-case__quote figcaption {
font-size: var(--t-sm);
color: var(--muted);
}
.oan-quote {
margin: 0;
gap: var(--s4);
}
.oan-quote blockquote {
margin: 0;
font-size: var(--t-lg);
line-height: var(--lh-snug);
color: var(--text);
}
.oan-quote__by {
display: flex;
align-items: center;
gap: var(--s3);
margin: auto 0 0;
min-width: 0;
}
.oan-quote__mark {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 50%;
background: var(--surface-2);
flex: 0 0 auto;
}
span.oan-quote__mark {
display: grid;
place-items: center;
font-size: var(--t-sm);
font-weight: 700;
color: var(--muted);
}
.oan-quote__who {
display: grid;
min-width: 0;
font-size: var(--t-sm);
line-height: var(--lh-snug);
}
.oan-quote__who b { font-weight: 700; color: var(--text); }
.oan-quote__who span { color: var(--muted); }
.oan-table-wrap {
max-width: 100%;
overflow-x: auto;
container-type: inline-size;
}
.oan-table,
.oan-compare,
.oan-plans {
width: 100%;
border-collapse: collapse;
font-size: var(--t-sm);
}
.oan-table caption,
.oan-compare caption,
.oan-plans caption {
padding-block-end: var(--s3);
font-size: var(--t-sm);
text-align: start;
color: var(--muted);
position: sticky;
left: 0;
max-width: 100cqw;
white-space: normal;
}
.oan-table th,
.oan-table td,
.oan-compare th,
.oan-compare td,
.oan-plans th,
.oan-plans td {
padding: var(--s3) var(--s4);
text-align: start;
vertical-align: top;
}
.oan-table thead th,
.oan-compare thead th,
.oan-plans thead th {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
border-bottom: 1px solid var(--line);
}
.oan-table tbody tr + tr > *,
.oan-compare tbody tr + tr > *,
.oan-plans tbody tr + tr > * {
border-top: 1px solid var(--line);
}
.oan-table tbody th,
.oan-compare tbody th,
.oan-plans tbody th {
font-weight: 700;
color: var(--text);
}
figure.wp-block-table {
max-width: 100%;
margin-block: var(--s5);
overflow-x: auto;
container-type: inline-size;
}
figure.wp-block-table table {
width: 100%;
border-collapse: collapse;
font-size: var(--t-sm);
}
figure.wp-block-table table:has(th:nth-child(4)) { min-width: 36rem; }
figure.wp-block-table :is(th, td) {
padding: var(--s3) var(--s4);
border: 0;
text-align: start;
vertical-align: top;
}
figure.wp-block-table thead th {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
border-bottom: 1px solid var(--line);
}
figure.wp-block-table tbody tr + tr > * {
border-top: 1px solid var(--line);
}
.oan-compare td {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.oan-compare .oan-cell--text,
.oan-compare .oan-compare__name {
font-family: var(--sans);
font-variant-numeric: normal;
}
.oan-compare caption {
box-sizing: border-box;
padding-inline: var(--s4);
}
.oan-compare .oan-compare__title {
display: block;
font-size: var(--t-lg);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: -.01em;
color: var(--ink);
}
.oan-compare .oan-compare__sub { display: block; margin-top: var(--s1); }
.oan-compare .oan-compare__sub::first-letter { text-transform: uppercase; }
.oan-compare td { vertical-align: middle; }
.oan-compare__agency {
display: inline-flex;
align-items: center;
gap: var(--s3);
}
.oan-compare .oan-compare__agency a {
font-weight: 600;
color: var(--text);
text-decoration: none;
}
.oan-compare .oan-compare__agency a:hover { color: var(--action); }
.oan-compare__logo {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 8px;
object-fit: contain;
}
span.oan-compare__logo {
display: grid;
place-items: center;
background: var(--brand);
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
color: var(--on-dark);
}
.oan-compare__pill {
display: inline-grid;
place-items: center;
min-width: 40px;
height: 28px;
padding: 0 var(--s2);
border-radius: var(--radius-pill);
background: var(--score-tint);
font-weight: 700;
color: var(--score-ink);
}
.oan-plans thead th { vertical-align: bottom; }
.oan-plans td { text-align: center; }
.oan-plans tbody { font-size: var(--t-body-sm); }
.oan-plan__name,
.oan-plan__price,
.oan-plan__period {
display: block;
letter-spacing: normal;
text-transform: none;
}
.oan-plan__name {
font-family: var(--display);
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -.02em;
color: var(--text);
}
.oan-plan__price {
margin-top: var(--s2);
font-size: var(--t-xl);
font-weight: 600;
line-height: var(--lh-tight);
color: var(--text);
}
.oan-plan__period {
font-size: var(--t-meta);
font-weight: 500;
color: var(--faint);
}
.oan-plan__per {
font-family: var(--sans);
font-size: var(--t-sm);
font-weight: 600;
color: var(--muted);
}
.oan-plans .oan-plans__col--recommended { background: var(--brand-tint); }
.oan-plans thead .oan-plans__col--recommended { border-radius: 12px 12px 0 0; }
.oan-plans tbody tr:last-child .oan-plans__col--recommended { border-radius: 0 0 12px 12px; }
.oan-plan__badge {
display: inline-block;
margin-bottom: var(--s2);
padding: 2px 10px;
border-radius: 999px;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .04em;
text-transform: none;
color: var(--on-brand);
background: var(--action);
}
.oan-table-wrap:has(> .oan-plans) { display: none; }
.oan-plan-cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s4);
}
.oan-plan-cards__note {
grid-column: 1 / -1;
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-plan-card {
display: flex;
flex-direction: column;
gap: var(--s3);
padding: var(--s5);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--lift);
}
.oan-plan-card--recommended {
background: var(--brand-tint);
box-shadow: inset 0 0 0 2px var(--action), var(--lift);
}
.oan-plan-card .oan-plan__badge { align-self: flex-start; margin: 0; }
.oan-plan-card__name {
margin: 0;
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -.02em;
color: var(--text);
}
.oan-plan-card__price { margin: 0; }
.oan-plan-card__price .oan-plan__price {
display: block;
margin: 0;
font-size: var(--t-xl);
font-weight: 600;
line-height: var(--lh-tight);
color: var(--text);
}
.oan-plan-card__price .oan-plan__period {
display: block;
font-size: var(--t-meta);
font-weight: 500;
color: var(--faint);
}
.oan-plan-card .oan-plan__cta {
justify-content: center;
min-height: 44px;
}
.oan-plan-card__list {
display: grid;
margin: var(--s2) 0 0;
padding: 0;
list-style: none;
font-size: var(--t-sm);
}
.oan-plan-card__item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s3);
padding: var(--s2) 0;
border-top: 1px solid var(--line);
}
.oan-plan-card__k { color: var(--text); }
.oan-plan-card__v {
flex: 0 0 auto;
font-weight: 600;
text-align: end;
color: var(--text);
}
.oan-plan-card__item--no .oan-plan-card__k { color: var(--faint); }
.oan-plan-card__v .oan-tick { transform: translateY(-2px) rotate(45deg); }
.oan-billing__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.oan-billing__switch {
display: flex;
gap: 4px;
width: fit-content;
margin: 0 auto var(--s5);
padding: 4px;
border-radius: var(--radius-pill);
background: var(--surface);
box-shadow: var(--lift);
}
.oan-billing__opt {
display: inline-flex;
align-items: center;
gap: var(--s2);
min-height: 44px;
padding: 0 var(--s5);
border-radius: var(--radius-pill);
font-size: var(--t-body-sm);
font-weight: 600;
color: var(--muted);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-billing__opt:hover { color: var(--text); }
.oan-billing__input--year:checked ~ .oan-billing__switch .oan-billing__opt--year,
.oan-billing__input--month:checked ~ .oan-billing__switch .oan-billing__opt--month {
background: var(--ink);
color: var(--on-dark);
}
.oan-billing__input--year:focus-visible ~ .oan-billing__switch .oan-billing__opt--year,
.oan-billing__input--month:focus-visible ~ .oan-billing__switch .oan-billing__opt--month {
outline: 2px solid var(--action);
outline-offset: 2px;
}
.oan-billing__save {
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--brand-tint);
font-size: var(--t-xs);
font-weight: 700;
color: var(--action-dark);
}
.oan-billing__input--year:checked ~ .oan-billing__switch .oan-billing__save {
background: var(--line-dark);
color: var(--on-dark);
}
.oan-billing__input--year:checked ~ * .oan-plan__when--month,
.oan-billing__input--month:checked ~ * .oan-plan__when--year { display: none; }
.oan-tick {
display: inline-block;
width: var(--s2);
height: var(--s3);
border: solid var(--verified);
border-width: 0 2px 2px 0;
transform: translateY(calc(var(--s1) * -.5)) rotate(45deg);
vertical-align: middle;
}
.oan-cross {
color: var(--faint);
}
.oan-faq {
display: grid;
gap: var(--s5);
}
.oan-faq > h2 { margin: 0; }
.oan-faq__cols,
.oan-faq__col {
display: grid;
gap: var(--s3);
align-content: start;
min-width: 0;
}
.oan-faq__item {
display: block;
padding: var(--s4) var(--s5);
border-radius: var(--radius-sm);
background: var(--surface-2);
}
.oan-faq__item > summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s4);
list-style: none;
cursor: pointer;
}
.oan-faq__item > summary::-webkit-details-marker { display: none; }
.oan-faq__item > summary::after {
content: "";
flex: none;
width: 8px;
height: 8px;
margin: 7px 4px 0 0;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(45deg);
transition: transform var(--dur) var(--ease);
}
.oan-faq__item[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.oan-faq__item > summary h3 { flex: 1 1 auto; min-width: 0; }
.oan-faq__item > summary:hover h3 { color: var(--action); }
.oan-faq__item > p { margin-top: var(--s3); }
.oan-faq__item h3 {
margin: 0;
font-size: var(--t-md);
font-weight: 700;
line-height: 1.35;
}
.oan-faq__item p {
margin: 0;
max-width: var(--measure);
color: var(--muted);
}
.oan-editorial {
display: grid;
gap: var(--s7);
}
.oan-editorial__section {
display: grid;
gap: var(--s3);
}
.oan-editorial__section h2 { margin: 0; }
.oan-editorial__section p {
margin: 0;
max-width: var(--measure);
}
.oan-editorial__body {
display: grid;
gap: var(--s3);
min-width: 0;
}
.oan-editorial__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: var(--s3) var(--s5);
margin: 0;
padding: 0;
list-style: none;
}
.oan-editorial__list li {
position: relative;
padding-left: var(--s5);
line-height: 1.45;
}
.oan-editorial__list li::before {
content: "";
position: absolute;
left: 5px;
top: .3em;
width: 6px;
height: 11px;
border: solid var(--action);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.oan-hub-intro {
margin: 0;
padding-inline-end: max(0px, calc(100% - var(--measure)));
font-size: var(--t-lg);
line-height: var(--lh-base);
color: var(--text);
}
.oan-hub-intro p { margin: 0 0 var(--s3); }
.oan-hub-intro p:last-child { margin-bottom: 0; }
.oan-links {
display: grid;
gap: var(--s4);
}
.oan-links > h2 { margin: 0; }
.oan-links[id] { scroll-margin-top: calc(var(--header-h) + var(--s7)); }
.oan-links ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
gap: var(--s2) var(--s5);
margin: 0;
padding: 0;
list-style: none;
}
.oan-links li {
display: flex;
align-items: baseline;
gap: var(--s2);
min-width: 0;
font-size: var(--t-base);
}
.oan-links li > a { min-width: 0; }
.oan-count {
font-size: var(--t-sm);
color: var(--faint);
}
.oan-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: var(--s5) var(--s6);
}
.oan-strip__col {
display: grid;
gap: var(--s3);
align-content: start;
min-width: 0;
}
.oan-strip__col h2 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
}
.oan-strip__col ul {
display: grid;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-strip__col li {
display: flex;
align-items: center;
gap: var(--s3);
min-width: 0;
font-size: var(--t-base);
}
.oan-strip__mark {
width: 28px;
height: 28px;
object-fit: contain;
border-radius: var(--radius-sm);
flex: 0 0 auto;
}
span.oan-strip__mark {
display: grid;
place-items: center;
background: var(--surface-2);
font-size: var(--t-xs);
font-weight: 700;
color: var(--muted);
}
.oan-strip__more {
margin: 0;
font-size: var(--t-sm);
}
.oan-jobs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
gap: var(--s4) var(--s5);
margin: 0;
padding: 0;
list-style: none;
}
.oan-jobs li {
display: flex;
flex-direction: column;
gap: var(--s1);
min-width: 0;
}
.oan-jobs li > a { font-weight: 700; }
.oan-job__meta {
font-size: var(--t-sm);
color: var(--muted);
}
.oan-cta {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--s4);
margin-block: var(--s8);
}
.oan-cta__panel {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
gap: var(--s3);
padding: var(--s6);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.oan-cta__panel h2 { margin: 0; font-size: var(--t-lg); }
.oan-cta__panel p  { margin: 0; color: var(--muted); max-width: 42ch; }
.oan-cta__panel .oan-btn { margin-top: auto; }
.oan-cta__panel:first-child {
background: var(--ink);
border-color: var(--ink);
color: var(--on-dark);
}
.oan-cta__panel:first-child p { color: var(--on-dark-2); }
.oan-method {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--s5) var(--s7);
align-items: start;
margin-block: var(--s7);
}
.oan-method h2 {
margin: 0;
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--faint);
}
.oan-method > :not(h2) { grid-column: 2; }
.oan-method p { max-width: var(--measure); color: var(--muted); margin-block: 0 var(--s4); }
.oan-method p:last-child { margin-bottom: 0; }
.oan-method__note {
margin-top: var(--s4);
padding: var(--s4) var(--s5);
border-left: 2px solid var(--action);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
background: var(--surface-2);
font-size: var(--t-body-sm);
}
.oan-method__note strong { color: var(--text); font-weight: 700; }
.oan-plan-card .oan-plan-card__rest { margin: 0; }
.oan-plan-card .oan-more__toggle:checked + .oan-plan-card__rest { display: grid; }
.oan-plan-card .oan-more__label { margin-top: var(--s3); }
.oan-faq.oan-join-faq { margin-top: var(--s7); }
.oan-profile-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--s7) var(--s8);
align-items: start;
}
.wp-block-group.oan-profile-body > * { margin-block: 0; }
.oan-profile-body:has(> .oan-links) > .oan-profile-main { grid-column: 1; grid-row: 1; }
.oan-profile-body:has(> .oan-links) > .oan-profile-rail { grid-column: 2; grid-row: 1 / span 2; }
.oan-profile-body > .oan-links { grid-column: 1; grid-row: 2; min-width: 0; margin: 0; }
.oan-profile-main {
display: grid;
gap: var(--s7);
align-content: start;
min-width: 0;
}
.oan-profile-rail {
position: sticky;
top: calc(var(--header-h) + var(--s5));
display: flex;
flex-direction: column;
gap: var(--s5);
min-width: 0;
}
.oan-profile-rail > .oan-table-wrap,
.oan-profile-rail > .oan-apart,
.oan-profile-rail > .oan-clients,
.oan-profile-rail > .oan-offices {
margin: 0;
padding: var(--s4) var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-profile-rail h2 {
margin: 0;
font-family: var(--sans);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--faint);
}
.oan-profile-score {
display: grid;
}
.oan-score-panel {
display: grid;
gap: var(--s4);
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-score-panel__head {
display: flex;
align-items: center;
gap: var(--s4);
}
.oan-score-panel__big {
font-size: var(--t-3xl);
font-weight: 600;
line-height: 1;
letter-spacing: -.03em;
color: var(--text);
}
.oan-score-panel--none .oan-score-panel__big {
color: var(--muted);
}
.oan-score__label {
margin: 0;
font-size: var(--t-xs);
line-height: var(--lh-snug);
color: var(--muted);
text-transform: none;
letter-spacing: normal;
}
.oan-score-panel__factors {
display: grid;
gap: var(--s3);
}
.oan-score-factor {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--s1) var(--s3);
align-items: baseline;
}
.oan-score-factor__name {
font-size: var(--t-sm);
color: var(--text);
}
.oan-score-factor__val {
font-size: var(--t-xs);
color: var(--faint);
}
.oan-score-factor__bar {
grid-column: 1 / -1;
height: var(--s1);
overflow: hidden;
background: var(--surface-2);
border-radius: var(--radius-pill);
}
.oan-score-factor__fill {
display: block;
height: 100%;
background: var(--score);
border-radius: inherit;
}
.oan-score-note {
margin: 0;
font-size: var(--t-body-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-score-note a { color: var(--action); }
.oan-expertise {
display: grid;
gap: var(--s4);
}
.oan-expertise__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: var(--s5);
}
.oan-expertise__group {
display: grid;
gap: var(--s2);
align-content: start;
min-width: 0;
}
.oan-expertise__group h3 {
display: flex;
align-items: center;
gap: var(--s2);
margin: 0;
font-size: var(--t-md);
font-weight: 700;
}
.oan-expertise__group ul {
display: grid;
gap: var(--s1);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--t-base);
color: var(--muted);
}
.oan-features {
display: grid;
gap: var(--s5);
}
.oan-features > h2 { margin: 0; }
.oan-features__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
gap: var(--s3) var(--s6);
margin: 0;
padding: 0;
list-style: none;
}
.oan-features__list li {
display: flex;
gap: var(--s3);
font-size: var(--t-md);
line-height: var(--lh-snug);
color: var(--text);
}
.oan-features__list li::before {
content: "";
flex: none;
width: var(--s2);
height: var(--s3);
margin: .2em var(--s1) 0 var(--s1);
border: solid var(--brand);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.oan-clients {
display: grid;
gap: var(--s3);
}
.oan-clients__names {
display: grid;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--t-base);
color: var(--text);
}
.oan-clients__grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s4);
}
.oan-clients__logo {
max-height: 40px;
width: auto;
}
.oan-offices {
display: grid;
gap: var(--s4);
}
.oan-offices__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: var(--s5);
}
.oan-office {
display: grid;
gap: var(--s1);
justify-items: start;
align-content: start;
min-width: 0;
}
.oan-office h3 {
margin: 0;
font-size: var(--t-md);
font-weight: 700;
}
.oan-office p {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-facts-table th,
.oan-facts-table td {
padding: var(--s2) 0;
vertical-align: baseline;
}
.oan-facts-table th {
width: 45%;
font-size: var(--t-meta);
font-weight: 500;
color: var(--muted);
}
.oan-facts-table td {
font-weight: 600;
color: var(--text);
}
.oan-reviews {
display: grid;
gap: var(--s4);
}
.oan-reviews__panel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s5) var(--s6);
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-reviews__score {
display: grid;
justify-items: center;
gap: var(--s1);
}
.oan-reviews__big {
margin: 0;
font-size: var(--t-3xl);
font-weight: 600;
line-height: 1;
letter-spacing: -.03em;
color: var(--text);
}
.oan-reviews__stars {
margin: 0;
font-size: var(--t-md);
line-height: 1;
letter-spacing: .12em;
color: var(--text);
}
.oan-reviews__outof {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.oan-reviews__source {
display: grid;
justify-items: start;
gap: var(--s2);
min-width: 0;
}
.oan-reviews__source p { margin: 0; }
.oan-reviews .oan-reviews__note {
max-width: none;
}
.oan-tool-media {
display: grid;
gap: var(--s5);
}
.oan-tool-shot {
margin: 0;
display: grid;
gap: var(--s3);
}
.oan-tool-shot__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
box-shadow: var(--lift);
background: var(--surface);
}
.oan-tool-shot figcaption {
font-size: var(--t-sm);
color: var(--muted);
}
.oan-tool-shot figcaption a { color: var(--action); }
.oan-tool-video__play {
display: flex;
align-items: center;
gap: var(--s4);
padding: var(--s5);
border-radius: var(--radius-sm);
background: var(--ink);
color: var(--on-dark);
text-decoration: none;
}
.oan-tool-video__play:hover .oan-tool-video__icon { background: var(--brand); }
.oan-tool-video__icon {
display: grid;
place-items: center;
flex: none;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--action);
color: #fff;
}
.oan-tool-video__icon svg { width: 24px; height: 24px; margin-left: 3px; }
.oan-tool-video__text {
display: grid;
gap: 2px;
min-width: 0;
}
.oan-tool-video__text b { font-size: var(--t-md, 1.0625rem); }
.oan-tool-video__text span {
font-size: var(--t-sm);
color: var(--on-dark-2);
}
.oan-tool-video.is-playing {
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
overflow: hidden;
background: #000;
}
.oan-tool-video__frame {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.oan-notice {
margin: 0;
padding: var(--s4) var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: inset 4px 0 0 var(--line-2);
font-size: var(--t-base);
color: var(--text);
}
.oan-notice--ok {
box-shadow: inset 4px 0 0 var(--verified);
}
.oan-notice--error {
box-shadow: inset 4px 0 0 var(--alert);
}
.oan-empty {
margin: 0;
padding: var(--s7) var(--s5);
background: var(--surface);
border: 1px dashed var(--line-2);
border-radius: var(--radius);
text-align: center;
font-size: var(--t-base);
color: var(--muted);
}
.oan-note {
margin: 0;
max-width: var(--measure);
font-size: var(--t-sm);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-note--flush {
max-width: none;
}
.oan-disclosure {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s3);
margin: 0;
padding: var(--s3) var(--s4);
background: var(--sponsored-tint);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: var(--t-sm);
color: var(--text);
}
.oan-disclosure--inline {
padding: 0;
background: none;
border: 0;
}
.oan-ext {
display: inline-block;
margin-inline-start: var(--s1);
vertical-align: -1px;
flex: 0 0 auto;
}
.oan-locked {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--t-sm);
color: var(--muted);
}
.oan-locked__seal {
width: var(--s3);
height: var(--s3);
border: 1.5px dashed var(--line-2);
border-radius: 50%;
flex: 0 0 auto;
}
.oan-status {
display: inline-flex;
align-items: center;
padding: 4px 9px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-size: var(--t-xs);
font-weight: 700;
line-height: 1.2;
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.oan-status--open { color: var(--muted); }
.oan-status--soon { color: var(--text); }
.oan-seal {
display: inline-block;
vertical-align: middle;
flex: 0 0 auto;
}
.oan-badge-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s4);
align-items: start;
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-badge-row__preview {
display: block;
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.oan-badge-row__code {
display: grid;
gap: var(--s2);
min-width: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-btn:disabled,
.oan-btn[aria-disabled="true"],
.oan-field :is(input, select, textarea):disabled {
opacity: .5;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.is-loading,
[aria-busy="true"] {
opacity: .55;
transition: opacity var(--dur) var(--ease);
}
.oan-notice--ok,
.oan-notice--error {
position: relative;
padding-left: calc(var(--s5) + 32px);
}
.oan-notice--ok::before,
.oan-notice--error::before {
content: "";
position: absolute;
left: var(--s5);
top: calc(var(--s4) + 2px);
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--verified) center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.oan-notice--error::before {
background-color: var(--alert);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.6v4.3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='9.3' r='1' fill='%23fff'/%3E%3C/svg%3E");
}
.oan-notice__go { font-weight: 600; color: var(--action); white-space: nowrap; }
.oan-notice[id],
.oan-field :is(input, select, textarea)[id] { scroll-margin-top: calc(var(--header-h) + var(--s7)); }
.oan-notice[tabindex]:focus { outline: none; }
.oan-pagehead__cta { min-width: 18ch; }
.oan-pagehead__alt {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-pagehead__alt a {
color: var(--action);
text-decoration: underline;
text-underline-offset: .2em;
}
.oan-eyebrow__dot {
width: var(--s2);
height: var(--s2);
border-radius: 50%;
background: var(--verified);
flex: 0 0 auto;
}
.oan-gates--panel .oan-eyebrow--verified { color: var(--verified-ink); }
.oan-gates .oan-gates__list { margin-block: 0; }
.oan-gates__foot {
margin: var(--s4) 0 0;
font-size: var(--t-sm);
line-height: var(--lh-base);
color: var(--on-dark-3);
}
.oan-gates__foot a { color: var(--on-dark-2); }
.oan-gates--panel .oan-gates__foot { color: var(--muted); }
.oan-gates--panel .oan-gates__foot a { color: var(--action); }
.oan-apart {
margin: var(--s6) 0 0;
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.oan-apart h2 {
margin: 0 0 var(--s2);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--faint);
}
.oan-apart p {
margin: 0 0 var(--s2);
font-size: var(--t-sm);
line-height: 1.55;
color: var(--text);
}
.oan-apart p:last-child { margin-bottom: 0; }
.oan-header__cta {
padding-inline: var(--s4);
font-size: var(--t-sm);
}
.oan-nav__count {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "calt" 0;
font-size: var(--t-xs);
color: var(--faint);
}
.oan-brand__full { letter-spacing: -.012em; }
.oan-footer__legal {
max-width: var(--max-outer);
margin: var(--s7) auto 0;
padding: var(--s5) var(--gutter) 0;
border-top: 1px solid var(--line-dark);
font-size: var(--t-sm);
color: var(--on-dark-3);
}
.oan-footer__legal a { color: var(--on-dark-2); }
.oan-profile__identity {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s4);
align-items: center;
margin-bottom: var(--s4);
}
.oan-profile__logo {
width: var(--s8);
height: var(--s8);
object-fit: contain;
padding: var(--s2);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
flex: 0 0 auto;
}
span.oan-profile__logo {
display: grid;
place-items: center;
padding: 0;
background: var(--brand);
border: 0;
font-family: var(--display);
font-size: var(--t-xl);
font-weight: 700;
letter-spacing: -.02em;
color: var(--on-dark);
}
.oan-profile__meta {
display: grid;
gap: var(--s2);
justify-items: start;
min-width: 0;
}
.oan-profile__tagline {
margin: 0;
font-size: var(--t-md);
line-height: var(--lh-snug);
color: var(--faint);
}
.oan-profile__badges {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
min-width: 0;
}
.oan-profile__badges:empty { display: none; }
.oan-profile__actions { margin: 0 0 var(--s5); }
.oan-row__rank {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "calt" 0;
font-size: var(--t-sm);
font-weight: 700;
line-height: 1;
color: var(--faint);
flex: 0 0 auto;
min-width: 2ch;
}
.oan-shortlist-note {
margin-bottom: var(--s4);
padding: var(--s3) var(--s4);
background: var(--action-tint);
border-radius: var(--radius-sm);
box-shadow: inset 3px 0 0 var(--action);
}
.oan-shortlist-note p { margin: 0; font-size: var(--t-sm); color: var(--text); }
.oan-shortlist-note b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.oan-filter__field--sort {
grid-column: -2 / -1;
justify-self: stretch;
}
.oan-filter__reset {
font-size: var(--t-sm);
font-weight: 700;
color: var(--action);
text-decoration: underline;
text-underline-offset: .2em;
}
.oan-filter__reset:hover { color: var(--action-dark); }
.oan-featured {
display: grid;
gap: var(--s5);
}
.oan-featured > h2 {
margin: 0;
font-size: var(--t-d-3);
letter-spacing: -.02em;
}
.oan-band--proof {
max-width: none;
padding: var(--s8) 0;
background: var(--surface-2);
}
.oan-band__inner {
max-width: var(--max-outer);
margin-inline: auto;
padding-inline: var(--gutter);
display: grid;
gap: var(--s5);
}
.oan-band__inner > h2 {
margin: 0;
font-size: var(--t-d-3);
letter-spacing: -.02em;
}
.oan-props {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: var(--s5);
}
.oan-prop {
display: flex;
flex-direction: column;
gap: var(--s4);
padding: var(--s6);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-prop:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.oan-prop h2 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
}
.oan-prop p { margin: 0; color: var(--muted); }
.oan-prop .oan-stats { gap: var(--s4); }
.oan-prop .oan-stats .oan-stat dd { font-size: var(--t-lg); }
.oan-prop__cta {
margin: auto 0 0;
font-size: var(--t-base);
font-weight: 700;
}
.oan-region-grid ul { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.oan-bestof {
display: grid;
gap: var(--s5);
}
.oan-bestof > h2 {
margin: 0;
font-size: var(--t-d-3);
letter-spacing: -.02em;
}
.oan-bento > .oan-t-12:has(> .oan-bestof) { padding: var(--s6) 0 0; }
.oan-bestof__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: var(--s4);
}
.oan-bestof .oan-ledger { box-shadow: var(--lift); }
.oan-bestof .oan-ledger__foot { margin-top: auto; }
.oan-bestof__note {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-news {
display: grid;
gap: var(--s4);
}
.oan-news__list {
display: grid;
gap: var(--s4);
margin: 0;
padding: 0;
list-style: none;
}
.oan-news__list li {
display: flex;
flex-direction: column;
gap: var(--s1);
min-width: 0;
font-size: var(--t-base);
}
.oan-news__list li > a { font-weight: 700; }
.oan-news__list time { font-size: var(--t-sm); color: var(--faint); }
.oan-definition {
display: grid;
gap: var(--s3);
}
.oan-definition > h2 {
margin: 0;
font-size: var(--t-xl);
letter-spacing: -.02em;
}
.oan-definition p {
margin: 0;
max-width: var(--measure);
line-height: var(--lh-loose);
}
.oan-definition p + p { margin-top: var(--s3); }
.oan-search-page {
display: grid;
gap: var(--s7);
}
.oan-pagehead .oan-search-page {
gap: 0;
margin: 0 0 var(--s4);
max-width: var(--measure);
}
.oan-search-group {
display: grid;
gap: var(--s4);
}
.oan-search-group > h2 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
color: var(--faint);
letter-spacing: .04em;
text-transform: uppercase;
}
.oan-search-group > ul {
display: grid;
gap: var(--s3);
margin: 0;
padding: 0;
list-style: none;
}
.oan-search-group > ul > li {
display: grid;
gap: var(--s1);
min-width: 0;
padding: var(--s4) var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-search-group > ul > li:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.oan-search-group > ul > li > a { font-size: var(--t-md); font-weight: 700; }
.oan-search-group > ul > li p {
margin: 0;
max-width: var(--measure);
font-size: var(--t-sm);
color: var(--muted);
}
.oan-case > h3 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
line-height: var(--lh-snug);
}
.oan-case .oan-card__budget {
font-size: var(--t-lg);
font-weight: 700;
color: var(--ink);
}
.oan-case .oan-case__quote {
margin-top: auto;
padding: var(--s4);
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.oan-card--folder { padding-top: var(--s4); }
.oan-card--folder > h3 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
line-height: var(--lh-snug);
}
.oan-folder-tab {
display: inline-block;
align-self: flex-start;
padding: 4px 9px;
background: var(--brand-tint);
border-radius: var(--radius-pill);
font-family: var(--sans);
font-size: var(--t-xs);
font-weight: 700;
line-height: 1.2;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--action);
}
.oan-facts table,
.oan-recent-briefs {
width: 100%;
border-collapse: collapse;
font-size: var(--t-sm);
}
.oan-facts caption,
.oan-recent-briefs caption {
padding-block-end: var(--s3);
font-size: var(--t-sm);
text-align: start;
color: var(--muted);
}
.oan-facts th,
.oan-facts td,
.oan-recent-briefs th,
.oan-recent-briefs td {
padding: var(--s3) var(--s4);
text-align: start;
vertical-align: top;
}
.oan-recent-briefs thead th {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
border-bottom: 1px solid var(--line);
}
.oan-facts tbody tr + tr > *,
.oan-recent-briefs tbody tr + tr > * {
border-top: 1px solid var(--line);
}
.oan-facts tbody th {
font-weight: 500;
color: var(--muted);
}
.oan-facts tbody td { color: var(--text); }
.oan-briefs .oan-table-wrap,
.oan-table-wrap:has(> .oan-recent-briefs) {
padding: var(--s2) var(--s4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-departures td:first-child { white-space: nowrap; color: var(--muted); }
.oan-departures td:nth-child(2) a { font-weight: 700; }
.oan-departures tbody tr:hover { background: var(--surface-2); }
.oan-office__address {
margin: 0;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-office__contact {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-office__contact a { color: var(--action); }
.oan-reviews__count {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "calt" 0;
font-size: var(--t-md);
font-weight: 700;
color: var(--ink);
}
.oan-reviews__publisher {
font-size: var(--t-sm);
color: var(--muted);
}
.oan-reviews__publisher strong { color: var(--text); font-weight: 700; }
.oan-reviews__checked {
font-size: var(--t-xs);
color: var(--faint);
}
.oan-press-flag {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s3);
margin: 0 0 var(--s5);
padding: var(--s4) var(--s5);
background: var(--sponsored-tint);
border-radius: var(--radius-sm);
font-size: var(--t-sm);
line-height: var(--lh-base);
color: var(--text);
}
.oan-press-flag strong { color: var(--ink); }
.oan-press-flag a { color: var(--sponsored-ink); }
.oan-press-flag__tag {
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 700;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sponsored-ink);
white-space: nowrap;
}
.oan-press-link {
margin: var(--s5) 0 0;
padding-top: var(--s4);
border-top: 1px solid var(--line);
font-size: var(--t-base);
font-weight: 700;
}
.oan-author {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s4);
align-items: start;
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-author__mark {
display: grid;
place-items: center;
width: var(--s7);
height: var(--s7);
border-radius: 50%;
background: var(--brand-tint);
font-size: var(--t-base);
font-weight: 700;
color: var(--action);
flex: 0 0 auto;
}
.oan-author__id {
display: grid;
gap: var(--s1);
min-width: 0;
}
.oan-author__label {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--faint);
}
.oan-author__name {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s2);
margin: 0;
font-size: var(--t-md);
font-weight: 700;
color: var(--ink);
}
.oan-author__role {
font-size: var(--t-sm);
font-weight: 400;
color: var(--muted);
}
.oan-author__bio {
margin: var(--s1) 0 0;
max-width: var(--measure);
font-size: var(--t-body-sm);
line-height: var(--lh-base);
color: var(--text);
}
.oan-author__date {
margin: var(--s2) 0 0;
font-size: var(--t-xs);
color: var(--faint);
}
.oan-byline__sep {
padding-inline: var(--s1);
color: var(--faint);
}
.oan-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
gap: var(--s5);
margin: 0;
justify-content: start;
}
.oan-stats .oan-stat { margin: 0; min-width: 0; }
.oan-stats dt {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--faint);
}
.oan-stats .oan-stat dd {
margin: var(--s1) 0 0;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-feature-settings: "calt" 0;
font-size: var(--t-xl);
font-weight: 500;
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
}
.oan-stats .oan-stat--text dd {
font-family: var(--sans);
font-variant-numeric: normal;
font-size: var(--t-base);
font-weight: 500;
line-height: var(--lh-snug);
letter-spacing: 0;
color: var(--text);
}
.oan-stats--inline {
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), max-content));
gap: var(--s3);
}
.oan-stats--inline .oan-stat {
padding: var(--s3) var(--s4);
background: var(--surface-2);
border-radius: 12px;
}
.oan-stats--inline .oan-stat dd {
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -.01em;
color: var(--text);
}
.oan-stats--inline .oan-stat--text dd {
font-size: var(--t-base);
font-weight: 500;
letter-spacing: 0;
}
.oan-briefs {
display: grid;
gap: var(--s4);
}
.oan-briefs > h2 {
margin: 0;
font-size: var(--t-xl);
letter-spacing: -.02em;
}
.oan-briefs > p { margin: 0; max-width: var(--measure); }
.oan-brief-form,
.oan-agency-form {
max-width: var(--measure);
padding: var(--s6);
background: var(--surface);
border-radius: var(--radius);
}
.oan-brief-form h2,
.oan-brief-form h3,
.oan-agency-form h2,
.oan-agency-form h3 {
margin: var(--s6) 0 var(--s4);
font-size: var(--t-lg);
font-weight: 700;
color: var(--ink);
}
.oan-brief-form > :first-child,
.oan-agency-form > :first-child { margin-top: 0; }
.oan-brief-form > h2:first-of-type,
.oan-agency-form > h2:first-of-type,
.oan-brief-form > h3:first-of-type,
.oan-agency-form > h3:first-of-type { margin-top: 0; }
.oan-brief-form fieldset,
.oan-agency-form fieldset {
margin: 0 0 var(--s4);
padding: var(--s4) var(--s5);
border: 0;
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.oan-brief-form legend,
.oan-agency-form legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: var(--s3);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.oan-brief-form .oan-consent label,
.oan-brief-form .oan-check-field label,
.oan-agency-form .oan-consent label,
.oan-agency-form .oan-check-field label {
display: flex;
align-items: center;
gap: var(--s2);
margin-bottom: 0;
font-size: var(--t-base);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--text);
cursor: pointer;
}
.oan-hint {
display: block;
margin: var(--s1) 0 0;
max-width: var(--measure);
font-size: var(--t-sm);
line-height: var(--lh-base);
color: var(--muted);
}
p.oan-hint { margin: 0 0 var(--s4); }
.oan-hint strong { color: var(--text); font-weight: 700; }
.oan-guide-form { background: var(--surface-2); }
.oan-notfound {
display: grid;
gap: var(--s6);
margin-top: var(--s6);
}
.oan-notfound__places {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(340px, (100% - 2 * var(--s3)) / 3)), 1fr));
gap: var(--s3);
margin: 0;
padding: 0;
list-style: none;
}
.oan-notfound__places li {
display: grid;
gap: var(--s1);
padding: var(--s4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-notfound__places li:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.oan-notfound__places a { font-weight: 700; }
.oan-notfound__places span {
font-size: var(--t-sm);
color: var(--muted);
}
.oan-nav__item--mobile { display: none; }
.single-job_listing h1.entry-title,
.single-tribe_events h1.entry-title,
.tribe-events-single-event-title,
.tribe-events-page-template .tribe-common h1:not([class*="oan-"]),
.tribe-events-page-template .tribe-common h2:not([class*="oan-"]),
.tribe-events-page-template .tribe-events h1:not([class*="oan-"]),
.tribe-events-page-template .tribe-events h2:not([class*="oan-"]) {
font-family: var(--display);
color: var(--ink);
}
.tribe-events .tribe-events-c-nav__prev-label,
.tribe-events .tribe-events-c-nav__next-label,
.tribe-events .tribe-events-c-nav__prev-label-plural,
.tribe-events .tribe-events-c-nav__next-label-plural,
.tribe-events .tribe-events-c-nav__today-label {
color: var(--text);
}
.tribe-events .tribe-events-c-nav__prev[disabled] .tribe-events-c-nav__prev-label,
.tribe-events .tribe-events-c-nav__next[disabled] .tribe-events-c-nav__next-label {
color: var(--muted);
}
.tribe-events a:not([class*="oan-"]),
.tribe-common a:not([class*="oan-"]) { color: var(--action); }
.tribe-events a:not([class*="oan-"]):hover,
.tribe-common a:not([class*="oan-"]):hover { color: var(--action-dark); }
.oan-pagehead .oan-pagehead__route a,
.oan-pagehead .oan-pagehead__lead nav a { color: var(--on-dark-2); }
.oan-pagehead .oan-pagehead__route a:hover,
.oan-pagehead .oan-pagehead__lead nav a:hover { color: var(--on-dark); }
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__today,
.tribe-events .tribe-events-c-subscribe-dropdown__button-text {
display: inline-flex;
align-items: center;
min-height: 24px;
}
@media (pointer: coarse) {
.tribe-events .tribe-events-c-nav__prev,
.tribe-events .tribe-events-c-nav__next,
.tribe-events .tribe-events-c-nav__today {
min-height: 44px;
}
}
.single_job_listing .meta li,
.single_job_listing .meta li.salary,
.single_job_listing .meta time,
ul.job_listings li.job_listing a .meta {
color: var(--muted);
}
.single_job_listing ul.job-listing-meta.meta { display: none; }
.single_job_listing .meta li.job-type,
.single_job_listing .meta li.full-time,
.single_job_listing .meta li.part-time,
.single_job_listing .meta li.temporary,
.single_job_listing .meta li.freelance,
.single_job_listing .meta li.internship,
.single_job_listing .meta li.contract {
padding: 4px 9px;
color: var(--action);
background-color: var(--brand-tint);
border: 0;
border-radius: var(--radius-pill);
font-size: var(--t-xs);
font-weight: 700;
text-transform: none;
}
.single_job_listing,
.tribe-events-content,
.tribe-events-single-event-description {
font-family: var(--sans);
color: var(--text);
}
.single_job_listing .application input.application_button,
.job-manager-application-wrapper .application input.application_button {
min-height: 44px;
padding: 11px 18px;
font-family: var(--sans);
font-size: var(--t-body-sm);
font-weight: 700;
line-height: 1.2;
color: var(--on-brand);
background: var(--action);
border: 1px solid var(--action);
border-radius: var(--radius-pill);
box-shadow: var(--glow);
cursor: pointer;
}
.single_job_listing .application input.application_button:hover,
.job-manager-application-wrapper .application input.application_button:hover {
background: var(--action-dark);
border-color: var(--action-dark);
}
.single_job_listing .application input.application_button:focus-visible,
.job-manager-application-wrapper .application input.application_button:focus-visible {
outline: 2px solid var(--action);
outline-offset: 2px;
}
.single_job_listing div.company {
padding: var(--s4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: none;
}
.single_job_listing div.company .tagline { color: var(--muted); }
.single_job_listing .application .application_details {
margin-top: var(--s4);
padding: var(--s4);
background: var(--surface-2);
border-radius: var(--radius-sm);
font-size: var(--t-sm);
color: var(--text);
}
.job_filters.job_filters {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
margin-block-end: var(--s5);
}
.job_filters.job_filters .search_jobs input[type="text"],
.job_filters.job_filters .search_jobs input[type="search"],
.job_filters.job_filters .search_jobs select {
min-height: 44px;
padding: 10px 14px;
font-family: var(--sans);
font-size: var(--t-body-sm);
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
}
.job_filters.job_filters .search_jobs input:focus-visible,
.job_filters.job_filters .search_jobs select:focus-visible {
border-color: var(--action);
box-shadow: var(--focus-halo);
outline: 2px solid transparent;
outline-offset: 2px;
}
.job_filters.job_filters .job_types {
background: var(--surface);
border-top: 1px solid var(--line);
font-size: var(--t-sm);
}
.job_filters.job_filters .job_types li { border-right: 1px solid var(--line); }
.tribe-common.tribe-common,
.tribe-events.tribe-events,
.tribe-events-page-template.tribe-events-page-template {
--tec-color-accent-primary: var(--action);
--tec-color-accent-primary-hover: var(--action-dark);
--tec-color-accent-primary-active: var(--action-dark);
--tec-color-link-accent: var(--action);
--tec-color-link-accent-hover: var(--action-dark);
--tec-color-button-primary: var(--action);
--tec-color-button-primary-hover: var(--action-dark);
--tec-color-button-primary-active: var(--action-dark);
--tec-color-background-events-bar-submit-button: var(--action);
--tec-color-background-events-bar-submit-button-hover: var(--action-dark);
--tec-color-background-events-bar-submit-button-active: var(--action-dark);
--tec-font-family-sans-serif: var(--sans);
--tec-color-border-default: var(--line-2);
--tec-color-border-secondary: var(--line);
--tec-color-border-active: var(--action);
--tec-color-background: var(--surface);
--tec-color-text-primary: var(--text);
--tec-color-text-secondary: var(--muted);
--tec-color-text-disabled: var(--muted);
--tec-color-accent-primary-background: var(--brand-tint);
--tec-color-background-primary-multiday: var(--brand-tint);
--tec-color-background-secondary: var(--surface-2);
--tec-color-background-secondary-hover: var(--surface-3);
--tec-color-background-messages: var(--surface-2);
--tec-color-background-error: var(--alert-tint);
--tec-color-accent-secondary: var(--ink);
--tec-color-icon-primary: var(--muted);
--tec-color-icon-active: var(--text);
--tec-color-icon-focus: var(--action);
--tec-color-icon-error: var(--alert);
--tec-color-event-icon: var(--text);
--tec-color-event-icon-hover: var(--action);
--tec-border-radius-default: var(--radius-sm);
}
.tribe-common.tribe-common .tribe-events-c-events-bar .tribe-common-form-control-text__input {
padding: 10px 14px;
font-family: var(--sans);
border: 1px solid var(--line-2);
border-radius: 10px;
}
.tribe-common.tribe-common .tribe-events-c-events-bar .tribe-events-c-search__input-control--keyword .tribe-common-form-control-text__input {
padding-right: 40px;
}
.tribe-common--breakpoint-medium.tribe-common .tribe-events-c-events-bar .tribe-events-c-search__input-control--keyword .tribe-common-form-control-text__input {
padding-right: 14px;
padding-left: 44px;
}
.tribe-common.tribe-common .tribe-events-c-events-bar .tribe-events-c-search__input-control--keyword .tribe-events-c-search__input-control-icon-svg {
right: 14px;
}
.tribe-common--breakpoint-medium.tribe-common .tribe-events-c-events-bar .tribe-events-c-search__input-control--keyword .tribe-events-c-search__input-control-icon-svg {
right: auto;
}
.tribe-common.tribe-common .tribe-events-c-events-bar .tribe-common-form-control-text__input:focus {
border-color: var(--action);
box-shadow: var(--focus-halo);
outline: 2px solid transparent;
outline-offset: 2px;
}
.tribe-common.tribe-common .tribe-common-c-btn,
.tribe-common.tribe-common a.tribe-common-c-btn,
.tribe-common.tribe-common .tribe-common-c-btn-border,
.tribe-common.tribe-common a.tribe-common-c-btn-border,
.tribe-common.tribe-common .tribe-common-c-btn-border-small,
.tribe-common.tribe-common a.tribe-common-c-btn-border-small {
font-family: var(--sans);
font-weight: 700;
border-radius: var(--radius-pill);
}
.tribe-common.tribe-common .tribe-common-c-btn,
.tribe-common.tribe-common a.tribe-common-c-btn {
box-shadow: var(--glow);
}
.tribe-common.tribe-common .tribe-common-c-btn-border,
.tribe-common.tribe-common a.tribe-common-c-btn-border,
.tribe-common.tribe-common .tribe-common-c-btn-border-small,
.tribe-common.tribe-common a.tribe-common-c-btn-border-small {
background-color: var(--surface);
border-color: var(--line);
color: var(--text);
}
.tribe-common.tribe-common .tribe-common-c-btn-border:hover,
.tribe-common.tribe-common .tribe-common-c-btn-border:focus,
.tribe-common.tribe-common a.tribe-common-c-btn-border:hover,
.tribe-common.tribe-common a.tribe-common-c-btn-border:focus,
.tribe-common.tribe-common .tribe-common-c-btn-border-small:hover,
.tribe-common.tribe-common .tribe-common-c-btn-border-small:focus,
.tribe-common.tribe-common a.tribe-common-c-btn-border-small:hover,
.tribe-common.tribe-common a.tribe-common-c-btn-border-small:focus {
background-color: var(--surface);
border-color: var(--line-2);
color: var(--text);
box-shadow: var(--lift);
}
.pmpro.pmpro {
--pmpro--color--base: var(--surface);
--pmpro--color--base-2: var(--surface-2);
--pmpro--color--contrast: var(--text);
--pmpro--color--accent: var(--action);
--pmpro--color--accent--variation: var(--action-dark);
--pmpro--color--border: var(--line-2);
--pmpro--color--border--variation: var(--line);
--pmpro--base--border-radius: var(--radius);
--pmpro--box-shadow: none;
}
.pmpro.pmpro .pmpro_card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: none;
}
.pmpro.pmpro .pmpro_card_title {
font-family: var(--display);
font-size: var(--t-lg);
font-weight: 600;
color: var(--text);
}
.pmpro.pmpro .pmpro_form_input {
min-height: 44px;
padding: 10px 14px;
font-family: var(--sans);
font-size: var(--t-body-sm);
color: var(--text);
background: var(--surface);
border-radius: 10px;
}
.pmpro.pmpro .pmpro_form_input-textarea { min-height: 140px; }
.pmpro.pmpro .pmpro_form_input:focus {
border-color: var(--action);
box-shadow: var(--focus-halo);
outline: 2px solid transparent;
outline-offset: 2px;
}
.pmpro.pmpro .pmpro_form_label:not(.pmpro_form_label-inline) {
margin-bottom: var(--s1);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.pmpro.pmpro .pmpro_form_hint { font-size: var(--t-sm); color: var(--muted); }
.pmpro.pmpro .pmpro_btn-select,
.pmpro.pmpro .pmpro_btn-submit,
.pmpro.pmpro .pmpro_btn-submit-checkout,
.pmpro.pmpro .pmpro_btn-save {
min-height: 44px;
padding: 11px 18px;
font-family: var(--sans);
font-size: var(--t-body-sm);
font-weight: 700;
line-height: 1.2;
color: var(--on-brand);
background: var(--action);
border: 1px solid var(--action);
border-radius: var(--radius-pill);
box-shadow: var(--glow);
}
.pmpro.pmpro .pmpro_btn-select:hover,
.pmpro.pmpro .pmpro_btn-select:focus,
.pmpro.pmpro .pmpro_btn-submit:hover,
.pmpro.pmpro .pmpro_btn-submit:focus,
.pmpro.pmpro .pmpro_btn-submit-checkout:hover,
.pmpro.pmpro .pmpro_btn-submit-checkout:focus,
.pmpro.pmpro .pmpro_btn-save:hover,
.pmpro.pmpro .pmpro_btn-save:focus {
color: var(--on-brand);
background: var(--action-dark);
border-color: var(--action-dark);
}
.pmpro.pmpro .pmpro_btn:focus-visible {
outline: 2px solid var(--action);
outline-offset: 2px;
}
.pmpro.pmpro .pmpro_btn {
min-height: 44px;
font-family: var(--sans);
font-weight: 700;
border-radius: var(--radius-pill);
}
.pmpro.pmpro .pmpro_card.pmpro_level_group {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
overflow: visible;
}
.pmpro.pmpro .pmpro_level_group .pmpro_card_content { padding: 0; }
.pmpro.pmpro .pmpro_levels_table {
width: 100%;
table-layout: auto;
border-collapse: collapse;
font-size: var(--t-sm);
background: none;
}
.pmpro.pmpro .pmpro_levels_table thead th {
padding: var(--s3) var(--s4);
text-align: start;
vertical-align: bottom;
background: none;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
border-bottom: 1px solid var(--line);
}
.pmpro.pmpro .pmpro_levels_table tbody th,
.pmpro.pmpro .pmpro_levels_table tbody td {
padding: var(--s3) var(--s4);
text-align: start;
vertical-align: middle;
background: none;
border-width: 0;
}
.pmpro.pmpro .pmpro_levels_table tbody tr + tr > * {
border-top: 1px solid var(--line);
}
.pmpro.pmpro .pmpro_levels_table tbody th {
font-family: var(--display);
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -.012em;
color: var(--text);
}
.pmpro.pmpro .pmpro_level-price,
.pmpro.pmpro .pmpro_level-price strong {
margin: 0;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: var(--t-md);
font-weight: 600;
color: var(--ink);
}
.pmpro.pmpro .pmpro_levels_table th:last-child,
.pmpro.pmpro .pmpro_levels_table td:last-child { width: 1%; white-space: nowrap; }
.pmpro.pmpro .pmpro_level .pmpro_btn-select {
display: inline-flex;
align-items: center;
justify-content: center;
}
.tribe-events.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum,
.tribe-events.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date {
color: var(--on-brand);
}
.tribe-events-single.tribe-events-single .tribe-events-back { display: none; }
.tribe-events.tribe-events li,
.tribe-common.tribe-common li,
.tribe-common.tribe-common p { font-family: var(--sans); }
.pmpro.pmpro .pmpro_btn-submit-checkout {
color: var(--on-accent);
background: var(--accent);
border-color: var(--accent);
box-shadow: var(--glow-accent);
}
.pmpro.pmpro .pmpro_btn-submit-checkout:hover,
.pmpro.pmpro .pmpro_btn-submit-checkout:focus {
color: var(--on-accent);
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.single_job_listing div.company.company { display: none; }
.pmpro.pmpro input[type="checkbox"],
.pmpro.pmpro input[type="radio"] {
width: 18px;
height: 18px;
min-height: 0;
padding: 0;
margin: 3px var(--s2) 3px 0;
vertical-align: middle;
accent-color: var(--action);
}
.pmpro.pmpro .pmpro_btn-plain { min-height: 24px; }
.tribe-common {
--tec-grid-gutter-page-small: var(--wp--style--root--padding-left, var(--gutter));
--tec-grid-gutter-page: var(--wp--style--root--padding-left, var(--gutter));
}
.tribe-common.tribe-common .tribe-common-l-container {
max-width: calc(1080px + 2 * var(--wp--style--root--padding-left, var(--gutter)));
}
#tribe-events-pg-template.tribe-events-pg-template {
max-width: calc(1080px + 2 * var(--wp--style--root--padding-left, var(--gutter)));
padding-inline: var(--wp--style--root--padding-left, var(--gutter));
}
.pmpro.pmpro .pmpro_message {
position: relative;
margin: 0 0 var(--s4);
padding: var(--s4) var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: inset 4px 0 0 var(--line-2);
font-size: var(--t-base);
color: var(--text);
}
.pmpro.pmpro .pmpro_message.pmpro_error,
.pmpro.pmpro .pmpro_message.pmpro_success { padding-left: calc(var(--s5) + 32px); }
.pmpro.pmpro .pmpro_message.pmpro_error { box-shadow: inset 4px 0 0 var(--alert); }
.pmpro.pmpro .pmpro_message.pmpro_success { box-shadow: inset 4px 0 0 var(--verified); }
.pmpro.pmpro .pmpro_message.pmpro_error::before,
.pmpro.pmpro .pmpro_message.pmpro_success::before {
content: "";
position: absolute;
left: var(--s5);
top: calc(var(--s4) + 2px);
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--verified) center / 12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pmpro.pmpro .pmpro_message.pmpro_error::before {
background-color: var(--alert);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.6v4.3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='9.3' r='1' fill='%23fff'/%3E%3C/svg%3E");
}
.pmpro.pmpro .pmpro_message:empty { display: none; }
.oan-account-pmpro .pmpro.pmpro .pmpro_actions_nav:not(#pmpro_login .pmpro_actions_nav):has(> span:only-child > a[href$="/membership-account/"]:only-child) { display: none; }
.oan-explore {
display: grid;
gap: var(--s4);
min-width: 0;
}
.oan-explore__rest {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
gap: var(--s4);
min-width: 0;
}
.oan-facet {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s3);
min-width: 0;
padding: var(--s4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-facet:hover {
box-shadow: var(--lift);
transform: translateY(-1px);
}
.oan-facet__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0 0 var(--s4);
border-radius: var(--radius-sm);
background: var(--brand-tint);
color: var(--action);
font-family: var(--mono);
font-size: var(--t-sm);
font-weight: 700;
letter-spacing: .04em;
}
.oan-explore--accent .oan-facet--lead .oan-facet__mark {
background: var(--surface);
color: var(--action);
}
.oan-facet__name {
margin: 0;
font-family: var(--display);
font-size: var(--t-md);
font-weight: 600;
letter-spacing: -.01em;
line-height: var(--lh-tight);
color: var(--text);
}
.oan-facet--lead { padding: var(--s5); }
.oan-facet--lead .oan-facet__name {
font-size: var(--t-xl);
letter-spacing: -.025em;
}
.oan-facet .oan-facet__stats {
grid-template-columns: 1fr;
gap: var(--s3);
}
.oan-facet--lead .oan-facet__stats {
grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
gap: var(--s3) var(--s5);
}
.oan-facet .oan-facet__stats dt { color: var(--muted); }
.oan-facet .oan-facet__stats .oan-stat dd { font-size: var(--t-lg); }
.oan-facet--lead .oan-facet__stats .oan-stat dd { font-size: var(--t-xl); }
.oan-facet .oan-facet__stats .oan-stat--text dd {
font-size: var(--t-sm);
overflow-wrap: anywhere;
}
.oan-facet--lead .oan-facet__stats .oan-stat--text dd { font-size: var(--t-base); }
.oan-facet__go {
margin: auto 0 0;
font-size: var(--t-sm);
font-weight: 700;
}
.oan-facet__go a { color: var(--action); text-decoration: none; }
.oan-facet__go a:hover { color: var(--action-dark); }
.oan-facet__go a::after {
content: "";
position: absolute;
inset: 0;
}
.oan-facet--row {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
gap: var(--s2) var(--s3);
}
.oan-facet--row > * { grid-column: 2; }
.oan-facet--row > .oan-facet__mark {
grid-column: 1;
grid-row: 1 / span 3;
width: 40px;
height: 40px;
margin: 0;
}
.oan-facet--row .oan-facet__stats {
grid-template-columns: minmax(0, 1fr);
gap: 2px;
}
.oan-facet--row .oan-facet__stats .oan-stat {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: baseline;
gap: var(--s2);
min-width: 0;
}
.oan-facet--row .oan-facet__stats dt {
font-size: var(--t-sm);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.oan-facet--row .oan-facet__stats .oan-stat dd { font-size: var(--t-md); }
.oan-facet--row .oan-facet__go { margin: 0; }
.oan-explore--accent .oan-facet--lead {
background: var(--brand-tint);
border-color: var(--brand-tint);
}
.oan-explore--accent .oan-facet--lead .oan-facet__name { color: var(--text); }
.oan-explore--accent .oan-facet--lead .oan-facet__stats .oan-stat dt { color: var(--muted); }
.oan-explore--accent .oan-facet--lead .oan-facet__stats .oan-stat dd { color: var(--action); }
.oan-explore--accent .oan-facet--lead .oan-facet__go a { color: var(--action); }
.oan-explore--accent .oan-facet--lead:hover { background: var(--brand-tint); }
.oan-project__summary {
margin: 0;
max-width: var(--measure);
font-size: var(--t-md);
line-height: var(--lh-base);
color: var(--text);
}
.oan-project__full {
max-width: var(--measure);
color: var(--text);
}
.oan-project__full p {
margin: 0 0 var(--s4);
font-size: var(--t-base);
line-height: var(--lh-loose);
}
.oan-project__full p:last-child {
margin-bottom: 0;
}
.oan-projects__perks {
margin: 0;
padding: 0;
list-style: none;
}
.oan-projects__note {
margin: 0;
max-width: var(--measure);
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--on-dark-3);
}
.oan-projects__perks li {
position: relative;
padding-inline-start: var(--s5);
padding-block: var(--s2);
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--on-dark-2);
}
.oan-projects__perks li + li {
border-top: 1px solid var(--line-dark);
}
.oan-projects__perks li::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: calc(var(--s4) - 1px);
width: var(--s3);
height: 2px;
background: var(--verified);
}
.oan-projects__actions {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin: 0;
}
.oan-projects__back {
max-width: var(--max-outer);
margin-inline: auto;
padding-inline: var(--gutter);
font-size: var(--t-sm);
color: var(--muted);
}
.oan-card__cat {
display: flex;
flex: 1 0 100%;
flex-wrap: wrap;
align-items: center;
gap: var(--s1) var(--s2);
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.oan-card__cat > a {
min-width: 0;
color: inherit;
}
.oan-card__cat > a:hover,
.oan-card__cat > a:focus-visible {
color: var(--action);
}
.oan-listing:has(> .oan-acard) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
gap: var(--s5);
}
.oan-acard {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s4);
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition:
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.oan-acard:hover {
box-shadow: var(--lift);
transform: translateY(-1px);
}
.oan-acard.is-picked {
border-color: var(--action);
}
.oan-acard__head {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: start;
gap: 14px;
}
.oan-acard__logo {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 14px;
flex: 0 0 auto;
}
span.oan-acard__logo {
display: grid;
place-items: center;
background: var(--brand);
color: var(--on-dark);
font-family: var(--display);
font-size: var(--t-md);
font-weight: 700;
letter-spacing: -.01em;
}
.oan-acard__id {
display: grid;
gap: 3px;
min-width: 0;
padding-top: 1px;
}
.oan-acard .oan-acard__name {
margin: 0;
font-family: var(--display);
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -.015em;
overflow-wrap: break-word;
}
.oan-acard__tagline {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
margin: 0;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-acard__score .oan-score-chip {
display: grid;
justify-items: center;
align-content: center;
gap: 2px;
width: 56px;
min-height: 52px;
padding: 6px 4px;
font-family: var(--sans);
background: var(--score-tint);
border: 0;
border-radius: 14px;
white-space: nowrap;
}
.oan-acard__score .oan-score-chip__v {
font-family: var(--display);
font-size: 1.375rem;
font-weight: 600;
line-height: 1;
color: var(--score-ink);
}
.oan-acard__score .oan-score-chip__k {
font-family: var(--sans);
font-size: .625rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--score-ink);
}
.oan-acard__score .oan-score-chip.oan-score-chip--none {
background: var(--surface-2);
white-space: normal;
}
.oan-acard__score .oan-score-chip--none .oan-score-chip__v,
.oan-acard__score .oan-score-chip--none .oan-score-chip__k {
color: var(--muted);
text-align: center;
}
.oan-acard__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: calc(-1 * var(--s1));
}
.oan-acard__name a { color: var(--text); text-decoration: none; }
.oan-acard__name a:hover { color: var(--action); }
.oan-acard .oan-badges:empty { display: none; }
.oan-acard .oan-badge--sponsored {
background: var(--surface);
color: var(--sponsored-ink);
box-shadow: inset 0 0 0 1px var(--sponsored);
}
.oan-acard .oan-score-rail {
gap: var(--s1);
padding: 0;
width: 76px;
background: none;
border-right: 0;
}
.oan-acard .oan-score-rail__dial {
width: 56px;
height: 56px;
}
.oan-acard .oan-score-rail__value { font-size: var(--t-lg); }
.oan-acard__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px var(--s4);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-acard__meta > li {
display: inline-flex;
align-items: center;
min-width: 0;
}
.oan-acard__place {
gap: 6px;
color: var(--muted);
}
.oan-acard__pin {
width: 12px;
height: 14px;
flex: 0 0 12px;
color: var(--faint);
}
.oan-acard .oan-rating {
align-self: flex-start;
gap: var(--s2);
}
.oan-acard__services {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-acard__service {
padding: 5px 10px;
font-size: var(--t-xs);
font-weight: 600;
line-height: 1.2;
color: var(--text);
background: var(--surface-2);
border: 0;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.oan-acard__facts {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, .9fr);
gap: 0;
margin: auto 0 0;
padding: var(--s3) 0;
background: var(--surface-2);
border-top: 0;
border-radius: 14px;
}
.oan-acard .oan-acard__facts .oan-fact {
display: grid;
gap: 3px;
min-width: 0;
padding: 0 var(--s3);
}
.oan-acard .oan-acard__facts .oan-fact + .oan-fact { border-left: 1px solid var(--line); }
.oan-acard .oan-acard__facts dt {
margin: 0;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
white-space: nowrap;
}
.oan-acard .oan-acard__facts dd {
margin: 0;
font-family: var(--sans);
font-size: var(--t-body-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oan-acard__proof {
display: flex;
flex-wrap: wrap;
gap: 2px 0;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--t-meta);
color: var(--muted);
}
.oan-acard__proof li + li::before {
content: "\00B7";
margin: 0 var(--s2);
color: var(--faint);
}
.oan-acard__chips { align-self: flex-start; }
.oan-acard__actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: stretch;
gap: var(--s2);
margin-top: auto;
padding-top: var(--s1);
}
.oan-acard:not(:has(.oan-acard__facts)) .oan-acard__proof { margin-top: auto; }
.oan-acard :is(.oan-acard__facts, .oan-acard__proof) ~ .oan-acard__actions { margin-top: 0; }
.oan-acard__actions .oan-btn {
min-height: 42px;
padding-inline: var(--s4);
font-size: var(--t-sm);
}
.oan-acard__pick {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 42px;
padding: var(--s2) var(--s4);
font-size: var(--t-sm);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: var(--radius-pill);
cursor: pointer;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-acard__pick:hover { border-color: var(--action); color: var(--action); }
.oan-acard__pick input {
width: 16px;
height: 16px;
margin: 0;
flex: 0 0 16px;
accent-color: var(--action);
}
.oan-acard.is-picked .oan-acard__pick {
border-color: var(--action);
color: var(--action-dark);
}
.oan-acard__site {
width: 42px;
padding-inline: 0;
justify-content: center;
color: var(--muted);
}
.oan-acard__site:hover { color: var(--action); }
.oan-acard__site .oan-ext {
width: 16px;
height: 16px;
margin-inline-start: 0;
}
.oan-endcta a:not(.oan-btn) {
color: var(--brand-on-dark);
text-decoration-color: currentColor;
}
.oan-endcta a:not(.oan-btn):hover { color: var(--on-dark); }
.oan-endcta .oan-btn--secondary {
background: none;
border-color: var(--on-dark-3);
color: var(--on-dark);
}
.oan-endcta .oan-btn--secondary:hover { border-color: var(--on-dark); }
.oan-endcta :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline-color: var(--brand-on-dark);
}
.oan-eyebrow--rule {
display: flex;
align-items: center;
gap: var(--s3);
}
.oan-eyebrow--rule::before {
content: "";
flex: 0 0 auto;
width: 18px;
height: 2px;
background: currentColor;
}
.oan-home-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--s4) var(--s6);
}
.oan-home-head__text {
min-width: 0;
max-width: 44rem;
}
.oan-home-head .oan-eyebrow { color: var(--action); }
.oan-home-head__title {
margin: 0;
font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: -.02em;
color: var(--text);
}
.oan-home-head__sub {
margin: var(--s4) 0 0;
max-width: 52ch;
font-size: var(--t-md);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-home-head__act {
flex: 0 0 auto;
margin: 0;
}
.oan-home-head__link {
display: inline-flex;
align-items: center;
gap: 6px;
padding-block: 10px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
color: var(--action);
}
.oan-home-head__link span { transition: transform var(--dur) var(--ease); }
.oan-home-head__link:hover { color: var(--action-dark); }
.oan-home-head__link:hover span { transform: translateX(3px); }
.oan-home-head--center {
flex-direction: column;
align-items: center;
text-align: center;
}
.oan-home-head--center .oan-home-head__text { max-width: 52rem; }
.oan-home-head--center .oan-eyebrow--rule { justify-content: center; }
.oan-home-head--center .oan-home-head__sub {
margin-inline: auto;
max-width: 48ch;
}
.oan-tile--anchor .oan-btn--primary {
background: var(--surface);
border-color: var(--surface);
color: var(--ink);
box-shadow: none;
}
.oan-popular {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s2) var(--s3);
margin-top: var(--s2);
}
.oan-popular__label {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.oan-popular__list {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-popular__chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 var(--s3);
font-size: var(--t-meta);
font-weight: 600;
color: var(--text);
text-decoration: none;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-popular__chip:hover {
color: var(--action);
background: var(--surface);
border-color: var(--action);
}
.oan-agency-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
gap: var(--s5);
margin: 0;
padding: 0;
list-style: none;
}
.oan-agency-grid > * { min-width: 0; }
.oan-scorecard {
display: grid;
align-content: start;
gap: var(--s5);
min-width: 0;
padding: var(--s6);
background: var(--surface);
border-radius: var(--radius-lg);
color: var(--text);
}
.oan-scorecard__figure { display: grid; gap: var(--s2); width: 100%; }
.oan-scorecard__median {
display: flex;
align-items: baseline;
gap: var(--s1);
margin: 0;
line-height: 1;
}
.oan-scorecard__big {
font-family: var(--display);
font-size: clamp(3.5rem, 2.8rem + 2.4vw, 4.75rem);
font-weight: 600;
letter-spacing: -.04em;
color: var(--text);
}
.oan-scorecard__of {
font-family: var(--display);
font-size: var(--t-lg);
font-weight: 500;
color: var(--faint);
}
.oan-scorecard__cap {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-scorecard__dist { margin: var(--s4) 0 0; }
.oan-scorecard__dist svg {
display: block;
width: 100%;
height: 104px;
}
.oan-scorecard__dist .is-bin { fill: var(--brand); }
.oan-scorecard__dist .is-median { fill: var(--ink); }
.oan-scorecard__dist .is-empty { fill: var(--line); }
.oan-scorecard__axis {
stroke: var(--line-2);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.oan-scorecard__scale {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--s2);
font-family: var(--mono);
font-size: var(--t-xs);
color: var(--faint);
}
.oan-scorecard__key {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
}
.oan-scorecard__key i {
width: 10px;
height: 10px;
border-radius: 3px;
background: var(--ink);
}
.oan-scorecard__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s4);
}
.oan-scorecard .oan-scorecard__title {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -.01em;
}
.oan-scorecard__total {
font-family: var(--mono);
font-size: var(--t-sm);
font-weight: 600;
color: var(--faint);
white-space: nowrap;
}
.oan-weights__bar {
display: flex;
gap: 3px;
height: 14px;
}
.oan-weights__seg { min-width: 0; border-radius: 999px; }
.oan-weights__seg--1, .oan-weights__swatch--1 { background: var(--ink); }
.oan-weights__seg--2, .oan-weights__swatch--2 { background: var(--hero-mid); }
.oan-weights__seg--3, .oan-weights__swatch--3 { background: var(--brand); }
.oan-weights__seg--4, .oan-weights__swatch--4 { background: var(--brand-2); }
.oan-weights__seg--5, .oan-weights__swatch--5 { background: var(--score); }
.oan-weights {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--s6);
margin: 0;
padding: 0;
list-style: none;
}
.oan-weights__item {
display: grid;
grid-template-columns: 12px minmax(0, 1fr) auto;
align-items: baseline;
align-content: start;
column-gap: var(--s3);
row-gap: 2px;
padding: 14px 0;
border-top: 1px solid var(--line);
}
.oan-weights__item:nth-child(-n + 2) { border-top: 0; }
.oan-weights__swatch {
width: 12px;
height: 12px;
border-radius: 4px;
align-self: center;
}
.oan-weights__name {
font-weight: 600;
color: var(--text);
}
.oan-weights__pts {
font-family: var(--mono);
font-size: var(--t-sm);
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.oan-weights__note {
grid-column: 2 / -1;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-scorecard__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s3) var(--s5);
padding-top: var(--s5);
border-top: 1px solid var(--line);
}
.oan-scorecard__note {
display: flex;
align-items: flex-start;
flex: 1 1 360px;
gap: var(--s3);
margin: 0;
padding: var(--s3) var(--s4);
background: var(--brand-tint);
border-radius: 14px;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--text);
}
.oan-scorecard__note svg {
width: 20px;
height: 20px;
flex: 0 0 20px;
margin-top: 1px;
color: var(--brand);
}
.oan-scorecard__note strong { color: var(--ink); }
.oan-scorecard__more {
font-size: var(--t-sm);
font-weight: 700;
white-space: nowrap;
text-decoration: none;
color: var(--action);
}
.oan-scorecard__more:hover { color: var(--action-dark); text-decoration: underline; text-underline-offset: .2em; }
.oan-briefs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: var(--s5);
margin: 0;
padding: 0;
list-style: none;
}
.oan-brief {
display: flex;
flex-direction: column;
gap: var(--s4);
min-width: 0;
padding: var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-brief:hover {
box-shadow: var(--lift);
transform: translateY(-1px);
}
.oan-brief__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s3);
}
.oan-brief__title {
margin: 0;
font-size: var(--t-md);
font-weight: 700;
line-height: var(--lh-tight);
color: var(--ink);
}
.oan-brief__title a { color: inherit; text-decoration: none; }
.oan-brief__title a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-brief__state {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
padding: var(--s1) var(--s3);
background: var(--brand-tint);
border-radius: var(--radius-pill);
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--action-dark);
}
.oan-brief__state i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--action);
}
.oan-brief__facts {
display: grid;
gap: var(--s2);
margin: 0;
}
.oan-brief__fact {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
font-size: var(--t-sm);
}
.oan-brief__fact dt { color: var(--muted); }
.oan-brief__fact dd {
margin: 0;
text-align: right;
font-weight: 700;
color: var(--text);
}
.oan-brief__go { margin: auto 0 0; font-size: var(--t-sm); }
.oan-benefits {
display: grid;
gap: var(--s5);
margin: 0;
padding: 0;
list-style: none;
}
.oan-benefit {
display: grid;
gap: var(--s1);
min-width: 0;
}
.oan-benefit b {
font-size: var(--t-md);
line-height: var(--lh-snug);
color: var(--ink);
}
.oan-benefit span {
font-size: var(--t-base);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-home-join {
justify-content: center;
gap: var(--s6);
}
.oan-home-join__acts {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin: 0;
}
.oan-home-join__stats .oan-stat dt { color: var(--on-dark-3); }
.oan-home-join__stats .oan-stat dd { color: var(--on-dark); }
.oan-strip__col h3 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
color: var(--ink);
}
.oan-insights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
gap: var(--s5);
}
.oan-insight {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oan-insight:hover {
box-shadow: var(--lift);
transform: translateY(-1px);
}
.oan-insight__media img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.oan-insight__body {
display: flex;
flex-direction: column;
gap: var(--s3);
padding: var(--s5);
min-width: 0;
}
.oan-insight__date {
margin: 0;
font-family: var(--mono);
font-size: var(--t-xs);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-insight__title {
margin: 0;
font-size: 1.1875rem;
font-weight: 700;
line-height: var(--lh-tight);
}
.oan-insight__title a { color: var(--ink); text-decoration: none; }
.oan-insight__title a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-insight__sum {
margin: 0;
font-size: var(--t-base);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-insight__go {
margin: auto 0 0;
padding-top: var(--s2);
font-weight: 700;
}
.oan-insight__go a { text-decoration: none; }
.oan-insight__go a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-endcta {
max-width: var(--max-outer);
margin-inline: auto;
padding-inline: var(--gutter);
}
.oan-endcta__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s4);
padding: var(--s9) var(--s6);
background: var(--ink);
border-radius: var(--radius-lg);
}
.oan-endcta__chip {
margin: 0;
padding: var(--s2) var(--s4);
border: 1px solid var(--line-dark);
border-radius: var(--radius-pill);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--on-dark-2);
}
.oan-endcta__title {
margin: 0;
max-width: 24ch;
font-size: var(--t-d-3);
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: -.028em;
color: var(--on-dark);
}
.oan-endcta__sub {
margin: 0;
max-width: 54ch;
font-size: var(--t-md);
line-height: var(--lh-base);
color: var(--on-dark-2);
}
.oan-endcta__acts {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin: var(--s3) 0 0;
}
.oan-herofield { display: none; }
.oan-card__cat { color: var(--faint); }
.oan-jobs li {
gap: var(--s2);
padding: var(--s3) var(--s4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.oan-jobs li:hover {
background: var(--surface-2);
border-color: var(--line-2);
}
.oan-jobs li > a {
display: inline-flex;
align-items: center;
min-height: 24px;
font-size: var(--t-base);
color: var(--ink);
text-decoration: none;
}
.oan-jobs li > a:hover {
color: var(--action);
text-decoration: underline;
text-underline-offset: .2em;
}
.oan-filter {
padding: var(--s4) var(--s5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-filter:not(:has(> .oan-filter__fields)) {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: var(--s3) var(--s4);
}
.oan-filter:not(:has(> .oan-filter__fields)) > .oan-filter__field {
flex: 1 1 190px;
max-width: 320px;
}
.oan-filter:not(:has(> .oan-filter__fields)) > .oan-filter__actions {
display: flex;
margin: 0;
}
.oan-table-wrap:has(> .oan-compare) {
padding: var(--s3) var(--s4) var(--s2);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.oan-table-wrap:has(> .oan-plans) {
padding: var(--s4) var(--s5) var(--s2);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-ticket {
display: flex;
align-items: stretch;
gap: var(--s4);
padding: var(--s4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition:
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.oan-ticket:hover {
background: var(--surface-2);
border-color: var(--line-2);
}
.oan-ticket__stub {
flex: 0 0 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s1);
padding: var(--s2);
background: var(--surface-2);
border-right: 1px dashed var(--line);
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.oan-ticket__day {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: var(--t-xl);
font-weight: 600;
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
}
.oan-ticket__month {
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 600;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--faint);
}
.oan-ticket__body {
display: flex;
flex-direction: column;
gap: var(--s2);
justify-content: center;
min-width: 0;
}
.oan-ticket__body h3 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
line-height: var(--lh-tight);
}
.oan-ticket__body h3 a { color: var(--ink); text-decoration: none; }
.oan-ticket__body h3 a:hover { color: var(--action); }
.oan-seal--pending circle { stroke: var(--line-2); }
.oan-seal--pending text { fill: var(--muted); }
.oan-plan__cta {
display: flex;
margin-top: var(--s3);
letter-spacing: normal;
text-transform: none;
}
.oan-brief-form,
.oan-agency-form {
border: 1px solid var(--line);
}
.oan-field-error {
display: block;
margin-top: var(--s2);
padding: var(--s2) var(--s3);
background: var(--alert-tint);
box-shadow: inset 3px 0 0 var(--alert);
border-radius: var(--radius-sm);
font-size: var(--t-sm);
font-weight: 600;
color: var(--text);
}
.oan-field [aria-invalid="true"],
.oan-form-row [aria-invalid="true"] {
border-color: var(--alert);
}
.oan-profile-rail .oan-author {
grid-template-columns: minmax(0, 1fr);
gap: var(--s3);
padding: var(--s4);
}
.oan-profile-rail .oan-brief-form,
.oan-profile-rail .oan-agency-form {
max-width: none;
padding: var(--s5) var(--s4);
}
.oan-profile-rail .oan-brief-form h3 { margin-top: var(--s5); }
.oan-pagehead .oan-badge:not([class*="oan-badge--"]) {
background: var(--surface);
}
.oan-row,
.oan-card,
.oan-acard,
.oan-facet,
.oan-tile,
.oan-prop,
.oan-filter,
.oan-notfound__places li,
.oan-author,
.oan-score-panel,
.oan-table-wrap:has(> .oan-compare),
.oan-briefs .oan-table-wrap,
.oan-table-wrap:has(> .oan-recent-briefs),
.pmpro.pmpro .pmpro_card {
border-color: transparent;
box-shadow: var(--lift);
}
.oan-row:hover,
.oan-card:hover,
.oan-acard:hover,
.oan-facet:hover,
.oan-tile--link:hover,
.oan-notfound__places li:hover {
border-color: transparent;
box-shadow: var(--lift-lg);
}
.oan-tile--anchor { border-color: transparent; }
span.oan-row__logo,
span.oan-card__logo,
span.oan-acard__logo,
span.oan-profile__logo { border-radius: 18px; }
.oan-pagehead .oan-pagehead__cta.oan-btn--primary,
.oan-pagehead .oan-pagehead__cta-block .oan-btn--primary,
.oan-plans .oan-btn--primary,
.oan-plan-cards .oan-btn--primary,
.oan-plan__cta .oan-btn--primary,
.oan-brief-form .oan-btn--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
box-shadow: var(--glow-accent);
}
.oan-pagehead .oan-pagehead__cta.oan-btn--primary:hover,
.oan-pagehead .oan-pagehead__cta-block .oan-btn--primary:hover,
.oan-plans .oan-btn--primary:hover,
.oan-plan-cards .oan-btn--primary:hover,
.oan-plan__cta .oan-btn--primary:hover,
.oan-brief-form .oan-btn--primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: var(--on-accent);
}
.oan-cta__panel:first-child .oan-btn--primary {
background: var(--surface);
border-color: var(--surface);
color: var(--ink);
box-shadow: none;
}
.oan-cta__panel:first-child .oan-btn--primary:hover {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
}
.oan-tile .oan-table-wrap:has(> .oan-compare),
.oan-tile .oan-table-wrap:has(> .oan-recent-briefs) { box-shadow: none; }
.oan-tile .oan-table-wrap:has(> .oan-compare) { padding: 0; }
.oan-account {
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
gap: var(--s6);
align-items: start;
}
.oan-account__rail {
position: sticky;
top: calc(var(--header-h) + var(--s6));
display: grid;
gap: var(--s4);
max-height: calc(100vh - var(--header-h) - var(--s7));
overflow-y: auto;
padding: var(--s4);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
scrollbar-width: thin;
}
.oan-account__who {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
gap: var(--s3);
padding: var(--s1) var(--s1) var(--s3);
border-bottom: 1px solid var(--line);
}
.oan-account__mark {
width: 48px;
height: 48px;
object-fit: contain;
border-radius: 14px;
background: var(--surface);
}
span.oan-account__mark {
display: grid;
place-items: center;
background: var(--brand);
color: var(--on-dark);
font-size: var(--t-md);
font-weight: 700;
letter-spacing: -.01em;
}
.oan-account__id { display: grid; gap: 2px; min-width: 0; }
.oan-account__name {
margin: 0;
font-size: var(--t-base);
font-weight: 700;
line-height: var(--lh-snug);
color: var(--text);
overflow-wrap: anywhere;
}
.oan-account__plan {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-account__nav { display: grid; gap: var(--s1); }
.oan-account__group {
margin: var(--s3) 0 var(--s1);
padding-inline: var(--s3);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.oan-account__group:first-child { margin-top: var(--s1); }
.oan-account__nav ul {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.oan-account__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s2);
min-height: 36px;
padding: 6px var(--s3);
border-radius: 10px;
font-size: var(--t-body-sm);
font-weight: 500;
line-height: 1.3;
color: var(--text);
text-decoration: none;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-account__nav .oan-account__link:hover {
background: var(--surface-2);
color: var(--text);
text-decoration: none;
}
.oan-account__nav .oan-account__link[aria-current="page"] {
background: var(--brand-tint);
color: var(--ink);
font-weight: 700;
box-shadow: inset 3px 0 0 var(--action);
}
.oan-account__nav .oan-account__link--quiet { color: var(--muted); }
.oan-account__count {
min-width: 24px;
padding: 2px var(--s2);
border-radius: var(--radius-pill);
background: var(--surface-2);
font-size: var(--t-xs);
font-weight: 700;
line-height: 1.4;
text-align: center;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.oan-account__link[aria-current="page"] .oan-account__count { background: var(--surface); }
.oan-account__nav .oan-account__sub {
gap: 0;
margin: var(--s1) 0 var(--s2) var(--s4);
padding-left: var(--s2);
border-left: 1px solid var(--line);
}
.oan-account__sub a {
display: block;
padding: 4px var(--s3);
border-radius: 8px;
font-size: var(--t-sm);
line-height: 1.35;
color: var(--muted);
text-decoration: none;
}
.oan-account__nav .oan-account__sub a:hover {
background: var(--surface-2);
color: var(--text);
text-decoration: none;
}
.oan-account__main {
display: grid;
gap: var(--s5);
min-width: 0;
}
.oan-pagehead.oan-pagehead--account {
margin-bottom: 0;
padding-bottom: var(--s5);
}
.oan-account-panel {
display: grid;
gap: var(--s4);
min-width: 0;
padding: clamp(20px, 2.2vw, 32px);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
scroll-margin-top: calc(var(--header-h) + var(--s7));
}
.oan-account-panel__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s2) var(--s4);
}
.oan-account-panel .oan-account-panel__title {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -.01em;
line-height: var(--lh-snug);
color: var(--text);
}
.oan-account-panel__action {
font-size: var(--t-sm);
font-weight: 600;
color: var(--action);
}
.oan-account-panel__lede {
margin: 0;
max-width: var(--measure);
font-size: var(--t-base);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-account-panel__lede strong { color: var(--text); }
.oan-account-panel__note {
margin: 0;
max-width: var(--measure);
font-size: var(--t-sm);
line-height: var(--lh-base);
color: var(--muted);
}
.oan-account-panel__note strong { color: var(--text); }
.oan-account-panel__lede a,
.oan-account-panel__note a { color: var(--action); }
.oan-account-panel .oan-empty {
padding: var(--s6) var(--s5);
border-radius: var(--radius-sm);
}
.oan-account-panel .oan-empty a { color: var(--action); }
.oan-account__main > .oan-notice { border-color: transparent; box-shadow: inset 4px 0 0 var(--line-2), var(--lift); }
.oan-account__main > .oan-notice--ok { box-shadow: inset 4px 0 0 var(--verified), var(--lift); }
.oan-account__main > .oan-notice--error { box-shadow: inset 4px 0 0 var(--alert), var(--lift); }
.oan-account-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
gap: var(--s5);
align-items: start;
}
.oan-account-grid--wide-first { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.oan-account-stack {
display: grid;
gap: var(--s5);
align-content: start;
min-width: 0;
}
.oan-account-panel--start { justify-items: start; }
.oan-account-mirror {
padding: var(--s4);
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.oan-account-mirror .oan-acard { margin: 0; }
.oan-account-panel--score .oan-score-panel {
padding: 0;
background: none;
border-color: transparent;
box-shadow: none;
}
.oan-account-panel--score .oan-score-panel h2 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -.01em;
line-height: var(--lh-snug);
}
.oan-steps__title {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.oan-steps {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.oan-steps__item {
display: grid;
grid-template-columns: 16px minmax(0, 1fr) auto;
align-items: center;
gap: var(--s3);
padding: var(--s2) 0;
font-size: var(--t-sm);
}
.oan-steps__item + .oan-steps__item { border-top: 1px solid var(--line); }
.oan-steps__item::before {
content: "";
width: 14px;
height: 14px;
border: 1.5px solid var(--line-2);
border-radius: 50%;
}
.oan-steps__item a { color: var(--action); font-weight: 600; }
.oan-steps__pts {
padding: 2px var(--s2);
border-radius: var(--radius-pill);
background: var(--score-tint);
font-size: var(--t-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--score-ink);
white-space: nowrap;
}
.oan-slots-grid {
display: grid;
gap: var(--s5);
}
.oan-slots {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--s3) var(--s4);
padding-top: var(--s5);
border-top: 1px solid var(--line);
}
.oan-slots:first-child { padding-top: 0; border-top: 0; }
.oan-slots__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s1) var(--s3);
}
.oan-account-panel .oan-slots__title {
margin: 0;
font-size: var(--t-base);
font-weight: 700;
letter-spacing: 0;
color: var(--text);
}
.oan-slots__count {
margin: 0;
font-size: var(--t-sm);
font-variant-numeric: tabular-nums;
color: var(--muted);
}
.oan-slots__count b { color: var(--text); }
.oan-slots__edit {
grid-column: 2;
grid-row: 1;
font-size: var(--t-sm);
font-weight: 600;
color: var(--action);
white-space: nowrap;
}
.oan-slots__list {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-slot {
display: inline-flex;
align-items: center;
min-width: 96px;
min-height: 36px;
padding: var(--s1) var(--s4);
border-radius: var(--radius-pill);
background: var(--brand-tint);
font-size: var(--t-sm);
font-weight: 600;
line-height: 1.25;
color: var(--ink);
}
.oan-slot a { color: inherit; text-decoration: none; }
.oan-slot a:hover { color: var(--action); text-decoration: underline; }
.oan-slot--open {
background: none;
border: 1.5px dashed var(--line-2);
}
.oan-brieflist {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.oan-brieflist__item {
display: grid;
gap: 2px;
padding: var(--s3) 0;
}
.oan-brieflist__item + .oan-brieflist__item { border-top: 1px solid var(--line); }
.oan-brieflist__title { font-weight: 700; color: var(--text); }
.oan-brieflist__title:hover { color: var(--action); }
.oan-brieflist__meta { font-size: var(--t-sm); color: var(--muted); }
.oan-account-plan__name {
margin: 0;
font-size: var(--t-xl);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--text);
}
.oan-plan-list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--t-sm);
}
.oan-plan-list__item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--s3);
padding: var(--s2) 0;
color: var(--text);
}
.oan-plan-list__item + .oan-plan-list__item { border-top: 1px solid var(--line); }
.oan-plan-list__item.is-yes,
.oan-plan-list__item.is-no { grid-template-columns: 16px minmax(0, 1fr) auto; }
.oan-plan-list__mark { width: 14px; height: 14px; }
.is-yes .oan-plan-list__mark { color: var(--ink); }
.is-no .oan-plan-list__mark,
.is-no .oan-plan-list__label { color: var(--muted); }
.oan-plan-list__value {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.oan-plan-list__label a { margin-left: var(--s1); color: var(--action); font-weight: 600; }
.oan-plan-list__from {
font-size: var(--t-xs);
font-weight: 600;
color: var(--faint);
white-space: nowrap;
}
.oan-account-plan__links {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s5);
margin: 0;
font-size: var(--t-sm);
font-weight: 600;
}
.oan-account-plan__links a { color: var(--action); }
.oan-account-table tbody th { font-weight: 700; }
.oan-account-table tbody th a { color: var(--text); }
.oan-account-table tbody th a:hover { color: var(--action); }
.oan-account-table tr.is-open > * { background: var(--brand-tint); }
.oan-account-search { display: grid; gap: var(--s1); max-width: 560px; }
.oan-account-search label {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-account-search__row { display: flex; gap: var(--s2); }
.oan-account-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
min-height: 44px;
padding: 10px 14px;
font-family: var(--sans);
font-size: var(--t-body-sm);
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
}
.oan-account-search input[type="search"]:focus-visible {
outline: 2px solid var(--action);
outline-offset: 1px;
border-color: var(--action);
}
.oan-account-panel--brief { box-shadow: var(--lift-lg); }
.oan-account-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
gap: var(--s3);
margin: 0;
padding: var(--s4);
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.oan-account-facts__item { display: grid; gap: 2px; min-width: 0; }
.oan-account-facts dt {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-account-facts dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.oan-account-brief__text { max-width: var(--measure); color: var(--text); line-height: var(--lh-base); }
.oan-account-brief__text p { margin: 0 0 var(--s3); }
.oan-account-brief__text > :last-child { margin-bottom: 0; }
.oan-account-panel .oan-account-brief__reply {
margin: var(--s2) 0 0;
font-size: var(--t-md);
font-weight: 700;
letter-spacing: -.01em;
}
.oan-account-panel .oan-brief-form {
max-width: var(--measure);
padding: 0;
background: none;
border: 0;
box-shadow: none;
}
.oan-badge-rows { display: grid; gap: var(--s4); }
.oan-account-panel .oan-badge-row {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
align-items: center;
gap: var(--s5);
padding: var(--s4);
background: var(--surface-2);
border: 0;
border-radius: var(--radius-sm);
box-shadow: none;
}
.oan-account-panel .oan-badge-row__preview {
width: 100%;
max-width: 260px;
height: auto;
border-radius: 10px;
background: var(--surface);
}
.oan-account-panel .oan-badge-row__code { display: grid; gap: var(--s1); margin: 0; }
.oan-account-panel .oan-badge-row__code label {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-account-panel .oan-badge-row__code textarea {
width: 100%;
min-height: 84px;
padding: 10px 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--t-xs);
line-height: 1.5;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
resize: vertical;
}
.oan-listing-form {
display: grid;
gap: var(--s5);
min-width: 0;
}
.oan-form-section { gap: var(--s5); }
.oan-form-section .oan-field { margin: 0; }
.oan-fields {
display: grid;
gap: var(--s5);
min-width: 0;
}
.oan-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oan-form-section .oan-hint { margin-top: var(--s1); }
.oan-logo-field {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
align-items: start;
gap: var(--s4);
}
.oan-logo-field__preview {
display: grid;
place-items: center;
width: 64px;
height: 64px;
overflow: hidden;
border-radius: 16px;
background: var(--surface-2);
}
.oan-logo-field__preview img { width: 64px; height: 64px; object-fit: contain; }
.oan-logo-field__none {
padding: var(--s1);
font-size: var(--t-xs);
line-height: 1.2;
text-align: center;
color: var(--faint);
}
.oan-logo-field__control { margin: 0; }
.oan-form-section input[type="file"] {
display: block;
width: 100%;
padding: var(--s2);
font-family: var(--sans);
font-size: var(--t-sm);
color: var(--text);
background: var(--surface);
border: 1px dashed var(--line-2);
border-radius: 10px;
}
.oan-form-section input[type="file"]::file-selector-button {
margin-right: var(--s3);
padding: 8px 14px;
font: inherit;
font-weight: 700;
color: var(--text);
background: var(--surface-2);
border: 0;
border-radius: var(--radius-pill);
cursor: pointer;
}
.oan-subcard {
margin: 0;
padding: var(--s5);
background: var(--surface-2);
border: 0;
border-radius: var(--radius-sm);
min-width: 0;
}
.oan-form-section .oan-subcard > :not(legend) + :not(legend) { margin-top: var(--s4); }
.oan-subcard .oan-fields { gap: var(--s4) var(--s5); }
.oan-subcard .oan-field textarea { min-height: 96px; }
.oan-subcard__legend {
float: left;
width: 100%;
margin: 0 0 var(--s4);
padding: 0;
font-size: var(--t-sm);
font-weight: 700;
color: var(--text);
}
.oan-subcard__legend + * { clear: both; }
.oan-subcard .oan-field input,
.oan-subcard .oan-field select,
.oan-subcard .oan-field textarea { background: var(--surface); }
.oan-subcard .oan-check-field { margin: 0; }
.oan-subcard .oan-check-field label,
.oan-form-section .oan-check-field label {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin: 0;
font-size: var(--t-base);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text);
cursor: pointer;
}
.oan-subgroup {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.oan-subgroup + .oan-subgroup {
margin-top: var(--s2);
padding-top: var(--s5);
border-top: 1px solid var(--line);
}
.oan-account-panel .oan-subgroup__title {
float: left;
width: 100%;
margin: 0 0 var(--s2);
padding: 0;
font-size: var(--t-base);
font-weight: 700;
letter-spacing: 0;
color: var(--text);
}
.oan-subgroup__title + * { clear: both; }
.oan-subgroup .oan-hint { margin: 0 0 var(--s3); }
.oan-subgroup .oan-fields { gap: var(--s3) var(--s4); }
.oan-pick {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.oan-pick + .oan-pick {
margin-top: var(--s2);
padding-top: var(--s5);
border-top: 1px solid var(--line);
}
.oan-pick__legend {
float: left;
width: 100%;
margin: 0 0 var(--s2);
padding: 0;
font-size: var(--t-base);
font-weight: 700;
color: var(--text);
}
.oan-pick__quota {
margin-left: var(--s2);
font-size: var(--t-sm);
font-weight: 500;
color: var(--muted);
}
.oan-pick__inner {
clear: both;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s2) var(--s4);
counter-reset: oan-picked;
}
.oan-pick__inner input[type="checkbox"]:checked { counter-increment: oan-picked; }
.oan-pick__saved {
order: 1;
flex: 1 1 280px;
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-pick__saved strong { color: var(--text); }
.oan-pick__tally {
order: 2;
margin: 0;
padding: 3px var(--s3);
border-radius: var(--radius-pill);
background: var(--brand-tint);
font-size: var(--t-xs);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.oan-pick__tally::before { content: counter(oan-picked) " of " attr(data-quota) " chosen"; }
.oan-pick__box {
order: 3;
flex: 1 1 100%;
min-width: 0;
}
.oan-pick--long .oan-pick__box {
max-height: 360px;
overflow-y: auto;
padding: 0 var(--s4) var(--s3);
border: 1px solid var(--line-2);
border-radius: var(--radius-sm);
scrollbar-width: thin;
}
.oan-pick__group {
position: sticky;
top: 0;
z-index: 1;
margin: 0 calc(var(--s4) * -1);
padding: var(--s3) var(--s4) var(--s2);
background: var(--surface);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.oan-pick__opts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
gap: var(--s1) var(--s4);
}
.oan-pick__opts .oan-check {
display: flex;
align-items: center;
gap: var(--s2);
min-height: 32px;
margin: 0;
font-size: var(--t-sm);
line-height: 1.3;
color: var(--text);
cursor: pointer;
}
.oan-pick__opts input[type="checkbox"],
.oan-subcard input[type="checkbox"],
.oan-form-section .oan-check-field input[type="checkbox"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--action);
}
.oan-savebar {
position: sticky;
bottom: var(--s4);
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s3) var(--s5);
padding: var(--s4) var(--s5);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift-lg);
}
.oan-savebar__note {
flex: 1 1 280px;
margin: 0;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-account-pmpro .pmpro.pmpro { display: grid; gap: var(--s6); }
.oan-account-pmpro .pmpro.pmpro .pmpro_section { display: grid; gap: var(--s3); margin: 0; }
.oan-account-pmpro .pmpro.pmpro .pmpro_section_title {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -.01em;
line-height: var(--lh-snug);
color: var(--text);
}
.oan-account-pmpro .pmpro.pmpro .pmpro_card { margin: 0; overflow: hidden; }
.oan-account-pmpro .pmpro.pmpro .pmpro_card_actions {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
padding: var(--s3) var(--s5);
background: var(--surface-2);
border-top: 0;
}
.oan-account-pmpro .pmpro.pmpro .pmpro_card_action_separator { display: none; }
.oan-account-pmpro .pmpro.pmpro .pmpro_heading-with-avatar .avatar { display: none; }
.oan-account-pmpro .pmpro.pmpro .pmpro_card_actions a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 7px 14px;
font-size: var(--t-sm);
font-weight: 700;
color: var(--text);
text-decoration: none;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
}
.oan-account-pmpro .pmpro.pmpro .pmpro_card_actions a:hover {
border-color: var(--line-2);
box-shadow: var(--lift);
color: var(--text);
}
.oan-account-pmpro .pmpro.pmpro .pmpro_actions_nav { font-size: var(--t-sm); }
.oan-account-pmpro .pmpro.pmpro .pmpro_actions_nav a { color: var(--action); font-weight: 600; }
.oan-account-pmpro .pmpro.pmpro .pmpro_table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.oan-account-pmpro .pmpro.pmpro .pmpro_table th,
.oan-account-pmpro .pmpro.pmpro .pmpro_table td {
padding: var(--s3) var(--s4);
text-align: start;
border-bottom: 1px solid var(--line);
}
.oan-account-pmpro .pmpro.pmpro .pmpro_table thead th {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.oan-account-pmpro .pmpro.pmpro .pmpro_list_item { padding-block: 2px; }
.oan-account-pmpro .pmpro.pmpro .pmpro_heading-with-avatar img { border-radius: 14px; }
.oan-login {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--s5);
align-items: stretch;
max-width: 1040px;
margin-inline: auto;
}
.oan-login__form {
display: grid;
align-content: start;
gap: var(--s3);
padding: clamp(24px, 3vw, 40px);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift-lg);
}
.oan-login__form .pmpro.pmpro,
.oan-login__form .pmpro.pmpro .pmpro_section { margin: 0; padding: 0; }
.oan-login__form .pmpro.pmpro .pmpro_card {
margin: 0;
background: none;
border: 0;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
.oan-login__form .pmpro.pmpro .pmpro_card_content,
.oan-login__form .pmpro.pmpro .pmpro_card_actions { padding: 0; background: none; }
.oan-login__form .pmpro.pmpro .pmpro_card_actions { margin-top: var(--s3); }
.oan-login__form form p { margin: 0 0 var(--s4); }
.oan-login__form label {
display: block;
margin-bottom: var(--s1);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-login__form input[type="text"],
.oan-login__form input[type="email"],
.oan-login__form input[type="password"] {
width: 100%;
min-height: 48px;
padding: 12px 14px;
font-family: var(--sans);
font-size: var(--t-base);
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
}
.oan-login__form input[type="text"]:focus-visible,
.oan-login__form input[type="email"]:focus-visible,
.oan-login__form input[type="password"]:focus-visible {
outline: 2px solid transparent;
border-color: var(--action);
box-shadow: var(--focus-halo);
}
.oan-login__form .login-remember label {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--t-sm);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text);
cursor: pointer;
}
.oan-login__form .login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--action); }
.oan-login__form input[type="submit"] {
width: 100%;
min-height: 48px;
padding: 12px 18px;
font-family: var(--sans);
font-size: var(--t-base);
font-weight: 700;
color: var(--on-accent);
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
box-shadow: var(--glow-accent);
cursor: pointer;
transition: background-color var(--dur) var(--ease);
}
.oan-login__form input[type="submit"]:hover,
.oan-login__form input[type="submit"]:focus-visible {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.oan-login__form input[type="submit"]:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.oan-login__form .pmpro.pmpro .pmpro_section #loginform .input {
min-height: 48px;
padding: 12px 14px;
font-size: var(--t-base);
color: var(--text);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 10px;
box-shadow: none;
}
.oan-login__form .pmpro.pmpro .pmpro_section #loginform .input:focus {
outline: 2px solid transparent;
border-color: var(--action);
box-shadow: var(--focus-halo);
}
.oan-login__form .pmpro.pmpro .pmpro_section #loginform .login-submit .button {
min-height: 48px;
padding: 12px 18px;
font-size: var(--t-base);
font-weight: 700;
color: var(--on-accent);
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
box-shadow: var(--glow-accent);
}
.oan-login__form .pmpro.pmpro .pmpro_section #loginform .login-submit .button:hover,
.oan-login__form .pmpro.pmpro .pmpro_section #loginform .login-submit .button:focus {
color: var(--on-accent);
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.oan-login__form .pmpro.pmpro .pmpro_section #loginform .login-submit .button:focus-visible {
outline: 2px solid var(--action);
outline-offset: 2px;
}
.oan-login__lost { margin: 0; font-size: var(--t-sm); }
.oan-login__lost a,
.oan-login__form .pmpro_actions_nav a { color: var(--action); font-weight: 600; }
.oan-login__pitch {
display: grid;
align-content: start;
gap: var(--s4);
padding: clamp(24px, 3vw, 40px);
background: var(--ink);
color: var(--on-dark-2);
border-radius: var(--radius);
}
.oan-login__pitch h2 {
margin: 0;
font-size: var(--t-xl);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
color: var(--on-dark);
}
.oan-login__pitch p { margin: 0; line-height: var(--lh-base); }
.oan-login__points {
display: grid;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
color: var(--on-dark);
}
.oan-login__points li {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: baseline;
gap: var(--s3);
}
.oan-login__points li::before {
content: "";
width: 10px;
height: 6px;
margin-top: 2px;
border-left: 2px solid var(--brand-on-dark);
border-bottom: 2px solid var(--brand-on-dark);
transform: rotate(-45deg) translateY(-3px);
}
.oan-login__pitch .oan-btn--primary {
background: var(--surface);
border-color: var(--surface);
color: var(--ink);
box-shadow: none;
}
.oan-login__pitch .oan-btn--primary:hover {
background: var(--on-dark-2);
border-color: var(--on-dark-2);
color: var(--ink);
}
.oan-task {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
gap: var(--s7);
align-items: start;
}
.oan-task__intro {
max-width: var(--measure);
min-width: 0;
}
.oan-task__intro h2 {
margin: var(--s6) 0 var(--s3);
font-size: var(--t-xl);
letter-spacing: -.02em;
line-height: 1.2;
}
.oan-task__intro h3 { margin: var(--s5) 0 var(--s2); font-size: var(--t-lg); }
.oan-task__intro > :first-child { margin-top: 0; }
.oan-task__intro p { margin: 0 0 var(--s4); line-height: var(--lh-base); }
.oan-task__intro p:first-child { font-size: var(--t-md); color: var(--text); }
.oan-task__side {
display: grid;
gap: var(--s4);
min-width: 0;
}
.oan-task.oan-task--stacked {
grid-template-columns: minmax(0, 720px);
justify-content: center;
gap: var(--s5);
}
.oan-task--stacked .oan-task__intro { max-width: none; }
.oan-task-form { display: grid; gap: var(--s4); }
.oan-task__side .oan-brief-form,
.oan-task__side .oan-agency-form {
max-width: none;
padding: var(--s6);
border-color: transparent;
box-shadow: var(--lift);
}
.oan-access {
display: grid;
gap: var(--s3);
justify-items: start;
padding: var(--s6);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-access .oan-access__title {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -.01em;
line-height: var(--lh-snug);
}
.oan-access p { margin: 0; color: var(--muted); line-height: var(--lh-base); }
.oan-access p strong { color: var(--text); }
.oan-access .oan-access__actions { margin-top: var(--s1); }
.oan-access .oan-access__note { font-size: var(--t-sm); }
.oan-access .oan-access__note a { color: var(--action); font-weight: 600; }
.oan-brief-form .oan-form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s4) var(--s5);
margin: 0 0 var(--s4);
}
.oan-brief-form .oan-form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oan-brief-form .oan-form-row > .oan-field { margin: 0; }
.oan-agency-form .oan-btn--primary {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
box-shadow: var(--glow-accent);
}
.oan-agency-form .oan-btn--primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: var(--on-accent);
}
.oan-brief-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: var(--s6);
align-items: start;
}
.oan-brief-form--steps {
max-width: none;
padding: var(--s6);
border-color: transparent;
box-shadow: var(--lift);
counter-reset: oan-step;
}
.oan-form-step {
display: grid;
gap: 0;
padding-top: var(--s5);
margin-top: var(--s5);
border-top: 1px solid var(--line);
}
.oan-form-step:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.oan-brief-form.oan-brief-form--steps .oan-form-step > h2 {
display: flex;
align-items: center;
gap: var(--s3);
margin: 0 0 var(--s4);
font-size: var(--t-lg);
}
.oan-brief-form--steps .oan-form-step > h2::before {
counter-increment: oan-step;
content: counter(oan-step);
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ink);
color: var(--on-dark);
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.oan-brief-form--steps fieldset { margin: 0 0 var(--s4); }
.oan-brief-form--steps fieldset:last-child { margin-bottom: 0; }
.oan-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
gap: var(--s1) var(--s4);
}
.oan-options .oan-check {
display: flex;
align-items: center;
gap: var(--s2);
min-height: 32px;
margin: 0;
font-size: var(--t-sm);
line-height: 1.3;
color: var(--text);
cursor: pointer;
}
.oan-options input[type="checkbox"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--action);
}
.oan-form-submit {
margin: var(--s6) 0 0;
padding-top: var(--s5);
border-top: 1px solid var(--line);
}
.oan-brief-aside {
position: sticky;
top: calc(var(--header-h) + var(--s6));
display: grid;
gap: var(--s4);
padding: var(--s5);
background: var(--ink);
color: var(--on-dark-2);
border-radius: var(--radius);
}
.oan-brief-aside h2 {
margin: 0;
font-size: var(--t-lg);
font-weight: 700;
letter-spacing: -.01em;
color: var(--on-dark);
}
.oan-brief-steps {
display: grid;
gap: var(--s4);
margin: 0;
padding: 0;
list-style: none;
counter-reset: oan-how;
}
.oan-brief-steps li {
position: relative;
min-height: 28px;
padding-left: 40px;
font-size: var(--t-sm);
line-height: var(--lh-base);
}
.oan-brief-steps li::before {
counter-increment: oan-how;
content: counter(oan-how);
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--surface);
color: var(--ink);
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.oan-brief-steps strong { display: block; color: var(--on-dark); }
.oan-brief-aside__note {
margin: 0;
padding-top: var(--s4);
border-top: 1px solid var(--line-dark);
font-size: var(--t-sm);
line-height: var(--lh-base);
}
.oan-brief-aside__note strong { color: var(--on-dark); }
.oan-table-wrap:has(> .oan-recent-briefs) { margin-bottom: var(--s6); }
#oan-project-respond .oan-brief-form {
max-width: var(--measure);
margin-top: var(--s4);
padding: 0;
background: none;
border: 0;
box-shadow: none;
}
.oan-checkout-page .pmpro.pmpro #pmpro_form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
grid-auto-flow: row dense;
gap: var(--s5) var(--s6);
align-items: start;
}
.oan-checkout-page .pmpro.pmpro #pmpro_form > * { grid-column: 1; margin: 0; }
.oan-checkout-page .pmpro.pmpro #pmpro_form > #pmpro_message { grid-column: 1 / -1; }
.oan-checkout-page .pmpro.pmpro #pmpro_form > #pmpro_pricing_fields {
grid-column: 2;
grid-row-end: span 5;
position: sticky;
top: calc(var(--header-h) + var(--s6));
box-shadow: var(--lift-lg);
}
.oan-checkout-page .pmpro.pmpro .pmpro_form_submit { padding-top: var(--s2); }
.oan-finder {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: var(--s3);
width: 100%;
max-width: 560px;
margin: 0;
}
.oan-finder .oan-finder__field,
.oan-finder .oan-finder__go { margin: 0; }
.oan-finder .oan-finder__go .oan-btn { min-height: 44px; }
.oan-finder__matches {
display: grid;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-finder__matches a { font-weight: 600; }
.oan-join-claim {
display: grid;
gap: var(--s3);
justify-items: start;
margin: 0 0 var(--s7);
padding: var(--s5) var(--s6);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-join-claim .oan-join-claim__title {
margin: 0;
font-size: var(--t-lg);
letter-spacing: -.01em;
}
.oan-join-claim p { margin: 0; max-width: var(--measure); }
.oan-checkout-page .pmpro.pmpro .pmpro_form_field-username { display: none; }
body.oan-doc-page:has(.oan-doc) { --wp--style--global--content-size: 1080px; }
.oan-doc {
display: grid;
grid-template-columns: minmax(0, var(--measure)) minmax(0, 248px);
grid-template-areas: "body toc";
justify-content: space-between;
gap: var(--s7);
align-items: start;
}
.oan-doc__body { grid-area: body; min-width: 0; }
.oan-doc__body h2[id] { scroll-margin-top: calc(var(--header-h) + var(--s7)); }
.oan-doc__toc {
grid-area: toc;
position: sticky;
top: calc(var(--header-h) + var(--s6));
display: grid;
gap: var(--s2);
padding: var(--s4);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-doc__toc-title {
margin: 0;
padding: 0 var(--s2);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.oan-doc__toc ol {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.oan-doc__toc a {
display: block;
padding: 6px var(--s2);
border-radius: 8px;
font-size: var(--t-sm);
line-height: 1.35;
color: var(--muted);
text-decoration: none;
}
.oan-doc__toc a:hover {
background: var(--surface-2);
color: var(--text);
text-decoration: none;
}
body.oan-wide .entry-content > p {
padding-inline-end: max(0px, calc(100% - var(--measure)));
}
.oan-pagehead.oan-pagehead--plugin {
padding: 0 0 var(--s5);
margin: 0;
}
body .oan-pagehead.oan-pagehead--plugin .oan-pagehead__inner { max-width: none; }
.tribe-events.tribe-events.tribe-events .tribe-events-calendar-list__event-row {
margin: 0 0 var(--s4);
padding: var(--s5) var(--s4);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
transition: box-shadow var(--dur) var(--ease);
}
.tribe-events.tribe-events.tribe-events .tribe-events-calendar-list__event-row:hover { box-shadow: var(--lift-lg); }
.tribe-events.tribe-events .tribe-events-calendar-list__event-title { font-size: var(--t-lg); line-height: var(--lh-snug); }
.tribe-events.tribe-events .tribe-events-calendar-list__event-description { max-width: var(--measure); }
.tribe-events.tribe-events .tribe-events-calendar-list__event-description p { font-size: var(--t-body-sm); }
.tribe-events.tribe-events .tribe-events-calendar-list__month-separator { margin: var(--s6) 0 var(--s4); }
.tribe-events-pg-template .tribe-events-single .tribe-events-schedule {
margin: 0 0 var(--s4);
color: var(--muted);
}
.tribe-events-pg-template .tribe-events-single .tribe-events-single-event-description {
max-width: var(--measure);
font-size: var(--t-md);
line-height: var(--lh-base);
}
.tribe-events-pg-template .tribe-events-single .tribe-events-visuallyhidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.tribe-events-pg-template .tribe-events-single.tribe-blocks-editor .tribe_events > :where(p, ul, ol, h2, h3, h4, blockquote) {
max-width: var(--measure);
font-size: var(--t-md);
line-height: var(--lh-base);
}
.tribe-events-pg-template .tribe-events-single .tribe-events-event-meta.primary {
flex: 1 1 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: var(--s5) var(--s6);
margin: var(--s6) 0;
padding: var(--s5) var(--s6);
background: var(--surface);
border: 0;
border-radius: var(--radius);
box-shadow: var(--lift);
}
.tribe-events-pg-template .tribe-events-single .tribe-events-event-meta.primary::before,
.tribe-events-pg-template .tribe-events-single .tribe-events-event-meta.primary::after { display: none; }
.tribe-events-pg-template .tribe-events-single .tribe-events-event-meta .tribe-events-meta-group {
float: none;
width: auto;
margin: 0;
padding: 0;
}
.tribe-events-pg-template .tribe-events-single .tribe-events-single-section-title {
margin: 0 0 var(--s3);
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--faint);
}
.tribe-events-pg-template .tribe-events-single .tribe-events-meta-group dl { margin: 0; }
.tribe-events-pg-template .tribe-events-single .tribe-events-meta-group dt {
margin: var(--s2) 0 0;
font-size: var(--t-sm);
font-weight: 600;
color: var(--muted);
}
.tribe-events-pg-template .tribe-events-single .tribe-events-meta-group dt:first-child { margin-top: 0; }
.tribe-events-pg-template .tribe-events-single .tribe-events-meta-group dd {
margin: 2px 0 0;
color: var(--text);
overflow-wrap: anywhere;
}
.oan-rate__inline-price { display: none; }
.oan-netbar,
.oan-browse,
.oan-picks,
.oan-evidence,
.oan-proof,
.oan-joinband,
.oan-reads {
max-width: var(--max);
margin-inline: auto;
min-width: 0;
}
.oan-evidence,
.oan-proof {
--band: var(--ink);
box-shadow: 0 0 0 100vmax var(--band);
clip-path: inset(0 -100vmax);
}
.oan-proof { --band: var(--brand-tint); }
.entry-content > .oan-evidence:has(+ .oan-proof) { margin-block-end: 0; }
.entry-content > .oan-pagehead.oan-pagehead--home { margin-block-end: var(--s7); }
.oan-homehead__band {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 420px);
grid-template-rows: auto auto;
column-gap: clamp(var(--s6), 5vw, var(--s8));
}
.oan-homehead__band::before {
content: "";
grid-area: 1 / 1 / 2 / -1;
z-index: -1;
border-image: linear-gradient(var(--ink), var(--ink)) fill 0 // 0 100vmax;
}
.oan-homehead__lead {
grid-area: 1 / 1;
align-self: center;
min-width: 0;
padding-block: var(--s8) var(--s7);
background-color: var(--ink);
background-clip: content-box;
color: var(--on-dark);
}
.oan-homehead__title {
max-width: 20ch;
margin: 0;
font-size: clamp(2.125rem, 1.35rem + 2.1vw, 3rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -.03em;
text-wrap: balance;
color: var(--on-dark);
}
.oan-homehead__title em {
font-style: normal;
color: var(--hero-em);
}
.oan-homehead__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin: 0 0 var(--s4);
padding: var(--s1) var(--s3) var(--s1) var(--s1);
border: 1px solid rgba(255, 255, 255, .28);
border-radius: var(--radius-pill);
font-size: var(--t-meta);
font-weight: 500;
color: var(--on-dark);
}
.oan-homehead__eyebrow b {
padding: 2px var(--s2);
border-radius: var(--radius-pill);
background: var(--brand-2);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink);
}
.oan-homehead__lede {
max-width: 34rem;
margin: var(--s4) 0 0;
font-size: var(--t-md);
line-height: 1.5;
color: var(--on-hero);
}
.oan-homehead__stats {
display: flex;
flex-wrap: wrap;
gap: var(--s4) 0;
margin: var(--s6) 0 0;
padding: 0;
}
.oan-homehead__stat {
display: flex;
flex-direction: column-reverse;
gap: var(--s1);
padding: 0 var(--s5);
}
.oan-homehead__stat:first-child { padding-left: 0; }
.oan-homehead__stat + .oan-homehead__stat { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }
.oan-homehead__stat dd {
margin: 0;
font-size: var(--t-xl);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: var(--on-dark);
}
.oan-homehead__stat dt {
margin: 0;
font-size: var(--t-meta);
font-weight: 600;
color: var(--on-dark-2);
}
.oan-find {
grid-area: 1 / 2 / 3 / 3;
align-self: start;
min-width: 0;
margin: var(--s7) 0 0;
padding: var(--s5);
background: var(--surface);
border-radius: var(--radius);
box-shadow: 0 2px 6px rgba(17, 34, 65, .06), 0 28px 56px -24px rgba(17, 34, 65, .4);
color: var(--text);
}
.oan-find__title {
margin: 0 0 var(--s4);
font-size: var(--t-lg);
font-weight: 700;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--ink);
}
.oan-find .oan-find__field { margin: 0 0 var(--s3); }
.oan-find .oan-find__field select { min-height: 48px; }
.oan-find__go { margin: var(--s4) 0 0; }
.oan-find__go .oan-btn {
width: 100%;
min-height: 52px;
font-size: var(--t-base);
}
.oan-find__readout {
display: flex;
justify-content: center;
align-items: baseline;
gap: var(--s2);
margin: var(--s3) 0 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-find__readout dt,
.oan-find__readout dd { margin: 0; }
.oan-find__readout dd {
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
transition: opacity var(--dur) var(--ease);
}
.oan-find__readout.is-loading dd { opacity: .5; }
.oan-homehead__under {
grid-area: 2 / 1;
align-self: start;
display: grid;
gap: var(--s3);
min-width: 0;
padding-top: var(--s5);
}
.oan-homehead__under .oan-popular { margin-top: 0; }
.oan-homehead__under .oan-popular__chip {
min-height: 36px;
padding: 0 var(--s4);
font-size: var(--t-sm);
}
.oan-homehead__note {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-homehead__note a {
font-weight: 600;
color: var(--action);
text-decoration: underline;
text-underline-offset: .2em;
}
.oan-homehead__note a:hover { color: var(--action-dark); }
.oan-homehead__ledger {
max-width: 560px;
margin-top: var(--s6);
}
.oan-homehead__ledger .oan-ledger { box-shadow: var(--lift); }
.oan-ledger {
display: flex;
flex-direction: column;
gap: var(--s4);
min-width: 0;
padding: var(--s5);
background: var(--surface);
border-radius: var(--radius);
box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55);
color: var(--text);
}
.oan-ledger__head {
display: grid;
gap: var(--s1);
}
.oan-ledger__title {
margin: 0;
font-size: var(--t-md);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: -.01em;
color: var(--ink);
}
.oan-ledger__sub {
margin: 0;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-ledger__list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.oan-ledger__row {
position: relative;
display: grid;
grid-template-columns: 18px 40px minmax(0, 1fr) auto;
align-items: center;
gap: var(--s3);
padding: var(--s3) var(--s2);
margin-inline: calc(var(--s2) * -1);
border-radius: var(--radius-sm);
transition: background-color var(--dur) var(--ease);
}
.oan-ledger__row + .oan-ledger__row::before {
content: "";
position: absolute;
top: 0;
right: var(--s2);
left: var(--s2);
height: 1px;
background: var(--line);
}
.oan-ledger__row:hover { background: var(--surface-2); }
.oan-ledger__rank {
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
color: var(--faint);
}
.oan-ledger__row:first-child .oan-ledger__rank { color: var(--action); }
.oan-ledger__logo {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
object-fit: contain;
}
span.oan-ledger__logo {
display: grid;
place-items: center;
background: var(--brand);
font-size: var(--t-sm);
font-weight: 700;
color: var(--on-dark);
}
.oan-ledger__who {
display: grid;
min-width: 0;
}
.oan-ledger__name {
overflow: hidden;
font-weight: 600;
line-height: var(--lh-snug);
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
color: var(--ink);
}
.oan-ledger__name:hover { color: var(--action); }
.oan-ledger__name::after {
content: "";
position: absolute;
inset: 0;
}
.oan-ledger__place {
overflow: hidden;
font-size: var(--t-sm);
line-height: var(--lh-snug);
white-space: nowrap;
text-overflow: ellipsis;
color: var(--muted);
}
.oan-ledger__score {
display: inline-grid;
place-items: center;
min-width: 44px;
height: 36px;
padding: 0 var(--s2);
border-radius: var(--radius-sm);
background: var(--score-tint);
font-size: var(--t-md);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--score-ink);
}
.oan-ledger__foot {
margin: 0;
padding-top: var(--s3);
border-top: 1px solid var(--line);
font-size: var(--t-sm);
font-weight: 600;
}
.oan-ledger__foot a { color: var(--action); text-decoration: none; }
.oan-ledger__foot a:hover { color: var(--action-dark); text-decoration: underline; }
.oan-netbar {
display: grid;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
align-items: center;
gap: var(--s6);
padding: var(--s5) var(--s6);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-netbar__title {
margin: 0;
max-width: 30ch;
font-size: var(--t-lg);
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: -.015em;
color: var(--ink);
}
.oan-netbar__list {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-netbar__link {
display: grid;
grid-template-columns: 40px auto;
grid-template-rows: auto auto;
align-items: center;
justify-content: start;
column-gap: var(--s3);
padding: var(--s2);
border-radius: var(--radius-sm);
text-decoration: none;
transition: background-color var(--dur) var(--ease);
}
.oan-netbar__link:hover { background: var(--surface-2); }
.oan-netbar__icon {
grid-row: 1 / span 2;
box-sizing: border-box;
width: 40px;
height: 40px;
padding: 9px;
border-radius: var(--radius-sm);
background: var(--brand-tint);
color: var(--action);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-netbar__link:hover .oan-netbar__icon {
background: var(--action);
color: var(--on-brand);
}
.oan-netbar__n {
font-size: var(--t-lg);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
letter-spacing: -.02em;
color: var(--ink);
}
.oan-netbar__label {
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-netbar__link:hover .oan-netbar__label { color: var(--action); }
.oan-browse {
display: flex;
flex-direction: column;
gap: var(--s5);
}
.oan-browse__services {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s4);
min-width: 0;
}
.oan-browse__services .oan-facet--row {
grid-template-columns: 48px minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
gap: var(--s2) var(--s4);
padding: var(--s5);
border-color: transparent;
box-shadow: var(--lift);
}
.oan-browse__services .oan-facet--row:hover { box-shadow: var(--lift-lg); }
.oan-browse__services .oan-facet--row > .oan-facet__mark {
grid-row: 1 / -1;
width: 48px;
height: 48px;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-browse__services .oan-facet--row:hover > .oan-facet__mark {
background: var(--action);
color: var(--on-brand);
}
.oan-facet__mark--icon .oan-icon {
width: 24px;
height: 24px;
}
.oan-browse__services .oan-facet--row .oan-facet__stats {
display: flex;
flex-wrap: wrap;
gap: 2px var(--s4);
}
.oan-browse__services .oan-facet--row .oan-facet__go { align-self: end; }
.oan-browse__atlas {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s7);
padding: var(--s6);
background: var(--brand-tint);
border-radius: var(--radius);
}
.oan-browse__index {
display: grid;
align-content: start;
gap: var(--s2);
min-width: 0;
}
.oan-browse__title {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.oan-browse__list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.oan-browse__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
min-height: 40px;
margin-inline: calc(var(--s2) * -1);
padding: 0 var(--s2);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text);
transition: background-color var(--dur) var(--ease);
}
.oan-browse__link:hover { background: var(--surface); color: var(--action); }
.oan-browse__name {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.oan-browse__n {
flex: none;
min-width: 28px;
padding: 2px var(--s2);
border-radius: var(--radius-pill);
background: var(--surface);
font-size: var(--t-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: center;
color: var(--muted);
}
.oan-browse__link:hover .oan-browse__n {
background: var(--action);
color: var(--on-brand);
}
.oan-picks {
display: flex;
flex-direction: column;
gap: var(--s5);
}
.oan-evidence {
padding-block: var(--s8);
background-color: var(--ink);
color: var(--on-dark-2);
}
.oan-evidence__inner {
display: grid;
gap: var(--s7);
}
.oan-evidence__row {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: var(--s8);
}
.oan-evidence__row + .oan-evidence__row {
padding-top: var(--s7);
border-top: 1px solid var(--line-dark);
}
.oan-evidence__row--score { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.oan-evidence__lead {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s4);
min-width: 0;
}
.oan-evidence .oan-eyebrow { color: var(--brand-on-dark); }
.oan-evidence__title {
margin: 0;
max-width: 20ch;
font-size: 2.125rem;
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: -.025em;
color: var(--on-dark);
}
.oan-evidence__sub {
margin: 0;
max-width: 48ch;
font-size: var(--t-md);
line-height: var(--lh-base);
color: var(--on-dark-2);
}
.oan-evidence__act { margin: var(--s3) 0 0; }
.oan-evidence .oan-gates { min-width: 0; }
.oan-evidence .oan-gates .oan-gates__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--s6);
margin: var(--s4) 0;
padding: 0;
}
.oan-evidence .oan-gate,
.oan-evidence .oan-gate:last-child {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: start;
align-items: start;
gap: var(--s2);
padding: var(--s4) 0 var(--s5);
border: 0;
border-top: 1px solid var(--line-dark);
border-radius: 0;
}
.oan-evidence .oan-gate__n {
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--brand-on-dark);
}
.oan-evidence .oan-gate__t {
font-size: var(--t-md);
font-weight: 600;
line-height: var(--lh-snug);
color: var(--on-dark);
}
.oan-evidence .oan-gates__foot { margin: 0; }
.oan-evidence .oan-evidence__act .oan-btn--primary {
background: var(--surface);
border-color: var(--surface);
color: var(--ink);
box-shadow: none;
}
.oan-evidence .oan-evidence__act .oan-btn--primary:hover {
background: var(--brand-tint);
border-color: var(--brand-tint);
}
.oan-evidence__lead :where(a, button, [tabindex]):focus-visible { outline-color: var(--brand-on-dark); }
.oan-evidence .oan-scorecard__figure {
width: 100%;
max-width: 460px;
margin-top: var(--s3);
}
.oan-evidence .oan-scorecard__big { color: var(--on-dark); }
.oan-evidence .oan-scorecard__of { color: var(--on-dark-3); }
.oan-evidence .oan-scorecard__cap { color: var(--on-dark-2); }
.oan-evidence .oan-scorecard__dist .is-bin { fill: var(--brand-on-dark); }
.oan-evidence .oan-scorecard__dist .is-median { fill: var(--on-dark); }
.oan-evidence .oan-scorecard__dist .is-empty { fill: rgba(255, 255, 255, .16); }
.oan-evidence .oan-scorecard__axis { stroke: rgba(255, 255, 255, .28); }
.oan-evidence .oan-scorecard__scale { color: var(--on-dark-3); }
.oan-evidence .oan-scorecard__key i { background: var(--on-dark); }
.oan-evidence .oan-scorecard {
box-shadow: 0 32px 64px -32px rgba(0, 0, 0, .7);
}
.oan-proof {
padding-block: var(--s8);
background: var(--brand-tint);
}
.oan-proof__inner {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-rows: auto 1fr auto;
column-gap: var(--s7);
}
.oan-proof__voices,
.oan-proof__briefs {
display: grid;
grid-row: 1 / span 3;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
row-gap: var(--s5);
min-width: 0;
}
.oan-proof__voices > *,
.oan-proof__briefs > * { grid-column: 1 / -1; }
.oan-proof .oan-home-head { align-items: flex-start; }
.oan-proof__inner > :only-child { grid-column: 1 / -1; }
.oan-proof .oan-home-head__title { font-size: var(--t-xl); }
.oan-proof__quotes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: var(--s4);
}
.oan-proof__quotes > :first-child { grid-column: 1 / -1; }
.oan-proof__quotes > :first-child blockquote { font-size: var(--t-xl); line-height: 1.3; letter-spacing: -.01em; }
.oan-proof__quotes > :not(:first-child) blockquote { font-size: var(--t-md); }
.oan-proof .oan-quote {
position: relative;
border-color: transparent;
box-shadow: var(--lift);
}
.oan-proof__quotes > :first-child blockquote { padding-right: 3.5rem; }
.oan-proof__quotes > :first-child::before {
content: "\201C" / "";
position: absolute;
top: -6px;
right: var(--s5);
font-size: 8rem;
font-weight: 700;
line-height: 1;
color: var(--brand);
opacity: .14;
pointer-events: none;
}
.oan-proof .oan-briefs {
grid-template-columns: minmax(0, 1fr);
align-content: start;
gap: var(--s4);
}
.oan-proof .oan-brief {
gap: var(--s3);
border-color: transparent;
box-shadow: var(--lift);
}
.oan-proof .oan-brief__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3) var(--s5);
}
.oan-proof .oan-brief__fact {
display: grid;
gap: 2px;
}
.oan-proof .oan-brief__fact dt {
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--faint);
}
.oan-proof .oan-brief__fact dd { text-align: left; }
.oan-proof .oan-brief__go a,
.oan-proof__more a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
font-weight: 700;
text-decoration: none;
color: var(--action);
}
.oan-proof .oan-brief__go a:hover,
.oan-proof__more a:hover { color: var(--action-dark); text-decoration: underline; text-underline-offset: .2em; }
.oan-proof__more {
margin: 0;
font-size: var(--t-base);
}
.oan-joinband {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: stretch;
gap: var(--s7);
}
.oan-joinband__pitch {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--s6);
min-width: 0;
}
.oan-joinband .oan-benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s5) var(--s6);
}
.oan-joinband .oan-benefit {
align-content: start;
row-gap: 2px;
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.oan-joinband .oan-joinband__plans {
position: relative;
isolation: isolate;
overflow: hidden;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--s6);
padding: var(--s7);
background: var(--ink);
border: 0;
border-radius: var(--radius-lg);
}
.oan-joinband__label {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--on-hero);
}
.oan-joinband__plans .oan-home-join__stats .oan-stat dd {
font-size: var(--t-2xl);
letter-spacing: -.03em;
}
.oan-joinband__plans .oan-home-join__stats .oan-stat dt { color: var(--on-hero-2); }
.oan-joinband__plans .oan-btn--secondary {
background: none;
border-color: rgba(255, 255, 255, .7);
color: var(--on-dark);
}
.oan-joinband__plans .oan-btn--secondary:hover { border-color: var(--on-dark); }
.oan-reads {
display: flex;
flex-direction: column;
gap: var(--s5);
}
.oan-reads .oan-insights {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--s5);
}
.oan-reads .oan-insight {
border-color: transparent;
box-shadow: var(--lift);
}
.oan-reads .oan-insight:first-child { grid-row: span 2; }
.oan-reads .oan-insight__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.oan-reads .oan-insight:first-child .oan-insight__media { flex: 0 0 auto; }
.oan-reads .oan-insight__media > :is(svg, img) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
.oan-reads .oan-insight:first-child .oan-insight__title { font-size: var(--t-xl); letter-spacing: -.015em; }
.oan-reads .oan-insight:not(:first-child) {
display: grid;
grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
align-items: center;
}
.oan-reads .oan-insight:not(:first-child) .oan-insight__media {
margin: var(--s5) 0 var(--s5) var(--s5);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.oan-reads .oan-insight:not(:first-child) .oan-insight__body { padding: var(--s5); }
.oan-reads .oan-insight:not(:first-child) .oan-insight__sum {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.oan-reads .oan-insight:not(:first-child):not(:has(.oan-insight__media)) { grid-template-columns: minmax(0, 1fr); }
.oan-reads .oan-insights:not(:has(.oan-insight__media)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oan-reads .oan-insights:not(:has(.oan-insight__media)) .oan-insight:first-child { grid-row: auto; }
.oan-reads .oan-insights:not(:has(.oan-insight__media)) .oan-insight .oan-insight__title {
font-size: var(--t-lg);
letter-spacing: -.01em;
}
.oan-reads .oan-insights:not(:has(.oan-insight__media)) .oan-insight .oan-insight__body { padding: var(--s5); }
.oan-reads .oan-insights:not(:has(.oan-insight__media)) .oan-insight .oan-insight__sum {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.oan-endcta { padding-inline: 0; }
.entry-content > .oan-endcta:last-child { margin-block-end: 0; }
.oan-endcta__inner {
position: relative;
isolation: isolate;
overflow: hidden;
padding: var(--s7);
background: var(--ink);
border-radius: var(--radius-lg);
}
.oan-endcta .oan-endcta__chip {
background: rgba(17, 34, 65, .28);
border-color: rgba(255, 255, 255, .28);
color: var(--on-dark);
}
.oan-endcta .oan-endcta__sub { color: var(--on-hero); }
.oan-endcta .oan-endcta__acts .oan-btn--primary {
background: var(--surface);
border-color: var(--surface);
color: var(--ink);
box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55);
}
.oan-endcta .oan-endcta__acts .oan-btn--primary:hover {
background: var(--brand-tint);
border-color: var(--brand-tint);
color: var(--ink);
}
.oan-endcta .oan-endcta__acts .oan-btn--secondary { border-color: rgba(255, 255, 255, .7); }
.oan-pagehead.oan-pagehead:not(.oan-pagehead--home, .oan-pagehead--account, .oan-pagehead--plugin) { margin-block-end: var(--s6); }
.oan-pagehead .oan-pagehead__band {
--hang: 0px;
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
.oan-pagehead .oan-pagehead__band--split {
--hang: var(--s6);
grid-template-columns: minmax(0, 1fr) clamp(320px, 36%, 400px);
grid-template-rows: auto var(--hang);
column-gap: clamp(var(--s6), 5vw, var(--s8));
}
.oan-pagehead .oan-pagehead__band::before {
content: "";
grid-area: 1 / 1 / 2 / -1;
z-index: -1;
border-image: linear-gradient(var(--ink), var(--ink)) fill 0 // 0 100vmax;
}
.oan-pagehead .oan-pagehead__lead {
grid-area: 1 / 1;
align-self: start;
min-width: 0;
padding-block: var(--s6) var(--s7);
background-color: var(--ink);
background-clip: content-box;
color: var(--on-dark);
}
.oan-pagehead .oan-pagehead__lead > :last-child { margin-bottom: 0; }
.oan-pagehead .oan-pagehead__route {
margin: 0 0 var(--s3);
font-size: var(--t-meta);
font-weight: 600;
line-height: 1.5;
color: var(--on-dark-2);
}
.oan-pagehead .oan-pagehead__route a { color: var(--on-dark-2); }
.oan-pagehead .oan-pagehead__route a:hover {
color: var(--on-dark);
text-decoration: underline;
text-underline-offset: .2em;
}
.oan-pagehead .oan-pagehead__route [aria-current="page"] { color: var(--on-dark); }
.oan-pagehead .oan-pagehead__route li[aria-current="page"] {
display: block;
max-width: min(34ch, 100%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.oan-pagehead .oan-pagehead__title {
max-width: 26ch;
margin: 0 0 var(--s3);
font-size: clamp(1.875rem, 1.35rem + 1.5vw, 2.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.022em;
text-wrap: balance;
color: var(--on-dark);
}
.oan-pagehead .oan-pagehead__statement,
.oan-pagehead .oan-citable {
max-width: 62ch;
margin: 0 0 var(--s3);
font-size: var(--t-md);
line-height: 1.5;
color: var(--on-hero);
}
.oan-pagehead .oan-pagehead__statement strong,
.oan-pagehead .oan-citable strong { color: var(--on-dark); font-weight: 700; }
.oan-pagehead .oan-pagehead__statement a,
.oan-pagehead .oan-citable a {
color: var(--brand-on-dark);
text-decoration: underline;
text-underline-offset: .15em;
}
.oan-pagehead .oan-pagehead__lead .oan-byline,
.oan-pagehead .oan-pagehead__lead .oan-byline__sep { color: var(--on-hero-2); }
.oan-pagehead .oan-pagehead__lead .oan-byline strong { color: var(--on-dark); }
.oan-pagehead .oan-pagehead__lead .oan-byline a {
white-space: nowrap;
color: var(--on-dark);
text-decoration: underline;
text-underline-offset: .2em;
}
.oan-pagehead .oan-pagehead__cta-block {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s3) var(--s4);
margin-top: var(--s5);
}
.oan-pagehead .oan-pagehead__cta-block .oan-btn {
min-width: 168px;
min-height: 48px;
font-size: var(--t-base);
}
.oan-pagehead .oan-pagehead__lead .oan-pagehead__cta-note {
max-width: 36ch;
margin: 0;
font-size: var(--t-sm);
line-height: 1.45;
color: var(--on-hero-2);
}
.oan-pagehead .oan-pagehead__lead > .oan-pagehead__cta-note { max-width: 62ch; }
.oan-pagehead .oan-pagehead__lead .oan-pagehead__cta-note a,
.oan-pagehead .oan-pagehead__lead .oan-pagehead__alt a { color: var(--on-dark); }
.oan-pagehead .oan-pagehead__lead .oan-pagehead__alt,
.oan-pagehead .oan-pagehead__lead .oan-job__meta { color: var(--on-hero-2); }
.oan-pagehead .oan-pagehead__lead .oan-profile__logo { border-color: transparent; }
.oan-pagehead .oan-pagehead__lead .oan-profile__tagline { color: var(--on-hero); }
.oan-pagehead .oan-pagehead__card {
grid-area: 1 / 2 / 3 / 3;
align-self: end;
min-width: 0;
margin-top: var(--s6);
padding: var(--s5);
background: var(--surface);
border-radius: var(--radius);
box-shadow: 0 2px 6px rgba(17, 34, 65, .06), 0 28px 56px -24px rgba(17, 34, 65, .4);
color: var(--text);
}
.oan-pagehead .oan-pagehead__eyebrow {
margin: 0;
font-size: var(--t-xs);
font-weight: 700;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--faint);
}
.oan-pagehead .oan-glance__title {
margin: var(--s1) 0 0;
font-size: 1.375rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.012em;
color: var(--ink);
}
.oan-pagehead .oan-pagehead__facts {
display: grid;
margin: var(--s2) 0 0;
padding: 0;
}
.oan-pagehead .oan-pagehead__fact {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s4);
min-width: 0;
padding: var(--s3) 0;
}
.oan-pagehead .oan-pagehead__fact + .oan-pagehead__fact { border-top: 1px solid var(--line); }
.oan-pagehead .oan-pagehead__fact:last-child { padding-bottom: 0; }
.oan-pagehead .oan-pagehead__fact dt {
flex: none;
margin: 0;
font-size: var(--t-sm);
font-weight: 600;
color: var(--faint);
}
.oan-pagehead .oan-pagehead__fact dd {
min-width: 0;
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
line-height: var(--lh-snug);
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
text-align: right;
overflow-wrap: anywhere;
color: var(--ink);
}
.oan-pagehead .oan-pagehead__fact--text dd {
font-weight: 600;
letter-spacing: 0;
}
.oan-pagehead .oan-glance__label {
margin: var(--s4) 0 0;
font-size: var(--t-sm);
font-weight: 600;
color: var(--faint);
}
.oan-pagehead .oan-glance__rows {
display: grid;
gap: 2px;
margin: var(--s1) 0 0;
padding: 0;
list-style: none;
}
.oan-pagehead .oan-glance__row {
display: grid;
grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto;
align-items: center;
gap: var(--s3);
min-height: 28px;
font-size: var(--t-sm);
font-weight: 600;
color: var(--text);
text-decoration: none;
}
.oan-pagehead .oan-glance__row:hover { color: var(--action); }
.oan-pagehead .oan-glance__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.oan-pagehead .oan-glance__bar {
display: block;
height: 8px;
border-radius: 4px;
background: var(--surface-2);
}
.oan-pagehead .oan-glance__bar > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--action);
}
.oan-pagehead .oan-glance__n {
min-width: 1.5ch;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--ink);
}
.oan-pagehead .oan-glance__rows--flat {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s2);
}
.oan-pagehead .oan-glance__rows--flat .oan-glance__row {
display: inline-flex;
gap: var(--s2);
min-height: 32px;
padding: 0 var(--s3);
border-radius: var(--radius-pill);
background: var(--surface-2);
}
.oan-pagehead .oan-glance__rows--flat .oan-glance__bar { display: none; }
.oan-pagehead .oan-glance__rows--flat .oan-glance__n { color: var(--muted); }
.oan-pagehead .oan-pagehead__card-foot {
margin-top: var(--s4);
padding-top: var(--s3);
border-top: 1px solid var(--line);
}
.oan-pagehead .oan-pagehead__card-foot .oan-byline {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px var(--s3);
font-size: var(--t-meta);
line-height: 1.5;
color: var(--muted);
}
.oan-pagehead .oan-pagehead__card-foot .oan-byline > span:first-child { grid-column: 1 / -1; }
.oan-pagehead .oan-pagehead__card-foot .oan-byline__sep { display: none; }
.oan-pagehead .oan-pagehead__card-foot .oan-byline strong { font-weight: 600; color: var(--text); }
.oan-pagehead .oan-pagehead__card-foot .oan-byline a {
font-weight: 600;
white-space: nowrap;
color: var(--action);
text-decoration: none;
}
.oan-pagehead .oan-pagehead__card-foot .oan-byline a::after { content: " \2192"; }
.oan-pagehead .oan-pagehead__card-foot .oan-byline a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-pagehead .oan-pagehead__actions {
display: grid;
gap: var(--s2);
}
.oan-pagehead .oan-pagehead__actions .oan-btn {
width: 100%;
min-height: 48px;
font-size: var(--t-base);
}
.oan-pagehead .oan-pagehead__actions .oan-btn.oan-btn--secondary { border-color: var(--line-2); }
.oan-pagehead .oan-pagehead__actions .oan-pagehead__cta-note {
margin: 0 0 var(--s2);
font-size: var(--t-meta);
line-height: 1.45;
text-align: center;
color: var(--faint);
}
.oan-pagehead .oan-pagehead__actions + .oan-pagehead__eyebrow {
margin-top: var(--s4);
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.oan-pagehead .oan-pagehead__actions:has(> .oan-pagehead__claim) + .oan-pagehead__eyebrow {
padding-top: 0;
border-top: 0;
}
.tribe-common .tribe-events-l-container:has(> .tribe-events-before-html > .oan-pagehead) { padding-top: 0; }
.wp-site-blocks .tec-block__archive-events:has(.oan-pagehead) { margin-top: 0; }
.wp-site-blocks .tec-block__single-event:has(.oan-pagehead) { margin-top: 0; }
#tribe-events-pg-template:has(> .oan-pagehead:first-child) { padding-top: 0; }
.oan-pagehead.oan-pagehead--account { margin-block-end: 0; }
.oan-pagehead--account .oan-pagehead__lead { padding-block: var(--s5) var(--s6); }
.oan-pagehead--account .oan-pagehead__title { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
body.oan-doc-page .oan-doc__toc { margin-top: calc(-1 * (var(--s6) + var(--s7))); }
.oan-method {
grid-template-columns: 48px minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-areas:
"icon head note"
"icon text note";
align-items: start;
gap: var(--s2) var(--s5);
margin-block: 0 var(--section);
padding: var(--s6);
background: var(--brand-tint);
border-radius: var(--radius);
}
.oan-method__toggle { display: none; }
.oan-method h2 label { cursor: inherit; }
.oan-method > .oan-method__icon {
grid-area: icon;
box-sizing: border-box;
width: 48px;
height: 48px;
padding: 12px;
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--action);
}
.oan-method h2 {
grid-area: head;
font-size: var(--t-md);
letter-spacing: -.01em;
text-transform: none;
color: var(--ink);
}
.oan-method > p:not(.oan-method__note) {
grid-area: text;
margin: 0;
color: var(--muted);
}
.oan-method > .oan-method__note {
grid-area: note;
align-self: stretch;
max-width: none;
margin: 0;
padding: var(--s5);
background: var(--surface);
border: 0;
border-radius: var(--radius-sm);
color: var(--muted);
}
.oan-bento > .oan-tile:has(> .oan-prose):has(+ .oan-tile > .oan-faq),
.oan-bento > .oan-tile:has(> .oan-prose) + .oan-tile:has(> .oan-faq) { grid-column: span 6; }
.oan-links {
gap: var(--s4);
padding: var(--s6);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
:is(main, .entry-content, .wp-site-blocks) > .oan-links:has(+ .oan-links) {
margin-block-end: 0;
border-end-start-radius: 0;
border-end-end-radius: 0;
}
:is(main, .entry-content, .wp-site-blocks) > .oan-links + .oan-links {
border-top: 1px solid var(--line);
border-start-start-radius: 0;
border-start-end-radius: 0;
clip-path: inset(0 -80px -80px -80px);
}
.oan-links > h2 {
font-size: var(--t-lg);
letter-spacing: -.01em;
}
.oan-links ul {
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
gap: 0 var(--s6);
}
.oan-links li {
align-items: center;
justify-content: space-between;
min-height: 48px;
border-top: 1px solid var(--line);
}
.oan-links li > a {
flex: 1 1 auto;
padding-block: var(--s2);
font-weight: 600;
text-decoration: none;
color: var(--text);
}
.oan-links li > a:hover {
color: var(--action);
text-decoration: underline;
text-underline-offset: .2em;
}
.oan-links .oan-count {
flex: none;
min-width: 28px;
padding: 2px var(--s2);
border-radius: var(--radius-pill);
background: var(--surface-2);
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: center;
color: var(--muted);
}
.oan-cta { gap: var(--s5); }
.oan-cta__panel {
position: relative;
isolation: isolate;
overflow: hidden;
padding: var(--s7) var(--s6);
border-color: transparent;
box-shadow: var(--lift);
}
.oan-cta__panel h2 { font-size: var(--t-xl); letter-spacing: -.015em; }
.oan-cta .oan-cta__panel:first-child {
background: var(--ink);
border-color: transparent;
}
.oan-cta .oan-cta__panel:first-child p { color: var(--on-hero); }
.oan-cta__icon {
box-sizing: border-box;
width: 48px;
height: 48px;
padding: 12px;
border-radius: var(--radius-sm);
background: var(--brand-tint);
color: var(--action);
}
.oan-cta__panel:first-child .oan-cta__icon {
background: rgba(255, 255, 255, .12);
color: var(--on-dark);
}
.oan-doc {
grid-template-columns: minmax(0, calc(var(--measure) + 2 * var(--s7))) minmax(0, 248px);
gap: var(--s6);
}
.oan-doc__body {
padding: var(--s7);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--lift);
}
.oan-doc__body > :first-child { margin-top: 0; }
.oan-doc__body > :last-child { margin-bottom: 0; }
.oan-doc__toc a[aria-current="location"] {
background: var(--brand-tint);
font-weight: 600;
color: var(--action);
}
.oan-doc__body > h2:not(:first-child) {
margin-top: var(--s7);
padding-top: var(--s6);
border-top: 1px solid var(--line);
}
.oan-gates--panel .oan-gates__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s3);
margin: var(--s4) 0;
padding: 0;
}
.oan-gates--panel .oan-gate,
.oan-gates--panel .oan-gate:last-child {
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
gap: var(--s3);
padding: var(--s4);
background: var(--brand-tint);
border: 0;
border-radius: var(--radius-sm);
}
.oan-gates--panel .oan-gate__n {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface);
font-size: var(--t-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--action);
}
.oan-gates--panel .oan-gate__t {
font-weight: 600;
line-height: var(--lh-snug);
color: var(--ink);
}
.oan-profile-main > .entry-content,
.oan-profile-main > .oan-expertise,
.oan-profile-main > .oan-features {
padding: var(--s6);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-profile-main > .entry-content > :first-child,
.oan-profile-main > .oan-expertise > :first-child,
.oan-profile-main > .oan-features > :first-child { margin-top: 0; }
.oan-profile-main > .entry-content > :last-child,
.oan-profile-main > .oan-expertise > :last-child,
.oan-profile-main > .oan-features > :last-child { margin-bottom: 0; }
.oan-profile-main > :first-child > .oan-sec-head:first-child {
padding-top: 0;
border-top: 0;
}
.oan-pagehead--profile .oan-pagehead__lead:has(> .oan-profile__identity) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--s5);
}
.oan-pagehead--profile .oan-pagehead__lead:has(> .oan-profile__identity) > * { grid-column: 1 / -1; }
.oan-pagehead--profile .oan-pagehead__lead > .oan-profile__identity { display: contents; }
.oan-pagehead--profile .oan-pagehead__lead > .oan-profile__identity > .oan-profile__logo {
grid-column: 1;
grid-row: 2 / span 2;
align-self: start;
}
.oan-pagehead--profile .oan-pagehead__lead:has(> .oan-profile__identity) > .oan-pagehead__title {
grid-column: 2;
grid-row: 2;
margin-bottom: var(--s2);
}
.oan-pagehead--profile .oan-pagehead__lead > .oan-profile__identity > .oan-profile__meta {
grid-column: 2;
grid-row: 3;
margin-bottom: var(--s4);
}
.oan-pagehead .oan-pagehead__band--bar {
--hang: var(--s6);
grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 340px);
grid-template-rows: auto auto var(--hang);
column-gap: clamp(var(--s6), 5vw, var(--s8));
}
.oan-pagehead .oan-pagehead__band--bar::before { grid-area: 1 / 1 / 3 / -1; }
.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__lead { padding-bottom: var(--s6); }
.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__side {
grid-area: 1 / 2;
align-self: start;
min-width: 0;
padding-block: calc(var(--s6) + var(--s6)) var(--s6);
background-color: var(--ink);
background-clip: content-box;
color: var(--on-dark);
}
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--secondary {
background: transparent;
border-color: rgba(255, 255, 255, .5);
color: var(--on-dark);
box-shadow: none;
}
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--secondary:hover {
background: rgba(255, 255, 255, .1);
border-color: var(--on-dark);
color: var(--on-dark);
}
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions .oan-btn:focus-visible { outline-color: var(--brand-on-dark); }
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions .oan-pagehead__cta-note { color: var(--on-hero-2); }
.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__card {
grid-area: 2 / 1 / 4 / -1;
align-self: start;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--s5);
margin-top: 0;
padding: var(--s4) var(--s5);
}
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__facts {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
row-gap: var(--s3);
margin: 0;
}
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__fact,
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__fact:last-child {
display: grid;
align-content: start;
gap: 2px;
padding: var(--s1) var(--s5);
border-left: 1px solid var(--line);
}
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__fact + .oan-pagehead__fact { border-top: 0; }
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__fact dt { font-size: var(--t-meta); }
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__fact dd { text-align: left; }
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__card-foot {
margin: 0;
padding: var(--s1) 0 var(--s1) var(--s5);
border-top: 0;
border-left: 1px solid var(--line);
}
.oan-pagehead .oan-pagehead__claim {
margin: 0;
font-size: var(--t-sm);
line-height: 1.4;
color: var(--faint);
}
.oan-pagehead .oan-pagehead__claim a {
display: block;
font-weight: 700;
color: var(--action);
text-decoration: none;
}
.oan-pagehead .oan-pagehead__claim a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-profile-main .oan-featured .oan-cards:has(> .oan-case:only-child) { grid-template-columns: minmax(0, 1fr); }
.oan-profile-main .oan-featured .oan-cards > .oan-case:only-child {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-auto-flow: dense;
column-gap: var(--s6);
align-items: start;
}
.oan-profile-main .oan-featured .oan-cards > .oan-case:only-child > .oan-card__media {
grid-column: 1;
grid-row: 1 / span 6;
align-self: stretch;
height: 100%;
min-height: 260px;
margin: 0;
}
.oan-profile-main .oan-featured .oan-cards > .oan-case:only-child > :not(.oan-card__media) { grid-column: 2; }
.oan-bento > .oan-tile:has(> .oan-editorial) {
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.oan-editorial { gap: var(--s5); align-items: start; }
.oan-editorial__col {
display: grid;
gap: var(--s5);
align-content: start;
min-width: 0;
}
.oan-editorial__body { overflow-wrap: anywhere; }
.oan-editorial__body :is(ul, ol) {
display: grid;
gap: var(--s2);
margin: 0;
padding-left: var(--s5);
}
.oan-editorial__body :is(img, video, iframe) { max-width: 100%; height: auto; }
.oan-editorial__body table {
display: block;
max-width: 100%;
overflow-x: auto;
}
.oan-editorial .oan-editorial__section {
align-content: start;
gap: var(--s4);
padding: var(--s6);
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-editorial .oan-editorial__section h2,
.oan-bento > .oan-tile > .oan-faq > h2,
.oan-bento > .oan-tile > .oan-prose > h2:first-child {
margin-top: 0;
font-size: var(--t-xl);
line-height: 1.2;
letter-spacing: -.015em;
}
.oan-cta .oan-cta__panel:first-child :where(a, button, [tabindex]):focus-visible,
.oan-endcta.oan-endcta :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--on-dark); }
.oan-pagehead__lead form.oan-search input[type="search"]:focus-visible {
border-color: var(--brand-on-dark);
outline: 2px solid var(--brand-on-dark);
outline-offset: 2px;
}
.oan-pagehead__lead form.oan-search button[type="submit"]:focus-visible { outline-color: var(--brand-on-dark); }
.oan-pagehead .oan-pagehead__title,
.oan-pagehead .oan-profile__tagline,
.oan-faq__item h3,
.oan-faq__item p,
.oan-links li > a,
.oan-editorial__section h2,
.oan-editorial__list li { overflow-wrap: anywhere; }
.oan-more__toggle {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}
.oan-more__rest,
.oan-editorial__list.oan-more__rest { display: none; }
.oan-more__toggle:checked + .oan-more__rest { display: block; }
.oan-editorial__body > .oan-more__toggle:checked + .oan-more__rest,
.oan-more__toggle:checked + .oan-editorial__list.oan-more__rest { display: grid; }
.oan-editorial__body > .oan-more__rest { gap: var(--s3); }
.oan-more__label {
display: inline-flex;
justify-self: start;
align-self: start;
align-items: center;
gap: var(--s2);
min-height: 44px;
font-size: var(--t-base);
font-weight: 700;
color: var(--action);
cursor: pointer;
}
.oan-more__label:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-more__label::after {
content: "";
flex: none;
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur) var(--ease);
}
.oan-more__toggle:checked ~ .oan-more__label::after { transform: translateY(2px) rotate(-135deg); }
.oan-more__close,
.oan-more__toggle:checked ~ .oan-more__label > .oan-more__open { display: none; }
.oan-more__toggle:checked ~ .oan-more__label > .oan-more__close { display: inline; }
.oan-more__toggle:focus-visible ~ .oan-more__label {
outline: 2px solid var(--action);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.oan-bento > .oan-tile:has(> .oan-prose):has(+ .oan-tile > .oan-faq),
.oan-bento > .oan-tile:has(> .oan-prose) + .oan-tile:has(> .oan-faq) { align-self: start; }
.oan-tray {
position: fixed;
inset: auto 0 0 0;
z-index: 60;
background: var(--ink);
box-shadow: 0 -12px 32px -12px rgba(17, 34, 65, .35);
color: var(--on-dark);
animation: oan-tray-in var(--dur, .2s) ease-out;
}
.oan-tray[hidden] { display: none; }
@keyframes oan-tray-in {
from { transform: translateY(100%); }
to { transform: none; }
}
.oan-tray__inner {
display: flex;
align-items: center;
gap: var(--s4);
max-width: var(--max-outer);
margin-inline: auto;
padding: var(--s3) var(--gutter);
}
.oan-tray__count {
display: flex;
align-items: baseline;
gap: var(--s2);
margin: 0;
white-space: nowrap;
font-size: var(--t-sm);
color: var(--on-hero-2);
}
.oan-tray__count b {
font-size: var(--t-lg);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--on-dark);
}
.oan-tray__list {
display: flex;
flex: 1;
flex-wrap: wrap;
gap: var(--s2);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.oan-tray__list li {
display: inline-flex;
align-items: center;
gap: var(--s1);
padding: 2px 2px 2px var(--s3);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .12);
font-size: var(--t-sm);
font-weight: 600;
white-space: nowrap;
}
.oan-tray__remove {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
font: inherit;
font-size: 1.1rem;
line-height: 1;
color: var(--on-hero-2);
cursor: pointer;
}
.oan-tray__remove:hover { background: rgba(255, 255, 255, .14); color: var(--on-dark); }
.oan-tray__hint {
margin: 0;
font-size: var(--t-sm);
color: var(--on-hero-2);
white-space: nowrap;
}
.oan-tray__hint:empty { display: none; }
.oan-tray__actions {
display: flex;
flex: none;
gap: var(--s2);
}
.oan-tray .oan-btn--primary {
background: var(--surface);
border-color: var(--surface);
color: var(--ink);
}
.oan-tray .oan-btn--primary:hover { background: var(--brand-tint); border-color: var(--brand-tint); }
.oan-tray .oan-btn--ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, .45);
color: var(--on-dark);
}
.oan-tray .oan-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--on-dark); }
.oan-tray .oan-btn { border-radius: var(--radius-pill); }
.oan-tray [aria-disabled="true"] {
opacity: .5;
pointer-events: none;
}
body.has-oan-tray { padding-bottom: 80px; }
.oan-row__pick:has(input:disabled),
.oan-acard__pick:has(input:disabled) {
opacity: .5;
cursor: not-allowed;
}
.oan-shortlist {
display: grid;
gap: var(--s4);
margin-block: 0 var(--section);
}
.oan-shortlist__wrap {
background: var(--surface);
border-radius: var(--radius);
box-shadow: var(--lift);
}
.oan-shortlist__table {
width: 100%;
min-width: calc(184px + var(--n, 2) * 220px);
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
font-size: var(--t-sm);
}
.oan-shortlist__table th,
.oan-shortlist__table td {
padding: var(--s4) var(--s5);
border-top: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.oan-shortlist__table thead th,
.oan-shortlist__table thead td { border-top: 0; }
.oan-shortlist__corner { width: 184px; }
.oan-shortlist__table tbody th {
position: sticky;
left: 0;
z-index: 1;
background: var(--surface);
font-weight: 600;
color: var(--muted);
}
.oan-shortlist__table td { color: var(--text); overflow-wrap: anywhere; }
.oan-shortlist__agency { font-weight: 400; }
.oan-shortlist__id {
display: flex;
align-items: center;
gap: var(--s3);
min-width: 0;
}
.oan-shortlist__logo {
flex: none;
width: 40px;
height: 40px;
border-radius: 12px;
object-fit: contain;
}
span.oan-shortlist__logo {
display: grid;
place-items: center;
background: var(--brand-tint);
font-size: var(--t-sm);
font-weight: 700;
color: var(--action);
}
.oan-shortlist__name {
min-width: 0;
font-size: var(--t-md);
font-weight: 700;
line-height: var(--lh-snug);
text-decoration: none;
color: var(--ink);
}
.oan-shortlist__name:hover { color: var(--action); text-decoration: underline; }
.oan-shortlist__agency .oan-badges {
display: flex;
flex-wrap: wrap;
gap: var(--s1);
margin-top: var(--s2);
}
.oan-shortlist__tagline {
display: -webkit-box;
margin: var(--s2) 0 0;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: var(--t-sm);
line-height: var(--lh-snug);
color: var(--muted);
}
.oan-shortlist__remove {
display: inline-block;
margin-top: var(--s2);
font-size: var(--t-xs);
font-weight: 600;
color: var(--action);
}
.oan-shortlist__score {
font-size: var(--t-lg);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.oan-shortlist__band,
.oan-shortlist__muted { color: var(--muted); }
.oan-shortlist__best {
display: inline-block;
margin-left: var(--s1);
padding: 1px var(--s2);
border-radius: var(--radius-pill);
background: var(--score-tint);
font-size: var(--t-xs);
font-weight: 700;
color: var(--score-ink);
}
.oan-shortlist__table td.is-best .oan-shortlist__score { color: var(--score-ink); }
.oan-shortlist__table .oan-stars { vertical-align: -1px; }
.oan-shortlist__actions td {
display: table-cell;
border-top-color: var(--line);
}
.oan-shortlist__actions .oan-btn {
display: flex;
justify-content: center;
width: 100%;
border-radius: var(--radius-pill);
}
.oan-shortlist__actions .oan-btn + .oan-btn { margin-top: var(--s2); }
.oan-shortlist__note {
max-width: var(--measure);
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-tray :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--brand-on-dark); }
html:has(body.has-oan-tray) { scroll-padding-bottom: calc(var(--s8) + var(--s5)); }
.oan-editorial .oan-editorial__section {
position: relative;
padding: var(--s7);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--lift);
}
.oan-editorial .oan-editorial__section:nth-child(even) {
background: var(--surface-2);
border-color: transparent;
box-shadow: none;
}
.oan-editorial .oan-editorial__section + .oan-editorial__section {
margin-top: var(--s6);
}
.oan-editorial .oan-editorial__section h2 {
max-width: 24ch;
font-size: var(--t-xl);
line-height: 1.2;
letter-spacing: -.018em;
}
.oan-editorial__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--s6);
row-gap: var(--s3);
margin-top: var(--s3);
}
.oan-editorial__list li {
position: relative;
padding: var(--s3) 0 var(--s3) var(--s5);
border-bottom: 1px solid var(--line);
font-size: var(--t-body-sm);
line-height: 1.45;
}
.oan-editorial__list li::before {
content: "";
position: absolute;
top: 1.05em;
left: 2px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--action);
}
.oan-faq {
padding: var(--s7);
border-radius: var(--radius);
background: var(--surface-3);
}
.oan-faq > h2 {
margin: 0 0 var(--s5);
font-size: var(--t-xl);
}
.oan-faq__cols {
align-items: start;
gap: var(--s4);
}
.oan-faq__item {
padding: 0;
border: 1px solid rgba(17, 34, 65, .08);
border-radius: var(--radius-sm);
background: var(--surface);
}
.oan-faq__item > summary {
min-height: 56px;
padding: var(--s3) var(--s4);
font-size: var(--t-body-sm);
font-weight: 700;
line-height: 1.4;
}
.oan-faq__item[open] > summary { color: var(--action-dark); }
.oan-faq__item > p {
margin: 0;
padding: 0 var(--s4) var(--s4);
font-size: var(--t-body-sm);
line-height: 1.55;
}
.oan-links > h2 { font-size: var(--t-lg); }
.oan-links li { min-width: 0; }
@media (max-width: 900px) {
.oan-editorial .oan-editorial__section { padding: var(--s5); }
.oan-faq { padding: var(--s5); }
}
@media (max-width: 640px) {
.oan-editorial__list { grid-template-columns: minmax(0, 1fr); }
.oan-editorial .oan-editorial__section:nth-child(even) { background: var(--surface); }
.oan-faq { padding: var(--s4); }
.oan-faq__item > summary { padding-inline: var(--s3); }
}
@media (prefers-reduced-motion: no-preference) {
.oan-editorial .oan-editorial__section,
.oan-faq__item { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.oan-editorial .oan-editorial__section:hover,
.oan-faq__item:hover { border-color: var(--line-2); }
}
.oan-featured-row .oan-featured__note {
margin: 0;
font-size: var(--t-sm);
color: var(--muted);
max-width: var(--measure);
}
.oan-featured-row .oan-featured__note a { font-weight: 700; }
.oan-featured__grid .oan-featured__label {
margin: 0 0 var(--s2);
display: flex;
gap: var(--s2);
align-items: center;
}
.oan-featured__grid .oan-featured__why {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: var(--radius-pill);
padding: 3px 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
background: var(--surface-2);
color: var(--text);
}
.oan-featured__grid .oan-featured__why--verified { background: var(--verified-tint, #e3f4ec); }
.oan-featured__grid .oan-featured__why--paid { background: var(--surface-3); }
.oan-featured__grid .oan-featured__slot {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--s3);
padding: var(--s5);
border: 2px dashed var(--line-2);
border-radius: var(--radius);
background: var(--surface);
min-height: 220px;
}
.oan-featured__grid .oan-featured__slot p { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.oan-featured__grid .oan-featured__slot .oan-featured__slot-title { color: var(--text); font-weight: 800; font-size: var(--t-lg); }
.oan-featured__grid .oan-featured__slot .oan-btn { align-self: flex-start; }
.oan-proof .oan-projects-empty__card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s5);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.oan-proof .oan-projects-empty__card p { margin: 0; color: var(--muted); max-width: var(--measure); }
.oan-proof .oan-projects-empty__card .oan-projects-empty__title { color: var(--text); font-weight: 800; font-size: var(--t-lg); }
.oan-proof .oan-projects-empty__acts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.oan-header.oan-header,
.oan-header.is-condensed {
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.oan-header.is-condensed { box-shadow: 0 6px 18px rgba(17, 34, 65, .06); backdrop-filter: none; }
.oan-footer.oan-footer { background: #0c1830; margin-block-start: 0; }
.oan-footer .oan-footer__cta {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin: 0;
max-width: none;
}
.oan-footer .oan-footer__btn {
min-height: 46px;
padding: 0 var(--s5);
border-radius: 14px;
border: 1.5px solid rgba(255, 255, 255, .55);
background: transparent;
color: #fff;
font-weight: 700;
}
.oan-footer .oan-footer__btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.oan-footer .oan-footer__btn--brief { background: #ffc83d; border-color: #ffc83d; color: var(--ink); }
.oan-footer .oan-footer__btn--brief:hover { background: #ffd56b; border-color: #ffd56b; color: var(--ink); }
.oan-footer .oan-footer__col h3 {
font-size: var(--t-sm);
font-weight: 800;
letter-spacing: 0;
text-transform: none;
color: #9ec2ff;
}
.oan-footer .oan-footer__col a { color: #dde3ee; }
.oan-footer .oan-footer__col a:hover { color: #fff; }
.oan-pagehead.oan-pagehead--photo .oan-pagehead__band--bar {
grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__band--bar > .oan-pagehead__side {
align-self: stretch;
padding-block: var(--s6) var(--s6);
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__photo {
margin: 0;
height: 100%;
min-height: 240px;
border-radius: 22px;
overflow: hidden;
background: #1d3160;
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__band--bar > .oan-pagehead__card {
grid-template-columns: minmax(140px, auto) minmax(0, 1fr) minmax(200px, 280px);
grid-template-areas:
"eye   label foot"
"title rows  foot";
column-gap: var(--s6);
row-gap: var(--s1);
align-items: start;
padding: var(--s5) var(--s6);
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__card > .oan-pagehead__eyebrow { grid-area: eye; margin: 0; }
.oan-pagehead.oan-pagehead--photo .oan-pagehead__card > .oan-glance__title { grid-area: title; margin: 0; }
.oan-pagehead.oan-pagehead--photo .oan-pagehead__card > .oan-glance__label { grid-area: label; margin: 0; }
.oan-pagehead.oan-pagehead--photo .oan-pagehead__card > .oan-glance__rows {
grid-area: rows;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
column-gap: var(--s5);
margin: 0;
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__band--bar .oan-pagehead__card-foot {
grid-area: foot;
align-self: center;
}
.oan-wnext {
max-width: var(--max);
margin: var(--section) auto 0;
min-width: 0;
}
.oan-wnext .oan-wnext__head {
font-size: var(--t-xl);
margin: 0 0 var(--s5);
}
.oan-wnext .oan-wnext__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: var(--s4);
}
.oan-wnext .oan-wnext__card {
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--s2);
min-height: 150px;
padding: var(--s5);
border-radius: 20px;
color: var(--text);
text-decoration: none;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.oan-wnext .oan-wnext__card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17, 34, 65, .12); }
.oan-wnext .oan-wnext__card--sun { background: #fff4d6; }
.oan-wnext .oan-wnext__card--blue { background: var(--surface-3); }
.oan-wnext .oan-wnext__card--mint { background: #dcf6ec; }
.oan-wnext .oan-wnext__card--lilac { background: #eee9ff; }
.oan-wnext .oan-wnext__title { font-weight: 800; font-size: var(--t-lg); line-height: 1.25; }
.oan-wnext .oan-wnext__text { font-size: var(--t-sm); color: var(--muted); }
.oan-wnext .oan-wnext__go { font-weight: 800; color: var(--action-dark); }
.oan-psections {
max-width: var(--max);
margin: var(--s6) auto 0;
min-width: 0;
position: sticky;
top: calc(var(--wp-admin--admin-bar--height, 0px) + 77px);
z-index: 20;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(17, 34, 65, .06);
}
.oan-psections ul {
display: flex;
gap: var(--s1);
margin: 0;
padding: var(--s2);
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.oan-psections a {
display: block;
padding: var(--s2) var(--s4);
border-radius: 10px;
font-weight: 700;
font-size: var(--t-sm);
color: var(--text);
text-decoration: none;
white-space: nowrap;
}
.oan-psections a:hover { background: var(--bone); color: var(--action-dark); }
#oan-sec-about,
#oan-sec-services,
#oan-sec-similar,
#oan-sec-next { scroll-margin-top: 170px; }
.oan-profile-main .oan-profile-about { margin: 0 0 var(--s4); }
.oan-planfind {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
gap: var(--s6);
align-items: center;
max-width: var(--max);
margin: var(--s7) auto var(--s7);
padding: var(--s6);
border-radius: 28px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(17, 34, 65, .05), 0 12px 32px rgba(17, 34, 65, .07);
min-width: 0;
}
.oan-planfind h2 { font-size: var(--t-xl); margin: 0; }
.oan-planfind__ask > p { margin: var(--s2) 0 0; color: var(--muted); }
.oan-planfind .oan-planfind__row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s2) var(--s3);
align-items: center;
margin-top: var(--s5);
font-weight: 700;
cursor: default;
}
.oan-planfind__row output {
min-width: 40px;
text-align: center;
padding: 2px 10px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--bone);
font-weight: 800;
}
.oan-planfind__row input[type="range"] {
grid-column: 1 / -1;
width: 100%;
height: 28px;
accent-color: var(--action);
}
.oan-planfind__answer {
padding: var(--s5);
border-radius: 22px;
background: var(--surface-3);
}
.oan-planfind__answer p { margin: 0; }
.oan-planfind .oan-planfind__label { font-size: var(--t-sm); font-weight: 700; color: var(--muted); }
.oan-planfind .oan-planfind__name { font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: var(--s1); }
.oan-planfind .oan-planfind__why { margin-top: var(--s2); color: var(--muted); }
.oan-planfind__answer .oan-btn { margin-top: var(--s4); }
.oan-plan-card.is-picked { box-shadow: 0 0 0 3px var(--action), 0 16px 36px rgba(17, 34, 65, .14); }
.oan-plans th.is-picked { box-shadow: inset 0 3px 0 var(--action); }
.oan-listing > .oan-row.oan-row {
grid-template-columns: minmax(0, 1fr);
border-radius: 22px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .05), 0 12px 32px rgba(17, 34, 65, .07);
}
.oan-listing > .oan-row.oan-row:hover { box-shadow: 0 2px 4px rgba(17, 34, 65, .08), 0 20px 44px rgba(17, 34, 65, .13); transform: translateY(-3px); }
.oan-listing > .oan-row .oan-row__main.oan-row__main { align-items: flex-start; padding: var(--s5) var(--s5) var(--s4); }
.oan-listing > .oan-row .oan-row__logo.oan-row__logo { width: 64px; height: 64px; border-radius: 16px; }
.oan-listing > .oan-row img.oan-row__logo.oan-row__logo { border: 1px solid var(--line); background: #fff; padding: 4px; }
.oan-listing > .oan-row .oan-row__name { font-size: 1.25rem; }
.oan-listing > .oan-row .oan-row__svcs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: var(--s3) 0 var(--s2);
padding: 0;
list-style: none;
}
.oan-listing > .oan-row .oan-row__svcs li {
padding: 3px 11px;
border-radius: 99px;
background: var(--surface-3);
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.oan-listing > .oan-row .oan-row__side.oan-row__side {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s3);
margin-top: auto;
padding: var(--s4) var(--s5);
border-top: 1px solid var(--line);
}
.oan-listing > .oan-row .oan-row__actions.oan-row__actions { flex-direction: row; flex-wrap: wrap; gap: var(--s2); }
.oan-listing > .oan-row .oan-row__pick.oan-row__pick { justify-content: flex-start; min-height: 40px; }
.oan-listing > .oan-row { display: flex; flex-direction: column; }
.oan-listing > .oan-row .oan-row__svcs { grid-column: 1 / -1; }
.oan-pagehead.oan-pagehead--profile .oan-pagehead__band::before {
border-image: linear-gradient(#065df6, #065df6) fill 0 // 0 100vmax;
}
.oan-pagehead.oan-pagehead--profile .oan-pagehead__lead,
.oan-pagehead.oan-pagehead--profile .oan-pagehead__band--bar > .oan-pagehead__side { background-color: #065df6; }
.oan-pagehead.oan-pagehead--profile .oan-pagehead__route,
.oan-pagehead.oan-pagehead--profile .oan-pagehead__route a,
.oan-pagehead.oan-pagehead--profile .oan-pagehead__statement,
.oan-pagehead.oan-pagehead--profile .oan-pagehead__lead p,
.oan-pagehead.oan-pagehead--profile .oan-pagehead__lead a { color: #fff; }
.oan-pagehead.oan-pagehead--profile .oan-pagehead__side .oan-pagehead__actions .oan-pagehead__cta-note { color: #fff; }
.oan-pagehead.oan-pagehead--profile .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--primary,
.oan-pagehead.oan-pagehead--profile .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--accent {
background: #ffc83d;
border-color: #ffc83d;
color: #112241;
}
.oan-pagehead.oan-pagehead--profile .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--primary:hover,
.oan-pagehead.oan-pagehead--profile .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--accent:hover { background: #ffd56b; border-color: #ffd56b; color: #112241; }
.oan-pagehead.oan-pagehead--profile .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--secondary { border-color: rgba(255, 255, 255, .7); }
.oan-pagehead.oan-pagehead--profile .oan-pagehead__band--bar > .oan-pagehead__card { border-radius: 22px; box-shadow: 0 2px 4px rgba(17, 34, 65, .08), 0 18px 40px rgba(17, 34, 65, .14); }
.oan-nhero,
.oan-nlogos,
.oan-nsec {
max-width: var(--max);
margin-inline: auto;
min-width: 0;
}
.oan-nsec--ground {
box-shadow: 0 0 0 100vmax var(--bone);
clip-path: inset(0 -100vmax);
background: var(--bone);
padding-block: var(--s8);
}
.oan-nhero { padding-block: var(--s7) 0; }
.entry-content > .oan-nhero { margin-bottom: var(--s6); }
.oan-nhero .oan-nhero__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: var(--s8);
align-items: center;
}
.oan-nhero .oan-nhero__title {
font-size: clamp(2.4rem, 4.6vw, 4.1rem);
line-height: 1.04;
letter-spacing: -.035em;
font-weight: 800;
color: var(--text);
margin: 0;
text-wrap: balance;
}
.oan-nhero .oan-nhero__title span { color: var(--action); }
.oan-nhero .oan-nhero__lede {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
color: var(--muted);
max-width: 56ch;
margin: var(--s5) 0 0;
}
.oan-nhero .oan-nsearch {
margin-top: var(--s6);
padding: var(--s2);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .05), 0 12px 32px rgba(17, 34, 65, .08);
}
.oan-nsearch .oan-nsearch__in { position: absolute; opacity: 0; pointer-events: none; }
.oan-nsearch .oan-nsearch__tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
border-radius: 16px;
background: var(--bone);
}
.oan-nsearch .oan-nsearch__tabs label {
text-align: center;
padding: 10px 12px;
border-radius: 12px;
font-weight: 700;
font-size: var(--t-sm);
color: var(--muted);
cursor: pointer;
}
#oan-ns-buy:checked ~ .oan-nsearch__tabs label[for="oan-ns-buy"],
#oan-ns-agency:checked ~ .oan-nsearch__tabs label[for="oan-ns-agency"] {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 3px rgba(17, 34, 65, .14);
}
#oan-ns-buy:focus-visible ~ .oan-nsearch__tabs label[for="oan-ns-buy"],
#oan-ns-agency:focus-visible ~ .oan-nsearch__tabs label[for="oan-ns-agency"] { outline: 2px solid var(--action); outline-offset: 2px; }
.oan-nsearch .oan-nsearch__pane { display: none; padding: var(--s4) var(--s3) var(--s3); }
#oan-ns-buy:checked ~ .oan-nsearch__pane--buy,
#oan-ns-agency:checked ~ .oan-nsearch__pane--agency { display: block; }
.oan-nsearch .oan-nsearch__fields {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
gap: var(--s3);
align-items: end;
}
.oan-nsearch .oan-nsearch__fields .oan-field { margin: 0; }
.oan-nsearch .oan-nsearch__go { margin: 0; }
.oan-nsearch .oan-nsearch__go .oan-btn { min-height: 48px; white-space: nowrap; }
.oan-nsearch .oan-nsearch__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--s2) var(--s4);
margin: var(--s3) 0 0;
font-size: var(--t-sm);
color: var(--muted);
}
.oan-nsearch .oan-nsearch__meta a { font-weight: 700; color: var(--action-dark); }
.oan-nsearch .oan-find__readout { display: flex; gap: 6px; margin: 0; }
.oan-nsearch .oan-find__readout dt { font-weight: 500; }
.oan-nsearch .oan-find__readout dd { margin: 0; font-weight: 800; color: var(--text); order: -1; }
.oan-nsearch .oan-nsearch__pane--agency > p:first-child { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--t-sm); }
.oan-nhero .oan-popular { margin-top: var(--s4); }
.oan-nhero .oan-nhero__visual { position: relative; aspect-ratio: 5 / 6; max-width: 100%; max-height: 680px; }
.oan-nhero .oan-nhero__block {
position: absolute;
inset: 7% 0 5% 12%;
border-radius: 36px;
background: var(--action);
}
.oan-nhero .oan-nhero__block::after {
content: "";
position: absolute;
right: 26px;
top: 26px;
width: 84px;
height: 84px;
border-radius: 50%;
background: #ffc83d;
}
.oan-nhero .oan-nhero__photo {
position: absolute;
inset: 0 7% 12% 0;
border-radius: 32px;
overflow: hidden;
background: var(--surface-2);
box-shadow: 0 2px 4px rgba(17, 34, 65, .08), 0 20px 44px rgba(17, 34, 65, .16);
}
.oan-nhero .oan-nhero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oan-nhero .oan-nhero__float {
position: absolute;
display: flex;
align-items: center;
gap: var(--s3);
margin: 0;
padding: var(--s3) var(--s4);
border-radius: 18px;
background: var(--surface);
box-shadow: 0 2px 4px rgba(17, 34, 65, .08), 0 18px 40px rgba(17, 34, 65, .16);
font-size: var(--t-sm);
line-height: 1.35;
color: var(--muted);
text-decoration: none;
max-width: 70%;
}
.oan-nhero .oan-nhero__float b { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.oan-nhero .oan-nhero__float--a { left: -4%; top: 8%; }
.oan-nhero .oan-nhero__float--b { right: 0; bottom: 22%; }
.oan-nhero .oan-nhero__float--c { left: 4%; bottom: 0; }
.oan-nhero .oan-nhero__num {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 12px;
background: #fff4d6;
color: var(--text);
font-weight: 800;
}
.oan-nhero .oan-nhero__num--mint { background: #dcf6ec; }
.oan-nhero .oan-nhero__mark { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); flex: none; object-fit: contain; background: #fff; }
.oan-nlogos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s4) var(--s6);
padding-block: var(--s5);
border-block: 1px solid var(--line);
}
.oan-nlogos .oan-nlogos__label { margin: 0; font-weight: 800; font-size: var(--t-sm); color: var(--muted); }
.oan-nlogos .oan-nlogos__list { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: 0; padding: 0; list-style: none; }
.oan-nlogos .oan-nlogos__list a { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-sm); color: var(--text); text-decoration: none; }
.oan-nlogos .oan-nlogos__list a:hover { color: var(--action-dark); }
.oan-nlogos .oan-nlogos__mark { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); object-fit: contain; background: #fff; }
.oan-nplaces .oan-ncities {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s5);
}
.oan-nplaces .oan-ncity {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(17, 34, 65, .05), 0 12px 32px rgba(17, 34, 65, .07);
color: var(--text);
text-decoration: none;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.oan-nplaces .oan-ncity:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(17, 34, 65, .08), 0 20px 44px rgba(17, 34, 65, .14); }
.oan-nplaces .oan-ncity__ph { display: block; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--surface-2); }
.oan-nplaces .oan-ncity__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oan-nplaces .oan-ncity__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; }
.oan-nplaces .oan-ncity__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.oan-nplaces .oan-ncity__n { font-size: var(--t-sm); color: var(--muted); }
.oan-nplaces .oan-ncity__svcs { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s1) 0 0; padding: 0; list-style: none; }
.oan-nplaces .oan-ncity__svcs li { padding: 3px 10px; border-radius: 99px; background: var(--surface-3); font-size: 12.5px; font-weight: 700; }
.oan-nplaces .oan-ncity__go { margin-top: auto; padding-top: var(--s2); font-weight: 700; font-size: var(--t-sm); color: var(--action-dark); }
.oan-nplaces .oan-ncity--plain .oan-ncity__body { background: var(--bone); }
.oan-nplaces .oan-nchips { margin-top: var(--s5); }
.oan-nplaces .oan-nchips__label { margin: 0 0 var(--s2); font-weight: 800; font-size: var(--t-sm); color: var(--muted); }
.oan-nplaces .oan-nchips ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.oan-nplaces .oan-nchips a { display: inline-flex; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: var(--t-sm); color: var(--text); text-decoration: none; }
.oan-nplaces .oan-nchips a b { color: var(--muted); font-weight: 600; }
.oan-nplaces .oan-nchips a:hover { border-color: var(--action); color: var(--action-dark); }
.oan-nservices .oan-nsvcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.oan-nservices .oan-nsvc {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 2px var(--s4);
align-items: center;
padding: var(--s5);
border-radius: 22px;
background: var(--surface);
border: 1px solid var(--line);
color: var(--text);
text-decoration: none;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.oan-nservices .oan-nsvc:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(17, 34, 65, .12); }
.oan-nservices .oan-nsvc__n { grid-row: 1 / 3; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; font-size: 1.4rem; font-weight: 800; }
.oan-nservices .oan-nsvc__n--blue { background: var(--surface-3); }
.oan-nservices .oan-nsvc__n--sun { background: #fff4d6; }
.oan-nservices .oan-nsvc__n--mint { background: #dcf6ec; }
.oan-nservices .oan-nsvc__n--lilac { background: #eee9ff; }
.oan-nservices .oan-nsvc__n--coral { background: #ffe7e0; }
.oan-nservices .oan-nsvc__n--sky { background: #e0f3ff; }
.oan-nservices .oan-nsvc__name { font-weight: 800; font-size: 1.05rem; }
.oan-nservices .oan-nsvc__ex { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.oan-nhow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
.oan-nhow .oan-nhow__ph { border-radius: 32px; overflow: hidden; aspect-ratio: 5 / 4; max-width: 100%; background: var(--surface-2); box-shadow: 0 20px 44px rgba(17, 34, 65, .14); }
.oan-nhow .oan-nhow__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oan-nhow h2 { margin: 0; }
.oan-nhow .oan-nhow__steps { display: grid; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.oan-nhow .oan-nhow__steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s4); padding: var(--s4); border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.oan-nhow .oan-nhow__steps h3 { margin: 0; font-size: 1.05rem; }
.oan-nhow .oan-nhow__steps p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--muted); }
.oan-nhow .oan-nhow__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-weight: 800; font-size: 1.15rem; background: var(--surface-3); }
.oan-nhow .oan-nhow__n--2 { background: #fff4d6; }
.oan-nhow .oan-nhow__n--3 { background: #dcf6ec; }
.oan-nhow .oan-nhow__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 0; }
.oan-ntrust .oan-ntrust__band { background: #0c1830; color: #fff; border-radius: 36px; padding: var(--s8); }
.oan-ntrust h2, .oan-ntrust h3 { color: #fff; margin: 0; }
.oan-ntrust .oan-ntrust__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s6); }
.oan-ntrust .oan-ntrust__head p { color: #c7d0e0; margin: var(--s2) 0 0; max-width: 60ch; }
.oan-ntrust .oan-ntrust__btn { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.oan-ntrust .oan-ntrust__btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.oan-ntrust .oan-ntrust__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: stretch; }
.oan-ntrust .oan-ntrust__pane { display: flex; flex-direction: column; background: #15254a; border-radius: 24px; padding: var(--s6); }
.oan-ntrust .oan-ntrust__pane > p { color: #c7d0e0; font-size: var(--t-sm); margin: var(--s2) 0 var(--s4); }
.oan-ntrust .oan-ntrust__checks { display: grid; grid-auto-rows: 1fr; gap: var(--s2); margin: 0; padding: 0; list-style: none; flex: 1; }
.oan-ntrust .oan-ntrust__checks li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3); border-radius: 14px; background: #1d3160; font-weight: 600; }
.oan-ntrust .oan-ntrust__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #112241; font-weight: 800; }
.oan-ntrust .oan-ntrust__n--1, .oan-ntrust .oan-ntrust__seg--1 { background: #5cc0ff; }
.oan-ntrust .oan-ntrust__n--2, .oan-ntrust .oan-ntrust__seg--2 { background: #ffc83d; }
.oan-ntrust .oan-ntrust__n--3, .oan-ntrust .oan-ntrust__seg--3 { background: #2fc48f; }
.oan-ntrust .oan-ntrust__n--4, .oan-ntrust .oan-ntrust__seg--4 { background: #9479ff; }
.oan-ntrust .oan-ntrust__seg--5 { background: #ff7a59; }
.oan-ntrust .oan-ntrust__links { display: grid; gap: var(--s2); margin: var(--s4) 0 0; }
.oan-ntrust .oan-ntrust__links a { display: flex; justify-content: space-between; padding: var(--s3) var(--s4); border-radius: 14px; background: #1d3160; color: #fff; font-weight: 700; text-decoration: none; }
.oan-ntrust .oan-ntrust__links a:hover { background: #25407a; }
.oan-ntrust .oan-ntrust__stack { display: flex; gap: 3px; height: 44px; border-radius: 12px; overflow: hidden; }
.oan-ntrust .oan-ntrust__stack span { display: grid; place-items: center; font-weight: 800; font-size: var(--t-sm); color: #112241; }
.oan-ntrust .oan-ntrust__factors { display: grid; gap: 2px; margin: var(--s4) 0 0; padding: 0; list-style: none; }
.oan-ntrust .oan-ntrust__factors li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px var(--s3); align-items: start; padding: var(--s2) 0; }
.oan-ntrust .oan-ntrust__dot { width: 12px; height: 12px; border-radius: 4px; margin-top: 6px; }
.oan-ntrust .oan-ntrust__factors em { font-style: normal; font-weight: 800; color: #ffd977; }
.oan-ntrust .oan-ntrust__factors small { grid-column: 2 / -1; color: #c7d0e0; font-size: 13.5px; line-height: 1.45; }
.oan-ntrust .oan-ntrust__foot { margin: var(--s4) 0 0; color: #c7d0e0; font-size: var(--t-sm); }
.oan-ntrust .oan-ntrust__foot strong { color: #fff; }
.oan-njoin .oan-njoin__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 32px; background: var(--surface-3); }
.oan-njoin .oan-njoin__ph { background: var(--surface-2); }
.oan-njoin .oan-njoin__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oan-njoin .oan-njoin__t { padding: var(--s8); }
.oan-njoin h2 { margin: 0; }
.oan-njoin .oan-njoin__lede { color: var(--muted); margin: var(--s3) 0 0; }
.oan-njoin .oan-njoin__list { display: grid; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.oan-njoin .oan-njoin__list .oan-benefit { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px var(--s3); }
.oan-njoin .oan-njoin__list .oan-benefit::before { content: ""; grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 8px; background: var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center; }
.oan-njoin .oan-njoin__list .oan-benefit b { display: block; }
.oan-njoin .oan-njoin__list .oan-benefit span { color: var(--muted); font-size: var(--t-sm); }
.oan-njoin .oan-njoin__price { margin: var(--s5) 0 0; color: var(--muted); }
.oan-njoin .oan-njoin__price b { font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -.03em; }
.oan-njoin .oan-njoin__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0 0; }
.oan-nclose .oan-nclose__band {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.3fr) auto;
gap: var(--s5);
align-items: center;
padding: var(--s8);
border-radius: 32px;
background: var(--action);
color: #fff;
}
.oan-nclose .oan-nclose__band::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; background: #ffc83d; }
.oan-nclose .oan-nclose__band > * { position: relative; z-index: 1; }
.oan-nclose h2 { color: #fff; margin: 0; }
.oan-nclose p { color: #e3ecff; margin: var(--s2) 0 0; max-width: 56ch; }
.oan-nclose .oan-nclose__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.oan-nclose .oan-nclose__brief { background: #ffc83d; border-color: #ffc83d; color: #112241; }
.oan-nclose .oan-nclose__ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; }
.oan-pagehead.oan-pagehead .oan-pagehead__band::before {
border-image: none;
background: var(--ink);
border-radius: 28px;
}
.oan-pagehead.oan-pagehead--profile .oan-pagehead__band::before { border-image: none; background: #065df6; }
.oan-pagehead.oan-pagehead .oan-pagehead__lead {
padding-inline: clamp(var(--s5), 3.4vw, var(--s8));
}
.oan-pagehead.oan-pagehead .oan-pagehead__band--split > .oan-pagehead__card {
margin-inline-end: clamp(var(--s4), 2.4vw, var(--s6));
border-radius: 22px;
box-shadow: 0 2px 4px rgba(17, 34, 65, .08), 0 22px 48px rgba(17, 34, 65, .18);
}
.oan-pagehead.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__side {
padding-inline-end: clamp(var(--s5), 3.4vw, var(--s8));
}
.oan-pagehead.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__card {
margin-inline: clamp(var(--s4), 2.4vw, var(--s6));
border-radius: 22px;
}
.oan-pagehead.oan-pagehead .oan-pagehead__inner { padding-top: var(--s5); }
.oan-eyebrow,
.oan-mega__label,
.oan-mega__post-topic,
.oan-footer__col h3,
.oan-gates__head,
.oan-breadcrumbs ol,
.oan-field label,
.oan-filter__field label,
.oan-form-row label,
.oan-score-rail__band,
.oan-score-rail__label,
.oan-card__tags,
.oan-exhibit,
.oan-case__metrics dt,
.oan-table thead th,
.oan-compare thead th,
.oan-plans thead th,
figure.wp-block-table thead th,
.oan-compare .oan-compare__sub::first-letter,
.oan-method h2,
.oan-profile-rail h2,
.oan-reviews__outof,
.oan-status,
.oan-apart h2,
.oan-search-group > h2,
.oan-folder-tab,
.oan-recent-briefs thead th,
.oan-press-flag__tag,
.oan-author__label,
.oan-stats dt,
.oan-brief-form legend,
.oan-agency-form legend,
.pmpro.pmpro .pmpro_form_label:not(.pmpro_form_label-inline),
.pmpro.pmpro .pmpro_levels_table thead th,
.oan-card__cat,
.oan-acard__score .oan-score-chip__k,
.oan-acard .oan-acard__facts dt,
.oan-popular__label,
.oan-brief__state,
.oan-insight__date,
.oan-endcta__chip,
.oan-ticket__month,
.oan-account__group,
.oan-steps__title,
.oan-account-search label,
.oan-account-facts dt,
.oan-account-panel .oan-badge-row__code label,
.oan-pick__group,
.oan-account-pmpro .pmpro.pmpro .pmpro_table thead th,
.oan-login__form label,
.oan-doc__toc-title,
.tribe-events-pg-template .tribe-events-single .tribe-events-single-section-title,
.oan-homehead__eyebrow b,
.oan-browse__title,
.oan-proof .oan-brief__fact dt,
.oan-joinband__label,
.oan-pagehead .oan-pagehead__eyebrow {
text-transform: none;
letter-spacing: normal;
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__band::before {
border-image: none;
background: var(--surface-3);
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead,
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side {
background-color: var(--surface-3);
color: var(--text);
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead :is(h1, h2, p, span, li, a, time, strong, em, dt, dd, small, nav, ol):not(.oan-btn, .oan-btn *, [class*="badge"], [class*="badge"] *, [class*="chip"], [class*="chip"] *, [class*="pill"], [class*="pill"] *) {
color: var(--text);
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__title {
color: var(--text);
font-weight: 800;
letter-spacing: -.03em;
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead :is(.oan-pagehead__statement, .oan-citable, .oan-pagehead__cta-note, .oan-profile__tagline, .oan-job__meta) { color: var(--muted); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead :is(.oan-citable strong, .oan-pagehead__statement strong) { color: var(--text); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__route,
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__route :is(li, a, span) { color: var(--muted); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__route [aria-current="page"] { color: var(--text); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__route a:hover,
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead a:not(.oan-btn):hover { color: var(--action-dark); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead .oan-byline :is(a, strong) { color: var(--text); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead .oan-byline__sep { color: var(--muted); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--primary,
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--accent {
background: var(--action);
border-color: var(--action);
color: #fff;
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--primary:hover,
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--accent:hover {
background: var(--action-dark);
border-color: var(--action-dark);
color: #fff;
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--secondary {
background: #fff;
border-color: var(--text);
color: var(--text);
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-btn.oan-btn--secondary:hover { background: var(--text); color: #fff; }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-btn:focus-visible { outline-color: var(--action); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__side .oan-pagehead__actions .oan-pagehead__cta-note { color: var(--muted); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__card {
border: 0;
border-radius: 22px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 16px 36px rgba(17, 34, 65, .10);
}
.oan-pagehead.oan-pagehead--sided.oan-pagehead--sided .oan-pagehead__band {
grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
column-gap: clamp(var(--s5), 4vw, var(--s8));
}
.oan-pagehead.oan-pagehead--sided.oan-pagehead--sided .oan-pagehead__band > .oan-pagehead__side {
grid-area: 1 / 2;
align-self: stretch;
min-width: 0;
padding-block: var(--s6);
padding-inline-end: clamp(var(--s5), 3.4vw, var(--s8));
display: flex;
align-items: center;
}
.oan-pagehead.oan-pagehead--sided .oan-pagehead__side .oan-pagehead__photo {
margin: 0;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 24px;
overflow: hidden;
background: var(--line);
box-shadow: 0 18px 40px rgba(17, 34, 65, .16);
}
.oan-pagehead.oan-pagehead--sided .oan-pagehead__side .oan-pagehead__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oan-pagehead.oan-pagehead--sided.oan-pagehead--sided .oan-pagehead__title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.05; }
.oan-pagehead .oan-pagehead__lead .oan-join-claim.oan-join-claim--head {
margin: var(--s6) 0 0;
padding: var(--s5);
background: #fff;
border: 0;
border-radius: 20px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 12px 28px rgba(17, 34, 65, .08);
color: var(--text);
}
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead .oan-join-claim--head :is(p, label, span) { color: var(--muted); }
.oan-pagehead.oan-pagehead--light.oan-pagehead--light .oan-pagehead__lead .oan-join-claim--head .oan-join-claim__title { color: var(--text); font-size: var(--t-lg); margin: 0 0 var(--s1); }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s2);
}
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) > li { margin: 0; padding: 0; border: 0; }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) .oan-glance__row {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 8px 14px;
border-radius: 99px;
background: var(--surface-3);
color: var(--text);
font-weight: 700;
font-size: var(--t-sm);
line-height: 1.3;
min-height: 40px;
transition: box-shadow var(--dur) var(--ease);
}
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) > li:nth-child(4n + 2) .oan-glance__row { background: #dcf6ec; }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) > li:nth-child(4n + 3) .oan-glance__row { background: #fff4d6; }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) > li:nth-child(4n + 4) .oan-glance__row { background: #eee9ff; }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) .oan-glance__row:hover { box-shadow: inset 0 0 0 1.5px var(--text); color: var(--text); }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) .oan-glance__bar { display: none; }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) .oan-glance__name { white-space: normal; overflow: visible; }
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) .oan-glance__n {
min-width: 26px;
padding: 1px 8px;
border-radius: 99px;
background: #fff;
color: var(--text);
font-weight: 800;
text-align: center;
}
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__title {
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
font-weight: 800;
letter-spacing: -.02em;
}
.oan-pagehead.oan-pagehead--photo.oan-pagehead--photo .oan-pagehead__card > .oan-glance__rows { display: flex; }
.oan-bento:has(> .oan-t-3 > .oan-filter) > .oan-t-3,
.oan-bento:has(> .oan-t-3 > .oan-filter) > .oan-t-9 { grid-column: 1 / -1; }
.oan-bento.oan-bento > .oan-t-3 > .oan-filter {
position: static;
max-height: none;
overflow: visible;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s3) var(--s4);
padding: var(--s4) var(--s5);
background: #fff;
border: 0;
border-radius: 22px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 10px 26px rgba(17, 34, 65, .07);
}
.oan-bento.oan-bento > .oan-t-3 > .oan-filter > .oan-filter__fields {
flex: 1 1 640px;
min-width: 0;
margin: 0;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--s3);
}
.oan-bento.oan-bento > .oan-t-3 > .oan-filter > .oan-filter__actions { margin: 0; flex: none; }
.oan-bento.oan-bento > .oan-t-3 > .oan-filter select {
border-radius: 12px;
min-height: 46px;
}
.oan-method.oan-method {
background: #fff;
border: 0;
border-radius: 22px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 10px 26px rgba(17, 34, 65, .07);
}
.oan-links.oan-links {
padding: var(--s5);
background: #fff;
border: 0;
border-radius: 22px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 10px 26px rgba(17, 34, 65, .07);
}
.oan-links.oan-links > h2 { font-size: var(--t-lg); margin: 0 0 var(--s3); }
.oan-links.oan-links > ul {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
columns: auto;
}
.oan-links.oan-links > ul > li {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin: 0;
padding: 7px 8px 7px 14px;
border: 0;
border-radius: 99px;
background: var(--surface-3);
font-size: var(--t-sm);
font-weight: 700;
break-inside: avoid;
max-width: 100%;
}
.oan-links.oan-links > ul > li:nth-child(4n + 2) { background: #dcf6ec; }
.oan-links.oan-links > ul > li:nth-child(4n + 3) { background: #fff4d6; }
.oan-links.oan-links > ul > li:nth-child(4n + 4) { background: #eee9ff; }
.oan-links.oan-links > ul > li > a { color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.oan-links.oan-links > ul > li > a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-links.oan-links > ul > li > a::after { content: none; }
.oan-links.oan-links > ul > li > .oan-count {
min-width: 26px;
padding: 1px 8px;
border-radius: 99px;
background: #fff;
color: var(--text);
font-weight: 800;
text-align: center;
}
.oan-cards .oan-card.oan-card,
.oan-score-panel.oan-score-panel,
.oan-profile-rail .oan-table-wrap.oan-table-wrap,
.oan-features.oan-features,
.oan-expertise.oan-expertise {
border-color: transparent;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 10px 26px rgba(17, 34, 65, .07);
}
.oan-cards .oan-card.oan-card:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.oan-profile-rail .oan-table-wrap.oan-table-wrap {
padding: var(--s5);
background: var(--surface);
border-radius: var(--radius);
}
.oan-features.oan-features,
.oan-expertise.oan-expertise {
padding: var(--s5) var(--s6);
background: var(--surface);
border-radius: var(--radius);
}
.oan-features .oan-features__list.oan-features__list {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: var(--s3) 0 0;
padding: 0;
list-style: none;
columns: auto;
}
.oan-features .oan-features__list.oan-features__list > li {
margin: 0;
padding: 8px 14px;
border-radius: 99px;
background: var(--surface-3);
color: var(--text);
font-weight: 700;
font-size: var(--t-sm);
}
.oan-features .oan-features__list.oan-features__list > li::before { content: none; }
.oan-features .oan-features__list.oan-features__list > li:nth-child(4n + 2) { background: #dcf6ec; }
.oan-features .oan-features__list.oan-features__list > li:nth-child(4n + 3) { background: #fff4d6; }
.oan-features .oan-features__list.oan-features__list > li:nth-child(4n + 4) { background: #eee9ff; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__band {
--strip: 150px;
grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 340px);
column-gap: clamp(var(--s5), 4vw, var(--s8));
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__band::before {
background: #fff;
border-radius: 28px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 16px 36px rgba(17, 34, 65, .10);
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__band::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: var(--strip);
z-index: -1;
background: #065df6;
border-radius: 28px 28px 0 0;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead,
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__side { background: none; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: calc(var(--strip) - 60px);
padding-bottom: var(--s7);
}
.oan-pagehead.oan-pagehead--cover .oan-pagehead__lead > .oan-profile__identity { display: contents; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead .oan-profile__logo {
order: -2;
width: 120px;
height: 120px;
margin: 0;
padding: 8px;
border: 4px solid #fff;
border-radius: 28px;
background: #fff;
box-shadow: 0 10px 28px rgba(17, 34, 65, .16);
object-fit: contain;
flex: none;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead span.oan-profile__logo {
display: grid;
place-items: center;
font-size: 2rem;
font-weight: 800;
color: var(--text);
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__route { order: -1; margin-top: var(--s4); margin-bottom: 0; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__title {
margin-top: var(--s2);
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.02;
letter-spacing: -.035em;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-profile__meta { margin-top: var(--s2); }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead .oan-profile__tagline {
margin: 0;
font-size: var(--t-lg);
color: var(--muted);
max-width: 52ch;
}
.oan-pagehead.oan-pagehead--cover .oan-profile__badges:empty { display: none; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead .oan-citable {
margin-top: var(--s4);
font-size: var(--t-base);
color: var(--muted);
max-width: 62ch;
}
.oan-pagehead.oan-pagehead--cover .oan-cover__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: var(--s4) 0 0;
padding: 0;
list-style: none;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip {
margin: 0;
padding: 6px 12px;
border-radius: 99px;
background: var(--surface-3);
color: var(--text);
font-size: var(--t-sm);
font-weight: 700;
line-height: 1.35;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip--1 { background: #dcf6ec; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip--2 { background: #fff4d6; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip--3 { background: #eee9ff; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip--fact {
background: #fff;
box-shadow: inset 0 0 0 1.5px var(--line);
font-weight: 600;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__band > .oan-pagehead__side {
grid-area: 1 / 2;
display: block;
align-self: start;
padding: calc(var(--strip) + var(--s5)) clamp(var(--s5), 3.4vw, var(--s7)) var(--s7) 0;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__side > .oan-pagehead__actions {
display: grid;
gap: var(--s3);
margin: 0;
padding: var(--s5);
border-radius: 24px;
background: var(--bone);
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__side .oan-pagehead__actions .oan-btn {
width: 100%;
justify-content: center;
margin: 0;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__side .oan-pagehead__actions .oan-pagehead__cta-note {
margin: 0;
text-align: center;
font-size: var(--t-xs, .8125rem);
color: var(--muted);
}
.oan-pagehead.oan-pagehead--cover .oan-pagehead__side .oan-cover__claim {
margin: 0;
padding-top: var(--s3);
border-top: 1px solid var(--line);
text-align: center;
font-size: var(--t-sm);
font-weight: 700;
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__side .oan-cover__claim a { color: var(--action-dark); text-decoration: none; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__side .oan-cover__claim a:hover { text-decoration: underline; text-underline-offset: .2em; }
.oan-profile-rail .oan-facts-table caption {
padding: 0 0 var(--s3);
font-size: var(--t-lg);
font-weight: 800;
color: var(--text);
text-align: start;
}
.oan-profile-rail .oan-claim-card {
padding: var(--s5);
border-radius: var(--radius);
background: #fff4d6;
color: var(--text);
}
.oan-profile-rail .oan-claim-card > h2 { margin: 0; font-size: var(--t-lg); }
.oan-profile-rail .oan-claim-card > p { margin: var(--s2) 0 var(--s4); font-size: var(--t-sm); color: var(--text); }
.oan-profile-rail .oan-claim-card > .oan-btn { min-height: 44px; }
.oan-profile-rail .oan-claim-card .oan-claim-card__report { margin: var(--s4) 0 0; font-size: var(--t-sm); }
.oan-profile-rail .oan-claim-card .oan-claim-card__report a { color: var(--text); font-weight: 700; }
.oan-profile-rail .oan-claim-card--quiet { padding: 0 var(--s2); background: none; }
.oan-profile-rail .oan-claim-card--quiet .oan-claim-card__report { margin: 0; color: var(--muted); }
.oan-psections.oan-psections {
border: 0;
border-radius: 18px;
box-shadow: 0 1px 2px rgba(17, 34, 65, .06), 0 10px 26px rgba(17, 34, 65, .07);
}
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) > li .oan-glance__row,
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) > li:nth-child(n) .oan-glance__row,
.oan-links.oan-links > ul > li,
.oan-links.oan-links > ul > li:nth-child(n),
.oan-features .oan-features__list.oan-features__list > li,
.oan-features .oan-features__list.oan-features__list > li:nth-child(n),
.oan-listing > .oan-row .oan-row__svcs li,
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip,
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip:nth-child(n) {
background: var(--chip);
box-shadow: none;
color: var(--text);
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip--fact.oan-cover__chip--fact {
background: #fff;
box-shadow: inset 0 0 0 1px var(--line);
color: var(--muted);
font-weight: 600;
}
.oan-links.oan-links > ul > li:hover,
.oan-pagehead.oan-pagehead .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) .oan-glance__row:hover { box-shadow: inset 0 0 0 1px var(--action); }
.oan-links.oan-links > ul > li:hover > a { color: var(--action-dark); text-decoration: none; }
.oan-editorial .oan-editorial__section.oan-editorial__section,
.oan-editorial .oan-editorial__section.oan-editorial__section:nth-child(even) {
background: #fff;
border: 0;
box-shadow: var(--soft);
}
.oan-editorial .oan-editorial__section.oan-editorial__section:hover { box-shadow: var(--soft); }
.oan-editorial .oan-editorial__list li::before { background: var(--text); width: 6px; height: 6px; }
.oan-tile > .oan-faq.oan-faq,
.oan-bento > .oan-tile > .oan-faq.oan-faq {
padding: 0;
background: none;
border-radius: 0;
}
.oan-faq .oan-faq__cols { gap: 0 var(--s7); }
.oan-faq .oan-faq__item.oan-faq__item {
margin: 0;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: none;
box-shadow: none;
}
.oan-faq .oan-faq__item.oan-faq__item > summary { padding-inline: 0; }
.oan-faq .oan-faq__item.oan-faq__item > p { padding-inline: 0; color: var(--muted); }
.oan-faq .oan-faq__item.oan-faq__item[open] > summary { color: var(--text); }
.oan-faq .oan-faq__item.oan-faq__item:hover { border-color: var(--line); }
.oan-faq .oan-faq__item.oan-faq__item > summary:hover h3 { color: var(--action-dark); }
.oan-wnext .oan-wnext__card.oan-wnext__card {
background: #fff;
box-shadow: var(--soft);
color: var(--text);
}
.oan-wnext .oan-wnext__card.oan-wnext__card:hover { box-shadow: var(--lift); }
.oan-profile-rail .oan-claim-card.oan-claim-card:not(.oan-claim-card--quiet) {
background: #fff;
box-shadow: var(--soft);
}
.oan-profile-rail .oan-claim-card .oan-claim-card__report { color: var(--muted); }
.oan-profile-rail .oan-claim-card .oan-claim-card__report a { color: var(--action-dark); }
main > form.oan-filter.oan-filter {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s3) var(--s4);
margin-block-end: var(--s6);
padding: var(--s4) var(--s5);
background: #fff;
border: 0;
border-radius: 22px;
box-shadow: var(--soft);
}
main > form.oan-filter.oan-filter > .oan-filter__field { flex: 0 1 320px; min-width: 0; }
main > form.oan-filter.oan-filter > .oan-filter__actions { margin: 0; }
main > form.oan-filter.oan-filter + .oan-sec-head.oan-sec-head {
margin-block: 0 var(--s3);
padding-top: 0;
border-top: 0;
}
main > .oan-sec-head.oan-sec-head + .oan-disclosure.oan-disclosure {
margin-block: 0 var(--s5);
padding: 0;
background: none;
border: 0;
color: var(--muted);
}
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__band::before {
background: none;
border-radius: 0;
box-shadow: none;
}
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__lead,
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__side { background: none; }
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__lead {
padding-inline: 0;
padding-block: var(--s5) var(--s5);
}
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__title {
font-size: clamp(2.2rem, 4.2vw, 3.5rem);
line-height: 1.05;
letter-spacing: -.035em;
max-width: 22ch;
}
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__lead :is(.oan-citable, .oan-pagehead__statement) {
font-size: var(--t-lg);
max-width: 62ch;
}
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__band--split { --hang: 0px; align-items: center; }
.oan-pagehead.oan-pagehead--plain.oan-pagehead--plain .oan-pagehead__band--split > .oan-pagehead__card { margin-inline-end: 0; }
.oan-pagehead .oan-topictabs { margin-top: var(--s5); }
.oan-pagehead .oan-topictabs ul {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin: 0;
padding: 0;
list-style: none;
}
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-topictabs a {
display: inline-flex;
align-items: center;
gap: var(--s2);
min-height: 40px;
padding: 6px 16px;
border-radius: 99px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--line);
color: var(--text);
font-size: var(--t-sm);
font-weight: 700;
text-decoration: none;
}
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-topictabs a:hover { box-shadow: inset 0 0 0 1px var(--action); color: var(--action-dark); }
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-topictabs a[aria-current="page"] {
background: var(--text);
box-shadow: none;
color: #fff;
}
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-topictabs a[aria-current="page"] .oan-count { background: rgba(255, 255, 255, .18); color: #fff; }
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-topictabs .oan-count {
min-width: 24px;
padding: 0 7px;
border-radius: 99px;
background: var(--chip);
color: var(--text);
font-size: 12px;
text-align: center;
}
.oan-pagehead .oan-postline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s1) 0;
margin: var(--s4) 0 0;
font-size: var(--t-sm);
}
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-postline > span { color: var(--muted); }
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-postline strong,
.oan-pagehead.oan-pagehead .oan-pagehead__lead .oan-postline time { color: var(--text); font-weight: 700; }
.oan-pagehead .oan-postline > span + span::before { content: "\00B7"; margin-inline: var(--s2); color: var(--muted); }
.oan-profile-body > .oan-profile-rail:has(> .oan-toc) { position: static; align-self: stretch; }
.oan-profile-rail > .oan-toc {
position: sticky;
top: calc(var(--header-h) + var(--s5));
padding: var(--s5);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--soft);
}
.oan-toc > h2 { margin: 0 0 var(--s3); font-size: var(--t-md); }
.oan-toc ol {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: oan-toc;
}
.oan-toc li { counter-increment: oan-toc; }
.oan-toc a {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: var(--s2);
padding: 6px 8px;
border-radius: 10px;
color: var(--text);
font-size: var(--t-sm);
line-height: 1.4;
text-decoration: none;
}
.oan-toc a::before { content: counter(oan-toc); color: var(--muted); font-weight: 700; }
.oan-toc a:hover { background: var(--chip); color: var(--action-dark); }
.oan-profile-main h2[id^="oan-h-"] { scroll-margin-top: calc(var(--header-h) + var(--s6)); }
.tribe-events .tribe-events-calendar-list__event-row.tribe-events-calendar-list__event-row {
margin: 0 0 var(--s4);
padding: var(--s5);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--soft);
}
.tribe-events .tribe-events-calendar-list__event-date-tag.tribe-events-calendar-list__event-date-tag time {
display: grid;
place-items: center;
width: 64px;
padding: var(--s2) 0;
border-radius: 16px;
background: var(--chip);
}
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday { color: var(--muted); font-weight: 700; }
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum.tribe-events-calendar-list__event-date-tag-daynum { color: var(--text); font-weight: 800; }
.tribe-events .tribe-events-calendar-list__event-title-link.tribe-events-calendar-list__event-title-link { color: var(--text); font-weight: 800; text-decoration: none; }
.tribe-events .tribe-events-calendar-list__event-title-link.tribe-events-calendar-list__event-title-link:hover { color: var(--action-dark); }
.tribe-events .tribe-events-calendar-list__event-description.tribe-events-calendar-list__event-description { max-width: 72ch; color: var(--muted); }
.tribe-events .tribe-events-calendar-list__event-header.tribe-events-calendar-list__event-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s1);
}
.tribe-events .tribe-events-calendar-list__event-datetime-wrapper.tribe-events-calendar-list__event-datetime-wrapper { order: 1; margin: 0; color: var(--muted); }
.tribe-events .tribe-events-calendar-list__event-title.tribe-events-calendar-list__event-title { order: 2; margin: 0; }
.tribe-events .tribe-events-calendar-list__event-header > .oan-event-place { order: 3; }
.tribe-events .tribe-events-calendar-list__event-date-tag.tribe-events-calendar-list__event-date-tag { align-self: flex-start; }
.tribe-events .oan-event-place {
display: inline-flex;
align-self: flex-start;
margin: var(--s2) 0 0;
padding: 3px 11px;
border-radius: 99px;
background: var(--chip);
color: var(--text);
font-size: 13px;
font-weight: 700;
}
#tribe-events-content.tribe-events-single > .tribe_events {
max-width: 820px;
margin: 0 0 var(--s6);
padding: var(--s6) var(--s7);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--soft);
}
#tribe-events-content.tribe-events-single > .tribe_events > :first-child { margin-top: 0; }
#tribe-events-content.tribe-events-single > .tribe_events > :last-child { margin-bottom: 0; }
.oan-fact dt:has(> .oan-fact__icon) { display: inline-flex; align-items: center; gap: 5px; }
.oan-fact__icon.oan-icon {
flex: none;
width: 15px;
height: 15px;
color: var(--muted);
}
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-cover__chips > .oan-cover__chip--fact { display: inline-flex; align-items: center; gap: 6px; }
.oan-expertise .oan-expertise__group > h3 { display: flex; align-items: center; gap: var(--s2); }
.oan-expertise__icon.oan-icon {
flex: none;
width: 22px;
height: 22px;
color: var(--action);
}
body.oan-doc-page .oan-doc .oan-doc__toc {
margin-top: 0;
padding: var(--s5);
border-radius: var(--radius);
box-shadow: var(--soft);
}
body.oan-doc-page .oan-doc .oan-doc__toc-title {
padding: 0 var(--s2);
font-size: var(--t-md);
font-weight: 800;
letter-spacing: 0;
text-transform: none;
color: var(--text);
}
body.oan-doc-page .oan-doc .oan-doc__body {
border-radius: var(--radius);
box-shadow: var(--soft);
}
.oan-mega .oan-mega__tab.oan-mega__tab {
padding: 7px 12px;
font-size: var(--t-sm);
gap: 6px;
}
.oan-pagehead .oan-search-page .oan-search {
display: flex;
width: 100%;
max-width: 560px;
}
.oan-pagehead .oan-search-page .oan-search input[type="search"] { flex: 1 1 auto; min-width: 0; }
.oan-links.oan-links > ul.oan-more__rest { display: none; }
.oan-links.oan-links > .oan-more__toggle:checked + ul.oan-more__rest {
display: flex;
margin-top: var(--s2);
}
.oan-links.oan-links > .oan-more__label { margin-top: var(--s3); }
.oan-bento:not(:has(> .oan-t-3)) > .oan-t-9 { grid-column: 1 / -1; }
.oan-bento > .oan-t-3:not(:has(*)) { display: none; }
.oan-bento:has(> .oan-t-3:not(:has(*))) > .oan-t-9 { grid-column: 1 / -1; }
.oan-pagehead.oan-pagehead .oan-pagehead__band--split > .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) > li .oan-glance__row {
min-height: 32px;
padding: 4px 10px;
gap: 6px;
font-size: 13px;
}
.oan-pagehead.oan-pagehead .oan-pagehead__band--split > .oan-pagehead__card .oan-glance__rows:not(.oan-glance__rows--flat) {
gap: 6px;
}
@media (max-width: 1200px) {
.oan-bento { gap: var(--s4); }
.oan-t-8, .oan-t-9 { grid-column: span 12; }
.oan-t-4, .oan-t-3 { grid-column: span 6; }
.oan-t-r2 { grid-row: auto; }
.oan-bento > .oan-t-4 > .oan-filter,
.oan-bento > .oan-t-3 > .oan-filter,
.oan-filter--rail,
.oan-profile-rail {
position: static;
top: auto;
max-height: none;
overflow-y: visible;
}
.oan-listing { grid-template-columns: 1fr; }
}
@media (min-width: 1241px) {
.oan-header__inner { gap: var(--s4); }
.oan-nav { gap: var(--s3); }
.oan-header__actions { padding-left: var(--s2); }
.oan-brand__logo { height: 40px; }
.oan-header__actions form.oan-search {
flex: 0 0 40px;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 40px;
}
.oan-header__actions form.oan-search input[type="search"] {
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
color: transparent;
cursor: pointer;
}
.oan-header__actions form.oan-search input[type="search"]::placeholder { color: transparent; }
.oan-header__actions form.oan-search .oan-search__icon { left: 12px; color: var(--text); }
.oan-header__actions form.oan-search button[type="submit"] { display: none; }
.oan-header__actions form.oan-search:focus-within {
position: absolute;
top: 50%;
right: var(--gutter);
z-index: 60;
flex: none;
width: min(520px, 50vw);
max-width: none;
height: auto;
transform: translateY(-50%);
box-shadow: var(--focus-halo), var(--lift-lg);
}
.oan-header__actions form.oan-search:focus-within input[type="search"] {
flex: 1 1 auto;
width: auto;
padding: var(--s2) var(--s4) var(--s2) 38px;
color: var(--text);
cursor: text;
}
.oan-header__actions form.oan-search:focus-within input[type="search"]::placeholder { color: var(--faint); }
.oan-header__actions form.oan-search:focus-within .oan-search__icon { left: 14px; color: var(--muted); }
}
@media (max-width: 1240px) {
.oan-nav-burger {
display: inline-flex;
align-items: center;
gap: 10px;
order: 3;
min-height: 44px;
padding: 0 16px 0 14px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-size: var(--t-body-sm);
font-weight: 600;
color: var(--text);
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.oan-nav-burger:hover { border-color: var(--line-2); }
.oan-nav-burger > span {
position: relative;
width: 18px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: background-color var(--dur) var(--ease);
}
.oan-nav-burger > span::before,
.oan-nav-burger > span::after {
content: "";
position: absolute;
left: 0;
width: 18px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.oan-nav-burger > span::before { top: -6px; }
.oan-nav-burger > span::after { top: 6px; }
.oan-nav-toggle:checked + .oan-nav-burger { border-color: var(--line-2); background: var(--surface-2); }
.oan-nav-toggle:checked + .oan-nav-burger > span { background: transparent; }
.oan-nav-toggle:checked + .oan-nav-burger > span::before { top: 0; transform: rotate(45deg); }
.oan-nav-toggle:checked + .oan-nav-burger > span::after { top: 0; transform: rotate(-45deg); }
.oan-header__actions { order: 2; }
.home .oan-nav-burger { margin-left: auto; }
.oan-nav-toggle,
.oan-sub-toggle {
display: block;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}
.oan-nav-toggle:focus-visible + .oan-nav-burger,
.oan-sub-toggle:focus-visible ~ .oan-nav__caret {
outline: 2px solid var(--action);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.oan-header__nav {
display: none;
position: absolute;
top: 100%;
right: var(--gutter);
left: auto;
width: min(440px, calc(100vw - 2 * var(--gutter)));
max-height: calc(100vh - var(--header-h) - 48px);
max-height: calc(100dvh - var(--header-h) - 48px);
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s2) var(--s5) var(--s5);
background: var(--surface);
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--lift-lg);
}
.oan-nav-toggle:checked ~ .oan-header__nav { display: block; }
.oan-nav-toggle:checked ~ .oan-nav-scrim {
display: block;
position: fixed;
inset: 0;
z-index: -2;
background: color-mix(in srgb, var(--ink) 45%, transparent);
cursor: default;
}
.oan-header:has(.oan-nav-toggle:checked)::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--bone);
}
.oan-header.is-condensed:has(.oan-nav-toggle:checked) { backdrop-filter: none; }
html:has(.oan-nav-toggle:checked) { overflow: hidden; }
.oan-nav {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.oan-nav__item {
flex-wrap: wrap;
white-space: normal;
border-bottom: 1px solid var(--line);
}
.oan-nav__item--mobile,
.oan-nav__item--cta { border-bottom: 0; }
.oan-nav__item > a {
flex: 1 1 auto;
padding: var(--s3) 0;
font-size: var(--t-base);
font-weight: 600;
}
.oan-nav__item > a.is-current { text-decoration: none; }
.oan-nav__caret { width: 44px; height: 44px; margin: 0; }
.oan-nav__item--mega:hover > .oan-nav__caret::before,
.oan-nav__item--mega:has(> .oan-mega:focus-within) > .oan-nav__caret::before {
transform: translateY(-2px) rotate(45deg);
border-color: var(--muted);
}
.oan-sub-toggle:checked ~ .oan-nav__caret::before {
transform: translateY(1px) rotate(-135deg);
border-color: var(--action);
}
.oan-nav__item > .oan-mega,
.oan-nav__item--narrow > .oan-mega {
position: static;
display: none;
flex: 1 1 100%;
width: auto;
max-width: none;
margin: 0;
opacity: 1;
visibility: visible;
transform: none;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
transition: none;
}
.oan-nav__item--narrow:hover > .oan-mega,
.oan-nav__item--narrow > .oan-mega:focus-within,
.oan-nav__item--narrow > .oan-sub-toggle:checked ~ .oan-mega { transform: none; }
.oan-mega::before { display: none; }
.oan-sub-toggle:checked ~ .oan-mega { display: block; }
.oan-mega__inner {
grid-auto-flow: row;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--s4) var(--s5);
max-height: none;
overflow: visible;
padding: 0 0 var(--s4);
}
.oan-mega__more { padding-top: var(--s2); }
.oan-header__actions > .oan-header__login,
.oan-header__actions > .oan-header__cta { display: none; }
.home .oan-header__actions { display: none; }
.oan-header__actions form.oan-search { flex: 0 1 340px; min-width: 200px; max-width: 340px; }
.oan-nav__item--mobile { display: flex; }
.oan-nav__item--cta { margin-top: var(--s3); }
.oan-nav__item--cta .oan-btn { width: 100%; justify-content: center; }
}
@media (max-width: 900px) {
:root {
--t-3xl: 2.5rem;
--t-2xl: 2rem;
--t-xl: 1.5rem;
}
.oan-t-6, .oan-t-4, .oan-t-3 { grid-column: span 12; }
.oan-profile-body { grid-template-columns: 1fr; }
.oan-profile-body:has(> .oan-links) > .oan-profile-main,
.oan-profile-body:has(> .oan-links) > .oan-profile-rail,
.oan-profile-body > .oan-links { grid-column: auto; grid-row: auto; }
.oan-cards, .oan-grid--3, .oan-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-cta { grid-template-columns: minmax(0, 1fr); }
.oan-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-filter__toggle { display: flex; }
.oan-filter__fields,
.oan-filter__actions { display: none; }
.oan-filter__toggle-input:checked ~ .oan-filter__fields { display: grid; }
.oan-filter__toggle-input:checked ~ .oan-filter__actions { display: flex; }
.oan-scorecard { padding: var(--s5); }
.oan-weights { grid-template-columns: minmax(0, 1fr); }
.oan-weights__item:nth-child(2) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
:root { --gutter: var(--s4); }
body {
--wp--style--root--padding-left: var(--s4);
--wp--style--root--padding-right: var(--s4);
}
.oan-cards, .oan-grid--3, .oan-grid--4,
.oan-footer__grid { grid-template-columns: 1fr; }
.oan-row {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"score"
"main"
"cta";
gap: 0;
padding: 0;
}
.oan-row > .oan-score-rail { grid-area: score; }
.oan-row__main { grid-area: main; }
.oan-row__side { grid-area: cta; }
.oan-row > .oan-score-rail {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"dial band"
"dial label";
align-content: center;
column-gap: var(--s3);
row-gap: 0;
padding: var(--s3) var(--s5);
border-right: 0;
border-bottom: 1px solid var(--line);
text-align: start;
}
.oan-row > .oan-score-rail .oan-score-rail__dial {
grid-area: dial;
width: 52px;
height: 52px;
}
.oan-row > .oan-score-rail .oan-score-rail__value { font-size: var(--t-lg); }
.oan-row > .oan-score-rail .oan-score-rail__band  { grid-area: band; align-self: end; }
.oan-row > .oan-score-rail .oan-score-rail__label { grid-area: label; align-self: start; }
.oan-row__side { gap: var(--s1); padding: 0 var(--s4) var(--s3); }
.oan-row__main {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--s3);
padding: var(--s4) var(--s4) var(--s3);
}
.oan-row__body { display: contents; }
.oan-row__head { margin: 0; }
.oan-row__excerpt { margin: 0; }
.oan-row__excerpt,
.oan-row__meta { grid-column: 1 / -1; }
.oan-row__logo { width: 48px; height: 48px; }
.oan-row__actions { flex-direction: row; }
.oan-row__side .oan-btn { flex: 1 1 0; min-width: 0; }
.oan-method { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.oan-method > :not(h2) { grid-column: auto; }
.oan-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.oan-header__inner {
flex-wrap: wrap;
gap: var(--s3);
row-gap: var(--s2);
}
.oan-header__brand { flex: 1 1 auto; min-width: 0; }
.oan-nav-burger { order: 1; }
.oan-header__actions { order: 2; }
.oan-header__nav {
left: 0;
right: 0;
width: auto;
border-radius: 0 0 var(--radius) var(--radius);
max-height: calc(100vh - 124px);
max-height: calc(100dvh - 124px);
}
.oan-header__actions form.oan-search { flex: 1 1 100%; max-width: none; }
.oan-header__actions {
flex: 1 1 100%;
flex-wrap: wrap;
justify-content: flex-start;
margin-left: 0;
min-width: 0;
gap: var(--s2);
}
.oan-header__actions .oan-search { flex: 1 1 100%; order: 3; min-width: 0; }
.oan-header__actions .oan-btn { width: auto; flex: 0 0 auto; }
.oan-header__cta { padding-inline: var(--s4); }
.oan-brand__full { min-width: 0; overflow-wrap: anywhere; }
.oan-tile { padding: var(--s4); }
.oan-tray__inner { flex-wrap: wrap; gap: var(--s3); }
.oan-tray__list { display: none; }
.oan-acard { padding: var(--s4); }
.oan-tile:has(.oan-acard) { padding: var(--s3); }
.oan-acard__head { gap: var(--s3); }
.oan-acard__score .oan-score-chip { width: 52px; }
.oan-acard .oan-acard__facts .oan-fact { padding: 0 10px; }
.oan-acard .oan-acard__facts dd { font-size: var(--t-sm); }
.oan-stats--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-brand__logo { height: 36px; }
.oan-footer__brand img { height: 42px; }
}
@media (max-width: 400px) {
.oan-btn { width: 100%; justify-content: center; }
.oan-btn--sm { width: auto; }
}
@media (pointer: coarse) {
.oan-nav__caret { min-width: 32px; min-height: 32px; }
.oan-btn.oan-btn,
.oan-nav-burger,
.oan-header__login,
.oan-filter__toggle,
.oan-search button[type="submit"],
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
.oan-field select,
.oan-field input:not([type="checkbox"]):not([type="radio"]),
.oan-field textarea {
min-height: 44px;
}
.oan-consent label,
.oan-field label:has(input[type="checkbox"]),
.oan-field label:has(input[type="radio"]) {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.oan-header__brand,
.oan-facet__go a,
.oan-insight__go a,
.oan-rating,
a.oan-rating,
.oan-links li a,
.oan-footer__col li a,
.oan-pagehead__route li a,
.oan-breadcrumbs li a,
.oan-compare__name a,
.oan-listing-order a,
.oan-tile__head a,
.oan-tile__foot a,
.oan-strip__more a,
.oan-strip__col li a,
.oan-byline a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.oan-row__pick {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
main form.oan-search button[type="submit"] { min-height: 44px; }
.pmpro.pmpro .pmpro_btn.pmpro_btn-plain {
min-width: 44px;
min-height: 44px;
}
.tribe-common .tribe-common-c-btn-border.tribe-events-c-subscribe-dropdown__button { padding-block: 0; }
.tribe-events .tribe-events-c-subscribe-dropdown__button-text.tribe-events-c-subscribe-dropdown__button-text { min-height: 44px; }
.oan-popular__chip,
.oan-browse__link,
.oan-card__cat > a,
.oan-card__id h3 a,
.oan-footer__brand > a,
.oan-shortlist__name,
.oan-disclosure a,
.oan-notfound__places a,
.oan-search-list a,
.oan-card--folder h3 a,
.oan-row__name a,
.oan-expertise h3 a,
.oan-facts-table td a { position: relative; }
.oan-popular__chip::after,
.oan-browse__link::after,
.oan-card__cat > a::after,
.oan-card__id h3 a::after,
.oan-footer__brand > a::after,
.oan-shortlist__name::after,
.oan-disclosure a::after,
.oan-notfound__places a::after,
.oan-search-list a::after,
.oan-card--folder h3 a::after,
.oan-row__name a::after,
.oan-expertise h3 a::after,
.oan-facts-table td a::after {
content: "";
position: absolute;
inset: 50% 0 auto;
min-height: 100%;
height: 44px;
transform: translateY(-50%);
}
.login-remember label {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.oan-field input, .oan-field select, .oan-field textarea,
.oan-filter select, .oan-filter input[type="text"],
.oan-form-row input, .oan-form-row select, .oan-form-row textarea,
form.oan-search input[type="search"],
.oan-header form.oan-search input[type="search"],
.pmpro.pmpro .pmpro_form_input { font-size: var(--t-base); }
}
@media (max-width: 1200px) {
.oan-account-grid--wide-first { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.oan-account {
grid-template-columns: minmax(0, 1fr);
gap: var(--s4);
}
.oan-account__rail {
position: static;
max-height: none;
overflow: visible;
padding: var(--s3);
gap: var(--s3);
}
.oan-account__who { padding: var(--s1) var(--s1) var(--s3); }
.oan-account__nav { gap: var(--s2); }
.oan-account__group { display: none; }
.oan-account__nav ul {
display: flex;
flex-wrap: wrap;
gap: var(--s1);
}
.oan-account__link {
min-height: 40px;
padding: var(--s2) var(--s3);
background: var(--surface-2);
border-radius: var(--radius-pill);
font-size: var(--t-sm);
white-space: nowrap;
}
.oan-account__nav .oan-account__link[aria-current="page"] {
background: var(--ink);
color: var(--on-dark);
box-shadow: none;
}
.oan-account__link[aria-current="page"] .oan-account__count {
background: var(--ink-2);
color: var(--on-dark);
}
.oan-account__nav .oan-account__sub { display: none; }
.oan-login { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.oan-account__main { gap: var(--s4); }
.oan-account-panel { gap: var(--s3); }
.oan-slots { grid-template-columns: minmax(0, 1fr); }
.oan-slots__edit { grid-column: auto; grid-row: auto; }
.oan-slot { min-width: 72px; }
.oan-account-mirror {
margin-inline: -16px;
padding: 0;
background: none;
}
.oan-account-panel .oan-badge-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.oan-fields--2,
.oan-fields--3 { grid-template-columns: minmax(0, 1fr); }
.oan-savebar {
bottom: 0;
padding: var(--s3) var(--s4);
border-radius: var(--radius) var(--radius) 0 0;
}
.oan-savebar .oan-btn { width: 100%; }
.oan-savebar__note { display: none; }
.oan-pick__opts { grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); }
.oan-account-search__row { flex-wrap: wrap; }
.oan-account-search__row .oan-btn { flex: 1 1 100%; }
.oan-pick--long .oan-pick__box { max-height: 300px; }
}
@media (pointer: coarse) {
.oan-account__link { min-height: 44px; }
.oan-pick__opts .oan-check { min-height: 44px; }
}
@media (max-width: 1100px) {
.oan-brief-layout { grid-template-columns: minmax(0, 1fr); }
.oan-brief-aside {
position: static;
order: -1;
}
}
@media (max-width: 1024px) {
.oan-task {
grid-template-columns: minmax(0, 1fr);
gap: var(--s5);
}
.oan-task__intro { max-width: none; }
.oan-task:has(input[name="action"][value="oan_contact"]) { gap: 0; }
.oan-task:has(input[name="action"][value="oan_contact"]) > .oan-task__intro { display: contents; }
.oan-task:has(input[name="action"][value="oan_contact"]) > .oan-task__side {
order: 1;
margin-block: var(--s3) var(--s6);
}
.oan-task:has(input[name="action"][value="oan_contact"]) > .oan-task__intro > h2:nth-of-type(2),
.oan-task:has(input[name="action"][value="oan_contact"]) > .oan-task__intro > h2:nth-of-type(2) ~ * { order: 2; }
.oan-checkout-page .pmpro.pmpro #pmpro_form { grid-template-columns: minmax(0, 1fr); }
.oan-checkout-page .pmpro.pmpro #pmpro_form > #pmpro_pricing_fields {
grid-column: 1;
grid-row-end: auto;
position: static;
}
}
@media (max-width: 640px) {
.oan-brief-form .oan-form-row,
.oan-brief-form .oan-form-row--3 { grid-template-columns: minmax(0, 1fr); }
.oan-options { grid-template-columns: repeat(auto-fill, minmax(min(104px, 100%), 1fr)); }
.oan-form-submit .oan-btn { width: 100%; }
}
@media (pointer: coarse) {
.oan-options .oan-check { min-height: 44px; }
}
@media (max-width: 1024px) {
body.oan-doc-page:has(.oan-doc) { --wp--style--global--content-size: 645px; }
.oan-doc {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "body";
}
.oan-doc__toc { display: none; }
}
@media (max-width: 640px) {
.tribe-events.tribe-events.tribe-events .tribe-events-calendar-list__event-row { padding: var(--s4) var(--s2); }
.tribe-events-pg-template .tribe-events-single .tribe-events-event-meta.primary { padding: var(--s4); }
}
@media (max-width: 1280px) {
.oan-netbar {
grid-template-columns: minmax(0, 1fr);
gap: var(--s4);
}
.oan-netbar__title { max-width: none; }
.oan-browse__atlas { gap: var(--s6); }
.oan-evidence__row { gap: var(--s6); }
}
@media (max-width: 1024px) {
.oan-evidence__row,
.oan-proof__inner,
.oan-joinband { grid-template-columns: minmax(0, 1fr); }
.oan-proof__inner { row-gap: var(--s7); }
.oan-netbar__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: var(--s3);
}
.oan-proof__voices,
.oan-proof__briefs {
grid-row: auto;
grid-template-rows: none;
}
.oan-evidence .oan-scorecard__figure { max-width: none; }
}
@media (max-width: 1100px) {
.oan-browse__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-browse__services > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.oan-reads .oan-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-reads .oan-insight:first-child {
grid-column: 1 / -1;
grid-row: auto;
}
.oan-reads .oan-insight:not(:first-child) { grid-template-columns: minmax(0, 1fr); }
.oan-reads .oan-insight:not(:first-child) .oan-insight__media {
margin: 0;
border: 0;
border-radius: 0;
}
.oan-reads .oan-insights:not(:has(.oan-insight__media)) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.oan-netbar { padding: var(--s5); }
.oan-netbar__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: var(--s3);
}
.oan-netbar__link {
grid-template-columns: minmax(0, 1fr);
row-gap: 6px;
}
.oan-netbar__icon { grid-row: auto; }
.oan-browse__services,
.oan-browse__atlas,
.oan-proof__quotes,
.oan-joinband .oan-benefits,
.oan-evidence .oan-gates .oan-gates__list { grid-template-columns: minmax(0, 1fr); }
.oan-browse__atlas {
gap: var(--s5);
padding: var(--s5);
}
.oan-proof__quotes > :first-child blockquote { font-size: var(--t-lg); }
.oan-evidence,
.oan-proof { padding-block: var(--s7); }
.oan-evidence__title { font-size: 1.75rem; }
.oan-joinband .oan-joinband__plans { padding: var(--s6) var(--s5); }
.oan-ledger { padding: var(--s4); }
.oan-reads .oan-insights { grid-template-columns: minmax(0, 1fr); }
.oan-reads .oan-insight:not(:first-child) .oan-insight__body { padding: var(--s4); }
.oan-endcta__inner {
padding: var(--s7) var(--s5);
border-radius: var(--radius-lg);
}
}
@media (max-width: 1100px) {
.oan-bento > .oan-tile:has(> .oan-prose):has(+ .oan-tile > .oan-faq),
.oan-bento > .oan-tile:has(> .oan-prose) + .oan-tile:has(> .oan-faq) { grid-column: 1 / -1; }
.oan-method {
grid-template-columns: 48px minmax(0, 1fr);
grid-template-areas:
"icon head"
"icon text"
"note note";
}
.oan-method > .oan-method__note { margin-top: var(--s3); }
}
@media (max-width: 640px) {
.oan-doc__body { padding: var(--s5); }
.oan-profile-main .oan-featured .oan-cards > .oan-case:only-child { display: flex; }
.oan-profile-main > .entry-content,
.oan-profile-main > .oan-expertise,
.oan-profile-main > .oan-features { padding: var(--s5); }
.oan-gates--panel .oan-gates__list { grid-template-columns: minmax(0, 1fr); }
.oan-method {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"icon"
"head"
"text"
"note";
padding: var(--s5);
}
.oan-links { padding: var(--s5); }
.oan-cta__panel { padding: var(--s6) var(--s5); }
}
@media (max-width: 640px) {
.oan-shortlist__table {
min-width: calc(120px + var(--n, 2) * 190px);
font-size: var(--t-xs);
}
.oan-shortlist__corner { width: 120px; }
.oan-shortlist__table th,
.oan-shortlist__table td { padding: var(--s3); }
.oan-shortlist__name { font-size: var(--t-base); }
body.has-oan-tray { padding-bottom: 120px; }
.oan-tray__hint { display: none; }
}
@media (max-width: 640px) {
.oan-facet:not(.oan-facet--lead, .oan-facet--row) {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
gap: var(--s2) var(--s3);
}
.oan-facet:not(.oan-facet--lead, .oan-facet--row) > * { grid-column: 2; }
.oan-facet:not(.oan-facet--lead, .oan-facet--row) > .oan-facet__mark {
grid-column: 1;
grid-row: 1 / span 3;
width: 40px;
height: 40px;
margin: 0;
}
.oan-facet:not(.oan-facet--lead, .oan-facet--row) .oan-facet__stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: end;
}
.oan-facet:not(.oan-facet--lead, .oan-facet--row) .oan-facet__go { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
[data-oan-reveal] { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
.admin-bar .wp-block-template-part:has(> .oan-header) { top: 0; }
}
@media (max-width: 640px) {
.oan-footer__inner {
grid-template-columns: 1fr;
gap: 0;
}
.oan-footer__col { border-top: 1px solid var(--line-dark); }
.oan-footer__col:last-child { border-bottom: 1px solid var(--line-dark); }
.oan-foot-toggle {
display: block;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}
.oan-footer__col h3 { margin: 0; }
.oan-footer__col h3 label {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 52px;
cursor: pointer;
}
.oan-footer__col h3 label::after {
content: "";
width: 8px;
height: 8px;
margin-right: 4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur) var(--ease);
}
.oan-foot-toggle:checked ~ h3 label::after { transform: translateY(2px) rotate(-135deg); }
.oan-foot-toggle:focus-visible ~ h3 label {
outline: 2px solid var(--brand-on-dark);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.oan-foot-toggle:not(:checked) ~ ul { display: none; }
.oan-foot-toggle:checked ~ ul { padding-bottom: var(--s3); }
}
@media (max-width: 640px) {
.oan-facet--row .oan-facet__stats .oan-stat--text {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.oan-profile__identity { align-items: start; }
.oan-table-wrap:has(> .oan-plans)::before {
content: "Swipe sideways to compare all four plans \2192";
display: block;
position: sticky;
left: 0;
margin-bottom: var(--s3);
font-size: var(--t-xs);
font-weight: 600;
color: var(--muted);
}
.oan-plans th,
.oan-plans td { padding: var(--s3) var(--s2); }
.oan-plans thead th:not(:first-child),
.oan-plans tbody td { min-width: 118px; }
.oan-plans thead th:first-child,
.oan-plans tbody th {
position: sticky;
left: 0;
z-index: 1;
width: 104px;
min-width: 104px;
background: var(--surface);
font-size: var(--t-xs);
}
.oan-plan__cta {
white-space: normal;
text-align: center;
justify-content: center;
min-height: 44px;
padding-inline: var(--s3);
}
.oan-card__actions a,
.oan-shortlist__remove,
.oan-scorecard__more {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.oan-card__cat > a,
.oan-card__id h3 a,
.oan-disclosure a,
.oan-shortlist__id a,
.pmpro_actions_nav a {
display: inline-block;
padding-block: 10px;
margin-block: -10px;
}
}
@media (min-width: 641px) and (width < 1101px) {
.oan-plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 641px) {
.oan-plan-card .oan-plan-card__rest { display: grid; }
.oan-plan-card .oan-more__toggle,
.oan-plan-card .oan-more__label { display: none; }
}
@media (pointer: coarse) {
.oan-finder__matches a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.oan-finder__matches { gap: 0; }
}
@media (max-width: 640px) {
.oan-finder { grid-template-columns: minmax(0, 1fr); }
.oan-finder .oan-finder__go .oan-btn { width: 100%; }
.oan-join-claim { padding: var(--s5) var(--s4); }
.oan-table .oan-rate__price { display: none; }
.oan-table .oan-rate__inline-price {
display: block;
margin-top: var(--s1);
font-size: var(--t-meta);
color: var(--muted);
}
.oan-table.oan-rate { display: block; min-width: 0; }
.oan-table.oan-rate thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.oan-table.oan-rate tbody,
.oan-table.oan-rate tr,
.oan-table.oan-rate td { display: block; }
.oan-table.oan-rate tr { padding-block: var(--s3); }
.oan-table.oan-rate tr + tr { border-top: 1px solid var(--line); }
.oan-table.oan-rate td { padding: var(--s1) 0; border: 0; }
.oan-table.oan-rate .oan-rate__price { display: none; }
.oan-table.oan-rate td[data-label]::before {
content: attr(data-label) / "";
display: block;
font-size: var(--t-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
}
@media (min-width: 1101px) {
.oan-table-wrap:has(> .oan-plans) { display: block; }
.oan-plan-cards { display: none; }
.oan-plans { table-layout: fixed; }
.oan-plans thead th:first-child { width: 24%; }
}
@media (max-width: 1240px) {
.oan-mega__main,
.oan-mega__col--latest,
.oan-mega__col--marks,
.oan-mega__aside { grid-column: 1 / -1; }
.oan-mega__tabpanel {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--s4) var(--s5);
}
.oan-mega__all { margin-left: 0; }
.oan-mega__aside {
padding: var(--s4);
}
.oan-mega__aside > .oan-mega__label,
.oan-mega__who-list,
.oan-mega__cover { display: none; }
.oan-mega__cta {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.oan-mega__col .oan-mega__posts {
grid-template-columns: minmax(0, 1fr);
gap: var(--s3);
}
.oan-mega__col .oan-mega__marks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
.oan-mega__tab,
.oan-mega__all,
.oan-mega__tabfoot a,
.oan-mega__nudge a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.oan-mega__event,
.oan-mega__post,
.oan-mega__who-list a { min-height: 44px; }
}
@container oan-head (max-width: 860px) {
.oan-pagehead .oan-pagehead__band--split {
--hang: var(--s7);
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto var(--hang) auto;
}
.oan-pagehead .oan-pagehead__band--split::before { grid-area: 1 / 1 / 3 / -1; }
.oan-pagehead .oan-pagehead__band--split > .oan-pagehead__lead { padding-bottom: var(--s5); }
.oan-pagehead .oan-pagehead__band--split > .oan-pagehead__card {
grid-area: 2 / 1 / 4 / 2;
align-self: start;
margin-top: 0;
}
.oan-pagehead .oan-pagehead__band--bar {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto var(--hang);
}
.oan-pagehead .oan-pagehead__band--bar::before { grid-area: 1 / 1 / 4 / -1; }
.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__lead { padding-bottom: var(--s2); }
.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__side {
grid-area: 2 / 1;
align-self: auto;
padding-block: var(--s4) var(--s5);
}
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--s3);
}
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions .oan-btn:nth-last-child(2) { grid-column: 1 / -1; }
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions .oan-pagehead__cta-note {
grid-column: 1 / -1;
order: 1;
margin: 0;
}
.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__card {
grid-area: 3 / 1 / 5 / -1;
grid-template-columns: minmax(0, 1fr);
row-gap: var(--s3);
padding: var(--s4);
}
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__facts {
grid-auto-flow: row;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
gap: var(--s3) var(--s4);
}
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__fact,
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__fact:last-child {
padding: 0;
border-left: 0;
}
.oan-pagehead .oan-pagehead__band--bar .oan-pagehead__card-foot {
padding: var(--s3) 0 0;
border-left: 0;
border-top: 1px solid var(--line);
}
.oan-pagehead .oan-pagehead__claim a { display: inline; }
}
@container oan-head (max-width: 520px) {
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions { grid-template-columns: minmax(0, 1fr); }
.oan-pagehead .oan-pagehead__side .oan-pagehead__actions .oan-pagehead__cta-note {
order: 0;
margin-bottom: var(--s2);
}
}
@container oan-head (max-width: 860px) {
.oan-homehead__band {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto var(--s7) auto auto;
}
.oan-homehead__band::before { grid-area: 1 / 1 / 3 / -1; }
.oan-homehead__lead { padding-block: var(--s7) var(--s5); }
.oan-homehead__band > .oan-find {
grid-area: 2 / 1 / 4 / 2;
margin-top: 0;
}
.oan-homehead__under { grid-area: 4 / 1; }
}
@media (max-width: 640px) {
.oan-pagehead .oan-pagehead__lead { padding-top: var(--s5); }
.oan-pagehead .oan-pagehead__band:not(.oan-pagehead__band--split, .oan-pagehead__band--bar) > .oan-pagehead__lead { padding-bottom: var(--s6); }
.oan-pagehead .oan-pagehead__statement,
.oan-pagehead .oan-citable { font-size: var(--t-base); }
.oan-pagehead .oan-pagehead__cta-block {
display: grid;
justify-items: stretch;
gap: var(--s2);
margin-top: var(--s4);
}
.oan-pagehead .oan-pagehead__lead .oan-pagehead__cta-block .oan-pagehead__cta-note {
max-width: none;
text-align: center;
}
.oan-pagehead .oan-pagehead__lead .oan-profile__logo {
width: 56px;
height: 56px;
}
.oan-pagehead--profile .oan-pagehead__lead:has(> .oan-profile__identity) { column-gap: var(--s4); }
.oan-homehead__lead { padding-top: var(--s6); }
.oan-pagehead .oan-pagehead__card { padding-inline: var(--s4); }
.oan-homehead__stat { padding: 0 var(--s4); }
.oan-homehead__stat dd { font-size: var(--t-lg); }
}
@media (pointer: coarse) {
.oan-pagehead .oan-glance__row,
.oan-pagehead .oan-glance__rows--flat .oan-glance__row { min-height: 44px; }
.oan-pagehead .oan-pagehead__claim a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
@media (max-width: 1240px) {
body:has(.oan-nav-toggle:checked) .oan-tray { display: none; }
}
@media (max-width: 640px) {
.oan-bento > .oan-t-12 { padding: var(--s6) var(--s5); }
.oan-method > .oan-method__note { padding: var(--s4); }
.pmpro.pmpro .pmpro_card_title,
.pmpro.pmpro .pmpro_card_content,
.pmpro.pmpro .pmpro_card_actions { padding-inline: var(--s5); }
}
@media (max-width: 900px) {
.oan-task__side .oan-brief-form,
.oan-task__side .oan-agency-form,
.oan-access,
.oan-brief-form--steps { padding: var(--s5); }
}
@media (min-width: 1101px) {
.oan-editorial:has(> .oan-editorial__col + .oan-editorial__col) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-editorial > .oan-editorial__col:only-child > .oan-editorial__section:only-child {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
column-gap: var(--s7);
}
.oan-bento > .oan-tile:has(> .oan-editorial) + .oan-tile > .oan-faq > .oan-faq__cols:has(> .oan-faq__col + .oan-faq__col) {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--s5);
align-items: start;
}
}
@media (max-width: 360px) {
.oan-brand__logo { height: 30px; }
}
@media all {
.oan-method__toggle {
display: block;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}
.oan-method {
position: relative;
grid-template-columns: 48px minmax(0, 1fr);
grid-template-areas: "icon head";
align-items: center;
row-gap: 0;
padding: var(--s4) var(--s5);
}
.oan-method:has(> .oan-method__toggle:checked) {
grid-template-areas:
"icon head"
"text text"
"note note";
row-gap: var(--s3);
padding-bottom: var(--s5);
}
.oan-method > p { display: none; }
.oan-method > .oan-method__toggle:checked ~ p { display: block; }
.oan-method h2 label {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
min-height: 44px;
cursor: pointer;
}
.oan-method h2 label::after {
content: "";
flex: none;
width: 8px;
height: 8px;
margin-right: 4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur) var(--ease);
}
.oan-method__toggle:checked ~ h2 label::after { transform: translateY(2px) rotate(-135deg); }
.oan-method__toggle:focus-visible ~ h2 label {
outline: 2px solid var(--action);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
main > .oan-method.oan-method { margin-block-end: var(--s5); }
}
@media (max-width: 640px) {
.oan-header__actions { display: none; }
.oan-nav-toggle:checked ~ .oan-header__actions { display: flex; }
.oan-pagehead .oan-glance__label,
.oan-pagehead .oan-glance__rows { display: none; }
.oan-facet--row .oan-facet__stats .oan-stat--text { display: none; }
.oan-row .oan-row__actions .oan-btn--primary { flex: 0 0 auto; }
.oan-row .oan-row__actions .oan-btn--secondary { flex: 1 1 auto; padding-inline: var(--s3); }
.oan-row .oan-row__actions .oan-btn { width: auto; }
}
@media (pointer: coarse) {
.oan-results__chip,
.oan-results__clear { display: inline-flex; align-items: center; min-height: 44px; }
.oan-faq__item > summary { min-height: 44px; align-items: center; }
.oan-faq__item > summary::after { margin-top: 0; }
.oan-row .oan-row__actions .oan-btn--secondary { min-height: 44px; }
.oan-pagination a,
.oan-pagination span { min-width: 44px; min-height: 44px; }
.oan-account-pmpro .pmpro.pmpro .pmpro_card_actions a { min-height: 44px; }
.wp-block-table td > a,
.oan-account-plan__links a,
#tribe-events-footer .tribe-events-sub-nav li a {
display: inline-block;
padding-block: 11px;
margin-block: -11px;
}
}
@media (pointer: coarse) {
.wp-block-list > li > a:only-child { padding-block: 12px; }
}
#tribe-events-footer .tribe-events-sub-nav li a { font-size: var(--t-sm); }
@media (min-width: 1241px) and (max-height: 680px) {
.oan-mega__col:has(> .oan-mega__more) > ul > li:nth-child(n+9) { display: none; }
}
@media (min-width: 1241px) and (max-height: 620px) {
.oan-mega__col:has(> .oan-mega__more) > ul > li:nth-child(n+7) { display: none; }
}
@media (min-width: 1241px) and (max-height: 560px) {
.oan-mega__col:has(> .oan-mega__more) > ul > li:nth-child(n+6) { display: none; }
.oan-mega__who-list > li:nth-child(n+3) { display: none; }
}
@media (max-width: 1240px) {
.oan-mega__col-toggle {
display: block;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
opacity: 0;
}
.oan-mega__col-toggle:focus-visible + .oan-mega__label > label {
outline: 2px solid var(--action);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.oan-nav:has(> .oan-nav__item > .oan-sub-toggle:checked) > .oan-nav__item:not(:has(> .oan-sub-toggle:checked)) { display: none; }
.oan-nav .oan-nav__item:has(> .oan-sub-toggle:checked) { border-bottom: 0; }
.oan-nav .oan-nav__item:has(> .oan-sub-toggle:checked) > .oan-nav__caret {
order: -1;
display: inline-flex;
align-items: center;
gap: var(--s2);
width: auto;
padding-right: var(--s3);
font-size: var(--t-body-sm);
font-weight: 600;
color: var(--action);
}
.oan-nav .oan-nav__item:has(> .oan-sub-toggle:checked) > .oan-nav__caret::before {
transform: translateX(2px) rotate(135deg);
border-color: var(--action);
}
.oan-nav .oan-nav__item:has(> .oan-sub-toggle:checked) .oan-nav__back { display: inline; }
.oan-nav .oan-nav__item:has(> .oan-sub-toggle:checked) > a {
justify-content: flex-end;
font-size: var(--t-body-sm);
color: var(--text);
}
.oan-nav .oan-nav__item:has(> .oan-sub-toggle:checked) > a::after { content: "\2192"; }
.oan-mega__inner,
.oan-mega__tabpanel {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.oan-mega__tabpanel { margin-top: var(--s3); }
.oan-mega__col:not(:has(> .oan-mega__col-toggle:checked)) > :not(.oan-mega__col-toggle, .oan-mega__label) { display: none; }
.oan-mega__col--cont { display: none; }
.oan-mega__col:has(> .oan-mega__col-toggle:checked) + .oan-mega__col--cont { display: flex; }
.oan-mega__col:not(.oan-mega__col--cont) { border-bottom: 1px solid var(--line); }
.oan-mega .oan-mega__label {
margin: 0;
font-size: var(--t-base);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
color: var(--text);
}
.oan-mega .oan-mega__label > label {
display: flex;
align-items: center;
gap: var(--s2);
min-height: 48px;
pointer-events: auto;
cursor: pointer;
}
.oan-mega .oan-mega__label-text { flex: 1 1 auto; }
.oan-mega .oan-mega__label > label::after {
content: "";
flex: 0 0 auto;
width: 7px;
height: 7px;
margin-right: 16px;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(-45deg);
}
.oan-mega__aside { display: none; }
.oan-mega__main { gap: 6px; }
.oan-mega__tab {
padding: 6px 10px;
font-size: var(--t-sm);
}
.oan-mega__tabpanel { padding-top: 0; }
.oan-nav .oan-nav__item:has(.oan-mega__col-toggle:checked) > a,
.oan-nav .oan-nav__item:has(.oan-mega__col-toggle:checked) > .oan-nav__caret { display: none; }
.oan-mega:has(.oan-mega__col-toggle:checked) :is(.oan-mega__tab, .oan-mega__all, .oan-mega__country, .oan-mega__tabfoot, .oan-mega__aside) { display: none; }
.oan-mega:has(.oan-mega__col-toggle:checked) .oan-mega__col:not(.oan-mega__col--cont):not(:has(> .oan-mega__col-toggle:checked)) { display: none; }
.oan-mega:has(.oan-mega__col-toggle:checked) .oan-mega__tabpanel {
margin-top: 0;
border-top: 0;
}
.oan-mega__col:has(> .oan-mega__col-toggle:checked) { border-bottom: 0; }
.oan-mega__col:has(> .oan-mega__col-toggle:checked) > .oan-mega__label {
margin-bottom: var(--s2);
border-bottom: 1px solid var(--line);
}
.oan-mega__col:has(> .oan-mega__col-toggle:checked) > .oan-mega__label > label::after { display: none; }
.oan-mega__col:has(> .oan-mega__col-toggle:checked) .oan-mega__back {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--t-body-sm);
color: var(--action);
}
.oan-mega__col:has(> .oan-mega__col-toggle:checked) .oan-mega__back::before {
content: "";
width: 7px;
height: 7px;
margin-left: 4px;
border-right: 2px solid var(--action);
border-bottom: 2px solid var(--action);
transform: rotate(135deg);
}
.oan-mega__col:has(> .oan-mega__col-toggle:checked) .oan-mega__label-text {
text-align: right;
font-size: var(--t-body-sm);
}
.oan-mega__col:has(> .oan-mega__col-toggle:checked) > .oan-mega__more { padding-top: var(--s3); }
}
@media (min-width: 1241px) {
.oan-nav .oan-nav__item > a {
font-weight: 600;
padding: var(--s2) var(--s2);
border-radius: var(--radius-sm);
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.oan-nav .oan-nav__item > a:hover,
.oan-nav .oan-nav__item--mega:hover > a,
.oan-nav .oan-nav__item--mega:has(> .oan-sub-toggle:checked) > a {
background: var(--bone);
color: var(--action-dark);
}
.oan-nav .oan-nav__item > a.is-current {
color: var(--action-dark);
text-decoration: none;
background: var(--surface-3);
}
.oan-header .oan-mega {
border: 1px solid var(--line);
border-radius: 20px;
box-shadow: 0 2px 4px rgba(17, 34, 65, .06), 0 24px 48px rgba(17, 34, 65, .14);
}
.oan-header .oan-mega__inner { padding: var(--s6); }
.oan-header .oan-mega__label {
font-size: var(--t-xs);
font-weight: 800;
letter-spacing: 0;
text-transform: none;
color: var(--muted);
}
.oan-header .oan-mega__col li > a {
border-radius: 10px;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.oan-header .oan-mega__col li > a:hover { background: var(--bone); color: var(--action-dark); }
.oan-header .oan-mega__more a { font-weight: 700; color: var(--action-dark); }
.oan-header .oan-mega__nudge {
margin-top: var(--s3);
padding: var(--s3) var(--s4);
background: var(--bone);
border-radius: 14px;
font-size: var(--t-sm);
color: var(--muted);
white-space: normal;
}
.oan-header .oan-mega__nudge a { display: block; margin-top: 2px; font-weight: 700; color: var(--action-dark); }
}
@container oan-head (max-width: 860px) {
.oan-pagehead.oan-pagehead--photo .oan-pagehead__band--bar { grid-template-columns: minmax(0, 1fr); }
.oan-pagehead.oan-pagehead--photo .oan-pagehead__photo {
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
max-width: 100%;
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__band--bar > .oan-pagehead__side { padding-block: var(--s2) var(--s5); }
.oan-pagehead.oan-pagehead--photo .oan-pagehead__band--bar > .oan-pagehead__card {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "eye" "title" "label" "rows" "foot";
row-gap: var(--s2);
padding: var(--s4);
}
.oan-pagehead.oan-pagehead--photo .oan-pagehead__card > .oan-glance__rows { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1241px) and (max-width: 1400px) {
.oan-nav .oan-nav__item > a { padding-inline: 6px; }
.oan-header .oan-brand__logo { height: 38px; }
.oan-header .oan-header__inner { gap: var(--s4); }
.oan-header .oan-header__actions { padding-left: var(--s3); }
}
@media (min-width: 1241px) and (max-width: 1320px) {
.oan-nav .oan-nav__item > a { font-size: 14.5px; padding-inline: 4px; }
.oan-header .oan-brand__logo { height: 34px; }
.oan-header .oan-header__actions { gap: var(--s2); }
}
@media (max-width: 1240px) {
.oan-psections { position: static; margin-top: var(--s5); }
.oan-psections ul { flex-wrap: wrap; overflow-x: visible; }
.oan-psections a { padding: var(--s2) var(--s3); }
#oan-sec-about, #oan-sec-services, #oan-sec-similar, #oan-sec-next { scroll-margin-top: 80px; }
}
@media (max-width: 860px) {
.oan-planfind { grid-template-columns: minmax(0, 1fr); padding: var(--s5); border-radius: 22px; gap: var(--s5); }
}
@media (max-width: 1100px) {
.oan-nhero .oan-nhero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
.oan-nhero .oan-nhero__visual { aspect-ratio: 4 / 3; max-height: none; }
.oan-nhero .oan-nhero__float--a { left: 0; }
.oan-nplaces .oan-ncities, .oan-nservices .oan-nsvcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oan-nhow, .oan-njoin .oan-njoin__inner, .oan-ntrust .oan-ntrust__grid { grid-template-columns: minmax(0, 1fr); }
.oan-njoin .oan-njoin__ph { aspect-ratio: 16 / 9; max-width: 100%; }
.oan-ntrust .oan-ntrust__checks { grid-auto-rows: auto; }
}
@media (max-width: 680px) {
.oan-nhero { padding-top: var(--s5); }
.oan-nsearch .oan-nsearch__fields { grid-template-columns: minmax(0, 1fr); }
.oan-nsearch .oan-nsearch__go .oan-btn { width: 100%; justify-content: center; }
.oan-nhero .oan-nhero__visual { aspect-ratio: 1 / 1; }
.oan-nhero .oan-nhero__block { inset: 6% 0 4% 10%; border-radius: 26px; }
.oan-nhero .oan-nhero__photo { inset: 0 6% 14% 0; border-radius: 24px; }
.oan-nhero .oan-nhero__float { padding: var(--s2) var(--s3); max-width: 78%; }
.oan-nhero .oan-nhero__float b { font-size: 1.05rem; }
.oan-nhero .oan-nhero__num, .oan-nhero .oan-nhero__mark { width: 36px; height: 36px; }
.oan-nhero .oan-nhero__float--a { left: 2%; top: 4%; }
.oan-nhero .oan-nhero__float--b { right: 2%; bottom: 20%; }
.oan-nhero .oan-nhero__float--c { left: 2%; bottom: 0; }
.oan-nplaces .oan-ncities, .oan-nservices .oan-nsvcs { grid-template-columns: minmax(0, 1fr); }
.oan-nplaces .oan-ncity__ph { aspect-ratio: 16 / 9; }
.oan-nsec--ground { padding-block: var(--s7); }
.oan-ntrust .oan-ntrust__band { padding: var(--s5) var(--s4); border-radius: 26px; }
.oan-ntrust .oan-ntrust__pane { padding: var(--s5) var(--s4); }
.oan-njoin .oan-njoin__t { padding: var(--s6) var(--s4); }
.oan-nclose .oan-nclose__band { grid-template-columns: minmax(0, 1fr); padding: var(--s6) var(--s4); border-radius: 26px; }
.oan-nclose .oan-nclose__band::after { width: 110px; height: 110px; right: -55px; top: -55px; bottom: auto; }
}
@media (min-width: 1000px) {
.oan-listing:has(> .oan-row) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.oan-listing > .oan-row.oan-row { display: grid; grid-template-columns: minmax(0, 1fr) 232px; }
.oan-listing > .oan-row .oan-row__main.oan-row__main { align-items: flex-start; gap: var(--s5); padding: var(--s6); }
.oan-listing > .oan-row .oan-row__logo.oan-row__logo { width: 88px; height: 88px; border-radius: 18px; }
.oan-listing > .oan-row span.oan-row__logo.oan-row__logo { font-size: 1.5rem; }
.oan-listing > .oan-row .oan-row__name.oan-row__name { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.oan-listing > .oan-row .oan-row__excerpt.oan-row__excerpt { margin: var(--s2) 0 var(--s3); font-size: var(--t-base); max-width: 70ch; }
.oan-listing > .oan-row .oan-row__svcs.oan-row__svcs li {
background: #fff;
box-shadow: inset 0 0 0 1.5px var(--line);
font-weight: 600;
}
.oan-listing > .oan-row .oan-row__side.oan-row__side {
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: var(--s3);
margin: 0;
padding: var(--s5);
border-top: 0;
border-left: 1px solid var(--line);
}
.oan-listing > .oan-row .oan-row__actions.oan-row__actions { flex-direction: column; }
.oan-listing > .oan-row .oan-row__actions.oan-row__actions .oan-btn { width: 100%; justify-content: center; }
.oan-listing > .oan-row .oan-row__pick.oan-row__pick { justify-content: center; min-height: 32px; }
}
@container oan-head (max-width: 860px) {
.oan-pagehead.oan-pagehead .oan-pagehead__band--split > .oan-pagehead__card,
.oan-pagehead.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__card { margin-inline: var(--s4); }
.oan-pagehead.oan-pagehead .oan-pagehead__band--bar > .oan-pagehead__side { padding-inline: var(--s5); }
.oan-pagehead.oan-pagehead .oan-pagehead__band::before { border-radius: 22px; }
}
@media (max-width: 640px) {
.oan-table.oan-rate td[data-label]::before { text-transform: none; letter-spacing: normal; }
}
@container oan-head (max-width: 860px) {
.oan-pagehead.oan-pagehead--sided.oan-pagehead--sided .oan-pagehead__band { grid-template-columns: minmax(0, 1fr); }
.oan-pagehead.oan-pagehead--sided.oan-pagehead--sided .oan-pagehead__band > .oan-pagehead__side {
grid-area: 2 / 1;
padding-block: 0 var(--s6);
padding-inline: clamp(var(--s5), 3.4vw, var(--s8));
}
.oan-pagehead.oan-pagehead--sided.oan-pagehead--sided .oan-pagehead__band > .oan-pagehead__lead { padding-bottom: var(--s5); }
.oan-pagehead.oan-pagehead--sided.oan-pagehead--sided .oan-pagehead__band::before { grid-area: 1 / 1 / 3 / -1; }
}
@media (max-width: 900px) {
.oan-bento.oan-bento > .oan-t-3 > .oan-filter { display: block; padding: var(--s4); }
.oan-bento.oan-bento > .oan-t-3 > .oan-filter > .oan-filter__fields { grid-template-columns: minmax(0, 1fr); }
.oan-links.oan-links { padding: var(--s4); }
.oan-features.oan-features,
.oan-expertise.oan-expertise,
.oan-profile-rail .oan-table-wrap.oan-table-wrap { padding: var(--s4); }
}
@container oan-head (max-width: 860px) {
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__band { --strip: 110px; grid-template-columns: minmax(0, 1fr); }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__band::before { grid-area: 1 / 1 / 3 / -1; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead { padding-top: calc(var(--strip) - 48px); padding-bottom: var(--s5); }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__lead .oan-profile__logo { width: 96px; height: 96px; border-radius: 22px; }
.oan-pagehead.oan-pagehead--cover.oan-pagehead--cover.oan-pagehead--cover .oan-pagehead__band > .oan-pagehead__side {
grid-area: 2 / 1;
padding: 0 clamp(var(--s5), 3.4vw, var(--s7)) var(--s5);
}
}
@media (min-width: 1101px) {
.oan-editorial.oan-editorial:has(> .oan-editorial__col) { grid-template-columns: minmax(0, 1fr); }
.oan-editorial.oan-editorial > .oan-editorial__col { display: contents; }
.oan-editorial .oan-editorial__section.oan-editorial__section {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
column-gap: var(--s7);
row-gap: 0;
align-items: start;
}
.oan-editorial .oan-editorial__section.oan-editorial__section > h2 { grid-column: 1; grid-row: 1 / span 12; }
.oan-editorial .oan-editorial__section.oan-editorial__section > :not(h2) { grid-column: 2; }
.oan-editorial .oan-editorial__section.oan-editorial__section > :not(h2) ~ :not(h2) { margin-top: var(--s4); }
.oan-editorial .oan-editorial__section.oan-editorial__section + .oan-editorial__section { margin-top: 0; }
.oan-bento > .oan-tile:not(.oan-tile:has(> .oan-prose) + .oan-tile):has(> .oan-faq) { padding: var(--s7); }
.oan-bento > .oan-tile:not(.oan-tile:has(> .oan-prose) + .oan-tile) > .oan-faq.oan-faq {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
column-gap: var(--s7);
align-items: start;
}
.oan-bento > .oan-tile:not(.oan-tile:has(> .oan-prose) + .oan-tile) > .oan-faq.oan-faq > h2 { grid-column: 1; }
.oan-bento > .oan-tile:not(.oan-tile:has(> .oan-prose) + .oan-tile) > .oan-faq.oan-faq > :not(h2) { grid-column: 2; }
.oan-bento > .oan-tile:has(> .oan-editorial) + .oan-tile > .oan-faq.oan-faq > .oan-faq__cols.oan-faq__cols:has(> .oan-faq__col + .oan-faq__col),
.oan-bento > .oan-tile:not(.oan-tile:has(> .oan-prose) + .oan-tile) > .oan-faq.oan-faq > .oan-faq__cols.oan-faq__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
.oan-bento > .oan-tile:not(.oan-tile:has(> .oan-prose) + .oan-tile) > .oan-faq.oan-faq .oan-faq__col { gap: 0; }
}
@media (min-width: 900px) {
main > .oan-sec-head + .oan-cards > .oan-card:first-child:has(> .oan-card__media) {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
grid-auto-rows: min-content;
column-gap: var(--s7);
align-content: center;
}
main > .oan-sec-head + .oan-cards > .oan-card:first-child:has(> .oan-card__media) > .oan-card__media { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
main > .oan-sec-head + .oan-cards > .oan-card:first-child:has(> .oan-card__media) > :not(.oan-card__media) { grid-column: 2; }
main > .oan-sec-head + .oan-cards > .oan-card:first-child:has(> .oan-card__media) > :first-child + * { margin-top: var(--s4); }
main > .oan-sec-head + .oan-cards > .oan-card:first-child:has(> .oan-card__media) h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
}
@media (max-width: 640px) {
#tribe-events-content.tribe-events-single > .tribe_events { padding: var(--s5) var(--s4); }
}
@media (min-width: 1100px) {
.oan-footer .oan-footer__inner { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--s4); }
}
@media (max-width: 640px) {
.oan-wnext .oan-wnext__grid { gap: var(--s3); }
.oan-wnext .oan-wnext__card.oan-wnext__card {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: var(--s3);
row-gap: 2px;
min-height: 0;
padding: var(--s4);
align-items: center;
}
.oan-wnext .oan-wnext__card > .oan-wnext__title { grid-column: 1; grid-row: 1; font-size: var(--t-md); }
.oan-wnext .oan-wnext__card > .oan-wnext__text { grid-column: 1; grid-row: 2; }
.oan-wnext .oan-wnext__card > .oan-wnext__go { grid-column: 2; grid-row: 1 / span 2; }
}