/* ============================================================
   OwndUp v2 — Editorial / Holo-inspired design system
   All classes prefixed `ov-` to avoid colliding with Bootstrap
   classes used by other marketing pages still on main.css.
   ============================================================ */

:root{
  --ov-cream:    #F1EDE2;
  --ov-cream-2:  #E8E3D5;
  --ov-paper:    #FBF9F2;
  --ov-ink:      #0E0F11;
  --ov-ink-2:    #1B1C1F;
  --ov-muted:    #5F5C54;
  --ov-line:     rgba(14,15,17,.09);
  --ov-line-2:   rgba(14,15,17,.18);
  --ov-lime:     #C8F25C;
  --ov-lime-deep:#A6D03B;
  --ov-coral:    #E85B3B;
  --ov-success:  #3A8C5A;
  --ov-warn:     #B98030;
  --ov-radius:   18px;
  --ov-radius-lg:28px;
}

/* In-page anchor jumps (#issue, #solution, #compare) must clear the ~70px
   sticky nav, otherwise the destination heading lands tucked under it. */
html{scroll-padding-top:84px}

/* Page reset — applied only to v2 marketing pages */
.ov-page{
  background:var(--ov-cream);
  color:var(--ov-ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.ov-page *{box-sizing:border-box}
/* Don't catch .ov-btn — it sets its own color and the inherit-color rule was
   overriding the cream text on .ov-btn-primary (link-vs-class specificity). */
.ov-page a:not(.ov-btn){color:inherit;text-decoration:none}
.ov-page a.ov-btn{text-decoration:none}
.ov-page img,.ov-page svg{display:block;max-width:100%}
.ov-page ::selection{background:var(--ov-lime);color:var(--ov-ink)}
.ov-page p{margin:0}
.ov-page h1,.ov-page h2,.ov-page h3,.ov-page h4,.ov-page h5{margin:0;letter-spacing:-.025em;font-weight:700}
.ov-page em.serif,.ov-page .ov-serif,
.ov-page .ov-display em, .ov-page .ov-h2 em, .ov-page .ov-h3 em,
.ov-page h1 em, .ov-page h2 em, .ov-page h3 em{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-weight:400;letter-spacing:-.005em;
}

.ov-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* Narrow column inside .ov-wrap — keeps the SAME left edge as nav/header/footer
   (since the 1200px wrap is unchanged) and just caps the readable line length.
   Use as: <div class="ov-wrap"><div class="ov-narrow">...</div></div> */
.ov-narrow      {max-width:840px}
.ov-narrow-prose{max-width:760px}
.ov-narrow-tight{max-width:680px}

/* ============ NAV ============ */
.ov-nav-wrap{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:color-mix(in srgb, var(--ov-cream) 80%, transparent);
  border-bottom:1px solid var(--ov-line);
}
/* Don't use the `padding: 14px 0` shorthand here — this element is also `.ov-wrap`,
   whose `padding: 0 24px` would be wiped out by the shorthand, pulling the logo and
   burger flush to the screen edge on mobile. Set vertical padding longhand instead. */
.ov-nav{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:18px}
.ov-logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:18px;color:var(--ov-ink)}
.ov-logo img{height:40px;width:auto}
.ov-nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:14.5px;color:#3a3a3e}
.ov-nav-links a:hover{color:var(--ov-ink)}
.ov-nav-right{display:flex;align-items:center;gap:10px}
.ov-lang{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--ov-line-2);border-radius:999px;padding:3px}
.ov-lang a{font-size:12.5px;font-weight:600;padding:7px 12px;min-height:32px;display:inline-flex;align-items:center;border-radius:999px;color:var(--ov-muted)}
.ov-lang a.active{background:var(--ov-ink);color:var(--ov-cream)}
.ov-burger{display:none;background:none;border:1px solid var(--ov-line-2);border-radius:10px;padding:8px;cursor:pointer;color:var(--ov-ink)}
/* Tablet & below: hide nav links + login pill, surface burger. CTA pill stays visible. */
@media (max-width:980px){
  .ov-nav-links,.ov-nav-right .ov-btn-login{display:none}
  .ov-burger{display:inline-flex}
}
/* Narrow phones: drop the lang toggle and CTA pill from the bar — they re-appear
   inside the burger menu. Without this, CTA + burger + lang together overflow
   past the viewport edge on 375-px screens. */
@media (max-width:540px){
  .ov-nav-right .ov-btn-primary,
  .ov-nav-right .ov-lang{display:none}
  .ov-nav{gap:10px}
}
.ov-mobile{display:none;border-top:1px solid var(--ov-line);padding:18px 24px 24px;background:var(--ov-cream);position:relative}
.ov-mobile.open{display:block}
.ov-mobile ul{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:14px;font-size:16px;font-weight:500}
.ov-mobile-lang{display:none;width:fit-content;margin-bottom:14px}
/* Burger drawer is the real touch context for the lang toggle — give it a
   full 44px tap target here (the compact top bar stays visually tighter). */
.ov-mobile-lang a{min-height:44px;min-width:48px;justify-content:center;padding:10px 16px;font-size:14px}
@media (max-width:540px){.ov-mobile-lang{display:inline-flex}}
.ov-mobile-close{
  position:absolute;top:8px;right:14px;
  background:transparent;border:0;font-size:28px;line-height:1;cursor:pointer;
  color:var(--ov-muted);padding:6px 10px;
}
.ov-mobile-close:hover{color:var(--ov-ink)}
/* Prevent body scroll while drawer is open. */
body.ov-mobile-open{overflow:hidden}

/* ============ BUTTONS ============ */
.ov-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border-radius:999px;
  font-weight:600;font-size:14.5px;letter-spacing:-.005em;
  border:1px solid transparent;cursor:pointer;
  font-family:inherit;
  transition:transform .15s ease, background .2s, color .2s, box-shadow .2s, border-color .2s;
  white-space:nowrap;
}
.ov-btn:hover{transform:translateY(-1px)}
.ov-btn-primary{background:var(--ov-ink);color:var(--ov-cream);box-shadow:inset 0 0 0 1px #ffffff14, 0 1px 0 #00000020}
.ov-btn-primary:hover{background:#000;color:var(--ov-cream)}
.ov-btn-lime{background:var(--ov-lime);color:var(--ov-ink);box-shadow:0 1px 0 #0e0f1110, inset 0 -2px 0 #0e0f1110}
.ov-btn-lime:hover{background:#bce856;color:var(--ov-ink)}
.ov-btn-ghost{background:transparent;color:var(--ov-ink);border-color:var(--ov-line-2)}
.ov-btn-ghost:hover{background:#0e0f1108}
.ov-btn-ghost-light{background:transparent;color:var(--ov-cream);border-color:#ffffff30}
.ov-btn-ghost-light:hover{background:#ffffff10;color:var(--ov-cream)}
.ov-btn-sm{padding:9px 14px;font-size:13.5px}
.ov-arrow{transition:transform .2s;display:inline-block}
.ov-btn:hover .ov-arrow{transform:translate(2px,-2px)}
/* Keyboard focus rings. Buttons/nav links previously fell back to the UA default;
   ink ring for light surfaces, cream override where buttons sit on the dark CTA card. */
.ov-page .ov-btn:focus-visible,
.ov-lang a:focus-visible,
.ov-nav-links a:focus-visible,
.ov-burger:focus-visible{outline:2px solid var(--ov-ink);outline-offset:3px}
.ov-cta-block .ov-btn:focus-visible{outline-color:var(--ov-cream)}

/* ============ TYPOGRAPHY ============ */
.ov-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;
  background:#0e0f1108;border:1px solid var(--ov-line);
  font-size:13px;color:#3a3a3e;font-weight:500;
}
.ov-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ov-lime-deep);
  box-shadow:0 0 0 3px rgba(166,208,59,.18);
}
.ov-display{font-size:clamp(44px, 8vw, 104px);line-height:.95;letter-spacing:-.035em;font-weight:700}
.ov-h2{font-size:clamp(34px, 4.6vw, 64px);line-height:1;letter-spacing:-.03em;font-weight:700}
.ov-h3{font-size:clamp(22px, 2vw, 28px);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.ov-lede{font-size:clamp(17px, 1.5vw, 20px);color:#3a3a3e;line-height:1.5;max-width:640px;margin-top:18px}
.ov-label{
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;
  color:var(--ov-muted);margin-bottom:18px;display:inline-flex;align-items:center;gap:8px;
}
.ov-label::before{content:"";width:24px;height:1px;background:var(--ov-ink)}

.ov-section{padding:96px 0;}
.ov-section-tight{padding:64px 0}
.ov-section-head{max-width:780px;margin-bottom:56px}
.ov-section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.ov-section-head.center .ov-label{justify-content:center}
@media (max-width:760px){
  .ov-section      {padding:64px 0}
  .ov-section-tight{padding:48px 0}
  .ov-section-head {margin-bottom:36px}
}

/* ============ HERO ============ */
.ov-hero{padding:64px 0 32px;position:relative;overflow:hidden}
.ov-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
@media (max-width:960px){.ov-hero-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:960px) and (min-width:541px){
  .ov-hero-grid > .ov-mock{max-width:520px;justify-self:center;margin:0 auto}
}
@media (min-width:1200px){
  .ov-hero-grid .ov-display{letter-spacing:-.028em}
}
.ov-hero .ov-display em,
.ov-hero .ov-display .ov-serif{color:var(--ov-lime-deep)}
@media (max-width:760px){
  .ov-hero{padding:36px 0 24px}
}
/* min-width:0 stops grid items from refusing to shrink below their content,
   which was letting the huge italic-serif headline punch into the mockup column. */
.ov-hero-grid > *{min-width:0}
.ov-hero h1{margin-top:22px}

/* Hero text-paragraph margins — prefixed with .ov-page so they beat the
   .ov-page p { margin-top:0 } reset earlier in this file. Scoped to the gap
   between the H1 and the paragraphs that follow it. */
.ov-page .ov-hero-lede{margin-top:36px;max-width:560px}
.ov-page .ov-hero-category{margin-top:18px}
/* Hero headline is capped slightly smaller when sharing space with the ledger
   mockup; otherwise the italic accent (e.g. "Wie wat bezit." in NL) overflowed. */
.ov-hero-grid .ov-display{font-size:clamp(40px, 6.4vw, 84px);overflow-wrap:break-word}
.ov-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.ov-trust{display:flex;align-items:center;gap:18px;margin-top:28px;font-size:13.5px;color:var(--ov-muted);flex-wrap:wrap}
.ov-trust .pipe{width:1px;height:14px;background:var(--ov-line-2)}
@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;gap:10px}
  .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:#3a3a3e}
.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,#3a3a3e);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:#3a3a3e;font-weight:500}
.ov-tag.warn{background:rgba(232,91,59,.12);color:#a83a1f}
.ov-tag.warn .d2{background:#e85b3b}
.ov-tag .d2{width:6px;height:6px;border-radius:50%;background:#7ab37a}
.ov-row .owner{color:#3a3a3e}
.ov-row .unowned{color:#a83a1f;font-weight:600}
.ov-row .right{text-align:right;font-variant-numeric:tabular-nums;color:#3a3a3e}

/* 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:#3a3a3e;font-size:13px}
.ov-row .renews{color:var(--ov-muted);font-size:13px}
.ov-row .renews.warn{color:#a83a1f;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). 5-column grid:
   name (with avatar) | type pill | owner | status pill | price.
   Pill columns are `auto` so they size 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 pills. Scoped to .ov-mock-overview so it doesn't
   disturb the legacy 4-col rows. */
.ov-mock-overview .ov-row{
  grid-template-columns:minmax(0,1.7fr) 78px 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,
.ov-mock-overview .ov-type{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:#3a3a3e;
  letter-spacing:.01em;
}
@media (max-width:540px){
  /* Hide the type pill on narrow screens; rest of the row falls back to the
     legacy "name price / owner tag" grid-areas. */
  .ov-mock-overview .ov-row{grid-template-columns:1fr auto}
  .ov-mock-overview .ov-row .type{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-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--ov-lime-deep)}
.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:15px;color:var(--ov-muted);line-height:1.55;letter-spacing:.005em}
.ov-hero-category em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:500;color:var(--ov-ink);font-size:17px}
/* 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:#3a3a3e;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:#888880}
.ov-dark .ov-label::before{background:var(--ov-lime)}
.ov-dark h2,.ov-dark h3{color:var(--ov-cream)}
.ov-dark .ov-lede{color:#aaa6a0}
.ov-dark .ov-h2 em,.ov-dark .ov-display em{color:var(--ov-lime)}

.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:#aaa6a0;line-height:1.5}

.ov-pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@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:var(--ov-ink-2);border:1px solid #ffffff10;border-radius:var(--ov-radius);
  padding:26px;display:flex;flex-direction:column;gap:14px;min-height:200px;
}
.ov-pain-card .qmark{font-family:'Instrument Serif',serif;font-style:italic;font-size:54px;line-height:.4;color:var(--ov-lime);margin-bottom:-2px}
.ov-pain-card h5{font-size:17px;font-weight:600;color:var(--ov-cream)}
.ov-pain-card p{font-size:14.5px;line-height:1.5;color:#cfcbc2}
.ov-pain-card .result{margin-top:auto;padding-top:14px;border-top:1px solid #ffffff14;font-size:13px;color:#888880}
.ov-pain-card .result strong{color:#e8c074;font-weight:600;margin-right:6px}

/* ============ 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-paper);border:1px solid var(--ov-line);border-radius:var(--ov-radius);
  padding:30px;min-height:240px;display:flex;flex-direction:column;
}
.ov-step .n{font-family:'Instrument Serif',serif;font-style:italic;font-size:48px;line-height:1;color:var(--ov-ink);font-weight:400}
.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:#3a3a3e;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-paper)}
  4%,18%{background-color:var(--ov-lime)}
  25%,100%{background-color:var(--ov-paper)}
}
.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}}
.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 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:#3a3a3e;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;
}
.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:#3a3a3e;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}}
.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;
}
.ov-builtby-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(14,15,17,.15)}
.ov-builtby-card .n{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  font-size:32px;line-height:1;color:var(--ov-lime-deep);letter-spacing:-.01em;
}
.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:#3a3a3e;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:#a83a1f;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)}

/* ============ 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:#3a3a3e;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:#3a3a3e;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;
}
.ov-pricing-side > .ov-label,
.ov-pricing-side > .ov-h2,
.ov-pricing-side > .ov-lede,
.ov-pricing-side > .note{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;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}
.ov-tier .price .unit{font-size:14.5px;font-weight:400;color:var(--ov-muted);margin-left:6px}
.ov-tier .desc{margin:0;font-size:14.5px;color:#3a3a3e;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:#3a3a3e;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:#aaa6a0}
.ov-tier.featured .desc,.ov-tier.featured ul{color:#cfcbc2}
.ov-tier.featured li svg{color:var(--ov-lime)}

@media (max-width:980px){
  .ov-tiers{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}

/* ============ 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}
.ov-cta-block h2 em{color:var(--ov-lime)}
.ov-cta-block p{color:#aaa6a0;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:#888880;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)}
.ov-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media (max-width:780px){.ov-footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px}}
.ov-footer h4{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:#3a3a3e}
.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:#a83a1f;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}
.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)}
.ov-prose blockquote{border-left:3px solid var(--ov-lime);padding:6px 0 6px 20px;color:#3a3a3e;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:#cfcbc2;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:#3a3a3e;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-mini-cta h3 em{color:var(--ov-lime)}
.ov-mini-cta p{color:#aaa6a0;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:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(48px,5vw,68px);
  line-height:1;
  color:var(--ov-lime-deep);
  margin-bottom:14px;
  letter-spacing:-.01em;
}
.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-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:20px;
  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}
}

/* 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}
}