zelf blijft staan: de betekenis (dit is het punt
waarmee de rij opent) is niet veranderd, alleen de nadruk die we erop leggen. */
.ov-trust strong{font-weight:inherit}
/* Volle-breedte variant onder de hero-grid: alle punten op één regel. Geen hairline
erboven meer: de 68px lucht van .ov-trust scheidt al genoeg, en de streep maakte
van de balk een tweede sectie in plaats van een naregel bij de hero.
De 68px van .ov-trust gaat eraf: sinds de typechips ervóór staan, hoort die grote
sprong bij de chips en niet meer hier. En .ov-hero-home heeft padding-bottom:0, dus
de marge onder de balk moet van de balk zelf komen, anders eindigt de regel op de
grens met de zwarte sectie. */
.ov-trust-wide{margin-top:0;margin-bottom:30px;column-gap:30px}
/* Punt = icoon + tekst. Het icoon vervangt de pipe als scheidingsteken, dus de
ruimte tussen de punten is groter dan de ruimte binnen een punt — anders leest
het icoon bij het vorige woord. lime-ink en niet lime-deep: die laatste haalt
op crème maar ~1.7:1 en verdwijnt bij een 1.8-stroke. */
.ov-trust-wide span{display:inline-flex;align-items:center;gap:8px;color: var(--ov-ink-2);font-weight: 450;}
.ov-trust-wide .icon{width:16px;height:16px;flex:none;color:var(--ov-lime-ink)}
/* Typechips onder de hero-grid, boven de trust-balk. Wit op crème: de pil heeft aan
de crème-grond genoeg contrast om als object te lezen, dus de rand mag een hairline
blijven. Ze zijn statisch (geen links), dus geen hover-affordance en geen
cursor-pointer. De 60px erboven is de sprong die eerst bij .ov-trust hoorde.
Het blok draagt de marges, de groepen alleen hun onderlinge afstand — zo hoeft geen
enkele groep te weten of hij de eerste of de laatste is, en er valt niets te collapsen.
De 26px hier tegen 9px tussen een label en zijn eigen pillen: dat verschil is het
enige wat zegt welk label bij welke rij hoort. Staan ze even ver uit elkaar, dan
leest het blok weer als één lijst met twee losse kopjes erin — en dat was precies
wat de eerste poging deed, met 18px tegen een label dat zelf nog leading meebracht. */
.ov-hero-typeblock{margin:40px 0 30px;display:flex;flex-direction:column;gap:26px}
.ov-hero-types{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
/* Caption bóven zijn pillen, niet ernaast: flex-basis 100% breekt de regel af, zodat
het label een eigen regel krijgt binnen dezelfde wrap-container.
Als zijkolom had het label een vaste breedte nodig (136px) om de twee groepen op
dezelfde x te laten beginnen, en zelfs dán klopte het maar half: die kolom duwde
alleen de EERSTE regel van een groep in, dus zodra een groep over twee regels
wrapte begon de tweede links onder het label uit. Boven de rij is er niets meer
in te duwen — elke pil begint op dezelfde x, hoe vaak de groep ook wrapt, en het
label mag zelf zo lang worden als de taal vraagt. */
.ov-hero-types .lbl{
font-family:var(--ov-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ov-muted);flex:0 0 100%;margin:0 0 9px;
/* line-height:1 zodat de afstand onder het label écht die 9px is. Met de 1.55 van
de body zat er onzichtbare leading omheen, en dan werd de ruimte binnen een groep
bijna even groot als die tussen de groepen — precies het verschil waar de
groepering op leunt. */
line-height:1;
}
/* Kleiner en grijzer dan ze waren, maar wél wit: de pillen vroegen op hun oude maat
evenveel aandacht als de twee CTA's er pal boven, en dat is wat de hero rommelig
maakte. Een doorzichtige variant is geprobeerd en teruggedraaid — zonder het wit
houdt de pil te weinig vorm op de crème-grond om nog als pil te lezen. Vandaar de
sterkere hairline (--ov-line-2 in plaats van --ov-line): die is uit die ronde
overgebleven en mag blijven, hij tekent de vorm nu scherper. */
.ov-hero-type{
font-size:12.5px;line-height:1;padding:7px 12px;border-radius:999px;white-space:nowrap;
background:transparent;border:1px solid var(--ov-line-2);color:var(--ov-muted);background: #fff;
}
/* De "+ eigen types"-chip is een uitnodiging, geen voorbeeld: leeg vanbinnen en
gestippeld, zodat hij niet meetelt als tiende categorie. */
.ov-hero-type.more{background:transparent;border-style:dashed;color:var(--ov-muted)}
@media (max-width:540px){
/* De hele hero centreert hier, dus het label centreert mee. Het staat sinds de
caption-omzetting al op een eigen regel — hier hoeft alleen de uitlijning nog om,
en de 8px eronder mag krapper omdat de rijen op een telefoon toch al hoger zijn. */
.ov-hero-typeblock{margin-top:44px;gap:20px}
.ov-hero-types{justify-content:center;gap:6px}
.ov-hero-types .lbl{text-align:center;margin-bottom:4px}
/* Vijfentwintig pillen zijn op een telefoon een stuk of tien regels. Kleiner in
plaats van minder: de tail verbergen zou de woorden waar een bezoeker juist op
zoekt uit de mobiele versie halen, en die versie is wat Google indexeert. */
.ov-hero-type{font-size:12.5px;padding:6px 10px}
}
@media (max-width:540px){
.ov-hero-ctas{justify-content:center}
.ov-hero-ctas .ov-btn{flex:1 1 auto;justify-content:center}
.ov-trust{justify-content:center;column-gap:16px}
/* Op smalle schermen wrapt de balk; verberg de pipes zodat er niets bungelt. */
.ov-trust .pipe{display:none}
}
.ov-stars{color:var(--ov-ink);letter-spacing:1px}
/* Hero ledger mockup */
.ov-mock{
background:var(--ov-paper);
border-radius:var(--ov-radius-lg);
border:1px solid var(--ov-line);
box-shadow:0 1px 0 #ffffff80 inset, 0 30px 60px -30px rgba(14,15,17,.18), 0 8px 20px -10px rgba(14,15,17,.08);
padding:18px;transform:rotate(.5deg);position:relative;
}
.ov-mock::before{
content:"";position:absolute;inset:auto -18px -18px auto;
width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle, var(--ov-lime) 0%, transparent 65%);
opacity:.35;filter:blur(2px);z-index:-1;
}
.ov-mock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ov-mock-title{font-weight:600;font-size:14px}
.ov-mock-pill{font-size:11.5px;padding:4px 9px;border-radius:999px;background:#0e0f1108;color:var(--ov-ink-3)}
.ov-mock-search{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#0e0f1108;border-radius:12px;font-size:13px;color:#6B6860;margin-bottom:12px}
.ov-row{
display:grid;grid-template-columns:1.6fr 1fr 1fr 90px;
gap:12px;padding:12px 10px;align-items:center;
border-bottom:1px solid var(--ov-line);font-size:13.5px;
}
.ov-row:last-child{border-bottom:none}
@media (max-width:540px){
.ov-row{
grid-template-columns:1fr auto;
grid-template-areas:"name price" "owner tag";
row-gap:6px;
}
.ov-row .name {grid-area:name}
.ov-row .right{grid-area:price}
.ov-row .owner,
.ov-row .unowned{grid-area:owner;font-size:12.5px}
.ov-row > div:nth-child(3){grid-area:tag;justify-self:end}
}
.ov-row .name{display:flex;align-items:center;gap:10px;font-weight:500;min-width:0}
.ov-row .name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-av{
width:26px;height:26px;border-radius:50%;
background:linear-gradient(135deg,#cfe87a,#7ab37a);
display:grid;place-items:center;color:#0e0f11;font-weight:700;font-size:11px;flex-shrink:0;
}
.ov-av.b{background:linear-gradient(135deg,#f5b388,#e85b3b);color:#fff}
.ov-av.c{background:linear-gradient(135deg,#bdb6ff,#6d63d6);color:#fff}
.ov-av.d{background:linear-gradient(135deg,#0e0f11,var(--ov-ink-3));color:var(--ov-lime)}
.ov-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 9px;border-radius:999px;background:#0e0f1108;color:var(--ov-ink-3);font-weight:500}
.ov-tag.warn{background:rgba(232,91,59,.12);color:var(--ov-coral-ink)}
.ov-tag.warn .d2{background:#e85b3b}
.ov-tag .d2{width:6px;height:6px;border-radius:50%;background:#7ab37a}
.ov-row .owner{color:var(--ov-ink-3)}
.ov-row .unowned{color:var(--ov-coral-ink);font-weight:600}
.ov-row .right{text-align:right;font-variant-numeric:tabular-nums;color:var(--ov-ink-3)}
/* Hero mockup header — title + subtitle on the left, offboarding action chip on the right. */
.ov-mock-head{align-items:flex-start}
.ov-mock-subtitle{font-size:12px;color:var(--ov-muted);margin-top:2px}
.ov-mock-action{
display:inline-flex;align-items:center;gap:4px;
font-size:11.5px;font-weight:600;
padding:5px 10px;border-radius:999px;
background:var(--ov-lime);color:var(--ov-ink);
white-space:nowrap;flex:none;
text-decoration:none;cursor:default;
}
.ov-mock-action-arrow{font-weight:400}
/* Hero row icon — same lucide-style SVGs as the .ov-av slot, but muted and glyph-like.
Used in rows that don't carry an avatar, so categories are scannable without
six redundant LV avatars. */
.ov-row-icon{
width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;flex-shrink:0;
background:#0e0f1108;color:#6B6860;
}
.ov-row-icon svg{display:block}
/* Type + renewal columns. Plain text, no pill, no dot. */
.ov-row .type{color:var(--ov-ink-3);font-size:13px}
.ov-row .renews{color:var(--ov-muted);font-size:13px}
.ov-row .renews.warn{color:var(--ov-coral-ink);font-weight:600}
@media (max-width:540px){
.ov-mock-head{flex-wrap:wrap;gap:8px}
/* On mobile the row collapses to areas "name price / owner tag" — column 2
content (now Type) sits in `.type`, column 3 (Renews) in `.renews`. Map
both to the legacy grid-areas so the existing 2-row stack still works. */
.ov-row .type{grid-area:owner;font-size:12.5px}
.ov-row .renews{grid-area:tag;justify-self:end;font-size:12.5px}
}
/* Asset manager overview card (Wave 2). 4-column grid:
name (with avatar) | owner | status pill | price.
Pill column is sized to content (prevents "Renews 22d" from wrapping to
three lines when the card is narrow). Name + owner use minmax(0,Xfr) so
they can shrink and ellipsize before stealing space from the pill.
Scoped to .ov-mock-overview so it doesn't disturb the legacy rows. */
.ov-mock-overview .ov-row{
grid-template-columns:minmax(0,1.7fr) minmax(0,0.9fr) 100px 64px;
gap:8px;padding:10px 6px;
}
.ov-mock-overview .ov-row.risk{background:rgba(232,91,59,.06)}
.ov-mock-overview .ov-tag{white-space:nowrap}
.ov-mock-overview .name>span:last-child,
.ov-mock-overview .owner,
.ov-mock-overview .unowned{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.ov-type{
display:inline-block;font-size:11px;font-weight:500;
padding:2px 8px;border-radius:999px;
background:#0e0f110d;color:var(--ov-ink-3);
letter-spacing:.01em;
}
/* ============ HERO PRODUCT TOUR (zelf-morphende, paneelloze mock) ============
Vier-frame mini-producttour in de hero: Verbinden → Eigenaar → Herinnering →
Overdracht. Loopt automatisch door (geen interactie, geen stepper, geen paneel).
De blokken floaten los op de hero-achtergrond en morphen bij elke wissel in; de
eyebrow per frame benoemt de fase. Bewust groot om de kop links te balanceren.
Herbruikt .ov-av / .ov-tag. */
.ov-tour{position:relative}
/* Frames stacked in one grid cell so the height auto-sizes to the tallest frame
(no layout jump when switching). Hidden frames keep their box via visibility. */
.ov-tour-stage{display:grid}
/* Instant swap (no crossfade) so the floating rows never ghost over each other;
the morph is carried entirely by the staggered row-in animation below. */
.ov-tour-frame{grid-area:1/1;opacity:0;visibility:hidden}
.ov-tour-frame.is-active{opacity:1;visibility:visible;z-index:1}
.ov-tour-eyebrow{
display:flex;align-items:center;gap:9px;margin:2px 4px 18px;
font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ov-muted);
}
.ov-tour-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ov-lime-deep);box-shadow:0 0 0 3px rgba(166,208,59,.22)}
/* Morph: zodra een frame actief wordt, morphen de eyebrow en de rijen gestaggerd
in (fade + lichte lift/scale). Geen extra classes nodig — we targeten de rijen
in de vier lijst-containers. */
/* Zachter, subtieler: kleine lift zonder scale, langere zachte ease-out en een
krappere stagger, zodat de overgang tussen de frames vloeiend indruppelt i.p.v.
met een merkbare pop-in te schuiven. */
@keyframes ovMorphIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ov-tour-frame.is-active .ov-tour-eyebrow,
.ov-tour-frame.is-active :is(.ov-src-list,.ov-ownlist,.ov-remind,.ov-transfer) > *{
animation:ovMorphIn .68s cubic-bezier(.22,.61,.36,1) both;
}
.ov-tour-frame.is-active :is(.ov-src-list,.ov-ownlist,.ov-remind,.ov-transfer) > :nth-child(1){animation-delay:.04s}
.ov-tour-frame.is-active :is(.ov-src-list,.ov-ownlist,.ov-remind,.ov-transfer) > :nth-child(2){animation-delay:.10s}
.ov-tour-frame.is-active :is(.ov-src-list,.ov-ownlist,.ov-remind,.ov-transfer) > :nth-child(3){animation-delay:.16s}
.ov-tour-frame.is-active :is(.ov-src-list,.ov-ownlist,.ov-remind,.ov-transfer) > :nth-child(4){animation-delay:.22s}
.ov-tour-frame.is-active :is(.ov-src-list,.ov-ownlist,.ov-remind,.ov-transfer) > :nth-child(5){animation-delay:.28s}
/* Shared floating row shell. No panel behind them, so solid white cards with a
soft, deep shadow lift them off the hero background. Larger than a dense list. */
.ov-drop,.ov-ownrow,.ov-remind-row,.ov-transfer-head{
display:flex;align-items:center;gap:14px;
background:#fff;border:1px solid var(--ov-line);border-radius:16px;padding:15px 17px;
box-shadow:0 1px 2px rgba(14,15,17,.05), 0 16px 34px -20px rgba(14,15,17,.24);
}
.ov-src-list,.ov-ownlist,.ov-remind{display:flex;flex-direction:column;gap:12px}
/* --- Frame: Document (het extractiemoment) ---
Drie blokken die samen één beweging vertellen: het gesleepte bestand (streepjesrand,
want dat is het enige wat een dropzone universeel zegt), de velden die eruit kwamen,
en een strookje alternatieve startpunten. Het middelste blok hergebruikt .ov-doc-row
uit de PDF-sectie op de homepage, zodat de hero en die sectie letterlijk hetzelfde
ding laten zien i.p.v. twee tekeningen van hetzelfde idee. */
.ov-drop-ic,.ov-ownrow-ic,.ov-remind-ic{
width:40px;height:40px;border-radius:11px;flex:none;
display:flex;align-items:center;justify-content:center;
}
.ov-drop{border-style:dashed;border-color:rgba(14,15,17,.20);background:linear-gradient(180deg,rgba(166,208,59,.10),#fff 72%)}
.ov-drop-ic{background:#E7F5C4;color:var(--ov-lime-ink)}
.ov-src-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ov-src-txt .t{font-weight:600;font-size:15.5px;color:var(--ov-ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-src-txt .s{font-size:13px;color:var(--ov-muted)}
.ov-extract{
background:#fff;border:1px solid var(--ov-line);border-radius:16px;padding:15px 17px;
box-shadow:0 1px 2px rgba(14,15,17,.05), 0 16px 34px -20px rgba(14,15,17,.24);
}
.ov-extract-lbl{
display:block;font-family:var(--ov-mono);font-size:10.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--ov-muted);
}
.ov-extract .ov-doc-rows{margin-top:12px;gap:8px}
.ov-extract .ov-doc-row{padding:11px 13px;font-size:14.5px}
.ov-extract .ov-doc-row .k{min-width:7em}
/* Op smal scherm zakt .ov-doc-row .src normaal als volle balk onder de regel (goed in de
PDF-sectie, waar het de bron van elk veld apart moet markeren). In de hero geeft dat
drie dikke lime balken in een kaart van 320px, terwijl het label erboven al zegt dat
alles hier uit het document komt. Dus daar weg. */
@media (max-width:540px){.ov-extract .ov-doc-row .src{display:none}}
.ov-drop-alt{
display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
padding:2px 4px;font-size:13px;color:var(--ov-muted);
}
.ov-drop-alt .l{font-weight:600;color:var(--ov-ink-3)}
.ov-drop-alt span:not(.l){
padding:4px 10px;border-radius:999px;background:rgba(14,15,17,.05);color:var(--ov-ink-3);
}
/* --- Frame: Eigenaar --- */
/* De rij is intern een grid zodat de bron/status-pill en de eigenaar in vaste kolommen uitlijnen
over de vier losse kaarten heen (icoon | naam+aantal | pill | eigenaar). De kaarten blijven los
floaten en morphen ongewijzigd; alleen de binnenkant is nu verankerd i.p.v. een eigenaar die
rechts zweeft met een leeg gat ervoor. */
/* Het 4-koloms raster geldt alleen voor de hero-mock (.ov-ownlist--aligned), want alleen
daar bestaat de vierde kolom: de eigenaar. Stond eerst op .ov-ownrow zelf, waardoor elke
andere mock met dezelfde rij-anatomie kapot ging — de PDF-mock op /functies heeft twee
kinderen, dus het tekstblok belandde in de 40px-icoonkolom en het label werd "Su…". Zonder
de modifier valt de rij terug op de gedeelde flex-shell, die met 2, 3 of 4 kinderen werkt. */
.ov-ownlist--aligned .ov-ownrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto 104px;gap:14px}
.ov-ownrow.warn{border-color:rgba(232,91,59,.28);background:linear-gradient(180deg,rgba(232,91,59,.05),#fff 60%)}
/* Gekleurde leidende glyph i.p.v. dood grijs: lime-getint, warn-rij amber om het focuspunt te versterken. */
.ov-ownrow-ic{background:rgba(166,208,59,.20);color:var(--ov-ink)}
.ov-ownrow.warn .ov-ownrow-ic{background:rgba(232,91,59,.14);color:var(--ov-coral-ink)}
.ov-ownrow-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ov-ownrow-main .n{font-weight:600;font-size:15.5px;color:var(--ov-ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-ownrow-main .m{font-size:13px;color:var(--ov-muted)}
.ov-ownrow-tag{justify-self:end;margin-left:auto}
.ov-ownrow-owner{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ov-ink);white-space:nowrap}
/* --- Frame: Herinnering --- */
/* Zelfde rij-anatomie als de andere frames: gekleurde glyph | naam+meta | countdown-pill.
De eerstvolgende deadline krijgt de warn-tint als focuspunt, gelijk aan de eigenaar-rij. */
.ov-remind-ic{background:rgba(166,208,59,.20);color:var(--ov-ink)}
.ov-remind-row.warn{border-color:rgba(232,91,59,.28);background:linear-gradient(180deg,rgba(232,91,59,.05),#fff 60%)}
.ov-remind-row.warn .ov-remind-ic{background:rgba(232,91,59,.14);color:var(--ov-coral-ink)}
.ov-remind-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ov-remind-main .n{font-weight:600;font-size:15.5px;color:var(--ov-ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-remind-main .m{font-size:13px;color:var(--ov-muted)}
.ov-toast{
display:flex;align-items:flex-start;gap:13px;margin-top:6px;
background:var(--ov-ink);color:#fff;border-radius:16px;padding:16px 17px;
box-shadow:0 20px 40px -18px rgba(14,15,17,.5);
}
.ov-toast-ic{
width:40px;height:40px;border-radius:11px;flex:none;
background:rgba(200,242,92,.18);color:var(--ov-lime);
display:flex;align-items:center;justify-content:center;
}
.ov-toast-txt{display:flex;flex-direction:column;gap:4px}
.ov-toast-txt strong{font-size:15px;font-weight:700}
.ov-toast-txt span{font-size:13px;color:rgba(255,255,255,.72);line-height:1.45}
/* --- Frame: Overdracht --- */
.ov-transfer{display:flex;flex-direction:column;gap:12px}
.ov-transfer-htxt{display:flex;flex-direction:column;gap:2px;flex:1}
.ov-transfer-htxt strong{font-size:15.5px;font-weight:600;color:var(--ov-ink);letter-spacing:-.01em}
.ov-transfer-htxt span{font-size:13px;color:var(--ov-muted)}
.ov-transfer-flow{
display:flex;align-items:center;gap:13px;
background:linear-gradient(180deg,rgba(166,208,59,.14),#fff 72%);
border:1px solid var(--ov-line);border-radius:16px;padding:18px 17px;
}
.ov-transfer-arrow{color:var(--ov-lime-deep);font-size:22px;font-weight:700}
.ov-transfer-note{font-size:14.5px;font-weight:600;color:var(--ov-ink);margin-left:2px}
.ov-transfer-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ov-transfer-foot .m{font-size:13px;color:var(--ov-muted)}
/* ok-variant of the shared tag atom (used by the transfer "done" state) */
.ov-tag.ok{background:rgba(58,140,90,.14);color:var(--ov-success)}
.ov-tag.ok .d2{background:var(--ov-success)}
/* Mini "lijsten overdragen"-dialoog in de hero-mock: spiegelt de app-modal (kies lijsten →
nieuwe eigenaar → verzoek versturen). Groter en directer dan de oude PE→SA-flow, maar blijft
decoratief. Alleen hier gebruikt; de .ov-transfer-* atomen hierboven blijven voor Features. */
.ov-xfer-lists{
display:flex;flex-direction:column;gap:2px;
background:#fff;border:1px solid var(--ov-line);border-radius:16px;padding:7px;
box-shadow:0 1px 2px rgba(14,15,17,.05), 0 16px 34px -20px rgba(14,15,17,.24);
}
.ov-xfer-row{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:11px}
.ov-xfer-row.sel{background:rgba(166,208,59,.12)}
.ov-xfer-check{
width:20px;height:20px;border-radius:6px;flex:none;
border:1.5px solid var(--ov-line);background:#fff;color:transparent;
display:grid;place-items:center;
}
.ov-xfer-row.sel .ov-xfer-check{background:var(--ov-lime-deep);border-color:var(--ov-lime-deep);color:#fff}
.ov-xfer-ic{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;background:#0e0f1108;color:#6B6860}
.ov-xfer-name{font-weight:500;font-size:14.5px;color:var(--ov-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-xfer-ownerwrap{display:flex;flex-direction:column;gap:6px}
.ov-xfer-ownerlabel{font-size:12px;font-weight:600;color:var(--ov-muted);letter-spacing:.01em}
.ov-xfer-owner{
display:flex;align-items:center;gap:9px;
background:#fff;border:1px solid var(--ov-line);border-radius:13px;padding:11px 14px;
box-shadow:0 1px 2px rgba(14,15,17,.05);
}
.ov-xfer-owner .who{font-size:14px;font-weight:600;color:var(--ov-ink);white-space:nowrap}
.ov-xfer-owner .mail{font-size:13px;color:var(--ov-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-xfer-owner .chev{margin-left:auto;color:var(--ov-muted);display:flex;flex:none}
.ov-xfer-note{font-size:12.5px;color:var(--ov-muted);line-height:1.5;margin:0}
/* Reduced motion: houd het doorlopen, maar zonder de morph-lift — alleen tonen. */
@media (prefers-reduced-motion: reduce){
.ov-tour-frame.is-active .ov-tour-eyebrow,
.ov-tour-frame.is-active :is(.ov-src-list,.ov-ownlist,.ov-remind,.ov-transfer) > *{animation:none}
}
@media (max-width:540px){
/* Narrow screens fall back to the legacy "name price / owner tag" grid-areas. */
.ov-mock-overview .ov-row{grid-template-columns:1fr auto}
/* Eigenaar-frame: op smal scherm knijpt de 4-koloms rij (icoon|naam|pill|eigenaar)
de lijstnaam plat tot ~15px omdat de status-pill én de vaste 104px-eigenaarkolom
alle ruimte opeten. Verberg de secundaire status-pill en val terug op
icoon | naam | eigenaar, zodat de kernboodschap — elke lijst een eigenaar —
leesbaar blijft. De warn-tint + amber icoon dragen de urgentie, dus de pill
wordt niet gemist. */
.ov-ownlist--aligned .ov-ownrow{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}
.ov-ownlist--aligned .ov-ownrow .ov-ownrow-tag{display:none}
}
/* ============ STATS BAR ============ */
.ov-stats-bar{margin-top:56px;padding:28px 0;border-top:1px solid var(--ov-line);border-bottom:1px solid var(--ov-line)}
@media (max-width:760px){.ov-stats-bar{margin-top:36px}}
.ov-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:760px){.ov-stats-grid{grid-template-columns:repeat(1,1fr);gap:20px}}
.ov-stat .num{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1}
.ov-stat .num em{font-style:normal;color:var(--ov-lime-deep);margin-left:.07em}
.ov-stat .lbl-strong{margin-top:10px;font-size:15px;font-weight:600;color:var(--ov-ink)}
.ov-stat .lbl{margin-top:2px;font-size:13.5px;color:var(--ov-muted);line-height:1.4}
/* Shared attribution under all three stats — centred caption, breathing room above,
max-width so it reads as one balanced footnote rather than a full-bleed sentence.
Prefixed with .ov-page so the margin beats the .ov-page p { margin-top:0 } reset. */
.ov-page .ov-stats-source{
margin:32px auto 0;max-width:720px;
text-align:center;font-size:11.5px;line-height:1.55;
color:var(--ov-muted);font-style:italic;letter-spacing:.005em;
}
/* Inline footnote superscripts next to each stat — tiny, lime-accented,
scroll-link to the citation list below. Underline-free; the lime
color is the only affordance. */
.ov-stat-cite{
display:inline-block;margin-left:4px;
font-size:.42em;line-height:1;vertical-align:super;
color:var(--ov-lime-deep);text-decoration:none;font-weight:700;
}
.ov-stat-cite:hover{text-decoration:underline;text-underline-offset:2px}
.ov-page .ov-stats-sources{
margin:32px auto 0;max-width:720px;padding:0;
list-style:none;
display:flex;flex-direction:column;gap:8px;
font-size:11.5px;line-height:1.55;color:var(--ov-muted);
letter-spacing:.005em;
}
.ov-page .ov-stats-sources li{
text-align:left;padding-left:18px;text-indent:-18px;
}
.ov-page .ov-stats-sources li strong{
display:inline-block;width:14px;margin-right:4px;
color:var(--ov-lime-deep);font-weight:700;
}
.ov-page .ov-stats-sources li:target{
/* gentle highlight when the user clicks the footnote */
background:color-mix(in srgb, var(--ov-lime) 22%, transparent);
border-radius:6px;padding:6px 10px 6px 18px;text-indent:-18px;
}
/* Category-defining sentence under the hero subhead — small, italic-accented, owns the "Responsibility Ledger" frame */
.ov-hero-category{margin-top:18px;max-width:560px;font-size:16px;color:var(--ov-muted);line-height:1.55;letter-spacing:.005em}
.ov-hero-category em{font-style:normal;font-weight:600;color:var(--ov-ink)}
/* Outcome chip in testimonial cards — leads with the result, not generic stars */
.ov-tcard .ov-outcome{
display:inline-block;
background:var(--ov-lime);color:var(--ov-ink);
padding:6px 12px;border-radius:999px;
font-size:12.5px;font-weight:700;letter-spacing:.005em;
border:1px solid var(--ov-lime-deep);
margin-bottom:14px;
}
/* ============ PROBLEMS ============ */
.ov-problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:600px){.ov-problem-grid{grid-template-columns:1fr}}
/* 3-column variant for About / Solution* pages with responsive collapse to 1 col. */
.ov-problem-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.ov-problem-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ov-problem-grid.cols-3{grid-template-columns:1fr}}
.ov-problem-card{
background:var(--ov-paper);border:1px solid var(--ov-line);
border-radius:var(--ov-radius);padding:28px;
display:flex;gap:20px;align-items:flex-start;
transition:transform .2s, box-shadow .2s;
}
.ov-problem-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(14,15,17,.15)}
.ov-problem-card .ic{
width:56px;height:56px;border-radius:14px;background:var(--ov-ink);color:var(--ov-lime);
display:grid;place-items:center;flex-shrink:0;
}
.ov-problem-card h3{font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.ov-problem-card p{color:var(--ov-ink-3);font-size:14.5px;line-height:1.55}
/* ============ DARK SECTION (pain) ============ */
.ov-dark{background:var(--ov-ink);color:var(--ov-cream)}
.ov-dark .ov-label{color:var(--ov-faint-on-dark)}
.ov-dark .ov-label::before{background:var(--ov-lime)}
.ov-dark h2,.ov-dark h3{color:var(--ov-cream)}
.ov-dark .ov-lede{color:var(--ov-muted-on-dark)}
/* Op inkt haalt lime-tekst ruim voldoende contrast; daar draagt de heldere
lime als letterkleur het accent. */
.ov-dark .ov-h2 em,.ov-dark .ov-display em,
.ov-dark .ov-h2 .ov-hero-accent,.ov-dark .ov-display .ov-hero-accent{color:var(--ov-lime)}
/* Light type on a dark ground reads optically lighter and needs more room to
breathe. Bump the leading rather than the size. */
.ov-dark .ov-lede{line-height:1.58}
/* ============ RULED COLUMNS ============
A card-free way to carry three or four short parallel points. Exists because
the middle of the homepage ran four consecutive card grids (taken, hoe het
werkt, functies, use-cases), which read as one long undifferentiated stretch
no matter what the ground colour was. This is the quietest of the four: no
fill, no border box, no lift, just hairlines doing the separating. It belongs
in --minor sections, where a heavy card would overstate the content. */
.ov-ruled-cols{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--ov-line-2);
}
.ov-ruled-cols.cols-4{grid-template-columns:repeat(4,1fr)}
.ov-ruled-col{padding:30px 36px 6px 0;display:flex;flex-direction:column;gap:10px}
.ov-ruled-col + .ov-ruled-col{border-left:1px solid var(--ov-line);padding-left:36px}
/* Without this, a heading that wraps to two lines pushes only its own body copy
down and the paragraphs start at three different heights. Subgrid puts every
heading in one row and every paragraph in the next. Flex above is the fallback
for browsers that lack subgrid; the layout is merely ragged there, not broken. */
@supports (grid-template-rows: subgrid){
.ov-ruled-cols{grid-template-rows:auto auto}
.ov-ruled-col{display:grid;grid-template-rows:subgrid;grid-row:span 2}
@media (max-width:820px){
.ov-ruled-cols{grid-template-rows:none}
.ov-ruled-col{display:flex;grid-row:auto}
}
}
.ov-ruled-col h3{
font-family:var(--ov-display);font-size:var(--ov-fs-h4);font-weight:650;
letter-spacing:-.015em;line-height:1.2;color:var(--ov-ink);margin:0;
}
.ov-ruled-col p{font-size:15px;color:var(--ov-ink-3);line-height:1.6;margin:0}
/* Stacked: the vertical rule becomes the horizontal one, so the separation
survives instead of disappearing on phones. */
@media (max-width:820px){
.ov-ruled-cols,.ov-ruled-cols.cols-4{grid-template-columns:1fr}
.ov-ruled-col{padding:24px 0 24px}
.ov-ruled-col + .ov-ruled-col{border-left:0;border-top:1px solid var(--ov-line);padding-left:0}
}
.ov-dark .ov-ruled-cols{border-top-color:#ffffff2b}
.ov-dark .ov-ruled-col + .ov-ruled-col{border-left-color:#ffffff14}
.ov-dark .ov-ruled-col h3{color:var(--ov-cream)}
.ov-dark .ov-ruled-col p{color:var(--ov-muted-on-dark)}
/* NB: "hoe het werkt" is deliberately NOT an ink beat. Its four steps run the
16s ov-step-cycle, which lifts each card to full lime in turn. On cream that
reads as a soft highlight; on ink it would strobe near-black to bright lime
on a loop, which is both ugly and a flashing-content risk. If that section
ever needs a dark ground, kill the cycle there first. --ov-step-bg is already
token-indirected so the resting colour can follow. */
.ov-pain-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0 56px}
@media (max-width:760px){.ov-pain-stats{grid-template-columns:1fr}}
.ov-pain-stat{text-align:left;padding:24px;border:1px solid #ffffff14;border-radius:var(--ov-radius);background:rgba(255,255,255,.02)}
.ov-pain-stat .num{font-size:clamp(38px,4.4vw,56px);font-weight:700;color:var(--ov-lime);line-height:1;letter-spacing:-.03em}
.ov-pain-stat .t{margin-top:14px;font-size:16px;font-weight:600;color:var(--ov-cream)}
.ov-pain-stat .d{margin-top:6px;font-size:14px;color:var(--ov-muted-on-dark);line-height:1.5}
.ov-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.ov-pain-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.ov-pain-grid{grid-template-columns:1fr}}
.ov-pain-card{
background:transparent;border:1px solid rgba(241,237,226,.16);border-radius:var(--ov-radius);
padding:28px;display:flex;flex-direction:column;gap:10px;
}
.ov-pain-card :is(h3,h5){font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ov-cream)}
.ov-pain-card p{font-size:15.5px;line-height:1.55;color:var(--ov-muted-on-dark)}
.ov-pain-card .result{margin-top:auto;padding-top:14px;border-top:1px solid #ffffff14;font-size:13px;color:var(--ov-faint-on-dark)}
.ov-pain-card .result strong{color:#e8c074;font-weight:600;margin-right:6px}
/* ============ STORY SCENE (Lisa) ============ */
/* Bewust ander ritme dan de genummerde kaart-grids: een concrete scène als split
zonder/met OwndUp. "Zonder" is gedempt cream met koraal-accenten (de pijn),
"met" is inkt-zwart met lime (de oplossing). */
.ov-story-moment{
text-align:center;font-style:italic;
font-size:clamp(24px,3.4vw,25px);line-height:1.1;color:var(--ov-ink);
letter-spacing:-.02em;margin:4px 0 40px;
}
.ov-story-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.ov-story-split{grid-template-columns:1fr}}
.ov-story-col{
border-radius:var(--ov-radius);padding:32px 30px;
display:flex;flex-direction:column;gap:18px;
}
.ov-story-col .tag{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.ov-story-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ov-story-col li{position:relative;padding-left:24px;font-size:15px;line-height:1.55}
.ov-story-col li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%}
.ov-story-col .outcome{margin-top:auto;padding-top:18px;border-top:1px solid;font-weight:600;font-size:15.5px;margin-bottom:0}
.ov-story-col.without{background:var(--ov-cream-2)}
.ov-story-col.without .tag{color:var(--ov-ink)}
.ov-story-col.without li{color:#5a564e}
.ov-story-col.without li::before{background:var(--ov-ink)}
.ov-story-col.without .outcome{border-top-color:var(--ov-line-2);color:var(--ov-ink)}
.ov-story-col.with{background:var(--ov-ink)}
.ov-story-col.with .tag{color:var(--ov-lime)}
.ov-story-col.with li{color:var(--ov-text-on-dark)}
.ov-story-col.with li::before{background:var(--ov-lime)}
.ov-story-col.with .outcome{border-top-color:#ffffff20;color:var(--ov-cream)}
/* Breedte-laag onder de Lisa-split: drie kortere, herkenbare momenten. Andere kaartvorm
(icoon + scène + oplossing) dan de genummerde grids, zodat het één verhaaleenheid blijft. */
.ov-story-more{margin-top:56px}
.ov-story-more-head{
text-align:center;font-family:'Instrument Serif',serif;font-style:italic;
font-size:clamp(21px,2.6vw,30px);line-height:1.2;color:var(--ov-ink);
letter-spacing:-.01em;margin:0 0 26px;
}
.ov-story-vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.ov-story-vignettes{grid-template-columns:1fr}}
.ov-story-vignette{
background:var(--ov-paper);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
padding:26px;display:flex;flex-direction:column;gap:12px;
}
.ov-story-vignette .ic{width:40px;height:40px;border-radius:11px;background:var(--ov-ink);color:var(--ov-lime);display:grid;place-items:center}
.ov-story-vignette h4{font-size:17px;font-weight:600;color:var(--ov-ink);margin:6px 0 0;letter-spacing:-.01em}
.ov-story-vignette p{font-size:14.5px;color:var(--ov-ink-3);line-height:1.55;margin:0}
.ov-story-vignette .fix{
margin-top:auto;padding-top:14px;border-top:1px solid var(--ov-line);
font-size:14px;color:var(--ov-ink-3);line-height:1.5;
}
.ov-story-vignette .fix strong{color:var(--ov-lime-deep);font-weight:600;margin-right:5px}
/* ============ HOW IT WORKS ============ */
.ov-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.ov-how-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.ov-how-grid{grid-template-columns:1fr}}
.ov-step{
background:var(--ov-step-bg);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
padding:20px;min-height:240px;display:flex;flex-direction:column;
}
.ov-step .n{font-family:var(--ov-display);font-style:normal;font-size:44px;line-height:1;color:var(--ov-ink);font-weight:800;letter-spacing:-.02em}
.ov-step .n::before{content:"0"}
.ov-step h3{margin:18px 0 8px;font-size:20px;letter-spacing:-.01em}
.ov-step p{margin:0;color:var(--ov-ink-3);font-size:14.5px;line-height:1.55}
.ov-step.accent{background:var(--ov-lime)}
/* Cycling highlight across the 4 "How it works" steps — feels alive without being noisy.
16s cycle: each step is lit for ~3s with a soft fade. Disabled under prefers-reduced-motion (handled by the global rule at the bottom of this file). */
@keyframes ov-step-cycle{
0%{background-color:var(--ov-step-bg)}
4%,18%{background-color:var(--ov-lime)}
25%,100%{background-color:var(--ov-step-bg)}
}
.ov-how-grid-cycle .ov-step{animation:ov-step-cycle 16s ease-in-out infinite}
.ov-how-grid-cycle .ov-step:nth-child(1){animation-delay:0s}
.ov-how-grid-cycle .ov-step:nth-child(2){animation-delay:-12s}
.ov-how-grid-cycle .ov-step:nth-child(3){animation-delay:-8s}
.ov-how-grid-cycle .ov-step:nth-child(4){animation-delay:-4s}
/* ============ PLATFORM / "WHAT YOU GET" — light paper theme ============ */
.ov-features{background:var(--ov-paper);border-top:1px solid var(--ov-line);border-bottom:1px solid var(--ov-line)}
.ov-platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ov-line);border:1px solid var(--ov-line);border-radius:var(--ov-radius-lg);overflow:hidden}
@media (max-width:880px){.ov-platform-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ov-platform-grid{grid-template-columns:1fr}}
/* Four peer integrations: 4-across on desktop, 2x2 on tablet, stacked on phone. Scoped so the
shared 3-col grid used on other pages is untouched. */
.ov-platform-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.ov-platform-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ov-platform-grid.cols-4{grid-template-columns:1fr}}
/* Five peer capabilities (integraties + PDF-inlezen): 5-across on desktop, 2-wide on tablet,
stacked on phone. Same scoping trick as cols-4 so other 3-col grids stay untouched. */
.ov-platform-grid.cols-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.ov-platform-grid.cols-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.ov-platform-grid.cols-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ov-platform-grid.cols-5{grid-template-columns:1fr}}
.ov-platform-card{
background:var(--ov-paper);padding:36px 28px;position:relative;
display:flex;flex-direction:column;gap:14px;min-height:240px;color:var(--ov-ink);
}
.ov-platform-card .ic{width:42px;height:42px;border-radius:12px;background:var(--ov-ink);color:var(--ov-lime);display:grid;place-items:center}
.ov-platform-card :is(h3,h4){font-size:19px;font-weight:600;color:var(--ov-ink);margin:6px 0 0;letter-spacing:-.01em}
.ov-platform-card p{font-size:14.5px;color:var(--ov-ink-3);line-height:1.55}
.ov-platform-card .feat-tag{
margin-top:auto;font-size:12px;color:var(--ov-muted);
text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
/* Hub cards (/industries, /roles): the whole card is the link, so it needs the anchor reset the
div-based platform cards never needed. The card title is an h2 because the hub's only other
heading is the h1, so these are its top-level sections. */
.ov-hub-card{text-decoration:none;min-height:200px;transition:background .18s ease}
.ov-hub-card h2{font-size:19px;font-weight:600;color:var(--ov-ink);margin:0;letter-spacing:-.01em}
.ov-hub-card:hover{background:var(--ov-paper-2,#f6f6f1)}
.ov-hub-card:hover .feat-tag{color:var(--ov-ink)}
.ov-hub-card:focus-visible{outline:2px solid var(--ov-ink);outline-offset:-3px}
.ov-badge-growth{
position:absolute;top:18px;right:18px;
font-size:10.5px;background:var(--ov-lime);color:var(--ov-ink);
padding:3px 9px;border-radius:999px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
}
/* ============ TRUST GRID ============ */
.ov-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:880px){.ov-trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ov-trust-grid{grid-template-columns:1fr}}
.ov-trust-card{
background:var(--ov-paper);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
padding:24px;display:flex;flex-direction:column;gap:10px;
}
.ov-trust-card .ic{width:38px;height:38px;border-radius:10px;background:var(--ov-lime);color:var(--ov-ink);display:grid;place-items:center}
.ov-trust-card h3{font-size:16px;font-weight:600;color:var(--ov-ink);margin-top:6px}
.ov-trust-card p{font-size:13.5px;color:var(--ov-muted);line-height:1.5}
/* ============ BUILT-BY ============ */
.ov-builtby{ padding: 24px 0 96px 0}
.ov-builtby .ov-label{color:var(--ov-lime-deep)}
.ov-builtby .ov-label::before{background:var(--ov-lime-deep)}
.ov-builtby h2{max-width:760px}
.ov-builtby .ov-section-head .ov-lede{color:var(--ov-ink-3);max-width:640px;font-size:17px;line-height:1.6}
.ov-builtby-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:880px){.ov-builtby-grid{grid-template-columns:1fr}}
/* Vijf use-case-kaarten: bewuste 3+2-compositie i.p.v. een weesgat rechtsonder.
Zes-koloms grid; rij één drie kaarten van 2 sporen, rij twee twee bredere van 3. */
.ov-builtby-grid:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
.ov-builtby-grid:has(> :nth-child(5):last-child) > *{grid-column:span 2}
.ov-builtby-grid:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
@media (max-width:880px){
.ov-builtby-grid:has(> :nth-child(5):last-child){grid-template-columns:1fr}
.ov-builtby-grid:has(> :nth-child(5):last-child) > *,
.ov-builtby-grid:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:auto}
}
/* 4-up grid for the "Meer dan reminders" continuity cards. Own class (not the shared
.ov-builtby-grid used by the use-case cards) so this section can be four columns without
affecting the others. Reuses .ov-builtby-card styling. */
.ov-continuity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1080px){.ov-continuity-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ov-continuity-grid{grid-template-columns:1fr}}
/* 3-up variant for sections with exactly three continuity cards (e.g. Taken): each
card is a full third instead of sitting in a 4-column grid with an empty 4th slot.
Higher specificity (.ov-continuity-grid.cols-3) so it wins over the base 4/2-col rules
at every width; own breakpoint collapses straight to one column (no orphan card). */
.ov-continuity-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.ov-continuity-grid.cols-3{grid-template-columns:1fr}}
.ov-builtby-card{
background:var(--ov-paper);border:1px solid var(--ov-line);
border-radius:var(--ov-radius);padding:30px 28px;
display:flex;flex-direction:column;gap:14px;
transition:transform .2s, box-shadow .2s;
}
/* Only the clickable ones lift. An informative card that rises under the cursor
claims an affordance it does not have; same rule the app system already ships
("don't give a non-interactive block interactive affordances"). */
a.ov-builtby-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(14,15,17,.15)}
/* Klikbare kaarten (de use-cases zijn links) krijgen een echte affordance:
inkt-rand + nummer kleurt mee. Informatieve kaarten houden alleen de lift. */
a.ov-builtby-card{transition:transform .2s, box-shadow .2s, border-color .2s}
a.ov-builtby-card:hover{border-color:var(--ov-ink)}
a.ov-builtby-card:hover .n{color:var(--ov-ink)}
a.ov-builtby-card:focus-visible{outline:2px solid var(--ov-ink);outline-offset:3px}
.ov-builtby-card .n{
font-family:var(--ov-display);font-style:normal;font-weight:800;
font-size:28px;line-height:1;color:var(--ov-lime-ink);letter-spacing:-.02em;
transition:color .2s;
}
/* Use-case cards lead with a category icon (contracts, subscriptions, certificates,
domains, teams, recurring) instead of a decorative ordinal — a number would imply a
sequence these parallel categories don't have. Same ink-tile / lime-glyph language as
the feature and problem cards. */
.ov-builtby-card .ic{
width:42px;height:42px;border-radius:12px;flex:none;
background:var(--ov-ink);color:var(--ov-lime);
display:grid;place-items:center;
}
.ov-builtby-card h3{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ov-ink);margin:0}
.ov-builtby-card p{font-size:14.5px;color:var(--ov-ink-3);line-height:1.55;margin:0}
/* ============ COMPARE — single comparison table ============ */
.ov-compare-table{
margin-top:32px;border:1px solid var(--ov-line);border-radius:var(--ov-radius-lg);
overflow:hidden;background:var(--ov-paper);
}
.ov-compare-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:stretch}
.ov-compare-row > div{padding:20px 22px;border-bottom:1px solid var(--ov-line);font-size:14.5px;display:flex;align-items:center}
.ov-compare-row.head > div{
background:#0e0f1108;font-weight:600;font-size:13px;
text-transform:uppercase;letter-spacing:.08em;color:var(--ov-muted);
}
.ov-compare-row.head .own{background:var(--ov-ink);color:var(--ov-lime)}
.ov-compare-row .own{
background:#fcfaf2;
box-shadow:inset 1px 0 0 var(--ov-line), inset -1px 0 0 var(--ov-line);
font-weight:600;
}
.ov-compare-row:last-child > div{border-bottom:none}
.ov-compare-row .yes{color:var(--ov-success);font-weight:600}
.ov-compare-row .no{color:var(--ov-coral-ink);font-weight:500}
.ov-compare-row .meh{color:var(--ov-muted)}
@media (max-width:780px){
.ov-compare-row{grid-template-columns:1fr 1fr 1fr}
.ov-compare-row > div:first-child{
grid-column:1/4;background:#0e0f1108;font-weight:600;
text-transform:none;letter-spacing:0;color:var(--ov-ink);font-size:13px;
padding:12px 18px;
}
.ov-compare-row.head > div:first-child{display:none}
.ov-compare-row.head > div{font-size:11.5px;padding:14px 12px}
.ov-compare-row > div{padding:14px 12px;font-size:13.5px}
}
.ov-compare-link{display:inline-flex;align-items:center;gap:8px;margin-top:32px;font-weight:600;color:var(--ov-ink);font-size:14.5px;border-bottom:1px solid var(--ov-line-2);padding-bottom:2px}
.ov-compare-link:hover{border-color:var(--ov-ink)}
/* 3-column comparison variant (label + 2 columns, no third product column) */
.ov-compare-3 .ov-compare-row{grid-template-columns:1.6fr 1fr 1fr}
@media (max-width:780px){
.ov-compare-3 .ov-compare-row{grid-template-columns:1fr 1fr}
.ov-compare-3 .ov-compare-row > div:first-child{grid-column:1/3}
}
/* ============ PRICING — teamleden-rekenhulp + volumestaffel ============ */
.pm-total{margin-top:6px;font-size:13px;color:var(--ov-muted)}
.pm-total .pm-sum{font-weight:700;color:var(--ov-ink)}
.pm-calc{margin-top:22px;background:var(--ov-paper);border:1px solid var(--ov-line);border-radius:14px;padding:16px 18px}
.pm-calc-head{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;color:var(--ov-ink)}
.pm-calc-head label{font-weight:600}
.pm-calc-head strong{font-size:22px;font-weight:700;letter-spacing:-.02em}
.pm-calc input[type=range]{width:100%;margin:12px 0 6px;accent-color:var(--ov-lime-deep);cursor:pointer}
.pm-calc-foot{font-size:12.5px;color:var(--ov-muted)}
.pm-calc-foot a{color:var(--ov-ink);text-decoration:underline}
.pm-tiers-table{
margin-top:40px;max-width:760px;margin-left:auto;margin-right:auto;
border:1px solid var(--ov-line);border-radius:var(--ov-radius-lg);overflow:hidden;background:var(--ov-paper);
}
.pm-tiers-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr}
.pm-tiers-row > div{padding:13px 18px;border-bottom:1px solid var(--ov-line);font-size:14px;color:var(--ov-ink)}
.pm-tiers-row > div:first-child{color:var(--ov-muted)}
.pm-tiers-row.head > div{background:#0e0f1108;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ov-muted)}
.pm-tiers-row:last-child > div{border-bottom:none}
@media (max-width:560px){
.pm-tiers-row > div{padding:10px 12px;font-size:12.5px}
.pm-tiers-row.head > div{font-size:10.5px}
}
/* ============ FAQ ============ */
/* Editorial split layout — section head sits sticky on the left, the FAQ list
takes the right column. Mirrors the 1+content rhythm we use elsewhere and
anchors the head while readers scroll long Q/A copy. */
.ov-faq-grid{
display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start;
}
.ov-faq-grid > .ov-section-head{
margin-bottom:0;max-width:none;
position:sticky;top:88px;
}
.ov-faq-grid > .ov-section-head .ov-lede{max-width:380px}
@media (max-width:880px){
.ov-faq-grid{grid-template-columns:1fr;gap:36px}
.ov-faq-grid > .ov-section-head{position:static;margin-bottom:0}
}
.ov-faq-list{border-top:1px solid var(--ov-line)}
.ov-faq-item{border-bottom:1px solid var(--ov-line)}
.ov-faq-q{
width:100%;background:transparent;border:0;padding:22px 0;
display:flex;align-items:center;justify-content:space-between;gap:24px;
font-family:inherit;font-size:18px;font-weight:600;letter-spacing:-.01em;
color:var(--ov-ink);cursor:pointer;text-align:left;
transition:color .15s;
}
.ov-faq-q:hover{color:#000}
.ov-faq-q .pm{
width:32px;height:32px;border-radius:50%;border:1px solid var(--ov-line-2);
display:grid;place-items:center;font-size:18px;font-weight:400;flex-shrink:0;
transition:transform .2s, background .2s, border-color .2s;
}
.ov-faq-q:hover .pm{background:#0e0f1108;border-color:var(--ov-line-2)}
.ov-faq-item.open .ov-faq-q .pm{transform:rotate(45deg);background:var(--ov-lime);border-color:var(--ov-lime)}
.ov-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--ov-ink-3);font-size:15.5px;line-height:1.6}
.ov-faq-a > div{padding:0 0 22px;max-width:680px}
.ov-faq-item.open .ov-faq-a{max-height:1200px}
.ov-faq-still{
margin-top:32px;padding:22px 26px;border-radius:var(--ov-radius);
background:var(--ov-cream-2);
display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:center;
}
.ov-faq-still .text{min-width:0}
.ov-faq-still .lead{margin:0 0 4px;font-weight:600;color:var(--ov-ink);font-size:16.5px}
.ov-faq-still p:not(.lead){margin:0;color:var(--ov-ink-3);font-size:14.5px;line-height:1.5}
.ov-faq-still .ov-btn{justify-self:end;white-space:nowrap}
@media (max-width:540px){
.ov-faq-still{grid-template-columns:1fr;row-gap:14px}
.ov-faq-still .ov-btn{justify-self:start}
}
/* ============ PRICING ============ */
/* Head-on-top + 3-col tiers grid. The .ov-pricing-grid wrapper is flattened
to a vertical stack; the .ov-pricing-side becomes a section head row with
the toggle pinned to the right. */
.ov-pricing-grid{display:block}
.ov-pricing-side{
display:grid;grid-template-columns:1fr auto;column-gap:32px;row-gap:0;
align-items:end;margin-bottom:40px;
}
/* Every text child sits in the left column. Using > * (not an explicit list)
keeps the layout robust: a stray child (e.g. the extra disclaimer on
/prijzen) would otherwise auto-place into column 2 and blow the `auto` track
out to its full-sentence max-content, collapsing the 1fr text column. */
.ov-pricing-side > *{grid-column:1}
.ov-pricing-side > .ov-toggle{grid-column:2;grid-row:1/4;align-self:end;justify-self:end;margin-top:0}
.ov-pricing-side .note{
margin-top:18px;padding:14px 16px;max-width:560px;
border:1px solid var(--ov-line-2);border-radius:14px;background:var(--ov-paper);
}
.ov-pricing-side .note p{margin:0;font-size:13.5px;color:var(--ov-muted);line-height:1.5}
.ov-pricing-side .note strong{color:var(--ov-ink);display:block;margin-bottom:4px;font-size:14px}
@media (max-width:780px){
.ov-pricing-side{grid-template-columns:1fr;column-gap:0}
.ov-pricing-side > .ov-toggle{grid-column:1;grid-row:auto;justify-self:start;margin-top:18px}
}
.ov-toggle{display:inline-flex;align-items:center;flex-wrap:wrap;gap:12px;padding:6px;border:1px solid var(--ov-line-2);border-radius:999px;background:var(--ov-paper)}
.ov-toggle button{
background:transparent;border:0;padding:8px 16px;font-family:inherit;font-size:13.5px;font-weight:600;
color:var(--ov-muted);border-radius:999px;cursor:pointer;
}
.ov-toggle button.active{background:var(--ov-ink);color:var(--ov-cream)}
.ov-save-badge{display:inline-flex;align-items:center;background:var(--ov-lime);color:var(--ov-ink);font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;margin-left:6px;letter-spacing:.04em;text-transform:uppercase}
.ov-tiers{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;
}
.ov-tier{
background:var(--ov-paper);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
padding:32px 28px;display:flex;flex-direction:column;gap:24px;
}
.ov-tier > div:first-child{display:flex;flex-direction:column;gap:14px}
.ov-tier .name{font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--ov-muted);font-weight:600}
.ov-tier .price{font-size:44px;font-weight:700;letter-spacing:-.025em;line-height:1;display:flex;align-items:baseline;margin:0}
/* The -.025em tracking on .price is meant for the 44px numeral. It was being
inherited by the 14.5px unit, where -1.1px closes "per maand" up into
"permaand". Reset it back to normal for the unit. */
.ov-tier .price .unit{font-size:14.5px;font-weight:400;color:var(--ov-muted);margin-left:6px;letter-spacing:normal}
.ov-tier .desc{margin:0;font-size:14.5px;color:var(--ov-ink-3);line-height:1.5}
.ov-tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ov-ink-3);flex:1 1 auto}
.ov-tier li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.ov-tier li svg{color:var(--ov-success);flex-shrink:0;margin-top:2px}
.ov-tier.featured{background:var(--ov-ink);color:var(--ov-cream);border-color:transparent;box-shadow:0 0 0 2px var(--ov-lime),0 28px 50px -28px rgba(14,15,17,.35);position:relative}
/* Localised popular badge — rendered as a real DOM element so the text can be translated */
.ov-tier-badge{
position:absolute;top:-13px;right:24px;
background:var(--ov-lime);color:var(--ov-ink);font-size:11px;font-weight:700;
padding:5px 12px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;
white-space:nowrap;
}
.ov-tier.featured .name{color:var(--ov-lime)}
.ov-tier.featured .price{color:var(--ov-cream)}
.ov-tier.featured .price .unit{color:var(--ov-muted-on-dark)}
.ov-tier.featured .desc,.ov-tier.featured ul{color:var(--ov-text-on-dark)}
.ov-tier.featured li svg{color:var(--ov-lime)}
.ov-tier.featured .pm-total{color:var(--ov-text-on-dark)}
.ov-tier.featured .pm-total .pm-sum{color:var(--ov-cream)}
/* 2-up tier layout (Solo + Team), used on the homepage and the pricing page.
Defined as a class — not an inline style — so the mobile collapse below can
actually override it (inline styles beat media queries). Width/centring is
left to each page so the homepage can stay full-bleed while /prijzen caps. */
.ov-tiers.ov-tiers-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){
.ov-tiers{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}
@media (max-width:820px){
.ov-tiers.ov-tiers-2{grid-template-columns:1fr}
}
@media (max-width:480px){
.ov-tier{padding:24px 20px;gap:18px}
.ov-tier .price{font-size:38px}
}
/* ============ CTA ============ */
.ov-cta-block{
background:var(--ov-ink);color:var(--ov-cream);
border-radius:var(--ov-radius-lg);padding:80px 56px;
display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;
position:relative;overflow:hidden;margin-bottom:80px;
}
.ov-cta-block::before{
content:"";position:absolute;inset:auto -100px -150px auto;
width:400px;height:400px;border-radius:50%;
background:radial-gradient(circle, var(--ov-lime) 0%, transparent 60%);
opacity:.18;pointer-events:none;
}
.ov-cta-block h2{color:var(--ov-cream);max-width:560px;position:relative}
/* Dek zowel als af (de CTA-resx gebruikt de span). */
.ov-cta-block .ov-h2 em,
.ov-cta-block .ov-h2 .ov-hero-accent,
.ov-cta-block h2 em{color:var(--ov-lime)}
.ov-cta-block p{color:var(--ov-muted-on-dark);max-width:420px;position:relative}
.ov-cta-actions{display:flex;flex-direction:column;gap:14px;position:relative}
.ov-cta-actions .ov-btn{justify-content:center}
.ov-cta-actions .micro{font-size:13px;color:var(--ov-faint-on-dark);text-align:center}
@media (max-width:780px){.ov-cta-block{grid-template-columns:1fr;padding:48px 28px}}
@media (max-width:540px){.ov-cta-block{border-radius:20px;padding:40px 22px}}
/* ============ FOOTER ============ */
.ov-footer{padding:64px 0;border-top:1px solid var(--ov-line);background:var(--ov-cream)}
/* Header mega-menu (Solutions): CSS-only hover/focus dropdown, crawlable links */
.ov-nav-links > li.ov-has-mega{position:relative}
.ov-mega-trigger{background:none;border:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0}
.ov-mega-trigger .chev{transition:transform .16s ease}
.ov-has-mega:hover .ov-mega-trigger .chev,.ov-has-mega:focus-within .ov-mega-trigger .chev{transform:rotate(180deg)}
.ov-mega{position:absolute;top:100%;left:-24px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:70;padding-top:12px}
.ov-has-mega:hover .ov-mega,.ov-has-mega:focus-within .ov-mega{opacity:1;visibility:visible;transform:translateY(0)}
.ov-mega-inner{background:var(--ov-cream,#fbf9f4);border:1px solid var(--ov-line);border-radius:18px;box-shadow:0 24px 60px rgba(20,20,20,.14);padding:26px 30px;display:grid;grid-template-columns:1fr 1.7fr 1fr 1fr;gap:28px;width:900px;max-width:calc(100vw - 40px)}
.ov-mega-col h5,.ov-mega-col .ov-mega-col-title{margin:0 0 13px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--ov-muted);font-weight:700}
.ov-mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ov-mega-col.two ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.ov-mega-col a{font-size:14px;color:#33333a;text-decoration:none;font-weight:500}
.ov-mega-col a:hover{color:var(--ov-ink)}
.ov-mega-viewall{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--ov-green,#3a7d34)}
@media (max-width:900px){.ov-has-mega{display:none}}
/* Mobile burger: section headings + separator for the Solutions taxonomy */
.ov-mobile-group{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:var(--ov-muted);font-weight:700;margin-top:16px}
.ov-mobile-sep{margin-top:16px;padding-top:14px;border-top:1px solid var(--ov-line)}
/* Integrations page: checklist inside a platform card, read-only callout, roadmap strip */
.ov-check-list{list-style:none;margin:14px 0 16px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--ov-ink-3)}
.ov-check-list li{position:relative;padding-left:26px;line-height:1.5}
.ov-check-list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ov-lime,#c6f24e);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f2421' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.ov-callout{border:1px solid var(--ov-line);border-left:4px solid var(--ov-ink);border-radius:14px;background:var(--ov-cream-2);padding:26px 30px}
.ov-callout h3{margin:0 0 10px;font-size:20px;font-weight:650;color:var(--ov-ink)}
.ov-callout p{margin:0;color:var(--ov-ink-3);font-size:15px;line-height:1.6;max-width:760px}
.ov-roadmap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border:1px dashed var(--ov-line-2,#d8d5cc);border-radius:16px;padding:26px 30px}
.ov-roadmap h3{margin:8px 0 8px;font-size:20px;font-weight:650;color:var(--ov-ink)}
.ov-roadmap p{margin:0;color:var(--ov-ink-3);font-size:15px;line-height:1.55;max-width:620px}
/* Cross-link cards (industry -> template / use-case, integrations -> subpages) */
.ov-cross-links{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:720px){.ov-cross-links{grid-template-columns:1fr}}
.ov-cross-card{display:block;padding:26px 28px;border:1px solid var(--ov-line);border-radius:16px;background:var(--ov-cream);text-decoration:none;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.ov-cross-card:hover{border-color:var(--ov-ink);transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,20,20,.06)}
.ov-cross-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ov-muted);font-weight:600}
.ov-cross-title{font-size:20px;font-weight:650;color:var(--ov-ink);margin:8px 0 8px}
.ov-cross-card p{color:var(--ov-ink-3);font-size:15px;line-height:1.55;margin:0 0 14px}
.ov-cross-go{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:14px;color:var(--ov-ink)}
.ov-footer-grid{display:grid;grid-template-columns:1.6fr 3fr;gap:40px}
.ov-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:32px 28px}
@media (max-width:780px){.ov-footer-grid{grid-template-columns:1fr;gap:32px}.ov-footer-cols{grid-template-columns:1fr 1fr;gap:28px 24px}}
.ov-footer h4,.ov-footer .ov-footer-col-title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ov-muted);margin:0 0 14px;font-weight:600}
.ov-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ov-ink-3)}
.ov-footer a:hover{color:var(--ov-ink)}
.ov-footer-desc{color:var(--ov-muted);font-size:14px;max-width:340px;margin-top:14px;line-height:1.5}
.ov-footer-bottom{
margin-top:48px;padding-top:24px;border-top:1px solid var(--ov-line);
display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ov-muted);flex-wrap:wrap;gap:12px;
}
/* ============ TESTIMONIALS ============ */
.ov-test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:880px){.ov-test-grid{grid-template-columns:1fr}}
.ov-tcard{
background:var(--ov-paper);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
padding:26px;display:flex;flex-direction:column;gap:18px;
}
.ov-tcard .stars{font-size:13px;color:var(--ov-ink);letter-spacing:1px}
.ov-tcard p{margin:0;font-size:16px;line-height:1.5;color:#1c1d20}
.ov-tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto;border-top:1px solid var(--ov-line);padding-top:16px}
.ov-tcard .who .name{font-weight:600;font-size:14px;color:var(--ov-ink)}
.ov-tcard .who .role{font-size:13px;color:var(--ov-muted)}
/* ============ CONTACT FORM ============ */
.ov-form{display:flex;flex-direction:column;gap:18px}
.ov-form .field{display:flex;flex-direction:column;gap:6px}
.ov-form label{font-size:13px;font-weight:600;color:var(--ov-ink);letter-spacing:-.005em}
.ov-form input, .ov-form textarea{
width:100%;padding:13px 16px;border:1px solid var(--ov-line-2);border-radius:14px;
background:var(--ov-paper);font:inherit;color:var(--ov-ink);
transition:border-color .15s, box-shadow .15s;
}
.ov-form textarea{resize:vertical;min-height:140px;line-height:1.5}
.ov-form input:focus, .ov-form textarea:focus{
outline:none;border-color:var(--ov-ink);box-shadow:0 0 0 3px rgba(14,15,17,.06);
}
.ov-form input::placeholder, .ov-form textarea::placeholder{color:var(--ov-muted)}
.ov-form .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ov-form-card{
background:var(--ov-paper);border:1px solid var(--ov-line);
border-radius:var(--ov-radius-lg);padding:36px;max-width:560px;margin:0 auto;
}
.ov-form-card .submit-row{display:flex;align-items:center;gap:14px;justify-content:flex-end;margin-top:8px}
.ov-form .alert{padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.45}
.ov-form .alert-success{background:rgba(58,140,90,.12);color:#1f5b3a;border:1px solid rgba(58,140,90,.25)}
.ov-form .alert-error{background:rgba(232,91,59,.12);color:var(--ov-coral-ink);border:1px solid rgba(232,91,59,.25)}
.ov-form .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--ov-cream);border-radius:50%;animation:ov-spin .8s linear infinite}
@keyframes ov-spin{to{transform:rotate(360deg)}}
.ov-mailto{
display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:14px;
background:var(--ov-cream-2);font-size:14.5px;color:var(--ov-ink);font-weight:500;
border:1px solid var(--ov-line);
}
.ov-mailto strong{font-weight:600}
/* ============ LONG-FORM PROSE (legal pages, blog post) ============ */
.ov-prose{font-size:17px;line-height:1.7;color:#2a2b2e;max-width:720px}
.ov-prose > * + *{margin-top:1.1em}
.ov-prose h2{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:2.2em;color:var(--ov-ink)}
.ov-prose h2:first-child{margin-top:0}
.ov-prose h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin-top:1.8em;color:var(--ov-ink)}
.ov-prose h4{font-size:17px;font-weight:600;color:var(--ov-ink);margin-top:1.5em}
.ov-prose p{margin:0}
.ov-prose a{color:var(--ov-ink);text-decoration:underline;text-decoration-color:var(--ov-line-2);text-underline-offset:3px}
.ov-prose a:hover{text-decoration-color:var(--ov-ink)}
.ov-prose ul, .ov-prose ol{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.ov-prose li{margin:0}
/* Opt-in bullets/numbers for legal prose (privacy, terms). The global
main.css reset strips li markers, and the flex layout above also hides
them; this class restores normal list rendering without touching the
global reset (which the nav/footer/mobile-menu lists rely on). */
.ov-prose-bullets ul, .ov-prose-bullets ol{display:block;padding-left:24px}
.ov-prose-bullets ul > li{list-style:disc}
.ov-prose-bullets ol > li{list-style:decimal}
.ov-prose-bullets li + li{margin-top:8px}
.ov-prose strong{font-weight:600;color:var(--ov-ink)}
.ov-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--ov-cream-2);padding:2px 6px;border-radius:6px;color:var(--ov-ink)}
/* Reset background + radius: the generic blockquote{} in main.css paints a dark
--gray-800 box with white text. This rule wins on color (higher specificity)
but not on background, so without these resets you get dark text on that dark
box. Keep the intended light lime-bordered callout instead. */
.ov-prose blockquote{border-left:3px solid var(--ov-lime);border-radius:0;background:transparent;padding:6px 0 6px 20px;color:var(--ov-ink-3);font-style:italic}
.ov-prose img{border-radius:14px;border:1px solid var(--ov-line)}
.ov-prose hr{border:0;border-top:1px solid var(--ov-line);margin:2em 0}
.ov-prose pre{background:var(--ov-ink);color:var(--ov-text-on-dark);padding:18px;border-radius:14px;overflow-x:auto;font-size:14px;line-height:1.55}
.ov-prose pre code{background:transparent;padding:0;color:inherit}
.ov-legal-meta{font-size:13.5px;color:var(--ov-muted);margin-bottom:32px}
.ov-legal-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ov-muted);margin-bottom:18px}
.ov-legal-back:hover{color:var(--ov-ink)}
/* ============ BLOG ============ */
.ov-blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:780px){.ov-blog-grid{grid-template-columns:1fr}}
.ov-blog-card{
background:var(--ov-paper);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
padding:30px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ov-ink);
transition:transform .2s, box-shadow .2s, border-color .2s;
min-height:220px;
}
.ov-blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(14,15,17,.18);border-color:var(--ov-line-2)}
.ov-blog-card .meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ov-muted);flex-wrap:wrap}
.ov-blog-card .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ov-line-2)}
.ov-blog-card h3{font-size:22px;line-height:1.2;letter-spacing:-.015em;font-weight:700;color:var(--ov-ink)}
.ov-blog-card .excerpt{color:var(--ov-ink-3);font-size:15px;line-height:1.5;margin:0}
.ov-blog-card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.ov-blog-tag{display:inline-flex;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--ov-cream-2);color:var(--ov-muted);font-weight:500}
.ov-blog-card:hover .ov-blog-tag{background:var(--ov-lime);color:var(--ov-ink)}
.ov-post-header{max-width:760px;margin:0 auto}
.ov-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13.5px;color:var(--ov-muted);margin:24px 0}
.ov-post-meta .author{font-weight:600;color:var(--ov-ink)}
/* ============ MINI CTA (used on solution / blog post footer) ============ */
.ov-mini-cta{
background:var(--ov-ink);color:var(--ov-cream);
border-radius:var(--ov-radius-lg);padding:48px 40px;
display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;
position:relative;overflow:hidden;
}
.ov-mini-cta::before{
content:"";position:absolute;inset:auto -80px -100px auto;
width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle, var(--ov-lime) 0%, transparent 60%);opacity:.18;
}
.ov-mini-cta h3{font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:-.02em;color:var(--ov-cream);position:relative}
.ov-page .ov-mini-cta h3 em,
.ov-page .ov-mini-cta h3 .ov-hero-accent{color:var(--ov-lime)}
.ov-mini-cta p{color:var(--ov-muted-on-dark);margin-top:10px;max-width:480px;position:relative}
.ov-mini-cta .actions{position:relative}
@media (max-width:680px){.ov-mini-cta{grid-template-columns:1fr;padding:32px 24px;gap:18px}}
/* Skip-to-content link — visible on focus only, for keyboard users */
.ov-skip-link{
position:absolute;left:-9999px;top:0;
background:var(--ov-ink);color:var(--ov-cream);
padding:12px 18px;border-radius:0 0 var(--ov-radius) 0;
font-weight:600;text-decoration:none;
z-index:1000;
}
.ov-skip-link:focus{left:0;outline:2px solid var(--ov-lime);outline-offset:2px}
/* ============================================================
WALKTHROUGH — "When Lisa leaves the company" narrative section
Six alternating rows of copy + mini-mockup. Pure HTML/CSS;
reuses .ov-row, .ov-tag, .ov-av, .ov-mock-* atoms above.
============================================================ */
.ov-walkthrough{background:var(--ov-cream)}
.ov-walk{
list-style:none;
padding:0;
margin:48px 0 0;
display:flex;
flex-direction:column;
gap:72px;
}
.ov-walk-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
align-items:center;
}
.ov-walk-row:nth-child(even) .ov-walk-copy{order:2}
.ov-walk-row:nth-child(even) .ov-walk-mock{order:1}
.ov-walk-copy{max-width:440px}
.ov-walk-num{
display:inline-block;
font-family:var(--ov-display);
font-style:normal;
font-weight:800;
font-size:clamp(48px,5vw,68px);
line-height:1;
color:var(--ov-lime-ink);
margin-bottom:14px;
letter-spacing:-.03em;
}
.ov-walk-copy h3{
font-size:clamp(22px,2.4vw,28px);
line-height:1.2;
letter-spacing:-.015em;
color:var(--ov-ink);
margin:0 0 12px;
font-weight:600;
}
.ov-walk-copy p{
font-size:16px;
line-height:1.55;
color:var(--ov-muted);
margin:0;
}
/* --- mockup card chrome (same family as .ov-mock) --- */
.ov-walk-mock{
position:relative;
background:var(--ov-paper);
border:1px solid var(--ov-line);
border-radius:var(--ov-radius-lg);
padding:22px 22px 20px;
box-shadow:0 1px 0 #ffffff80 inset, 0 22px 50px -36px rgba(14,15,17,.35);
overflow:hidden;
max-width:520px;
width:100%;
justify-self:start;
}
.ov-walk-row:nth-child(even) .ov-walk-mock{justify-self:end}
.ov-walk-mock::before{
content:"";
position:absolute;
inset:auto -40px -40px auto;
width:200px;height:200px;
background:radial-gradient(circle, var(--ov-lime) 0%, transparent 65%);
opacity:.18;
pointer-events:none;
}
.ov-walk-mock-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px;
gap:12px;
}
.ov-walk-mock-eyebrow{
font-size:11.5px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--ov-muted);
}
/* Compact mini rows in the surfaced-assets mock — slightly tighter than .ov-row */
.ov-walk-mini-row{
grid-template-columns:1fr auto;
padding:10px 0;
gap:12px;
}
.ov-walk-mini-row .name{font-size:14px}
/* Step 1 — leaving form */
.ov-walk-person{
display:flex;align-items:center;gap:12px;
padding:14px 0;
border-bottom:1px solid var(--ov-line);
}
.ov-walk-person-name{font-weight:600;font-size:15px;color:var(--ov-ink)}
.ov-walk-person-role{font-size:13px;color:var(--ov-muted);margin-top:2px}
.ov-walk-field{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 0;
border-bottom:1px solid var(--ov-line);
}
.ov-walk-field label{font-size:13px;color:var(--ov-muted)}
.ov-walk-field-val{
font-size:14px;
font-weight:600;
color:var(--ov-ink);
font-variant-numeric:tabular-nums;
background:color-mix(in srgb, var(--ov-lime) 28%, transparent);
padding:5px 11px;
border-radius:999px;
}
.ov-walk-cta{
margin-top:16px;
width:100%;
display:inline-flex;align-items:center;justify-content:center;
background:var(--ov-ink);
color:var(--ov-cream);
border:none;
border-radius:14px;
padding:11px 16px;
font-size:14px;
font-weight:600;
cursor:default;
font-family:inherit;
}
.ov-walk-cta-ghost{
background:transparent;
color:var(--ov-ink);
border:1px solid var(--ov-line-2);
}
/* Step 3 — reassignment banner + dropdown */
.ov-walk-banner{
display:flex;align-items:center;gap:10px;
padding:11px 13px;
border-radius:12px;
background:rgba(232,91,59,.10);
color:#7a2c18;
font-size:13.5px;
font-weight:500;
margin-bottom:14px;
}
.ov-walk-banner-dot{
width:8px;height:8px;border-radius:50%;
background:var(--ov-coral);
box-shadow:0 0 0 3px rgba(232,91,59,.18);
flex:0 0 auto;
}
.ov-walk-reassign-row{
display:flex;align-items:center;gap:10px;
padding:10px 0;
font-size:14px;
}
.ov-walk-reassign-item{flex:0 0 auto;font-weight:500;color:var(--ov-ink)}
.ov-walk-arrow{color:var(--ov-muted);font-size:13px}
.ov-walk-reassign-select{
margin-left:auto;
display:inline-flex;align-items:center;gap:8px;
padding:7px 12px;
border:1px solid var(--ov-line-2);
border-radius:10px;
font-size:13px;
color:var(--ov-muted);
background:#fff;
}
.ov-walk-caret{font-size:10px;color:var(--ov-ink)}
.ov-walk-dropdown{
margin-top:6px;
border:1px solid var(--ov-line);
border-radius:14px;
background:#fff;
padding:6px;
box-shadow:0 10px 24px -14px rgba(14,15,17,.25);
}
.ov-walk-dropdown-item{
display:flex;align-items:center;gap:10px;
padding:9px 10px;
border-radius:10px;
font-size:14px;
color:var(--ov-ink);
}
.ov-walk-dropdown-item.is-suggested{background:color-mix(in srgb, var(--ov-lime) 18%, transparent)}
.ov-walk-suggest{
margin-left:auto;
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
color:var(--ov-lime-deep);
background:#fff;
padding:3px 8px;border-radius:999px;
border:1px solid color-mix(in srgb, var(--ov-lime-deep) 50%, transparent);
}
/* Step 4 — email-style card */
.ov-walk-email-head{
display:flex;align-items:center;gap:8px;
font-size:12.5px;
color:var(--ov-muted);
margin-bottom:10px;
}
.ov-walk-email-from{font-weight:700;color:var(--ov-ink)}
.ov-walk-email-arrow{color:var(--ov-muted)}
.ov-walk-email-subject{
font-weight:600;
font-size:15.5px;
color:var(--ov-ink);
line-height:1.3;
margin-bottom:8px;
}
.ov-walk-email-body{
font-size:14px;
line-height:1.5;
color:var(--ov-muted);
margin:0 0 14px;
}
.ov-walk-email-actions{
display:flex;gap:10px;
}
.ov-walk-email-actions .ov-walk-cta{
flex:1;
margin-top:0;
}
.ov-walk-email-foot{
margin-top:12px;
padding-top:12px;
border-top:1px solid var(--ov-line);
font-size:12px;
color:var(--ov-muted);
}
/* Step 5 — completion checklist */
.ov-walk-check{
list-style:none;padding:0;margin:6px 0 0;
display:flex;flex-direction:column;gap:9px;
}
.ov-walk-check li{
display:flex;align-items:center;gap:11px;
font-size:14px;
color:var(--ov-ink);
padding:8px 0;
border-bottom:1px solid var(--ov-line);
}
.ov-walk-check li:last-child{border-bottom:none}
.ov-walk-check-ic{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;
background:color-mix(in srgb, var(--ov-success) 18%, transparent);
color:var(--ov-success);
font-size:13px;font-weight:700;
flex:0 0 auto;
}
.ov-walk-pill-ok{
font-size:11.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;
color:var(--ov-success);
background:color-mix(in srgb, var(--ov-success) 14%, transparent);
padding:5px 10px;border-radius:999px;
white-space:nowrap;
}
/* Step 6 — audit log timeline */
.ov-walk-log{
list-style:none;padding:0;margin:6px 0 0;
display:flex;flex-direction:column;
}
.ov-walk-log li{
display:grid;
grid-template-columns:118px 90px 1fr;
gap:12px;
align-items:center;
font-size:13px;
padding:9px 0;
border-bottom:1px dashed var(--ov-line);
}
.ov-walk-log li:last-child{border-bottom:none}
.ov-walk-log-ts{font-variant-numeric:tabular-nums;color:var(--ov-muted);font-size:12px}
.ov-walk-log-who{font-weight:600;color:var(--ov-ink)}
.ov-walk-log-what{color:var(--ov-muted)}
.ov-walk-log-foot{margin-top:12px;display:flex;justify-content:flex-end}
/* Closing line */
.ov-walk-foot{
margin:64px auto 0;
text-align:center;
font-style:normal;
font-size:16px;
color:var(--ov-muted);
max-width:560px;
}
/* --- responsive: stack on tablet/phone --- */
@media (max-width:860px){
.ov-walk{gap:48px}
.ov-walk-row{
grid-template-columns:1fr;
gap:24px;
}
.ov-walk-row:nth-child(even) .ov-walk-copy{order:0}
.ov-walk-row:nth-child(even) .ov-walk-mock{order:0}
.ov-walk-mock,
.ov-walk-row:nth-child(even) .ov-walk-mock{justify-self:stretch;max-width:none}
.ov-walk-log li{grid-template-columns:96px 80px 1fr;gap:8px}
.ov-walk-foot{margin-top:48px;font-size:18px}
}
/* ============ SCROLL-REVEAL (JS-gated) ============
Zachte fade-up bij het in beeld komen van sectiekoppen en kaart-grids.
De .ov-reveal-klassen worden UITSLUITEND door JS gezet (en alleen zonder
prefers-reduced-motion), dus zonder JS is er nooit verborgen content.
Alleen transform+opacity: geen layout-shift, GPU-vriendelijk. */
.ov-reveal{opacity:0;transform:translateY(18px);
transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.ov-reveal.ov-in{opacity:1;transform:none}
/* Lichte stagger voor broers in dezelfde grid-rij. */
.ov-reveal:nth-child(2){transition-delay:.07s}
.ov-reveal:nth-child(3){transition-delay:.14s}
.ov-reveal:nth-child(4){transition-delay:.21s}
.ov-reveal:nth-child(5){transition-delay:.28s}
.ov-reveal:nth-child(n+6){transition-delay:.34s}
/* Respect users who prefer reduced motion (vestibular safety, battery) */
@media (prefers-reduced-motion: reduce){
.ov-page *,
.ov-page *::before,
.ov-page *::after{
animation-duration:0.001ms !important;
animation-iteration-count:1 !important;
transition-duration:0.001ms !important;
scroll-behavior:auto !important;
}
.ov-mock{transform:none !important}
}
/* ============================================================
HOMEPAGE REDESIGN 2026-07-27
Port of the Claude Design homepage export. That export shipped
520 inline style attributes, zero media queries and a
min-width:1280px wrapper; everything below is the same design
expressed through the existing token system, so it stays fluid
and keeps matching the other 44 marketing pages.
============================================================ */
/* Eyebrow labels move to mono across the whole marketing system.
Deliberately site-wide: a mono eyebrow on the homepage and a
sans one everywhere else would read as two design systems.
The old 24px rule becomes the lime dot from the hero pill. */
.ov-label{font-family:var(--ov-mono);font-size:11.5px;letter-spacing:.14em;font-weight:400;}
.ov-label::before{width:7px;height:7px;border-radius:50%;background:var(--ov-lime)}
.ov-dark .ov-label{color:var(--ov-faint-on-dark)}
/* ---- Hero -------------------------------------------------- */
/* The export ran the h1 at a flat 82px. Clamped so it keeps that
presence on desktop without overflowing a 360px phone. */
/* 82px is the export's figure, but its headline breaks into three short lines;
"Niets verloopt." is one 15-character phrase that needs 540px at that size and
the copy column is ~510px, so it wrapped after the first word. 76px in a
slightly wider column keeps the intended two-line break. */
/* The eyebrow carried its own 26px bottom margin before it was folded into the
shared .ov-eyebrow; put that breathing room back on the homepage hero only. */
.ov-hero-home .ov-eyebrow{margin-bottom:26px}
/* Leading was .94: op twee regels hield dat de kop als één blok bij elkaar, maar
sinds de kop over drie regels breekt plakten de regels op elkaar. 1.0 geeft de
drie regels lucht zonder de kop uit elkaar te trekken. */
.ov-hero-home .ov-hero-title{font-size:clamp(32px, 6.6vw, 48px);line-height:1;letter-spacing:-.045em; font-weight:700}
/* The shared .ov-hero-accent marker fills the bottom 36% of the line box. At this hero's
tight leading the glyphs sit low in that box, so the bar landed under the baseline
instead of across the letters. Both stops are tuned to the line-height above: 55%
puts the top of the bar across the letters, and the 3% floor trims the extra room
that the looser leading added below the baseline, so the block keeps hugging the
glyphs instead of growing into a redaction bar. Retune both if the leading moves. */
/* ---- Problem block: numbered cards on ink ------------------ */
/* Variant of .ov-pain-card: the export swapped the serif quote mark
for a mono ordinal. Same card, different marker. */
.ov-pain-card--num .num{
font-family:var(--ov-mono);font-size:11.5px;letter-spacing:.14em;color:var(--ov-lime);display:block;
}
.ov-pain-card--num h3{margin-top:18px}
.ov-pain-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.ov-pain-split .ov-h2{margin:0}
.ov-pain-split p{margin:0;font-size:18px;line-height:1.6;color:var(--ov-muted-on-dark)}
/* De naregel voor wie geen lijst heeft: bewust stiller dan .ov-lede erboven, want
het is een terzijde voor één lezer, geen vierde argument. Zelfde maat als de
pijnkaart-body zodat hij als voetnoot leest en niet als kop. */
.ov-pain-head{
margin-top:26px;padding-top:22px;max-width:62ch;
border-top:1px solid rgba(255,255,255,.12);
font-size:15.5px;line-height:1.65;color:var(--ov-muted-on-dark);
}
/* ---- Numbered steps with a mock foot -----------------------
De 3 in de naam is historie: er staan er sinds 17 augustus vier (de overdracht kwam erbij, zodat deze
sectie dezelfde vier bewegingen vertelt als de hero-mock). Niet hernoemd naar .ov-step, want die naam
is hierboven al bezet door de kaartjes van .ov-how-grid. */
.ov-steps3{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:var(--ov-space-head)}
.ov-step3{
background:#fff;border:1px solid var(--ov-line);border-radius:20px;
display:flex;flex-direction:column;overflow:hidden;
}
.ov-step3-body{padding:28px 24px 0}
.ov-step3-num{font-family:var(--ov-mono);font-size:11.5px;letter-spacing:.14em;color:var(--ov-muted)}
.ov-step3 h3{margin:16px 0 10px;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.ov-step3 p{margin:0;font-size:15px;line-height:1.55;color:var(--ov-ink-3)}
.ov-step3-foot{margin-top:auto;padding:26px 24px}
/* De pijl tussen de twee ledenrijen van stap 04, uitgelijnd op het midden van de avatar erboven. */
.ov-handover-arrow{
margin:-2px 0 -2px 9px;color:var(--ov-muted);font-size:15px;line-height:1;
}
.ov-typechips{display:flex;flex-wrap:wrap;gap:8px}
.ov-typechip{font-size:13px;padding:6px 11px;border-radius:8px;background:#F1EFE6;color:var(--ov-ink-3)}
.ov-typechip.on{background:#E7F5C4;color:var(--ov-lime-ink);font-weight:500}
.ov-offset{border:1px solid var(--ov-line-2);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px}
/* flex:none, anders knijpt de flexbox het getal in de smallere vierkolomskaart samen tot één cijfer per
regel en breekt "Einddatum" middenin af. */
.ov-offset .n{font-family:var(--ov-mono);font-size:22px;font-weight:500;flex:none}
.ov-offset .t{font-size:14px;line-height:1.4;color:var(--ov-ink-3)}
.ov-offset .t strong{color:var(--ov-ink);font-weight:500}
.ov-offset .sw{margin-left:auto;width:40px;height:22px;border-radius:999px;background:var(--ov-lime);position:relative;flex:none}
.ov-offset .sw::after{content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--ov-ink)}
.ov-members{display:flex;flex-direction:column;gap:8px}
.ov-member{display:flex;align-items:center;gap:10px;font-size:14px}
.ov-member .role{margin-left:auto;font-size:12.5px;color:var(--ov-muted)}
.ov-member .role.own{padding:4px 9px;border-radius:999px;background:#E7F5C4;color:var(--ov-lime-ink)}
/* ---- Alert channels panel ---------------------------------- */
.ov-alert-panel{
background:var(--ov-cream-2);border-radius:var(--ov-radius-lg);padding:64px;
display:grid;grid-template-columns:1fr 1fr;gap:64px;
/* The channel column is much taller than the copy column; centring keeps the
copy optically balanced instead of leaving a void under the CTA. */
align-items:center;
}
.ov-alert-panel .ov-h2{margin:0;font-size:clamp(30px, 3.6vw, 48px);line-height:1.04; padding-bottom:24px}
/* De H2 van dit paneel droeg tot 31 juli een accent op "aan de bel trekt" — eerst
een 8px lime balk, daarna een groen woord. Beide zijn eruit: de kop is nu kale
inkt met een harde regelafbreking na "dat". Er is dus géén .ov-underline meer;
het accent leeft nog op precies één plek, en dat is de hero hieronder. */
/* Het hero-accent: het accentwoord draagt de heldere groen én de geschilderde haal
eronder. Eigen klasse, en dat blijft zo om twee redenen die allebei op zichzelf
al genoeg zijn:
1. Contrast. --ov-lime-hero haalt 3.38:1 op crème (genoeg voor 82px/800), maar
op de donkerdere cream-2 grond van dit alert-paneel zou hij naar 2.98:1
zakken. Eén klasse voor twee gronden laat de zwakste van de twee zakken.
2. De haal is een signatuurmoment. Dezelfde reden waarom .ov-hero .ov-display em
hierboven bewust alleen in de hero leeft: als elke H2 op de pagina hem krijgt,
markeert hij niets meer.
De haal is een SVG-vorm (geen border), want een streep die versmalt naar de punten
en schuin omhoog loopt kán geen border zijn. preserveAspectRatio=none laat hem
meerekken met het woord, hoe lang dat woord in een andere taal ook wordt.
padding-bottom hangt hem onder de regel zonder de layout te raken: verticale
padding op een inline-element telt niet mee in de regelhoogte, dus de kop schuift
niet op. box-decoration-break houdt de haal heel als het accent ooit wrapt. */
.ov-hero-accent{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3,9.5 C80,6 190,3.5 297,1.5 L297,4.8 C190,7.6 80,11 3,14.6 Z' fill='%23A6D03B'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:left bottom;
background-size:104% .26em;
padding-bottom:0;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
font-weight:900;
}
.ov-chans{display:flex;flex-direction:column;gap:12px}
.ov-chan{background:#fff;border-radius:16px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start}
.ov-chan-ic{
width:38px;height:38px;flex:none;border-radius:11px;background:#E7F5C4;color:var(--ov-lime-ink);
display:flex;align-items:center;justify-content:center;
}
.ov-chan .t{display:block;font-size:17px;font-weight:600}
.ov-chan .s{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ov-ink-3)}
.ov-chan--dark{background:var(--ov-ink);color:var(--ov-cream)}
.ov-chan--dark .ov-chan-ic{background:rgba(198,242,78,.16);color:var(--ov-lime)}
.ov-chan--dark .s{color:var(--ov-muted-on-dark)}
/* Plan gate marker, so "Continuiteit" reads as a tier and not as prose. */
.ov-gate{
font-family:var(--ov-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
padding:3px 8px;border-radius:6px;background:rgba(14,15,17,.07);color:var(--ov-muted);
margin-left:8px;white-space:nowrap;
}
.ov-chan--dark .ov-gate{background:rgba(198,242,78,.16);color:var(--ov-lime)}
/* ---- Continuity split -------------------------------------- */
.ov-cont-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ov-ticks{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.ov-tick{display:flex;gap:14px;align-items:baseline;font-size:16px;line-height:1.55;color:var(--ov-ink-3)}
.ov-tick::before{
content:"";width:8px;height:8px;border-radius:50%;background:var(--ov-lime);flex:none;transform:translateY(-2px);
}
.ov-tick strong{color:var(--ov-ink);font-weight:600}
.ov-transfer{
background:#fff;border:1px solid var(--ov-line);border-radius:22px;padding:32px;
box-shadow:0 28px 60px -34px rgba(18,18,15,.25);
}
.ov-transfer-head{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--ov-line)}
.ov-transfer-head .n{display:block;font-size:16px;font-weight:600}
.ov-transfer-head .m{display:block;font-size:13.5px;color:var(--ov-muted)}
.ov-transfer-rows{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.ov-transfer-row{
display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;
background:#F7F5EE;font-size:15px;
}
.ov-transfer-row .st{
margin-left:auto;font-size:12.5px;padding:4px 10px;border-radius:999px;
background:#E7F5C4;color:var(--ov-lime-ink);font-weight:500;
}
.ov-transfer-row.pending{background:#FDF4F2}
.ov-transfer-row.pending .st{background:#FBEAE6;color:var(--ov-coral-ink)}
.ov-transfer-foot{margin:22px 0 0;font-size:14px;line-height:1.55;color:var(--ov-muted)}
/* ---- Proof log (homepage) ----------------------------------
Kaart links, bewijspunten rechts. Was een 820px kaart gecentreerd onder de
splithead met de puntenrij eronder weer op de wrap-rand: elk ander blok op de
hele pagina loopt van 60 tot 1380, deze kaart van 310 tot 1130, en daaronder
sprong het oog terug naar links en daarna naar het midden. Drie horizontale
ankers boven elkaar lezen als een ander sjabloon, en dat is precies waarom de
sectie eruit sprong.
Nu spiegelt hij het continuïteitsblok ernaast: daar staat de tekst links en de
mock rechts, hier andersom. Dat is een ritmewissel in plaats van een breuk, en
de kaart blijft smal genoeg dat de statuspil bij zijn eigen regel hoort. */
.ov-proof-grid{display:grid;grid-template-columns:1fr .7fr;gap:56px;align-items:center;margin-top:36px}
/* De punten dragen wat meer lucht dan de standaard ov-ticks: ze staan hier naast een
kaart van bijna 500px hoog en niet naast een kop met lede, dus met de krappe versie
zweefde de kolom als een postzegel in het midden. */
.ov-proof-points .ov-ticks{margin-top:0;gap:22px}
.ov-proof-points .ov-tick{font-size:17px}
/* De klantzin sluit de kolom af zoals .ov-transfer-foot de kaart afsluit: links
uitgelijnd onder een haarlijn, niet als losse gecentreerde regel over de volle
breedte. Instrument Serif italic blijft gerantsoeneerd tot scène-zinnen. */
/* Nakomeling-selector, niet .ov-proof-quote alleen: .ov-page p (0-1-1) wint van een
losse klasse (0-1-0) en at de margin-top op, waardoor de haarlijn tegen de laatste
tick aan kwam te liggen en die regel leek te onderstrepen. */
.ov-proof-points .ov-proof-quote{
margin:36px 0 0;padding-top:28px;border-top:1px solid var(--ov-line-2);
font-family:'Instrument Serif',Georgia,serif;font-style:italic;
font-size:24px;line-height:1.28;letter-spacing:-.01em;color:var(--ov-ink);
}
/* De statuspil is hier neutraal, niet lime: als "verstuurd" en "afgehandeld" allebei
oplichten, is de kop ("verstuurd is niet hetzelfde als afgehandeld") door het
beeld al weersproken voordat iemand hem gelezen heeft. Alleen de slotregel licht op. */
.ov-proof-log .ov-transfer-row .st{background:rgba(14,15,17,.06);color:var(--ov-ink-3)}
/* En die slotregel licht op in het lime van de pagina, niet in een eigen bosgroen:
--ov-success stond hier als enige plek op de homepage als vlák (elders alleen als
tekstkleur in de vergelijkingstabel), dus de sectie sprak een derde statuskleur
naast lime=goed en koraal=mis. Lime is al de kleur van "geregeld". */
.ov-proof-log .ov-transfer-row.is-done{background:#F2F7E1}
.ov-proof-log .ov-transfer-row.is-done .st{background:#E7F5C4;color:var(--ov-lime-ink)}
/* ---- Two-column duo (tasks + definition list) -------------- */
.ov-duo{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.ov-duo .ov-h2{font-size:clamp(27px, 3vw, 40px);line-height:1.05;margin:18px 0 0}
.ov-bullets{margin-top:24px;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.55;color:var(--ov-ink-3)}
.ov-bullets span{display:flex;gap:12px}
.ov-bullets span::before{content:"\00B7";color:var(--ov-lime-ink);font-weight:700}
.ov-deflist{margin-top:22px;display:flex;flex-direction:column}
.ov-defrow{padding:15px 0;border-top:1px solid var(--ov-line-2);display:flex;gap:20px}
.ov-defrow:last-child{border-bottom:1px solid var(--ov-line-2)}
.ov-defrow .k{font-size:16px;font-weight:600;min-width:11em}
.ov-defrow .v{font-size:15.5px;line-height:1.5;color:var(--ov-ink-3)}
/* ---- Chip cloud + Goldilocks ------------------------------- */
.ov-chips{margin-top:44px;display:flex;flex-wrap:wrap;gap:12px}
.ov-chip-lg{font-size:17px;padding:12px 20px;border-radius:999px;background:#fff;border:1px solid var(--ov-line)}
.ov-fit3{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ov-fit{padding:26px;border-radius:18px;border:1px dashed rgba(14,15,17,.22)}
.ov-fit .cap{font-family:var(--ov-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ov-muted)}
.ov-fit h3{margin:14px 0 8px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.ov-fit p{margin:0;font-size:15px;line-height:1.55;color:var(--ov-ink-3)}
.ov-fit--good{background:var(--ov-ink);color:var(--ov-cream);border:1px solid var(--ov-ink)}
.ov-fit--good .cap{color:var(--ov-lime)}
.ov-fit--good p{color:var(--ov-muted-on-dark)}
.ov-caps{
margin-top:40px;padding-top:28px;border-top:1px solid var(--ov-line-2);
display:flex;flex-wrap:wrap;gap:12px 36px;font-size:15px;color:var(--ov-ink-3);
}
/* ---- Het echte scherm -------------------------------------
Eén onbewerkte schermafbeelding, met dezelfde kaartchrome als de videofiguur
zodat de twee bewijsblokken familie van elkaar zijn. Bewust GEEN aspect-ratio
met object-fit:cover: bijsnijden zou het scherm alsnog tot een illustratie
maken. De width/height op de ![]()
houden de plek vrij tijdens het laden, dus
de sectie eronder springt niet. */
.ov-shot{margin:0}
.ov-shot img{
width:100%;height:auto;display:block;
border-radius:24px;border:1px solid rgba(18,18,15,.12);
background:var(--ov-paper);
box-shadow:0 24px 60px -32px rgba(14,15,17,.35);
}
.ov-shot figcaption{
margin-top:14px;text-align:center;
font-family:'Instrument Serif',Georgia,serif;font-style:italic;
font-size:16px;color:var(--ov-ink-3);
}
/* ---- Split head (h2 left, lede right, baselines aligned) --- */
.ov-splithead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.ov-splithead .ov-h2{margin:0}
.ov-splithead p{margin:0;font-size:17px;line-height:1.6;color:var(--ov-ink-3);max-width:34em}
/* ---- Responsive -------------------------------------------- */
/* Vier kaarten naast elkaar hebben de volle wrap nodig; daaronder is 2x2 leesbaarder dan vier koker-
smalle kolommen. De .ov-fit3-rij blijft op zijn eigen 980px staan, die heeft er maar drie. */
@media (max-width:1100px){
.ov-steps3{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
.ov-fit3{grid-template-columns:1fr 1fr}
.ov-alert-panel,.ov-cont-grid,.ov-duo,.ov-pain-split,.ov-splithead{grid-template-columns:1fr;gap:40px}
/* De proof-kaart staat al eerst in de DOM, dus stapelen volstaat: kaart, dan punten. */
.ov-proof-grid{grid-template-columns:1fr;gap:36px}
.ov-alert-panel{padding:40px}
.ov-pain-split,.ov-splithead{align-items:start}
/* The transfer mock leads on mobile: it carries the section's proof. */
.ov-cont-grid > .ov-transfer{order:-1}
}
@media (max-width:780px){
.ov-steps3,.ov-fit3{grid-template-columns:1fr}
.ov-alert-panel{padding:28px;border-radius:var(--ov-radius)}
.ov-defrow{flex-direction:column;gap:6px}
.ov-defrow .k{min-width:0}
.ov-caps{gap:10px 22px;font-size:14px}
}
@media (max-width:540px){
.ov-chan{padding:16px 18px;gap:12px}
.ov-chip-lg{font-size:15px;padding:10px 16px}
.ov-transfer{padding:22px}
/* Statuspil mag naar zijn eigen regel zakken. Op 390px deelde hij de breedte met
het label en werd hij zo smal geknepen dat het woord zelf brak: "Mislu / kt",
"overgedragen aan / Sanne". Nu houdt de pil zijn eigen breedte en wrapt de regel. */
.ov-transfer-row{flex-wrap:wrap;gap:6px 12px}
.ov-transfer-row .st{white-space:nowrap}
.ov-eyebrow{font-size:10.5px;letter-spacing:.1em}
/* Gate marker drops to its own line so the channel title can breathe. */
.ov-gate{margin-left:0;display:inline-block;margin-top:6px}
}
/* Utilities the redesign sections need. .ov-section--flush replaces the
Bootstrap pt-0 that the old markup borrowed from main.css, so the v2
system does not depend on Bootstrap being loaded. */
.ov-section--flush{padding-top:0}
.ov-accent-lime{color:var(--ov-lime)}
.ov-cont-grid .ov-h2{font-size:clamp(28px, 3.5vw, 50px);line-height:1.03}
/* ---- Hero tour slider indication --------------------------------------- */
/* From the redesign export: the active step stretches into a bar instead of
staying a dot, so position is readable at a glance without a counter. */
.ov-tour-dots{display:flex;gap:7px;margin-top:22px;justify-content:flex-start}
.ov-tour-dot{
width:9px;height:9px;padding:0;border:none;border-radius:999px;cursor:pointer;
background:rgba(14,15,17,.18);
transition:width var(--ov-ease) .3s, background var(--ov-ease) .3s;
}
.ov-tour-dot.is-active{width:26px;background:var(--ov-ink)}
.ov-tour-dot:hover{background:rgba(14,15,17,.4)}
.ov-tour-dot.is-active:hover{background:var(--ov-ink)}
@media (prefers-reduced-motion: reduce){.ov-tour-dot{transition:none}}
/* ---- Chips are links now ------------------------------------------------ */
/* The old six-card use-case grid carried the internal links into the use-case,
industry and role pages. The chip cloud replaced it visually, so it has to
carry those links too, otherwise ~30 SEO pages lose their homepage entry. */
.ov-chip-lg{display:inline-block;color:var(--ov-ink);transition:transform .25s var(--ov-ease), border-color .25s var(--ov-ease), background .25s var(--ov-ease)}
a.ov-chip-lg:hover{border-color:var(--ov-ink);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.ov-chip-lg{transition:none}a.ov-chip-lg:hover{transform:none}}
/* ---- Extracted-document mock ------------------------------------------- */
.ov-doc-head{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--ov-line)}
.ov-doc-ic{
width:38px;height:38px;flex:none;border-radius:11px;background:#E7F5C4;color:var(--ov-lime-ink);
display:flex;align-items:center;justify-content:center;
}
.ov-doc-title{font-size:15px;font-family:var(--ov-mono);letter-spacing:.04em;color:var(--ov-muted)}
.ov-doc-rows{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.ov-doc-row{
display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;
background:#F7F5EE;font-size:15px;
}
.ov-doc-row .k{color:var(--ov-muted);min-width:8.5em}
.ov-doc-row .v{font-weight:600}
.ov-doc-row .src{
margin-left:auto;font-family:var(--ov-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
padding:4px 9px;border-radius:999px;background:#E7F5C4;color:var(--ov-lime-ink);white-space:nowrap;
}
@media (max-width:540px){
.ov-doc-row{flex-wrap:wrap;gap:6px 10px}
.ov-doc-row .k{min-width:0}
.ov-doc-row .src{margin-left:0;width:100%}
}
/* A gate marker sitting in an h2 must not inherit the heading's size. */
.ov-h2 .ov-gate{vertical-align:middle;position:relative;top:-.15em}
/* ---- Homepage rhythm + heading steps, measured off the export ------------
The export sizes its h2 per section (40 / 44 / 48 / 50 / 52 / 54) instead of
running one global step. Our single 54 made the quiet sections shout, which
is what read as "the type is too big". These are the measured values, kept
fluid so they still collapse on small screens. */
/* Export: hero 88 top, trust strip sits flush at the bottom (pb 0), and the
demo section supplies the whole 72px gap below it. */
.ov-hero-home{padding-top:clamp(48px, 6vw, 88px);padding-bottom:0}
/* ---- Volle-schermhero, maar alleen waar hij iets betekent -----------------
Opgemeten voordat dit geschreven werd, want de intuïtie klopt hier niet: op de
drie gangbaarste laptopmaten is de hero van zichzelf al hóger dan de vouw
(1366×768 loopt 177px over, 1536×864 68px, 1440×900 30px). Een kale
`min-height:100vh` doet daar dus niets — hij vuurt pas rond 1080p. Vandaar de
min-height media query: die zegt eerlijk vanaf wanneer de regel bestaat, in
plaats van te suggereren dat hij overal werkt.
svh en niet vh: op mobiel telt vh de ruimte achter de wegschuivende URL-balk
mee, dus dan valt de onderkant van de hero weg en springt de pagina bij het
eerste scrollen. (Die query vuurt hier toch niet op telefoons, maar vh staat
nergens in dit bestand en dat moet zo blijven.)
min(...,950px): het overschot loopt hard op — +148px op 1080p, +508px op 1440p.
Zonder plafond wordt dat op een groot scherm een gat tussen de knoppen en de
chips dat als een bug leest. 950 is niet willekeurig: op 1080p komt de berekening
zelf op 948 uit, dus élk scherm van 1080p en hoger krijgt nu dezelfde hero van
~950px met dezelfde ~175px lucht boven de chips. Alleen de hoeveelheid zwart
onder de vouw verschilt, en dat is precies het deel dat mág verschillen.
(Met 1000 werd de lucht op een 1200px-scherm 226px, en dat las als een gat.)
De 56px die er af gaat is opzet, geen marge-fout: het is de kier van de zwarte
sectie die onder de vouw uit piept. Een hero die exact op de vouw eindigt zegt
niemand dat er nog iets komt. Wil je hem tóch precies vullend, haal die 56 weg.
--ov-nav-h spiegelt de sticky nav (40px logo + 2×16px padding + 1px rand). Die
nav staat in de flow, dus zonder aftrek loopt de hero er precies die hoogte
overheen. Verandert de nav, dan verschuift alleen de kier een paar pixels. */
:root{--ov-nav-h:76px}
@media (min-width:961px) and (min-height:940px){
.ov-hero-home{min-height:min(calc(100svh - var(--ov-nav-h) - 56px), 950px)}
/* De wrap moet de hoogte van de sectie erven, anders heeft de auto-marge
hieronder niets om zich tegenaan af te zetten. */
.ov-hero-home > .ov-wrap{display:flex;flex-direction:column;flex:1}
/* De ruimte komt BOVEN de chips, niet verdeeld over de hele hero. Kop, lede en
knoppen zijn één cluster dat aan de bovenkant hoort te blijven staan; het
afsluitblok (chips + trustbalk) is wat naar onderen mag zakken. Een
justify-content:space-between of :center zou de kop van de nav wegduwen. */
.ov-hero-typeblock{margin-top:auto}
}
/* Trust strip to demo heading: 72px in the export, was 136px here. */
#demo{padding-top:clamp(48px, 5.5vw, 72px);padding-bottom:0px}
#demo .ov-h2{font-size:clamp(28px, 3.3vw, 44px)}
#faq .ov-h2{font-size:clamp(28px, 3.3vw, 44px)}
#faq{padding-bottom:clamp(64px, 7.5vw, 104px)}
.ov-fit-section .ov-h2{font-size:clamp(30px, 3.7vw, 50px)}
.ov-fit-section,.ov-dark.ov-section--major{padding-top:clamp(60px, 7vw, 96px);padding-bottom:clamp(60px, 7vw, 96px)}
.ov-cta-block .ov-h2{font-size:clamp(30px, 3.9vw, 52px)}
#pricing .ov-h2{font-size:clamp(30px, 3.7vw, 50px)}
/* ---- Chip filter + panel ------------------------------------------------ */
/* .ov-page a:not(.ov-btn){color:inherit} is (0,3,0) and was beating the chip's
own colour, which is how the active chip ended up black-on-black. Scope the
chip colours under .ov-page so they win. */
.ov-page a.ov-chip-lg{color:var(--ov-ink)}
.ov-page a.ov-chip-lg.is-active{background:var(--ov-ink);color:var(--ov-lime);border-color:var(--ov-ink)}
.ov-page a.ov-chip-lg.is-active:hover{background:#000;color:var(--ov-lime)}
.ov-chip-lg{cursor:pointer}
.ov-chip-panels{margin-top:28px;position:relative}
.ov-chip-panel{display:none}
.ov-chip-panel.is-active{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;align-items:start}
.ov-chip-panel h3{
grid-row:1;font-size:clamp(20px, 2vw, 26px);font-weight:600;letter-spacing:-.02em;margin:0;
}
.ov-chip-panel p{grid-column:2;grid-row:1;margin:0;font-size:16.5px;line-height:1.6;color:var(--ov-ink-3)}
.ov-chip-panel .eg{
grid-column:2;grid-row:2;font-family:var(--ov-mono);font-size:12.5px;letter-spacing:.04em;
color:var(--ov-muted);line-height:1.8;
}
.ov-chip-more{
grid-column:1;grid-row:2;align-self:start;justify-self:start;font-size:15px;font-weight:500;
border-bottom:1px solid var(--ov-line-2);padding-bottom:2px;
}
.ov-page a.ov-chip-more{color:var(--ov-ink)}
.ov-page a.ov-chip-more:hover{border-bottom-color:var(--ov-ink)}
/* Panels swap in place, so give the container a floor: without it the section
jumps every time a shorter panel replaces a taller one. */
.ov-chip-panels{min-height:132px}
@media (max-width:780px){
.ov-chip-panel.is-active{grid-template-columns:1fr;gap:10px}
.ov-chip-panel h3,.ov-chip-panel p,.ov-chip-panel .eg,.ov-chip-more{grid-column:1;grid-row:auto}
.ov-chip-panels{min-height:0}
}
@media (prefers-reduced-motion: no-preference){
.ov-chip-panel.is-active{animation:ov-chip-in .3s var(--ov-ease) both}
}
@keyframes ov-chip-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ---- Mobile fixes, homepage hero + pricing toggle ----------------------- */
/* The four tour frames are stacked in one grid cell, so the grid column sizes
to the WIDEST frame's min-content. The transfer frame holds an unbreakable
e-mail address, which pushed the column to 368px inside a 346px hero and
clipped every card's status pill off the right edge. minmax(0,1fr) caps the
column at the container. */
.ov-tour-stage{grid-template-columns:minmax(0,1fr)}
.ov-tour,.ov-tour-frame{min-width:0;max-width:100%}
.ov-xfer-owner .mail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){
/* Row shells: tighter box, and the status pill drops under the text instead
of fighting it for the last 40px. */
.ov-drop,.ov-ownrow,.ov-remind-row,.ov-transfer-head{
padding:13px 14px;gap:11px;flex-wrap:wrap;
}
.ov-remind-main,.ov-ownrow-main,.ov-src-txt{flex:1 1 60%;min-width:0}
.ov-remind-row > .ov-tag,.ov-ownlist--aligned .ov-ownrow .ov-ownrow-tag{margin-left:54px;flex:0 0 auto}
.ov-ownrow-owner{margin-left:auto}
.ov-tour-dots{justify-content:center}
}
/* The toggle is a pill, but on a narrow screen the "2 months free" badge wraps
to a second line and the 999px radius then reads as a broken lozenge. Below
560px it becomes a rounded box that is allowed to be two lines tall. */
@media (max-width:560px){
.ov-toggle{
display:flex;width:100%;justify-content:center;border-radius:var(--ov-radius);
padding:8px;gap:8px;
}
.ov-toggle button{flex:1 1 auto;padding:10px 12px;text-align:center}
.ov-save-badge{margin-left:0;flex:1 0 100%;justify-content:center}
}
/* ============================================================
Homepage explainer video (Hoe het werkt)
Lived in app.css until the stylesheet stacks were split per side; the markup
is marketing-only (Index.razor), so the rules belong here. Names keep the
.ov- prefix they were written with.
============================================================ */
/* Homepage explainer (Hoe het werkt): same portrait-safe treatment as the
/demo video below — height-capped, centered, paper-card chrome. */
.ov-video-wrap {
margin: 0 auto 44px;
text-align: center;
}
/* Figure wraps tightly around the height-capped video so the fullscreen button
and play-poster clip to the same rounded card. line-height:0 kills the inline
descender gap under the video. */
/* Frame follows the redesign export: full container width, 24px radius, a
hairline border and a fixed 16:9 box so the section height never depends on
the video's intrinsic size. */
.ov-video-figure {
position: relative;
display: block;
margin: 0;
line-height: 0;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 16 / 9;
border: 1px solid rgba(18, 18, 15, 0.12);
width: 100%;
max-width: 100%;
}
.ov-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
max-width: 100%;
margin: 0 auto;
border-radius: 18px;
background: #000;
cursor: pointer;
box-shadow:
0 1px 0 #ffffff80 inset,
0 30px 60px -30px rgba(14, 15, 17, .18),
0 8px 20px -10px rgba(14, 15, 17, .08);
}
/* Centered play affordance, only visible when the silent loop is paused. */
.ov-video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.ov-video-play svg {
width: 66px;
height: 66px;
padding: 18px;
color: #fff;
border-radius: 999px;
background: rgba(14, 15, 17, .5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.ov-video-figure.is-paused .ov-video { filter: brightness(.72); }
.ov-video-figure.is-paused .ov-video-play { opacity: 1; }
/* Fullscreen button: subtle glass chip, bottom-right. Fades in on hover;
stays visible on touch devices (no hover) so mobile always has the escape hatch. */
.ov-video-fs {
position: absolute;
right: 12px;
bottom: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 11px;
color: #fff;
background: rgba(14, 15, 17, .42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
opacity: 0;
transform: translateY(4px);
transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.ov-video-figure:hover .ov-video-fs,
.ov-video-fs:focus-visible {
opacity: 1;
transform: none;
}
.ov-video-fs:hover { background: rgba(14, 15, 17, .62); }
@media (hover: none) {
.ov-video-fs { opacity: 1; transform: none; }
}
/* In fullscreen the figure fills the screen on a black backdrop and the video
drops its card chrome. iOS uses the native video-element fullscreen instead. */
.ov-video-figure:fullscreen,
.ov-video-figure:-webkit-full-screen {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #000;
border-radius: 0;
}
.ov-video-figure:fullscreen .ov-video,
.ov-video-figure:-webkit-full-screen .ov-video {
max-height: 100%;
max-width: 100%;
border-radius: 0;
border: none;
box-shadow: none;
}
.ov-video-caption {
margin: 14px 0 0;
font-size: 13.5px;
color: var(--ov-muted, #6B6860);
}