/* =========================================================================
Account Editor — v2 inner pages
Loaded after v2/style.css. It borrows the whole language of the home
page — the warm ground, the near-black panels, the lime, Plus Jakarta —
and adds only what an inner page needs: a breadcrumb, a hero that can
hold a live product mock instead of a photo, and the five section kinds
every feature page repeats. Each feature page then picks its own
treatment for "what you get", so no two read the same.
========================================================================= */
.pg { background: var(--ov-bg); color: var(--ov-ink); }
/* the home page's bar scrolls away with the hero; an inner page is long, so
here it rides along and firms up once the page has moved */
.pg .ov-hdr { position: fixed; }
/* Once the page has moved the bar becomes a real header: the ground runs the
full width of the window and up to its top edge, with a hairline under it.
Painting it on .ov-hdr__in instead left a bare white slab floating in the
middle of the page — that box carries no padding or radius in v2. */
.pg .ov-hdr::before {
content: ""; position: absolute; inset: -14px 0 -14px; z-index: 0;
background: rgba(244, 242, 238, 0.78);
-webkit-backdrop-filter: blur(20px) saturate(165%);
backdrop-filter: blur(20px) saturate(165%);
border-bottom: 1px solid rgba(17, 19, 18, 0.07);
opacity: 0; pointer-events: none;
transition: opacity 0.28s ease;
}
.pg .ov-hdr.is-stuck::before { opacity: 1; }
.pg .ov-hdr__in { position: relative; z-index: 1; }
/* the menu panel drops below that ground, not behind it */
.pg .ov-hdr__nav { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .pg .ov-hdr::before { transition: none; } }
/* every inner-page section keeps the home page's rhythm */
.pg-sec { position: relative; z-index: 4; padding-block: var(--ov-y); }
.pg-sec--tight { padding-block: clamp(30px, 4vh, 56px); }
/* the inner pages speak in the v2 face, never the v1 condensed caps */
.pg h1, .pg h2, .pg h3, .pg h4, .pg .pg-mock,
.ov-ftr .pg-x {
font-family: var(--ov-face) !important;
text-transform: none !important;
letter-spacing: -0.025em;
}
/* --------------------------------- head -------------------------------- */
.pg-head { max-width: 680px; margin-bottom: var(--ov-head-gap); }
.pg-head--mid { margin-inline: auto; text-align: center; }
.pg-head h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; font-weight: 700; }
.pg-head p { margin-top: 16px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--ov-ink-2); }
.pg-dark .pg-head p { color: rgba(255, 255, 255, 0.6); }
.pg-dark .pg-head h2 { color: #fff; }
.pg-kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ov-ink-3);
}
.pg-kicker::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.pg-dark .pg-kicker { color: rgba(255, 255, 255, 0.45); }
/* ------------------------------ breadcrumb ----------------------------- */
/* The crumb clears the floating header by a fixed gap measured against the
header itself. It used to be a share of the window height, which made the
gap 105px on a tall desktop and 57px on a short laptop — and on a phone it
grew again, which is what read as dead space under the bar.
the bar is the capsule plus 14px of ground either side: 84px, 70px once
the menu button takes over at 759px, and 68px at 400px. */
.pg-crumb { padding-top: 106px; }
.pg-crumb ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: 13.5px; color: var(--ov-ink-3);
}
.pg-crumb li { display: flex; align-items: center; gap: 8px; }
.pg-crumb li + li::before { content: "/"; color: rgba(17, 19, 18, 0.25); }
.pg-crumb a { color: var(--ov-ink-3); transition: color 0.22s ease; }
.pg-crumb a:hover { color: var(--ov-ink); }
.pg-crumb [aria-current] { color: var(--ov-ink); font-weight: 500; }
/* --------------------------------- hero -------------------------------- */
.pg-hero { padding-block: 20px var(--ov-y); }
.pg-hero__panel {
position: relative; overflow: hidden;
background: var(--ov-dark); color: #fff;
padding-block: clamp(36px, 5vw, 76px);
}
.pg-hero__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.pg-hero__in { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.pg-hero h1 {
margin-top: 18px;
font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; font-weight: 700; color: #fff;
}
.pg-hero__sub {
margin-top: 20px; max-width: 46ch;
font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.62);
}
.pg-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pg-rate { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }
.pg-rate b { color: #fff; font-weight: 700; }
.pg-rate .ov-stars i { width: 14px; height: 14px; }
/* --------------------------- the product mock ---------------------------
The live site ships these as flat orange screenshots. Rebuilt here in
markup so they carry the v2 palette and stay sharp at any width. */
.pg-mock {
position: relative;
width: 100%; max-width: 460px; margin-inline: auto;
padding: clamp(18px, 2.4vw, 26px);
border-radius: 22px; background: #faf9f6; color: var(--ov-ink);
/* the offset plate behind it, the way the live mocks are staged, drawn as
a hard shadow so nothing has to sit under the card's own background */
box-shadow: 14px 16px 0 rgba(184, 242, 74, 0.26),
0 2px 4px rgba(0, 0, 0, 0.16),
0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.pg-mock__top { display: flex; align-items: flex-start; gap: 12px; }
.pg-mock__ico {
display: grid; place-items: center; flex: none; width: 38px; height: 38px;
border-radius: 12px; background: var(--ov-ink); color: var(--ov-lime);
}
.pg-mock__ico svg { width: 19px; height: 19px; }
.pg-mock__t { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.pg-mock__s { margin-top: 3px; font-size: 13.5px; color: var(--ov-ink-2); }
.pg-mock__tag {
margin-left: auto; flex: none; padding: 6px 11px; border-radius: 999px;
background: var(--ov-lime); color: var(--ov-ink);
font-size: 12px; font-weight: 700; letter-spacing: -0.01em;
}
.pg-mock__rule { height: 1px; margin: 18px 0; background: rgba(17, 19, 18, 0.1); }
.pg-mock__rows { display: grid; gap: 9px; }
.pg-mock__row {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: 13px;
border: 1px solid rgba(17, 19, 18, 0.1); background: #fff;
font-size: 15px; font-weight: 500;
}
.pg-mock__row svg { width: 17px; height: 17px; flex: none; color: var(--ov-ink-3); }
.pg-mock__row--on { border-color: var(--ov-ink); box-shadow: inset 0 0 0 1px var(--ov-ink); }
.pg-mock__row--on svg { color: var(--ov-ink); }
.pg-mock__row b { font-weight: 700; }
.pg-mock__row .pg-mock__end { margin-left: auto; font-weight: 700; white-space: nowrap; }
.pg-mock__lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ov-ink-3); }
.pg-mock__val { margin-top: 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.pg-mock__col { display: block; min-width: 0; }
.pg-mock__name, .pg-mock__meta { display: block; }
.pg-mock__btn {
display: grid; place-items: center; width: 100%; margin-top: 14px;
padding: 15px; border-radius: 13px; background: var(--ov-ink); color: #fff;
font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em;
}
.pg-mock__btn--line { margin-top: 9px; background: transparent; color: var(--ov-ink); box-shadow: inset 0 0 0 1px rgba(17, 19, 18, 0.18); }
.pg-mock__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 13px; font-size: 13.5px; color: var(--ov-ink-2); }
.pg-mock__ok { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(17, 19, 18, 0.06); font-size: 12px; font-weight: 600; }
.pg-mock__ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fbf6a; }
/* the item line (quantity stepper / upsell product) */
.pg-mock__item { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 13px; border: 1px solid rgba(17, 19, 18, 0.1); background: #fff; }
.pg-mock__thumb { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; background: rgba(17, 19, 18, 0.06); }
.pg-mock__thumb svg { width: 24px; height: 24px; color: var(--ov-ink-2); }
.pg-mock__name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.pg-mock__meta { margin-top: 2px; font-size: 13px; color: var(--ov-ink-2); }
.pg-mock__price { margin-left: auto; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.pg-mock__step { margin-left: auto; display: flex; align-items: center; border-radius: 9px; border: 1px solid rgba(17, 19, 18, 0.14); overflow: hidden; }
.pg-mock__step span { display: grid; place-items: center; width: 30px; height: 30px; font-size: 14px; font-weight: 600; }
.pg-mock__step span + span { border-left: 1px solid rgba(17, 19, 18, 0.14); }
/* the hub's feature grid */
.pg-mock--grid { max-width: 500px; }
.pg-mock__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pg-mock__cell {
display: flex; flex-direction: column; gap: 10px;
padding: 15px 14px; border-radius: 13px;
border: 1px solid rgba(17, 19, 18, 0.1); background: #fff;
}
.pg-mock__cell svg { width: 20px; height: 20px; color: var(--ov-ink); }
.pg-mock__cell b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.pg-mock__cell--go { background: var(--ov-lime); border-color: var(--ov-lime); }
/* the dashboard mock */
.pg-mock--wide { max-width: 560px; }
.pg-mock__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pg-mock__tile { padding: 13px 14px; border-radius: 13px; border: 1px solid rgba(17, 19, 18, 0.1); background: #fff; }
.pg-mock__tile p { font-size: 12px; color: var(--ov-ink-2); }
.pg-mock__tile b { display: block; margin-top: 4px; font-size: clamp(20px, 2vw, 25px); font-weight: 700; letter-spacing: -0.045em; white-space: nowrap; }
.pg-mock__tile i { display: inline-block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 600; color: #3f8f56; }
.pg-mock__chart { position: relative; margin-top: 10px; padding: 14px; border-radius: 13px; border: 1px solid rgba(17, 19, 18, 0.1); background: #fff; }
.pg-mock__chart svg { display: block; width: 100%; height: 106px; }
.pg-mock__x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--ov-ink-3); }
/* the address diff */
.pg-mock__addr { padding: 14px 16px; border-radius: 13px; border: 1px solid rgba(17, 19, 18, 0.1); background: #fff; }
.pg-mock__addr + .pg-mock__addr { margin-top: 9px; }
.pg-mock__addr--bad { border-color: rgba(214, 78, 48, 0.4); }
.pg-mock__addr--good { border-color: var(--ov-ink); }
.pg-mock__flag { float: right; font-size: 16px; line-height: 1; }
.pg-mock__verified { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 5px 11px; border-radius: 999px; background: var(--ov-lime); font-size: 12px; font-weight: 700; }
/* --------------------------------- stats -------------------------------- */
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pg-stats > div {
padding: clamp(22px, 3vw, 34px); border-radius: var(--ov-r);
background: var(--ov-panel); border: 1px solid var(--ov-line);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.pg-stats > div:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(17, 19, 18, 0.4); }
.pg-stats b { display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.pg-stats span { display: block; margin-top: 10px; font-size: 14px; color: var(--ov-ink-2); }
/* ------------------------------ what you get ----------------------------
Shared shell. Each page then picks one of the treatments below, so the
same three lines of copy never land in the same shape twice. */
.pg-get__panel { background: var(--ov-dark); color: #fff; overflow: hidden; }
.pg-get__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
/* 01 — a numbered ledger (self-serve edits) */
.pg-ledger { display: grid; }
.pg-ledger li { display: grid; grid-template-columns: 1fr; gap: 6px 26px; padding: clamp(22px, 3vh, 32px) 0; border-top: 1px solid var(--ov-line-d); }
.pg-ledger li:last-child { border-bottom: 1px solid var(--ov-line-d); }
.pg-ledger__n { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ov-lime); }
.pg-ledger p { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; font-weight: 500; letter-spacing: -0.025em; color: #fff; }
/* 02 — offer cards (cancel deflection) */
.pg-offers { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pg-offer {
position: relative; display: flex; flex-direction: column; gap: 12px;
padding: clamp(22px, 2.6vw, 30px); border-radius: 18px;
background: var(--ov-dark-2); border: 1px solid var(--ov-line-d);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.pg-offer:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.28); }
.pg-offer__n { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.4); }
.pg-offer p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.pg-offer--lead { background: var(--ov-lime); border-color: var(--ov-lime); }
.pg-offer--lead .pg-offer__n { color: rgba(17, 19, 18, 0.55); }
.pg-offer--lead p { color: var(--ov-ink); }
/* 03 — a receipt (post-purchase upsells) */
.pg-rcpt { display: grid; gap: 0; padding: clamp(24px, 3vw, 38px); border-radius: 20px; background: var(--ov-dark-2); border: 1px solid var(--ov-line-d); }
.pg-rcpt li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; padding: clamp(16px, 2.4vh, 24px) 0; }
.pg-rcpt li + li { border-top: 1px dashed rgba(255, 255, 255, 0.16); }
.pg-rcpt__n { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ov-lime); }
.pg-rcpt p { font-size: clamp(16px, 1.4vw, 21px); line-height: 1.4; font-weight: 500; letter-spacing: -0.025em; color: #fff; }
/* 04 — dashboard tiles (operations analytics) */
.pg-tiles { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pg-tile { padding: clamp(22px, 2.6vw, 30px); border-radius: 18px; background: var(--ov-dark-2); border: 1px solid var(--ov-line-d); }
.pg-tile__bar { display: flex; gap: 5px; margin-bottom: 20px; height: 54px; align-items: flex-end; }
.pg-tile__bar i { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.pg-tile__bar i.is-on { background: var(--ov-lime); }
.pg-tile p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
/* 05 — a before/after diff (address validation) */
.pg-diff { display: grid; gap: 12px; }
.pg-diff li {
display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
padding: clamp(20px, 2.4vw, 28px); border-radius: 18px;
background: var(--ov-dark-2); border: 1px solid var(--ov-line-d);
}
.pg-diff__mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--ov-lime); color: var(--ov-ink); }
.pg-diff__mark svg { width: 16px; height: 16px; }
.pg-diff p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
/* ------------------------------- the steps ------------------------------ */
.pg-steps { display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: pgstep; }
.pg-step {
position: relative; overflow: hidden;
border-radius: 26px; background: #fff; border: 1px solid var(--ov-line);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.pg-step:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -32px rgba(17, 19, 18, 0.4); }
.pg-step__shot { display: block; width: 100%; aspect-ratio: 800 / 582; object-fit: cover; background: rgba(17, 19, 18, 0.05); }
.pg-step__in { padding: clamp(20px, 2.4vw, 28px); }
.pg-step__n { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ov-ink-3); }
.pg-step h3 { margin-top: 10px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.03em; }
.pg-step p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ov-ink-2); }
/* ------------------------------- in the wild ---------------------------- */
.pg-wild__panel { background: #fff; overflow: hidden; }
.pg-wild__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.pg-wild__in { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; }
.pg-wild__list { display: grid; gap: 2px; margin-top: var(--ov-head-gap); }
.pg-wild__list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid var(--ov-line); font-size: clamp(16px, 1.3vw, 18px); letter-spacing: -0.02em; }
.pg-wild__list li:last-child { border-bottom: 1px solid var(--ov-line); }
.pg-wild__list i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ov-ink); color: var(--ov-lime); }
.pg-wild__list i svg { width: 13px; height: 13px; }
.pg-wild__shot { border-radius: 26px; overflow: hidden; background: rgba(17, 19, 18, 0.05); }
.pg-wild__shot img { display: block; width: 100%; height: auto; }
/* ---------------------------------- FAQ --------------------------------- */
.pg-faq__in { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
.pg-faq__who { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--ov-line); }
.pg-faq__who img { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.pg-faq__who p { font-size: 14px; line-height: 1.45; color: var(--ov-ink-2); }
.pg-faq__list { display: grid; gap: 12px; }
.pg-faq .acc { border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(17, 19, 18, 0.04), 0 10px 26px -20px rgba(17, 19, 18, 0.45); transition: box-shadow 0.3s ease; }
.pg-faq .acc:hover { box-shadow: 0 1px 2px rgba(17, 19, 18, 0.05), 0 16px 34px -20px rgba(17, 19, 18, 0.55); }
.pg-faq .acc__h { margin: 0; }
.pg-faq .acc__q { display: flex; align-items: center; gap: 20px; width: 100%; padding: 24px 24px; background: none; border: 0; text-align: left; cursor: pointer; }
.pg-faq .acc__label { flex: 1; font-size: clamp(16px, 1.3vw, 18.5px); font-weight: 500; letter-spacing: -0.02em; color: var(--ov-ink); font-family: var(--ov-face); text-transform: none; }
.pg-faq .acc__sign { position: relative; flex: none; width: 20px; height: 20px; background: none; border: 0; border-radius: 0; transform: none; }
.pg-faq .acc__sign::before, .pg-faq .acc__sign::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px;
margin: -0.8px 0 0 -9px; border-radius: 2px; background: var(--ov-ink);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.pg-faq .acc__sign::after { transform: rotate(90deg); }
.pg-faq .acc__q[aria-expanded="true"] .acc__sign::after { opacity: 0; transform: rotate(0deg); }
.pg-faq .acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.pg-faq .acc__a.is-open { grid-template-rows: 1fr; }
.pg-faq .acc__a-in { overflow: hidden; min-height: 0; }
.pg-faq .acc__a-in p { margin: -4px 24px 24px; font-size: 15px; line-height: 1.6; color: var(--ov-ink-2); }
/* ------------------------------- pair it with --------------------------- */
.pg-pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pg-pair__card {
display: flex; flex-direction: column; gap: 12px;
padding: clamp(24px, 2.8vw, 34px); border-radius: 20px;
background: var(--ov-dark); color: #fff;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.pg-pair__card:hover { transform: translateY(-5px); background: #191c1a; }
.pg-pair__card h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.03em; }
.pg-pair__card p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
.pg-pair__go { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; padding-top: 14px; font-size: 14px; font-weight: 600; color: var(--ov-lime); }
.pg-pair__go svg { width: 14px; height: 14px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.pg-pair__card:hover .pg-pair__go svg { transform: translateX(4px); }
/* --------------------------------- the CTA ------------------------------ */
.pg-cta__panel { background: #fff; overflow: hidden; text-align: center; padding-block: clamp(44px, 6vw, 88px); }
.pg-cta__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.pg-cta__panel h2 { font-size: clamp(32px, 4.4vw, 62px); line-height: 1.03; font-weight: 700; letter-spacing: -0.035em; }
.pg-cta__panel p { margin: 18px auto 0; max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: var(--ov-ink-2); }
.pg-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.pg-cta__panel .ov-pill { background: var(--ov-ink); color: #fff; }
.pg-cta__panel .ov-pill:hover { background: #24242a; }
.pg-cta__panel .ov-pill i { background: var(--ov-lime); color: var(--ov-ink); }
.pg-cta__panel .ov-pill--line { background: transparent; color: var(--ov-ink); border-color: var(--ov-line); }
.pg-cta__panel .ov-pill--line:hover { background: rgba(17, 19, 18, 0.05); border-color: rgba(17, 19, 18, 0.3); }
.pg-cta__panel .ov-pill--line i { background: var(--ov-ink); color: #fff; }
/* ============================== features hub ============================= */
/* the five features as one editorial index */
.pg-idx { display: grid; }
.pg-idx__row {
display: grid; grid-template-columns: 1fr; gap: 10px 32px; align-items: center;
padding: clamp(24px, 3.4vh, 40px) 0; border-top: 1px solid var(--ov-line);
transition: padding-inline 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg-idx__row:last-child { border-bottom: 1px solid var(--ov-line); }
.pg-idx__row:hover { padding-inline: 10px; }
.pg-idx__n { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--ov-ink-3); }
.pg-idx__t { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; }
.pg-idx__d { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: var(--ov-ink-2); }
.pg-idx__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ov-ink); color: #fff; transition: background 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.pg-idx__go svg { width: 16px; height: 16px; }
.pg-idx__row:hover .pg-idx__go { background: var(--ov-lime); color: var(--ov-ink); transform: rotate(45deg); }
/* the integrations rail */
.pg-int__panel { background: #fff; overflow: hidden; }
.pg-int__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.pg-int__rail { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--ov-head-gap); }
.pg-int__rail span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--ov-line); font-size: 14.5px; font-weight: 500; letter-spacing: -0.02em; }
/* the one customer quote the live page carries */
.pg-quote__panel { background: var(--ov-dark); color: #fff; overflow: hidden; }
.pg-quote__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.pg-quote blockquote { font-size: clamp(24px, 3.2vw, 44px); line-height: 1.12; font-weight: 500; letter-spacing: -0.035em; color: #fff; }
.pg-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.pg-quote figcaption b { color: #fff; font-weight: 600; }
.pg-quote__pill { padding: 7px 14px; border-radius: 999px; background: var(--ov-lime); color: var(--ov-ink); font-size: 12.5px; font-weight: 700; }
/* ------------------------------- the reveal ----------------------------- */
/* the home page's rise, to the pixel and to the millisecond */
.pg-rise {
opacity: 0; transform: translate3d(0, 22px, 0);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--rise-d, 0s);
}
.pg-rise.is-up { opacity: 1; transform: none; }
/* a drifting picture is scaled a little so its edges never show */
.pg-par { overflow: hidden; }
.pg-par > img { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pg-rise { opacity: 1; transform: none; transition: none; } }
/* ============================== wider screens =========================== */
@media (min-width: 620px) {
.pg-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-ledger li { grid-template-columns: 54px minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 760px) {
.pg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-idx__row { grid-template-columns: 56px minmax(0, 1fr) 44px; }
.pg-idx__d { grid-column: 2; }
}
@media (min-width: 1000px) {
.pg-hero__in { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
.pg-wild__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.pg-faq__in { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(48px, 15vw, 224px); }
.pg-idx__row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.9fr) 44px; }
.pg-idx__d { grid-column: auto; }
.pg-mock { max-width: none; }
}
/* ------------------------------- the phone ------------------------------ */
@media (max-width: 760px) {
.pg-crumb { padding-top: 92px; }
.pg-mock { box-shadow: 9px 10px 0 rgba(184, 242, 74, 0.26), 0 2px 4px rgba(0, 0, 0, 0.16), 0 30px 60px -36px rgba(0, 0, 0, 0.7); }
.pg-hero h1 { font-size: clamp(34px, 9.6vw, 46px); }
.pg-idx__row:hover { padding-inline: 0; }
.pg-faq__who { margin-bottom: 4px; }
}
/* ============================ pricing & compare =========================
Four plans read as one stepped row: the number, the name, the ceiling it
covers, then the price. Growth carries the lime because the live page
marks it recommended. */
.pg-hero--short { padding-bottom: clamp(24px, 4vh, 48px); }
.pg-hero__solo { max-width: 780px; }
.pg-hero__solo--wide { max-width: 900px; }
.pg-hero__solo h1 { max-width: 16ch; }
.pg-hero__solo--wide h1 { max-width: 20ch; }
.prc { display: grid; grid-template-columns: 1fr; gap: 14px; }
.prc__plan {
position: relative; display: flex; flex-direction: column;
padding: clamp(24px, 2.6vw, 32px); border-radius: 20px;
background: #fff; border: 1px solid var(--ov-line);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.prc__plan:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgba(17, 19, 18, 0.55); }
.prc__plan--rec {
background: var(--ov-dark); border-color: var(--ov-dark); color: #fff;
box-shadow: 0 30px 60px -28px rgba(17, 19, 18, 0.5);
}
/* the featured plan actually has to look chosen, not just recoloured —
it sits a size up and forward of the row it shares with the others */
@media (min-width: 1000px) {
.prc__plan--rec { transform: scale(1.045); z-index: 2; }
.prc__plan--rec:hover { transform: scale(1.045) translateY(-5px); }
}
.prc__ribbon {
position: absolute; top: -11px; left: clamp(24px, 2.6vw, 32px);
padding: 5px 12px; border-radius: 999px; background: var(--ov-lime); color: var(--ov-ink);
font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.prc__top { display: flex; align-items: baseline; gap: 12px; }
.prc__n { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ov-ink-3); }
.prc__plan--rec .prc__n { color: var(--ov-lime); }
.prc__name { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -0.03em; }
.prc__range { margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--ov-ink-2); }
.prc__plan--rec .prc__range { color: rgba(255, 255, 255, 0.6); }
.prc__price { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ov-line); display: flex; align-items: baseline; gap: 7px; }
.prc__plan--rec .prc__price { border-color: var(--ov-line-d); }
.prc__price b { font-size: clamp(36px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.prc__price span { font-size: 14px; color: var(--ov-ink-2); }
.prc__plan--rec .prc__price span { color: rgba(255, 255, 255, 0.55); }
.prc__annual { margin-top: 8px; font-size: 13px; color: var(--ov-ink-3); }
.prc__plan--rec .prc__annual { color: rgba(255, 255, 255, 0.5); }
.prc__feats { flex: 1 0 auto; list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--ov-line); display: grid; align-content: start; gap: 11px; }
.prc__plan--rec .prc__feats { border-color: var(--ov-line-d); }
.prc__feats li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: 14.5px; line-height: 1.4; color: var(--ov-ink-2); }
.prc__plan--rec .prc__feats li { color: rgba(255, 255, 255, 0.72); }
.prc__chk { display: grid; place-items: center; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: var(--ov-ink); color: var(--ov-lime); }
.prc__plan--rec .prc__chk { background: var(--ov-lime); color: var(--ov-ink); }
.prc__chk svg { width: 11px; height: 11px; }
/* full width, not hugging its own text — at this column width "Install
Free on Shopify" wrapped to two ragged lines on three of four cards.
margin-top:auto pins it to the same baseline on every card regardless
of how many lines the feature list above it happens to wrap to. */
.prc__cta { margin-top: 22px; align-self: stretch; justify-content: center; background: var(--ov-ink); color: #fff; }
.prc__cta:hover { background: #24242a; }
.prc__cta i { background: var(--ov-lime); color: var(--ov-ink); }
/* an ink button on the recommended card's own ink background would
vanish — it flips to lime, the way every dark panel's pill does */
.prc__plan--rec .prc__cta { background: var(--ov-lime); color: var(--ov-ink); }
.prc__plan--rec .prc__cta:hover { background: #cdfa79; }
.prc__plan--rec .prc__cta i { background: var(--ov-ink); color: var(--ov-lime); }
.prc__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.prc__trust-item {
display: flex; align-items: center; gap: 13px;
padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--ov-line);
font-size: 14px; line-height: 1.35; letter-spacing: -0.015em;
}
.prc__trust-item i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(17, 19, 18, 0.05); color: var(--ov-ink); }
.prc__trust-item svg { width: 18px; height: 18px; }
/* the comparison table lives on a dark panel and scrolls sideways on a phone */
.pcmp__panel { background: var(--ov-dark); color: #fff; overflow: hidden; }
.pcmp__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.pcmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pcmp__table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
.pcmp__table th, .pcmp__table td { padding: 15px 16px; border-bottom: 1px solid var(--ov-line-d); font-size: 14.5px; vertical-align: middle; }
.pcmp__table thead th { padding-block: 20px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.pcmp__table thead small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, 0.45); }
.pcmp__table tbody th { font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.pcmp__table td { color: rgba(255, 255, 255, 0.6); }
.pcmp__table .is-rec { background: rgba(184, 242, 74, 0.07); }
.pcmp__table thead .is-rec { border-radius: 12px 12px 0 0; }
.pcmp__table tbody tr:last-child .is-rec { border-radius: 0 0 12px 12px; }
.pcmp__table tbody tr:last-child td, .pcmp__table tbody tr:last-child th { border-bottom: 0; }
.pcmp__yes { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ov-lime); color: var(--ov-ink); }
.pcmp__yes svg { width: 12px; height: 12px; }
.pcmp__note { margin-top: 16px; font-size: 12.5px; color: rgba(255, 255, 255, 0.4); }
/* ============================== integrations ============================ */
.pg-stats--int b { font-size: clamp(22px, 2.6vw, 34px); }
.int__cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.int__card {
display: flex; flex-direction: column; gap: 7px;
padding: clamp(22px, 2.4vw, 28px); border-radius: 18px;
background: #fff; border: 1px solid var(--ov-line);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.int__card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(17, 19, 18, 0.5); }
.int__card h3 { margin-top: 6px; font-size: 18px; font-weight: 600; letter-spacing: -0.03em; }
.int__logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(17, 19, 18, 0.05); flex: none; }
.int__logo img { width: 24px; height: 24px; object-fit: contain; }
/* the partner marks are wide wordmarks (the same files the marquee uses),
not square icons — the slot widens and drops its own background so the
logo just sits on the card instead of getting squeezed into a 24px box */
.int__logo:has(img) { width: auto; height: 30px; padding: 0 4px; background: none; }
.int__logo:has(img) img { width: auto; max-width: 88px; height: 100%; object-fit: contain; object-position: left center; }
.int__mark { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--ov-ink); }
.int__mark--lg { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--ov-lime); font-size: 20px; }
.int__cat { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ov-ink-3); }
.int__note { font-size: 14px; line-height: 1.5; color: var(--ov-ink-2); }
/* the featured row — the 10 partners with a real mark get real weight,
instead of sitting in the same 41-identical-card wall as everyone else */
.int__feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.int__feat {
display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
padding: 26px; border-radius: 16px; background: #fff; border: 1px solid var(--ov-line);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.int__feat:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(17, 19, 18, 0.45); }
.int__feat-logo { display: flex; align-items: center; height: 30px; }
.int__feat-logo img { height: 100%; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
/* the long tail — small chips with their own mark, not bare text rows.
Enough texture to feel designed without the weight of a full card. */
.int__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.int__list li {
display: flex; align-items: center; gap: 12px;
padding: 11px 16px 11px 11px; border-radius: 13px; border: 1px solid var(--ov-line);
background: #fff; font-size: 14.5px; transition: border-color 0.2s ease, background 0.2s ease;
}
.int__list li:hover { border-color: rgba(17, 19, 18, 0.28); background: var(--ov-panel); }
.int__list-ico {
display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
background: rgba(17, 19, 18, 0.05); font-size: 12.5px; font-weight: 700; color: var(--ov-ink-3);
}
.int__list b { flex: 1; min-width: 0; font-weight: 500; letter-spacing: -0.01em; color: var(--ov-ink); }
.int__list .int__cat { flex: none; }
/* how sync works — same card language as the directory above it, not a
bare icon+text grid floating on its own */
.int__grid--sync { grid-template-columns: 1fr; gap: 12px; }
.int__sync {
display: flex; flex-direction: column; align-items: flex-start;
padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--ov-line);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.int__sync:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(17, 19, 18, 0.45); }
.int__sync-ico {
display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px;
background: var(--ov-ink); color: var(--ov-lime);
}
.int__sync-ico svg { width: 19px; height: 19px; }
.int__sync h3 { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.int__sync p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ov-ink-2); }
.int__panel { background: #fff; overflow: hidden; }
.int__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.int__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.int__grid li { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--ov-line); transition: border-color 0.25s ease, background 0.25s ease; }
.int__grid li:hover { border-color: rgba(17, 19, 18, 0.3); background: rgba(17, 19, 18, 0.025); }
.int__col { display: grid; gap: 3px; min-width: 0; }
.int__col b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.int__dark { background: var(--ov-dark); color: #fff; overflow: hidden; }
.int__dark > *:not(.ov-rules) { position: relative; z-index: 1; }
.int__ledger { list-style: none; margin: 0; padding: 0; display: grid; }
.int__ledger li { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; align-items: center; padding: clamp(18px, 2.4vh, 26px) 0; border-top: 1px solid var(--ov-line-d); }
.int__ledger li:last-child { border-bottom: 1px solid var(--ov-line-d); }
.int__n { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ov-lime); }
.int__dark .int__col b { font-size: clamp(16px, 1.4vw, 20px); color: #fff; }
.int__dark .int__cat { color: rgba(255, 255, 255, 0.4); }
.int__dark .int__note { color: rgba(255, 255, 255, 0.58); }
.int__xb { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(26px, 3.4vw, 46px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line); }
.int__xb h2 { margin-top: 14px; font-size: clamp(26px, 3vw, 40px); line-height: 1.06; font-weight: 700; }
.int__xb > div > p { margin-top: 14px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--ov-ink-2); }
.int__xb-card { display: grid; gap: 7px; padding: clamp(22px, 2.4vw, 28px); border-radius: 18px; background: var(--ov-bg); }
.int__xb-card b { margin-top: 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.03em; }
@media (min-width: 620px) {
.prc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prc__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.int__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.int__grid--sync { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.int__feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.int__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.int__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.int__ledger li { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); }
}
@media (min-width: 1000px) {
.prc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.int__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.int__grid--sync { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.int__feats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.int__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.int__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.int__xb { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (min-width: 1240px) {
.int__cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* the partner assets are wide wordmarks — they get a strip where they can be
read, instead of being crushed into an icon tile beside their own name */
.int__wall {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: clamp(22px, 4vw, 54px);
margin-top: 14px; padding: clamp(24px, 3vw, 38px) clamp(20px, 3vw, 40px);
border-radius: var(--ov-r); background: #fff; border: 1px solid var(--ov-line);
}
.int__wall img {
height: clamp(15px, 1.6vw, 20px); width: auto; flex: none;
opacity: 0.55; filter: grayscale(1);
transition: opacity 0.25s ease, filter 0.25s ease;
}
.int__wall img:hover { opacity: 1; filter: none; }
/* ============================== case studies ============================
A case study is a long read, so it is built as one column of set pieces:
the headline number, the operator's own words, the friction laid out old
way against new, the measured split, and the bottom line. */
.cs-hero { align-items: center; }
.cs-hero__result { margin-top: 30px; padding: 22px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ov-line-d); }
.cs-hero__lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.cs-hero__v { margin-top: 8px; font-size: clamp(38px, 5vw, 62px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--ov-lime); }
.cs-hero__side { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.cs-hero__meta { margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, 0.4); }
.cs-hero__shot { border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.cs-hero__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* the pull quote — an editorial statement paired with a companion card,
not a lone box floating with dead space beside it */
.cmp__quote { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 54px); align-items: center; }
.cs-quote { position: relative; }
.cs-quote__mark { display: block; width: 44px; height: 44px; color: var(--ov-lime); }
.cs-quote__mark svg { width: 100%; height: 100%; }
.cs-quote blockquote { margin-top: 22px; max-width: 34ch; font-size: clamp(26px, 3vw, 40px); line-height: 1.22; font-weight: 600; letter-spacing: -0.038em; color: var(--ov-ink); }
.cs-quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ov-line); font-size: 14px; color: var(--ov-ink-3); }
.cs-quote figcaption b { font-weight: 600; color: var(--ov-ink); }
.cmp__quote-aside {
padding: clamp(26px, 3vw, 36px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line);
}
.cmp__quote-aside-t { margin-top: 12px; font-size: 14.5px; color: var(--ov-ink-2); }
.cmp__quote-aside-t b { font-size: 17px; font-weight: 700; color: var(--ov-ink); }
.cmp__quote-aside > p:last-of-type { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--ov-ink-2); }
.cmp__quote-aside .ov-pill { margin-top: 22px; }
@media (min-width: 900px) {
.cmp__quote { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
/* the opening figure and its paragraph */
.cs-intro { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 46px); align-items: start; }
.cs-intro__fig b { display: block; font-size: clamp(42px, 5.4vw, 74px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; }
.cs-intro__fig span { display: block; margin-top: 10px; font-size: 14px; color: var(--ov-ink-2); }
.cs-intro__text { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; letter-spacing: -0.022em; color: var(--ov-ink-2); }
.cs-period { margin-top: 16px; font-size: 13px; color: var(--ov-ink-3); }
/* a plain editorial block */
.cs-about { max-width: 780px; }
.cs-about h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; font-weight: 700; }
.cs-about p { margin-top: 16px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--ov-ink-2); }
/* the friction: what the customer says, then old way vs Account Editor */
.cs-frics { display: grid; gap: 14px; }
.cs-fric { padding: clamp(22px, 2.8vw, 34px); border-radius: 20px; background: #fff; border: 1px solid var(--ov-line); }
.cs-fric__q { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-size: clamp(18px, 1.9vw, 25px); line-height: 1.3; font-weight: 500; letter-spacing: -0.03em; }
.cs-fric__mark { display: block; width: 24px; height: 24px; margin-top: 4px; color: var(--ov-lime); }
.cs-fric__mark svg { width: 100%; height: 100%; }
.cs-fric__cols { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
.cs-fric__old, .cs-fric__new { padding: 20px; border-radius: 15px; }
.cs-fric__old { background: rgba(17, 19, 18, 0.04); }
.cs-fric__new { background: var(--ov-dark); color: #fff; }
.cs-fric__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }
.cs-fric__new .cs-fric__lbl { color: var(--ov-lime); }
.cs-fric__old p, .cs-fric__new p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ov-ink-2); }
.cs-fric__new p { color: rgba(255, 255, 255, 0.72); }
.cs-fric__meas { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ov-line); font-size: 15px; color: var(--ov-ink-2); }
.cs-fric__meas b { font-weight: 700; color: var(--ov-ink); }
/* the in-product shot */
.cs-shot { border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--ov-line); }
.cs-shot img { display: block; width: 100%; height: auto; }
.cs-shot figcaption { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 28px); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: var(--ov-ink-2); }
/* the measured result, on a dark panel */
.cs-res { background: var(--ov-dark); color: #fff; overflow: hidden; }
.cs-res > *:not(.ov-rules) { position: relative; z-index: 1; }
.cs-res__in { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
.cs-res__big { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 38px); border-radius: 18px; background: var(--ov-lime); color: var(--ov-ink); }
.cs-res__big b { font-size: clamp(42px, 5.4vw, 72px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; }
.cs-res__big span { margin-top: 12px; font-size: 15px; font-weight: 500; }
.cs-res__period { margin-top: 6px !important; font-size: 13px !important; opacity: 0.6; }
.cs-res__cards { display: grid; gap: 12px; }
.cs-res__card { padding: clamp(20px, 2.4vw, 28px); border-radius: 18px; background: var(--ov-dark-2); border: 1px solid var(--ov-line-d); }
.cs-res__lbl { font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.cs-res__v { margin-top: 8px; font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.cs-res__note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.45); }
/* the split: one bar, then the key beneath it */
.cs-split { padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line); }
.cs-split__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-split__head h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.035em; }
.cs-split__head p { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ov-ink-3); }
.cs-split__head b { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.04em; color: var(--ov-ink); }
.cs-split__bar { display: flex; gap: 3px; height: 16px; margin-top: 24px; }
.cs-split__bar i { border-radius: 4px; background: var(--ov-ink); }
.cs-split__bar i:nth-child(2) { background: var(--ov-lime); }
.cs-split__bar i:nth-child(3) { background: rgba(17, 19, 18, 0.22); min-width: 6px; }
.cs-split__keys { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }
.cs-split__keys li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--ov-line); font-size: 14.5px; }
.cs-split__dot { width: 9px; height: 9px; border-radius: 3px; background: var(--ov-ink); }
.cs-split__keys li:nth-child(2) .cs-split__dot { background: var(--ov-lime); }
.cs-split__keys li:nth-child(3) .cs-split__dot { background: rgba(17, 19, 18, 0.22); }
.cs-split__k { color: var(--ov-ink-2); }
.cs-split__v { font-weight: 700; letter-spacing: -0.02em; }
.cs-split__p { min-width: 42px; text-align: right; font-size: 13px; color: var(--ov-ink-3); }
/* the eight edit types, grouped by the job they do */
.cs-grps { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cs-grp { padding: clamp(22px, 2.6vw, 30px); border-radius: 20px; background: #fff; border: 1px solid var(--ov-line); }
.cs-grp__h { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }
.cs-grp ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.cs-grp li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--ov-line); }
.cs-grp li span { font-size: 15px; color: var(--ov-ink-2); }
.cs-grp li b { font-size: clamp(18px, 1.8vw, 23px); font-weight: 700; letter-spacing: -0.035em; }
/* a single wide line that carries the point */
.cs-say { max-width: 900px; font-size: clamp(19px, 2.2vw, 30px); line-height: 1.32; font-weight: 500; letter-spacing: -0.032em; }
.cs-say b { font-weight: 700; }
/* the bottom line */
.cs-bottom { background: var(--ov-dark); color: #fff; overflow: hidden; }
.cs-bottom > *:not(.ov-rules) { position: relative; z-index: 1; }
.cs-bottom__t { margin-top: 18px; max-width: 24ch; font-size: clamp(26px, 3.6vw, 50px); line-height: 1.12; font-weight: 500; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.6); }
.cs-bottom__t b { font-weight: 700; color: var(--ov-lime); }
.cs-bottom__n { margin-top: 26px; font-size: 13px; color: rgba(255, 255, 255, 0.35); }
.cs-method { max-width: 860px; font-size: 12.5px; line-height: 1.7; color: var(--ov-ink-3); }
/* more stories */
.cs-more { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cs-more__card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--ov-line); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
.cs-more__card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgba(17, 19, 18, 0.55); }
.cs-more__card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cs-more__in { display: grid; gap: 8px; padding: clamp(20px, 2.4vw, 26px); }
.cs-more__cat { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.cs-more__in b { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.cs-more__line { font-size: 13.5px; line-height: 1.45; color: var(--ov-ink-2); }
.cs-more__brand { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--ov-line); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.cs-more__brand i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ov-ink); color: #fff; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-more__brand svg { width: 13px; height: 13px; }
.cs-more__card:hover .cs-more__brand i { transform: rotate(45deg); background: var(--ov-lime); color: var(--ov-ink); }
/* the hub: one row per story */
.cs-rows { display: grid; gap: 16px; }
.cs-row { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--ov-line); }
.cs-row__shot { display: block; overflow: hidden; }
.cs-row__shot img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 11; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-row:hover .cs-row__shot img { transform: scale(1.04); }
.cs-row__in { display: grid; align-content: center; gap: 12px; padding: clamp(24px, 3vw, 44px); }
.cs-row__cat { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.cs-row__brand { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; }
.cs-row__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.cs-row__v b { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.cs-row__v span { font-size: 13.5px; color: var(--ov-ink-2); }
.cs-row__q { margin-top: 4px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--ov-ink-2); }
.cs-row__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--ov-ink-3); }
.cs-row__who b { font-weight: 600; color: var(--ov-ink); }
.cs-row__cta { margin-top: 10px; justify-self: start; }
@media (min-width: 620px) {
.cs-fric__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-res__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-grps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.cs-intro { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.cs-res__in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.cs-res__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.cs-row:nth-child(even) .cs-row__shot { order: 2; }
.cs-frics { grid-template-columns: 1fr; }
}
/* the in-product mock, rebuilt in the v2 palette */
.cs-inprod { background: var(--ov-dark); color: #fff; overflow: hidden; }
.cs-inprod > *:not(.ov-rules) { position: relative; z-index: 1; }
.cs-inprod__in { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.cs-inprod__cap { margin-top: 16px; max-width: 26ch; font-size: clamp(19px, 2vw, 28px); line-height: 1.3; font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.cs-mock__h { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.03em; }
.cs-mock__sub { margin-top: 6px; margin-bottom: 14px; font-size: 13.5px; color: var(--ov-ink-2); }
.cs-mock__h + .cs-mock__sub { margin-top: 4px; }
.cs-mock .pg-mock__rows { margin-top: 12px; }
.cs-mock__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cs-mock__cell { display: grid; gap: 4px; padding: 14px; border-radius: 13px; border: 1px solid rgba(17, 19, 18, 0.1); background: #fff; }
.cs-mock__cell svg { width: 17px; height: 17px; color: var(--ov-ink-3); }
.cs-mock__cell b { margin-top: 4px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.cs-mock__cell i { font-style: normal; font-size: 12px; color: var(--ov-ink-3); }
.cs-mock__bulk { margin-top: 9px; }
.cs-mock__bulk .pg-mock__col b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.cs-mock__bulk .pg-mock__col i { display: block; font-style: normal; font-size: 12px; color: var(--ov-ink-3); }
.cs-mock__dl { display: grid; place-items: center; margin-left: auto; width: 30px; height: 30px; border-radius: 9px; background: var(--ov-lime); }
.cs-mock__dl svg { width: 15px; height: 15px; color: var(--ov-ink); }
.cs-mock__add { flex: none; margin-left: auto; padding: 8px 16px; border-radius: 9px; background: var(--ov-ink); color: #fff; font-size: 13px; font-weight: 600; }
.cs-mock__plus { color: var(--ov-ink); }
.cs-mock__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(17, 19, 18, 0.1); font-size: 13.5px; color: var(--ov-ink-2); }
.cs-mock__total b { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; color: var(--ov-ink); }
.cs-mock__field + .cs-mock__field { margin-top: 12px; }
.cs-mock__input { margin-top: 6px; padding: 12px 14px; border-radius: 11px; border: 1px solid rgba(17, 19, 18, 0.14); background: #fff; font-size: 15px; font-weight: 500; }
.cs-mock__input--on { border-color: var(--ov-ink); box-shadow: inset 0 0 0 1px var(--ov-ink); }
.cs-mock__hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 7px; font-size: 13px; color: var(--ov-ink-2); }
.cs-mock__hint i { font-style: normal; font-weight: 600; color: #b1522f; }
.pg-mock__row--ok { margin-top: 12px; border-color: var(--ov-lime); background: rgba(184, 242, 74, 0.16); font-size: 13.5px; }
.pg-mock__row--ok svg { width: 15px; height: 15px; color: var(--ov-ink); }
.cs-mock__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cs-mock__opt { position: relative; display: grid; gap: 4px; padding: 30px 14px 15px; border-radius: 13px; border: 1px solid rgba(17, 19, 18, 0.12); background: #fff; }
.cs-mock__opt b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.cs-mock__opt em { font-style: normal; font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.04em; }
.cs-mock__opt i { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--ov-ink-3); }
.cs-mock__opt--on { border-color: var(--ov-lime); background: rgba(184, 242, 74, 0.2); box-shadow: inset 0 0 0 1px var(--ov-lime); }
/* the ribbon is lifted out of the flow so a card that carries one still
lines its rows up with the cards that do not */
.cs-mock__rec { position: absolute; top: 10px; right: 10px; padding: 4px 9px; border-radius: 999px; background: var(--ov-lime); color: var(--ov-ink); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cs-mock__opts + .pg-mock__row { margin-top: 10px; font-size: 13px; }
.cs-mock__offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cs-mock__offer { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 13px; border: 1px solid rgba(17, 19, 18, 0.12); background: #fff; }
.cs-mock__offer--pop { border-color: var(--ov-lime); box-shadow: inset 0 0 0 1px var(--ov-lime); }
.cs-mock__shot { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 9px; background: rgba(17, 19, 18, 0.06); }
.cs-mock__shot svg { width: 26px; height: 26px; color: var(--ov-ink-2); }
.cs-mock__offer b { font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.cs-mock__offer em { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: -0.03em; }
.cs-mock__offer .cs-mock__add { margin: auto 0 0; text-align: center; padding: 7px; font-size: 12px; }
.cs-mock__offers + .pg-mock__row { margin-top: 10px; font-size: 12.5px; }
@media (min-width: 900px) {
.cs-inprod__in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
@media (max-width: 480px) {
.cs-mock__grid, .cs-mock__opts { grid-template-columns: 1fr; }
.cs-mock__offers { grid-template-columns: 1fr; }
.cs-mock__shot { aspect-ratio: 16 / 7; }
}
/* ========================== about, security, forms ======================= */
.pg-faq__t { margin-top: 14px; font-size: clamp(26px, 3vw, 38px); line-height: 1.06; font-weight: 700; }
.pg-faq .acc__n { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ov-ink-3); }
/* the story runs as a heading beside its column of paragraphs */
.ab-story { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 56px); }
.ab-story__head h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; font-weight: 700; }
.ab-story__body { display: grid; gap: 20px; max-width: 62ch; }
.ab-story__body p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ov-ink-2); }
.ab-believe { background: var(--ov-dark); color: #fff; overflow: hidden; }
.ab-believe > *:not(.ov-rules) { position: relative; z-index: 1; }
.ab-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ab-card { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border-radius: 18px; background: var(--ov-dark-2); border: 1px solid var(--ov-line-d); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease; }
.ab-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.28); }
.ab-card__n { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--ov-lime); }
.ab-card h3 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.ab-card p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
/* the security policy: an index beside the numbered blocks */
.sec-updated { margin-top: 22px; font-size: 13px; color: rgba(255, 255, 255, 0.4); }
.sec-in { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
/* a real panel, not text floating on the page ground — the card is what
reads as "navigation" at a glance, before anyone parses the links */
.sec-nav { padding: 20px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--ov-line); }
.sec-nav .pg-kicker { padding-left: 2px; }
.sec-nav ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 1px; }
.sec-nav a {
display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center;
padding: 9px 8px; border-radius: 11px;
font-size: 14.5px; letter-spacing: -0.015em; color: var(--ov-ink-2);
transition: color 0.2s ease, background 0.2s ease;
}
.sec-nav a:hover { color: var(--ov-ink); background: var(--ov-panel); }
.sec-nav a span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--ov-ink-3); }
/* the plain variant (setup guide) swaps the number for the same icon its
matching step uses in the timeline, so the two lists read as one system */
.sec-nav--plain a { grid-template-columns: 26px 1fr; }
.sec-nav--plain a i {
display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
background: var(--ov-panel); color: var(--ov-ink-3); transition: background 0.2s ease, color 0.2s ease;
}
.sec-nav--plain a i svg { width: 13px; height: 13px; }
.sec-nav--plain a:hover i { background: var(--ov-ink); color: var(--ov-lime); }
.sec-lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; letter-spacing: -0.02em; color: var(--ov-ink-2); }
.sec-block { margin-top: clamp(34px, 4.4vh, 56px); scroll-margin-top: 100px; }
.sec-block__n { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ov-lime); }
.sec-block h2 { margin-top: 10px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.035em; }
.sec-block__p { margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: var(--ov-ink-2); }
.sec-block__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.sec-block__list li {
display: grid; gap: 5px; padding: 16px 18px; border-radius: 14px;
background: #fff; border: 1px solid var(--ov-line); transition: border-color 0.2s ease;
}
.sec-block__list li:hover { border-color: rgba(17, 19, 18, 0.24); }
.sec-block__list b { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.sec-block__list span { font-size: 14.5px; line-height: 1.55; color: var(--ov-ink-2); }
@media (min-width: 700px) {
.sec-block__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sec-block__mail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--ov-line); }
.sec-block__mail span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }
.sec-block__mail a { font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em; border-bottom: 1px solid var(--ov-line); transition: border-color 0.22s ease; }
.sec-block__mail a:hover { border-color: var(--ov-ink); }
/* the contact forms */
.frm__in { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3.4vw, 54px); align-items: start; }
.frm__rail { list-style: none; margin: 0; padding: 0; display: grid; }
.frm__rail li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--ov-line); }
.frm__rail li:last-child { border-bottom: 1px solid var(--ov-line); }
.frm__rail i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--ov-ink); color: var(--ov-lime); }
.frm__rail svg { width: 17px; height: 17px; }
.frm__col { display: grid; gap: 3px; min-width: 0; }
.frm__col b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; }
.frm__col span, .frm__col a { font-size: 13.5px; color: var(--ov-ink-2); }
.frm__col a { border-bottom: 1px solid var(--ov-line); justify-self: start; transition: border-color 0.22s ease; }
.frm__col a:hover { border-color: var(--ov-ink); }
.frm__quote { margin-top: 24px; padding: clamp(20px, 2.4vw, 26px); border-radius: 18px; background: var(--ov-dark); color: #fff; }
.frm__stars { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }
.frm__stars b { color: #fff; font-weight: 700; }
.frm__stars .ov-stars i { width: 13px; height: 13px; }
.frm__quote blockquote { margin: 16px 0 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.42; font-weight: 500; letter-spacing: -0.025em; }
.frm__quote figcaption { margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.frm { padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line); }
.frm__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.frm__row { display: grid; gap: 8px; min-width: 0; }
.frm__row label { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.frm__opt { font-weight: 400; color: var(--ov-ink-3); }
.frm__row input, .frm__row select, .frm__row textarea {
width: 100%; padding: 13px 15px; border-radius: 12px;
border: 1px solid var(--ov-line); background: var(--ov-bg); color: var(--ov-ink);
font-family: inherit; font-size: 15px; letter-spacing: -0.01em;
transition: border-color 0.22s ease, background 0.22s ease;
}
.frm__row textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.frm__row select { appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.frm__row input:focus, .frm__row select:focus, .frm__row textarea:focus { outline: none; border-color: var(--ov-ink); background: #fff; }
.frm__row input::placeholder, .frm__row textarea::placeholder { color: var(--ov-ink-3); }
.frm__send { margin-top: 22px; background: var(--ov-ink); color: #fff; }
.frm__send:hover { background: #24242a; }
.frm__send i { background: var(--ov-lime); color: var(--ov-ink); }
.frm__note { margin-top: 14px; font-size: 12.5px; color: var(--ov-ink-3); }
.pg-faq__who--lead p b { display: block; margin-bottom: 3px; color: var(--ov-ink); }
.pg-faq__ask { margin-top: 14px; padding: clamp(20px, 2.4vw, 26px); border-radius: 18px; background: var(--ov-dark); color: #fff; }
.pg-faq__ask-t { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.03em; }
.pg-faq__ask p + p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.pg-faq__ask .ov-pill { margin-top: 18px; background: transparent; border-color: var(--ov-line-d); color: #fff; }
.pg-faq__ask .ov-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.pg-faq__ask .ov-pill i { background: var(--ov-lime); color: var(--ov-ink); }
@media (min-width: 620px) {
.ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frm__row--full { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
.ab-story { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.sec-in { grid-template-columns: 240px minmax(0, 1fr); }
.sec-nav { position: sticky; top: 92px; }
/* both contact pages keep the live page's own ratio: two equal columns,
not a narrow rail beside a wide form */
.frm__in, .frm__in--sales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ab-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.ab-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ============================ ROI calculator ============================ */
.roi__in { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3.4vw, 54px); align-items: start; }
.roi__presets { margin-bottom: 28px; }
.roi__presets-l { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }
.roi__presets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.roi__preset {
display: grid; gap: 3px; padding: 13px 15px; border-radius: 14px; text-align: left; cursor: pointer;
background: #fff; border: 1px solid var(--ov-line); color: var(--ov-ink);
transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s ease;
}
.roi__preset:hover { transform: translateY(-2px); border-color: rgba(17, 19, 18, 0.3); }
.roi__preset b { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.roi__preset span { font-size: 12.5px; color: var(--ov-ink-3); }
.roi__preset[aria-pressed="true"] { background: var(--ov-ink); border-color: var(--ov-ink); color: #fff; }
.roi__preset[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.55); }
.roi__field { padding: 20px 0; border-top: 1px solid var(--ov-line); }
.roi__field:last-of-type { border-bottom: 1px solid var(--ov-line); }
.roi__field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.roi__field-head label { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.roi__val { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--ov-line); }
.roi__val i { font-style: normal; font-size: 13px; color: var(--ov-ink-3); }
.roi__val input {
width: 4.6em; border: 0; background: none; padding: 0; color: var(--ov-ink);
font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-align: right;
}
.roi__val input:focus { outline: none; }
.roi__val input::-webkit-outer-spin-button, .roi__val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi__val input[type=number] { -moz-appearance: textfield; }
.roi__hint { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ov-ink-3); }
.roi__range { -webkit-appearance: none; appearance: none; width: 100%; margin-top: 16px; background: none; cursor: pointer; }
.roi__range::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: rgba(17, 19, 18, 0.14); }
.roi__range::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(17, 19, 18, 0.14); }
.roi__range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7.5px;
border-radius: 50%; background: var(--ov-ink); border: 3px solid var(--ov-lime);
transition: transform 0.2s ease;
}
.roi__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ov-ink); border: 3px solid var(--ov-lime); }
.roi__range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.roi__range:focus-visible { outline: 2px solid var(--ov-ink); outline-offset: 6px; border-radius: 999px; }
.roi__reset { margin-top: 20px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
background: transparent; border: 1px solid var(--ov-line); color: var(--ov-ink-2);
font-family: inherit; font-size: 13.5px; font-weight: 500;
transition: border-color 0.25s ease, color 0.25s ease; }
.roi__reset:hover { border-color: var(--ov-ink); color: var(--ov-ink); }
.roi__card { background: #fff; color: var(--ov-ink); overflow: hidden; padding-block: clamp(26px, 3vw, 38px); border: 1px solid var(--ov-line); }
.roi__card > *:not(.ov-rules) { position: relative; z-index: 1; }
.roi__big { margin-top: 16px; }
.roi__big b { display: block; font-size: clamp(44px, 5.6vw, 72px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; color: var(--ov-ink); }
.roi__big span { display: block; margin-top: 10px; font-size: 14px; color: var(--ov-ink-3); }
.roi__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 24px; }
.roi__tiles > div { padding: 14px 10px; border-radius: 14px; background: var(--ov-panel); border: 1px solid var(--ov-line); }
.roi__tiles b { display: block; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; letter-spacing: -0.03em; }
.roi__tiles span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: var(--ov-ink-3); }
.roi__tiles i { font-style: normal; font-weight: 700; color: var(--ov-ink); }
.roi__rows { display: grid; gap: 9px; margin-top: 12px; }
.roi__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 15px 16px; border-radius: 14px; background: var(--ov-panel); border: 1px solid var(--ov-line); }
.roi__row-k { font-size: 14px; font-weight: 500; }
.roi__row b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--ov-ink); }
.roi__row-n { grid-column: 1 / -1; font-size: 12px; color: var(--ov-ink-3); }
.roi__proj { margin-top: 12px; padding: 18px; border-radius: 14px; background: var(--ov-panel); border: 1px solid var(--ov-line); }
.roi__proj-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.roi__proj-h i { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ov-ink); }
.roi__proj ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; }
.roi__proj li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ov-line); font-size: 13.5px; color: var(--ov-ink-2); }
.roi__proj li b { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--ov-ink); }
.roi__plan { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ov-line); font-size: 13px; color: var(--ov-ink-3); }
.roi__plan b { font-size: 14.5px; font-weight: 600; color: var(--ov-ink); }
.roi__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.roi__share { display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: 999px; cursor: pointer;
background: transparent; border: 1px solid var(--ov-line); color: var(--ov-ink-2);
font-family: inherit; font-size: 13.5px; font-weight: 500; transition: border-color 0.25s ease, color 0.25s ease; }
.roi__share:hover { border-color: var(--ov-ink); color: var(--ov-ink); }
.roi__maths { display: grid; grid-template-columns: 1fr; gap: 12px; }
.roi__math {
padding: clamp(22px, 2.6vw, 30px); border-radius: 18px; background: #fff; border: 1px solid var(--ov-line);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.roi__math:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(17, 19, 18, 0.4); }
.roi__math-ico {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
background: var(--ov-ink); color: var(--ov-lime);
}
.roi__math-ico svg { width: 19px; height: 19px; }
.roi__math h3 { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.roi__formula { margin: 12px 0; padding: 12px 14px; border-radius: 11px; background: var(--ov-dark); color: var(--ov-lime);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; }
.roi__op { color: rgba(255, 255, 255, 0.4); }
.roi__math p:last-child { font-size: 13.5px; line-height: 1.55; color: var(--ov-ink-2); }
/* ============================== alternatives ============================ */
.alts { display: grid; gap: 16px; }
.alt {
padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.alt:hover { border-color: rgba(17, 19, 18, 0.26); box-shadow: 0 20px 44px -30px rgba(17, 19, 18, 0.4); }
.alt__head h2 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
.alt__desc { margin-top: 14px; max-width: 70ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--ov-ink-2); }
.alt__cols { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
.alt__pros, .alt__cons { padding: 20px; border-radius: 16px; }
.alt__pros { background: var(--ov-bg); }
.alt__cons { background: rgba(17, 19, 18, 0.045); }
.alt__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }
.alt__cols ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.alt__cols li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--ov-ink-2); }
.alt__cols i { display: grid; place-items: center; width: 19px; height: 19px; margin-top: 2px; border-radius: 50%; }
.alt__cols i svg { width: 11px; height: 11px; }
.alt__pros i { background: var(--ov-lime); color: var(--ov-ink); }
.alt__cons i { background: rgba(17, 19, 18, 0.1); color: var(--ov-ink); }
.alt__best {
display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; padding: 18px 20px;
border-radius: 14px; background: rgba(184, 242, 74, 0.14); border: 1px solid rgba(184, 242, 74, 0.4);
font-size: 14.5px; line-height: 1.55; color: var(--ov-ink-2);
}
.alt__best-ico {
display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: 1px; border-radius: 9px;
background: var(--ov-ink); color: var(--ov-lime);
}
.alt__best-ico svg { width: 16px; height: 16px; }
.alt__best b { font-weight: 700; color: var(--ov-ink); }
.alt__fit { background: var(--ov-dark); color: #fff; }
.alt__fit > *:not(.ov-rules) { position: relative; z-index: 1; }
/* the sticky heading (shared .ab-story rule) felt glitchy against this
page's scroll — keep it in normal flow here instead */
.pg .alt__fit .ab-story__head { position: static; }
.alt__fit h2 { color: #fff; }
.alt__fit .ab-story__body p { color: rgba(255, 255, 255, 0.62); }
/* the heading column runs short next to three paragraphs of body copy —
fill it with what "one widget" actually means, not dead space */
.alt__fit-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.alt__fit-list li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.alt__fit-list i { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--ov-lime); color: var(--ov-ink); }
.alt__fit-list i svg { width: 11px; height: 11px; }
.alt__fit-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ov-line-d); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.4); }
/* ================================ compare =============================== */
.cmp__vs { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; margin-top: clamp(30px, 4vw, 48px); }
.cmp__vs-side { padding: clamp(20px, 2.4vw, 28px); border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ov-line-d); }
.cmp__vs-side--on { background: var(--ov-lime); border-color: var(--ov-lime); color: var(--ov-ink); }
.cmp__vs-t { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: -0.03em; color: #fff; }
.cmp__vs-side--on .cmp__vs-t { color: var(--ov-ink); }
.cmp__vs-d { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }
.cmp__vs-side--on .cmp__vs-d { color: rgba(17, 19, 18, 0.7); }
.cmp__vs-mark { justify-self: center; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.cmp__stats { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cmp__stat { padding: clamp(22px, 2.6vw, 30px); border-radius: 18px; background: #fff; border: 1px solid var(--ov-line); }
.cmp__stat b { display: block; font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.cmp__stat-k { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; }
.cmp__stat-d { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ov-ink-2); }
.cmp__feats { display: grid; gap: 14px; }
.cmp__feat {
display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 46px);
padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line);
transition: border-color 0.25s ease;
}
.cmp__feat:hover { border-color: rgba(17, 19, 18, 0.26); }
.cmp__feat-ico {
display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 12px;
background: var(--ov-ink); color: var(--ov-lime);
}
.cmp__feat-ico svg { width: 21px; height: 21px; }
.cmp__feat h3 { margin-top: 14px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.cmp__feat-p { margin-top: 14px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--ov-ink-2); }
.cmp__ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cmp__ticks li {
display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
padding: 11px 13px; border-radius: 12px; background: #fff; border: 1px solid var(--ov-line);
font-size: 14px; line-height: 1.5; color: var(--ov-ink-2); transition: border-color 0.2s ease;
}
.cmp__ticks li:hover { border-color: rgba(17, 19, 18, 0.24); }
.cmp__ticks i { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--ov-lime); color: var(--ov-ink); }
.cmp__ticks i svg { width: 11px; height: 11px; }
.cmp__ticks--x li { background: rgba(255, 255, 255, 0.06); border-color: var(--ov-line-d); }
.cmp__ticks--x li:hover { border-color: rgba(255, 255, 255, 0.3); }
.cmp__ticks--x i { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cmp__feat-side {
display: grid; align-content: start; gap: 20px;
padding: clamp(18px, 2vw, 24px); border-radius: 18px; background: var(--ov-panel);
}
.cmp__feat-side .ov-pill { justify-self: start; }
.cmp__table th[scope="row"] { display: grid; gap: 4px; min-width: 190px; }
.cmp__table th[scope="row"] b { font-size: 15px; font-weight: 600; color: #fff; }
.cmp__table th[scope="row"] span { font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.cmp__table td { font-size: 13.5px; line-height: 1.55; min-width: 260px; vertical-align: top; }
.cmp__table .cmp__no { color: rgba(255, 255, 255, 0.42); }
.cmp__table .cmp__yes { color: rgba(255, 255, 255, 0.82); background: rgba(184, 242, 74, 0.07); }
.cmp__wb { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cmp__wb-card { padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line); }
.cmp__wb-card h2 { margin-top: 14px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.cmp__wb-card > p { margin: 14px 0 24px; font-size: 15px; line-height: 1.6; color: var(--ov-ink-2); }
.cmp__wb-card--dark { background: var(--ov-dark); color: #fff; border-color: var(--ov-dark); }
.cmp__wb-card--dark h2 { color: #fff; }
.cmp__wb-card--dark > p, .cmp__wb-card--dark .cmp__ticks li { color: rgba(255, 255, 255, 0.6); }
.cmp__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 36px); border-radius: 20px; background: var(--ov-lime); color: var(--ov-ink); }
.cmp__strip > span { max-width: 44ch; font-size: clamp(16px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.cmp__strip .ov-pill { background: var(--ov-ink); color: #fff; }
.cmp__strip .ov-pill:hover { background: #24242a; }
.cmp__strip .ov-pill i { background: var(--ov-lime); color: var(--ov-ink); }
.cmp__links { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cmp__link { display: grid; gap: 7px; padding: clamp(20px, 2.4vw, 26px); border-radius: 18px; background: #fff; border: 1px solid var(--ov-line); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease; }
.cmp__link:hover { transform: translateY(-3px); border-color: rgba(17, 19, 18, 0.3); }
.cmp__link-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.cmp__link b { font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; }
.cmp__link i { justify-self: start; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 4px; border-radius: 50%; background: var(--ov-ink); color: #fff; }
.cmp__link i svg { width: 13px; height: 13px; }
.cmp__link--on { background: var(--ov-dark); border-color: var(--ov-dark); color: #fff; }
.cmp__link--on .cmp__link-k { color: rgba(255, 255, 255, 0.45); }
.cmp__link--on i { width: auto; height: auto; padding: 5px 11px; border-radius: 999px; background: var(--ov-lime); color: var(--ov-ink); font-style: normal; font-size: 11.5px; font-weight: 700; }
.cmp__help { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.8vw, 34px); border-radius: 20px; background: var(--ov-dark); color: #fff; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; }
.cmp__help:hover { transform: translateY(-5px); background: #191c1a; }
.cmp__help h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.03em; }
.cmp__help p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
@media (min-width: 620px) {
.roi__maths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alt__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp__wb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roi__presets-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.roi__in { grid-template-columns: minmax(0, 1fr) 400px; }
.roi__out { position: sticky; top: 92px; }
.cmp__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmp__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmp__feat { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
/* a zigzag, not five identical stacked rows */
.cmp__feat:nth-child(even) .cmp__feat-in { order: 2; }
.cmp__feat:nth-child(even) .cmp__feat-side { order: 1; }
.cmp__vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
/* ========================= setup guide, changelog, glossary ============= */
.sg__body { display: grid; }
/* a timeline: a real icon tile per step, a rail connecting it down to the
next one, instead of a small pill lost above the heading */
.sg__step {
position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 20px;
margin-bottom: clamp(48px, 6.4vh, 84px); scroll-margin-top: 100px;
}
.sg__step::before {
content: ""; position: absolute; left: 25px; top: 60px;
height: calc(100% - 60px + clamp(48px, 6.4vh, 84px));
width: 2px; background: var(--ov-line);
}
.sg__step--end::before { display: none; }
.sg__ico {
position: relative; z-index: 1; flex: none; width: 52px; height: 52px; border-radius: 16px;
display: grid; place-items: center; background: var(--ov-ink); color: var(--ov-lime);
}
.sg__ico svg { width: 23px; height: 23px; }
.sg__content { min-width: 0; }
.sg__n {
display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ov-ink-3);
}
.sg__step h3 { margin-top: 6px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.sg__intro { margin-top: 16px; max-width: 62ch; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.7; color: var(--ov-ink-2); }
/* each sub-topic inside a step gets its own quiet break — a rule and real
space above it — instead of running straight into the last paragraph */
.sg__sub { margin-top: 44px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.025em; }
.sg__intro + .sg__sub, .sg__list + .sg__sub { margin-top: 44px; }
.sg__p { margin-top: 10px; max-width: 62ch; font-size: 15.5px; line-height: 1.7; color: var(--ov-ink-2); }
/* no row borders, no dot — a left rule and real air between items reads
as a clean list instead of a spreadsheet; the bold lead-in already
anchors the eye, so the marker was only ever noise */
.sg__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 18px; max-width: 66ch; }
.sg__list > li { position: relative; font-size: 15px; line-height: 1.65; color: var(--ov-ink-2); }
.sg__list b { font-weight: 600; color: var(--ov-ink); }
.sg__list ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sg__list ul li { position: relative; padding-left: 18px; font-size: 14.5px; border-left: 0; }
.sg__list ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1.5px; background: var(--ov-ink-3); }
.sg__list a, .sg__links a { border-bottom: 1px solid var(--ov-line); transition: border-color 0.22s ease; }
.sg__list a:hover, .sg__links a:hover { border-color: var(--ov-ink); }
.sg__step code, .sg__p code, .sg__intro code {
padding: 2px 7px; border-radius: 6px; background: rgba(17, 19, 18, 0.06);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; color: var(--ov-ink);
}
.sg__tip { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--ov-lime); color: var(--ov-ink); font-size: 14.5px; line-height: 1.55; }
.sg__part { margin: clamp(20px, 3vh, 36px) 0 clamp(34px, 4.4vh, 52px); padding: clamp(24px, 3vw, 38px); border-radius: 22px; background: var(--ov-dark); color: #fff; }
.sg__part h2 { margin-top: 14px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.sg__part p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
.sg__part b { color: #fff; font-weight: 600; }
.sg__deeper { margin-bottom: 16px; padding: clamp(24px, 3vw, 34px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line); scroll-margin-top: 100px; }
.sg__deeper h3 { margin-top: 12px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.035em; }
.sg__links { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; }
.sg__links li { padding: 12px 0; border-top: 1px solid var(--ov-line); font-size: 15px; color: var(--ov-ink-2); }
.sg__links li:last-child { border-bottom: 1px solid var(--ov-line); }
.sg__live { padding: clamp(26px, 3vw, 40px); border-radius: 22px; background: var(--ov-lime); color: var(--ov-ink); }
.sg__live h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.04em; }
.sg__live p { margin-top: 12px; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: rgba(17, 19, 18, 0.72); }
.sg__live-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sg__live .ov-pill { background: var(--ov-ink); color: #fff; }
.sg__live .ov-pill:hover { background: #24242a; }
.sg__live .ov-pill i { background: var(--ov-lime); color: var(--ov-ink); }
.sg__live .ov-pill--ghost { background: transparent; border-color: rgba(17, 19, 18, 0.25); color: var(--ov-ink); }
.sg__live .ov-pill--ghost:hover { background: rgba(17, 19, 18, 0.08); border-color: rgba(17, 19, 18, 0.5); }
.sg__live .ov-pill--ghost i { background: var(--ov-ink); color: var(--ov-lime); }
/* --------------------------------- changelog --------------------------- */
.cl__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.cl__chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--ov-line-d); font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.cl__chip b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.cl__chip--all { background: var(--ov-lime); border-color: var(--ov-lime); color: rgba(17, 19, 18, 0.7); }
.cl__chip--all b { color: var(--ov-ink); }
.cl__chip--new b { color: var(--ov-lime); }
.cl__bar { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.cl__search { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ov-line); }
.cl__search svg { width: 17px; height: 17px; flex: none; color: var(--ov-ink-3); }
.cl__search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; color: var(--ov-ink); font-family: inherit; font-size: 15px; }
.cl__search input:focus { outline: none; }
.cl__sel { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ov-line); }
.cl__sel > span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ov-ink-3); }
.cl__sel select { flex: 1; min-width: 0; padding: 6px 30px 6px 8px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
color: var(--ov-ink); font-family: inherit; font-size: 14.5px; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center; background-size: 15px; }
.cl__sel select:focus { outline: none; }
.cl__count { margin-bottom: 20px; font-size: 13px; color: var(--ov-ink-3); }
.cl__empty { padding: 40px 0; font-size: 16px; color: var(--ov-ink-2); }
/* one card per month, not a stack of divider lines — same card language
as the rest of the site. Spacing (not rules) separates the items inside. */
.cl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.cl__rel {
display: grid; grid-template-columns: 1fr; gap: 14px 40px;
padding: clamp(26px, 3vw, 40px); border-radius: 20px;
background: #fff; border: 1px solid var(--ov-line);
}
.cl__ver { font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; letter-spacing: -0.035em; }
.cl__date { margin-top: 4px; font-size: 13px; color: var(--ov-ink-3); }
.cl__title { font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; letter-spacing: -0.032em; line-height: 1.2; }
.cl__items { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.cl__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.cl__item p { font-size: 15px; line-height: 1.55; color: var(--ov-ink-2); }
.cl__tag { flex: none; min-width: 72px; padding: 4px 10px; border-radius: 999px; text-align: center;
font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cl__tag--new { background: var(--ov-lime); color: var(--ov-ink); }
.cl__tag--improved { background: var(--ov-ink); color: #fff; }
.cl__tag--fixed { background: rgba(17, 19, 18, 0.08); color: var(--ov-ink-2); }
.cl__tag--security { background: #f6efd8; color: #7a5a12; }
/* ---------------------------------- glossary --------------------------- */
.gl__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gl__jump a { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 15px; border-radius: 999px;
background: #fff; border: 1px solid var(--ov-line); font-size: 14px; letter-spacing: -0.015em;
transition: border-color 0.22s ease, transform 0.3s ease; }
.gl__jump a:hover { border-color: var(--ov-ink); transform: translateY(-2px); }
.gl__jump span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ov-ink-3); }
/* a card per term, not a stack of divider lines — matches the card
language used everywhere else on the site */
.gl__terms { display: grid; gap: 14px; }
.gl__term {
display: grid; grid-template-columns: 1fr; gap: 2px;
padding: clamp(24px, 2.6vw, 32px); border-radius: 18px;
background: var(--ov-panel); border: 1px solid var(--ov-line);
scroll-margin-top: 100px;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.2s ease;
}
.gl__term:hover { border-color: rgba(17, 19, 18, 0.24); transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(17, 19, 18, 0.4); }
.gl__n {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 9px; margin-bottom: 14px;
background: var(--ov-ink); color: var(--ov-lime);
font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.gl__term h2 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.18; }
.gl__term p:not(.gl__n) { margin-top: 10px; font-size: 15px; line-height: 1.62; color: var(--ov-ink-2); }
@media (min-width: 620px) {
.cl__bar { grid-template-columns: minmax(0, 1fr) 190px 180px; }
.cl__rel { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (min-width: 900px) {
.gl__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* an odd term count leaves one orphan card — let it take the full row
instead of leaving dead space beside it */
.gl__term:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
.gl__terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl__term:last-child:nth-child(odd) { grid-column: auto; }
}
/* ============================== legal pages ============================= */
.lg__body .sec-block:first-of-type { margin-top: clamp(30px, 4vh, 44px); }
.lg__sub { margin-top: 26px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.025em; }
.lg__body .sg__list { margin-top: 12px; }
.lg__body .sec-block__p + .sg__list { margin-top: 10px; }
.lg__body .sec-block__p a { border-bottom: 1px solid var(--ov-line); transition: border-color 0.22s ease; }
.lg__body .sec-block__p a:hover { border-color: var(--ov-ink); }
/* ============================= cookie notice ============================ */
.ck {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
padding-bottom: clamp(12px, 2vh, 20px);
transform: translateY(16px); opacity: 0;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.ck.is-up { transform: none; opacity: 1; }
.ck__in {
display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center;
padding: clamp(18px, 2.2vw, 24px); border-radius: 20px;
background: var(--ov-dark); color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.ck__t { font-size: 16px; font-weight: 700; letter-spacing: -0.025em; }
.ck__d { margin-top: 6px; max-width: 70ch; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
.ck__d a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: border-color 0.22s ease; }
.ck__d a:hover { border-color: #fff; }
.ck__btns { display: flex; flex-wrap: wrap; gap: 9px; }
.ck__btn {
flex: 1; min-width: 150px; padding: 12px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap;
background: transparent; border: 1px solid var(--ov-line-d); color: #fff;
font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.015em;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}
.ck__btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-1px); }
.ck__btn--on { background: var(--ov-lime); border-color: var(--ov-lime); color: var(--ov-ink); font-weight: 600; }
.ck__btn--on:hover { background: var(--ov-lime-2); border-color: var(--ov-lime-2); }
@media (min-width: 760px) {
.ck__in { grid-template-columns: minmax(0, 1fr) auto; gap: 28px; }
.ck__btns { flex: none; }
.ck__btn { flex: none; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }
/* =================== the home page's container, exactly =================
Home has two kinds of container and the inner pages now use both:
wrap + panel the wrap holds the 30px page gutter; the panel holds the
inset that stops content at 1200px (30 + 90 = 120 @1440)
wrap alone the wrap carries the whole inset itself, so content that
is not inside a panel starts on the same line (120 @1440)
Written as one expression so the two line up at every width, not just the
ones the home page happens to hit. */
/* responsive.css caps the base .wrap at 1680px above 1680px wide; home opts
out of that per section, so the inner pages opt out too */
.pg .wrap { max-width: none; padding-inline: calc(30px + max(30px, (100% - 1260px) / 2)); }
.pg .wrap--panel,
.pg .ov-hdr__in,
.pg .ck__in { padding-inline: 30px; }
@media (max-width: 760px) {
/* the phone step: 12px gutter, 14px inside the panel — 26px either way */
.pg .wrap { padding-inline: 26px; }
.pg .wrap--panel, .pg .ck__in { padding-inline: 12px; }
.pg .ov-hdr__in { padding-inline: 12px; }
}
/* ------------------- and the home page's section rhythm ---------------- */
/* the head block is the width home holds it to, and its paragraph is home's
fixed 17px rather than a second, slightly different ramp */
.pg-head { max-width: 640px; }
.pg-head--mid { max-width: 620px; }
.pg-head p { font-size: 17px; line-height: 1.5; }
/* the hero panel takes the same padding-block every other panel has */
.pg-hero__panel { padding-block: clamp(30px, 4vw, 64px); }
/* the closing panel matches home's: the panel's own top, a lighter bottom */
.pg-cta__panel { padding-block: clamp(30px, 4vw, 64px); padding-bottom: clamp(26px, 3vw, 40px); }
/* home's FAQ question size */
.pg-faq .acc__label { font-size: 19px; }
/* a stat strip sits tight under what it belongs to, the way home's trust
strip does, instead of taking a full section's rhythm */
.pg-sec--tight { padding-block: clamp(18px, 2.4vh, 34px); }
/* ===================== case study — the redesigned set pieces ===========
The old page ran as one left-aligned column with the right half empty.
These fill the width the way the home page's panels do: a cover hero with
the photo bleeding to the panel edge, a dark pull quote, and the editorial
blocks split heading-left / body-right. */
/* the cover */
.cs-hero { position: relative; overflow: hidden; }
.cs-hero > .cs-hero__shot { position: absolute; inset: 0 0 0 auto; width: 44%; margin: 0; z-index: 0; }
.cs-hero__shot::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, var(--ov-dark) 0%, rgba(17, 19, 18, 0.86) 20%, rgba(17, 19, 18, 0.3) 58%, rgba(17, 19, 18, 0) 88%);
}
.cs-hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-hero__in { position: relative; z-index: 1; max-width: 62%; }
.cs-hero h1 { margin-top: 18px; font-size: clamp(38px, 5.4vw, 74px); line-height: 1.02; font-weight: 700; color: #fff; }
.cs-hero .pg-hero__sub { margin-top: 18px; max-width: 46ch; }
.cs-hero__plate {
display: grid; gap: 4px; margin-top: 30px; padding: 20px 24px;
border-radius: 18px; background: var(--ov-lime); color: var(--ov-ink);
justify-self: start; max-width: 30rem;
}
.cs-hero__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(17, 19, 18, 0.6); }
.cs-hero__plate b { font-size: clamp(36px, 4.6vw, 58px); font-weight: 700; letter-spacing: -0.055em; line-height: 1; }
.cs-hero__side { font-size: 13.5px; color: rgba(17, 19, 18, 0.7); }
.cs-hero__meta { margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, 0.4); }
/* the facts strip under it */
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--ov-line); border-radius: var(--ov-r); overflow: hidden; }
.cs-facts > div { padding: 20px clamp(18px, 2vw, 26px); background: #fff; }
.cs-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }
.cs-facts dd { margin: 7px 0 0; font-size: clamp(15px, 1.2vw, 17px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
/* the case-study pull quote — a panel of its own. (.cs-quote is left alone:
the compare page still uses it as a small card.) */
.cs-pq { background: var(--ov-dark); color: #fff; overflow: hidden; padding-block: clamp(34px, 4.4vw, 68px); }
.cs-pq > *:not(.ov-rules) { position: relative; z-index: 1; }
.cs-pq__mark { display: block; width: 40px; height: 40px; color: var(--ov-lime); }
.cs-pq__mark svg { width: 100%; height: 100%; }
.cs-pq blockquote { margin-top: 22px; max-width: 22ch; font-size: clamp(26px, 3.6vw, 52px); line-height: 1.12; font-weight: 500; letter-spacing: -0.038em; color: #fff; }
.cs-pq figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ov-line-d); font-size: 14px; color: rgba(255, 255, 255, 0.5); }
.cs-pq figcaption b { font-weight: 600; color: #fff; }
/* editorial block: heading left, body right */
.cs-about { display: grid; grid-template-columns: 1fr; gap: 20px clamp(30px, 5vw, 80px); max-width: none; }
.cs-about__head h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; font-weight: 700; }
.cs-about__body p { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: var(--ov-ink-2); }
/* the one-line statement */
.cs-say { display: grid; grid-template-columns: 1fr; gap: 16px clamp(30px, 5vw, 80px); padding: clamp(26px, 3vw, 44px); border-radius: 22px; background: #fff; border: 1px solid var(--ov-line); max-width: none; }
.cs-say__l { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }
.cs-say__t { font-size: clamp(19px, 2.2vw, 30px); line-height: 1.32; font-weight: 500; letter-spacing: -0.032em; }
.cs-say__t b { font-weight: 700; }
/* the bottom line, with the page's figures beside it */
.cs-bottom__in { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.cs-bottom__t { margin-top: 18px; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.14; font-weight: 500; letter-spacing: -0.038em; color: rgba(255, 255, 255, 0.6); }
.cs-bottom__tiles { display: grid; gap: 10px; }
.cs-bottom__tiles > div { padding: 18px 20px; border-radius: 16px; background: var(--ov-dark-2); border: 1px solid var(--ov-line-d); }
.cs-bottom__tiles b { display: block; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--ov-lime); }
.cs-bottom__tiles span { display: block; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
/* the opening figure, rebalanced */
.cs-intro__text { font-size: clamp(17px, 1.6vw, 24px); }
@media (min-width: 620px) {
.cs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.cs-about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.cs-say { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
.cs-bottom__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.cs-intro { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
@media (max-width: 899px) {
/* the cover stacks: the photo becomes a band above the copy */
.cs-hero > .cs-hero__shot { position: relative; inset: auto; width: auto; margin-bottom: 26px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; }
.cs-hero__shot::after { background: linear-gradient(180deg, rgba(17, 19, 18, 0) 55%, rgba(17, 19, 18, 0.45) 100%); }
.cs-hero__in { max-width: none; }
}
/* the opening paragraph reads as a lede: the figure is a line above it, not
a second giant number competing with the stats band directly overhead */
.cs-lede { max-width: 62ch; padding-left: clamp(18px, 2vw, 26px); border-left: 2px solid var(--ov-lime); }
.cs-lede__t { font-size: clamp(19px, 1.9vw, 27px); line-height: 1.45; letter-spacing: -0.025em; color: var(--ov-ink-2); }
/* ============ at a glance — one composed block, not two strips ==========
The meta row and the figures row were two identical 4-up tile strips
stacked on top of each other. They are one object now: the figures lead,
the meta supports them under a hairline, and the period is stated once. */
.cs-glance { border-radius: var(--ov-r); background: #fff; border: 1px solid var(--ov-line); overflow: hidden; }
.cs-glance__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ov-line); }
.cs-glance__figs > div { padding: clamp(22px, 3vw, 34px) clamp(18px, 2vw, 28px); background: #fff; }
.cs-glance__figs b { display: block; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.cs-glance__figs span { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ov-ink-2); }
.cs-glance__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 16px clamp(18px, 2vw, 28px); border-top: 1px solid var(--ov-line); background: rgba(17, 19, 18, 0.025); }
.cs-glance__meta > div { display: flex; align-items: baseline; gap: 8px; padding-right: 18px; }
.cs-glance__meta > div + div { padding-left: 18px; border-left: 1px solid var(--ov-line); }
.cs-glance__meta dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.cs-glance__meta dd { margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.015em; }
/* the about page's second figure strip, now a run inside the beliefs panel */
.ab-run { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; margin: 14px 0 0; background: var(--ov-line-d); border-radius: 18px; overflow: hidden; }
.ab-run > div { padding: 20px clamp(18px, 2vw, 26px); background: var(--ov-dark-2); }
.ab-run dt { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--ov-lime); }
.ab-run dd { margin: 8px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
/* ---------------------- the inner-page vertical rhythm ------------------
Inner-page sections now keep the same --ov-y rhythm as the home page,
so the gap between sections reads the same everywhere on the site. */
.pg-sec--tight { padding-block: clamp(14px, 1.8vh, 26px); }
@media (min-width: 620px) {
.cs-glance__figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 619px) {
.cs-glance__meta > div + div { padding-left: 0; border-left: 0; }
.cs-glance__meta > div { flex: 0 0 100%; }
}
/* ===================== inner pages — responsive repairs ================
Found by measuring every page at nine widths; each of these was a box
whose content was wider than the box itself. */
/* The support address is a single 202px token. In a footer column narrower
than that it spilled — on every page, at most widths. */
.pg .ov-ftr__nav > div { min-width: 0; }
.pg .ov-ftr__nav a { overflow-wrap: anywhere; }
.pg .ov-ftr__brand p { overflow-wrap: anywhere; }
/* A range input carries a 2px UA margin either side, so it sat 4px wider
than the field that holds it. */
.roi__range { margin-inline: 0; box-sizing: border-box; }
.roi__field, .roi__inputs { min-width: 0; }
/* Long figures and brand names break rather than spill out of their tile. */
.pg-stats b, .cs-glance__figs b, .roi__tiles b, .cs-bottom__tiles b,
.cmp__stat b, .cs-res__v, .prc__price b { overflow-wrap: anywhere; }
/* A 15-character brand name at the hero's minimum size was 34px wider than
a 320px screen allows. */
@media (max-width: 420px) {
.cs-hero h1, .pg-hero h1 { font-size: clamp(28px, 8.4vw, 42px); overflow-wrap: anywhere; }
.cs-hero__plate b { font-size: clamp(30px, 9vw, 44px); }
}
/* The hold-based ledger kept its three-column shape on a phone, squeezing
the middle column to 16px. It stacks instead. */
@media (max-width: 619px) {
.int__ledger li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.int__col, .int__ledger li > * { min-width: 0; }
.int__col b { overflow-wrap: anywhere; }
.int__note { overflow-wrap: anywhere; }
}
/* Nothing inside a panel may be wider than the panel. */
.pg-hero__in, .cs-hero__in, .cs-inprod__in, .pg-mock, .alts, .alt { min-width: 0; }
.pg-hero__in > *, .cs-inprod__in > * { min-width: 0; }
/* Links on a phone get a finger-sized row rather than a 19px line. */
@media (max-width: 480px) {
.pg .ov-ftr__nav a, .pg .sec-nav a, .pg .sg__links a { display: block; padding-block: 5px; }
.pg .ov-ftr__legal a { display: inline-block; padding-block: 6px; }
}
/* the mock's item row kept its thumb, name and button on one line at 320 */
@media (max-width: 380px) {
.pg-mock__item { flex-wrap: wrap; row-gap: 10px; }
.pg-mock__item .cs-mock__add, .pg-mock__price, .pg-mock__step { margin-left: auto; }
.pg-mock__col { flex: 1 1 auto; }
}
/* --- the last three, found at 320-390px --- */
/* standalone links (not links inside a sentence) get a finger-sized row */
@media (max-width: 480px) {
.sec-block__mail a, .frm__col a { display: inline-block; padding-block: 5px; }
}
/* "OrderEditing.com" is one token wider than the 320px header column */
.alt__head { min-width: 0; }
.alt__head h2 { overflow-wrap: anywhere; }
/* the dashboard tile keeps its figure on one line, which US$18.4k cannot
manage at 320 — it steps down instead */
@media (max-width: 380px) {
.pg-mock__tile b { font-size: clamp(17px, 5.4vw, 22px); }
}
/* the header takes one more step down at 400px, so the crumb follows it */
@media (max-width: 400px) { .pg-crumb { padding-top: 90px; } }
/* the header only steps down at 759px, so at exactly 760 the crumb keeps the
full offset — the mobile block below it starts one pixel too early */
@media (min-width: 760px) { .pg-crumb { padding-top: 106px; } }
/* ===================== the brand orb, on the about hero =================
The same spinning object the home page sets beside its statement: one
sprite sheet of 72 frames on a 9 x 8 grid, the column stepping once per
frame and the row advancing once per pass, plus a slow float. The
keyframes (obj-col / obj-row / obj-float) come from the shared sheet. */
.pg-hero__panel { --orb-w: clamp(150px, 15vw, 220px); --orb-gap: clamp(48px, 5vw, 88px); }
.pg-hero__panel > .pg-orb {
position: absolute; z-index: 1; display: block; pointer-events: none;
/* its right edge lines up with where the copy column ends, so the gap to
the text is the same measure at every width instead of whatever the
window happens to leave over */
right: max(30px, (100% - 1200px) / 2);
top: 50%; margin-top: calc(var(--orb-w) / -2);
width: var(--orb-w); aspect-ratio: 1;
background: url("../images/orb-brand-spin.webp") no-repeat;
background-size: 900% 800%;
filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.6));
animation: obj-col 1.5s steps(9, jump-none) infinite,
obj-row 12s steps(8, jump-none) infinite,
obj-float 16s ease-in-out infinite;
will-change: background-position, transform;
}
/* the copy keeps clear of it while it is showing */
@media (min-width: 901px) {
.pg-hero__solo--orb { max-width: calc(100% - var(--orb-w) - var(--orb-gap)); }
}
/* below that the hero is a single column again and the orb steps out */
@media (max-width: 900px) {
.pg-hero__panel > .pg-orb { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pg-hero__panel > .pg-orb { animation: none; }
}
/* =============== the solo hero gets a right-hand column ================
Sixteen inner pages ran a single column of copy across a full-width dark
panel, leaving most of it empty. Each now carries a card on the right
built only from what the page already states — in several cases the
"at a glance" strip that used to sit directly underneath, which fills the
hero and removes a repeated block at the same time. */
.pg-hero__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 56px); align-items: center; }
.pg-hero__aside .pg-hero__solo { max-width: none; }
@media (min-width: 901px) {
.pg-hero__aside { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.56fr); }
}
/* figures — used where a stats strip moved up into the hero */
.pg-hero__figs {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
margin: 0; background: var(--ov-line-d); border-radius: 18px; overflow: hidden;
}
.pg-hero__figs > div { padding: clamp(16px, 2vw, 22px) clamp(16px, 1.8vw, 20px); background: var(--ov-dark-2); }
.pg-hero__figs b { display: block; font-size: clamp(21px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; color: var(--ov-lime); overflow-wrap: anywhere; }
.pg-hero__figs span { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.5); }
.pg-hero__figs--3 { grid-template-columns: minmax(0, 1fr); }
.pg-hero__figs--1 { grid-template-columns: minmax(0, 1fr); }
/* facts — a label/value list where the page has no figures to move */
.pg-hero__facts {
display: grid; gap: 1px; margin: 0;
background: var(--ov-line-d); border-radius: 18px; overflow: hidden;
}
.pg-hero__facts > div { display: grid; gap: 6px; padding: 16px clamp(16px, 1.8vw, 20px); background: var(--ov-dark-2); }
.pg-hero__facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.pg-hero__facts dd { margin: 0; font-size: clamp(15px, 1.35vw, 18px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
/* the changelog's counts read as a column here rather than a row of chips */
.pg-hero__aside .cl__chips { flex-direction: column; align-items: stretch; gap: 1px; margin: 0; background: var(--ov-line-d); border-radius: 18px; overflow: hidden; }
.pg-hero__aside .cl__chip { justify-content: space-between; padding: 14px 18px; border: 0; border-radius: 0; background: var(--ov-dark-2); font-size: 13.5px; }
.pg-hero__aside .cl__chip--all { background: var(--ov-lime); color: rgba(17, 19, 18, 0.72); }
.pg-hero__aside .cl__chip b { font-size: 19px; }
/* a facts list can run as one labelled group — the empty labels collapse so
the rows read as a list under a single heading */
.pg-hero__facts dt:empty { display: none; }
.pg-hero__facts > div:has(dt:empty) { padding-top: 0; padding-bottom: 12px; }
.pg-hero__facts > div:has(dt:empty) + div { border-top: 0; }
/* the orb used as a hero aside sits in the column rather than off the panel */
.pg-hero__aside > .pg-orb {
position: relative; right: auto; top: auto; margin: 0 auto;
width: clamp(170px, 18vw, 240px);
}
/* ========================================================================
INNER PAGES — the Omnisend layout, in Account Editor's brand
========================================================================
Structure, rhythm and section shapes follow omnisend.com's inner pages:
a narrower 1086px column, 8px corners, flat white cards with a hairline
instead of a shadow, centred heroes that sit on the ground rather than
inside a rounded panel, and dark blocks that run the full width of the
window. The palette and the typeface stay ours — lime, Plus Jakarta.
The home page is untouched: everything here is scoped to .pg.
===================================================================== */
/* ---- 1. the container stays the home page's own measure ----------------
This used to narrow inner pages to Omnisend's 1086px column; every page
now keeps the home page's 1200px container instead (see "the home
page's container, exactly", above), so .wrap and .ov-panel are left at
their home-page-matching widths rather than re-narrowed here. */
/* ---- 2. 8px corners, hairlines instead of shadows ---------------------- */
.pg .ov-panel,
.pg .pg-step, .pg .pg-pair__card, .pg .prc__plan, .pg .cs-fric, .pg .cs-glance,
.pg .cs-say, .pg .cs-split, .pg .cs-grp, .pg .cs-more__card, .pg .cs-row,
.pg .alt, .pg .int__card, .pg .cmp__stat, .pg .cmp__feat, .pg .cmp__wb-card,
.pg .cmp__link, .pg .cmp__help, .pg .ab-card, .pg .frm, .pg .frm__quote,
.pg .roi__math, .pg .sg__deeper, .pg .sg__live, .pg .sg__part, .pg .int__xb,
.pg .pg-stats, .pg .pg-hero__figs, .pg .pg-hero__facts, .pg .cs-quote,
.pg .int__wall, .pg .pg-faq__who, .pg .pg-faq__ask, .pg .prc__trust-item,
.pg .sec-block__mail, .pg .cs-bottom__tiles > div, .pg .cs-res__card,
.pg .cs-res__big, .pg .ab-run, .pg .cs-mock__opt, .pg .cs-mock__offer { border-radius: 8px; }
.pg .pg-step, .pg .prc__plan, .pg .cs-fric, .pg .cs-more__card, .pg .cs-row,
.pg .alt, .pg .int__card, .pg .cmp__stat, .pg .cmp__feat, .pg .cmp__wb-card,
.pg .cmp__link, .pg .frm, .pg .roi__math, .pg .sg__deeper, .pg .int__xb,
.pg .cs-glance, .pg .cs-say, .pg .cs-split, .pg .cs-grp, .pg .pg-faq__who {
box-shadow: none; border: 1px solid rgba(17, 19, 18, 0.1);
}
.pg .pg-step:hover, .pg .prc__plan:hover, .pg .cs-more__card:hover,
.pg .int__card:hover { box-shadow: none; border-color: rgba(17, 19, 18, 0.28); }
.pg .pg-faq .acc { box-shadow: none; border: 1px solid rgba(17, 19, 18, 0.1); border-radius: 8px; }
.pg .pg-faq .acc:hover { box-shadow: none; border-color: rgba(17, 19, 18, 0.24); }
.pg .frm__row input, .pg .frm__row select, .pg .frm__row textarea,
.pg .cl__search, .pg .cl__sel, .pg .roi__preset, .pg .gl__jump a { border-radius: 8px; }
/* ---- 3. dark blocks run the full width -------------------------------- */
.pg .pg-sec--dark { background: var(--ov-dark); color: #fff; }
.pg .pg-sec--dark > .wrap > .ov-panel,
.pg .pg-sec--dark > .wrap > .ov-panel.pg-dark {
background: none; border: 0; border-radius: 0;
padding-block: 0; box-shadow: none;
}
.pg .pg-sec--dark .ov-rules { display: none; }
.pg .pg-sec--dark { padding-block: var(--ov-y); }
/* the case-study dark panels pick up the same lime/green glow as the
hero — the panel itself stays background:none (above), so the glow has
to sit on the section that actually paints the dark ground */
.pg .pg-sec--dark:has(> .wrap > .ov-panel.cs-pq) {
background:
radial-gradient(in oklab 45% 130% at 116% 112%, #d6ff82 0%, #a4e94f 16%, #3f8a34 40%, #163220 66%, rgba(17, 19, 18, 0) 88%),
var(--ov-dark);
}
.pg .pg-sec--dark:has(> .wrap > .ov-panel.cs-res) {
background:
radial-gradient(in oklab 42% 120% at -14% 116%, #d6ff82 0%, #a4e94f 16%, #3f8a34 40%, #163220 66%, rgba(17, 19, 18, 0) 88%),
var(--ov-dark);
}
.pg .pg-sec--dark:has(> .wrap > .ov-panel.cs-bottom) {
background:
radial-gradient(in oklab 45% 130% at 116% -12%, #d6ff82 0%, #a4e94f 16%, #3f8a34 40%, #163220 66%, rgba(17, 19, 18, 0) 88%),
var(--ov-dark);
}
/* ---- 4. the hero sits on the ground, centred -------------------------- */
.pg .pg-hero--plain { padding-block: clamp(34px, 4vw, 68px) clamp(30px, 4vw, 60px); }
.pg .pg-hero--plain > .wrap > .pg-hero__panel {
background: none; color: var(--ov-ink);
border: 0; border-radius: 0; padding: 0; overflow: visible;
}
.pg .pg-hero--plain .ov-rules { display: none; }
.pg .pg-hero--plain .pg-hero__solo,
.pg .pg-hero--plain .pg-hero__in { max-width: 820px; margin-inline: auto; text-align: center; }
.pg .pg-hero--plain .pg-kicker { justify-content: center; color: var(--ov-ink-3); }
.pg .pg-hero--plain h1 {
margin-top: 16px; color: var(--ov-ink);
font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; font-weight: 800; letter-spacing: -0.03em;
}
.pg .pg-hero--plain .pg-hero__sub {
margin: 18px auto 0; max-width: 62ch;
font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: var(--ov-ink-2);
}
.pg .pg-hero--plain .pg-hero__btns { justify-content: center; }
.pg .pg-hero--plain .pg-rate { justify-content: center; color: var(--ov-ink-2); }
.pg .pg-hero--plain .pg-rate b { color: var(--ov-ink); }
.pg .pg-hero--plain .sec-updated { color: var(--ov-ink-3); }
/* the aside card drops under the centred copy as a row */
.pg .pg-hero--plain .pg-hero__aside { grid-template-columns: minmax(0, 1fr); text-align: left; }
.pg .pg-hero--plain .pg-hero__figs,
.pg .pg-hero--plain .pg-hero__facts {
max-width: 900px; margin-inline: auto; background: rgba(17, 19, 18, 0.1);
}
.pg .pg-hero--plain .pg-hero__figs > div,
.pg .pg-hero--plain .pg-hero__facts > div { background: #fff; }
.pg .pg-hero--plain .pg-hero__figs b { color: var(--ov-ink); }
.pg .pg-hero--plain .pg-hero__figs span,
.pg .pg-hero--plain .pg-hero__facts dt { color: var(--ov-ink-3); }
.pg .pg-hero--plain .pg-hero__facts dd { color: var(--ov-ink); }
.pg .pg-hero--plain .pg-orb {
position: static; margin: clamp(26px, 3.4vw, 46px) auto 0; width: clamp(150px, 15vw, 210px);
filter: drop-shadow(0 18px 30px rgba(17, 19, 18, 0.22));
}
.pg .pg-hero--plain .pg-hero__solo--orb { max-width: 820px; }
@media (max-width: 900px) { .pg .pg-hero--plain .pg-orb { display: block; width: 130px; } }
/* ---- 5. the type scale ------------------------------------------------ */
.pg .pg-head h2, .pg .cs-about__head h2, .pg .ab-story__head h2 {
font-size: clamp(28px, 3.1vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em;
}
.pg .pg-head p { font-size: 16px; line-height: 1.6; }
.pg .pg-kicker { letter-spacing: 0.08em; }
/* a hero that carries a picture or a mock keeps its two columns and its
left alignment; only the text-only heroes centre */
.pg .pg-hero--plain .pg-hero__in { max-width: none; text-align: left; }
.pg .pg-hero--plain .pg-hero__in .pg-kicker { justify-content: flex-start; }
.pg .pg-hero--plain .pg-hero__in .pg-hero__sub { margin-inline: 0; }
.pg .pg-hero--plain .pg-hero__in .pg-hero__btns,
.pg .pg-hero--plain .pg-hero__in .pg-rate { justify-content: flex-start; }
.pg .pg-hero--plain .cs-hero { text-align: left; }
/* the plain hero loses its panel, not its measure: it keeps the same
1086px column the sections below it stand in */
.pg .pg-hero--plain > .wrap > .pg-hero__panel {
padding-inline: max(30px, (100% - 1086px) / 2);
padding-block: clamp(30px, 4vw, 58px) clamp(46px, 6vw, 86px);
}
.pg .pg-hero--plain .ov-rules { display: none; }
/* the orb is written before the copy in the markup, so the flat hero orders
it after — copy first, object beneath, the way the section below reads */
.pg .pg-hero--plain > .wrap > .pg-hero__panel:has(> .pg-orb) {
display: flex; flex-direction: column;
}
.pg .pg-hero--plain .pg-orb { order: 2; }
.pg .pg-hero--plain .pg-hero__solo--orb { order: 1; width: 100%; }
/* ---- 6. the light sections come off their cards too -------------------
Omnisend sets no section inside a rounded panel: the band itself carries
the colour and the content stands on it, with the cards inside doing the
only card work on the page. The light panels follow the dark ones down
onto the ground, and the rhythm comes from alternating the band instead
of from a shadow. */
.pg .pg-sec:not(.pg-sec--dark):not(.pg-cta) > .wrap > .ov-panel {
background: none; border: 0; border-radius: 0; box-shadow: none;
padding-block: 0; overflow: visible;
}
.pg .pg-sec:not(.pg-sec--dark):not(.pg-cta) > .wrap > .ov-panel > .ov-rules { display: none; }
.pg .pg-sec:not(.pg-sec--dark):not(.pg-cta) { padding-block: var(--ov-y); }
/* every other light band picks up white so the page still has a beat */
.pg .pg-sec--tint { background: #fff; }
/* the in-product block reads better on the light ground: the mock inside it
is already dark, so the band around it does not need to be */
.pg .cs-inprod { background: none; color: var(--ov-ink); }
.pg .cs-inprod .pg-kicker { color: var(--ov-ink-3); }
.pg .cs-inprod__cap { color: var(--ov-ink); }
.pg .cs-inprod .ov-rules { display: none; }
/* ---- 7. the footer is the home page's footer -------------------------
It sits outside .ov-page, exactly as it does on the home page, so none of
the inner-page measures reach it and it takes the home page's own rules. */
/* ---- 8. the narrowest phone ------------------------------------------
At 320 a few German compounds, product names and long figures are wider
than the column they sit in. They break inside the word rather than push
past the card. */
@media (max-width: 380px) {
.pg h1, .pg h2, .pg h3, .pg p, .pg li, .pg dd, .pg dt, .pg b, .pg span,
.pg blockquote, .pg td, .pg th { overflow-wrap: anywhere; }
.pg .pg-mock__top { flex-wrap: wrap; }
}
/* a currency figure in the analytics mock is one unbreakable token; at 320
the tile gives it a little more room by dropping the type a step */
@media (max-width: 380px) {
.pg .pg-mock__tile b { font-size: 14px; letter-spacing: -0.04em; }
}
/* ---- 9. the hero's figures become a strip ----------------------------
Sixteen heroes carried their facts as a narrow right-hand column. The
flat hero has no right-hand column, so the figures run as one centred
strip underneath the copy — the row of numbers Omnisend sets under its
inner-page headlines. */
.pg .pg-hero--plain .pg-hero__aside {
display: block; max-width: none; grid-template-columns: none;
}
.pg .pg-hero--plain .pg-hero__solo {
max-width: 820px; margin-inline: auto; text-align: center;
}
.pg .pg-hero--plain .pg-hero__figs,
.pg .pg-hero--plain .pg-hero__facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0; max-width: 1086px; width: 100%;
margin: clamp(38px, 4.6vw, 62px) auto 0;
background: none; border: 0; border-top: 1px solid rgba(17, 19, 18, 0.12);
border-radius: 0; overflow: visible;
}
.pg .pg-hero--plain .pg-hero__figs > div,
.pg .pg-hero--plain .pg-hero__facts > div {
display: block; padding: clamp(20px, 2.4vw, 30px) 18px; text-align: center;
background: none; border: 0; border-left: 1px solid rgba(17, 19, 18, 0.12);
}
.pg .pg-hero--plain .pg-hero__figs > div:first-child,
.pg .pg-hero--plain .pg-hero__facts > div:first-child { border-left: 0; }
.pg .pg-hero--plain .pg-hero__figs b,
.pg .pg-hero--plain .pg-hero__facts dd {
display: block; margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800;
letter-spacing: -0.035em; line-height: 1.05; color: var(--ov-ink);
}
.pg .pg-hero--plain .pg-hero__figs span,
.pg .pg-hero--plain .pg-hero__facts dt {
display: block; margin: 0 0 8px; font-size: 11.5px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--ov-ink-3);
}
@media (max-width: 620px) {
.pg .pg-hero--plain .pg-hero__figs,
.pg .pg-hero--plain .pg-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg .pg-hero--plain .pg-hero__figs > div:nth-child(odd),
.pg .pg-hero--plain .pg-hero__facts > div:nth-child(odd) { border-left: 0; }
.pg .pg-hero--plain .pg-hero__figs > div:nth-child(n + 3),
.pg .pg-hero--plain .pg-hero__facts > div:nth-child(n + 3) { border-top: 1px solid rgba(17, 19, 18, 0.12); }
}
/* ---- 10. every section announces itself the same way ------------------
Omnisend centres its section heads: a small kicker, a short headline and
one line of sub-copy, all on the centre line, with the content grid
underneath. Ours follow, so the pages read down one axis instead of
switching between left- and centre-aligned blocks. */
.pg .pg-head,
.pg .pg-head--mid {
max-width: 720px; margin-inline: auto; margin-bottom: clamp(34px, 3.8vw, 54px);
text-align: center;
}
.pg .pg-head .pg-kicker { justify-content: center; }
.pg .pg-head p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ov-ink-2); }
.pg .pg-sec--dark .pg-head p { color: rgba(255, 255, 255, 0.62); }
/* the hero's figure strip keeps long values — an address, an email — on one
line by sitting a step below the headline scale */
.pg .pg-hero--plain .pg-hero__figs,
.pg .pg-hero--plain .pg-hero__facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pg .pg-hero--plain .pg-hero__figs b,
.pg .pg-hero--plain .pg-hero__facts dd {
font-size: clamp(18px, 1.8vw, 24px); overflow-wrap: break-word; hyphens: none;
}
/* ---- 11. the hero hands over sooner ----------------------------------
The flat hero used the padding the old panel needed. On the ground the
band below starts its own rhythm, so the hero gives back the difference. */
.pg .pg-hero--plain > .wrap > .pg-hero__panel {
padding-block: clamp(22px, 2.6vw, 40px) clamp(34px, 4vw, 62px);
}
/* ---- 12. the questions run down one column ---------------------------
The FAQ was a 300px aside and a list separated by up to 224px of nothing.
Omnisend sets its questions as one centred column and puts the offer of a
human underneath, which is where it belongs in the reading order anyway. */
.pg .pg-faq__in {
display: flex; flex-direction: column; max-width: 868px;
margin-inline: auto; padding-inline: 24px; gap: clamp(26px, 3vw, 40px);
}
/* only the FAQ page itself leads with the profile card, and there the offer
of a human belongs after the questions rather than before them */
.pg .pg-faq__in > div:first-child:has(.pg-faq__who--lead) {
order: 2; display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start;
}
.pg .pg-faq__in:has(.pg-faq__who--lead) .pg-faq__list { order: 1; }
.pg .pg-faq__who { margin-top: 0; border-radius: 8px; }
.pg .pg-faq .acc { border-radius: 8px; box-shadow: none; border: 1px solid rgba(17, 19, 18, 0.1); }
.pg .pg-faq .acc:hover { box-shadow: none; border-color: rgba(17, 19, 18, 0.22); }
.pg .pg-faq__ask { border-radius: 8px; }
/* the questions column announces itself on the centre line like every other
section, while the profile card keeps its own left-aligned line of text */
.pg .pg-faq__in > div:first-child { text-align: center; }
.pg .pg-faq__in > div:first-child .pg-kicker { justify-content: center; }
.pg .pg-faq__who { text-align: left; max-width: 520px; margin-inline: auto; }
.pg .pg-faq__ask { text-align: left; }
.pg .pg-faq__who { margin-top: clamp(18px, 2vw, 26px); }
/* The ghost pill was drawn to sit on a dark panel — white text on a faint
light border. On the flat hero it would disappear, so there it borrows the
site's own light-ground secondary (.ov-pill--line) instead of inventing a
third style. Shape and scale stay the site's. */
.pg .pg-hero--plain .ov-pill--ghost,
.pg .pg-sec:not(.pg-sec--dark) > .wrap > .ov-panel:not(.pg-dark) .ov-pill--ghost {
background: transparent; border-color: var(--ov-line); color: var(--ov-ink);
}
.pg .pg-hero--plain .ov-pill--ghost:hover,
.pg .pg-sec:not(.pg-sec--dark) > .wrap > .ov-panel:not(.pg-dark) .ov-pill--ghost:hover {
background: rgba(17, 19, 18, 0.05); border-color: rgba(17, 19, 18, 0.3);
}
.pg .pg-hero--plain .ov-pill--ghost i,
.pg .pg-sec:not(.pg-sec--dark) > .wrap > .ov-panel:not(.pg-dark) .ov-pill--ghost i {
background: var(--ov-ink); color: #fff;
}
.pg .cl__more { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ov-ink-3); }
.pg .cl__more a { color: var(--ov-ink); text-decoration: underline; text-underline-offset: 3px; }
/* ========================================================================
ABOUT — the live page's shape, in the home page's clothes
========================================================================
accounteditor.com/about runs: a dark hero that carries the breadcrumb and
a four-figure strip, a two-column story, a 2 x 2 grid of principles with
a run of numbers under it, the company questions as a conversation, and a
dark closing band. Same sections, same order, same words. The type, the
palette and the card shapes are the ones the home page uses. */
/* ---- the hero band --------------------------------------------------- */
.pg .ab-hero {
background: var(--ov-dark); color: #fff;
padding-block: 0 clamp(0px, 0vw, 0px);
overflow: hidden;
}
.pg .ab-hero > .wrap { padding-block: 0 clamp(44px, 5vw, 76px); }
.pg .ab-hero__crumb { padding: 104px 0 clamp(34px, 4vw, 58px); max-width: none; }
.pg .ab-hero__crumb a, .pg .ab-hero__crumb span { color: rgba(255, 255, 255, 0.52); }
.pg .ab-hero__crumb a:hover { color: #fff; }
.pg .ab-hero__crumb li + li::before { color: rgba(255, 255, 255, 0.3); }
.pg .ab-hero__crumb [aria-current] { color: #fff; }
.pg .ab-hero__in {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(30px, 4vw, 56px); align-items: center;
}
.pg .ab-hero h1 {
font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; font-weight: 800;
letter-spacing: -0.035em; color: #fff;
}
.pg .ab-hero .pg-kicker { color: rgba(255, 255, 255, 0.55); }
.pg .ab-hero .pg-kicker::before { background: rgba(255, 255, 255, 0.4); }
.pg .ab-hero__sub {
margin-top: clamp(18px, 2vw, 26px); max-width: 64ch;
font-size: clamp(16px, 1.25vw, 18px); line-height: 1.62; color: rgba(255, 255, 255, 0.62);
}
.pg .ab-hero__orb {
position: static; margin: 0 auto; width: clamp(150px, 16vw, 230px);
filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.55));
}
@media (min-width: 900px) {
.pg .ab-hero__in { grid-template-columns: minmax(0, 1fr) auto; }
.pg .ab-hero__orb { margin: 0; }
}
/* the four figures sit on the band, divided by hairlines */
.pg .ab-hero__figs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
margin-top: clamp(40px, 4.6vw, 68px);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pg .ab-hero__figs > div {
padding: clamp(22px, 2.6vw, 32px) clamp(16px, 2vw, 28px);
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.pg .ab-hero__figs > div:first-child { border-left: 0; padding-left: 0; }
.pg .ab-hero__figs dt {
font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.04em;
line-height: 1; color: #fff;
}
.pg .ab-hero__figs dd {
margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.5);
}
/* the pricing hero's own stat row — a quiet icon per figure, the same
translucent-on-dark language the "Built for Shopify" badge speaks,
not a solid lime sticker sitting on top of the number */
.pg .ab-hero__fic {
display: grid; place-items: center; margin-bottom: 12px; width: 30px; height: 30px;
border-radius: 9px; background: rgba(255, 255, 255, 0.08); color: var(--ov-lime);
}
.pg .ab-hero__fic svg { width: 15px; height: 15px; }
@media (max-width: 620px) {
.pg .ab-hero__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg .ab-hero__figs > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.pg .ab-hero__figs > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}
/* ---- the light bands -------------------------------------------------- */
.pg .ab-sec { padding-block: clamp(56px, 6.8vw, 100px); }
.pg .ab-sec--tint { background: #fff; }
.pg .ab-head { max-width: 740px; margin-bottom: clamp(34px, 3.8vw, 54px); text-align: left; }
.pg .ab-head h2 {
font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; font-weight: 800;
letter-spacing: -0.03em; color: var(--ov-ink);
}
/* ---- the story: heading on the left, the account on the right --------- */
.pg .ab-story {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(26px, 3.4vw, 56px); align-items: start;
}
.pg .ab-story__head h2 {
font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; font-weight: 800;
letter-spacing: -0.03em; color: var(--ov-ink);
}
.pg .ab-story__body { display: grid; gap: 20px; }
.pg .ab-story__body p { font-size: 17px; line-height: 1.68; color: var(--ov-ink-2); }
@media (min-width: 900px) {
.pg .ab-story { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.pg .ab-story__head { position: sticky; top: 118px; }
}
/* ---- the four principles --------------------------------------------- */
.pg .ab-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: clamp(14px, 1.6vw, 22px);
}
.pg .ab-card {
padding: clamp(22px, 2.4vw, 32px);
border: 1px solid var(--ov-line); border-radius: 18px; background: var(--ov-paper);
}
.pg .ab-sec--tint .ab-card { background: #fff; }
.pg .ab-card__n {
display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
color: var(--ov-ink-3);
}
.pg .ab-card h3 {
margin-top: 14px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700;
letter-spacing: -0.025em; line-height: 1.2; color: var(--ov-ink);
}
.pg .ab-card p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ov-ink-2); }
/* ---- the run of numbers under the principles -------------------------- */
.pg .ab-run {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(20px, 2.4vw, 32px);
background: none;
}
.pg .ab-run > div {
padding: clamp(22px, 2.4vw, 30px);
border: 1px solid var(--ov-line); border-radius: 18px; background: var(--ov-paper);
}
.pg .ab-sec--tint .ab-run > div { background: #fff; }
.pg .ab-run dt {
font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.045em;
line-height: 1; color: var(--ov-ink);
}
.pg .ab-run dd { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ov-ink-3); }
/* ---- the company questions, as a conversation ------------------------- */
.pg .ab-chat { display: grid; gap: clamp(26px, 3vw, 40px); max-width: 900px; }
.pg .ab-chat__turn { display: grid; gap: 14px; }
.pg .ab-chat__q {
justify-self: end; max-width: min(100%, 560px);
padding: 15px 22px; border-radius: 20px 20px 4px 20px;
background: var(--ov-lime); color: var(--ov-ink);
font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4;
}
.pg .ab-chat__a {
display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
align-items: start; max-width: min(100%, 680px);
}
.pg .ab-chat__av {
width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
border: 1px solid var(--ov-line); background: #fff;
}
.pg .ab-chat__a p {
padding: 18px 22px; border-radius: 4px 20px 20px 20px;
border: 1px solid var(--ov-line); background: #fff;
font-size: 15.5px; line-height: 1.65; color: var(--ov-ink-2);
}
.pg .ab-sec--tint .ab-chat__a p { background: var(--ov-paper); }
@media (max-width: 560px) {
.pg .ab-chat__a { grid-template-columns: minmax(0, 1fr); }
.pg .ab-chat__av { display: none; }
.pg .ab-chat__a p { border-radius: 20px; }
}
/* ---- the closing band ------------------------------------------------- */
.pg .ab-cta {
background: var(--ov-dark); color: #fff;
padding-block: clamp(56px, 6.6vw, 96px);
}
.pg .ab-cta__in {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(26px, 3vw, 44px); align-items: center;
}
.pg .ab-cta h2 {
font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; font-weight: 800;
letter-spacing: -0.03em; color: #fff;
}
.pg .ab-cta .pg-kicker { color: rgba(255, 255, 255, 0.55); }
.pg .ab-cta .pg-kicker::before { background: rgba(255, 255, 255, 0.4); }
.pg .ab-cta__sub {
margin-top: 14px; max-width: 56ch; font-size: 16.5px; line-height: 1.6;
color: rgba(255, 255, 255, 0.62);
}
.pg .ab-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
.pg .ab-cta__in { grid-template-columns: minmax(0, 1fr) auto; }
.pg .ab-cta__btns { justify-content: flex-end; }
}
/* the orb on the about hero is the home page's object: the same sprite
sheet, the same three keyframes, only placed in the hero's own column */
.pg .ab-hero__orb {
display: block; pointer-events: none; aspect-ratio: 1;
background: url("../images/orb-brand-spin.webp") no-repeat;
background-size: 900% 800%;
animation: obj-col 1.5s steps(9, jump-none) infinite,
obj-row 12s steps(8, jump-none) infinite,
obj-float 16s ease-in-out infinite;
will-change: background-position, transform;
}
@media (prefers-reduced-motion: reduce) { .pg .ab-hero__orb { animation: none; } }
@media (max-width: 620px) { .pg .ab-hero__orb { width: 140px; } }
/* the principles sit two-up, as they do on the live page */
@media (min-width: 760px) {
.pg .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- the header, while it sits on the about page's dark hero ----------
The bar is transparent until it sticks, so at the top of this page it is
dark-on-dark. Until it sticks, the mark, the links and the badge invert;
the black CTA pill becomes the white one so it still reads as the primary
action. Past 12px the bar takes its light backdrop and everything returns
to the normal treatment. */
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__logo img { filter: brightness(0) invert(1); }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__nav a,
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__nav a:hover { color: #fff; }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__nav a::after { background: #fff; }
/* the mega panel is a floating card, not the bar itself — it keeps its own
light colours throughout no matter what the hero behind the bar is doing */
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-mega a,
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-mega a:hover { color: var(--ov-ink); }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-mega a::after { display: none; }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__bfs {
background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8);
}
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__bfs b { color: #fff; }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__cta { background: #fff; color: #101011; }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__cta:hover { background: #efeee9; }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__cta i { background: #101011; color: #fff; }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__menu,
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__menu span { color: #fff; background-color: #fff; }
.pg:has(.ab-hero) .ov-hdr:not(.is-stuck) .ov-hdr__menu { background-color: transparent; }
/* ========================================================================
ALL INNER PAGES — the About page's system
========================================================================
The About page set the pattern the rest now follow: a dark hero band that
carries the breadcrumb and a strip of figures, left-aligned section heads
over light bands, cards with the home page's 18px corners, the questions
as a conversation, and a dark closing band. Everything below applies to
every .pg page; the About page's own rules above are the source. */
/* ---- cards keep the home page's corners, not the 8px pass ------------- */
.pg .pg-step, .pg .pg-pair__card, .pg .prc__plan, .pg .cs-fric, .pg .cs-glance,
.pg .cs-say, .pg .cs-split, .pg .cs-grp, .pg .cs-more__card, .pg .cs-row,
.pg .alt, .pg .int__card, .pg .cmp__stat, .pg .cmp__feat, .pg .cmp__wb-card,
.pg .cmp__link, .pg .cmp__help, .pg .frm, .pg .frm__quote,
.pg .roi__math, .pg .sg__deeper, .pg .sg__live, .pg .sg__part, .pg .int__xb,
.pg .pg-stats, .pg .cs-quote, .pg .int__wall, .pg .pg-faq__who, .pg .pg-faq__ask,
.pg .prc__trust-item, .pg .sec-block__mail, .pg .cs-bottom__tiles > div,
.pg .cs-res__card, .pg .cs-res__big, .pg .cs-mock__opt, .pg .cs-mock__offer { border-radius: 18px; }
.pg .frm__row input, .pg .frm__row select, .pg .frm__row textarea,
.pg .cl__search, .pg .cl__sel, .pg .roi__preset, .pg .gl__jump a { border-radius: 12px; }
/* ---- section heads: kicker over a left-aligned headline --------------- */
.pg .pg-head, .pg .pg-head--mid {
max-width: 740px; margin-inline: 0; margin-bottom: clamp(34px, 3.8vw, 54px); text-align: left;
}
.pg .pg-head .pg-kicker { justify-content: flex-start; }
.pg .pg-head h2 {
font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em;
}
.pg .pg-head p { margin-top: 14px; font-size: 17px; line-height: 1.6; }
/* ---- hero variants ---------------------------------------------------- */
.pg .ab-hero .pg-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.4vw, 32px); }
.pg .ab-hero .pg-rate { margin-top: 22px; color: rgba(255, 255, 255, 0.6); }
.pg .ab-hero .pg-rate b { color: #fff; }
.pg .ab-hero__note { margin-top: 14px; font-size: 13.5px; color: rgba(255, 255, 255, 0.45); }
.pg .ab-hero--mock .ab-hero__in { align-items: center; }
.pg .ab-hero--mock .pg-mock { width: 100%; max-width: 520px; justify-self: end; }
@media (min-width: 900px) {
.pg .ab-hero--mock .ab-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
}
/* case-study cover: the photograph takes the orb's column */
.pg .ab-hero__shot {
margin: 0; overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 3;
border: 1px solid rgba(255, 255, 255, 0.12); background: var(--ov-dark-2);
}
.pg .ab-hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
.pg .ab-hero--cs .ab-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}
.pg .ab-hero--cs .cs-hero__plate {
display: grid; gap: 6px; width: fit-content; max-width: 100%;
margin-top: clamp(22px, 2.4vw, 32px); padding: 18px 22px; border-radius: 18px;
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
}
.pg .ab-hero--cs .cs-hero__lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.pg .ab-hero--cs .cs-hero__plate b { font-size: clamp(38px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--ov-lime); }
.pg .ab-hero--cs .cs-hero__side { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.pg .ab-hero--cs .cs-hero__meta { margin-top: 16px; font-size: 13.5px; color: rgba(255, 255, 255, 0.45); }
/* a second row under the figures: industry, platform, region… */
.pg .ab-hero__meta {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
gap: 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pg .ab-hero__meta > div { padding: 18px clamp(16px, 2vw, 28px) 0; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.pg .ab-hero__meta > div:first-child { border-left: 0; padding-left: 0; }
.pg .ab-hero__meta dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.pg .ab-hero__meta dd { margin: 6px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 620px) {
.pg .ab-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg .ab-hero__meta > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}
/* ---- the questions, with the Fixer beside them ------------------------ */
.pg .ab-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3vw, 44px); }
.pg .ab-faq--aside .ab-chat { max-width: none; }
@media (min-width: 960px) {
.pg .ab-faq--aside { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.pg .ab-faq__aside { position: sticky; top: 118px; }
}
.pg .ab-faq__aside { display: grid; gap: 14px; }
.pg .ab-faq__aside .pg-faq__who, .pg .ab-faq__aside .pg-faq__ask { margin: 0; max-width: none; }
.pg .ab-faq__aside .pg-faq__ask { background: var(--ov-dark); color: #fff; border-radius: 18px; }
.pg .ab-faq__aside .pg-faq__ask p { color: rgba(255, 255, 255, 0.62); }
.pg .ab-faq__aside .pg-faq__ask-t { color: #fff; }
.pg .ab-chat { max-width: 900px; }
/* ---- a dark section straight under the dark hero becomes a card ------- */
.pg .ab-hero + .pg-sec--dark { background: none; color: var(--ov-ink); padding-block: clamp(46px, 5.4vw, 80px) 0; }
.pg .ab-hero + .pg-sec--dark > .wrap > .ov-panel,
.pg .ab-hero + .pg-sec--dark > .wrap > .ov-panel.pg-dark {
background: var(--ov-dark); color: #fff; border-radius: 26px; overflow: hidden;
padding-block: clamp(34px, 4.4vw, 64px);
}
.pg .ab-hero + .pg-sec--dark .ov-rules { display: block; }
/* every light section that carries a dark panel keeps it as a card */
.pg .pg-sec:not(.pg-sec--dark):not(.pg-cta) > .wrap > .ov-panel.pg-dark {
background: var(--ov-dark); color: #fff; border-radius: 26px; overflow: hidden;
padding-block: clamp(34px, 4.4vw, 64px);
}
/* the About components read correctly when they sit on a dark band too */
.pg .pg-sec--dark .ab-story__head h2, .pg .pg-dark .ab-story__head h2,
.pg .pg-sec--dark .ab-head h2, .pg .pg-dark .ab-head h2 { color: #fff; }
.pg .pg-sec--dark .ab-story__body p, .pg .pg-dark .ab-story__body p,
.pg .pg-sec--dark .ab-head p, .pg .pg-dark .ab-head p { color: rgba(255, 255, 255, 0.64); }
/* the paper tone the About cards sit on (it was never declared, so they were
transparent) */
.pg { --ov-paper: #f7f6f3; }
/* inner pages (features, pricing, etc.) felt too tight after the
site-wide section-rhythm reduction — give this family a bit more
room back, short of the original clamp(64px, 8vh, 110px) */
.pg { --ov-y: clamp(56px, 7vh, 96px); }
/* and the same cards on a dark band */
.pg .pg-sec--dark .ab-card, .pg .pg-dark .ab-card { background: var(--ov-dark-2); border-color: var(--ov-line-d); }
.pg .pg-sec--dark .ab-card__n, .pg .pg-dark .ab-card__n { color: var(--ov-lime); }
.pg .pg-sec--dark .ab-card h3, .pg .pg-dark .ab-card h3 { color: #fff; }
.pg .pg-sec--dark .ab-card p, .pg .pg-dark .ab-card p { color: rgba(255, 255, 255, 0.62); }
.pg .ab-hero__figs dt { overflow-wrap: normal; word-break: normal; }
/* ---- the strip sizes its own values ---------------------------------------
Each value carries its length (--n). The type is the big figure size for
short values and steps down so a longer one — an email, a sentence — fits
the width of its own cell, never below 14px. No script needed. */
.pg .ab-hero__figs > div { container-type: inline-size; }
.pg .ab-hero__figs dt {
font-size: clamp(14px, calc(100cqw / (var(--n, 4) * 0.62)), var(--m, clamp(26px, 3vw, 40px)));
line-height: 1.1; overflow-wrap: normal;
}
/* a value that still cannot fit its cell breaks inside the word, never past it */
.pg .ab-hero__figs dt { overflow-wrap: anywhere; }
/* ---- polish: the small things that made the pages read as unfinished --- */
/* kickers keep one size wherever they sit (the head's paragraph rule was
catching them and setting them at 17px) */
.pg .pg-head p.pg-kicker, .pg .ab-head p.pg-kicker, .pg .ab-cta p.pg-kicker {
margin: 0; font-size: 12px; line-height: 1.4; letter-spacing: 0.12em;
}
/* and a headline always sits a clear step below its kicker */
.pg .pg-kicker + h1, .pg .pg-kicker + h2 { margin-top: 16px; }
.pg .pg-head h2 + p, .pg .ab-head h2 + p { margin-top: 16px; }
.pg .ab-head, .pg .pg-head { margin-bottom: clamp(32px, 3.6vw, 52px); }
/* the plate behind a hero mock is the brand lime on a dark band — the pale
tint that works on paper turns to olive there */
.pg .ab-hero .pg-mock {
box-shadow: 14px 16px 0 var(--ov-lime), 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
@media (max-width: 900px) {
.pg .ab-hero .pg-mock { box-shadow: 9px 10px 0 var(--ov-lime), 0 30px 60px -36px rgba(0, 0, 0, 0.7); }
}
/* ---- rhythm and composition -------------------------------------------- */
/* the sticky bar reads as a solid light bar over dark bands, not a grey haze */
.pg .ov-hdr::before { background: rgba(244, 242, 238, 0.94); }
/* two neighbouring bands on the same ground share one gap, not two — this
only matches the Omnisend-pass sections, whose tint/dark toggle is the
pg-sec--tint / pg-sec--dark class. The About-pattern sections (ab-sec,
ab-sec--tint) each carry their own top padding and are excluded, or the
rule zeroes theirs by matching plain .pg-sec instead of the class that
actually colours them. */
.pg .pg-sec:not(.pg-sec--dark):not(.pg-sec--tint):not(.pg-cta):not(.ab-sec):not(.ft-sec) + .pg-sec:not(.pg-sec--dark):not(.pg-sec--tint):not(.pg-cta):not(.ab-sec):not(.ft-sec) {
padding-top: 0;
}
/* same fix for two tint bands back to back (both #fff) — otherwise the
doubled padding reads as a gap even though the ground never changes */
.pg .pg-sec--tint:not(.pg-cta):not(.ab-sec):not(.ft-sec) + .pg-sec--tint:not(.pg-cta):not(.ab-sec):not(.ft-sec) {
padding-top: 0;
}
/* a case study's pull quote uses the width it has */
.pg .cs-pq blockquote { max-width: 34ch; font-size: clamp(26px, 3.2vw, 46px); }
@media (min-width: 900px) {
.pg .cs-pq blockquote { max-width: 30ch; }
}
/* the lede is a statement, not a footnote */
.pg .cs-lede { max-width: 58ch; border-left-width: 3px; }
.pg .cs-lede__t { color: var(--ov-ink); font-weight: 500; }
/* the "scroll sideways" hint only matters where the table actually scrolls */
@media (min-width: 900px) { .pg .pcmp__note { display: none; } }
/* the pull quote starts on the column line, not 40px in */
.pg .cs-pq blockquote { margin-left: 0; margin-right: 0; padding-left: 0; }
/* ========================================================================
FEATURES INDEX — the Omnisend features page, in Account Editor's brand
========================================================================
omnisend.com/features: a dark, centred hero; a row of feature tiles that
straddles its lower edge; pill tabs that pin while you read; then one
band per feature — a centred kicker and headline over a picture on one
side and the copy on the other, the sides alternating, the band's ground
alternating with them. The words are the live page's; the lime, the type
and the corners are ours. */
/* ---- hero: centred, with a lime glow off the right-hand edge ---------- */
.pg .ft-hero {
--ft-half: 74px; /* half the tile bar: how far it hangs below the hero */
background:
radial-gradient(58% 100% at 106% 70%, rgba(184, 242, 74, 0.62), rgba(184, 242, 74, 0) 66%),
radial-gradient(40% 60% at 100% 100%, rgba(216, 255, 138, 0.35), rgba(216, 255, 138, 0) 70%),
var(--ov-dark);
}
.pg .ft-hero > .wrap { padding-block: 0; }
.pg .ft-hero__in { max-width: 860px; margin-inline: auto; padding: clamp(120px, 12vw, 170px) 0 clamp(56px, 6vw, 84px); text-align: center; }
.pg .ft-hero .pg-kicker { justify-content: center; }
.pg .ft-hero .pg-kicker::before { display: none; }
.pg .ft-hero h1 {
margin-top: 18px; font-size: clamp(38px, 5.6vw, 76px); line-height: 1.04;
font-weight: 800; letter-spacing: -0.04em; color: #fff;
}
.pg .ft-hero .ab-hero__sub { margin: clamp(20px, 2.4vw, 30px) auto 0; max-width: 60ch; text-align: center; }
.pg .ft-hero .pg-hero__btns { justify-content: center; margin-top: clamp(26px, 3vw, 38px); }
/* ---- the tile bar: its own middle sits on the hero's lower edge -------- */
.pg .ft-tiles {
position: relative; z-index: 6; transform: translateY(50%);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
overflow: hidden; border-radius: 26px; background: rgba(17, 19, 18, 0.12);
box-shadow: 0 30px 70px -40px rgba(17, 19, 18, 0.55);
}
.pg .ft-tile {
display: grid; justify-items: center; align-content: center; gap: 14px;
min-height: 148px; padding: 24px 14px; background: var(--ov-lime-2);
text-align: center; color: var(--ov-ink); transition: background 0.25s ease;
}
.pg .ft-tile:last-child { grid-column: 1 / -1; }
.pg .ft-tile:hover { background: var(--ov-lime); }
.pg .ft-tile__ico {
display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
background: #fff; color: var(--ov-ink); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg .ft-tile:hover .ft-tile__ico { transform: translateY(-3px); }
.pg .ft-tile__ico svg { width: 22px; height: 22px; }
.pg .ft-tile b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
@media (max-width: 899px) { .pg .ft-hero { --ft-half: 223px; } }
@media (min-width: 900px) {
.pg .ft-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg .ft-tile { min-height: 148px; }
.pg .ft-tile:last-child { grid-column: auto; }
}
/* ---- one band per feature --------------------------------------------- */
.pg .ft-body { position: relative; padding-top: 74px; background: #fff; }
@media (max-width: 899px) { .pg .ft-body { padding-top: 223px; } }
.pg .ft-sec {
position: relative; scroll-margin-top: 120px; background: #fff; color: var(--ov-ink);
padding-block: var(--ov-y); border-top: 1px solid rgba(17, 19, 18, 0.08);
}
.pg .ft-sec--ground { background: var(--ov-bg); }
.pg .ft-sec--dark { background: var(--ov-dark); color: #fff; border-top-color: rgba(255, 255, 255, 0.1); }
.pg .ft-head { max-width: 780px; margin: 0 auto clamp(40px, 4.6vw, 68px); text-align: center; }
.pg .ft-head .pg-kicker { justify-content: center; }
.pg .ft-head .pg-kicker::before { display: none; }
.pg .ft-head h2 {
margin-top: 16px; font-size: clamp(30px, 4vw, 54px); line-height: 1.06;
font-weight: 800; letter-spacing: -0.035em; color: inherit;
}
.pg .ft-sec--dark .pg-kicker { color: rgba(255, 255, 255, 0.55); }
.pg .ft-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4.6vw, 72px); align-items: center; }
@media (min-width: 900px) {
.pg .ft-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.pg .ft-row--flip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.pg .ft-row--flip .ft-stage { order: 2; }
}
/* the picture: the feature's own interface on a rounded stage */
.pg .ft-stage {
display: grid; place-items: center; min-height: clamp(320px, 34vw, 480px);
padding: clamp(26px, 3.6vw, 56px); border-radius: 28px;
background: none; border: none;
}
.pg .ft-sec--ground .ft-stage { background: none; }
.pg .ft-sec--dark .ft-stage { background: none; border-color: transparent; }
.pg .ft-mock {
width: 100%; max-width: 440px; margin: 0;
box-shadow: 0 34px 60px -34px rgba(17, 19, 18, 0.45), 0 2px 5px rgba(17, 19, 18, 0.08);
}
/* a full-bleed lifestyle photo with small notification "toast" chips
hung off its left edge — used across the features hub's feature rows */
.pg .ft-stage--toast { padding: 0; overflow: hidden; }
.pg .ft-toast { position: relative; margin: 0; width: 100%; height: 100%; }
.pg .ft-toast__photo {
display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
border-radius: 28px;
}
.pg .ft-toast__list {
position: absolute; left: -14px; top: 13%; z-index: 1;
display: flex; flex-direction: column; gap: 10px;
list-style: none; margin: 0; padding: 0;
}
.pg .ft-toast__list li {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px 10px 12px; border-radius: 999px;
background: #fff; color: #101011; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
box-shadow: 0 14px 28px -16px rgba(17, 19, 18, 0.45);
white-space: nowrap;
}
.pg .ft-toast__list li svg {
width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%;
background: var(--ov-lime); color: var(--ov-ink);
}
.pg .ft-toast__list li:nth-child(2) { margin-left: 22px; }
.pg .ft-toast__list li:nth-child(3) { margin-left: 10px; }
/* variant: one card resting in a corner, instead of a stacked list —
keeps every feature row's photo from reading as the same composition */
.pg .ft-toast__card {
position: absolute; left: 20px; bottom: 20px; right: 20px; z-index: 1;
display: flex; align-items: center; gap: 13px; width: fit-content; max-width: calc(100% - 40px);
padding: 14px 20px 14px 14px; border-radius: 18px;
background: #fff; color: #101011;
box-shadow: 0 20px 40px -18px rgba(17, 19, 18, 0.5);
}
.pg .ft-toast__card-ico {
display: grid; place-items: center; flex: none; width: 36px; height: 36px;
border-radius: 50%; background: var(--ov-lime); color: var(--ov-ink);
}
.pg .ft-toast__card-ico svg { width: 18px; height: 18px; }
.pg .ft-toast__card b, .pg .ft-toast__pin b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.pg .ft-toast__card span:not(.ft-toast__card-ico), .pg .ft-toast__pin span:not(.ft-toast__card-ico) { font-size: 12.5px; color: var(--ov-ink-2); }
/* variant: a single pinned card, top corner */
.pg .ft-toast__pin {
position: absolute; right: 20px; top: 20px; z-index: 1;
display: flex; align-items: center; gap: 12px; max-width: 250px;
padding: 12px 18px 12px 12px; border-radius: 18px;
background: #fff; color: #101011;
box-shadow: 0 20px 40px -18px rgba(17, 19, 18, 0.5);
}
/* variant: two stat tiles side by side along the bottom edge */
.pg .ft-toast__stats {
position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1;
display: flex; gap: 10px;
}
.pg .ft-toast__stats > div {
flex: 1; padding: 14px 18px; border-radius: 16px;
background: #fff; color: #101011;
box-shadow: 0 20px 40px -18px rgba(17, 19, 18, 0.5);
}
.pg .ft-toast__stats p { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ov-ink-3); }
.pg .ft-toast__stats b { display: block; margin-top: 5px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
/* variant: one minimal pill, no supporting card */
.pg .ft-toast__badge {
position: absolute; left: 20px; top: 20px; z-index: 1;
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 18px 11px 12px; border-radius: 999px;
background: #fff; color: #101011; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
box-shadow: 0 14px 28px -16px rgba(17, 19, 18, 0.45);
}
.pg .ft-toast__badge svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; background: var(--ov-lime); color: var(--ov-ink); }
/* the copy: one paragraph, three lines, one button */
.pg .ft-desc { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ov-ink-2); }
.pg .ft-sec--dark .ft-desc { color: rgba(255, 255, 255, 0.66); }
.pg .ft-list { list-style: none; margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0; }
.pg .ft-list li {
display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: center;
padding: 17px 0; border-top: 1px solid rgba(17, 19, 18, 0.1);
font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.4;
}
.pg .ft-list li:last-child { border-bottom: 1px solid rgba(17, 19, 18, 0.1); }
.pg .ft-sec--dark .ft-list li { border-color: rgba(255, 255, 255, 0.14); }
.pg .ft-list__mark {
position: relative; width: 30px; height: 30px; border-radius: 50%; background: rgba(17, 19, 18, 0.06);
}
.pg .ft-list__mark::before, .pg .ft-list__mark::after {
content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
}
.pg .ft-list__mark::before { width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px; }
.pg .ft-list__mark::after { width: 1.6px; height: 11px; margin: -5.5px 0 0 -0.8px; }
.pg .ft-sec--dark .ft-list__mark { background: rgba(255, 255, 255, 0.1); }
.pg .ft-copy > .ov-pill { margin-top: clamp(24px, 2.8vw, 34px); }
.pg .ft-sec:not(.ft-sec--dark) .ft-copy > .ov-pill { background: var(--ov-ink); color: #fff; }
.pg .ft-sec:not(.ft-sec--dark) .ft-copy > .ov-pill:hover { background: #24242a; }
.pg .ft-sec:not(.ft-sec--dark) .ft-copy > .ov-pill i { background: var(--ov-lime); color: var(--ov-ink); }
.pg .ft-sec--dark .ft-copy > .ov-pill i { background: var(--ov-ink); color: #fff; }
/* the pull quote that follows sits on the last band's ground */
.pg .ft-body + .pg-quote { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.pg .ft-hero { overflow: visible; z-index: 8; }
.pg .ft-hero {
background:
radial-gradient(52% 96% at 108% 66%, rgba(206, 255, 110, 0.78), rgba(184, 242, 74, 0.28) 46%, rgba(184, 242, 74, 0) 72%),
var(--ov-dark);
}
.pg .ft-hero {
background:
radial-gradient(46% 90% at 106% 60%, rgba(196, 255, 100, 0.95), rgba(184, 242, 74, 0.46) 38%, rgba(184, 242, 74, 0) 76%),
var(--ov-dark);
}
@media (max-width: 899px) {
.pg .ft-hero {
background:
radial-gradient(90% 34% at 60% 100%, rgba(196, 255, 100, 0.9), rgba(184, 242, 74, 0.35) 46%, rgba(184, 242, 74, 0) 78%),
var(--ov-dark);
}
}
@media (max-width: 380px) { .pg .ft-stage { padding: 14px; } }
/* ---- tile bar, second layout: five separate cards ---------------------- */
.pg .ft-hero { --ft-half: 86px; }
.pg .ft-tiles {
gap: 14px; overflow: visible; border-radius: 0; background: none; box-shadow: none;
}
.pg .ft-tile {
display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
gap: 28px; min-height: 172px; padding: 22px 22px 24px; border-radius: 28px; text-align: left;
background: var(--ov-lime-2);
box-shadow: 0 32px 60px -32px rgba(17, 19, 18, 0.4);
transition: background 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.pg .ft-tile:hover { background: var(--ov-lime); transform: translateY(-4px); }
.pg .ft-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pg .ft-tile__go {
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(17, 19, 18, 0.22); color: var(--ov-ink);
transition: background 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg .ft-tile__go svg { width: 14px; height: 14px; }
.pg .ft-tile:hover .ft-tile__go { background: var(--ov-ink); color: #fff; transform: rotate(45deg); }
.pg .ft-tile b { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.pg .ft-tile:last-child { grid-column: 1 / -1; }
@media (max-width: 899px) {
.pg .ft-hero { --ft-half: 269px; }
.pg .ft-tile { min-height: 156px; }
}
@media (min-width: 900px) {
.pg .ft-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg .ft-tile:last-child { grid-column: auto; }
}
.pg .ft-body { padding-top: 86px; }
@media (max-width: 899px) { .pg .ft-body { padding-top: 269px; } }
/* the bar's lower half hangs below the hero by a negative margin instead of
a transform, so the hero ends at its middle and no blank dark is left
above it */
.pg .ft-hero > .wrap { display: flow-root; }
.pg .ft-tiles { transform: none; margin-bottom: calc(-1 * var(--ft-half)); }
/* ---- the customer quote on the features page ---------------------------
A lime band in the tile bar's colour: the quote centred and large, the
customer under it as a small badge, so the page has one warm break between
the dark hero and the closing band. */
.pg .ft-proof { background: var(--ov-lime-2); color: var(--ov-ink); padding-block: clamp(64px, 8vw, 116px); }
.pg .ft-proof__in { display: grid; justify-items: center; margin: 0 auto; max-width: 960px; text-align: center; }
.pg .ft-proof__mark { width: clamp(40px, 4.4vw, 58px); height: auto; color: var(--ov-ink); opacity: 0.9; }
.pg .ft-proof blockquote {
margin: clamp(20px, 2.4vw, 30px) 0 0; padding: 0; max-width: 24ch;
font-size: clamp(30px, 4.2vw, 58px); line-height: 1.08; font-weight: 700; letter-spacing: -0.04em;
color: var(--ov-ink);
}
.pg .ft-proof figcaption {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 16px;
margin-top: clamp(28px, 3.2vw, 44px);
}
.pg .ft-proof__av {
display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
background: var(--ov-ink); color: var(--ov-lime); font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
}
.pg .ft-proof__who { display: grid; gap: 2px; text-align: left; }
.pg .ft-proof__who b { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.pg .ft-proof__who span { font-size: 13.5px; color: rgba(17, 19, 18, 0.62); }
.pg .ft-proof__pill {
padding: 8px 15px; border-radius: 999px; background: var(--ov-ink); color: #fff;
font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
}
/* the glow: lime at the edge that cools through green into the hero's own
black, mixed in a perceptual space so it never passes through olive */
.pg .ft-hero {
background:
radial-gradient(in oklab 62% 118% at 112% 58%, #d6ff82 0%, #a4e94f 16%, #3f8a34 40%, #163220 66%, rgba(17, 19, 18, 0) 88%),
var(--ov-dark);
}
@media (max-width: 899px) {
.pg .ft-hero {
background:
radial-gradient(in oklab 100% 38% at 56% 104%, #d6ff82 0%, #a4e94f 18%, #3f8a34 44%, #163220 70%, rgba(17, 19, 18, 0) 92%),
var(--ov-dark);
}
}
/* no hairline under the tile bar: the first band starts clean */
.pg .ft-body > .ft-sec:first-child { border-top: 0; }
/* the About hero picks up the same right-hand glow, behind the orb */
.pg .ab-hero--glow {
background:
radial-gradient(in oklab 62% 118% at 112% 58%, #d6ff82 0%, #a4e94f 16%, #3f8a34 40%, #163220 66%, rgba(17, 19, 18, 0) 88%),
var(--ov-dark);
}
@media (max-width: 899px) {
.pg .ab-hero--glow {
background:
radial-gradient(in oklab 100% 38% at 56% 104%, #d6ff82 0%, #a4e94f 18%, #3f8a34 44%, #163220 70%, rgba(17, 19, 18, 0) 92%),
var(--ov-dark);
}
}
/* ========================================================================
CONTACT — the live page's two-card layout, in the site's own card style
========================================================================
accounteditor.com/contact puts the reasons-to-reach-us list and the
review together on one card, matched beside the form card, then closes
with a plain, centred line rather than a dark band. Same content, same
pairing — the icon badges and type stay the site's own. */
.pg .frm__side--card {
padding: clamp(24px, 3vw, 38px); border-radius: 18px;
background: #fff; border: 1px solid var(--ov-line);
}
.pg .frm__side--card .frm__rail li { border-top: 0; padding: 11px 0; }
.pg .frm__side--card .frm__rail li:first-child { padding-top: 0; }
.pg .frm__side--card .frm__rail li:last-child { border-bottom: 0; padding-bottom: 0; }
.pg .frm__side--card .frm__rail i {
background: var(--ov-bg); color: var(--ov-ink); border-radius: 50%;
}
.pg .frm__quote--flat {
margin-top: 22px; padding: 22px 0 0; border-radius: 0; background: none; color: var(--ov-ink);
border-top: 1px solid var(--ov-line);
}
.pg .frm__quote--flat .frm__stars { color: var(--ov-ink-3); }
.pg .frm__quote--flat .frm__stars b { color: var(--ov-ink); }
.pg .frm__quote--flat blockquote { color: var(--ov-ink); }
.pg .frm__quote--flat figcaption { color: var(--ov-ink-3); }
/* the closing line, then the live page's own Calendly picker beneath it —
no dead button standing in for it */
.pg .ct-call { padding-block: 0 clamp(56px, 7vw, 92px); text-align: center; }
.pg .ct-call__head { text-align: center; }
.pg .ct-call .pg-kicker { justify-content: center; }
.pg .ct-call h2 {
margin-top: 14px; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08;
font-weight: 800; letter-spacing: -0.03em; color: var(--ov-ink);
}
.pg .ct-call__sub {
margin: 16px auto 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: var(--ov-ink-2);
}
.pg .ct-call__cal {
margin: clamp(18px, 2vw, 24px) auto 0; max-width: 1100px;
}
.pg .ct-call__frame { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 560px) {
.pg .ct-call__frame { height: 900px; }
}
/* the contact hero picks up the features page's own glow */
.pg .ct-hero {
background:
radial-gradient(in oklab 62% 118% at 112% 58%, #d6ff82 0%, #a4e94f 16%, #3f8a34 40%, #163220 66%, rgba(17, 19, 18, 0) 88%),
var(--ov-dark);
}
@media (max-width: 899px) {
.pg .ct-hero {
background:
radial-gradient(in oklab 100% 38% at 56% 104%, #d6ff82 0%, #a4e94f 18%, #3f8a34 44%, #163220 70%, rgba(17, 19, 18, 0) 92%),
var(--ov-dark);
}
}
/* ---- the two contact cards keep one height and one radius --------------
The rail card is naturally shorter than the form; stretching the row and
anchoring the review at its foot makes them read as a matched pair, the
way the live page's do. */
.pg .frm__in:not(.frm__in--sales) { align-items: stretch; }
.pg .frm__in:not(.frm__in--sales) .frm__side--card {
display: flex; flex-direction: column; height: 100%;
}
.pg .frm__in:not(.frm__in--sales) .frm__quote--flat { margin-top: auto; padding-top: 22px; }
.pg .frm__in:not(.frm__in--sales) .frm { height: 100%; box-sizing: border-box; }
/* the review carries its own mark, the way a pulled quote does elsewhere
on the site — Phosphor's quotes glyph, set beside the words instead of
floating above them */
.pg .frm__quote--flat { display: flex; gap: 16px; align-items: flex-start; }
.pg .frm__quote__mark {
flex: none; display: grid; place-items: center; width: 34px; height: 34px;
margin-top: 2px; border-radius: 50%; background: var(--ov-bg); color: var(--ov-ink-3);
}
.pg .frm__quote__mark svg { width: 18px; height: 18px; }
.pg .frm__quote__body { min-width: 0; }
/* ========================================================================
CONTACT SALES — the live page's single card
========================================================================
accounteditor.com/contact-sales carries no separate hero: the kicker,
the headline, the lede, the stat strip, the three reasons and the quote
all sit in the one left-hand card, which stays in view (sticky) beside
the taller form as you scroll through it. */
.pg .frm__side--card { padding: clamp(22px, 2.8vw, 32px); }
.pg .frm__side-h {
margin-top: 12px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.04;
font-weight: 800; letter-spacing: -0.02em; color: var(--ov-ink);
}
.pg .frm__side-lede {
margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ov-ink-2);
}
.pg .frm__stats {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 0; padding: 14px 0;
border-radius: 14px; background: var(--ov-bg);
}
.pg .frm__stats > div { padding: 0 18px; border-left: 1px solid var(--ov-line); }
.pg .frm__stats > div:first-child { border-left: 0; }
.pg .frm__stats dt {
font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em;
line-height: 1; color: var(--ov-ink);
}
.pg .frm__stats dd { margin: 8px 0 0; font-size: 13px; line-height: 1.3; color: var(--ov-ink-3); }
.pg .frm__side--card .frm__rail { margin-top: clamp(18px, 2.2vw, 26px); }
@media (min-width: 900px) {
.pg .frm__side--sticky { position: sticky; top: 92px; align-self: start; }
}
@media (max-width: 380px) {
.pg .frm__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg .frm__stats > div { padding: 0 8px; }
}
/* ========================================================================
FEATURE DETAIL PAGES — the Omnisend feature-page pattern
========================================================================
omnisend.com/features/campaigns/: a centred intro band with a 3-card
grid, alternating two-column spotlight rows (picture one side, copy the
other), a full-bleed dark band with a divided icon row, and a plain
accordion FAQ. Same shape here, on the site's own ft-sec/ft-row system
already built for the features index — the three-card grid and the dark
cross-link row are the only new pieces. */
/* ---- the three-card grid ("What you get") ------------------------------ */
.pg .fd-trio {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
max-width: 1086px; margin: 0 auto;
}
@media (min-width: 760px) {
.pg .fd-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pg .fd-trio__card {
padding: clamp(26px, 3vw, 36px); border-radius: 24px;
background: #fff; border: 1px solid var(--ov-line);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.pg .fd-trio__card:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -32px rgba(17, 19, 18, 0.4); }
.pg .ft-sec--ground .fd-trio__card { background: var(--ov-panel); }
.pg .fd-trio__n {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
background: var(--ov-bg); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
color: var(--ov-ink-3);
}
.pg .fd-trio__card p {
margin-top: 16px; font-size: 16px; line-height: 1.5; font-weight: 500;
letter-spacing: -0.015em; color: var(--ov-ink);
}
/* ---- the dark, divided cross-link row ("Pair it with") ----------------- */
.pg .fd-links {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 760px) {
.pg .fd-links { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
}
.pg .fd-link {
display: block; padding: clamp(26px, 3vw, 36px) clamp(8px, 2vw, 22px);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 760px) {
.pg .fd-link { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.pg .fd-link:first-child { border-left: 0; }
}
.pg .fd-link__go {
display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.22); color: #fff;
transition: background 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg .fd-link__go svg { width: 14px; height: 14px; }
.pg .fd-link:hover .fd-link__go { background: var(--ov-lime); border-color: var(--ov-lime); color: var(--ov-ink); transform: rotate(45deg); }
.pg .fd-link h3 {
margin-top: 20px; font-size: clamp(18px, 1.6vw, 21px); font-weight: 700;
letter-spacing: -0.02em; line-height: 1.25; color: #fff;
}
.pg .fd-link p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }
/* ---- the plain FAQ, no aside, no chat bubbles --------------------------- */
.pg .fd-faq { max-width: 800px; margin: 0 auto; }
.pg .fd-faq .acc {
border-radius: 14px; background: #fff; border: 1px solid var(--ov-line);
box-shadow: none; overflow: hidden; margin-bottom: 10px;
}
.pg .fd-faq .acc:last-child { margin-bottom: 0; }
.pg .fd-faq .acc:hover { box-shadow: none; border-color: rgba(17, 19, 18, 0.22); }
.pg .fd-faq__more {
margin-top: clamp(24px, 2.8vw, 34px); text-align: center; font-size: 15px; color: var(--ov-ink-3);
}
.pg .fd-faq__more a { color: var(--ov-ink); text-decoration: underline; text-underline-offset: 3px; }
/* the root stylesheet's own .acc__label is white (built for a dark-only
context); every inner-page accordion needs its own colour regardless of
which specific list it sits in, so this is the catch-all instead of one
more scoped override per component. */
.pg .acc__label { color: var(--ov-ink); }
/* ---- feature-page FAQ, matching the homepage's o-faq split layout ------ */
.pg .o-faq__sub { margin-top: 10px; max-width: 250px; font-size: 14.5px; line-height: 1.55; color: var(--ov-ink-2); }
/* ---- how-it-works art: a tiny on-brand UI scene on a dark plate, not a
stock illustration — built from the same cream card, ink/lime chips and
pill buttons every mock on this site already uses ---------------------- */
.pg .pg-step__art {
display: grid; place-items: center; width: 100%; aspect-ratio: 800 / 582;
background:
radial-gradient(65% 85% at 50% 30%, rgba(184, 242, 74, 0.18), rgba(184, 242, 74, 0) 72%),
var(--ov-dark);
}
.pg .pg-step__scene {
width: 168px; padding: 18px; border-radius: 16px;
background: #faf9f6; color: var(--ov-ink);
box-shadow: 0 24px 46px -22px rgba(0, 0, 0, 0.55);
}
.pg .pg-step__dots { display: flex; gap: 5px; margin-bottom: 16px; }
.pg .pg-step__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 19, 18, 0.14); }
/* scene 1 — install: an app chip and a pill button, the way the hero mocks
pair an icon with a call to action */
.pg .pg-step__scene--install { display: grid; justify-items: center; gap: 14px; }
.pg .pg-step__bag {
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
background: var(--ov-ink); color: var(--ov-lime);
}
.pg .pg-step__bag svg { width: 21px; height: 21px; }
.pg .pg-step__btn {
padding: 8px 20px; border-radius: 999px; background: var(--ov-ink); color: #fff;
font-size: 12px; font-weight: 700; letter-spacing: -0.01em;
}
/* scene 2 — configure: three rule rows, each with its own toggle, the way
the live settings panel actually looks */
.pg .pg-step__toggles { display: grid; gap: 12px; }
.pg .pg-step__trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg .pg-step__tline { width: 58px; height: 6px; border-radius: 3px; background: rgba(17, 19, 18, 0.12); }
.pg .pg-step__tsw {
position: relative; flex: none; width: 30px; height: 16px; border-radius: 999px;
background: rgba(17, 19, 18, 0.14);
}
.pg .pg-step__tsw::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
border-radius: 50%; background: #fff; transition: transform 0.25s ease;
}
.pg .pg-step__tsw.is-on { background: var(--ov-lime); }
.pg .pg-step__tsw.is-on::after { transform: translateX(14px); background: var(--ov-ink); }
/* scene 3 — customers self-serve: the same "edit landed" confirmation the
hero mocks end on, at a smaller scale */
.pg .pg-step__st { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.pg .pg-step__ok {
display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 11px;
border-radius: 10px; background: rgba(184, 242, 74, 0.22); font-size: 12.5px; font-weight: 600;
}
.pg .pg-step__ok i {
display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
background: var(--ov-ink); color: var(--ov-lime);
}
.pg .pg-step__ok i svg { width: 10px; height: 10px; }
.pg .pg-step__btn2 {
display: block; margin-top: 12px; padding: 8px 0; border-radius: 999px; text-align: center;
background: var(--ov-lime); color: var(--ov-ink); font-size: 12px; font-weight: 700;
}