@font-face { font-family: "Inter Fallback"; font-weight: 100 549; src: local("Arial"), local("ArialMT"), local("Helvetica"); ascent-override: 91%; descent-override: 23%; line-gap-override: 0%; size-adjust: 106%; }
@font-face { font-family: "Inter Fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); ascent-override: 108%; descent-override: 27%; line-gap-override: 0%; size-adjust: 90%; }
:root {
--bg: #FBFBF6;
--surface: #FFFFFF;
--ink: #101D1B;
--ink-2: #1E2B28;
--muted: #56635E;
--line: #DCE2D9;
--line-2: #C5CEC1;
--field: #6B7772;
--primary: #3D6630;
--primary-hover: #2E4F24;
--primary-soft: #EEF7E3;
--primary-tint: #E1F8CC;
--on-dark-accent: #B7F777;
--go: #76AE4A;
--go-btn: #B7F777;
--go-btn-hover: #A6EE5C;
--go-soft: #EEF7E3;
--danger: #B91C1C;
--danger-soft: #FEF2F2;
--mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
--sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--gutter: clamp(16px, 4vw, 40px);
--wrap: 1180px;
--radius: 10px;
--radius-sm: 6px;
--text-display: clamp(40px, 1.6rem + 3vw, 64px);
--text-display-sm: clamp(36px, 1.5rem + 2.4vw, 52px);
--text-h2: clamp(28px, 1.25rem + 1.6vw, 40px);
--text-h3: clamp(20px, 1.05rem + .6vw, 26px);
--space-section: 64px;
--space-hero: 48px;
--space-block: 48px;
--space-head: 32px;
--space-card: 24px;
--space-card-sm: 16px;
--space-panel: 24px;
--hover: #F0F2EA;
--hover-soft: #F7F8F2;
--tint: #F5F5ED;
--accent-word: #5B8049;
--dark: #10211D;
--dark-2: #0B1714;
--dark-line: #2A3F38;
--on-dark: #FBFBF6;
--on-dark-muted: #A9B5B0;
}
@media (min-width: 900px) {
:root { --space-section: 96px; --space-hero: 96px; --space-block: 64px; --space-head: 48px; --space-card: 32px; --space-card-sm: 24px; --space-panel: 48px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
margin: 0;
background: var(--bg);
color: var(--ink-2);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--ink); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--text-display); font-weight: 700; letter-spacing: -.04em; line-height: 1.03; }
h2 { font-size: var(--text-h2); font-weight: 680; letter-spacing: -.033em; }
h3 { font-size: 20px; font-weight: 620; letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); text-decoration-thickness: 2px; }
strong { color: var(--ink); font-weight: 650; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: var(--primary-tint); color: var(--ink); }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff;
padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--prose { max-width: calc(720px + 2 * var(--gutter)); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent;
font: inherit; font-weight: 650; font-size: 16px; line-height: 1.2; letter-spacing: -.005em;
text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-sm { min-height: 38px; padding: 8px 12px; font-size: 14px; border-radius: 7px; }
.btn-lg { min-height: 50px; padding: 12px 24px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn-go { background: var(--go-btn); color: var(--ink); border-color: var(--go-btn); }
.btn-go:hover { background: var(--go-btn-hover); border-color: var(--go-btn-hover); color: var(--ink); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--field); background: var(--hover-soft); color: var(--ink); }
.btn-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-on-dark:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn.is-loading::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.035em; }
.mark { display: block; border-radius: 8px; }
.nav-desktop { margin-right: auto; }
.nav-desktop ul, .nav-mobile ul, .footer-col ul { list-style: none; margin: 0; padding: 0; }
.nav-desktop ul { display: flex; gap: 4px; }
.nav-desktop a, .nav-signin {
display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-2); text-decoration: none;
font-weight: 550; font-size: 15px;
}
.nav-desktop a:hover, .nav-signin:hover { background: var(--hover); color: var(--ink); }
.nav-desktop a[aria-current="page"] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 8px 8px 0 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.nav-mobile { display: none; position: relative; }
.nav-mobile summary {
list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 9px;
font-weight: 600; font-size: 14px; color: var(--ink); background: var(--surface);
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; } .burger::after { top: 5px; }
.nav-mobile[open] .burger { background: transparent; }
.nav-mobile[open] .burger::before { top: 0; transform: rotate(45deg); }
.nav-mobile[open] .burger::after { top: 0; transform: rotate(-45deg); }
.nav-mobile-panel {
position: absolute; right: 0; top: calc(100% + 10px); width: min(320px, calc(100vw - 32px));
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 8px;
}
.nav-mobile-panel a:not(.btn) { display: block; padding: 12px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 550; }
.nav-mobile-panel a:not(.btn):hover { background: var(--hover); }
.nav-mobile-panel a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }
.nav-mobile-panel .btn { margin-top: 8px; }
@media (max-width: 900px) {
.nav-desktop, .nav-signin { display: none; }
.header-actions { margin-left: auto; }
.nav-mobile { display: block; }
}
@media (max-width: 400px) {
.header-actions .btn { display: none; }
}
.eyebrow {
margin: 0 0 16px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--primary);
}
.hero { position: relative; padding: var(--space-hero) 0 var(--space-block); background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-layout { position: relative; display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 1024px) {
.hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hero h1 { margin-bottom: .45em; max-width: 10em; }
@media (min-width: 1024px) { .hero h1 { font-size: var(--text-display-sm); } }
@media (max-width: 480px) { .hero-actions .btn { width: 100%; } }
.hl { position: relative; color: var(--accent-word); white-space: nowrap; }
.lead { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 40em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }
.hero-note { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.money { font-variant-numeric: tabular-nums; }
.engine-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.engine-strip li {
font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2);
padding: 4px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
}
.engine-strip li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-right: 8px; vertical-align: 1px; opacity: .7; }
.shot { margin: 0; }
.shot-frame {
position: relative; background: var(--surface); border: 1px solid var(--line-2);
border-radius: var(--radius); overflow: hidden;
}
.shot--hero .shot-frame { border-radius: 12px; }
.shot-bar {
display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px;
background: #F0F2EA; border-bottom: 1px solid var(--line);
}
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.shot-bar span {
margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted);
background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.shot-frame picture { display: block; }
.shot-frame img { width: 100%; }
.shot-placeholder {
display: grid; place-items: center; width: 100%;
background:
repeating-linear-gradient(135deg, rgba(100, 116, 139, .06) 0 10px, transparent 10px 20px),
#FBFBF6;
}
.shot-placeholder span {
font-family: var(--mono); font-size: 12px; color: var(--muted);
border: 1px dashed var(--line-2); background: var(--surface); padding: 4px 12px; border-radius: 8px;
}
.shot--crop .shot-frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; height: auto; }
.shot--crop .shot-placeholder { aspect-ratio: 16 / 10 !important; }
.stats { background: var(--dark); color: var(--on-dark); }
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 24px; padding-bottom: 24px; }
.stat { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.stat-n { font-size: var(--text-h2); font-weight: 700; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-l { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #C5CEC1; }
@media (max-width: 560px) { .stats-row { gap: 12px; } .stat-l { font-size: 11px; letter-spacing: .04em; } }
.section { padding: var(--space-section) 0; }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 680px; margin-bottom: var(--space-head); }
.section-head--split { max-width: none; display: grid; gap: 8px 48px; align-items: end; }
@media (min-width: 860px) { .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.section-head--split .section-lead { margin-bottom: .4em; }
.section-lead { color: var(--muted); font-size: 18px; margin: 0; }
.page-hero { padding: var(--space-hero) 0 var(--space-block); }
.page-hero h1 { max-width: 12em; }
.page-hero .lead { max-width: 38em; }
.bento { display: grid; gap: 16px; }
@media (min-width: 900px) {
.bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bento .bento-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; align-items: end; padding-top: var(--space-head); }
.bento .bento-card--wide .bento-text { align-self: center; padding-bottom: 32px; }
}
.bento-card {
display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
padding: var(--space-card); padding-bottom: 0; overflow: hidden;
}
.bento-card h3 { font-size: var(--text-h3); letter-spacing: -.025em; }
.bento-card p { color: var(--muted); }
.bento-k {
font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
color: var(--primary) !important; margin-bottom: .8em;
}
.bento-card .shot { margin: 0 calc(-1 * var(--space-card)) 0 0; }
.bento-card .shot-frame { border-radius: 8px 0 0 0; border-right: 0; border-bottom: 0; box-shadow: none; }
.mini-list { margin: 1.2em 0 0; display: grid; gap: 8px; }
.mini-list div { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 15px; }
.mini-list dt { font-weight: 650; color: var(--ink); }
.mini-list dd { margin: 0; color: var(--muted); }
@media (max-width: 420px) { .mini-list div { grid-template-columns: 1fr; gap: 0; } }
.tabs { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tab-list { display: flex; border-bottom: 1px solid var(--line); background: var(--bg); }
.no-js .tab-list { display: none; }
.tab-list [role="tab"] {
flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 12px;
font: inherit; font-weight: 650; font-size: 16px; color: var(--muted); background: transparent; border: 0;
border-right: 1px solid var(--line); cursor: pointer; position: relative;
}
.tab-list [role="tab"]:last-child { border-right: 0; }
.tab-list [role="tab"]:hover { color: var(--ink); background: var(--hover); }
.tab-list [role="tab"][aria-selected="true"] { color: var(--primary); background: var(--surface); }
.tab-list [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.tab-list [role="tab"]:focus-visible { outline-offset: -4px; }
.tab-n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: inherit; }
.tab-panel { display: grid; gap: 32px; padding: var(--space-panel); }
.js .tab-panel:not(.is-active) { display: none; }
.tab-panel[hidden] { display: none; }
.no-js .tab-panel + .tab-panel { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .tab-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; } }
.panel-copy h3 { font-size: var(--text-h3); letter-spacing: -.028em; }
.panel-copy p { color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.step-n {
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
background: var(--primary-soft); color: var(--primary); font-family: var(--mono); font-weight: 700; font-size: 14px;
}
.steps strong { display: block; }
.steps div { color: var(--muted); }
.plans { display: grid; gap: 16px; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan {
position: relative; display: flex; flex-direction: column; background: var(--surface);
border: 1px solid var(--line); border-radius: 12px; padding: 24px;
}
.plan--agency { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.plan-tag {
align-self: flex-start; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
display: inline-flex; align-items: center; gap: 8px;
color: var(--primary); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 8px 3px 8px; margin-bottom: 16px;
}
.plan-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.plan--trial .plan-tag { color: #2E5A21; }
.plan-name { font-size: 20px; margin-bottom: .3em; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.plan-amount { font-size: 40px; font-weight: 700; letter-spacing: -.045em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-per { color: var(--muted); font-size: 15px; }
.plan-extra { font-size: 14px; color: var(--muted); min-height: 1.6em; margin-bottom: 12px; }
.plan-blurb { color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.plan-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; align-content: start; flex: 1; }
.plan-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15px; }
.tick { color: var(--primary); margin-top: 3px; }
.currency-switch { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 15px; color: var(--muted); }
.no-js .currency-switch { display: none; }
.seg { display: inline-flex; padding: 3px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; }
.seg button {
font: inherit; font-family: var(--mono); font-size: 13px; font-weight: 600; border: 0; background: transparent;
color: var(--muted); padding: 4px 12px; border-radius: 7px; cursor: pointer; min-height: 34px;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.limits { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.limits th, .limits td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.limits thead th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--bg); font-weight: 600; }
.limits thead th:last-child { color: var(--primary); }
.limits tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.limits tbody tr:last-child th, .limits tbody tr:last-child td { border-bottom: 0; }
.limits td { font-variant-numeric: tabular-nums; }
.limits tbody tr:hover th, .limits tbody tr:hover td { background: var(--hover-soft); }
.yes { color: var(--primary); display: inline-flex; }
.no { color: var(--muted); }
.table-note { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
@media (max-width: 600px) {
.limits { font-size: 14px; min-width: 0; }
.limits th, .limits td { padding: 12px 8px; }
.limits tbody th { width: auto; }
}
.faq-layout { display: grid; gap: 8px 64px; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.faq { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item summary {
list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 16px 4px; cursor: pointer; font-weight: 650; color: var(--ink); font-size: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ink); background: var(--hover-soft); }
.faq-icon { position: relative; width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; background: var(--primary); transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-body { padding: 0 4px 16px; color: var(--muted); max-width: 36em; }
.faq-body p:last-child { margin-bottom: 0; }
.cta-band {
position: relative; background: var(--ink); color: #C5CEC1; overflow: hidden;
padding: var(--space-section) 0;
}
.cta-inner { position: relative; z-index: 1; display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: minmax(0, 1.4fr) auto; } }
.cta-band h2 { color: #fff; }
.cta-band .btn-go, .cta-band .btn-primary { background: var(--go-btn); border-color: var(--go-btn); color: var(--ink); }
.cta-band .btn-go:hover, .cta-band .btn-primary:hover { background: var(--go-btn-hover); border-color: var(--go-btn-hover); color: var(--ink); }
.cta-band p { margin: 0; max-width: 40em; font-size: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band :focus-visible, .stats :focus-visible { outline-color: var(--on-dark-accent); }
.site-footer { background: var(--dark-2); color: var(--on-dark-muted); padding-top: 48px; font-size: 15px; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 64px; } }
.footer-about p { color: var(--on-dark-muted); max-width: 30em; margin-top: 12px; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 700px) { .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer-title { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--on-dark); margin: 0 0 12px; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--on-dark-muted); text-decoration: none; display: inline-block; padding: 2px 0; }
.footer-col a:hover { color: var(--on-dark); text-decoration: underline; }
.footer-base { border-top: 1px solid var(--dark-line); margin-top: 0; padding-top: 16px; padding-bottom: 24px; color: var(--on-dark-muted); font-size: 14px; }
.footer-base p { margin: 0; }
.split { display: grid; gap: 32px 64px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split > div > p { color: var(--muted); }
.engine-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.engine-grid li {
background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-weight: 650; color: var(--ink);
display: flex; align-items: center; gap: 8px;
}
.engine-grid li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--go); flex-shrink: 0; }
.defs { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line-2); }
.def { display: grid; gap: 4px 48px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
@media (min-width: 760px) { .def { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); } }
.def dt { font-weight: 700; color: var(--ink); }
.def dd { margin: 0; color: var(--muted); max-width: 36em; }
.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.plain-list li { position: relative; padding-left: 24px; color: var(--ink-2); }
.plain-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 2px; background: var(--primary); }
.plain-list--tight { gap: 8px; margin-bottom: 16px; }
.check-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 980px) { .check-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; } .check-intro { position: sticky; top: 100px; } }
.check-intro h1 { max-width: 8.6em; }
.aside-note { font-size: 15px; color: var(--muted); border-left: 3px solid var(--primary-tint); padding: 4px 0 4px 12px; }
.check-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-card); min-width: 0; }
.form { display: grid; gap: 16px; }
.form-title { display: flex; flex-direction: column; gap: 4px; font-size: 20px; margin: 0 0 4px; }
.form-step { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--primary); }
.field { display: grid; gap: 4px; }
.field label { font-weight: 600; color: var(--ink); font-size: 15px; }
.opt { font-weight: 400; color: var(--muted); }
.hint { margin: 0; font-size: 14px; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field select, .field textarea {
width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
border: 1px solid var(--field); border-radius: 10px; padding: 12px 12px; min-height: 48px;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 32px;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input::placeholder, .field textarea::placeholder { color: #6B7772; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61, 102, 48, .3); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field--check { grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; }
.field--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); }
.field--check label { font-weight: 400; color: var(--ink-2); font-size: 15px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; padding: 12px 12px; border-radius: 10px; background: var(--danger-soft); border: 1px solid #FECACA; color: #991B1B; font-size: 15px; }
.form-error[hidden] { display: none; }
.form-status { margin: 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.form-status:empty { min-height: 0; }
.result { display: grid; gap: 16px; }
.result-k { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--go-btn); }
.result.is-miss .result-k { color: var(--danger); }
.result h2 { font-size: var(--text-h3); margin: 0; overflow-wrap: anywhere; }
.result h2:focus { outline: none; }
.result h2:focus-visible { outline: 3px solid var(--primary); }
.result-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.result-counts div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.result-counts dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.result-counts dd { margin: 4px 0 0; font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.result-note { color: var(--muted); font-size: 15px; margin: 0; }
.form--unlock { border-top: 1px dashed var(--line-2); padding-top: 16px; margin-top: 4px; }
.locked { border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.locked[hidden] { display: none; }
.locked-preview { display: grid; gap: 16px; padding: 16px; background: var(--bg); border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
@media (min-width: 560px) { .locked-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.locked-k { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.locked-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.locked-list li { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 15px; color: var(--muted); }
.locked-list .pos { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 2.2em; }
.locked-list .bar { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.locked-list .lock { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.locked-list .is-you { color: var(--primary); font-weight: 600; }
.locked-cta { display: grid; gap: 12px; justify-items: start; padding: 16px; }
.locked-title { margin: 0; font-size: 18px; color: var(--ink); }
.locked-sub { margin: 0; font-size: 15px; color: var(--muted); }
.locked-alt { margin: 0; font-size: 14px; color: var(--muted); }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.form-error a { color: inherit; font-weight: 600; }
.form--unlock[hidden] { display: none; }
.full { display: grid; gap: 16px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 24px; }
.full h2 { font-size: 24px; margin: 0; }
.full h2:focus { outline: none; }
.full h3 { font-size: 16px; }
.answer {
overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
padding: 16px; max-height: 420px; overflow-y: auto; font-size: 15px; line-height: 1.6; color: var(--ink-2);
}
.answer > * { margin: 0; }
.answer > * + * { margin-top: 12px; }
.answer ol, .answer ul { padding-left: 24px; }
.answer li + li, .answer li > ol, .answer li > ul { margin-top: 4px; }
.answer strong, .answer .md-h { color: var(--ink); font-weight: 600; }
.answer a { color: var(--primary); }
.answer code { font-family: var(--mono); font-size: 13px; background: var(--hover); border-radius: 4px; padding: 1px 4px; }
.answer blockquote { border-left: 2px solid var(--line-2); padding-left: 12px; color: var(--muted); }
.answer hr { border: 0; border-top: 1px solid var(--line); }
.answer .md-table { overflow-x: auto; }
.answer table { border-collapse: collapse; font-size: 14px; }
.answer th, .answer td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.answer th { background: var(--surface); color: var(--ink); font-weight: 600; }
.test-note { margin: 0; padding: 12px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; font-size: 15px; }
.test-note[hidden] { display: none; }
.full-grid { display: grid; gap: 16px; }
@media (min-width: 560px) { .full-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.brand-list, .source-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.brand-list li, .source-list li { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); font-size: 15px; min-width: 0; }
.brand-list .pos { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 2.2em; }
.brand-list .name, .source-list .name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 550; }
.brand-list .is-you { color: var(--primary); }
.brand-list .is-you::after { content: " (you)"; font-weight: 400; color: var(--muted); }
.sent { font-family: var(--mono); font-size: 12px; text-transform: lowercase; padding: 2px 8px; border-radius: 6px; background: #F0F2EA; color: var(--muted); }
.sent--positive { background: var(--go-soft); color: #2E5A21; }
.sent--negative { background: var(--danger-soft); color: #991B1B; }
.sent:empty { display: none; }
.empty-note { color: var(--muted); font-size: 15px; margin: 0; }
.empty-note[hidden] { display: none; }
.full-cta { background: var(--go-soft); border: 1px solid #C8E6A8; border-radius: 10px; padding: 16px; display: grid; gap: 12px; justify-items: start; }
.full-cta p { margin: 0; color: var(--ink-2); }
.post-list { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.post-card { display: grid; gap: 4px 48px; padding: 32px 0; border-bottom: 1px solid var(--line-2); }
@media (min-width: 860px) { .post-card { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); } .post-card .post-meta { grid-row: span 2; padding-top: .4em; } }
.post-card h2 { font-size: var(--text-h3); margin: 0 0 .3em; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--primary); text-decoration: underline; }
.post-card p { color: var(--muted); margin: 0; max-width: 36em; }
.post-meta { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0; }
.post-n { color: var(--primary); margin-right: 8px; }
.article-head { padding: var(--space-block) 0 24px; }
.article-head h1 { font-size: var(--text-display-sm); }
.article-dek { font-size: 18px; color: var(--muted); }
.crumbs { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--primary); }
.prose { font-size: 16px; line-height: 1.75; color: var(--ink-2); padding-bottom: 32px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: var(--text-h3); margin: 2em 0 .6em; }
.prose h3 { font-size: 20px; margin: 1.6em 0 .5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--primary); }
.prose pre {
background: var(--ink); color: #DCE2D9; border-radius: 12px; padding: 16px 16px; overflow-x: auto;
font-size: 14px; line-height: 1.6; margin: 0 0 1.4em;
}
.prose code { font-family: var(--mono); font-size: .9em; background: var(--primary-soft); color: var(--primary-hover); padding: 1px 4px; border-radius: 5px; }
.prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.prose blockquote { margin: 0 0 1.2em; padding: 4px 0 4px 16px; border-left: 3px solid var(--primary); color: var(--muted); }
.prose-table { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
@media (max-width: 600px) { .prose table { min-width: 0; font-size: 13px; } .prose th, .prose td { padding: 8px; } }
.prose th, .prose td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 650; color: var(--ink); background: #F0F2EA; }
.prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 2em 0; }
.article--legal .prose h2 { font-size: 20px; }
.article-cta { margin: 8px 0 64px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: 10px; padding: 24px; }
.article-cta-title { font-weight: 700; color: var(--ink); font-size: 18px; margin-bottom: .4em; }
.article-cta p { color: var(--muted); }
.contact-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 24px; }
.contact-row { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: 0; }
.contact-row dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.contact-row dd { margin: 0; font-weight: 550; color: var(--ink); overflow-wrap: anywhere; }
.contact-help h2 { font-size: 20px; }
.contact-help p { margin-top: 16px; color: var(--muted); }
.page-hero--404 { padding-bottom: var(--space-section); }
.link-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); max-width: 640px; }
.link-grid a { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 600; text-decoration: none; }
.link-grid a:hover { border-color: var(--primary); }
.nav-dd-li { position: relative; }
.nav-dd summary {
list-style: none; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
color: var(--ink-2); font-weight: 550; font-size: 15px;
}
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary:hover { background: var(--hover); color: var(--ink); }
.nav-dd summary.is-current { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 8px 8px 0 0; }
.dd-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-dd[open] .dd-caret { transform: translateY(1px) rotate(-135deg); }
.nav-desktop .nav-dd-panel {
position: absolute; top: calc(100% + 8px); left: -8px; z-index: 60; display: grid; gap: 2px; min-width: 280px;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px;
}
.nav-desktop .nav-dd-panel a { display: grid; gap: 2px; padding: 8px 12px; border-radius: 8px; }
.nav-dd-panel strong { font-size: 15px; }
.nav-dd-panel a span { color: var(--muted); font-size: 13px; font-weight: 400; }
.nav-desktop .nav-dd-panel a[aria-current="page"] { background: var(--primary-soft); box-shadow: none; border-radius: 8px; }
.nav-group-k { display: block; padding: 12px 12px 4px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.nav-group ul { list-style: none; margin: 0; padding: 0 0 0 8px; }
.pv { margin: 0; min-width: 0; }
.pv-panel {
display: grid; gap: 16px; padding: var(--space-card-sm); background: var(--surface);
border: 1px solid var(--line-2); border-radius: 12px;
}
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pv-brand { margin: 0; font-weight: 650; font-size: 18px; color: var(--ink); letter-spacing: -.02em; }
.pv-meta { margin: 2px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.no-js .pv-chips { display: none; }
.pv-chip {
font: inherit; font-size: 13px; font-weight: 600; min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2);
}
.pv-chip:hover { border-color: var(--primary); color: var(--primary); }
.pv-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pv-kpi { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px; min-width: 0; }
.pv-kpi dt { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pv-kpi dd { margin: 4px 0 0; display: grid; gap: 1px; }
.pv-kpi-v { font-size: var(--text-h3); font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pv-delta { font-size: 12px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-delta.is-up { color: var(--primary); }
.pv-hint { font-size: 12px; color: var(--muted); }
.pv-label { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pv-chart {
position: relative; height: 92px;
background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% 25%;
border-bottom: 1px solid var(--line-2);
}
.pv-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pv-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pv-area { fill: rgba(61, 102, 48, .09); }
.pv-last {
position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--primary); transform: translate(-50%, -50%);
}
.pv-last span {
position: absolute; right: 12px; bottom: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--primary);
background: var(--surface); border: 1px solid var(--primary-tint); border-radius: 6px; padding: 1px 4px; white-space: nowrap;
}
.pv-weeks { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pv-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-row { display: grid; grid-template-columns: minmax(80px, 128px) minmax(0, 1fr) 38px; gap: 8px; align-items: center; font-size: 13px; }
.pv-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 500; }
.pv-row.is-you .pv-who { font-weight: 650; color: var(--ink); }
.pv-you { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); }
.pv-track { position: relative; height: 10px; background: #F0F2EA; border-radius: 4px; }
.pv-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: #A3ADA8; }
.pv-row.is-you .pv-fill { background: var(--primary); }
.pv-hatch {
position: absolute; top: 0; bottom: 0; border-radius: 0 4px 4px 0; border: 1px dashed #C8E6A8; border-left: 0;
background: repeating-linear-gradient(135deg, rgba(61, 102, 48, .28) 0 2px, transparent 2px 6px);
}
.pv-val { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.pv-note { margin: 8px 0 0; padding: 8px 8px; border-radius: 8px; background: var(--primary-soft); color: var(--primary-hover); font-size: 13px; }
@media (max-width: 480px) {
.pv-hint { display: none; }
.pv-weeks span:not(:first-child):not(:last-child) { display: none; }
.pv-row { grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) 36px; gap: 8px; font-size: 13px; }
.pv-who { white-space: normal; line-height: 1.2; }
.pv-kpi { padding: 8px 8px; }
}
.shot-zoom { display: block; position: relative; cursor: zoom-in; color: inherit; }
.shot-zoom picture, .shot-zoom img { display: block; width: 100%; height: auto; }
.shot-zoom:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 0; }
.zoom-hint {
position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px;
background: rgba(16, 33, 29, .85); color: #fff; font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 999px;
opacity: 0;
}
.shot-zoom:hover .zoom-hint, .shot-zoom:focus-visible .zoom-hint { opacity: 1; }
@media (hover: none) { .zoom-hint { opacity: 1; } }
.lightbox { padding: 0; border: 0; background: transparent; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; }
.lightbox::backdrop { background: rgba(16, 33, 29, .8); }
.lb-inner {
display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; width: min(1280px, calc(100vw - 24px)); height: calc(100vh - 24px);
margin: 12px auto; padding: 12px; background: var(--surface); border-radius: 10px;
}
.lb-close { justify-self: end; font: inherit; font-weight: 650; font-size: 14px; min-height: 40px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.lb-close:hover { border-color: var(--primary); color: var(--primary); }
.lb-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.lb-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 899px) { .lb-img { max-width: none; } }
.lb-cap { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tabs--steps .tab-panel, .tabs--segmented .tab-panel { display: block; }
.tabs--steps .tab-list [role="tab"] { font-size: 16px; }
.step-k {
display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
background: var(--primary-soft); color: var(--primary); font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.tabs--steps [role="tab"][aria-selected="true"] .step-k { background: var(--primary); color: #fff; }
.step-next {
display: flex; align-items: center; gap: 8px; width: fit-content; margin: 24px 0 0 auto; min-height: 42px; padding: 8px 16px;
font: inherit; font-weight: 650; font-size: 15px; color: var(--primary); background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer;
}
.step-next:hover { border-color: var(--primary); }
.no-js .step-next { display: none; }
@media (max-width: 600px) {
.tabs--steps .tab-list [role="tab"] { flex-direction: column; gap: 4px; font-size: 13px; padding: 8px 4px; text-align: center; }
}
.tabs--segmented { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.tabs--segmented .tab-list { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; }
.no-js .tabs--segmented .tab-list { display: none; }
.tabs--segmented .tab-list [role="tab"] { flex: 0 0 auto; min-height: 42px; padding: 8px 24px; border: 0; border-radius: 9px; font-size: 16px; }
.tabs--segmented .tab-list [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
.tabs--segmented .tab-list [role="tab"][aria-selected="true"]::after { display: none; }
.tabs--segmented .tab-panel { padding: 0; }
.no-js .tabs--segmented .tab-panel + .tab-panel { border-top: 0; margin-top: 32px; }
.g2f-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .g2f-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 48px; } }
.g2f-copy h3 { font-size: var(--text-h3); letter-spacing: -.028em; }
.g2f-copy p { color: var(--muted); }
.mock { background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; min-width: 0; }
.mock-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.mock-engine { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.mock-k { display: block; margin: 0 0 4px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mock-q { margin: 0; padding: 12px 16px 4px; font-weight: 650; color: var(--ink); }
.mock-q-k { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mock-body { padding: 4px 16px 0; font-size: 15px; color: var(--ink-2); }
.mock-body p { margin: 4px 0; }
.mock-body ol { margin: 0 0 8px; padding-left: 1.3em; }
.mock-body li { margin-bottom: 4px; }
.cite-n { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 4px; padding: 0 4px; margin-left: 3px; }
.mock-miss { display: flex; align-items: flex-start; gap: 8px; margin: 4px 16px 12px; padding: 8px 12px; border-radius: 10px; background: var(--danger-soft); border: 1px solid #FECACA; color: #991B1B; font-size: 14px; }
.mock-miss strong { color: #7F1D1D; }
.miss-x { position: relative; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #B91C1C; margin-top: 1px; }
.miss-x::before, .miss-x::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; background: #fff; transform: rotate(45deg); }
.miss-x::after { transform: rotate(-45deg); }
.mock-sources { padding: 12px 16px 16px; border-top: 1px dashed var(--line-2); }
.mock-sources ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mock-sources li { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.mock-sources li span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 4px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700; }
.rec-type { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); background: var(--primary-soft); border-radius: 6px; padding: 3px 8px; }
.rec-title { margin: 0; padding: 12px 16px 8px; font-size: 18px; }
.rec-why { margin: 0 0 12px; padding: 0 16px; color: var(--ink-2); font-size: 15px; }
.mock--rec > .mock-k { padding: 0 16px; }
.ev-chips { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 4px; }
.ev-chips li { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 8px; }
.ev-dot { width: 6px; height: 6px; border-radius: 50%; background: #B91C1C; }
.ev-chips .ev-src { font-family: var(--mono); font-size: 12px; }
.rec-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; padding: 12px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.rec-btn { background: var(--primary); color: #fff; border-radius: 8px; padding: 4px 12px; font-weight: 650; font-size: 13px; }
.md { margin: 0; padding: 16px 16px; background: var(--ink); color: #DCE2D9; font-family: var(--mono); font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: pre; }
.md code { font: inherit; }
.md-line { display: block; min-height: 1.7em; }
.md-h { color: #C8E6A8; font-weight: 700; }
mark.confirm { background: #FEF3C7; color: #92400E; border-radius: 3px; padding: 0 3px; }
.md mark.confirm { background: rgba(251, 191, 36, .16); color: #FCD34D; }
.draft-note { margin: 0; padding: 12px 16px 12px; font-size: 14px; color: var(--muted); }
.aud-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.report-layout { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .report-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; } }
.report-copy .plain-list { margin-top: 16px; }
.report-pages { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; min-width: 0; }
.report-page { margin: 0; grid-row: 1; }
.report-page .shot-frame { border-radius: 6px; }
.report-page--back { grid-column: 5 / 13; }
.report-page--front { grid-column: 1 / 9; margin-top: 16%; z-index: 1; }
.method-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .method-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 48px; } }
.defs--compact .def { padding: 12px 0; }
@media (min-width: 760px) { .defs--compact .def { grid-template-columns: minmax(0, 10em) minmax(0, 1fr); } }
.claims { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.claims h3 { font-size: 16px; }
.claims .plain-list { margin-bottom: 16px; font-size: 15px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 680px; }
.cmp-wide { min-width: 1040px; font-size: 14px; }
.cmp-wide tbody th { width: 15%; }
.cmp td a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cmp-note { font-size: 14px; color: var(--muted); margin-top: 20px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg); font-weight: 600; }
.cmp thead th.cmp-us { color: var(--primary); }
.cmp tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.cmp td.cmp-us { background: #F7F9F0; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-yes, .cmp-part, .cmp-no { display: inline-flex; align-items: flex-start; gap: 4px; }
.cmp-yes svg { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.cmp-mark { display: inline-block; width: 18px; text-align: center; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.cmp-t { color: var(--muted); font-size: 14px; }
.ask-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 32px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid var(--dark-line); }
.ask-ai-k { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--on-dark-muted); }
.ask-ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ask-ai-btn {
display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px;
color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; background: var(--surface);
}
.ask-ai-btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.mono { font-family: var(--mono); font-size: .92em; }
.lg-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .lg-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .lg-out { position: sticky; top: 92px; } }
.lg-set { display: grid; gap: 16px; margin: 0 0 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.lg-set legend { padding: 0 4px; font-weight: 700; color: var(--ink); }
.lg-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lg-row { padding: 12px; background: var(--bg); border: 1px dashed var(--line-2); border-radius: 12px; }
.lg-row-k { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lg-row-grid { display: grid; gap: 8px; }
@media (min-width: 600px) { .lg-row-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .lg-row-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lg-note { grid-column: 1 / -1; }
.lg-row-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lg-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.lg-opt input { width: 18px; height: 18px; accent-color: var(--primary); }
.lg-remove { font: inherit; font-size: 14px; min-height: 36px; padding: 4px 8px; background: none; border: 0; color: #991B1B; text-decoration: underline; cursor: pointer; border-radius: 6px; }
.lg-remove:disabled { color: var(--muted); text-decoration: none; cursor: not-allowed; }
.lg-out-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lg-out-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.lg-out-k { margin: 0; font-weight: 650; color: var(--ink); }
.lg-actions { display: flex; gap: 8px; }
.lg-pre { margin: 0; padding: 16px; min-height: 260px; max-height: 520px; overflow: auto; background: var(--ink); color: #DCE2D9; font-family: var(--mono); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
#lg-status { padding: 8px 16px 0; }
.lg-warn { list-style: none; margin: 0; padding: 8px 16px 16px; display: grid; gap: 4px; }
.lg-warn:empty { padding: 0; }
.lg-warn li { font-size: 14px; color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: 8px 8px; }
.lg-help { margin-top: 24px; }
.lg-help h2 { font-size: 20px; }
.lg-help > p { color: var(--muted); }
.steps--plain li { padding: 8px 0; }
.how-shot { margin-top: 32px; }
@media (max-width: 699px) {
.cmp { min-width: 0; }
.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
.cmp tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child { border-bottom: 0; }
.cmp tbody th { padding: 0 0 8px; border: 0; width: auto; }
.cmp td { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 8px; padding: 4px 0; border: 0; }
.cmp td::before { content: attr(data-label); font-size: 13px; color: var(--muted); }
.cmp td.cmp-us { background: none; }
.cmp td.cmp-us::before { color: var(--primary); font-weight: 650; }
}
.sticky-split { display: grid; gap: 24px 64px; align-items: start; }
@media (min-width: 960px) {
.sticky-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.sticky-split-head { position: sticky; top: 100px; }
}
.sticky-split-head .section-lead { margin-top: 4px; }
.row-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.row-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 24px 12px 24px 4px; border-bottom: 1px solid var(--line); }
.row-item:hover { background: var(--hover-soft); }
.section--tint .row-item:hover { background: var(--surface); }
.row-item h3 { font-size: 16px; margin-bottom: .3em; }
.row-item p { margin: 0; color: var(--muted); font-size: 16px; max-width: 40em; }
.row-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--field); padding-top: 3px; font-variant-numeric: tabular-nums; }
.tabs--segmented .tab-panel { padding: 0; }
.pill {
display: inline-flex; align-items: center; gap: 8px; margin: 0 0 1.2rem; padding: 4px 12px 4px 8px;
border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
font-size: 13px; font-weight: 550; color: var(--ink-2); line-height: 1.4;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.pill-sep { width: 1px; height: 12px; background: var(--line-2); }
.pill-muted { color: var(--muted); font-weight: 450; }
.combo { position: relative; }
.field .combo-input { padding-right: 36px;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.combo-list {
position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 264px; overflow-y: auto;
margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
}
.combo-list [role="option"] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 15px; color: var(--ink); }
.combo-list [role="option"]:hover, .combo-list [role="option"].active { background: var(--hover); }
.combo-list [role="option"][aria-selected="true"] { font-weight: 600; color: var(--primary); }
.combo-code { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.combo-empty { padding: 8px 12px; font-size: 14px; color: var(--muted); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer .brand-name { color: var(--on-dark); }
.site-footer :focus-visible { outline-color: var(--on-dark-accent); }
.cta-band { background: var(--dark); }
.section--dark { background: var(--dark); color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3, .section--dark strong { color: var(--on-dark); }
.section--dark .eyebrow { color: var(--on-dark-accent); }
.section--dark a { color: var(--on-dark-accent); }
.section--dark :focus-visible { outline-color: var(--on-dark-accent); }
.hero--stacked { background: var(--bg); border-bottom: 0; padding-bottom: 0; }
.hero--stacked .hero-copy { max-width: 820px; }
.hero--stacked h1 { max-width: 13em; font-size: var(--text-display); }
.hero-note { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.note-tick { color: var(--primary); flex-shrink: 0; }
.hero-shot { margin-top: var(--space-head); }
.hero-shot .shot { margin: 0; }
.engines-strip { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.engines-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.engines-k { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.engines-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.engines-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550; color: var(--ink); }
.engine-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.feat-list { list-style: none; margin: 0; padding: 0; }
.feat { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.feat:first-child { border-top: 1px solid var(--line); }
.feat-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; }
.feat h3 { font-size: 18px; margin: 0 0 4px; }
.feat p { margin: 0; color: var(--muted); }
.section--dark .section-lead { color: var(--on-dark-muted); }
.loop-layout { display: grid; gap: var(--space-block); align-items: center; }
@media (min-width: 960px) { .loop-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.loop-steps { list-style: none; margin: 32px 0 0; padding: 0; }
.loop-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-top: 1px solid var(--dark-line); }
.loop-steps strong { display: block; color: var(--on-dark); }
.loop-steps li span:not(.loop-n) { color: var(--on-dark-muted); font-size: 15px; }
.loop-n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--on-dark-accent); padding-top: 3px; }
.loop-visual { display: grid; gap: 12px; }
.loop-card { background: var(--bg); color: var(--ink-2); border: 1px solid var(--dark-line); border-radius: 12px; padding: 20px; }
.section--dark .loop-card h3, .section--dark .loop-card strong { color: var(--ink); }
.loop-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.loop-engine { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); }
.loop-tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.loop-tag--miss { background: var(--danger-soft); color: #991B1B; border: 1px solid #FECACA; }
.loop-q { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.loop-brands { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.loop-brands span { color: var(--muted); margin-left: 6px; }
.loop-brands sup { color: var(--primary); font-weight: 600; margin-left: 2px; }
.loop-sources { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); }
.loop-sources span { font-weight: 600; color: var(--ink); margin-right: 8px; }
.loop-arrow { margin: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark-muted); padding-left: 20px; }
.loop-arrow::before { content: "\2193  "; color: var(--on-dark-accent); }
.loop-card--rec { border-left: 3px solid var(--on-dark-accent); }
.loop-k { margin: 0 0 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--primary); }
.loop-card h3 { font-size: 18px; margin: 0 0 6px; }
.loop-why { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.loop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.loop-chips li { font-size: 12px; font-weight: 600; color: var(--primary-hover); background: var(--primary-tint); border-radius: 999px; padding: 2px 10px; }
.loop-action { margin: 0; }
.loop-btn { display: inline-flex; gap: 6px; align-items: center; background: var(--go-btn); color: var(--ink); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px; }
.report-section { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .report-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.report-pages { display: block; }
.report-page { margin: 0; }
.check-list { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 30px; color: var(--ink-2); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-tint); }
.check-list li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.link-arrow { font-weight: 600; color: var(--primary); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
@media (min-width: 900px) { .plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan--agency { border-color: var(--line); box-shadow: none; }
.plan--featured { border: 2px solid var(--ink); box-shadow: none; }
.plan-badge { position: absolute; top: -12px; left: 24px; margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: var(--on-dark-accent); padding: 3px 10px; border-radius: 999px; }
.cta-band .eyebrow { color: var(--on-dark-accent); }
.cta-band p:not(.eyebrow) { color: var(--on-dark-muted); }
.site-footer .ask-ai-btn { background: transparent; border-color: var(--dark-line); color: var(--on-dark); }
.site-footer .ask-ai-btn:hover { border-color: var(--on-dark-accent); color: var(--on-dark-accent); }
:root {
--sans: "DM Sans", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--fx-ink: #101d1b; --fx-ink-soft: #33423f; --fx-deep: #10211d; --fx-deep-2: #18302a;
--fx-accent: #b7f777; --fx-accent-strong: #9ce657; --fx-cream: #f5f5ed; --fx-paper: #fbfbf6; --fx-white: #ffffff;
--fx-line: #dce2d9; --fx-muted: #6c7773; --fx-mint: #dcf7c4; --fx-radius: 20px; --fx-shadow: 0 28px 80px rgba(16, 33, 29, 0.13);
}
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--fx-paper); color: var(--fx-ink); }
h1, h2, h3 { font-family: "Manrope", var(--sans); }
.fx-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.fx-section { padding: 112px 0; }
.fx-site-header { position: sticky; top: 0; z-index: 40; background: rgba(251, 251, 246, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(220, 226, 217, .75); }
.fx-nav-wrap { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.fx-logo { display: inline-flex; align-items: center; gap: 10px; font-family: "Manrope", var(--sans); font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: var(--fx-ink); text-decoration: none; }
.fx-logo:hover { text-decoration: none; color: var(--fx-ink); }
.fx-logo-light, .fx-logo-light:hover { color: var(--fx-white); }
.fx-logo .mark { display: block; flex-shrink: 0; }
.fx-nav-links { display: flex; gap: 34px; margin-left: 65px; }
.fx-nav-links > a, .fx-signin { font-size: 14px; font-weight: 600; color: var(--fx-ink-soft); text-decoration: none; transition: color .2s; }
.fx-nav-links > a:hover, .fx-signin:hover, .fx-nav-links > a[aria-current="page"] { color: var(--fx-ink); text-decoration: none; }
.fx-nav-actions { display: flex; align-items: center; gap: 24px; }
.fx-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; padding: 14px 20px; font-weight: 700; font-size: 14px; line-height: 1; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; border: 1px solid transparent; cursor: pointer; }
.fx-button:hover { transform: translateY(-2px); text-decoration: none; }
.fx-button-dark, .fx-button-dark:hover { background: var(--fx-deep); color: var(--fx-white); box-shadow: 0 8px 18px rgba(16,33,29,.13); }
.fx-button-dark:hover { background: var(--fx-deep-2); }
.fx-button-accent, .fx-button-accent:hover { background: var(--fx-accent); color: var(--fx-deep); box-shadow: 0 12px 32px rgba(156, 230, 87, .17); }
.fx-button-accent:hover { background: var(--fx-accent-strong); box-shadow: 0 15px 32px rgba(156,230,87,.24); }
.fx-button-outline, .fx-button-outline:hover { border-color: var(--fx-line); background: var(--fx-white); color: var(--fx-ink); }
.fx-button-outline:hover { border-color: var(--fx-ink); }
.fx-button-small { padding: 12px 17px; }
.fx-menu { display: none; position: relative; }
.fx-menu > summary { list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--fx-line); border-radius: 9px; background: white; color: var(--fx-ink); cursor: pointer; }
.fx-menu > summary::-webkit-details-marker { display: none; }
.fx-burger, .fx-burger::before, .fx-burger::after { display: block; width: 16px; height: 1.8px; background: currentColor; border-radius: 2px; position: relative; }
.fx-burger::before, .fx-burger::after { content: ""; position: absolute; left: 0; }
.fx-burger::before { top: -5px; }
.fx-burger::after { top: 5px; }
.fx-menu[open] .fx-burger { background: transparent; }
.fx-menu[open] .fx-burger::before { top: 0; transform: rotate(45deg); }
.fx-menu[open] .fx-burger::after { top: 0; transform: rotate(-45deg); }
.fx-menu-panel { position: fixed; top: 76px; left: 0; right: 0; display: flex; flex-direction: column; gap: 18px; padding: 25px 24px 30px; background: var(--fx-paper); border-bottom: 1px solid var(--fx-line); box-shadow: 0 20px 35px rgba(16,33,29,.08); }
.fx-menu-panel > a { font-size: 15px; font-weight: 600; color: var(--fx-ink-soft); text-decoration: none; }
.fx-mobile-actions { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--fx-line); padding-top: 20px; }
.fx-mobile-actions > a:first-child { font-weight: 600; color: var(--fx-ink); text-decoration: none; }
.fx-hero { position: relative; overflow: hidden; padding: 92px 0 0; background: var(--fx-paper); }
.fx-hero-glow { position: absolute; top: -160px; left: 50%; width: 900px; height: 650px; transform: translateX(-50%); background: radial-gradient(circle, rgba(183,247,119,.26) 0, rgba(183,247,119,0) 70%); pointer-events: none; }
.fx-hero-content { position: relative; text-align: center; }
.fx-eyebrow, .fx-kicker { display: inline-flex; align-items: center; gap: 9px; color: #416137; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }
.fx-eyebrow { padding: 7px 12px; border-radius: 99px; background: rgba(220,247,196,.7); border: 1px solid rgba(65,97,55,.15); }
.fx-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #70aa3f; box-shadow: 0 0 0 4px rgba(112,170,63,.13); }
.page-home h1, .page-home h2, .page-home h3, .page-fx h1, .page-fx h2, .page-fx h3 { font-family: "Manrope", var(--sans); margin: 0; letter-spacing: -.045em; color: inherit; text-wrap: wrap; line-height: 1.06; }
.fx-hero h1 { max-width: 950px; margin: 25px auto 22px; font-size: clamp(52px, 6.6vw, 84px); line-height: .99; font-weight: 600; color: var(--fx-ink); }
.fx-hero h1 em { font-style: normal; color: #5b8049; }
.fx-hero-copy { max-width: 670px; margin: 0 auto; color: var(--fx-ink-soft); font-size: 19px; line-height: 1.65; }
.fx-hero-actions { display: flex; justify-content: center; align-items: center; gap: 27px; margin-top: 31px; }
.fx-hero-actions .fx-button { padding: 17px 22px; font-size: 15px; }
.fx-text-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--fx-ink); text-decoration: none; border-bottom: 1px solid rgba(16,29,27,.3); padding-bottom: 3px; }
.fx-text-link:hover { color: var(--fx-ink); text-decoration: none; border-bottom-color: var(--fx-ink); }
.fx-text-link span { color: #668755; }
.fx-trial-note { display: flex; justify-content: center; align-items: center; gap: 8px; color: var(--fx-muted); font-size: 12px; margin: 17px 0 55px; }
.fx-trial-note svg { color: #5d873e; }
.fx-trial-note span { width: 3px; height: 3px; background: #a4aca9; border-radius: 50%; margin: 0 3px; }
.fx-hero-dashboard { position: relative; width: min(1030px, calc(100% - 40px)); margin: 0 auto; }
.fx-dashboard-shell { text-align: left; border-radius: 18px 18px 0 0; background: #f9faf8; border: 1px solid #d4dbd3; box-shadow: 0 35px 90px rgba(20,38,33,.18); overflow: hidden; }
.fx-dashboard-topbar { height: 58px; background: var(--fx-white); border-bottom: 1px solid #e5e9e4; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 12px; }
.fx-dash-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.fx-dash-symbol { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--fx-deep); color: var(--fx-accent); font-size: 11px; }
.fx-muted, .fx-dash-date { color: #89938f; font-weight: 500; }
.fx-dashboard-grid { display: grid; grid-template-columns: 1fr 270px; }
.fx-dashboard-main { padding: 25px; }
.fx-dashboard-side { padding: 25px 20px 25px 0; display: flex; flex-direction: column; gap: 16px; }
.fx-dash-heading-row, .fx-chart-title, .fx-side-heading { display: flex; justify-content: space-between; align-items: center; }
.fx-dash-label { margin: 0 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #7c8883; font-weight: 700; }
.fx-dash-title { font-family: "Manrope", var(--sans); font-size: 18px; }
.fx-filter-pill { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #dfe5de; background: white; border-radius: 7px; color: #53605c; font-size: 10px; }
.fx-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 19px 0 13px; }
.fx-metric-card, .fx-chart-card, .fx-side-card { background: var(--fx-white); border: 1px solid #e0e5df; border-radius: 11px; }
.fx-metric-card { padding: 15px; position: relative; }
.fx-metric-card > span { color: #78837f; font-size: 10px; display: block; }
.fx-metric-card strong { display: inline-block; font-family: "Manrope", var(--sans); font-size: 26px; margin-top: 6px; letter-spacing: -1.5px; }
.fx-metric-card small { margin-left: 8px; font-size: 9px; color: #71807a; }
.fx-metric-card .fx-positive { color: #4b872a; }
.fx-chart-card { padding: 17px 17px 12px; }
.fx-chart-title { font-size: 11px; }
.fx-chart-title span { display: flex; align-items: center; gap: 6px; color: #7a8581; font-size: 9px; }
.fx-chart-title i { width: 7px; height: 7px; background: #83c94c; border-radius: 50%; }
.fx-chart { height: 156px; position: relative; margin-top: 5px; overflow: hidden; }
.fx-chart-lines { position: absolute; inset: 15px 0 20px; display: flex; flex-direction: column; justify-content: space-between; }
.fx-chart-lines span { border-top: 1px dashed #e6eae5; }
.fx-chart svg { position: absolute; width: 100%; height: 120px; top: 12px; }
.fx-chart-area { fill: url(#fxChartFill); }
.fx-chart-line { fill: none; stroke: #71ad43; stroke-width: 3; vector-effect: non-scaling-stroke; }
.fx-chart-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 8px; color: #929b97; }
.fx-side-card { padding: 17px; flex: 1; }
.fx-side-heading { font-size: 11px; }
.fx-side-heading span { font-size: 9px; color: #929b97; }
.fx-competitor-list { display: flex; flex-direction: column; gap: 16px; margin-top: 21px; }
.fx-competitor-list > div > div:first-child { display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 6px; }
.fx-competitor-list b { font-weight: 600; }
.fx-bar { background: #eef1ed; height: 6px; border-radius: 5px; overflow: hidden; }
.fx-bar span { display: block; height: 100%; background: #83908a; border-radius: 5px; }
.fx-competitor-list .fx-you .fx-bar span { background: var(--fx-accent-strong); }
.fx-competitor-list .fx-you span:first-child { font-weight: 700; }
.fx-gap-card { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 11px; background: var(--fx-deep); color: white; }
.fx-gap-icon { display: grid; place-items: center; width: 35px; height: 35px; background: rgba(183,247,119,.12); color: var(--fx-accent); border-radius: 8px; flex-shrink: 0; }
.fx-gap-card div:nth-child(2) { display: flex; flex-direction: column; }
.fx-gap-card span { color: #aab9b4; font-size: 8px; }
.fx-gap-card strong { font-size: 10px; margin: 2px 0; }
.fx-gap-card small { font-size: 8px; color: #7f918b; }
.fx-floating-card { position: absolute; z-index: 3; background: var(--fx-white); box-shadow: 0 18px 50px rgba(16,33,29,.18); border: 1px solid #e3e8e1; border-radius: 12px; text-align: left; }
.fx-float-left { left: -42px; top: 125px; width: 145px; padding: 15px; }
.fx-float-label { display: block; color: #7c8783; font-size: 9px; }
.fx-float-left strong { display: block; font-family: "Manrope", var(--sans); font-size: 26px; line-height: 1.1; margin: 4px 0 8px; }
.fx-engine-dots { display: flex; }
.fx-engine-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid white; background: #202e2b; margin-right: -4px; }
.fx-engine-dots i:nth-child(2) { background: #649b4a; }
.fx-engine-dots i:nth-child(3) { background: #c8ee79; }
.fx-engine-dots i:nth-child(4) { background: #537371; }
.fx-engine-dots i:nth-child(5) { background: #8e9b98; }
.fx-float-right { right: -50px; bottom: 56px; display: flex; align-items: center; gap: 10px; padding: 13px; min-width: 195px; }
.fx-float-right > svg { margin-left: auto; color: #5e9d35; }
.fx-float-right div:nth-child(2) { display: flex; flex-direction: column; }
.fx-float-right strong { font-size: 10px; }
.fx-float-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--fx-deep); background: var(--fx-mint); border-radius: 8px; }
.fx-engine-strip { background: var(--fx-white); border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); padding: 25px 0; }
.fx-engine-row { display: flex; align-items: center; justify-content: center; gap: 42px; }
.fx-engine-row > p { margin: 0; color: var(--fx-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
.fx-engine-list { display: flex; gap: 28px; align-items: center; list-style: none; margin: 0; padding: 0; }
.fx-engine-list > li { display: flex; align-items: center; gap: 7px; color: #65716d; font-size: 12px; font-weight: 600; }
.fx-engine-mark { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #ecf1eb; color: var(--fx-ink); font-size: 9px; font-weight: 800; }
.fx-e1 { background: #e8f2f6; }
.fx-e2 { background: #efeaf7; }
.fx-e3 { background: #e6f2e8; }
.fx-e4 { background: #f5eddc; }
.fx-section-heading.fx-split { display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 60px; margin-bottom: 50px; }
.fx-section-heading h2, .fx-workflow h2, .fx-report-copy h2, .fx-faq h2 { font-size: clamp(38px, 4vw, 56px); line-height: 1.06; margin-top: 15px; font-weight: 600; }
.fx-section-heading.fx-split > p, .fx-report-copy > p, .fx-faq-grid > div > p { color: var(--fx-muted); font-size: 16px; line-height: 1.7; margin: 0 0 5px; }
.fx-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx-feature-card { padding: 28px; background: var(--fx-white); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); transition: transform .25s, box-shadow .25s; }
.fx-feature-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(16,33,29,.08); }
.fx-feature-top { display: flex; justify-content: space-between; align-items: center; }
.fx-feature-top > span { font-family: "Manrope", var(--sans); color: #a3aca8; font-size: 12px; }
.fx-feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--fx-mint); color: var(--fx-ink); }
.fx-feature-card h3 { font-size: 23px; margin: 42px 0 11px; font-weight: 600; color: var(--fx-ink); }
.fx-feature-card p { color: var(--fx-muted); line-height: 1.65; font-size: 14px; min-height: 70px; margin: 0; }
.fx-feature-card a { display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; font-size: 13px; font-weight: 700; color: var(--fx-ink); text-decoration: none; }
.fx-workflow { background: var(--fx-deep); color: var(--fx-white); overflow: hidden; }
.fx-workflow-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.fx-kicker-light { color: var(--fx-accent); }
.fx-workflow h2 { max-width: 490px; color: var(--fx-white); }
.fx-workflow-copy > p { color: #9cada7; line-height: 1.7; max-width: 500px; }
.fx-steps { margin: 40px 0 0; padding: 0; list-style: none; }
.fx-steps > li { position: relative; display: grid; grid-template-columns: 42px 1fr; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.fx-steps > li > span { grid-row: 1 / 3; color: var(--fx-accent); font-size: 11px; font-weight: 700; }
.fx-steps strong { font-family: "Manrope", var(--sans); font-size: 14px; color: var(--fx-white); }
.fx-steps p { color: #899c95; font-size: 12px; margin: 4px 0 0; }
.fx-workflow-demo { position: relative; }
.fx-answer-card, .fx-recommend-card { background: #f9faf6; color: var(--fx-ink); border-radius: 16px; padding: 23px; box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.fx-answer-card { transform: rotate(-1.5deg); margin-right: 68px; }
.fx-answer-top { display: flex; align-items: center; justify-content: space-between; }
.fx-answer-engine { display: flex; gap: 10px; align-items: center; }
.fx-answer-engine > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #dae8ed; font-size: 10px; font-weight: 800; }
.fx-answer-engine div { display: flex; flex-direction: column; }
.fx-answer-engine strong { font-size: 11px; }
.fx-answer-engine small { color: var(--fx-muted); font-size: 8px; }
.fx-status { background: #f6dfd9; color: #9d4d3d; font-size: 8px; font-weight: 700; border-radius: 30px; padding: 5px 8px; text-transform: uppercase; letter-spacing: .7px; }
.fx-question { font-family: "Manrope", var(--sans); font-size: 15px; font-weight: 700; margin: 23px 0 15px; }
.fx-answer-lines { display: flex; flex-direction: column; gap: 7px; }
.fx-answer-lines span { height: 5px; border-radius: 4px; background: #e1e5df; }
.fx-answer-lines span:nth-child(2) { width: 92%; }
.fx-answer-lines span:nth-child(3) { width: 80%; }
.fx-answer-lines span:nth-child(4) { width: 64%; }
.fx-mention-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 19px; }
.fx-mention-row span { font-size: 8px; border: 1px solid #d8ded6; padding: 5px 7px; border-radius: 5px; }
.fx-mention-row .fx-missing { color: #a04e3f; border-color: #edc8c0; background: #fff2ef; }
.fx-connector { height: 45px; border-left: 1px dashed rgba(183,247,119,.6); margin-left: 50%; position: relative; }
.fx-connector span { position: absolute; top: 15px; left: 10px; font-size: 8px; color: #82978f; text-transform: uppercase; letter-spacing: 1px; }
.fx-recommend-card { margin-left: 62px; transform: rotate(1.5deg); }
.fx-recommend-label { display: flex; align-items: center; gap: 7px; color: #527837; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.fx-recommend-card h3 { font-size: 18px; margin: 13px 0 8px; font-weight: 600; color: var(--fx-ink); }
.fx-recommend-card > p { color: var(--fx-muted); font-size: 10px; line-height: 1.6; margin: 0; }
.fx-recommend-meta { display: flex; gap: 10px; margin: 16px 0; }
.fx-recommend-meta span { display: flex; align-items: center; gap: 4px; font-size: 8px; background: #edf3e9; padding: 6px 8px; border-radius: 5px; }
.fx-recommend-meta span:last-child { background: #f6edd9; }
.fx-recommend-card .fx-button { padding: 11px 14px; font-size: 10px; }
.fx-reporting { background: var(--fx-cream); }
.fx-report-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 110px; }
.fx-report-visual { position: relative; min-height: 510px; }
.fx-paper { position: absolute; inset: 0 20px 0 0; padding: 35px; background: white; border-radius: 4px; box-shadow: var(--fx-shadow); transform: rotate(-1.5deg); z-index: 2; }
.fx-paper-back { transform: rotate(4deg); background: #e3e9df; inset: 16px 0 -3px 30px; z-index: 1; }
.fx-logo-small { font-size: 14px; gap: 8px; }
.fx-paper-head { display: flex; justify-content: space-between; align-items: center; }
.fx-paper-head > span:last-child { font-size: 7px; color: var(--fx-muted); letter-spacing: 1px; }
.fx-paper-rule { height: 1px; background: var(--fx-line); margin: 25px 0; }
.fx-paper > p { font-size: 9px; color: var(--fx-muted); margin: 0; }
.fx-paper > h3 { font-size: 25px; max-width: 380px; margin: 10px 0 26px; font-weight: 600; color: var(--fx-ink); }
.fx-paper-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.fx-paper-stats > div { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--fx-line); border-radius: 7px; }
.fx-paper-stats span { font-size: 7px; color: var(--fx-muted); }
.fx-paper-stats strong { font-family: "Manrope", var(--sans); font-size: 20px; margin: 4px 0; }
.fx-paper-stats i { font-style: normal; font-size: 7px; color: #558b38; }
.fx-paper-stats .fx-neutral { color: var(--fx-muted); }
.fx-paper-chart { height: 130px; margin-top: 28px; border-bottom: 1px solid var(--fx-line); display: flex; align-items: end; gap: 15px; padding: 0 16px; background: repeating-linear-gradient(to bottom,#fff 0,#fff 32px,#edf0ec 33px); }
.fx-paper-chart span { flex: 1; background: #bbec8f; border-radius: 4px 4px 0 0; }
.fx-paper-chart span:last-child { background: #76ae4a; }
.fx-report-copy h2 { max-width: 520px; color: var(--fx-ink); }
.fx-report-copy > p { max-width: 500px; margin: 22px 0 25px; }
.fx-report-copy ul, .fx-price-card ul { list-style: none; padding: 0; margin: 0; }
.fx-report-copy li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 0; color: var(--fx-ink); }
.fx-report-copy li svg { color: #5d8a3d; }
.fx-text-link.fx-strong { margin-top: 28px; }
.fx-pricing { background: var(--fx-paper); }
.fx-centered { text-align: center; }
.fx-centered h2 { margin-top: 13px; color: var(--fx-ink); }
.fx-centered > p { color: var(--fx-muted); }
.fx-pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; margin-top: 48px; }
.fx-price-card { position: relative; padding: 30px; background: var(--fx-white); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); display: flex; flex-direction: column; }
.fx-price-card.fx-featured { border: 2px solid var(--fx-deep); box-shadow: 0 25px 60px rgba(16,33,29,.1); }
.fx-popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); border-radius: 30px; background: var(--fx-deep); color: var(--fx-accent); padding: 6px 12px; text-transform: uppercase; font-weight: 700; letter-spacing: .8px; font-size: 8px; white-space: nowrap; }
.page-home .fx-plan, .page-fx .fx-plan { font-family: "Manrope", var(--sans); font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--fx-ink); }
.fx-price-card > div:first-of-type p { color: var(--fx-muted); font-size: 12px; line-height: 1.5; min-height: 38px; margin: 4px 0 0; }
.fx-price { display: flex; align-items: baseline; margin: 23px 0; }
.fx-price strong { font: 700 42px/1 "Manrope", var(--sans); letter-spacing: -2px; color: var(--fx-ink); }
.fx-price > span { color: var(--fx-muted); font-size: 10px; margin-left: 5px; }
.fx-price strong .money { font: inherit; letter-spacing: inherit; }
.fx-price-card .fx-button { width: 100%; }
.fx-price-card ul { padding-top: 25px; border-top: 1px solid var(--fx-line); margin-top: 25px; display: flex; flex-direction: column; gap: 13px; }
.fx-price-card li { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--fx-ink); }
.fx-price-card li svg { color: #5e913e; flex-shrink: 0; }
.fx-faq { border-top: 1px solid var(--fx-line); }
.fx-faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; }
.fx-faq h2 { color: var(--fx-ink); }
.fx-faq-grid > div > p { margin-top: 20px; }
.fx-faq-grid > div > p a { font-weight: 700; color: var(--fx-ink); text-decoration: none; border-bottom: 1px solid var(--fx-ink); }
.fx-accordion { border-top: 1px solid var(--fx-line); }
.fx-faq-item { border-bottom: 1px solid var(--fx-line); }
.fx-faq-item > summary { list-style: none; width: 100%; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; cursor: pointer; color: var(--fx-ink); font-weight: 600; }
.fx-faq-item > summary::-webkit-details-marker { display: none; }
.fx-faq-item > summary svg { transition: transform .25s; flex-shrink: 0; }
.fx-faq-item[open] > summary svg { transform: rotate(180deg); }
.fx-faq-answer p { color: var(--fx-muted); font-size: 13px; line-height: 1.7; margin: -5px 40px 24px 0; }
.fx-final-cta { position: relative; overflow: hidden; background: var(--fx-deep); color: var(--fx-white); text-align: center; padding: 105px 0; }
.fx-cta-inner { position: relative; z-index: 2; }
.fx-final-cta h2 { font-size: clamp(45px, 6vw, 72px); line-height: 1; margin: 18px 0; font-weight: 600; color: var(--fx-white); }
.fx-final-cta p { color: #a7b6b1; margin: 0 0 27px; }
.fx-final-cta .fx-button { padding: 17px 23px; }
.fx-final-cta small { display: block; color: #83948e; margin-top: 15px; }
.fx-cta-orb { position: absolute; border-radius: 50%; filter: blur(3px); }
.fx-orb-one { width: 450px; height: 450px; background: radial-gradient(circle, rgba(183,247,119,.15), transparent 68%); left: -130px; top: -170px; }
.fx-orb-two { width: 500px; height: 500px; background: radial-gradient(circle, rgba(91,141,113,.18), transparent 70%); right: -130px; bottom: -250px; }
.fx-footer { background: #0b1714; color: #95a49f; padding: 65px 0 25px; }
.fx-footer-main { display: grid; grid-template-columns: 1fr 1.2fr; gap: 100px; }
.fx-footer-brand p { max-width: 330px; font-size: 13px; line-height: 1.7; margin-top: 18px; }
.fx-footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.fx-footer-links div { display: flex; flex-direction: column; gap: 12px; }
.fx-footer-title { color: var(--fx-white); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0; margin: 0 0 6px; }
.fx-footer-links a { font-size: 11px; color: #95a49f; text-decoration: none; transition: color .2s; }
.fx-footer-links a:hover { color: var(--fx-white); }
.fx-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 50px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; font-size: 9px; }
.fx-footer-consent { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fx-footer :focus-visible, .fx-workflow :focus-visible, .fx-final-cta :focus-visible { outline-color: var(--fx-accent); }
@media (max-width: 900px) {
.fx-section { padding: 85px 0; }
.fx-nav-links, .fx-nav-actions { display: none; }
.fx-menu { display: block; }
.fx-dashboard-grid { grid-template-columns: 1fr 220px; }
.fx-float-left { left: -10px; }
.fx-float-right { right: -10px; }
.fx-engine-row { flex-direction: column; gap: 15px; }
.fx-engine-list { flex-wrap: wrap; justify-content: center; }
.fx-section-heading.fx-split { grid-template-columns: 1fr; gap: 20px; }
.fx-workflow-grid, .fx-report-grid, .fx-faq-grid { grid-template-columns: 1fr; gap: 65px; }
.fx-workflow-copy { max-width: 650px; }
.fx-workflow-demo { max-width: 650px; margin: auto; }
.fx-report-visual { max-width: 600px; width: 100%; margin: auto; }
.fx-report-copy { max-width: 600px; }
.fx-pricing-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }
.fx-price-card > div:first-of-type p { min-height: auto; }
.fx-footer-main { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 650px) {
.fx-container { width: min(100% - 32px, 1180px); }
.fx-section { padding: 72px 0; }
.fx-hero { padding-top: 65px; }
.fx-hero h1 { font-size: 48px; }
.fx-hero-copy { font-size: 16px; }
.fx-hero-actions { flex-direction: column; gap: 17px; }
.fx-trial-note { flex-wrap: wrap; margin-bottom: 40px; }
.fx-hero-dashboard { width: 100%; }
.fx-dashboard-shell { border-radius: 12px 12px 0 0; }
.fx-dashboard-grid { display: block; }
.fx-dashboard-main { padding: 13px; }
.fx-dashboard-side { display: none; }
.fx-dashboard-topbar { padding: 0 13px; }
.fx-metric-card { padding: 11px 8px; }
.fx-metric-card strong { font-size: 20px; }
.fx-metric-card small { display: block; margin: 2px 0 0; }
.fx-floating-card { display: none; }
.fx-chart { height: 130px; }
.fx-chart svg { height: 100px; }
.fx-engine-list { gap: 13px; }
.fx-engine-list > li { font-size: 10px; }
.fx-section-heading h2, .fx-workflow h2, .fx-report-copy h2, .fx-faq h2 { font-size: 38px; }
.fx-feature-grid { grid-template-columns: 1fr; }
.fx-feature-card p { min-height: auto; }
.fx-feature-card h3 { margin-top: 28px; }
.fx-workflow-grid { gap: 50px; }
.fx-answer-card { margin-right: 20px; }
.fx-recommend-card { margin-left: 20px; }
.fx-report-visual { min-height: 390px; }
.fx-paper { padding: 23px; }
.fx-paper > h3 { font-size: 19px; }
.fx-paper-chart { height: 90px; }
.fx-paper-stats > div { padding: 8px; }
.fx-paper-stats strong { font-size: 16px; }
.fx-faq-grid { gap: 40px; }
.fx-final-cta { padding: 80px 0; }
.fx-footer-links { grid-template-columns: 1fr 1fr; row-gap: 35px; }
.fx-footer-bottom { flex-direction: column; gap: 10px; }
}
.fx-cream { background: var(--fx-cream); }
.fx-page-hero h1 { max-width: 860px; font-size: clamp(44px, 5.6vw, 72px); }
.fx-hero-floaters { position: absolute; inset: 0; pointer-events: none; }
.fx-hero-floaters .fx-float-left { left: 0; top: 70px; }
.fx-hero-floaters .fx-float-right { right: 0; top: 215px; bottom: auto; }
@media (max-width: 1319px) { .fx-hero-floaters { display: none; } }
.fx-float-note { display: flex; align-items: center; gap: 10px; padding: 13px; min-width: 195px; width: auto; }
.fx-float-note > svg { margin-left: auto; color: #5e9d35; }
.fx-float-note > div:nth-child(2) { display: flex; flex-direction: column; }
.fx-float-note strong { font-size: 10px; margin: 0; }
.fx-hero-floaters .fx-float-note { animation: fx-drift 7s ease-in-out infinite; }
.fx-hero-floaters .fx-float-right { animation-delay: -3.5s; }
@keyframes fx-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .fx-hero-floaters .fx-float-note { animation: none; } }
.fx-run-shell { text-align: left; border-radius: 18px 18px 0 0; background: #f9faf8; border: 1px solid #d4dbd3; border-bottom: 0; box-shadow: 0 35px 90px rgba(20,38,33,.18); overflow: hidden; }
.fx-run-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 25px 25px 18px; }
.fx-run-stage { display: flex; flex-direction: column; gap: 8px; min-height: 212px; padding: 17px; background: var(--fx-white); border: 1px solid #e0e5df; border-radius: 11px; }
.fx-run-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #7c8883; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.fx-run-pill { padding: 3px 8px; border-radius: 99px; background: var(--fx-mint); color: #2f5a1f; font-size: 9px; letter-spacing: .4px; }
.fx-run-num { font: 700 32px/1 "Manrope", var(--sans); letter-spacing: -1.5px; color: var(--fx-ink); }
.fx-run-stage small { color: #78837f; font-size: 11px; line-height: 1.45; }
.fx-run-stage small b { color: #4b872a; }
.fx-run-dots, .fx-run-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.fx-run-dots i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #ecf1eb; color: var(--fx-ink); font-style: normal; font-size: 9px; font-weight: 800; }
.fx-run-chips span { padding: 4px 7px; border-radius: 6px; background: #f1f4f0; border: 1px solid #e3e8e1; color: #53605c; font-size: 9px; font-weight: 600; }
.fx-run-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; margin-top: auto; }
.fx-run-bars span { flex: 1; background: #bbec8f; border-radius: 3px 3px 0 0; }
.fx-run-bars span:last-child { background: #76ae4a; }
.fx-run-dark { background: var(--fx-deep); border-color: var(--fx-deep); }
.fx-run-dark .fx-run-top, .fx-run-dark small { color: #9cada7; }
.fx-run-dark .fx-run-pill { background: rgba(183,247,119,.14); color: var(--fx-accent); }
.fx-run-dark .fx-run-num { color: var(--fx-white); }
.fx-run-cta { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: auto; padding: 8px 11px; border-radius: 7px; background: var(--fx-accent); color: var(--fx-deep); font-size: 10px; font-weight: 700; }
.fx-run-foot { display: flex; align-items: center; gap: 14px; padding: 0 25px 22px; color: #7c8883; font-size: 10px; }
.fx-run-progress { flex: 1; height: 6px; background: #eef1ed; border-radius: 5px; overflow: hidden; }
.fx-run-progress span { display: block; height: 100%; width: 100%; background: var(--fx-accent-strong); border-radius: 5px; }
.fx-step-grid { list-style: none; margin: 0; padding: 0; }
.fx-step-grid .fx-feature-card h3 { margin-top: 34px; font-size: 21px; }
.fx-step-grid .fx-feature-card p { min-height: 0; }
.fx-engine-card { background: var(--fx-white); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); overflow: hidden; }
.fx-engine-card-head, .fx-engine-card-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 16px; padding: 16px 24px; }
.fx-engine-card-head { background: var(--fx-cream); color: var(--fx-muted); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.fx-engine-card-row { border-top: 1px solid var(--fx-line); }
.fx-engine-card-name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--fx-ink); }
.fx-engine-card-name .fx-engine-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.fx-engine-card-plans { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-engine-card-plans i { font-style: normal; padding: 4px 9px; border-radius: 99px; background: var(--fx-mint); color: #2f5a1f; font-size: 11px; font-weight: 600; }
.fx-section-heading.fx-centered > p { max-width: 660px; margin: 16px auto 0; font-size: 16px; line-height: 1.7; }
.fx-def-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin: 48px 0 0; }
.fx-def-card { grid-column: span 2; padding: 26px; background: var(--fx-white); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); }
.fx-def-card:nth-child(4) { grid-column: 2 / span 2; }
.fx-def-card > span { font-family: "Manrope", var(--sans); color: #a3aca8; font-size: 12px; }
.fx-def-card dt { margin: 14px 0 8px; font: 600 20px/1.2 "Manrope", var(--sans); letter-spacing: -.03em; color: var(--fx-ink); }
.fx-def-card dd { margin: 0; color: var(--fx-muted); font-size: 14px; line-height: 1.65; }
.fx-shot-wrap { position: relative; margin-top: 56px; }
.fx-shot-wrap .shot-frame { border-radius: 18px; box-shadow: var(--fx-shadow); border-color: #d4dbd3; }
.fx-shot-wrap .fx-float-right { right: -36px; bottom: 48px; }
.fx-limits-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; }
.fx-limits-grid h2 { font-size: clamp(38px, 4vw, 56px); margin-top: 15px; font-weight: 600; color: var(--fx-ink); }
.fx-limits-grid > div > p { color: var(--fx-muted); font-size: 16px; line-height: 1.7; margin: 20px 0 0; max-width: 420px; }
.fx-limit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fx-line); }
.fx-limit-list li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--fx-line); }
.fx-limit-list p { margin: 0; color: var(--fx-ink-soft); font-size: 15px; line-height: 1.65; }
.fx-limit-icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--fx-cream); border: 1px solid var(--fx-line); color: var(--fx-muted); }
.fx-compare { border-top: 1px solid var(--fx-line); }
.fx-table-card { margin-top: 48px; background: var(--fx-white); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); box-shadow: 0 24px 50px rgba(16,33,29,.06); overflow: hidden; }
.fx-table-card.table-wrap { overflow-x: auto; }
.fx-table-card .table-wrap { border: 0; border-radius: 0; background: transparent; }
.fx-table-card .cmp, .fx-table-card .limits { font-size: 14px; }
.fx-table-card .cmp th, .fx-table-card .cmp td, .fx-table-card .limits th, .fx-table-card .limits td { padding: 16px 22px; border-color: var(--fx-line); }
.fx-table-card .cmp thead th, .fx-table-card .limits thead th { font-family: var(--sans); font-size: 11px; letter-spacing: 1.2px; font-weight: 700; color: var(--fx-muted); background: var(--fx-cream); }
.fx-table-card .cmp thead th.cmp-us { color: var(--fx-ink); background: var(--fx-mint); }
.fx-table-card .cmp td.cmp-us { background: #f6fcef; }
.fx-table-card .cmp-yes svg, .fx-table-card .limits .yes { color: #4b872a; }
.fx-table-card .limits thead th:last-child { color: var(--fx-muted); }
.fx-table-card .limits thead th:nth-child(3) { color: var(--fx-ink); background: var(--fx-mint); }
.fx-table-card .limits td:nth-child(3) { background: #f6fcef; }
.fx-table-card .limits tbody tr:hover th, .fx-table-card .limits tbody tr:hover td { background: #fafcf7; }
.fx-table-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 20px 0 0; color: var(--fx-muted); font-size: 13px; text-align: center; }
.fx-table-note svg { color: #5d873e; flex-shrink: 0; }
.fx-page-hero:has(.fx-hero-plans) { padding-bottom: 104px; }
.fx-hero-plans { text-align: left; margin-top: 0; }
.fx-currency { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--fx-muted); }
.no-js .fx-currency { display: none; }
.fx-currency .seg { background: var(--fx-white); border-color: var(--fx-line); box-shadow: 0 8px 18px rgba(16,33,29,.06); }
.fx-currency .seg button { font-family: var(--sans); font-weight: 700; color: var(--fx-muted); padding: 4px 16px; }
.fx-currency .seg button[aria-pressed="true"] { background: var(--fx-deep); color: var(--fx-accent); }
.fx-trial-strip { display: flex; align-items: center; gap: 18px; margin: 22px auto 0; padding: 20px 24px; text-align: left; background: var(--fx-white); border: 1px dashed #c3ccc0; border-radius: var(--fx-radius); }
.fx-trial-strip h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--fx-ink); }
.fx-trial-strip p { margin: 4px 0 0; color: var(--fx-muted); font-size: 13px; line-height: 1.55; }
.fx-trial-strip .fx-button { margin-left: auto; flex-shrink: 0; }
.fx-trial-strip .fx-float-icon { flex-shrink: 0; }
.fx-cta-actions { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.fx-text-link-light, .fx-text-link-light:hover { color: var(--fx-white); border-bottom-color: rgba(255,255,255,.35); }
.fx-text-link-light:hover { border-bottom-color: var(--fx-white); }
@media (max-width: 900px) {
.fx-run-grid { grid-template-columns: repeat(2, 1fr); }
.fx-def-grid { grid-template-columns: 1fr 1fr; }
.fx-def-card, .fx-def-card:nth-child(4) { grid-column: auto; }
.fx-limits-grid { grid-template-columns: 1fr; gap: 40px; }
.fx-shot-wrap .fx-float-right { right: -10px; }
.fx-step-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
.fx-page-hero h1 { font-size: 42px; }
.fx-page-hero h1 br { display: none; }
.fx-run-grid { padding: 13px; gap: 9px; }
.fx-run-stage { min-height: 0; padding: 13px; }
.fx-run-num { font-size: 24px; }
.fx-run-foot { padding: 0 13px 14px; }
.fx-step-grid, .fx-def-grid { grid-template-columns: 1fr; }
.fx-engine-card-head, .fx-engine-card-row { padding: 14px 16px; grid-template-columns: 1fr; gap: 8px; }
.fx-engine-card-head span:last-child { display: none; }
.fx-limits-grid h2 { font-size: 38px; }
.fx-table-card .cmp th, .fx-table-card .cmp td, .fx-table-card .limits th, .fx-table-card .limits td { padding: 12px 10px; }
.fx-trial-strip { flex-direction: column; align-items: flex-start; }
.fx-trial-strip .fx-button { margin-left: 0; width: 100%; }
.fx-page-hero:has(.fx-hero-plans) { padding-bottom: 72px; }
.fx-currency { flex-direction: column; gap: 8px; }
}
.fx-hero-run .fx-float-left { left: -112px; top: 64px; }
.fx-hero-run .fx-float-right { right: -160px; top: 150px; bottom: auto; }
@media (max-width: 1339px) { .fx-hero-run .fx-floating-card { display: none; } }
.fx-price-card .fx-plan + p { color: var(--fx-muted); font-size: 12px; line-height: 1.5; min-height: 38px; margin: 4px 0 0; }
@media (max-width: 900px) { .fx-price-card .fx-plan + p { min-height: auto; } }
.fx-page-hero { padding-top: 64px; }
.fx-page-hero h1 { margin: 20px auto 16px; font-size: clamp(40px, 4.6vw, 60px); }
.fx-page-hero .fx-hero-copy { font-size: 17px; }
.fx-page-hero .fx-hero-actions { margin-top: 24px; }
.fx-page-hero:has(.fx-hero-plans) .fx-trial-note { margin: 12px 0 34px; }
.fx-page-hero:has(.fx-hero-plans) .fx-hero-actions { margin-top: 20px; }
.fx-hero-floaters .fx-float-left { top: 56px; }
.fx-hero-floaters .fx-float-right { top: 170px; }
.fx-page-title { position: relative; overflow: hidden; padding: 72px 0 56px; text-align: center; }
.fx-page-title .fx-hero-glow { top: -380px; }
.fx-page-title .fx-container { position: relative; }
.fx-page-title h1 { max-width: 820px; margin: 16px auto 0; font: 600 clamp(36px, 4.4vw, 56px)/1.06 "Manrope", var(--sans); letter-spacing: -.045em; color: var(--fx-ink); text-wrap: balance; }
.fx-page-title > .fx-container > p { max-width: 640px; margin: 18px auto 0; color: var(--fx-muted); font-size: 17px; line-height: 1.65; }
.fx-page-title .link-grid { max-width: 640px; margin: 36px auto 0; text-align: left; }
.fx-page-title--404 { padding-bottom: 112px; }
.article-head { padding: 72px 0 32px; margin-bottom: 40px; border-bottom: 1px solid var(--fx-line); }
.article-head h1 { font: 600 clamp(34px, 4vw, 50px)/1.08 "Manrope", var(--sans); letter-spacing: -.04em; color: var(--fx-ink); margin: 0 0 16px; }
.article-dek { color: var(--fx-muted); }
.crumbs { font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #416137; }
.crumbs a { color: #416137; text-decoration: none; }
.crumbs a:hover { color: var(--fx-ink); }
.post-meta { font-family: var(--sans); color: var(--fx-muted); }
.prose { color: var(--fx-ink-soft); }
.prose h2, .prose h3 { letter-spacing: -.03em; color: var(--fx-ink); }
.article-cta { border-radius: var(--fx-radius); border: 1px solid var(--fx-line); border-left: 4px solid var(--fx-deep); }
.post-list { border-top-color: var(--fx-line); }
.post-card { border-bottom-color: var(--fx-line); }
.post-card h2 { letter-spacing: -.035em; }
.post-card h2 a:hover { color: #3d6630; }
.contact-card, .check-card { border-color: var(--fx-line); border-radius: var(--fx-radius); box-shadow: 0 24px 50px rgba(16,33,29,.06); }
.contact-row dt { font-family: var(--sans); font-weight: 700; letter-spacing: 1.2px; font-size: 11px; }
.contact-help h2 { letter-spacing: -.03em; }
.btn { border-radius: 10px; font-weight: 700; }
.page-hero--check { position: relative; overflow: hidden; }
.page-hero--check .wrap { position: relative; }
.page-hero--check .fx-hero-glow { left: 25%; }
.page-hero--check h1 { margin-top: 20px; font-weight: 600; letter-spacing: -.045em; }
@media (max-width: 650px) {
.fx-page-title { padding: 56px 0 40px; }
.fx-page-title > .fx-container > p { font-size: 16px; }
.article-head { padding-top: 48px; }
}
.post-list { border-top: 0; }
.post-list > .post-card:first-child { border-top: 1px solid var(--fx-line); }
.fx-proof { background: var(--fx-cream); border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); }
.fx-proof-figure { margin: 0; }
.fx-proof-stage { position: relative; width: 100%; padding: 20px 0 10px; }
.fx-proof-shell { width: calc(100% - 290px); margin-left: auto; text-align: left; border-radius: 18px; background: #f9faf8; border: 1px solid #d4dbd3; box-shadow: 0 35px 90px rgba(20,38,33,.16); overflow: hidden; }
.fx-proof-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.fx-proof-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fx-proof-kpis > div { background: var(--fx-white); border: 1px solid #e0e5df; border-radius: 11px; padding: 14px 15px; }
.fx-proof-kpis span { display: block; color: #78837f; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.fx-proof-kpis strong { display: block; font: 700 30px/1.1 "Manrope", var(--sans); letter-spacing: -1.5px; color: var(--fx-ink); margin: 8px 0 4px; }
.fx-proof-kpis strong em { font-style: normal; font-size: 15px; color: #78837f; letter-spacing: 0; margin-left: 4px; }
.fx-proof-kpis small { color: #78837f; font-size: 11px; }
.fx-proof-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; }
.fx-proof-card { background: var(--fx-white); border: 1px solid #e0e5df; border-radius: 11px; padding: 18px; }
.fx-proof-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.fx-proof-card-head strong { font: 700 15px/1.2 "Manrope", var(--sans); color: var(--fx-ink); }
.fx-proof-card-head span { color: #78837f; font-size: 10px; }
.fx-proof-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-proof-bars li { display: grid; grid-template-columns: 1.1fr 1.2fr 38px; align-items: center; gap: 10px; font-size: 12px; color: var(--fx-ink); }
.fx-proof-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.fx-proof-bar { display: block; height: 8px; border-radius: 5px; background: #eef1ed; overflow: hidden; }
.fx-proof-bar i { display: block; height: 100%; background: #a3aca8; border-radius: 5px; }
.fx-proof-you { font-weight: 700; }
.fx-proof-you small { color: #78837f; font-weight: 500; }
.fx-proof-you .fx-proof-bar { background: repeating-linear-gradient(135deg, #dfe8d6 0 4px, #f1f5ec 4px 8px); }
.fx-proof-you .fx-proof-bar i { background: #4f7f2a; min-width: 6px; }
.fx-proof-gap { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: #eef8e4; color: #33423f; font-size: 11px; line-height: 1.5; }
.fx-proof-gap b { color: var(--fx-ink); }
.fx-proof-rec { border-left: 4px solid #7c4dcc; display: flex; flex-direction: column; gap: 9px; }
.fx-proof-rec-k { color: #6c7773; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.fx-proof-rec strong { font: 700 15px/1.3 "Manrope", var(--sans); color: var(--fx-ink); }
.fx-proof-rec p { margin: 0; color: #4a5753; font-size: 12px; line-height: 1.55; }
.fx-proof-evidence { align-self: flex-start; padding: 5px 9px; border: 1px solid #dfe5de; border-radius: 7px; font-size: 10px; color: #33423f; background: #fafbf9; }
.fx-proof-rec-actions { display: flex; gap: 8px; margin-top: auto; }
.fx-proof-btn { display: inline-flex; padding: 8px 12px; border-radius: 7px; background: var(--fx-deep); color: var(--fx-white); font-size: 11px; font-weight: 700; }
.fx-proof-btn-ghost { background: var(--fx-white); color: var(--fx-ink); border: 1px solid #dfe5de; }
.fx-proof-float { position: absolute; z-index: 3; }
.fx-proof-answer { left: 22px; top: 70px; width: 300px; padding: 16px; }
.fx-proof-float-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.fx-proof-float-head strong { display: block; font-size: 12px; color: var(--fx-ink); }
.fx-proof-float-head small { display: block; color: #7c8783; font-size: 10px; line-height: 1.4; margin-top: 2px; }
.fx-proof-engine { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--fx-deep); color: var(--fx-accent); font-size: 10px; font-weight: 800; }
.fx-proof-answer ol { margin: 0 0 8px; padding-left: 20px; font-size: 12px; color: var(--fx-ink); font-weight: 600; display: flex; flex-direction: column; gap: 3px; }
.fx-proof-missing { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 9px; border-radius: 7px; background: #fdecea; color: #a12a1f; font-size: 11px; font-weight: 700; }
.fx-proof-source { left: 82px; bottom: 60px; width: 240px; padding: 16px; }
.fx-proof-source strong { display: block; font: 700 18px/1.2 "Manrope", var(--sans); color: var(--fx-ink); margin: 4px 0 8px; }
.fx-proof-source-row { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #4a5753; }
.fx-proof-no { color: #a12a1f; font-weight: 700; }
.fx-proof-draft { right: -40px; bottom: 24px; width: 270px; padding: 16px; }
@media (min-width: 1200px) { .fx-proof-stage { padding-bottom: 104px; } .fx-proof-source { bottom: 164px; } }
.fx-proof-draft-k { display: flex; align-items: center; gap: 7px; color: #416137; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.fx-proof-draft strong { display: block; font: 700 14px/1.3 "Manrope", var(--sans); color: var(--fx-ink); margin: 8px 0; }
.fx-proof-draft ul { margin: 0 0 10px; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #4a5753; line-height: 1.4; }
.fx-proof-draft-foot { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--fx-mint); color: #2f5a1f; font-size: 10px; font-weight: 700; }
.fx-proof-caption { text-align: center; color: var(--fx-muted); font-size: 12px; margin-top: 10px; }
.fx-proof-points { list-style: none; margin: 34px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px; }
.fx-proof-points li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--fx-ink); }
.fx-proof-points svg { color: #5d8a3d; }
.fx-proof-cta { text-align: center; margin-top: 28px; }
@media (max-width: 1199px) {
.fx-proof-shell { width: 100%; }
.fx-proof-float { display: none; }
}
@media (max-width: 900px) {
.fx-proof-kpis { grid-template-columns: 1fr 1fr; }
.fx-proof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
.fx-proof-stage { width: 100%; padding: 0; }
.fx-proof-float { display: none; }
.fx-proof-body { padding: 12px; }
.fx-proof-kpis strong { font-size: 24px; }
.fx-proof-bars li { grid-template-columns: 1fr 1fr 34px; font-size: 11px; }
.fx-proof-card-head { flex-direction: column; gap: 2px; }
}
.form-step, .result-k, .result-counts dt, .locked-k, .locked-list .pos, .locked-list .lock { font-family: var(--sans); font-weight: 700; letter-spacing: 1.2px; }
.form-step, .result-k { color: #416137; }
.result.is-miss .result-k { color: var(--danger); }
.result h2, .locked-title, .form-title { font-family: "Manrope", var(--sans); letter-spacing: -.03em; }
.result-counts dd { font-family: "Manrope", var(--sans); letter-spacing: -.04em; }
.result-counts div, .locked { border-color: var(--fx-line); }
.locked-list .lock { font-weight: 600; letter-spacing: .3px; }