:root {
--bg: #050505;
--bg-soft: #0d0d0d;
--panel: rgba(255, 255, 255, 0.04);
--panel-strong: rgba(255, 132, 0, 0.09);
--line: rgba(255, 132, 0, 0.28);
--text: #f8f8f8;
--muted: #b6b6b6;
--orange: #ff7a00;
--orange-bright: #ff8f1f;
--orange-deep: #c74f00;
--white-soft: #ededed;
--shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
--radius-xl: 28px;
--radius-lg: 22px;
--radius-md: 16px;
--max: 1240px;
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Base color for overscroll / rubber-band so the gradient on never
reveals the browser default white during scroll. */
background-color: #050505;
color-scheme: dark;
}
.site-light { color-scheme: light; }
body {
margin: 0;
color: var(--text);
font-family: "Syne", sans-serif;
min-height: 100vh;
background:
radial-gradient(circle at 78% 15%, rgba(255, 122, 0, 0.18), transparent 18%),
radial-gradient(circle at 82% 26%, rgba(199, 79, 0, 0.16), transparent 22%),
linear-gradient(180deg, #090909 0%, #050505 45%, #080808 100%);
position: relative;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.18;
pointer-events: none;
mask-image: radial-gradient(circle at center, black, transparent 82%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.shell {
width: min(calc(100% - 32px), var(--max));
margin: 0 auto;
}
.topbar {
position: sticky;
top: 0;
z-index: 12;
background: rgba(5, 5, 5, 0.86);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255, 122, 0, 0.14);
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 0.95rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
}
.brand__logo {
width: 44px;
height: 44px;
display: block;
flex: 0 0 auto;
filter: drop-shadow(0 0 18px rgba(255, 122, 0, 0.2));
}
.brand__wordmark span:last-child {
color: var(--orange);
}
.nav {
display: flex;
align-items: center;
gap: 22px;
font-size: 0.84rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-family: "Instrument Sans", sans-serif;
}
.nav a:hover,
.nav a:focus-visible { color: var(--text); }
.hero { padding: 56px 0 46px; }
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
gap: 24px;
align-items: stretch;
}
.hero__grid--single { grid-template-columns: minmax(0, 1fr); }
.hero__grid--single .hero__card { width: 100%; }
.hero__card,
.hero__panel,
.section,
.metric,
.quote,
.team-card,
.cta,
.card {
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--panel);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
}
.hero__card {
border-radius: var(--radius-xl);
padding: 36px;
position: relative;
overflow: hidden;
background:
linear-gradient(135deg, rgba(255, 122, 0, 0.06), transparent 30%),
rgba(255, 255, 255, 0.03);
}
.hero__card::before {
content: "";
position: absolute;
left: 0;
top: 36px;
bottom: 36px;
width: 3px;
background: linear-gradient(180deg, var(--orange), rgba(255, 122, 0, 0.12));
box-shadow: 0 0 18px rgba(255, 122, 0, 0.25);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--orange);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 18px;
}
.eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: currentColor;
}
.hero h1 {
margin: 0;
font-size: clamp(3.1rem, 7vw, 6.4rem);
line-height: 0.92;
letter-spacing: -0.055em;
max-width: 9.5ch;
text-transform: uppercase;
}
.hero h1 .accent { color: var(--orange); }
.hero p,
.metric__body,
.quote p,
.team-card p,
.section__lede,
.cta p,
.card p {
color: var(--muted);
font-family: "Instrument Sans", sans-serif;
font-size: 1rem;
line-height: 1.75;
}
.card ul,
.metric ul,
.team-card ul,
.section__list {
margin: 0.8rem 0 0;
padding-left: 1.1rem;
color: var(--muted);
font-family: "Instrument Sans", sans-serif;
font-size: 0.95rem;
line-height: 1.75;
}
.card li + li,
.metric li + li,
.team-card li + li,
.section__list li + li { margin-top: 0.15rem; }
.section__list {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.section__list--numbered {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding-left: 0;
list-style: none;
counter-reset: feedback-step;
}
.section__list--numbered li {
counter-increment: feedback-step;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}
.section__list--numbered li::before {
content: counter(feedback-step);
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid rgba(255, 122, 0, 0.42);
background: rgba(255, 122, 0, 0.11);
color: var(--orange);
font-family: "Syne", sans-serif;
font-size: 0.78rem;
font-weight: 800;
}
.section__list--numbered li + li { margin-top: 0; }
@media (max-width: 680px) {
.section__list--numbered { grid-template-columns: 1fr; }
}
/* Plans page — pricing card extras (Phase 10e) */
.card__credits {
margin-top: .25rem !important;
font-weight: 600;
color: var(--text, #fff) !important;
}
.card__tagline {
margin: .25rem 0 .9rem !important;
font-style: italic;
font-size: .92rem !important;
}
.card__features {
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
text-align: left;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 1rem;
}
.card__features li {
position: relative;
padding: .35rem 0 .35rem 1.4rem;
font-size: .92rem;
color: var(--muted);
line-height: 1.5;
}
.card__features li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--orange, #f97316);
font-weight: 700;
}
.hero p { max-width: 62ch; margin: 22px 0 0; }
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.button,
.button--ghost {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 24px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
cursor: pointer;
border: 0;
font-family: inherit;
}
.button {
background: linear-gradient(135deg, var(--orange), var(--orange-bright));
color: #080808;
}
.button--ghost {
border: 1px solid rgba(255, 122, 0, 0.28);
color: var(--text);
background: rgba(255, 122, 0, 0.05);
}
.button:hover,
.button--ghost:hover,
.button:focus-visible,
.button--ghost:focus-visible { transform: translateY(-1px); }
.hero__panel {
border-radius: var(--radius-xl);
padding: 26px;
display: grid;
gap: 18px;
background:
radial-gradient(circle at 78% 22%, rgba(255, 122, 0, 0.22), transparent 28%),
rgba(255, 255, 255, 0.03);
}
.signal {
border-radius: 24px;
min-height: 280px;
position: relative;
overflow: hidden;
padding: 24px;
border: 1px solid rgba(255, 122, 0, 0.18);
background:
linear-gradient(135deg, rgba(255, 122, 0, 0.12), rgba(255, 122, 0, 0.03) 45%),
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.signal::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20px 20px, rgba(255,122,0,0.32) 2px, transparent 3px);
background-size: 38px 34px;
opacity: 0.22;
mask-image: linear-gradient(135deg, transparent 10%, black 45%, black 75%, transparent 100%);
}
.signal__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 86px;
}
.signal__cell {
padding: 14px;
border-radius: 18px;
background: rgba(5, 5, 5, 0.72);
border: 1px solid rgba(255, 122, 0, 0.18);
}
.signal__label,
.metric__kicker,
.card__index,
.team-card__role,
.kicker {
color: var(--orange);
font-family: "Instrument Sans", sans-serif;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.signal__label { margin-bottom: 8px; }
.signal__value { font-size: 1.14rem; line-height: 1.2; }
.section-wrap { padding: 18px 0 88px; }
.section {
border-radius: var(--radius-xl);
padding: 34px;
margin-top: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255,255,255,0.02)),
rgba(255, 255, 255, 0.02);
}
/* Drop the panel chrome — lets cards sit directly on the page background. */
.section.section--bare {
background: none;
padding: 0;
border-radius: 0;
border: 0;
box-shadow: none;
backdrop-filter: none;
}
/* Plan cards on the bare pricing section — darker solid bg, no white frame.
The featured card keeps its orange glow + inset border from .card--featured. */
.section--bare .card {
border-color: transparent;
background:
linear-gradient(180deg, rgba(255, 122, 0, 0.05), transparent 60%),
#0b0b0b;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
backdrop-filter: none;
}
.site-light .section--bare .card {
border-color: rgba(20, 14, 0, 0.08);
background:
linear-gradient(180deg, rgba(255, 122, 0, 0.06), transparent 60%),
#ffffff;
box-shadow: 0 14px 40px rgba(20, 14, 0, 0.06);
}
/* Featured (Pro) card — keep the orange border on top of .section--bare reset. */
.section--bare .card--featured,
.site-light .section--bare .card--featured {
border: 1px solid var(--orange);
box-shadow: 0 28px 70px rgba(255, 122, 0, 0.18), inset 0 0 0 1px rgba(255, 122, 0, 0.22);
}
.section__header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
max-width: 820px;
margin: 0 auto 36px;
}
.section__header > * { width: 100%; max-width: 100%; }
.section__header .eyebrow { margin: 0; }
.section__header h2 { margin: 0; overflow-wrap: anywhere; }
.section__lede { margin: 0 auto; max-width: 720px; }
.section h2,
.cta h2 {
margin: 0;
font-size: clamp(2rem, 4vw, 4.1rem);
line-height: 0.95;
letter-spacing: -0.05em;
text-transform: uppercase;
}
.section h2 .accent,
.cta h2 .accent { color: var(--orange); }
.bento {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 18px;
}
.metric,
.quote,
.team-card,
.card { border-radius: var(--radius-lg); }
.metric,
.quote,
.team-card { padding: 24px; }
.metric--wide {
grid-column: span 7;
min-height: 290px;
background:
linear-gradient(135deg, rgba(255, 122, 0, 0.08), transparent 35%),
rgba(255,255,255,0.03);
}
.metric--stack {
grid-column: span 5;
display: grid;
gap: 18px;
}
.metric__big {
font-size: clamp(2.4rem, 5vw, 5.1rem);
line-height: 0.93;
letter-spacing: -0.055em;
margin: 10px 0 0;
text-transform: uppercase;
}
.metric__big .accent { color: var(--orange); }
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.card {
padding: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255,255,255,0.01)),
rgba(255, 122, 0, 0.03);
}
.card h3,
.quote h3,
.team-card h3 {
margin: 10px 0;
font-size: 1.34rem;
line-height: 1.08;
text-transform: uppercase;
}
.quote {
display: grid;
gap: 16px;
align-content: start;
background:
linear-gradient(135deg, rgba(255, 122, 0, 0.08), transparent 60%),
rgba(255,255,255,0.02);
}
.quote__accent {
font-size: clamp(2.4rem, 4vw, 4.4rem);
line-height: 0.92;
color: var(--orange);
font-weight: 800;
text-transform: uppercase;
}
.team {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.team-card {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 18px;
align-items: center;
background:
linear-gradient(135deg, rgba(255, 122, 0, 0.08), transparent 42%),
rgba(255,255,255,0.02);
}
.team-card img {
width: 120px;
height: 120px;
border-radius: 24px;
object-fit: cover;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255, 122, 0, 0.16);
}
.team--single { grid-template-columns: minmax(0, 1fr); }
.team-card--cta {
background:
radial-gradient(circle at 20% 50%, rgba(255, 122, 0, 0.18), transparent 55%),
linear-gradient(135deg, rgba(255, 122, 0, 0.10), transparent 60%),
rgba(255,255,255,0.03);
border: 1px solid rgba(255, 122, 0, 0.26);
}
.team-card--cta img {
background: #0d0d0d;
border-color: rgba(255, 122, 0, 0.35);
padding: 18px;
}
.team-card--cta h3 {
font-family: "Syne", sans-serif;
font-size: clamp(1.6rem, 2.6vw, 2.4rem);
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
margin: 8px 0 10px;
}
.team-card--cta .button { margin-top: 14px; }
.cta {
border-radius: var(--radius-xl);
padding: 72px 34px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 24px 0 28px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 122, 0, 0.22);
background:
radial-gradient(circle at 50% 50%, rgba(255, 122, 0, 0.18), transparent 55%),
linear-gradient(135deg, rgba(255, 122, 0, 0.08), transparent 60%),
rgba(255,255,255,0.03);
}
.footer {
padding: 18px 0 36px;
color: rgba(248, 248, 248, 0.58);
font-size: 0.82rem;
font-family: "Instrument Sans", sans-serif;
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-top: 1px solid rgba(255, 122, 0, 0.1);
}
@media (max-width: 980px) {
.hero__grid,
.section__header,
.cta,
.cards,
.team { grid-template-columns: 1fr; }
.bento { grid-template-columns: 1fr; }
.metric--wide,
.metric--stack { grid-column: auto; }
.cta { padding: 40px 24px; }
}
@media (max-width: 760px) {
.topbar__inner {
flex-direction: column;
align-items: flex-start;
}
.nav { flex-wrap: wrap; gap: 14px; }
.hero__card,
.hero__panel,
.section,
.cta { padding: 24px; }
.team-card { grid-template-columns: 1fr; }
.team-card img {
width: 100%;
max-width: 180px;
height: auto;
}
}
/* ── Auth + Dashboard ──────────────────────────────────────── */
.auth-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 16px;
}
.auth-card {
width: 100%;
max-width: 440px;
border: 1px solid rgba(255, 122, 0, 0.22);
border-radius: var(--radius-xl);
padding: 40px;
background:
linear-gradient(135deg, rgba(255, 122, 0, 0.08), transparent 60%),
rgba(12, 12, 12, 0.7);
backdrop-filter: blur(14px);
box-shadow: var(--shadow);
}
.auth-back {
display: inline-block;
font-family: "Instrument Sans", sans-serif;
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 20px;
}
.auth-back:hover { color: var(--text); }
.auth-title {
font-family: "Syne", sans-serif;
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
margin: 0 0 8px;
}
.auth-sub {
color: var(--muted);
font-family: "Instrument Sans", sans-serif;
margin: 0 0 24px;
}
.auth-form {
display: grid;
gap: 12px;
}
.auth-form[hidden] { display: none; }
.auth-form label {
font-family: "Instrument Sans", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.auth-form input {
font-family: "Instrument Sans", sans-serif;
font-size: 1rem;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.4);
color: var(--text);
outline: none;
transition: border-color 180ms ease, background 180ms ease;
}
.auth-form textarea {
font-family: "Instrument Sans", sans-serif;
font-size: 1rem;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.4);
color: var(--text);
outline: none;
transition: border-color 180ms ease, background 180ms ease;
resize: vertical;
min-height: 96px;
}
.auth-form input:focus,
.auth-form textarea:focus {
border-color: var(--orange);
background: rgba(0, 0, 0, 0.6);
}
.auth-form .button { margin-top: 8px; width: 100%; }
.auth-tabs {
display: flex;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.06);
margin-bottom: 18px;
}
.auth-tab {
flex: 1;
background: transparent;
border: 0;
color: var(--muted);
padding: 10px 14px;
border-radius: 999px;
font-family: "Instrument Sans", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 180ms ease;
}
.auth-tab.is-active {
background: linear-gradient(135deg, var(--orange), var(--orange-bright));
color: #080808;
font-weight: 700;
}
.auth-status {
margin: 14px 0 0;
font-family: "Instrument Sans", sans-serif;
font-size: 0.9rem;
padding: 12px 14px;
border-radius: 10px;
}
.auth-status.is-info { background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.auth-status.is-success { background: rgba(0, 200, 120, 0.12); color: #4ade80; }
.auth-status.is-error { background: rgba(255, 60, 60, 0.12); color: #f87171; }
.auth-footer {
margin: 22px 0 0;
text-align: center;
font-family: "Instrument Sans", sans-serif;
font-size: 0.88rem;
color: var(--muted);
}
.auth-footer a { color: var(--orange); }
.auth-forgot {
font-family: "Instrument Sans", sans-serif;
font-size: 0.82rem;
color: var(--muted);
text-align: center;
margin-top: 8px;
}
.auth-forgot:hover { color: var(--orange); }
/* Dashboard */
.dash {
min-height: 100vh;
padding: 32px 0 80px;
}
.dash__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.dash__user {
font-family: "Instrument Sans", sans-serif;
color: var(--muted);
font-size: 0.9rem;
}
.dash__welcome {
font-family: "Syne", sans-serif;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 0.95;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0 0 12px;
}
.dash__lede {
color: var(--muted);
font-family: "Instrument Sans", sans-serif;
margin: 0 0 32px;
max-width: 60ch;
}
.dash__signout {
font-family: "Instrument Sans", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 10px 16px;
border-radius: 999px;
cursor: pointer;
transition: all 180ms ease;
}
.dash__signout:hover {
border-color: var(--orange);
color: var(--text);
}
/* ── Audit report (screen) ─────────────────────────────────────────────── */
.audit-report__toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.audit-report__back { color: var(--muted, #9ca3af); font-size: 0.9rem; text-decoration: none; }
.audit-report__back:hover { color: var(--orange, #ff8a00); }
.audit-report__cover {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 2rem 2.25rem;
background:
radial-gradient(1200px 320px at 100% -10%, rgba(255, 138, 0, 0.18) 0%, transparent 60%),
radial-gradient(900px 360px at 0% 110%, rgba(96, 165, 250, 0.10) 0%, transparent 55%),
linear-gradient(180deg, rgba(255, 138, 0, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
margin-bottom: 1.5rem;
overflow: hidden;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -32px rgba(255, 138, 0, 0.25);
}
.audit-report__cover::before {
/* subtle grain */
content: "";
position: absolute; inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: overlay;
}
.audit-report__cover::after {
/* slow conic sweep, very subtle */
content: "";
position: absolute;
top: -40%; right: -20%;
width: 60%; aspect-ratio: 1;
background: conic-gradient(from 0deg, transparent 0deg, rgba(255,138,0,0.10) 30deg, transparent 70deg, transparent 360deg);
pointer-events: none;
filter: blur(20px);
opacity: 0.55;
animation: audit-cover-sweep 24s linear infinite;
}
@keyframes audit-cover-sweep {
to { transform: rotate(360deg); }
}
.audit-report__cover > * { position: relative; }
.audit-report__cover-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.audit-report__cover-meta { flex: 1 1 320px; min-width: 0; }
.audit-report__brand {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 1rem;
}
.audit-report__brand-mark {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--orange, #ff8a00);
color: #0a0a0a;
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.04em;
}
.audit-report__brand-name { font-weight: 600; color: var(--text, #f1f1f1); }
.audit-report__brand-name span { color: var(--orange, #ff8a00); }
/* White-label overrides — agency_name/logo_url/primary_color set on workspace.
Falls back to PositioningLab branding when --wl-brand is not set. */
.audit-report__brand-logo {
max-height: 36px;
max-width: 180px;
object-fit: contain;
display: block;
}
.audit-report--wl .audit-report__brand-mark { background: var(--wl-brand, var(--orange, #ff8a00)); }
.audit-report--wl .audit-report__eyebrow { color: var(--wl-brand, var(--orange, #ff8a00)); }
.audit-report--wl .audit-report__brand-name span { color: var(--wl-brand, var(--orange, #ff8a00)); }
.audit-report__eyebrow {
color: var(--orange, #ff8a00);
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.72rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.audit-report__title { font-size: 2.2rem; margin: 0 0 0.4rem; line-height: 1.15; }
.audit-report__url { color: var(--muted, #9ca3af); margin: 0; font-size: 0.95rem; }
.audit-report__date { color: var(--muted, #9ca3af); margin: 0.4rem 0 0; font-size: 0.85rem; }
.audit-report__scores {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.audit-report__scores--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
.audit-report__scores,
.audit-report__scores--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
.audit-report__scores,
.audit-report__scores--four { grid-template-columns: 1fr; }
}
/* Overall score ring (cover) */
.audit-ring {
position: relative;
width: 200px;
height: 200px;
flex: 0 0 200px;
display: flex;
flex-direction: column;
align-items: center;
}
.audit-ring::before {
/* soft halo behind the ring */
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
z-index: 0;
pointer-events: none;
background: radial-gradient(closest-side, rgba(255,138,0,0.18), transparent 70%);
opacity: 0;
transition: opacity 800ms ease 200ms;
}
.audit-ring--elite::before { background: radial-gradient(closest-side, rgba(255,138,0,0.28), transparent 70%); opacity: 1; animation: audit-ring-pulse 3.6s ease-in-out infinite; }
.audit-ring--high::before { background: radial-gradient(closest-side, rgba(74,222,128,0.18), transparent 70%); opacity: 1; }
.audit-ring--mid::before { background: radial-gradient(closest-side, rgba(251,191,36,0.16), transparent 70%); opacity: 1; }
.audit-ring--low::before { background: radial-gradient(closest-side, rgba(248,113,113,0.16), transparent 70%); opacity: 1; }
@keyframes audit-ring-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.06); opacity: 1; }
}
.audit-ring__svg {
width: 180px; height: 180px;
transform: rotate(-90deg);
position: relative; z-index: 1;
}
.audit-ring__track {
fill: none;
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 14;
}
.audit-ring__bar {
fill: none;
stroke-width: 14;
stroke-linecap: round;
transition: stroke-dashoffset 1400ms cubic-bezier(.2,.7,.2,1);
}
/* Fallback strokes when the SVG gradient isn't applied (e.g. legacy support). */
.audit-ring--elite .audit-ring__bar { stroke: #ff8a00; }
.audit-ring--high .audit-ring__bar { stroke: #4ade80; }
.audit-ring--mid .audit-ring__bar { stroke: #fbbf24; }
.audit-ring--low .audit-ring__bar { stroke: #f87171; }
.audit-ring__inner {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 180px; height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
}
.audit-ring__grade {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--muted, #9ca3af);
margin-bottom: 0.15rem;
padding: 2px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.audit-ring--elite .audit-ring__grade { color: #ff8a00; background: rgba(255,138,0,0.12); border-color: rgba(255,138,0,0.4); }
.audit-ring--high .audit-ring__grade { color: #4ade80; background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.3); }
.audit-ring--mid .audit-ring__grade { color: #fbbf24; background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.3); }
.audit-ring--low .audit-ring__grade { color: #f87171; background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.3); }
.audit-ring__value {
font-size: 3rem;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
background-clip: text;
-webkit-background-clip: text;
}
.audit-ring--elite .audit-ring__value { color: transparent; background-image: linear-gradient(135deg, #ffb05c, #ff6b00); }
.audit-ring--high .audit-ring__value { color: transparent; background-image: linear-gradient(135deg, #86efac, #16a34a); }
.audit-ring--mid .audit-ring__value { color: transparent; background-image: linear-gradient(135deg, #fde68a, #d97706); }
.audit-ring--low .audit-ring__value { color: transparent; background-image: linear-gradient(135deg, #fca5a5, #dc2626); }
.audit-ring__label {
margin-top: 0.3rem;
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted, #9ca3af);
}
.audit-ring__spark {
margin-top: 0.6rem;
width: 120px;
height: 28px;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(4px);
animation: audit-spark-in 700ms cubic-bezier(.2,.7,.2,1) forwards 600ms;
}
.audit-ring__spark--up path { stroke: #4ade80; }
.audit-ring__spark--down path { stroke: #f87171; }
.audit-ring__spark-dot--start { fill: rgba(255,255,255,0.3); }
.audit-ring__spark-dot--end { fill: currentColor; }
.audit-ring__spark--up .audit-ring__spark-dot--end { fill: #4ade80; }
.audit-ring__spark--down .audit-ring__spark-dot--end { fill: #f87171; }
@keyframes audit-spark-in {
to { opacity: 1; transform: translateY(0); }
}
.audit-score--empty .audit-score__value { color: var(--muted, #9ca3af); opacity: 0.5; }
.audit-score {
position: relative;
text-align: center;
padding: 1.5rem 1rem 1.4rem;
border-radius: 14px;
background:
radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.04), transparent 60%),
rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.06);
overflow: hidden;
transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.audit-score::before {
/* color-keyed top accent bar */
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(255,255,255,0.06);
}
.audit-score:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}
.audit-score__value {
font-size: 3rem;
font-weight: 800;
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
font-variant-numeric: tabular-nums;
}
.audit-score__trend {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 999px;
vertical-align: middle;
}
.audit-score__trend--up { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.audit-score__trend--down { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.audit-score__trend--flat { color: var(--muted, #9ca3af); background: rgba(255, 255, 255, 0.05); }
.audit-score__label { color: var(--muted, #9ca3af); font-size: 0.85rem; margin-top: 0.4rem; letter-spacing: 0.02em; }
.audit-score__bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); margin-top: 0.9rem; overflow: hidden; }
.audit-score__fill { height: 100%; transition: width 1000ms cubic-bezier(.2,.7,.2,1) 100ms; }
.audit-score--elite::before { background: linear-gradient(90deg, #ffb05c, #ff6b00); }
.audit-score--elite .audit-score__value { color: transparent; background-image: linear-gradient(135deg, #ffb05c, #ff6b00); -webkit-background-clip: text; background-clip: text; }
.audit-score--elite .audit-score__fill { background: linear-gradient(90deg, #ff8a00, #ffb05c); box-shadow: 0 0 12px rgba(255, 138, 0, 0.5); }
.audit-score--high::before { background: linear-gradient(90deg, #86efac, #16a34a); }
.audit-score--high .audit-score__value { color: #4ade80; }
.audit-score--high .audit-score__fill { background: linear-gradient(90deg, #4ade80, #86efac); }
.audit-score--mid::before { background: linear-gradient(90deg, #fde68a, #d97706); }
.audit-score--mid .audit-score__value { color: #fbbf24; }
.audit-score--mid .audit-score__fill { background: linear-gradient(90deg, #fbbf24, #fde68a); }
.audit-score--low::before { background: linear-gradient(90deg, #fca5a5, #dc2626); }
.audit-score--low .audit-score__value { color: #f87171; }
.audit-score--low .audit-score__fill { background: linear-gradient(90deg, #f87171, #fca5a5); }
.audit-report__section { margin-top: 2rem; }
.audit-report__h2 {
font-size: 1.25rem;
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.audit-report__fixes { display: flex; flex-direction: column; gap: 1rem; }
.audit-fix {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 1.2rem 1.4rem;
background: rgba(255, 255, 255, 0.02);
}
.audit-fix__index {
color: var(--orange, #ff8a00);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.7rem;
font-weight: 600;
}
.audit-fix__title { margin: 0.35rem 0 0.8rem; font-size: 1.08rem; }
.audit-fix__row { display: grid; grid-template-columns: 80px 1fr; gap: 0.8rem; padding: 0.4rem 0; border-top: 1px dashed rgba(255, 255, 255, 0.06); }
.audit-fix__row:first-of-type { border-top: 0; padding-top: 0; }
.audit-fix__row p { margin: 0; font-size: 0.92rem; }
.audit-fix__label {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted, #9ca3af);
font-weight: 600;
padding-top: 2px;
}
.audit-signals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.audit-signal {
display: flex;
gap: 0.8rem;
align-items: flex-start;
padding: 0.7rem 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border-left: 3px solid;
}
.audit-signal.is-present { border-left-color: #4ade80; }
.audit-signal.is-missing { border-left-color: #f87171; }
.audit-signal__icon { font-weight: 700; font-size: 1rem; line-height: 1.4; }
.audit-signal.is-present .audit-signal__icon { color: #4ade80; }
.audit-signal.is-missing .audit-signal__icon { color: #f87171; }
.audit-signal__label { display: block; font-size: 0.95rem; }
.audit-signal__note { color: var(--muted, #9ca3af); font-size: 0.88rem; }
.audit-gaps { padding-left: 1.2rem; line-height: 1.65; }
.audit-gaps li { margin: 0.3rem 0; }
/* ── Technical findings panel ──────────────────────────────── */
.audit-tech__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
.audit-tech__sub { color: var(--muted, #9ca3af); font-size: 0.88rem; margin: -0.3rem 0 1rem; }
.audit-tech__risk { padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.audit-tech__risk--low { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.audit-tech__risk--medium { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.audit-tech__risk--high { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.audit-tech__h3 {
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted, #9ca3af);
margin: 0 0 0.6rem;
font-weight: 600;
}
.audit-tech__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.audit-tech__row {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 0.6rem;
align-items: baseline;
padding: 0.4rem 0.6rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.02);
font-size: 0.85rem;
}
.audit-tech__icon { font-weight: 700; }
.audit-tech__label { color: var(--text, #f1f1f1); }
.audit-tech__value { color: var(--muted, #9ca3af); font-size: 0.78rem; text-align: right; }
.audit-tech__row.is-good .audit-tech__icon { color: #4ade80; }
.audit-tech__row.is-bad .audit-tech__icon { color: #f87171; }
.audit-tech__row.is-warn .audit-tech__icon { color: #fbbf24; }
.audit-tech__row.is-muted .audit-tech__icon { color: rgba(255, 255, 255, 0.3); }
@media (max-width: 720px) {
.audit-tech__grid { grid-template-columns: 1fr; }
}
/* ── AI visibility probe (Agency only) ─────────────────────── */
.audit-aivis__panel { margin-top: 1rem; }
.audit-aivis__panel-h {
display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
padding: .5rem .8rem; border-radius: 6px;
background: rgba(96, 165, 250, 0.06);
margin-bottom: .5rem;
}
.audit-aivis__panel-name { font-weight: 700; font-size: .95rem; }
.audit-aivis__panel-model { font-size: .78rem; color: var(--muted, #9ca3af); background: rgba(255, 255, 255, 0.05); padding: 1px 6px; border-radius: 4px; }
.audit-aivis__list { display: flex; flex-direction: column; gap: 0.8rem; }
.audit-aivis__card {
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border-left: 3px solid rgba(96, 165, 250, 0.6);
padding: 0.9rem 1.1rem;
}
.audit-aivis__card--error { border-left-color: #f87171; }
.audit-aivis__q { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.audit-aivis__a { color: var(--text, #f1f1f1); font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; }
.audit-aivis__meta { color: var(--muted, #9ca3af); font-size: 0.8rem; margin-top: 0.5rem; }
.audit-aivis__meta code { background: rgba(255, 255, 255, 0.05); padding: 1px 6px; border-radius: 4px; }
.audit-aivis__err { color: #f87171; font-size: 0.88rem; }
/* Sentiment pills */
.audit-aivis__sent {
display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.audit-aivis__sent--positive { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.audit-aivis__sent--negative { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.audit-aivis__sent--mixed { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.audit-aivis__sent--neutral { background: rgba(255, 255, 255, 0.06); color: var(--muted, #9ca3af); }
/* Source-mix panel */
.audit-aivis__sources {
margin: .75rem 0 1.25rem; padding: .9rem 1.1rem; border-radius: 8px;
background: rgba(168, 85, 247, 0.05); border-left: 3px solid rgba(168, 85, 247, 0.5);
}
.audit-aivis__sources-h { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.audit-aivis__sources-stats { color: var(--muted, #9ca3af); font-size: .85rem; }
.audit-aivis__cat-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.audit-aivis__cat {
padding: 2px 8px; border-radius: 999px; font-size: .76rem; font-weight: 600;
background: rgba(255, 255, 255, 0.06); color: var(--muted, #9ca3af);
}
.audit-aivis__cat--wikipedia { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.audit-aivis__cat--reddit { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.audit-aivis__cat--review { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.audit-aivis__cat--news { background: rgba(232, 121, 249, 0.15); color: #e879f9; }
.audit-aivis__sources-list { margin: .3rem 0 0 1.2rem; padding: 0; font-size: .88rem; }
.audit-aivis__sources-list li { margin: .2rem 0; }
.audit-aivis__sources-list a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.2); }
.audit-aivis__sources-meta { color: var(--muted, #9ca3af); font-size: .78rem; margin-left: .4rem; }
/* Comparison matrices — engine summary + prompt × engine grid */
.audit-aivis__matrix-wrap { margin: 1rem 0 1.5rem; }
.audit-aivis__matrix-h {
margin: 0 0 .5rem; font-size: .95rem; font-weight: 600;
color: var(--muted, #9ca3af); text-transform: uppercase; letter-spacing: .04em;
}
.audit-aivis__matrix {
width: 100%; border-collapse: collapse; font-size: .88rem;
background: rgba(255, 255, 255, 0.02); border-radius: 8px; overflow: hidden;
}
.audit-aivis__matrix th,
.audit-aivis__matrix td {
padding: .55rem .75rem; text-align: left; vertical-align: top;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.audit-aivis__matrix thead th {
font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--muted, #9ca3af); font-weight: 600;
background: rgba(255, 255, 255, 0.04);
}
.audit-aivis__matrix tbody th { font-weight: 600; white-space: nowrap; }
.audit-aivis__matrix tbody tr:last-child th,
.audit-aivis__matrix tbody tr:last-child td { border-bottom: 0; }
.audit-aivis__matrix--prompts .audit-aivis__matrix-cell {
text-align: center; white-space: nowrap;
}
.audit-aivis__matrix-prompt { max-width: 360px; }
.audit-aivis__matrix-prompt span { display: block; font-weight: 500; }
.audit-aivis__matrix-legend {
margin: .5rem 0 0; font-size: .78rem; color: var(--muted, #9ca3af);
display: flex; gap: .8rem; flex-wrap: wrap;
}
.audit-aivis__kind {
display: inline-block; padding: 1px 6px; margin-right: .35rem;
border-radius: 4px; background: rgba(255, 255, 255, 0.06);
font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
color: var(--muted, #9ca3af); font-weight: 600;
}
/* ── Audit compare (rescan diff) ───────────────────────────── */
.audit-cmp__table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.audit-cmp__table th, .audit-cmp__table td {
padding: .5rem .7rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: .92rem;
}
.audit-cmp__table thead th { color: var(--muted, #9ca3af); font-weight: 500; font-size: .82rem; }
.audit-cmp__table tbody th[scope="row"] { font-weight: 600; }
.audit-cmp__delta { font-weight: 600; font-size: .85rem; padding: 2px 8px; border-radius: 999px; display: inline-block; }
.audit-cmp__delta--up { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.audit-cmp__delta--down { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.audit-cmp__delta--neutral { background: rgba(255, 255, 255, 0.05); color: var(--muted, #9ca3af); }
.audit-cmp__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .6rem; }
@media (max-width: 720px) { .audit-cmp__cols { grid-template-columns: 1fr; } }
.audit-report__footer {
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: var(--muted, #9ca3af);
font-size: 0.78rem;
}
/* ── Print: clean PDF export of audit report ───────────────────────────── */
@page {
size: Letter;
margin: 0.6in 0.65in 0.7in;
}
@media print {
/* Reset to a print-optimised theme */
:root {
--text: #111;
--muted: #555;
}
html, body {
background: #fff !important;
color: #111 !important;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 10.5pt;
line-height: 1.5;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Hide app chrome */
.topbar, .nav, .footer, .button, .no-print, #buy-modal,
.dash__signout,
.member-shell__nav, .member-shell__top, .member-shell__menu,
.audit-report__toolbar { display: none !important; }
/* Collapse layout */
.member-shell { display: block !important; }
.member-shell__main, .member-shell__content { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
main.dash, .shell { padding: 0 !important; max-width: 100% !important; }
a { color: #111 !important; text-decoration: none; }
/* ── Audit report — printed look ───────────────────────────────── */
.audit-report { color: #111 !important; }
.audit-report__cover {
background: #fff !important;
border: 0 !important;
border-bottom: 2px solid #ff8a00 !important;
border-radius: 0 !important;
padding: 0 0 0.35in !important;
margin: 0 0 0.35in !important;
page-break-after: avoid;
box-shadow: none !important;
}
.audit-report__cover::before,
.audit-report__cover::after { display: none !important; }
.audit-ring::before { display: none !important; animation: none !important; }
.audit-ring__spark { display: none !important; }
.audit-score:hover { transform: none !important; box-shadow: none !important; }
.audit-score::before { display: none !important; }
.audit-report__brand-mark {
background: #ff8a00 !important;
color: #fff !important;
}
.audit-report--wl .audit-report__brand-mark {
background: var(--wl-brand, #ff8a00) !important;
}
.audit-report__brand-logo { max-height: 0.5in !important; max-width: 2in !important; }
.audit-report__brand-name { color: #111 !important; }
.audit-report__brand-name span { color: #ff8a00 !important; }
.audit-report__eyebrow { color: #ff8a00 !important; }
.audit-report--wl .audit-report__brand-name span { color: var(--wl-brand, #ff8a00) !important; }
.audit-report--wl .audit-report__eyebrow { color: var(--wl-brand, #ff8a00) !important; }
.audit-report__title { color: #111 !important; font-size: 22pt; margin: 0.1in 0 0.06in; }
.audit-report__url, .audit-report__date { color: #555 !important; }
/* Score grid */
.audit-report__scores {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.18in !important;
margin: 0 0 0.3in !important;
page-break-inside: avoid;
}
.audit-report__scores--four { grid-template-columns: repeat(4, 1fr) !important; }
.audit-score {
background: #fafafa !important;
border: 1px solid #e5e5e5 !important;
padding: 0.18in 0.12in !important;
border-radius: 8px !important;
}
.audit-score__value { font-size: 28pt !important; }
.audit-score__label { color: #555 !important; font-size: 9pt !important; }
.audit-score__bar { background: #eee !important; }
.audit-score--high .audit-score__value, .audit-score--high .audit-score__fill { color: #16a34a !important; background-color: #16a34a !important; }
.audit-score--high .audit-score__value { background: transparent !important; }
.audit-score--mid .audit-score__value, .audit-score--mid .audit-score__fill { color: #d97706 !important; background-color: #d97706 !important; }
.audit-score--mid .audit-score__value { background: transparent !important; }
.audit-score--low .audit-score__value, .audit-score--low .audit-score__fill { color: #dc2626 !important; background-color: #dc2626 !important; }
.audit-score--low .audit-score__value { background: transparent !important; }
.audit-score--elite .audit-score__value { color: #ff8a00 !important; background: transparent !important; }
.audit-score--elite .audit-score__fill { background: #ff8a00 !important; box-shadow: none !important; }
.audit-score__fill { transition: none !important; }
.audit-score__trend { background: transparent !important; padding: 0 !important; font-weight: 600 !important; }
.audit-score__trend--up { color: #16a34a !important; }
.audit-score__trend--down { color: #dc2626 !important; }
.audit-score__trend--flat { color: #555 !important; }
/* Cover layout */
.audit-report__cover-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.4in !important;
}
.audit-ring {
width: 1.6in !important;
height: 1.6in !important;
flex: 0 0 1.6in !important;
}
.audit-ring__track { stroke: #eee !important; stroke-width: 12 !important; }
.audit-ring__bar { stroke-width: 12 !important; }
.audit-ring--high .audit-ring__bar,
.audit-ring--high .audit-ring__value { color: #16a34a !important; stroke: #16a34a !important; }
.audit-ring--mid .audit-ring__bar,
.audit-ring--mid .audit-ring__value { color: #d97706 !important; stroke: #d97706 !important; }
.audit-ring--low .audit-ring__bar,
.audit-ring--low .audit-ring__value { color: #dc2626 !important; stroke: #dc2626 !important; }
.audit-ring--elite .audit-ring__bar,
.audit-ring--elite .audit-ring__value,
.audit-ring--elite .audit-ring__grade { color: #ff8a00 !important; stroke: #ff8a00 !important; filter: none !important; }
.audit-ring__bar { transition: none !important; }
.audit-ring__grade { font-size: 8pt !important; color: #555 !important; }
.audit-ring__value { font-size: 26pt !important; }
.audit-ring__label { color: #555 !important; font-size: 7.5pt !important; }
/* Section headings */
.audit-report__section { margin-top: 0.3in !important; page-break-inside: avoid; }
.audit-report__h2 {
color: #111 !important;
font-size: 13pt !important;
border-bottom: 1px solid #ddd !important;
padding-bottom: 0.06in !important;
margin: 0 0 0.16in !important;
}
/* Fix cards */
.audit-fix {
background: #fff !important;
border: 1px solid #e5e5e5 !important;
border-radius: 6px !important;
padding: 0.18in 0.22in !important;
page-break-inside: avoid;
margin-bottom: 0.14in;
}
.audit-fix__index { color: #ff8a00 !important; font-size: 8pt !important; }
.audit-fix__title { color: #111 !important; font-size: 12pt !important; }
.audit-fix__row { border-top-color: #eee !important; }
.audit-fix__row p { color: #222 !important; font-size: 9.5pt !important; }
.audit-fix__label { color: #777 !important; font-size: 7.5pt !important; }
/* Signals */
.audit-signal {
background: #fafafa !important;
page-break-inside: avoid;
}
.audit-signal.is-present { border-left-color: #16a34a !important; }
.audit-signal.is-missing { border-left-color: #dc2626 !important; }
.audit-signal.is-present .audit-signal__icon { color: #16a34a !important; }
.audit-signal.is-missing .audit-signal__icon { color: #dc2626 !important; }
.audit-signal__note { color: #555 !important; }
/* Technical findings */
.audit-tech__grid { gap: 0.3in !important; }
.audit-tech__h3 { color: #555 !important; font-size: 8pt !important; }
.audit-tech__sub { color: #555 !important; font-size: 8.5pt !important; }
.audit-tech__risk { background: #f4f4f4 !important; color: #111 !important; }
.audit-tech__risk--low { color: #16a34a !important; }
.audit-tech__risk--medium { color: #d97706 !important; }
.audit-tech__risk--high { color: #dc2626 !important; }
.audit-tech__row { background: #fafafa !important; page-break-inside: avoid; font-size: 8.5pt !important; }
.audit-tech__label { color: #111 !important; }
.audit-tech__value { color: #555 !important; font-size: 7.5pt !important; }
.audit-tech__row.is-good .audit-tech__icon { color: #16a34a !important; }
.audit-tech__row.is-bad .audit-tech__icon { color: #dc2626 !important; }
.audit-tech__row.is-warn .audit-tech__icon { color: #d97706 !important; }
.audit-tech__row.is-muted .audit-tech__icon { color: #aaa !important; }
/* AI visibility */
.audit-aivis__card { background: #fafafa !important; border-left-color: #6366f1 !important; page-break-inside: avoid; padding: 0.18in 0.22in !important; }
.audit-aivis__card--error { border-left-color: #dc2626 !important; }
.audit-aivis__q { color: #111 !important; font-size: 10pt !important; }
.audit-aivis__a { color: #222 !important; font-size: 9pt !important; }
.audit-aivis__meta { color: #555 !important; font-size: 8pt !important; }
.audit-aivis__meta code { background: #eee !important; }
.audit-gaps li { color: #222 !important; }
.audit-report__footer {
border-top: 1px solid #ddd !important;
color: #777 !important;
font-size: 8pt !important;
margin-top: 0.4in !important;
}
}
/* ── Plan comparison table ─────────────────────────────────── */
.compare { margin: 3rem 0 1rem; }
.compare__title { font-size: 1.25rem; margin: 0 0 1rem; text-align: center; }
.compare__wrap { overflow-x: auto; }
.compare__table {
width: 100%;
border-collapse: collapse;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
overflow: hidden;
font-size: 0.92rem;
}
.compare__table th,
.compare__table td {
padding: 0.7rem 1rem;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.compare__table thead th {
background: rgba(255, 255, 255, 0.03);
font-weight: 600;
color: var(--text, #f1f1f1);
}
.compare__table thead th span {
display: block;
font-size: 0.78rem;
color: var(--muted, #9ca3af);
font-weight: 400;
margin-top: 2px;
}
.compare__table tbody th[scope="row"] {
text-align: left;
font-weight: 500;
color: var(--muted, #9ca3af);
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__table .is-featured {
background: rgba(255, 138, 0, 0.06);
color: var(--text, #f1f1f1);
}
.compare__check { color: #4ade80; font-weight: 700; }
.compare__dash { color: rgba(255, 255, 255, 0.25); }
/* ── Member app shell ───────────────────────────────────────── */
.member-shell {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
background: var(--bg, #0a0a0a);
}
.member-shell__nav {
background: rgba(255, 255, 255, 0.02);
border-right: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
flex-direction: column;
padding: 20px 16px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.member-shell__brand {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
margin: 0 6px 24px;
}
.member-shell__brand .brand__logo { width: 28px; height: 28px; }
.member-shell__brand .brand__wordmark { font-size: 1rem; font-weight: 600; color: var(--text, #f1f1f1); }
.member-shell__brand .brand__wordmark span { color: var(--orange, #ff8a00); }
.member-shell__links { display: flex; flex-direction: column; gap: 2px; }
.member-shell__link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--muted, #9ca3af);
text-decoration: none;
font-size: 0.92rem;
transition: background 120ms, color 120ms;
}
.member-shell__link:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--text, #f1f1f1);
}
.member-shell__link.is-active {
background: rgba(255, 138, 0, 0.12);
color: var(--orange, #ff8a00);
font-weight: 600;
}
.member-shell__icon {
display: inline-flex;
width: 20px;
justify-content: center;
font-size: 0.95rem;
opacity: 0.8;
}
.member-shell__badge {
margin-left: auto;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 138, 0, 0.15);
color: var(--orange, #ff8a00);
}
.member-shell__nav-footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.member-shell__main { display: flex; flex-direction: column; min-width: 0; }
.member-shell__top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 10;
}
.member-shell__menu {
display: none;
background: none;
border: none;
color: var(--text, #f1f1f1);
font-size: 1.4rem;
cursor: pointer;
}
.member-shell__user { display: flex; align-items: center; gap: 14px; }
.member-shell__email { color: var(--muted, #9ca3af); font-size: 0.88rem; }
.member-shell__signout {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 6px 14px;
border-radius: 999px;
color: var(--text, #f1f1f1);
cursor: pointer;
font-size: 0.85rem;
transition: border-color 180ms;
}
.member-shell__signout:hover { border-color: var(--orange, #ff8a00); }
.member-shell__content {
padding: 32px 28px 64px;
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
/* Page header pattern used inside member pages */
.page__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.page__title { margin: 0.4rem 0 0; font-size: 2rem; }
.page__lede { color: var(--muted, #9ca3af); margin: 0.4rem 0 0; }
.page__h2 { margin: 2rem 0 0.8rem; font-size: 1.2rem; }
.stat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
@media (max-width: 720px) {
.stat-grid { grid-template-columns: 1fr; }
}
.audit-row {
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
padding: 14px 18px;
transition: border-color 120ms;
}
.audit-row:hover { border-color: var(--orange, #ff8a00) !important; }
.banner {
padding: 0.9rem 1.1rem;
border-radius: 8px;
margin-bottom: 1.2rem;
border: 1px solid transparent;
}
.banner--success {
background: rgba(74, 222, 128, 0.1);
border-color: rgba(74, 222, 128, 0.3);
}
.filter-bar {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
color: var(--muted, #9ca3af);
}
.filter-bar select {
background: var(--surface, #111);
color: var(--text, #f1f1f1);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 6px 10px;
border-radius: 6px;
margin-left: 0.4rem;
}
.pill {
font-size: 0.72rem;
padding: 3px 10px;
border-radius: 999px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.pill--accent { background: rgba(255, 138, 0, 0.12); color: var(--orange, #ff8a00); }
.settings-block .auth-card { margin-top: 0.5rem; }
.settings-block label { display: block; margin-bottom: 0.8rem; }
.settings-block label > div { font-weight: 600; margin-bottom: 0.3rem; }
.settings-block input {
width: 100%;
padding: 0.6rem 0.8rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: var(--surface, #111);
color: inherit;
}
.settings-block input:disabled { opacity: 0.6; }
@media (max-width: 800px) {
.member-shell { grid-template-columns: 1fr; }
.member-shell__nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 260px;
z-index: 50;
transform: translateX(-100%);
transition: transform 200ms;
background: #0a0a0a;
border-right: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 6px 0 24px rgba(0, 0, 0, 0.5);
}
.member-shell.is-open .member-shell__nav { transform: translateX(0); }
.member-shell__backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 40;
}
.member-shell.is-open .member-shell__backdrop { display: block; }
.member-shell__menu { display: inline-block; }
.member-shell__content { padding: 20px 16px 48px; }
}
/* ── Waitlist card (Monitoring) ─────────────────────────────── */
.waitlist-card {
margin-top: 2.5rem;
max-width: 640px;
padding: 1.6rem 1.8rem;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 138, 0, 0.06), rgba(255, 138, 0, 0.015));
border: 1px solid rgba(255, 138, 0, 0.18);
}
.waitlist-card__head h3 {
margin: 0.3rem 0 0.4rem;
font-size: 1.35rem;
letter-spacing: -0.01em;
}
.waitlist-card__head p {
color: var(--muted, #9ca3af);
margin: 0 0 1.2rem;
font-size: 0.95rem;
}
.waitlist-form {
display: flex;
gap: 0.6rem;
align-items: stretch;
}
.waitlist-form input[type="email"] {
flex: 1;
min-width: 0;
padding: 0.75rem 1rem;
font-size: 0.95rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.5);
color: var(--text, #f1f1f1);
transition: border-color 150ms, background 150ms;
}
.waitlist-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.3); }
.waitlist-form input[type="email"]:focus {
outline: none;
border-color: var(--orange, #ff8a00);
background: rgba(0, 0, 0, 0.7);
}
.waitlist-form .button {
white-space: nowrap;
padding: 0.75rem 1.4rem;
font-size: 0.95rem;
}
@media (max-width: 560px) {
.waitlist-form { flex-direction: column; }
.waitlist-form .button { width: 100%; }
}
/* ── Modal (Brands "Add brand" + similar) ───────────────────────── */
.modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal__box {
width: min(540px, 100%);
max-height: 90vh;
overflow-y: auto;
background: var(--panel);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg, 14px);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
padding: 1.25rem 1.5rem 1.5rem;
}
.modal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.modal__head h3 { margin: 0; font-size: 1.1rem; }
.modal__close {
background: none;
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--muted, #888);
width: 32px;
height: 32px;
border-radius: 8px;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
transition: color 120ms, border-color 120ms;
}
.modal__close:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
/* Form fields inside modals — labels stack their inputs */
.modal__box label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--muted, #aaa);
}
.modal__box label small { color: rgba(255, 255, 255, 0.4); font-size: 0.72rem; }
.modal__box input[type="text"],
.modal__box input[type="email"],
.modal__box input:not([type]),
.modal__box textarea,
.modal__box select {
width: 100%;
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
font-family: inherit;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.4);
color: var(--text, #f1f1f1);
transition: border-color 120ms, background 120ms;
}
.modal__box input:focus,
.modal__box textarea:focus,
.modal__box select:focus {
outline: none;
border-color: var(--orange, #ff8a00);
background: rgba(0, 0, 0, 0.6);
}
.modal__box textarea { resize: vertical; min-height: 60px; }
/* ── Member-app form controls (inside .card) ────────────────────── */
.card input[type="text"],
.card input[type="email"],
.card input[type="url"],
.card input[type="number"],
.card input[type="search"],
.card input:not([type]),
.card textarea,
.card select,
.modal__box select {
padding: 0.55rem 0.75rem;
font-size: 0.9rem;
font-family: inherit;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.4);
color: var(--text, #f1f1f1);
transition: border-color 120ms, background 120ms;
min-width: 0;
}
.card input:focus,
.card textarea:focus,
.card select:focus,
.modal__box select:focus {
outline: none;
border-color: var(--orange, #ff8a00);
background: rgba(0, 0, 0, 0.6);
}
.card input::placeholder,
.card textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
.card input:disabled,
.card textarea:disabled,
.card select:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.card textarea { resize: vertical; min-height: 60px; }
/* Native select chevron on dark bg */
.card select,
.modal__box select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.65rem center;
padding-right: 2rem;
}
/* Inline labels (Workspace settings: ) */
.card > label,
.card form label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text);
flex-wrap: wrap;
}
.card form label small,
.card > label small { color: rgba(255, 255, 255, 0.45); font-size: 0.75rem; }
/* Checkbox alignment */
.card input[type="checkbox"] {
width: 1rem;
height: 1rem;
accent-color: var(--orange, #ff8a00);
}
/* Brand row archive button (× icon) — keep tight */
.card button.button--sm[data-act="archive"] { padding: 0.4rem 0.7rem; }
/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
.audit-report__cover::after,
.audit-ring--elite::before { animation: none !important; }
.audit-ring__bar,
.audit-score__fill { transition: none !important; }
.audit-ring__spark { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* ── Hugo content pages (single + list) ───────────────────── */
.prose { max-width: 68ch; color: var(--text); font-size: 1rem; line-height: 1.7; }
.prose h2 { font-family: "Syne", sans-serif; font-size: 1.6rem; margin: 2.2rem 0 .6rem; letter-spacing: -.01em; }
.prose h3 { font-family: "Syne", sans-serif; font-size: 1.15rem; margin: 1.6rem 0 .4rem; color: var(--orange); }
.prose p { margin: 0 0 1em; color: var(--muted); }
.prose ul, .prose ol { padding-left: 1.25rem; color: var(--muted); }
.prose li { margin: .35rem 0; }
.prose a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(255,138,0,.3); }
.prose a:hover { border-bottom-color: var(--orange); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.post-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.post-list__item a {
display: flex; gap: 1.5rem; padding: 1rem 0;
border-top: 1px solid var(--border); border-bottom: none;
align-items: baseline; text-decoration: none; color: var(--text);
}
.post-list__item:last-child a { border-bottom: 1px solid var(--border); }
.post-list__item a:hover .post-list__title { color: var(--orange); }
.post-list__date { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 6rem; }
.post-list__title { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.05rem; }
/* ── Theme toggle button (header) ──────────────────────────────── */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid rgba(255, 122, 0, 0.28);
background: rgba(255, 122, 0, 0.06);
color: var(--text);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
font-family: inherit;
transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
background: rgba(255, 122, 0, 0.14);
border-color: rgba(255, 122, 0, 0.55);
transform: translateY(-1px);
outline: none;
}
/* ── Light mode ────────────────────────────────────────────────── */
.site-light {
--bg: #f8f6f2;
--bg-soft: #ffffff;
--panel: rgba(0, 0, 0, 0.03);
--panel-strong: rgba(255, 122, 0, 0.10);
--line: rgba(255, 122, 0, 0.32);
--text: #15110c;
--muted: #5a544c;
--white-soft: #15110c;
--shadow: 0 18px 50px rgba(20, 14, 0, 0.08);
}
.site-light { background-color: #f8f6f2; }
.site-light body {
background:
radial-gradient(circle at 78% 15%, rgba(255, 122, 0, 0.10), transparent 18%),
radial-gradient(circle at 82% 26%, rgba(199, 79, 0, 0.06), transparent 22%),
linear-gradient(180deg, #faf7f1 0%, #f6f2ea 45%, #f3eee4 100%);
}
.site-light body::before {
background-image:
linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
opacity: 0.5;
}
.site-light .topbar {
background: rgba(248, 246, 242, 0.86);
border-bottom-color: rgba(255, 122, 0, 0.18);
}
.site-light .nav { color: #4a443c; }
.site-light .brand__logo { filter: drop-shadow(0 0 14px rgba(255, 122, 0, 0.18)); }
.site-light .hero__card,
.site-light .section,
.site-light .metric,
.site-light .quote,
.site-light .team-card,
.site-light .cta,
.site-light .card {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(20, 14, 0, 0.08);
box-shadow: 0 18px 50px rgba(20, 14, 0, 0.05);
}
/* Bare pricing section must stay transparent in light mode too. */
.site-light .section.section--bare {
background: none;
border: 0;
box-shadow: none;
}
/* Coverage panel inner cells — flip dark base to light in light mode. */
.site-light .signal {
border-color: rgba(255, 122, 0, 0.22);
background:
linear-gradient(135deg, rgba(255, 122, 0, 0.10), rgba(255, 122, 0, 0.02) 45%),
rgba(255, 255, 255, 0.85);
}
.site-light .signal__cell {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 122, 0, 0.18);
color: var(--text);
}
.site-light .hero__card {
background:
radial-gradient(circle at 12% 10%, rgba(255, 122, 0, 0.10), transparent 55%),
rgba(255, 255, 255, 0.85);
}
.site-light .hero__panel {
background:
radial-gradient(circle at 80% 20%, rgba(255, 122, 0, 0.18), transparent 55%),
rgba(255, 255, 255, 0.75);
}
.site-light .button--ghost {
background: rgba(255, 122, 0, 0.08);
}
.site-light .footer {
color: rgba(20, 14, 0, 0.55);
border-top-color: rgba(255, 122, 0, 0.16);
}
.site-light .compare__table thead th { color: var(--text); }
.site-light .compare__table tbody th[scope="row"] { color: var(--text); }
.site-light .compare__dash { color: rgba(20, 14, 0, 0.28); }
.site-light .compare__table .is-featured { background: rgba(255, 122, 0, 0.08); }
.site-light .compare__table .compare__section th {
background: rgba(255, 122, 0, 0.07);
border-bottom-color: rgba(255, 122, 0, 0.22);
}
/* Code/prose readability in light mode */
.site-light .prose a { border-bottom-color: rgba(255, 122, 0, 0.4); }
.site-light .post-list__item a { border-top-color: rgba(20, 14, 0, 0.1); }
.site-light .post-list__item:last-child a { border-bottom-color: rgba(20, 14, 0, 0.1); }
/* ── Pricing cards: featured tier + badge + compare section header ── */
.card { position: relative; }
.card--featured {
border: 1px solid var(--orange);
box-shadow: 0 28px 70px rgba(255, 122, 0, 0.18), inset 0 0 0 1px rgba(255, 122, 0, 0.22);
background:
radial-gradient(circle at 80% 0%, rgba(255, 122, 0, 0.10), transparent 55%),
var(--panel);
}
.card__badge {
position: absolute;
top: -12px;
right: 18px;
background: linear-gradient(135deg, var(--orange), var(--orange-bright));
color: #14110b;
font-family: "Instrument Sans", sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
box-shadow: 0 8px 22px rgba(255, 122, 0, 0.35);
}
.compare { padding: 8px 0 0; }
.compare__table .compare__section th {
text-transform: uppercase;
letter-spacing: 0.10em;
font-size: 0.72rem;
color: var(--orange);
background: rgba(255, 122, 0, 0.06);
padding-top: 1.1rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid rgba(255, 122, 0, 0.22);
}
.site-light .card--featured {
border-color: rgba(255, 122, 0, 0.45);
background:
radial-gradient(circle at 80% 0%, rgba(255, 122, 0, 0.12), transparent 55%),
rgba(255, 255, 255, 0.85);
}
.site-light .compare__table .compare__section th {
background: rgba(255, 122, 0, 0.07);
border-bottom-color: rgba(255, 122, 0, 0.24);
}
/* ── Two-doors layout (services dominant, platform secondary) ─────── */
.two-doors {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 24px;
align-items: stretch;
}
.two-doors__primary,
.two-doors__secondary {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 28px;
border-radius: var(--radius-lg, 18px);
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
}
.two-doors__primary {
padding: 36px;
border-color: rgba(255, 122, 0, 0.32);
background:
radial-gradient(circle at 15% 0%, rgba(255, 122, 0, 0.14), transparent 55%),
linear-gradient(135deg, rgba(255, 122, 0, 0.08), transparent 60%),
rgba(255,255,255,0.03);
box-shadow: 0 12px 40px -20px rgba(255, 122, 0, 0.35);
}
.two-doors__primary h3 {
font-family: "Syne", sans-serif;
font-size: clamp(1.6rem, 2.4vw, 2.2rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0;
}
.two-doors__secondary h4 {
font-family: "Syne", sans-serif;
font-size: 1.15rem;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
.two-doors__secondary {
opacity: 0.92;
}
.two-doors__lede {
color: var(--muted);
margin: 0;
font-size: 1.02rem;
}
.two-doors__secondary p {
color: var(--muted);
margin: 0;
font-size: .92rem;
}
.two-doors__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: .55rem;
}
.two-doors__list--compact {
gap: .35rem;
font-size: .92rem;
color: var(--muted);
}
.two-doors__actions {
margin-top: auto;
display: flex;
gap: .6rem;
flex-wrap: wrap;
}
@media (max-width: 820px) {
.two-doors { grid-template-columns: 1fr; }
.two-doors__primary { padding: 28px; }
}
.site-light .two-doors__primary,
.site-light .two-doors__secondary {
border-color: rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
}
.site-light .two-doors__primary {
border-color: rgba(255, 122, 0, 0.45);
background:
radial-gradient(circle at 15% 0%, rgba(255, 122, 0, 0.10), transparent 55%),
rgba(255, 122, 0, 0.04);
}
/* ── Services page polish ──────────────────────────── */
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
.cards--3 { grid-template-columns: 1fr; }
}
.card__price-suffix { font-size: .55em; color: var(--muted); font-weight: 400; }
.card__cta {
margin-top: 1.5rem;
width: 100%;
text-align: center;
display: inline-block;
}
.card__closer {
margin: 14px 0 0;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255, 122, 0, 0.10);
border: 1px solid rgba(255, 122, 0, 0.25);
color: var(--text);
font-size: .95rem;
line-height: 1.45;
}
.card__closer strong { color: var(--orange); }
.plan-router {
margin: 0 0 22px;
padding: 14px 18px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--muted);
font-size: .98rem;
line-height: 1.55;
}
.plan-router strong { color: var(--text); }
.plan-router a { color: var(--orange); text-decoration: none; border-bottom: 1px dashed rgba(255, 122, 0, 0.4); }
.plan-router a:hover { border-bottom-color: var(--orange); }
.engagement-picker {
display: grid;
gap: 12px;
margin: 4px 0 10px;
padding: 0;
border: 0;
min-width: 0;
}
.engagement-picker legend {
margin: 0 0 2px;
padding: 0;
font-family: "Instrument Sans", sans-serif;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.engagement-picker__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.engagement-option {
position: relative;
display: block;
cursor: pointer;
user-select: none;
}
.engagement-option input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.engagement-option span {
min-height: 100%;
display: grid;
gap: 5px;
padding: 14px 14px 13px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.10);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
rgba(0, 0, 0, 0.30);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.engagement-option strong {
color: var(--text);
font-family: "Syne", sans-serif;
font-size: 1.02rem;
line-height: 1.05;
letter-spacing: -0.01em;
}
.engagement-option small {
color: var(--muted);
font-family: "Instrument Sans", sans-serif;
font-size: 0.82rem;
line-height: 1.35;
letter-spacing: 0;
text-transform: none;
}
.engagement-option em {
justify-self: start;
margin-bottom: 1px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255, 122, 0, 0.12);
border: 1px solid rgba(255, 122, 0, 0.24);
color: var(--orange);
font-family: "Instrument Sans", sans-serif;
font-size: 0.66rem;
font-style: normal;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.engagement-option:hover span {
transform: translateY(-1px);
border-color: rgba(255, 122, 0, 0.34);
background:
linear-gradient(145deg, rgba(255, 122, 0, 0.10), rgba(255, 255, 255, 0.025)),
rgba(0, 0, 0, 0.36);
}
.engagement-option input:checked + span {
border-color: rgba(255, 122, 0, 0.72);
background:
radial-gradient(circle at 100% 0%, rgba(255, 122, 0, 0.18), transparent 40%),
linear-gradient(145deg, rgba(255, 122, 0, 0.12), rgba(255, 255, 255, 0.035)),
rgba(0, 0, 0, 0.45);
box-shadow: 0 0 0 1px rgba(255, 122, 0, 0.18), 0 16px 46px rgba(0, 0, 0, 0.28);
}
.engagement-option input:focus-visible + span {
outline: 2px solid var(--orange);
outline-offset: 3px;
}
.engagement-option input:checked + span::after {
content: "Selected";
position: absolute;
top: 11px;
right: 12px;
color: var(--orange);
font-family: "Instrument Sans", sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media (max-width: 680px) {
.engagement-picker__grid { grid-template-columns: 1fr; }
}
/* Mobile: hero, table, generic */
@media (max-width: 768px) {
.hero { padding: 36px 0 28px; }
.hero__card { padding: 24px; }
.hero__card h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.05; }
.compare__table { font-size: .88rem; min-width: 560px; }
.section__header h2 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
}
/* Low-friction quick form */
.lead-quick {
margin: 18px 0 6px;
padding: 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.lead-quick__label { margin: 0 0 10px; color: var(--muted); font-size: .92rem; }
.lead-quick__form { display: flex; gap: 8px; flex-wrap: wrap; }
.lead-quick__form input[type=email] {
flex: 1 1 220px;
min-width: 0;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(0,0,0,0.25);
color: var(--text);
}
.lead-quick__form button { white-space: nowrap; }
.lead-divider {
position: relative;
text-align: center;
margin: 22px 0 14px;
color: var(--muted);
font-size: .82rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.lead-divider::before {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 1px;
background: rgba(255,255,255,0.08);
}
.lead-divider span {
position: relative;
background: var(--panel);
padding: 0 12px;
}