/* =========================================================================
   Account Editor — v2

   The language comes from the reference: a warm off-white page, big
   rounded panels (near-black ones with light cards nested inside them),
   a lime accent, a running ticker, stacked case cards and stat cards in
   three tones. The hero and the footer are inherited from the main sheet
   and left alone.
   ========================================================================= */

:root {
  --ov-bg: #f4f2ee;          /* page ground between hero and footer */
  --ov-panel: #f7f6f3;       /* light cards */
  --ov-dark: #111312;        /* the dark panels */
  --ov-dark-2: #1a1d1b;      /* cards inside them */
  --ov-line: rgba(17, 19, 18, 0.12);
  --ov-rule: rgba(255, 255, 255, 0.022);   /* the vertical rules, on dark panels */
  --ov-rule-l: rgba(17, 19, 18, 0.04);     /* and on light ones */
  --ov-line-d: rgba(255, 255, 255, 0.14);
  --ov-ink: #111312;
  --ov-ink-2: rgba(17, 19, 18, 0.62);
  --ov-ink-3: rgba(17, 19, 18, 0.45);
  --ov-lime: #b8f24a;
  --ov-lime-2: #d8ff8a;
  --ov-cream: #f6efd8;
  --ov-r: 26px;              /* the big panel radius */
  --ov-r-sm: 14px;
  --ov-y: clamp(48px, 6vh, 84px);
  /* the gap every section keeps between its heading and what follows */
  --ov-head-gap: clamp(28px, 4vh, 44px);
  /* the pinned blocks keep the same gap on a normal window and only give
     it up when the window is too short to hold them */
  --ov-head-gap-tight: clamp(14px, 4vh, 44px);
  --ov-face: "Plus Jakarta Sans", "Inter", sans-serif;
  /* the four-petal mark the ticker sets between its words */
  --ov-star: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.4-5.8-3-5.8 3 1.1-6.4L2.6 9.4l6.5-.9z' fill='black'/></svg>");
  --ov-petal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.6c1.9 4.3 4.2 6.6 8.5 8.5-4.3 1.9-6.6 4.2-8.5 8.5-1.9-4.3-4.2-6.6-8.5-8.5 4.3-1.9 6.6-4.2 8.5-8.5z' transform='translate(0 1.9)' fill='black'/></svg>");
}

/* every section below the hero shares the ground and the rhythm */
.o-trust, .ov-say, .ov-proof, .ov-work, .ov-num, .ov-how, .ov-stack, .ov-cmp, .ov-more, .o-faq, .ov-cta {
  position: relative; z-index: 4;
  background: var(--ov-bg); color: var(--ov-ink);
  padding-block: var(--ov-y);
}
.o-trust { padding-block: clamp(26px, 3.4vh, 44px); background: #fff; }

/* v2 speaks in its own face, not the v1 condensed caps */
.ov-say__title, .ov-head h2, .ov-work__title, .ov-cmp__title, .ov-how__light h2,
.ov-case__card h3, .ov-app h3, .ov-cta__panel h2, .ov-cta .lc__title, .ov-stack h2, .o-faq .acc__label, .ov-mini__n, .ov-num__row dd,
.ov-step h3 {
  font-family: var(--ov-face) !important;
  text-transform: none !important;
  letter-spacing: -0.025em;
}


/* --------------------------- container system --------------------------
   Measured off the reference: every section keeps a 30px gutter at every
   width, panels pad 32px inside that, and the copy inside a panel stops at
   1200px — which is why at 1440 the text starts 120px in and at 1280 it
   starts 62px in, exactly as theirs does. */
.ov-hdr .wrap,
.ov-hero .wrap, .o-trust .wrap, .ov-say .wrap, .ov-proof .wrap, .ov-work .wrap,
.ov-num .wrap, .ov-how .wrap, .ov-stack .wrap, .ov-cmp .wrap, .ov-more .wrap,
.o-faq .wrap, .ov-cta .wrap,
.ov-ftr .wrap {
  max-width: none; padding-inline: 30px;
}
@media (max-width: 480px) {
  .ov-hdr .wrap, .ov-hero .wrap, .o-trust .wrap, .ov-say .wrap, .ov-proof .wrap,
  .ov-work .wrap, .ov-num .wrap, .ov-how .wrap, .ov-stack .wrap, .ov-cmp .wrap,
  .ov-more .wrap, .o-faq .wrap, .ov-cta .wrap, .ov-ftr .wrap { padding-inline: 20px; }
}

/* a panel pads 32px, and holds its content to 1200px */
.ov-panel {
  padding-block: clamp(30px, 4vw, 64px);
  padding-inline: max(30px, (100% - 1200px) / 2);
  border-radius: var(--ov-r);
}
.ov-hero__panel {
  padding-inline: max(20px, (100% - 1240px) / 2);
}

/* the dark panels stay their own containing block for anything placed
   inside them (the orb, the rules, the pinned job list) */
.ov-hero__panel, .ov-say .ov-panel, .ov-num__panel,
.ov-cmp .ov-panel, .ov-cta__panel, .ov-ftr__panel { position: relative; }

/* --------------------------- shared furniture -------------------------- */

.ov-dark .ov-panel { background: var(--ov-dark); color: #fff; }

.ov-head { max-width: 640px; margin-bottom: var(--ov-head-gap); }
.ov-head h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; font-weight: 700; }
.ov-head p { margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--ov-ink-2); }
.ov-head--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; max-width: none; }

/* the rating's five stars — the mark is the same star the ticker sets
   between its words, cut out of a gold chip */
.ov-stars { display: inline-flex; align-items: center; gap: 2px; flex: none; vertical-align: middle; }
.ov-stars i {
  width: 14px; height: 14px; flex: none; background: #f5b400;
  -webkit-mask: var(--ov-star) center / contain no-repeat;
          mask: var(--ov-star) center / contain no-repeat;
}

.ov-faces { display: inline-flex; flex: none; vertical-align: middle; }
.ov-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ov-dark); }
.ov-faces img + img { margin-left: -12px; }


/* --------------------------------- boot --------------------------------
   The page opens behind a dark curtain: the mark draws itself in from the
   left as it rises, settles, then the curtain lifts off the top of the
   screen. It is time-based, so it can never trap the page — and the
   script drops it from the document once it is gone. */
.ov-boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--ov-dark);
  animation: ov-boot-lift 0.9s cubic-bezier(0.76, 0, 0.24, 1) 1.35s forwards;
}
/* the wrapper carries the grow that hands the page over */
.ov-boot__mark {
  display: block; margin: 0; line-height: 0;
  animation: ov-boot-grow 0.9s cubic-bezier(0.76, 0, 0.24, 1) 1.35s forwards;
}
/* the rise and the blur sit on their own layer, clear of the mark's colour */
.ov-boot__rise {
  display: block;
  animation: ov-boot-set 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ov-boot__mark img {
  display: block; height: clamp(34px, 4.2vw, 54px); width: auto;
  /* the mark carries a coloured dot — on this panel it reads as one white mark */
  filter: brightness(0) invert(1);
  animation: ov-boot-draw 0.85s cubic-bezier(0.65, 0, 0.35, 1) 0.08s both;
}

@keyframes ov-boot-set {
  from { opacity: 0; transform: translateY(0.4em); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* the mark draws in from the left, the way the letters would be set */
@keyframes ov-boot-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
/* it grows into the page as the curtain goes */
@keyframes ov-boot-grow {
  from { transform: none; }
  to   { transform: scale(1.22) translateY(-6%); }
}
@keyframes ov-boot-lift {
  from { transform: none; }
  to   { transform: translateY(-100%); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-boot { animation: ov-boot-fade 0.4s ease 0.5s forwards; }
  .ov-boot__mark, .ov-boot__rise, .ov-boot__mark img { animation: none; }
  @keyframes ov-boot-fade { to { opacity: 0; visibility: hidden; } }
}

/* ------------------------------- header -------------------------------
   A light bar that rides the page: the mark on the left, the links in the
   middle, one dark pill on the right. */
.ov-hdr {
  /* pinned in place the whole way down, same as every inner page — its
     solid ground (below) only fades in once the page has moved */
  position: fixed; inset: 12px 0 auto; z-index: 900;
}
/* the full-width ground: a blurred bar behind the pill that fades in once
   the page has moved, exactly like the inner pages' .pg .ov-hdr::before */
.ov-hdr::before {
  /* top is -14px, not -12px: the homepage's own .ov-hdr sits at a 14px
     inset (further down, in the page-gutters block), 2px more than the
     12px every other page uses, so a flat -12px left a 2px sliver of
     page content showing above the ground on the homepage specifically */
  content: ""; position: absolute; inset: -14px 0 -12px; z-index: 0;
  background: rgba(244, 242, 238, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
  border-bottom: 1px solid rgba(17, 19, 18, 0.07);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.ov-hdr.is-stuck::before { opacity: 1; }
/* past 80px it tucks out of view on the way down, and slides back the
   moment the page scrolls up — the ::before ground bleeds 12px past the
   bar's own box for the blur, plus the bar's own 12px top inset, so a
   flat -100% leaves a sliver of it showing; clear both with margin */
.ov-hdr.is-hide { transform: translateY(calc(-100% - 36px)); }
.ov-hdr.is-armed { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .ov-hdr::before { transition: none; }
  .ov-hdr.is-hide { transform: none; }
  .ov-hdr.is-armed { transition: none; }
}
.ov-hdr__in {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 12px 10px 20px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(17, 19, 18, 0.08);
  box-shadow: 0 18px 40px -26px rgba(17, 19, 18, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.ov-hdr__logo { flex: none; display: flex; }
.ov-hdr__logo img {
  height: 42px; width: auto;
  /* the reference's mark is solid black */
  filter: brightness(0);
}
.ov-hdr__nav { display: none; gap: 34px; }
.ov-hdr__nav a {
  position: relative; font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ov-ink); transition: color 0.25s ease;
}
.ov-hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--ov-ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-hdr__nav a:hover::after { transform: scaleX(1); }
.ov-hdr__nav a:hover { color: var(--ov-ink); }
/* the store's badge, sat just left of the pill on the light bar */
.ov-hdr__bfs {
  flex: none; margin-left: auto; display: none; align-items: center; gap: 8px;
  padding: 8px 15px 8px 11px; border-radius: 999px;
  border: 1px solid rgba(17, 19, 18, 0.14); background: rgba(17, 19, 18, 0.035);
  font-size: 13.5px; letter-spacing: -0.01em; color: var(--ov-ink-2);
}
.ov-hdr__bfs i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.ov-hdr__bfs svg { width: 15px; height: 13px; display: block; }
.ov-hdr__bfs b { font-weight: 700; color: var(--ov-ink); }

/* the pill from the reference: black, fully rounded, with a white disc and
   an arrow riding on its right end */
.ov-hdr__cta {
  position: relative; flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: 12px;
  /* when the badge is shown it takes the auto margin (see the 760px step) */
  padding: 13px 13px 13px 24px; border-radius: 999px;
  background: #101011; color: #fff;
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
  transition: background 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-hdr__cta:hover { background: #24242a; transform: translateY(-1px); }
.ov-hdr__cta i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #101011;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-hdr__cta i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ov-hdr__cta:hover i { transform: rotate(45deg); }

/* ---- the phone's menu ----
   Under 760px the bar has no room for the links, so they move into a panel
   the toggle opens. The bar's pill stands down and the panel carries its
   own, or the row would not fit at all. */
.ov-hdr__menu {
  display: none; place-items: center; flex: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 19, 18, 0.06); color: var(--ov-ink); cursor: pointer;
  transition: background 0.2s ease;
}
.ov-hdr__menu:hover { background: rgba(17, 19, 18, 0.1); }
/* two rules that fold into a cross */
.ov-hdr__menu i {
  position: relative; display: block; width: 17px; height: 2px; border-radius: 2px;
  background: currentColor; transition: background 0.2s ease;
}
.ov-hdr__menu i::before, .ov-hdr__menu i::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-hdr__menu i::before { top: -6px; }
.ov-hdr__menu i::after { top: 6px; }
.ov-hdr__menu[aria-expanded="true"] i { background: transparent; }
.ov-hdr__menu[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.ov-hdr__menu[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); }

.ov-hdr__navcta { display: none; }

/* ---- Features mega menu -------------------------------------------------
   Desktop only: hover or keyboard-focus the trigger and the panel opens,
   no JS required. On a phone the link just goes straight to the features
   index instead of trying to fit the panel in. */
.ov-hdr__drop { position: relative; z-index: 2; }
.ov-hdr__drop > a { display: inline-flex; align-items: center; gap: 5px; }
.ov-hdr__drop-ic { display: grid; place-items: center; width: 13px; height: 13px; transition: transform 0.25s ease; }
.ov-hdr__drop-ic svg { width: 100%; height: 100%; }
.ov-hdr__drop:hover .ov-hdr__drop-ic, .ov-hdr__drop:focus-within .ov-hdr__drop-ic { transform: rotate(180deg); }
/* .ov-hdr__nav carries its own transform (the ≥760px centring trick), which
   makes it the containing block for any position:fixed descendant instead
   of the viewport — so a `top` value here lands ~29px lower than it reads.
   .ov-hdr__drop > a bottom sits at 54.6px in the viewport and .ov-hdr__nav
   itself renders at 29px; both the bridge and the panel below are placed
   relative to that same 29px, not to the viewport, to actually reach the
   trigger with no dead gap in between. */
.ov-hdr__drop::after {
  content: ""; position: fixed; top: 26px; left: 50%;
  width: min(760px, calc(100vw - 48px)); height: 20px;
  transform: translateX(-50%);
}

/* fixed and centred on the viewport, not the trigger — "Features" sits at
   the left edge of the nav group, so centring the panel on the trigger
   itself pushes it into negative x at ordinary desktop widths and the
   left column gets clipped clean off by the browser edge */
/* an ancestor rule elsewhere on the site sets white-space:nowrap on text
   inside the header nav; every line of copy in this panel needs to wrap
   normally regardless, so it's reset once here for the whole panel */
.ov-mega, .ov-mega * { white-space: normal; }
.ov-mega {
  position: fixed; top: 46px; left: 50%;
  width: min(1240px, calc(100vw - 48px));
  display: grid; grid-template-columns: 0.95fr 1.3fr 0.85fr;
  border-radius: 24px; overflow: hidden;
  background: #fff; color: var(--ov-ink);
  border: 1px solid rgba(17, 19, 18, 0.08);
  box-shadow: 0 34px 70px -30px rgba(17, 19, 18, 0.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}
.ov-hdr__drop:hover .ov-mega, .ov-hdr__drop:focus-within .ov-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) { .ov-mega { transition: opacity 0.15s ease, visibility 0.15s; } }

/* .ov-hdr__nav a::after draws a hover-underline meant for the top-level
   links; every link inside the panel is a nested descendant of that same
   selector too, so it has to be switched off here explicitly */
.ov-mega a::after { display: none; }

.ov-mega__col-k { margin: 0 0 8px; padding: 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.ov-mega__list { padding: 14px; display: grid; gap: 2px; align-content: start; }
.ov-mega__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; transition: background 0.2s ease; }
.ov-mega__item:hover { background: rgba(17, 19, 18, 0.045); }
.ov-mega__ico {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--ov-ink); color: var(--ov-lime);
}
.ov-mega__ico svg { width: 16px; height: 16px; }
.ov-mega__t { display: grid; gap: 2px; }
.ov-mega__t b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ov-ink); }
.ov-mega__t small { font-size: 12.5px; line-height: 1.3; color: var(--ov-ink-3); white-space: normal; }
.ov-mega__all {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 6px; padding: 11px 12px; border-radius: 14px; border-top: 1px solid var(--ov-line);
  font-size: 13.5px; font-weight: 600; color: var(--ov-ink);
}
.ov-mega__all svg { width: 13px; height: 13px; }

/* the integrations column: a grid of partner logo tiles, borrowed straight
   from the live site's mega menu */
.ov-mega__int {
  display: flex; flex-direction: column; justify-content: center;
  padding: 14px 18px; border-left: 1px solid var(--ov-line); border-right: 1px solid var(--ov-line);
}
.ov-mega__int-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ov-mega__int-tile {
  display: grid; place-items: center; height: 68px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--ov-line); background: #fff;
}
.ov-mega__int-tile img { max-width: 84%; max-height: 18px; object-fit: contain; }
.ov-mega__int-tile--soon { opacity: 0.45; }
.ov-mega__int-all {
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 11px 12px; font-size: 13.5px; font-weight: 600; color: var(--ov-ink);
}
.ov-mega__int-all svg { width: 13px; height: 13px; }

/* white-space:nowrap leaks in from an ancestor rule elsewhere on the site;
   every text node in the card needs it switched back on explicitly or it
   runs a single line straight past the card's own right edge */
a.ov-mega__promo, a.ov-mega__promo:hover { display: flex; flex-direction: column; padding: 22px; background: var(--ov-panel); color: var(--ov-ink); white-space: normal; }
a.ov-mega__promo * { white-space: normal; }
.ov-mega__promo-k { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ov-ink-3); }
.ov-mega__promo b { margin-top: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ov-ink); }
.ov-mega__promo p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ov-ink-2); }
/* the three fields it actually edits, read straight off its own hero mock —
   real content, not padding for padding's sake */
.ov-mega__promo-chips { display: grid; gap: 6px; margin-top: 16px; }
.ov-mega__promo-chips span {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--ov-line);
  font-size: 12.5px; font-weight: 500; color: var(--ov-ink);
}
.ov-mega__promo-chips i {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ov-ink); color: var(--ov-lime);
}
.ov-mega__promo-chips i svg { width: 10px; height: 10px; }
.ov-mega__promo-stat { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ov-line); font-size: 12.5px; color: var(--ov-ink-3); }
.ov-mega__promo-stat b { font-size: 20px; font-weight: 700; color: var(--ov-ink); }
.ov-mega__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--ov-ink); }
.ov-mega__go svg { width: 13px; height: 13px; }

@media (max-width: 759px) { .ov-mega { display: none; } }

@media (max-width: 759px) {
  .ov-hdr__menu { display: grid; }
  .ov-hdr__cta, .ov-hdr__bfs { display: none; }

  /* the panel drops out of the bar and keeps its shape */
  .ov-hdr__nav {
    display: grid; gap: 2px;
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    padding: 10px; border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(17, 19, 18, 0.08);
    box-shadow: 0 24px 50px -26px rgba(17, 19, 18, 0.5);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
  }
  .ov-hdr__in { position: relative; }
  .ov-hdr__nav.is-open { opacity: 1; visibility: visible; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .ov-hdr__nav { transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.36s; }
  }
  .ov-hdr__nav a {
    padding: 13px 16px; border-radius: 16px; font-size: 16.5px; font-weight: 500;
    color: var(--ov-ink);
  }
  .ov-hdr__nav a::after { display: none; }
  .ov-hdr__nav a:hover { background: rgba(17, 19, 18, 0.05); }
  /* the way in sits at the foot of the panel */
  /* it has to outrank `.ov-hdr__nav a`, which is the more specific selector */
  .ov-hdr__nav a.ov-hdr__navcta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 6px; padding: 14px 18px; border-radius: 16px;
    background: var(--ov-ink); color: #fff; font-weight: 500;
  }
  .ov-hdr__navcta i { font-style: normal; }
  .ov-hdr__nav a.ov-hdr__navcta:hover { background: #24242a; }
}


/* the narrowest phones: the bar's mark and pill step down so they still
   fit the row rather than pushing the page sideways */
@media (max-width: 400px) {
  .ov-hdr .wrap { padding-inline: 14px; }
  .ov-hdr__in { gap: 10px; padding: 8px 8px 8px 14px; }
  .ov-hdr__logo img { height: 30px; }
  .ov-hdr__cta { padding: 10px 10px 10px 16px; gap: 8px; font-size: 14px; }
  .ov-hdr__cta i { width: 26px; height: 26px; }
  .ov-hdr__cta i svg { width: 12px; height: 12px; }
}

/* -------------------------------- hero --------------------------------
   One big light panel with the line centred in it, then a row of shots
   and a dark figure card underneath. */
.ov-hero { position: relative; z-index: 4; padding: 96px 0 var(--ov-y); background: var(--ov-bg); }
.ov-hero__panel {
  padding: clamp(34px, 4vw, 58px) 20px 20px;
  border-radius: var(--ov-r); background: var(--ov-dark); color: #fff; text-align: center;
}
/* the copy keeps its own breathing room; the cards use the panel's 20px */
.ov-hero__rev, .ov-hero__title, .ov-hero__lede, .ov-hero__btns { padding-inline: clamp(4px, 2vw, 28px); }
.ov-hero__btns { margin-bottom: clamp(24px, 3vw, 40px); }
/* the hero opens with the rating rather than a label */
.ov-hero__rev {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-inline: auto; padding: 7px 15px 7px 9px; border-radius: 999px;
  border: 1px solid var(--ov-line-d); background: rgba(255, 255, 255, 0.04);
}
.ov-hero__rev .ov-faces--sm img { width: 24px; height: 24px; border: 2px solid var(--ov-dark); }
.ov-hero__rev .ov-faces--sm img + img { margin-left: -10px; }
.ov-hero__rev .ov-stars { gap: 1px; }
.ov-hero__rev .ov-stars i { width: 13px; height: 13px; }
.ov-hero__rev-t { font-size: 12.5px; letter-spacing: -0.01em; color: #fff; }
.ov-hero__rev-t b { font-weight: 700; color: #fff; }
@media (max-width: 520px) {
  .ov-hero__rev { padding: 8px 14px; }
  .ov-hero__rev-t { font-size: 11.5px; }
}
.ov-hero__title {
  margin: clamp(16px, 2.2vh, 26px) auto 0; max-width: 18ch;
  font-family: var(--ov-face) !important; text-transform: none !important;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.04; font-weight: 700; letter-spacing: -0.035em;
  color: #fff;
}
/* the line under the headline: plain grey copy, no marks */
.ov-hero__lede {
  max-width: 640px; margin: clamp(20px, 3vh, 30px) auto 0;
  font-size: 14.5px; line-height: 1.7; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55); text-align: center;
}
@media (min-width: 810px) { .ov-hero__lede { font-size: 15.5px; } }
@media (min-width: 1200px) { .ov-hero__lede { font-size: 17px; line-height: 1.75; } }

/* a paper sticker on the panel: the corner is peeled back, so the dark
   shows through behind the curl.
   Parked for now — drop the display rule below to bring it back. */
.ov-sticker { display: none; }
.ov-sticker--on {
  position: absolute; z-index: 5; right: clamp(20px, 17vw, 248px); top: 33%;
  display: grid; place-content: center; gap: 2px;
  width: clamp(112px, 10vw, 146px); aspect-ratio: 1; border-radius: 50%;
  background: #d2f0a4; color: var(--ov-ink); text-align: center;
  transform: rotate(-9deg);
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.ov-sticker--on b { font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.ov-sticker--on em { font-style: normal; font-size: clamp(11px, 0.95vw, 14px); letter-spacing: -0.01em; color: rgba(17, 19, 18, 0.78); }

.ov-sticker__peel { position: absolute; right: 0; top: 0; width: 34%; height: 34%; }
/* the bite out of the sticker */
.ov-sticker__peel::before {
  content: ""; position: absolute; inset: 0;
  background: var(--ov-dark); border-radius: 0 50% 0 0;
}
/* and the curl of paper lying over it */
.ov-sticker__peel::after {
  content: ""; position: absolute; left: 6%; top: 4%; right: 8%; bottom: 10%;
  border-radius: 0 60% 0 100%;
  background: linear-gradient(218deg, #ffffff 0%, #f1f1ee 46%, #c9c9c2 100%);
  box-shadow: -6px 8px 12px -6px rgba(0, 0, 0, 0.55);
  transform: rotate(-4deg);
}
@media (max-width: 1100px) { .ov-sticker--on { right: 16px; top: 40%; width: 116px; } }
@media (max-width: 860px) { .ov-sticker--on { display: none; } }

.ov-hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(18px, 2.6vh, 28px); }

/* the hero's pair is built like the header's pill — same shape, same type,
   same circled arrow — flipped for the dark panel it sits on */
.ov-pill {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 13px 13px 24px; border-radius: 999px;
  border: 1px solid transparent; background: #fff; color: #101011;
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-pill:hover { background: #efeee9; transform: translateY(-1px); }
.ov-pill i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #101011; color: #fff;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-pill i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ov-pill:hover i { transform: rotate(45deg); }

.ov-pill--ghost { background: transparent; border-color: var(--ov-line-d); color: #fff; }
.ov-pill--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
.ov-pill--ghost i { background: rgba(255, 255, 255, 0.14); color: #fff; }

.ov-hero__row {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr; gap: 14px;
  /* the cards live inside the black panel, 20px in from every edge */
  margin: 0;
}
.ov-shot { margin: 0; border-radius: var(--ov-r-sm); overflow: hidden; }
.ov-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; aspect-ratio: 21 / 9; }
/* the figure card, drawn like the reference: a dot grid, the number with
   its label beside it, a rule, the line, then the bar row */
.ov-hero__stat {
  display: flex; flex-direction: column; text-align: left;
  padding: 26px; border-radius: 22px;
  background: var(--ov-dark-2); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.02), 0 30px 60px -34px rgba(0, 0, 0, 0.9);
}
/* the order's own run, with the edit landing before the pack */
.ov-flow__tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ov-flow__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ov-lime); box-shadow: 0 0 0 4px rgba(184, 242, 74, 0.18); }
.ov-flow__rail { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.ov-flow__rail li {
  position: relative; padding-top: 24px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.ov-flow__rail li::before {
  content: ""; position: absolute; top: 3px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.16);
}
.ov-flow__rail li::after {
  content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.ov-flow__rail li:last-child::after { display: none; }
.ov-flow__rail .is-on { color: #fff; }
.ov-flow__rail .is-on::before { background: var(--ov-lime); }
.ov-flow__rail .is-on::after { background: var(--ov-lime); }
.ov-flow__rail .is-now::before { box-shadow: 0 0 0 5px rgba(184, 242, 74, 0.22); }
.ov-flow__rail .is-now::after { background: linear-gradient(90deg, var(--ov-lime), rgba(255, 255, 255, 0.12)); }

/* ---- what the card does when it arrives -------------------------------
   The window draws itself: the rail runs out step by step, the nodes land,
   the bars grow out of the floor and the two figures count up. The live
   step keeps breathing afterwards, so the card is never quite still. */
@media (prefers-reduced-motion: no-preference) {
  /* the nodes land in turn */
  .ov-flow__rail li::before { transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.15s + var(--i, 0) * 0.16s); }
  .is-in .ov-flow__rail li::before { transform: scale(1); }
  /* and the line runs out to the next one */
  .ov-flow__rail li::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(0.28s + var(--i, 0) * 0.16s); }
  .is-in .ov-flow__rail li::after { transform: scaleX(1); }
  .ov-flow__rail li span { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease calc(0.3s + var(--i, 0) * 0.16s), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--i, 0) * 0.16s); }
  .is-in .ov-flow__rail li span { opacity: 1; transform: none; }
  .ov-flow__tag { opacity: 0; transform: translateY(4px); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
  .is-in .ov-flow__tag { opacity: 1; transform: none; }

  /* the live step keeps its pulse once it has landed */
  .is-in .ov-flow__rail .is-now::before { animation: ov-step-beat 2.6s ease-out 1.1s infinite; }
  @keyframes ov-step-beat {
    0% { box-shadow: 0 0 0 0 rgba(184, 242, 74, 0.5); }
    60%, 100% { box-shadow: 0 0 0 9px rgba(184, 242, 74, 0); }
  }
  .ov-flow__tag i { animation: ov-tag-beat 2.6s ease-out infinite; }
  @keyframes ov-tag-beat {
    0% { box-shadow: 0 0 0 0 rgba(184, 242, 74, 0.45); }
    60%, 100% { box-shadow: 0 0 0 8px rgba(184, 242, 74, 0); }
  }

  /* the ninety days grow out of the floor, oldest first */
  .ov-spark i { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.55s + var(--i, 0) * 0.045s); }
  .is-in .ov-spark i { transform: none; }

  /* the lines that carry the figures come up with them */
  .ov-hero__say, .ov-hero__sub, .ov-hero__n { opacity: 0; transform: translateY(8px); }
  .is-in .ov-hero__say, .is-in .ov-hero__sub, .is-in .ov-hero__n { opacity: 1; transform: none; }
  .ov-hero__n { transition: opacity 0.6s ease 0.35s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; }
  .ov-hero__say { transition: opacity 0.6s ease 0.45s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s; }
  .ov-hero__sub { transition: opacity 0.6s ease 0.55s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; }
}

.ov-hero__n {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 34px;
}
.ov-hero__n b {
  color: #fff;
  font-family: var(--ov-face); font-weight: 700; letter-spacing: -0.04em;
  font-size: clamp(44px, 4.4vw, 68px); line-height: 1; font-variant-numeric: tabular-nums;
}
.ov-hero__n span { font-size: 14.5px; color: rgba(255, 255, 255, 0.55); }

.ov-hero__say {
  margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--ov-face); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.24; color: #fff;
}

.ov-hero__sub {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 24px; font-size: 14px; color: rgba(255, 255, 255, 0.55);
}
.ov-hero__sub b {
  font-family: var(--ov-face); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1; color: #e7c9ff;
}

/* the ninety-day strip: a real shape, not three fat blocks */
.ov-spark { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; height: 54px; margin-top: 16px; }
.ov-spark i { height: var(--h, 50%); border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.ov-spark i:nth-child(n + 9) { background: rgba(231, 201, 255, 0.55); }

.ov-bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; height: 46px; margin-top: 18px; }
.ov-bars i { height: 62%; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.ov-bars i:nth-child(3), .ov-bars i:nth-child(9) { height: 76%; }
.ov-bars .is-on { height: 100%; background: #e7c9ff; }

/* the rhythm closes up on a phone: 135px between sections is a lot of
   scrolling on a 390px screen */
@media (max-width: 760px) {
  :root { --ov-y: clamp(28px, 3.6vh, 42px); }
}

@media (min-width: 760px) {
  /* dead centre of the bar, whatever sits either side of it */
  .ov-hdr__nav {
    display: flex; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); margin: 0; white-space: nowrap;
  }
  .ov-hero__row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* one wide shot, one figure card beside it */
  .ov-hero__row { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

/* ------------------------------ trust strip ----------------------------
   The reference's: a stack of faces and one two-line sentence, a hairline
   divider, then the client wordmarks sliding past with 60px between them
   and the ground fading in over both ends. */
.o-trust { background: var(--ov-bg); padding-block: clamp(8px, 1.2vh, 16px); }
.o-trust__in { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
/* a grid item will not shrink under its content unless it is told to, and
   the rail's content is a marquee thousands of pixels wide */
.o-trust__in > * { min-width: 0; }

.o-trust__who { display: flex; align-items: center; gap: 20px; }
.o-trust__faces { display: inline-flex; flex: none; }
.o-trust__faces img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--ov-bg);
}
.o-trust__faces img + img { margin-left: -16px; }
.o-trust__who p {
  max-width: 30ch;
  font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ov-ink-2);
}

/* the strip sits inside the same ruled panel the other sections use, so the
   grid lines carry straight through it */
.o-trust__panel {
  position: relative; background: none;
  padding-block: clamp(8px, 1vw, 14px);
}
.o-trust__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.o-trust .ov-rules--light i { background: var(--ov-rule-l); }

.o-trust__rail {
  position: relative; overflow-x: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.o-trust__rail .igm__track { gap: 68px; align-items: center; }
.o-trust__logo { flex: none; display: grid; place-items: center; width: auto; height: 66px; padding: 0; }
.o-trust__logo img {
  max-width: 210px; max-height: 44px; width: auto; height: auto;
  /* the reference's marks are solid black */
  filter: grayscale(1) brightness(0); opacity: 0.82;
  transition: opacity 0.3s ease;
}
.o-trust__logo:hover img { opacity: 1; }

/* ------------------------------ statement ------------------------------
   Drawn from the reference: one dark panel with faint column rules, the
   claim in a column with a phrase lit, a row of square portraits beside a
   small note, then the list — the live job as a filled chip — with a large
   shot and its caption on the right. */



/* no clipping here: a sticky child cannot hold inside an overflow-hidden
   ancestor, and the job list pins */
.ov-say .ov-panel { position: relative; }
.ov-rules { position: absolute; inset: 0; display: flex; justify-content: space-around; pointer-events: none; border-radius: inherit; overflow: hidden; }
.ov-rules i { width: 1px; background: var(--ov-rule); }
.ov-say .ov-panel > *:not(.ov-rules):not(.ov-say__orb) { position: relative; z-index: 1; }
/* the reference holds its content in a column of about 1200px, so the panel
   carries the difference as padding rather than each child being sized */



.ov-say__title {
  /* the reference runs this line across its whole 1200px column */
  margin-top: 26px; max-width: none;
  line-height: 1.26; font-weight: 500; letter-spacing: -0.03em; color: #fff;
}
.ov-say__title em { font-style: normal; color: var(--ov-lime); }

/* the branded orb, rendered the same way as the hero's props: a 36-frame
   sheet stepped by CSS. It rides at the right of the statement. */
.ov-say__orb {
  position: absolute; z-index: 2; display: block; pointer-events: none;
  /* it sits at the right of the statement, just clear of the last line */
  right: 12px; bottom: -238px;
  width: 210px; aspect-ratio: 1;
  background: url("../images/orb-brand-spin.webp") no-repeat;
  /* 72 frames on a 9 x 8 sheet: the column runs, the row advances once per
     pass, so together they walk one whole turn and start over — no reversing */
  background-size: 900% 800%;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.6));
  animation: obj-col 1.5s steps(9, jump-none) infinite,
             obj-row 12s steps(8, jump-none) infinite,
             obj-float 16s ease-in-out infinite;
  will-change: background-position, transform;
}
@media (max-width: 1240px) { .ov-say__orb { width: 156px; right: 0; bottom: -196px; } }
@media (max-width: 760px) { .ov-say__orb { display: none; } }
@media (prefers-reduced-motion: reduce) { .ov-say__orb { animation: none; } }

.ov-say__who { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: clamp(30px, 4vh, 52px); }
.ov-faces { display: inline-flex; gap: 8px; }
.ov-faces img {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover; border: 0;
  margin: 0;
}
/* the app's own mark stands where the shoppers' faces did: the glyph in
   solid black, so it needs a light plate to read on this panel */
.ov-say__mark {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
  background: #fff;
}
.ov-say__mark img { display: block; width: 74%; height: 74%; filter: brightness(0); }
.ov-say__who p { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); }

/* the lower half */
.ov-inner {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  margin-top: clamp(48px, 8vh, 110px);
  padding: 0; border: 0; background: none;
}
.ov-inner__h {
  margin-top: 16px;
  font-family: var(--ov-face) !important; text-transform: none !important;
  font-size: clamp(24px, 2.4vw, 36px); line-height: 1.16; font-weight: 600; letter-spacing: -0.03em; color: #fff;
}
.ov-inner__list ul { list-style: none; margin: clamp(22px, 3vh, 34px) 0 0; padding: 0; }

.ov-pick {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-radius: 12px; cursor: pointer;
  transition: background 0.3s ease;
}
.ov-pick span { font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.55); transition: color 0.3s ease; }
.ov-pick:hover span { color: rgba(255, 255, 255, 0.85); }
/* the live one is a filled chip */
.ov-pick.is-on { background: rgba(255, 255, 255, 0.08); }
.ov-pick.is-on span { color: #fff; }

.ov-inner__shot { margin: 0; }

/* ---------------------- the handset beside the list --------------------
   The same live phone the hero uses: a real screen, not a picture, so the
   four jobs play inside it and every element inside rises into place as the
   live job changes. */
.ov-phone {
  /* the hero's handset: phone.webp is a bezel cutout with a transparent
     screen, so the frame carries the corners and the island. The window is
     measured off it: x 35-704, y 32-1488 of 740x1520. */
  /* it is bounded by the column as well as the window, or a narrow
     phone renders a wider handset than the panel can hold */
  --phone-w: min(322px, 100%);
  position: relative; width: var(--phone-w); margin-inline: auto;
  aspect-ratio: 740 / 1520;
  filter: drop-shadow(0 38px 60px rgba(0, 0, 0, 0.55));
  animation: ov-bob 7s ease-in-out infinite;

  /* the handset palette, rebranded off v2: lime and ink, no violet */
  --ph-violet: var(--ov-ink);
  --ph-violet-deep: #4a5a1c;
  --ph-tint: #eff7dc;
  --ph-green: #2f7a2f;
  --ph-green-soft: #edf7ec;
  --ph-ink: #111312; --ph-ink-2: #55584f; --ph-ink-3: #6f7268;
  --ph-line: #e7e6e0; --ph-line-strong: #d6d5cd;
  --ph-sans: "Plus Jakarta Sans", var(--font-sans);
}
@keyframes ov-bob { 50% { translate: 0 -9px; } }

.ov-phone__bezel { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.ov-phone__screen {
  position: absolute; z-index: 1;
  left: 4.73%; top: 2.11%; width: 90.54%; height: 95.79%;
  border-radius: calc(var(--phone-w) * 0.126);
  overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
  font-family: var(--ph-sans); color: var(--ph-ink);
}
/* the island belongs to the bezel now, so the status row only clears it */
.ov-phone .phone__status { padding: 15px 22px 8px; }
.ov-phone .phone__bar { padding-inline: 18px; }
.ov-phone .phone__mark { display: flex; justify-content: center; }
.ov-phone .phone__mark img { display: block; height: 18px; width: auto; }

/* the action sits where a real app puts it: at the foot of the screen,
   with the home indicator below it */
.ov-phone .phone__view { padding-bottom: 26px; }
.ov-phone .ph-btn { margin-top: auto; }
.ov-phone .ph-btn ~ .ph-btn { margin-top: 6px; }
.ov-phone .ph-btn ~ .ph-fine { margin-top: 0; }
.ov-phone__screen::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; z-index: 3;
  width: 34%; height: 4px; transform: translateX(-50%);
  border-radius: 99px; background: rgba(10, 10, 10, 0.3);
}

/* --- the screen in v2 colours ---------------------------------------- */
.ov-phone .ph-btn { background: var(--ov-lime); color: var(--ov-ink); font-weight: 700; }
.ov-phone .ph-btn--ghost { background: transparent; color: var(--ph-ink-2); }
.ov-phone .ph-offer__tag { background: var(--ov-lime); color: var(--ov-ink); }
.ov-phone .ph-offer__n { color: var(--ov-lime-2); }
.ov-phone .ph-thumb { background: linear-gradient(160deg, #f7f8f2 0%, #eceee2 100%); }
.ov-phone .ph-promo__price { color: var(--ph-ink); }
.ov-phone .ph-delta__n { color: var(--ph-ink); }

/* everything on the live screen arrives in sequence, the way the hero's does */
.ov-phone .jx-view > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-phone .jx-view.is-on > * { opacity: 1; transform: none; }
.ov-phone .jx-view.is-on > *:nth-child(1) { transition-delay: 0.12s; }
.ov-phone .jx-view.is-on > *:nth-child(2) { transition-delay: 0.18s; }
.ov-phone .jx-view.is-on > *:nth-child(3) { transition-delay: 0.24s; }
.ov-phone .jx-view.is-on > *:nth-child(4) { transition-delay: 0.30s; }
.ov-phone .jx-view.is-on > *:nth-child(5) { transition-delay: 0.36s; }
.ov-phone .jx-view.is-on > *:nth-child(6) { transition-delay: 0.42s; }
.ov-phone .jx-view.is-on > *:nth-child(7) { transition-delay: 0.48s; }
/* the primary button settles with a soft press once the screen has landed */
.ov-phone .jx-view.is-on .ph-btn { animation: ov-press 0.7s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ov-press { 0% { transform: scale(0.97); } 55% { transform: scale(1.02); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ov-phone { animation: none; }
  .ov-phone .jx-view > * { transition: none; }
  .ov-phone .jx-view.is-on .ph-btn { animation: none; }
}

.ov-inner__shot figcaption { position: relative; margin-top: 20px; min-height: 3.4em; max-width: 340px; margin-inline: auto; text-align: center; }
.ov-cap {
  position: absolute; left: 0; right: 0; top: 0;
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.5);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-cap.is-on { opacity: 1; transform: none; }

@media (min-width: 900px) {
}
@media (max-width: 899px) {
  .ov-say__title { max-width: none; }
  .ov-inner__shot figcaption { min-height: 5.2em; }
}

/* ------------------------------- ticker -------------------------------- */
/* the ticker is the panel's own foot: it carries the panel's bottom corners,
   so the dark block and the lime strip read as one card */
.ov-say .ov-panel { border-radius: var(--ov-r) var(--ov-r) 0 0; }
.ov-ticker {
  position: relative; z-index: 4; overflow: hidden;
  padding-block: 22px;
  border-radius: 0 0 var(--ov-r) var(--ov-r);
  background: #7d40ff; color: #fff;
}
.ov-ticker .igm__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; }
.ov-ticker li {
  flex: none; display: flex; align-items: center; gap: 34px; padding-right: 34px;
  font-size: 19px; font-weight: 500; letter-spacing: -0.015em; white-space: nowrap;
}
/* a small white mark sits between every pair, the way the reference's does */
.ov-ticker li::before {
  content: ""; flex: none; width: 17px; height: 17px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-mask: var(--ov-petal) center / contain no-repeat;
  mask: var(--ov-petal) center / contain no-repeat;
}

/* ----------------------------- proof cards -----------------------------
   Two cards over one wide dark one, the way the reference lays them out:
   a colour card carrying the headline figure, a quiet card carrying the
   chart, and a dark banner with the case study. */
.ov-proof .ov-head--mid { max-width: 620px; margin-inline: auto; text-align: center; }
.ov-proof .ov-head--mid p { margin-top: 16px; font-size: 17px; line-height: 1.5; }

.ov-proof__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ov-mini {
  position: relative; display: flex; flex-direction: column;
  padding: 34px; border-radius: 22px; background: var(--ov-panel); overflow: hidden;
}

/* --- the yellow card --- */
.ov-mini--butter { background: #fde589; }
.ov-mini__tag {
  align-self: flex-start; padding: 9px 18px; border-radius: 999px;
  background: var(--ov-ink); color: #fff;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.ov-mini__foot { margin-top: auto; padding-top: 40px; }

/* --- the quiet card --- */
.ov-mini--pale {
  background: #fff;
  border: 1px solid rgba(17, 19, 18, 0.08);
  box-shadow: 0 1px 2px rgba(17, 19, 18, 0.04), 0 20px 40px -34px rgba(17, 19, 18, 0.5);
}
.ov-mini--pale .ov-mini__pill { border: 1px solid rgba(17, 19, 18, 0.1); }
.ov-mini--pale .ov-bars i { background: rgba(17, 19, 18, 0.09); }
.ov-mini--pale .ov-bars i.is-on { background: #e7c9ff; }
.ov-mini__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
/* on the narrowest screens the title and its pill cannot share a line — the
   pill has flex: none, so without this it hangs outside the card */
@media (max-width: 380px) {
  .ov-mini__top { flex-direction: column; }
  .ov-mini__pill { align-self: flex-start; }
}
.ov-mini__k { font-size: 20px; line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; color: var(--ov-ink-2); }
.ov-mini__pill {
  flex: none; padding: 9px 16px; border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ov-ink);
}
.ov-mini__n {
  font-size: clamp(50px, 5.4vw, 76px); line-height: 1; font-weight: 700;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.ov-mini__n--mid { margin: auto 0 0; padding-block: clamp(8px, 1.4vh, 18px); text-align: center; }
.ov-mini__p { margin-top: 14px; font-size: 16px; line-height: 1.45; color: var(--ov-ink-2); }
/* the strip gives way before the card's own padding does — it was fixed at
   86px, which pushed the line under it into the bottom padding */
.ov-bars { display: flex; flex: 0 1 auto; min-height: 30px; align-items: stretch; gap: 9px; height: 78px; margin-top: auto; }
.ov-bars i { flex: 1; border-radius: 8px; background: rgba(17, 19, 18, 0.1); }
.ov-bars i.is-on { background: #e7c9ff; }

/* --- the dark banner --- */
.ov-mini--dark { background: var(--ov-dark); color: #fff; padding: 22px; }
/* the banner shows its working: what the year's total is actually made of,
   set on its own surface so it reads as a figure rather than loose text */
.ov-split {
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  padding: 22px 22px 18px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ov-split__t {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.ov-split__t::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.ov-split__bar {
  display: flex; gap: 4px; height: 14px; padding: 3px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.05);
  box-sizing: content-box;
}
.ov-split__bar i { width: var(--w, 25%); border-radius: 999px; }
.ov-split__key { display: grid; margin: 2px 0 0; padding: 0; list-style: none; }
.ov-split__key li {
  display: flex; align-items: center; gap: 11px; padding: 9px 0;
  font-size: 13.5px; color: rgba(255, 255, 255, 0.62);
}
.ov-split__key li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.ov-split__key li::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 3px; }
.ov-split__key b {
  margin-left: auto; font-size: 15px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* four tones, largest share first — the bar's segments and the key's dots
   only, never the rows themselves */
.ov-split__bar .is-1, .ov-split__key .is-1::before { background: var(--ov-lime); }
.ov-split__bar .is-2, .ov-split__key .is-2::before { background: #e7c9ff; }
.ov-split__bar .is-3, .ov-split__key .is-3::before { background: rgba(255, 255, 255, 0.5); }
.ov-split__bar .is-4, .ov-split__key .is-4::before { background: rgba(255, 255, 255, 0.22); }

@media (prefers-reduced-motion: no-preference) {
  /* the bar draws out once the card has arrived */
  .ov-split__bar i { width: 0; transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  .ov-split__bar .is-2 { transition-delay: 0.1s; }
  .ov-split__bar .is-3 { transition-delay: 0.2s; }
  .ov-split__bar .is-4 { transition-delay: 0.3s; }
  .is-in .ov-split__bar i { width: var(--w, 25%); }
}
.ov-mini__say { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 10px 18px; }
.ov-mini--dark .ov-mini__k { font-size: 18px; color: rgba(255, 255, 255, 0.72); }
.ov-mini--dark .ov-mini__n { color: var(--ov-lime); text-shadow: 0 0 46px rgba(184, 242, 74, 0.28); }
/* the banner carries the working behind the headline figure */
.ov-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 26px; justify-content: start; margin: 4px 0 0; }
.ov-stats dt { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.ov-stats dd {
  margin: 5px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.ov-mini__src { margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }

.ov-pill--sm { align-self: flex-start; margin-top: 10px; padding: 9px 9px 9px 22px; font-size: 15px; }
.ov-pill--sm i { width: 34px; height: 34px; }

/* a short window cannot hold the banner at full size, so its inside steps
   down rather than being cut off by the card */
@media (min-width: 900px) and (max-height: 780px) and (prefers-reduced-motion: no-preference) {
  .ov-mini--dark { height: clamp(206px, 33vh, 300px); }
  .ov-mini__say { gap: 6px; padding: 8px 18px 8px 4px; }
  .ov-split { gap: 10px; }
  .ov-split__key { gap: 6px; }
  .ov-split__key li { font-size: 12.5px; }
  .ov-mini--dark .ov-mini__k { font-size: clamp(13px, 2.1vh, 16px); }
  .ov-mini--dark .ov-mini__n { font-size: clamp(28px, 5.6vh, 44px); }
  .ov-stats { gap: clamp(12px, 1.8vw, 22px); margin-top: 0; }
  .ov-stats dt { font-size: 10.5px; }
  .ov-stats dd { margin-top: 3px; font-size: clamp(14px, 2.2vh, 18px); }
  .ov-mini__src { display: none; }
  .ov-pill--sm { margin-top: 4px; padding: 6px 6px 6px 16px; font-size: 13px; }
  .ov-pill--sm i { width: 28px; height: 28px; }
  .ov-pill--sm i svg { width: 12px; height: 12px; }

  /* the two cards above it step down by the same measure */
  .ov-mini--butter, .ov-mini--pale { height: clamp(196px, 32vh, 300px); }
  .ov-mini { padding: clamp(16px, 2.4vh, 30px) 22px clamp(18px, 2.8vh, 30px); }
  .ov-mini__tag { padding: 7px 14px; font-size: 13.5px; }
  .ov-mini__k { font-size: clamp(15px, 2.4vh, 20px); }
  .ov-mini__pill { padding: 7px 13px; font-size: 12.5px; }
  .ov-mini__n { font-size: clamp(30px, 6vh, 76px); }
  .ov-mini__n--mid { padding-block: clamp(6px, 1.4vh, 18px); }
  .ov-mini__p { margin-top: 8px; font-size: clamp(12.5px, 1.9vh, 16px); }
  .ov-mini__foot { padding-top: clamp(10px, 2vh, 24px); }
  .ov-bars { height: clamp(28px, 5.6vh, 80px); }
  .ov-mini__p { line-height: 1.35; }
}

/* The board only pins when the window is at least 800px tall. Below that it
   is an ordinary section, so the cards must take the height their content
   needs — a fixed budget there just clips the breakdown list. */
@media (max-width: 899px), (max-height: 799px) {
  .ov-mini--dark { height: auto; }
  .ov-mini--butter, .ov-mini--pale { height: auto; }
  .ov-mini__src { display: block; }
}

/* --------------------- the cards, dealt one by one ---------------------
   On a wide screen the section holds still and each card rises into place
   as the scroll passes it. Narrow screens just get the reveal. */
.ov-proof__panel { position: relative; background: none; padding-block: 0; }
.ov-proof__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.ov-proof .ov-rules--light i { background: var(--ov-rule-l); }

.ov-proof__track { position: relative; }
[data-pf-card] { opacity: 0; transform: translateY(86px); }
[data-pf-card].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  /* they drift up rather than snap */
  [data-pf-card] { transition: opacity 0.85s ease, transform 1.25s cubic-bezier(0.16, 1, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) { [data-pf-card] { opacity: 1; transform: none; } }

@media (min-width: 820px) {
  .ov-proof__grid { grid-template-columns: 1fr 1fr; }
  .ov-mini--butter { aspect-ratio: 1.07; }
  .ov-mini--dark {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    /* the two halves read as two thoughts, so they keep their distance */
    gap: clamp(46px, 6.5vw, 104px); align-items: center;
  }
  /* a hairline down the middle of that gap */
  .ov-mini--dark .ov-mini__say {
    position: relative; padding: 10px 24px 10px 0;
  }
  .ov-mini--dark .ov-mini__say::before {
    content: ""; position: absolute; top: 4%; bottom: 4%;
    left: calc(-0.5 * clamp(46px, 6.5vw, 104px));
    width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  }
}

@media (min-width: 900px) and (min-height: 800px) and (prefers-reduced-motion: no-preference) {
  .ov-proof { padding-block: 0; }
  .ov-proof__track { height: calc(var(--n, 3) * 52vh + 28vh); }
  .ov-proof__pin {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(14px, 3vh, 44px);
  }
  /* the whole board is budgeted against the window, so nothing is cut */
  .ov-proof .ov-head { margin-bottom: var(--ov-head-gap-tight); }
  /* the heading keeps the page's own scale, like every other section */
  .ov-proof .ov-head--mid p { margin-top: clamp(8px, 1.4vh, 16px); font-size: clamp(14px, 1.9vh, 17px); }
  .ov-proof__grid { gap: clamp(12px, 1.8vh, 20px); }
  .ov-mini { padding: clamp(20px, 3vh, 34px); }
  .ov-mini--butter, .ov-mini--pale { height: clamp(212px, 34vh, 324px); }
  .ov-mini--butter { aspect-ratio: auto; }
  .ov-mini--dark { height: clamp(232px, 37vh, 356px); padding: clamp(16px, 2.4vh, 26px); }
  .ov-mini__say { gap: clamp(6px, 1.1vh, 14px); }
  .ov-stats { gap: clamp(16px, 2.4vw, 30px); }
  .ov-stats dd { font-size: clamp(16px, 2.6vh, 22px); }
  .ov-mini__n { font-size: clamp(38px, 6.4vh, 76px); }
  .ov-mini__k { font-size: clamp(15px, 2.2vh, 20px); }
  .ov-mini__p { margin-top: clamp(8px, 1.4vh, 16px); font-size: clamp(13px, 1.8vh, 16px); }
  .ov-bars { height: clamp(40px, 7.6vh, 86px); }
  .ov-mini__shot { height: 100%; }
  .ov-mini__shot img { aspect-ratio: auto; height: 100%; }
  .ov-mini__foot { padding-top: clamp(16px, 3vh, 40px); }

  /* the breakdown card is budgeted against the window like the rest */
  .ov-split { gap: clamp(7px, 1.2vh, 16px); padding: clamp(14px, 2.1vh, 22px) clamp(16px, 2vw, 22px) clamp(12px, 1.7vh, 18px); }
  .ov-split__t { font-size: clamp(10px, 1.3vh, 11.5px); }
  .ov-split__bar { height: clamp(10px, 1.6vh, 14px); }
  .ov-split__key li { padding: clamp(5px, 0.95vh, 9px) 0; font-size: clamp(12px, 1.7vh, 13.5px); }
  .ov-split__key b { font-size: clamp(13px, 1.9vh, 15px); }
}

/* -------------------------------- work ---------------------------------
   A title with one pill beside it, then case cards: a full-bleed picture
   with a dark card sitting inside its right-hand side. They arrive from
   the bottom as the scroll reaches them. */
.ov-work__panel { position: relative; background: none; padding-block: 0; }
.ov-work__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.ov-work .ov-rules--light i { background: var(--ov-rule-l); }

.ov-work__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: var(--ov-head-gap);
}
.ov-work__title { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; font-weight: 700; }
.ov-pill--ink { background: #101011; color: #fff; }
.ov-pill--ink:hover { background: #24242a; }
.ov-pill--ink i { background: #fff; color: #101011; }

.ov-case { position: relative; margin-top: clamp(16px, 2.4vh, 26px); }
.ov-case__shot { margin: 0; border-radius: 26px; overflow: hidden; }
.ov-case__shot img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
/* this one is a tall portrait in a landscape frame, and the part worth
   showing is at its foot */
.ov-case__shot img[src="new2.avif"] { object-position: 50% 100%; }
.ov-case__card {
  /* it overlays the shot, so it takes its own layer — a promoted image
     underneath would otherwise paint straight over it */
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  margin: -46px 16px 0; padding: 30px;
  border-radius: 26px; background: #0b0b0c; color: #fff;
}
.ov-case__k { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-case__k span {
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82);
  font-size: 14px; font-weight: 400; letter-spacing: 0;
}
.ov-case__card h3 { margin-top: 22px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.03em; }
.ov-case__p { margin-top: 12px; max-width: 34ch; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }
.ov-case__fig {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ov-case__n {
  font-family: var(--ov-face); font-size: clamp(32px, 3.2vw, 46px); font-weight: 700;
  line-height: 1; letter-spacing: -0.03em; color: var(--ov-lime); font-variant-numeric: tabular-nums;
}
.ov-case__cap { font-size: 15px; color: rgba(255, 255, 255, 0.58); }
.ov-case__cta { margin-top: 20px; background: #fff; color: var(--ov-ink); }
.ov-case__cta i { background: #101011; color: #fff; }

/* they rise into place, one card at a time */
.ov-work__track { position: relative; }
[data-wk-card] { opacity: 0; transform: translateY(80px); }
[data-wk-card].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-wk-card] { transition: opacity 0.8s ease, transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) { [data-wk-card] { opacity: 1; transform: none; } }

/* --------- on a wide screen the section holds and deals the deck -------
   The block pins, each case slides up over the one before it, and once the
   last one has landed the whole section scrolls away. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ov-work { padding-block: 0; }
  .ov-work__track { height: calc(var(--n, 3) * 52vh + 12vh); }
  .ov-work__pin {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(14px, 3vh, 44px);
  }
  .ov-work__head { margin-bottom: var(--ov-head-gap-tight); }
  /* the deck clips, so the next case is only seen as it slides up */
  .ov-work__deck { position: relative; flex: none; height: clamp(330px, 62vh, 586px); overflow: hidden; border-radius: 26px; }

  .ov-case {
    position: absolute; inset: 0; margin: 0;
    opacity: 1; transform: translateY(104%);
    transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ov-case.is-in { transform: none; }
  .ov-case:nth-child(1) { z-index: 1; }
  .ov-case:nth-child(2) { z-index: 2; }
  .ov-case:nth-child(3) { z-index: 3; }
  .ov-case__shot { height: 100%; }
  .ov-case__shot img { height: 100%; aspect-ratio: auto; }
  .ov-case__card { height: calc(100% - 20px); padding: clamp(20px, 3.4vh, 30px); }
  .ov-case__card h3 { margin-top: clamp(12px, 2.4vh, 22px); font-size: clamp(24px, 3.4vh, 36px); }
  .ov-case__p { margin-top: clamp(8px, 1.4vh, 12px); font-size: clamp(14px, 1.9vh, 16px); }
  .ov-case__fig { padding-top: clamp(14px, 2.4vh, 24px); }
  .ov-case__n { font-size: clamp(28px, 4.4vh, 46px); }
  .ov-case__cta { margin-top: clamp(12px, 2vh, 20px); }
}

/* ------------- below 900px the deck is a swipe slider -----------------
   The pinned deal only works when the block can hold the window. On a phone
   the three cases sit side by side and snap, with the next one peeking so it
   reads as a slider rather than a stack. */
@media (max-width: 899px) {
  .ov-work__deck {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .ov-work__deck::-webkit-scrollbar { display: none; }
  .ov-case { flex: 0 0 88%; margin-top: 0; scroll-snap-align: center; }

  .ov-wk-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .ov-wk-dots button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(17, 19, 18, 0.18); transition: background 0.25s ease, width 0.3s ease;
  }
  .ov-wk-dots button.is-on { width: 22px; border-radius: 999px; background: var(--ov-ink); }
}
@media (min-width: 900px) { .ov-wk-dots { display: none; } }

@media (min-width: 900px) {
  .ov-case { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ov-case__shot, .ov-case__card { grid-area: 1 / 1; }
  .ov-case__shot img { aspect-ratio: 16 / 8.2; }
  .ov-case__card {
    justify-self: end; align-self: center;
    width: min(400px, 36%); height: calc(100% - 20px);
    margin: 0 10px 0 0; padding: 30px;
    border-radius: 26px;
  }
}

/* ------------------------------- numbers -------------------------------
   The line says paper trail, so the figures are printed like one: a light
   receipt on the dark panel, leaders running out to each number, a total
   under the rule and a torn edge at the foot. */
.ov-num { padding-block: clamp(40px, 5vh, 72px); }
/* the section sits on the page ground now: no panel colour of its own */
.ov-num__panel {
  position: relative; background: none; color: var(--ov-ink);
  padding-block: clamp(20px, 3vh, 40px);
}
.ov-num__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.ov-num .ov-rules--light i { background: var(--ov-rule-l); }

.ov-num__in { display: grid; gap: clamp(28px, 4vh, 48px); }
.ov-num__head h2 {
  margin-top: 16px;
  font-family: var(--ov-face) !important; text-transform: none !important;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em;
  color: var(--ov-ink);
}
.ov-num__lede { margin-top: 16px; max-width: 34ch; font-size: 16px; line-height: 1.55; color: var(--ov-ink-2); }
.ov-num__head .ov-faces--sm { margin-top: 22px; }
.ov-num__head .ov-faces--sm img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ov-bg); }
.ov-num__head .ov-faces--sm img + img { margin-left: -12px; }

/* --- the receipt --- */
.ov-rcpt {
  position: relative; align-self: start;
  padding: clamp(22px, 3vh, 30px) clamp(22px, 3vw, 32px) clamp(30px, 4vh, 40px);
  background: #ffffff; color: var(--ov-ink);
  border: 1px solid rgba(17, 19, 18, 0.08); border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 30px 60px -40px rgba(17, 19, 18, 0.55);
}
.ov-rcpt__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px dashed rgba(17, 19, 18, 0.28);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ov-ink-3);
}
.ov-rcpt__top span:first-child { color: var(--ov-ink); }

.ov-rcpt__list { margin: 0; }
.ov-rcpt__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: clamp(12px, 1.8vh, 18px) 0;
  border-bottom: 1px dashed rgba(17, 19, 18, 0.16);
}
/* the leader: a run of dots between the label and its figure */
.ov-rcpt__row::after {
  content: ""; order: 1; flex: 1; height: 1px; margin-bottom: 5px;
  background-image: radial-gradient(circle, rgba(17, 19, 18, 0.35) 1px, transparent 1px);
  background-size: 6px 1px; background-repeat: repeat-x;
}
.ov-rcpt__row dt { order: 0; font-size: clamp(15px, 1.2vw, 17px); color: var(--ov-ink-2); white-space: nowrap; }
.ov-rcpt__row dd {
  order: 2; margin: 0;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.ov-rcpt__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: clamp(14px, 2vh, 20px) 0 0; padding-top: clamp(14px, 2vh, 20px);
  border-top: 2px solid var(--ov-ink);
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ov-ink-2);
}
.ov-rcpt__total b {
  font-family: var(--ov-face); font-size: clamp(30px, 3.2vw, 42px); font-weight: 800;
  letter-spacing: -0.04em; text-transform: none; color: var(--ov-ink); font-variant-numeric: tabular-nums;
}
.ov-rcpt__note { margin: 14px 0 0; font-size: 12px; color: var(--ov-ink-3); }

/* the torn foot, so it reads as paper rather than a card */
.ov-rcpt__tear {
  position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background:
    linear-gradient(45deg, transparent 50%, #ffffff 51%) 0 0 / 20px 10px repeat-x,
    linear-gradient(-45deg, transparent 50%, #ffffff 51%) 10px 0 / 20px 10px repeat-x;
  transform: scaleY(-1);
}

/* the rows print one after another */
[data-num-card] { opacity: 0; transform: translateY(14px); }
[data-num-card].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-num-card] { transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) { [data-num-card] { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .ov-num__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
}

/* --------------------------------- how ---------------------------------
   A heavy two-line title with the copy set against it, then four white
   cards stepping down across the row, each with a ruler along its top. */
.ov-how__panel { position: relative; background: none; padding-block: 0; }
.ov-how__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.ov-how .ov-rules--light i { background: var(--ov-rule-l); }

.ov-how__head { display: grid; gap: 18px; margin-bottom: var(--ov-head-gap); }
.ov-how__title {
  /* exactly the other section headings: same face, same scale, no caps */
  font-family: var(--ov-face) !important; text-transform: none !important;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em;
}
/* the sticker sits between the line and the lede, slapped on at an angle */
.ov-how__sticker {
  justify-self: start; width: clamp(104px, 11vw, 148px); height: auto;
  transform: rotate(-7deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ov-how__sticker { animation: ov-sticker 7s ease-in-out infinite; }
  @keyframes ov-sticker {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-6px); }
  }
}
.ov-how__lede { max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--ov-ink); }
.ov-how__lede em { font-style: normal; color: var(--ov-ink-3); }

.ov-how__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ov-step {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px 28px; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(17, 19, 18, 0.05), 0 20px 40px -30px rgba(17, 19, 18, 0.6);
}
/* the ruler along the top edge */
.ov-step__rule {
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  border-radius: 16px 16px 0 0;
  background: repeating-linear-gradient(90deg, rgba(17, 19, 18, 0.32) 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 55%, transparent 100%);
}
.ov-step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ov-step__dots { display: inline-flex; gap: 5px; }
.ov-step__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 19, 18, 0.22); }
.ov-step__dots i.is-on { background: var(--ov-ink); }
.ov-step__w { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-ink-3); }

.ov-step__i { display: block; margin-top: clamp(40px, 7vh, 88px); color: var(--ov-ink); }
.ov-step__i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-step h3 { margin-top: 16px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ov-step__p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ov-ink-2); }

/* they arrive one after another, step down across the row, and then the
   scroll walks through them: each ruler fills, its dot lights, the card
   lifts — so the row reads as a timeline rather than four stills */
[data-hw-card] {
  --hw-shift: 0px; --hw-lift: 0px;
  opacity: 0; transform: translateY(46px);
}
[data-hw-card].is-in { opacity: 1; transform: translateY(calc(var(--hw-shift) + var(--hw-lift))); }
@media (prefers-reduced-motion: no-preference) {
  [data-hw-card] {
    transition: opacity 0.7s ease,
                transform 1s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-hw-card] { opacity: 1; transform: translateY(var(--hw-shift)); }
}

/* the ruler fills as the scroll passes the card */
.ov-step__rule::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--fill, 0%);
  background: repeating-linear-gradient(90deg, var(--ov-ink) 0 1px, transparent 1px 7px);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-step.is-live { --hw-lift: -10px; box-shadow: 0 2px 4px rgba(17, 19, 18, 0.06), 0 34px 60px -34px rgba(17, 19, 18, 0.75); }
.ov-step .ov-step__dots i { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease; }
.ov-step.is-live .ov-step__dots i.is-on { transform: scale(1.7); }
.ov-step__i { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left center; }
.ov-step.is-live .ov-step__i { animation: hw-pop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hw-pop { 0% { transform: scale(0.82) translateY(4px); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ov-step__rule::after, .ov-step .ov-step__dots i, .ov-step__i { transition: none; }
  .ov-step.is-live .ov-step__i { animation: none; }
}

@media (min-width: 700px) {
  .ov-how__row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  /* three columns now: the line, the sticker between them, the lede */
  /* the three share one centre line, so the sticker sits level with the
     heading rather than hanging below it */
  .ov-how__head { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 34px; }
  .ov-how__sticker { justify-self: center; }
  .ov-how__lede { justify-self: end; text-align: left; }
  .ov-how__row { grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
  /* the staircase: each card sits a little lower than the one before it */
  .ov-step:nth-child(2) { --hw-shift: 26px; }
  .ov-step:nth-child(3) { --hw-shift: 52px; }
  .ov-step:nth-child(4) { --hw-shift: 78px; }
  .ov-how__row { margin-bottom: 78px; }
}

/* ------------------------------- compare -------------------------------
   A scoreboard rather than two lists: every line is one measure, the old
   way on the left, ours on the right, and the change chipped at the end.
   A quiet bar under each row carries how far the gap is. */
.ov-cmp__head { display: grid; gap: 22px; align-items: end; }
.ov-cmp__title { margin-top: 20px; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04; font-weight: 700; color: #fff; }
.ov-cmp__note { max-width: 42ch; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); }
.ov-cmp__note b { color: #fff; font-weight: 600; }

.ov-vs { margin-top: var(--ov-head-gap); }
.ov-vs__head, .ov-vs__row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) 34px minmax(0, 0.9fr) auto;
  align-items: center; gap: 14px;
}
.ov-vs__head {
  padding: 0 14px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.ov-vs__row {
  position: relative; padding: 20px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.35s ease;
}
.ov-vs__row:hover { background: rgba(255, 255, 255, 0.04); }
.ov-vs__k { font-size: 17px; line-height: 1.35; color: #fff; }
.ov-vs__old { font-size: 16px; color: rgba(255, 255, 255, 0.45); }
.ov-vs__arrow { display: grid; place-items: center; color: rgba(255, 255, 255, 0.3); }
.ov-vs__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ov-vs__new {
  font-family: var(--ov-face); font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ov-lime); font-variant-numeric: tabular-nums;
}
.ov-vs__delta {
  justify-self: end; padding: 7px 13px; border-radius: 999px;
  background: rgba(184, 242, 74, 0.14); color: var(--ov-lime-2);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
/* the gap, drawn as a hairline that grows when the row arrives */
.ov-vs__bar {
  position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.ov-vs__bar i {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, rgba(184, 242, 74, 0.35), var(--ov-lime));
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-vs-row].is-in .ov-vs__bar i { width: var(--w, 50%); }

[data-vs-row] { opacity: 0; transform: translateY(26px); }
[data-vs-row].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-vs-row] { transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease; }
}
@media (prefers-reduced-motion: reduce) {
  [data-vs-row] { opacity: 1; transform: none; }
  .ov-vs__bar i { transition: none; width: var(--w, 50%); }
}

/* the close: a word from a store, and the net beside it */
.ov-cmp__foot { display: grid; gap: 16px; margin-top: clamp(26px, 4vh, 46px); }
/* the card matches the lime one beside it, so the quote is set as the
   pull-quote it is: the rating opens it, the words carry it, the person
   closes it out at the foot */
.ov-quote {
  display: flex; flex-direction: column; margin: 0; padding: 28px 26px;
  border-radius: 18px; background: var(--ov-dark-2);
}
.ov-quote .ov-stars { gap: 2px; }
.ov-quote .ov-stars i { width: 15px; height: 15px; }
/* the reviews are stacked in one cell, so the card keeps the height of the
   longest one and nothing jumps as they change over */
.ov-quote__stack { display: grid; flex: 1; margin-top: 16px; }
.ov-quote__item {
  grid-area: 1 / 1; display: flex; flex-direction: column; margin: 0;
  opacity: 0; visibility: hidden;
}
.ov-quote__item.is-on { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .ov-quote__item { transform: translateY(8px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s; }
  .ov-quote__item.is-on { transform: none; }
}
.ov-quote blockquote {
  margin: 0; max-width: 30ch;
  font-size: clamp(20px, 2.1vw, 30px); line-height: 1.28; letter-spacing: -0.03em;
  font-weight: 500; color: #fff;
}
.ov-quote figcaption {
  display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 24px;
  font-size: 13.5px; color: rgba(255, 255, 255, 0.5);
}
.ov-quote figcaption img { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }

.ov-net {
  display: flex; flex-direction: column; padding: 28px 26px;
  border-radius: 18px; background: var(--ov-lime); color: var(--ov-ink);
}
.ov-net__k { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(17, 19, 18, 0.6); }
.ov-net__n {
  margin-top: 12px; font-family: var(--ov-face);
  font-size: clamp(40px, 4.4vw, 62px); line-height: 1; font-weight: 700; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.ov-net__p { margin-top: 12px; max-width: 30ch; font-size: 15px; line-height: 1.45; color: rgba(17, 19, 18, 0.7); }
/* it keeps the pill's own padding — a zeroed top made it sit lopsided */
.ov-net__cta { margin-top: auto; align-self: flex-start; background: var(--ov-ink); color: #fff; }
/* it carries its own dark ground, so it needs its own hover — the pill's
   default one lightens the background and the white label disappears */
.ov-net__cta:hover { background: #24242a; }
.ov-net__cta i { background: #fff; color: var(--ov-ink); }

@media (min-width: 900px) {
  .ov-cmp__head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 40px; }
  .ov-cmp__note { justify-self: end; }
  .ov-cmp__foot { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 16px; }
  .ov-net__cta { margin-top: 26px; }
}
@media (max-width: 899px) {
  .ov-vs__head { display: none; }
  .ov-vs__row { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 12px; }
  .ov-vs__k { grid-column: 1 / -1; font-size: 16px; }
  .ov-vs__arrow { display: none; }
  .ov-vs__old { font-size: 15px; }
  .ov-vs__new { font-size: 19px; }
  .ov-vs__delta { grid-column: 2; grid-row: 2; }
}


/* -------------------------------- extras -------------------------------
   The other four apps, as cards that answer to the cursor: the icon fills,
   a lime wash rises from the corner and the arrow steps out. */
.ov-more__panel { position: relative; background: none; padding-block: 0; }
.ov-more__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.ov-more .ov-rules--light i { background: var(--ov-rule-l); }

/* the heading sits big and centred over the row */
.ov-more__head {
  display: grid; justify-items: center; text-align: center;
  margin-bottom: 0;
}
.ov-more__head h2 {
  font-family: var(--ov-face) !important; text-transform: none !important;
  font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em;
}
.ov-more__head p { margin-top: 16px; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--ov-ink-2); }
.ov-more__head .ov-pill { margin-top: 22px; }

/* --------------------------- the other apps ----------------------------
   Four cards in one composition: a tall dark one that carries the flagship
   and its portrait, a column of numbers beside it, and two small panels
   stacked on the right — a dial and a bar chart. Nothing moves on its own. */
.ov-more__bento {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin: var(--ov-head-gap) 0 0; padding: 0; list-style: none;
}

.ov-app {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 24px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(17, 19, 18, 0.07);
  box-shadow: 0 1px 2px rgba(17, 19, 18, 0.04), 0 18px 38px -32px rgba(17, 19, 18, 0.5);
  transition: box-shadow 0.5s ease, border-color 0.4s ease;
}
.ov-app:hover { box-shadow: 0 2px 4px rgba(17, 19, 18, 0.05), 0 30px 56px -36px rgba(17, 19, 18, 0.6); }

/* the small label every quiet card opens with */
.ov-app__tag {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ov-ink-3);
}
.ov-app__tag i { width: 4px; height: 4px; border-radius: 50%; background: var(--ov-lime); }

/* ---- 01 · the dark one, with the portrait --------------------------- */
.ov-app--lead {
  justify-content: space-between; padding: 26px 28px;
  background: #0b0c0b; border-color: rgba(255, 255, 255, 0.08); color: #fff;
}
.ov-app__shot {
  /* she fills the card, head at the top edge, cut off at the bottom */
  position: absolute; right: 0; bottom: -4%; z-index: 0;
  height: 104%; width: auto; object-fit: contain; object-position: bottom right;
  pointer-events: none; user-select: none;
}
.ov-app--lead > *:not(.ov-app__shot) { position: relative; z-index: 1; }
.ov-app__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ov-app__eyebrow { display: grid; gap: 5px; margin: 0; font-size: 15px; font-weight: 600; }
.ov-app__eyebrow span { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
.ov-app__plus { font-size: 24px; line-height: 1; color: rgba(255, 255, 255, 0.7); }

/* the name sits over the portrait, the words and the way in share the line under it */
.ov-app__base {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: end; gap: 26px 24px;
}
.ov-app__big {
  grid-column: 1 / -1; grid-row: 1; margin: 0; min-width: 0;
  font-size: clamp(34px, 3.9vw, 54px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.96;
}
.ov-app__say { grid-column: 2; grid-row: 2; display: grid; gap: 7px; justify-items: end; }
.ov-app__lede {
  margin: 0; max-width: 30ch; text-align: right;
  font-size: clamp(14px, 1.15vw, 16.5px); line-height: 1.42; color: #fff;
}
.ov-app__sign { margin: 0; text-align: right; font-size: 12.5px; color: rgba(255, 255, 255, 0.45); }
.ov-app__live {
  grid-column: 1; grid-row: 2; display: inline-flex; align-items: center; gap: 8px; align-self: end;
  font-size: 15px; font-weight: 500; color: #fff; white-space: nowrap;
}
.ov-app__live i { display: grid; place-items: center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ov-app__live svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ov-app__live:hover i { transform: translate(2px, -2px); }

/* ---- 02 · the numbers, and what a merchant made of them -------------- */
.ov-app--metrics { gap: 22px; }
.ov-app__rings {
  position: absolute; right: -22%; top: -14%; width: 118%; aspect-ratio: 1; z-index: 0; pointer-events: none;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(17, 19, 18, 0.07) 0 1px, transparent 1px 58px);
  opacity: 0.9;
}
.ov-app--metrics > *:not(.ov-app__rings) { position: relative; z-index: 1; }
.ov-kpi { display: grid; gap: 7px; }
.ov-kpi__k { margin: 0; font-size: 13.5px; color: var(--ov-ink-3); }
.ov-kpi__v { margin: 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.ov-kpi__v em { font-style: normal; font-weight: 500; font-size: 0.52em; color: var(--ov-ink-3); }

.ov-aq {
  margin: auto 0 0; padding: 0; display: grid; gap: 10px;
  background: none; border: 0; border-radius: 0; color: inherit; box-shadow: none;
}
.ov-aq__stars { margin: 0; font-size: 11px; letter-spacing: 2px; color: #f5b400; }
.ov-aq blockquote {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0; quotes: none;
  font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5; color: var(--ov-ink-2);
}
.ov-aq blockquote::before, .ov-aq blockquote::after { content: none; }
.ov-aq figcaption { background: none; padding: 0; display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.ov-aq figcaption img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ov-aq figcaption span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.ov-aq figcaption i { width: 3px; height: 3px; border-radius: 50%; background: rgba(17, 19, 18, 0.3); }

/* ---- 03 · the dial ---------------------------------------------------- */
.ov-app--gauge {
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center;
  gap: 10px; text-align: center;
}
.ov-app--gauge .ov-app__tag { justify-self: start; }
.ov-dial {
  position: relative; display: grid; place-items: center;
  width: clamp(78px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--ov-ink) calc(var(--v, 0) * 1%), rgba(17, 19, 18, 0.09) 0);
}
.ov-dial::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.ov-dial span { position: relative; z-index: 1; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.03em; }
.ov-dial__t { margin: 0; font-size: clamp(14px, 1.15vw, 16px); font-weight: 700; letter-spacing: -0.02em; }
.ov-dial__p { margin: 0; max-width: 30ch; font-size: clamp(11.5px, 0.95vw, 13px); line-height: 1.45; color: var(--ov-ink-3); }

/* ---- 04 · the bars ---------------------------------------------------- */
.ov-app--chart { gap: 4px; }
.ov-app__count { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ov-app__delta { padding: 4px 9px; border-radius: 999px; background: rgba(17, 19, 18, 0.07); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.ov-app__sub { margin: 7px 0 0; font-size: 12.5px; color: var(--ov-ink-3); }

.ov-chart { display: flex; align-items: flex-end; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; height: clamp(86px, 11vh, 118px); }
.ov-chart li {
  position: relative; flex: 1; height: var(--h, 40%); min-height: 0;
  border-radius: 7px; background: #f2f1ed; display: flex; align-items: flex-end; justify-content: center;
}
.ov-chart i {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding-bottom: 8px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ov-ink-3);
}
.ov-chart .is-top { background: var(--ov-ink); }
.ov-chart .is-top i { color: #fff; }
.ov-chart__x { display: flex; gap: 6px; margin: 9px 0 0; }
.ov-chart__x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--ov-ink-3); }

/* ---- what moves ------------------------------------------------------
   The cards arrive in turn, then each one plays its own piece: the dial
   sweeps, the bars grow, the numbers run up and the stars land one by one.
   Everything is once-only, on the way in. */
@media (prefers-reduced-motion: no-preference) {
  [data-app-in] { opacity: 0; transform: translateY(22px); }
  [data-app-in].is-in { opacity: 1; transform: none; }
  [data-app-in] {
    transition: opacity 0.7s ease var(--d, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s),
                box-shadow 0.5s ease;
  }

  /* the bars grow out of the floor, left to right */
  .ov-chart li { height: 0; transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--bd, 0s); }
  .is-in .ov-chart li { height: var(--h, 40%); }
  .ov-chart li { min-height: 0; }
  .ov-chart li:nth-child(1) { --bd: 0.26s; }
  .ov-chart li:nth-child(2) { --bd: 0.34s; }
  .ov-chart li:nth-child(3) { --bd: 0.42s; }
  .ov-chart li:nth-child(4) { --bd: 0.50s; }
  .ov-chart li:nth-child(5) { --bd: 0.58s; }
  .ov-chart li:nth-child(6) { --bd: 0.66s; }
  .ov-chart i { opacity: 0; transition: opacity 0.5s ease calc(var(--bd, 0s) + 0.45s); }
  .is-in .ov-chart i { opacity: 1; }

  /* the stars land one at a time */
  .ov-aq__stars span { display: inline-block; opacity: 0; transform: translateY(-4px) scale(0.6); }
  .is-in .ov-aq__stars span {
    opacity: 1; transform: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(0.5s + var(--i, 0) * 0.07s);
  }

  /* the tile wash breathes, so a still card is never quite still */
  .ov-app__wash { animation: ov-wash 9s ease-in-out infinite; }
  .ov-app--lead .ov-app__wash { animation-duration: 12s; }
  @keyframes ov-wash {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.09); opacity: 1; }
  }
  .ov-app:hover .ov-app__wash { animation-play-state: paused; }

  /* the dial's needle position is driven from the script */
  .ov-dial { transition: none; }
}

/* the plus turns as the cursor comes over the lead card */
.ov-app__plus { display: inline-block; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ov-app--lead:hover .ov-app__plus { transform: rotate(90deg); }
/* and she leans in a touch */
.ov-app__shot { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.ov-app--lead:hover .ov-app__shot { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .ov-app__plus, .ov-app__shot { transition: none; }
}

/* ---- the composition -------------------------------------------------- */
@media (min-width: 960px) and (max-width: 1220px) {
  .ov-app { padding: 18px; }
  .ov-app--lead { padding: 22px; }
  .ov-app--metrics { gap: 16px; }
  .ov-chart { height: clamp(74px, 9vh, 96px); }
}
@media (min-width: 960px) {
  .ov-more__bento {
    grid-template-columns: 1.98fr 1fr 1fr;
    grid-template-rows: 1.06fr 1fr;
    height: clamp(470px, 56vh, 560px);
  }
  .ov-app--lead { grid-column: 1; grid-row: 1 / -1; }
  .ov-app--metrics { grid-column: 2; grid-row: 1 / -1; }
  .ov-app--gauge { grid-column: 3; grid-row: 1; }
  .ov-app--chart { grid-column: 3; grid-row: 2; }
}
@media (max-width: 959px) {
  .ov-app--lead { min-height: 440px; }
  .ov-app__shot { height: 62%; right: -6%; opacity: 0.9; }
  .ov-app__base { grid-template-columns: 1fr; gap: 18px; }
  .ov-app__big { grid-column: 1; }
  .ov-app__say { grid-column: 1; grid-row: 2; justify-items: start; }
  .ov-app__lede, .ov-app__sign { max-width: 34ch; text-align: left; }
  .ov-app__live { grid-column: 1; grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-app, .ov-app__live i { transition: none; }
}

/* ---------------------------- the last word ----------------------------
   The closing panel is the one from the main site, dressed in this page's
   language: our face, a white panel on the page ground, lime where it used
   to be violet, and the same pills every other button on the page uses. */
/* the footer panel carries the space under it, so the closing panel ends
   where its numbers end */
.ov-cta { background: var(--ov-bg); padding-bottom: 30px; }
.ov-cta__panel { padding-bottom: clamp(26px, 3vw, 40px); }
.ov-cta__panel { overflow: hidden; background: #fff; color: var(--ov-ink); }
.ov-cta__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.ov-cta .ov-rules--light i { background: var(--ov-rule-l); }

.ov-cta .lc__title {
  margin-top: 22px; max-width: 18ch;
  font-size: clamp(34px, 4.4vw, 74px); font-weight: 700; line-height: 1.0; letter-spacing: -0.035em;
  color: var(--ov-ink);
}
/* the accent that used to be violet: the ink stays, the lime does the marking */
.ov-cta .lc__fix { color: var(--ov-ink); }
.ov-cta .lc__fix::after { background: var(--ov-lime); height: 0.09em; bottom: 0.035em; }
.ov-cta .lc__pill { background: var(--ov-ink); height: 0.74em; padding: 0 0.14em; }
.ov-cta .lc__pill img { background: #fff; }
.ov-cta .lc__pill img + img { box-shadow: -0.03em 0 0 var(--ov-ink); }

/* the three of them keep changing places, so the line is never quite still */
@media (prefers-reduced-motion: no-preference) {
  .ov-cta .lc__pill img { transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease; }
  .ov-cta .lc__pill img.is-out { transform: translateY(-0.22em) scale(0.6); opacity: 0; }
  .ov-cta .lc__pill img.is-back { transform: translateY(0.22em) scale(0.6); opacity: 0; transition: none; }
}

.ov-cta .lc__row { margin-top: var(--ov-head-gap); }
.ov-cta .lc__copy { max-width: 46ch; }
.ov-cta .lc__copy p { font-size: 16.5px; line-height: 1.55; color: var(--ov-ink-2); }
.ov-cta .lc__btns { gap: 12px; margin-top: 24px; }
/* the quiet one on a light panel keeps the pill shape, with a hairline */
.ov-pill--line { background: transparent; border-color: var(--ov-line); color: var(--ov-ink); }
.ov-pill--line:hover { background: rgba(17, 19, 18, 0.05); border-color: rgba(17, 19, 18, 0.3); }

/* a CTA that means business — spans its column instead of hugging its own
   text, label and icon pushed to opposite edges */
.ov-pill--block { display: flex; width: 100%; max-width: 320px; justify-content: space-between; padding: 16px 16px 16px 26px; font-size: 16.5px; }

/* the spinning badge, in the page's accent */
.ov-cta .lc__badge { width: clamp(132px, 12vw, 168px); height: clamp(132px, 12vw, 168px); color: var(--ov-ink); }
.ov-cta .lc__ring text { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.ov-cta .lc__core { background: var(--ov-lime); box-shadow: 0 18px 40px -16px rgba(184, 242, 74, 0.7); }
.ov-cta .lc__arrow { stroke: var(--ov-ink); }
.ov-cta .lc__badge:hover .lc__core { background: var(--ov-lime-2); }
.ov-cta .lc__badge:focus-visible { outline-color: var(--ov-ink); }

.ov-cta .lc__stats { margin-top: clamp(34px, 5vh, 56px); border-top-color: var(--ov-line); }
.ov-cta .lc__stats > div + div { border-left-color: var(--ov-line); }
.ov-cta .lc__stats dt { font-size: 12px; letter-spacing: 0.06em; color: var(--ov-ink-3); }
.ov-cta .lc__stats dd {
  font-family: var(--ov-face); font-size: clamp(24px, 2.2vw, 34px); font-weight: 700;
  letter-spacing: -0.035em; color: var(--ov-ink);
}

@media (max-width: 720px) {
  .ov-cta .lc__title { max-width: none; }
  .ov-cta .lc__row { align-items: flex-start; }
  .ov-cta .lc__badge { order: -1; }
}

/* ------------------------- the footer reveal ---------------------------
   The footer is pinned to the bottom of the window and the page slides up
   off it. For that to read, the footer goes edge to edge while it is
   pinned — a straight page edge cutting across an inset rounded panel is
   what looked broken. Its content still sits on the section rail.
   The script only pins it when it fits the window. */
.ov-page { position: relative; z-index: 2; }
.ov-page--lift { background: var(--ov-bg); margin-bottom: var(--ftr-h, 0px); }
.ov-ftr.ov-ftr--pin { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; padding-block: 0; }
.ov-ftr--pin .wrap { padding-inline: 0; }
.ov-ftr--pin .ov-ftr__panel { border-radius: 0; }

/* ----------------------------- the capsule -----------------------------
   Once the hero is behind you a small dark capsule rides the top of the
   window: the mark with the page's own progress drawn around it, the
   section you are in, and the way in. It is the page's dark panel and
   white pill, shrunk — not a second copy of the header. */
.ov-stick {
  display: none !important;
  position: fixed; top: 14px; left: 50%; z-index: 880;
  align-items: center; gap: 14px;
  padding: 7px 7px 7px 7px; border-radius: 999px;
  background: rgba(17, 19, 18, 0.92); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
}
/* the mark, with the read so far drawn around it */
.ov-stick__home {
  position: relative; flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: conic-gradient(var(--ov-lime) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.16) 0);
}
.ov-stick__home::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ov-dark); }
/* the mark alone, no plate behind it — read white, like the footer's */
.ov-stick__home img { position: relative; z-index: 1; width: 22px; height: 22px; filter: brightness(0) invert(1); }

.ov-stick__where {
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding-right: 4px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}
.ov-stick__where i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ov-lime); box-shadow: 0 0 0 4px rgba(184, 242, 74, 0.16); }
.ov-stick__where span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ov-stick__where span { transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  .ov-stick.is-turning .ov-stick__where span { opacity: 0; transform: translateY(-5px); }
}

.ov-stick__cta {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: #fff; color: var(--ov-ink);
  font-size: 14px; font-weight: 500; letter-spacing: -0.02em;
  transition: background 0.25s ease;
}
.ov-stick__cta:hover { background: #efeee9; }
.ov-stick__cta i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ov-ink); color: #fff;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-stick__cta i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ov-stick__cta:hover i { transform: rotate(45deg); }

/* it drops in from above the edge, and leaves the same way */
.ov-stick { opacity: 0; visibility: hidden; transform: translate(-50%, -150%); }
.ov-stick.is-up { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) {
  .ov-stick { transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s; }
}
@media (max-width: 560px) {
  .ov-stick { top: 10px; gap: 10px; }
  .ov-stick__where { display: none; }
}


/* -------------------------------- stack --------------------------------
   A light panel between two dark ones: the claim on the left, the
   platforms as a wall of tiles on the right, each mark in its own colour. */
.ov-stack__panel { background: none; }
.ov-stack__panel > *:not(.ov-rules) { position: relative; z-index: 1; }
.ov-stack .ov-rules--light i { background: var(--ov-rule-l); }
.ov-stack__in { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 52px); align-items: center; }

.ov-stack__say h2 {
  margin-top: 20px; max-width: 14ch;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; font-weight: 700; letter-spacing: -0.035em;
  color: var(--ov-ink);
}
.ov-stack__p { margin-top: 16px; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--ov-ink-2); }
.ov-stack__more { margin-top: 26px; }

/* the wall: three columns that run on their own, the middle one the other
   way. Each column holds two identical sets and travels exactly half, so
   the loop never shows a seam. */
.ov-stack__wall {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  height: 100%; min-height: clamp(320px, 42vh, 460px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}
.ov-stack__col { position: relative; overflow: hidden; min-height: 0; }
/* the run is lifted out of the flow, or the column would take its height
   and the wall would grow to the length of the loop */
.ov-stack__run {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; will-change: transform;
}
/* the sets keep their full height, or the column would squash them and
   the travel would have nothing to travel */
.ov-stack__set { flex: none; display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .ov-stack__run { animation: ov-stack-run 30s linear infinite; }
  .ov-stack__col--down .ov-stack__run { animation-direction: reverse; }
  @keyframes ov-stack-run { to { transform: translateY(-50%); } }
  .ov-stack__wall:hover .ov-stack__run { animation-play-state: paused; }
}
.ov-stack__tile {
  display: grid; place-items: center; flex: none; height: clamp(74px, 9vh, 104px);
  border-radius: 16px; background: #fff;
  border: 1px solid rgba(17, 19, 18, 0.07);
  box-shadow: 0 1px 2px rgba(17, 19, 18, 0.03);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ov-stack__tile img {
  display: block; width: clamp(78px, 7vw, 104px); height: auto;
  /* each mark keeps its own colour on this ground */
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.ov-stack__tile:hover { border-color: rgba(17, 19, 18, 0.18); transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(17, 19, 18, 0.45); }
.ov-stack__tile:hover img { opacity: 1; }

@media (min-width: 900px) {
  /* the wall answers to the words beside it: it fills the same height, so
     the panel reads as one block rather than two of different weights */
  .ov-stack__in { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); align-items: stretch; }
}


@media (prefers-reduced-motion: reduce) {
  .ov-stack__tile, .ov-stack__tile img { transition: none; }
}

/* ---------------------------------- faq -------------------------------- */
.o-faq__in { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
/* the section has no panel, so the row takes the 1200px rail itself */
.o-faq .wrap.o-faq__in { padding-inline: max(30px, (100% - 1200px) / 2); }

/* left: one picture, one line — the way the reference frames it */
/* the picture stays small, as theirs does — about 265px across */
.o-faq__shot { margin: 0; max-width: 268px; border-radius: 12px; overflow: hidden; }
.o-faq__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 28%; }

/* the shot doubles as the way into the tour */
.o-faq__watch { position: relative; display: block; border-radius: inherit; overflow: hidden; }
.o-faq__watch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 19, 18, 0) 40%, rgba(17, 19, 18, 0.34));
  opacity: 0.85; transition: opacity 0.35s ease;
}
.o-faq__watch:hover::after { opacity: 1; }
.o-faq__play {
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--ov-ink);
  box-shadow: 0 10px 26px -10px rgba(17, 19, 18, 0.6);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
.o-faq__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.o-faq__watch:hover .o-faq__play { transform: translate(-50%, -50%) scale(1.08); background: var(--ov-lime); }
/* a ring that keeps going out, the way a live dot does */
@media (prefers-reduced-motion: no-preference) {
  .o-faq__play::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
    animation: ov-play-ring 2.8s ease-out infinite;
  }
  @keyframes ov-play-ring {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
    70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
  }
}
.o-faq__watch:focus-visible { outline: 2px solid var(--ov-ink); outline-offset: 3px; }
.o-faq__lead {
  margin-top: 24px; max-width: 250px;
  font-family: var(--ov-face) !important; text-transform: none !important;
  font-size: 20px; line-height: 1.35; font-weight: 500; letter-spacing: -0.025em; color: var(--ov-ink);
}
.o-faq__mail { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 500; color: var(--ov-ink-2); text-decoration: underline; text-underline-offset: 5px; }
.o-faq__mail:hover { color: var(--ov-ink); }

/* right: every question is its own white card */
.o-faq__list { display: grid; gap: 12px; }
.o-faq .acc {
  border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 19, 18, 0.04), 0 10px 26px -20px rgba(17, 19, 18, 0.45);
  transition: box-shadow 0.3s ease;
}
.o-faq .acc:hover { box-shadow: 0 1px 2px rgba(17, 19, 18, 0.05), 0 16px 34px -20px rgba(17, 19, 18, 0.55); }
.o-faq .acc__h { margin: 0; }
.o-faq .acc__q {
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 26px 28px; background: none; border: 0; text-align: left;
}
.o-faq .acc__label { flex: 1; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--ov-ink); }

/* a plain thin plus that loses its upright when the card opens */
.o-faq .acc__sign {
  position: relative; flex: none; width: 20px; height: 20px;
  background: none; border: 0; border-radius: 0; transform: none;
}
.o-faq .acc__q[aria-expanded="true"] .acc__sign { background: none; border-color: transparent; transform: none; }
.o-faq .acc__q[aria-expanded="true"] .acc__sign::before,
.o-faq .acc__q[aria-expanded="true"] .acc__sign::after { background: var(--ov-ink); }
.o-faq .acc__sign::before, .o-faq .acc__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px;
  margin: -0.8px 0 0 -9px; border-radius: 2px; background: var(--ov-ink);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.o-faq .acc__sign::after { transform: rotate(90deg); }
.o-faq .acc__q[aria-expanded="true"] .acc__sign::after { opacity: 0; transform: rotate(0deg); }

.o-faq .acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.o-faq .acc__a.is-open { grid-template-rows: 1fr; }
.o-faq .acc__a-in { overflow: hidden; min-height: 0; }
.o-faq .acc__a-in p {
  margin: -6px 68px 26px 28px; padding: 0; border: 0;
  font-size: 15.5px; line-height: 1.6; color: var(--ov-ink-2);
}

/* the old centred closing panel is gone; the buttons it defined are kept
   because the popup still uses them */
.ov-btn { border-radius: 999px; background: var(--ov-lime); border-color: var(--ov-lime); color: var(--ov-ink); }
.ov-btn:hover { background: var(--ov-lime-2); border-color: var(--ov-lime-2); }
.ov-btn--ghost { background: transparent; border-color: var(--ov-line-d); color: #fff; }
.ov-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }

/* v1's page-wide aura belongs to v1 */
.aura { display: none; }

/* -------------------------------- footer -------------------------------
   The page closes the way it opens: one dark rounded panel on the same
   rail, the mark and the lines inside it, and the wordmark across the
   foot. Nothing of the first build's footer is used here. */
/* a strip of ground above it, so the two panels never touch */
.ov-ftr { position: relative; z-index: 4; background: var(--ov-bg); padding-block: 30px clamp(20px, 3vh, 34px); }
.ov-ftr__panel {
  position: relative; overflow: hidden;
  background: var(--ov-dark); color: #fff;
  padding-block: clamp(36px, 5vh, 64px);
  border-radius: var(--ov-r);
}
.ov-ftr__panel > *:not(.ov-rules) { position: relative; z-index: 1; }

.ov-ftr__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; }
.ov-ftr__logo { display: inline-block; }
.ov-ftr__logo img {
  display: block; height: 40px; width: auto;
  /* the mark carries a violet dot — on this panel it reads as one white mark */
  filter: brightness(0) invert(1);
}
.ov-ftr__brand p { margin-top: 20px; max-width: 34ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.ov-ftr__rev { display: flex; align-items: center; gap: 10px; white-space: nowrap; margin-top: 20px !important; font-size: 13.5px; color: rgba(255, 255, 255, 0.55) !important; }
.ov-ftr__rev b { color: #fff; font-weight: 700; }
.ov-ftr__rev .ov-stars { gap: 1px; }
.ov-ftr__rev .ov-stars i { width: 14px; height: 14px; }
/* the rating line is nowrap by design, but at 320 it is 35px wider than the
   panel, so on the smallest screens it is allowed to wrap */
@media (max-width: 430px) {
  .ov-ftr__rev { flex-wrap: wrap; white-space: normal; }
}

/* Phosphor icons, on the same tile the header buttons use */
.ov-ftr__social { list-style: none; display: flex; gap: 8px; margin: 26px 0 0; padding: 0; }
.ov-ftr__social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.62);
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}
.ov-ftr__social svg { display: block; width: 21px; height: 21px; fill: currentColor; }
.ov-ftr__social a:hover {
  transform: translateY(-2px);
  border-color: var(--ov-lime); background: var(--ov-lime); color: var(--ov-ink);
}
.ov-ftr__social a:focus-visible { outline: 2px solid var(--ov-lime); outline-offset: 3px; }

.ov-ftr__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
.ov-ftr__h { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.ov-ftr__nav ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.ov-ftr__nav a {
  font-size: 15px; color: rgba(255, 255, 255, 0.78);
  transition: color 0.25s ease;
}
.ov-ftr__nav a:hover { color: var(--ov-lime); }
.ov-ftr__nav > div { min-width: 0; }
.ov-ftr__nav a { overflow-wrap: anywhere; }
.ov-ftr__brand p { overflow-wrap: anywhere; }

/* the one form on the page: a line, a field and the same pill */
.ov-ftr__mail {
  display: grid; gap: 18px; margin-top: clamp(32px, 4vh, 48px); padding-top: clamp(26px, 3.4vh, 38px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ov-ftr__mail p { max-width: 40ch; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.ov-ftr__mail b { color: #fff; font-weight: 600; }
.ov-ftr__mail form { display: flex; flex-wrap: wrap; gap: 10px; }
.ov-ftr__mail input {
  flex: 1 1 220px; min-width: 0; height: 58px; padding: 0 22px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
}
.ov-ftr__mail input::placeholder { color: rgba(255, 255, 255, 0.38); }
.ov-ftr__mail input:focus-visible { outline: 2px solid var(--ov-lime); outline-offset: 2px; }
/* the sign-up is the same pill as every other button on the page — only
   the reset a <button> needs is added back */
.ov-ftr__mail button { flex: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; }

/* the wordmark across the foot, cut off by the panel like a signature */
.ov-ftr__word {
  margin: clamp(30px, 5vh, 62px) 0 0;
  font-family: var(--ov-face); font-size: clamp(34px, 12.5vw, 188px); line-height: 0.82;
  font-weight: 800; letter-spacing: -0.055em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  transition: color 0.6s ease;
}
.ov-ftr__panel:hover .ov-ftr__word { color: rgba(255, 255, 255, 0.05); }
@media (prefers-reduced-motion: reduce) { .ov-ftr__word { transition: none; } }

.ov-ftr__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: clamp(22px, 3vh, 34px); padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px; color: rgba(255, 255, 255, 0.45);
}
.ov-ftr__legal a { margin-left: 18px; color: rgba(255, 255, 255, 0.6); transition: color 0.25s ease; }
.ov-ftr__legal a:first-child { margin-left: 0; }
.ov-ftr__legal a:hover { color: #fff; }

@media (min-width: 900px) {
  .ov-ftr__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 60px; }
  .ov-ftr__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-ftr__mail { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 30px; }
  .ov-ftr__mail form { justify-self: end; width: min(420px, 100%); }
}


/* ------------------------- how things arrive --------------------------- */
.o-rise {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rise-d, 0s);
}
.o-rise.is-up { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .o-rise { opacity: 1; transform: none; transition: none; }
  .ov-app, .ov-pick, .o-faq .acc__q, .o-faq .acc__sign, .o-faq .acc__a, .o-trust__logo img { transition: none; }
}

/* ------------------------------ wider screens -------------------------- */
@media (min-width: 700px) {
  /* the proof board is two cards over one banner — its columns live with
     the rest of that block, further up */
  .ov-more__grid { grid-template-columns: repeat(2, 1fr); }
  .ov-cmp__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .o-trust__in { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 0; }
  .o-trust__rail { padding-left: 40px; border-left: 1px solid var(--ov-line); }
  .o-trust__who { padding-right: 24px; }
  .ov-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 44px; align-items: center; }
  .ov-how__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ov-more__grid { grid-template-columns: repeat(4, 1fr); }
  /* their columns: a narrow left block, a wide gap, cards ending at the rail */
  .o-faq__in { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(48px, 15vw, 224px); }
}

/* the hero's pair: one dark, one pale — these sit after the lime default */

/* the figure card reads against the dark panel above it, so its number
   takes the lime too */
.ov-hero__stat .ov-hero__n b { color: #fff; }

/* --------------------------- page gutters, v2 --------------------------
   The header and the hero run the full width of the window with a 100px
   gutter either side, rather than sitting inside the shared max width. */

.ov-hdr { inset: 14px 0 auto; }
.ov-hero { position: relative; }
.ov-hdr__in {
  /* no bar behind it: just the mark, the links and the pill */
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* The hero clears the floating bar by a fixed 16px. The bar is 56px tall,
   42px once the menu button takes over at 759px and 40px at 400px, so the
   hero's top padding steps with it — a flat 86px left twice the gap on a
   phone that it leaves on a desktop. */
.ov-hero { padding-top: 86px; }                                  /* 14 + 56 + 16 */
@media (max-width: 759px) { .ov-hero { padding-top: 72px; } }    /* 14 + 42 + 16 */
@media (max-width: 400px) { .ov-hero { padding-top: 70px; } }    /* 14 + 40 + 16 */



/* ------------------------- hero objects, v2 ---------------------------
   The spinning props from the first build are reused here, placed around
   the dark panel instead of the old hero. Their sheets live one folder up,
   so the paths are restated. */
.ov-hero__panel { position: relative; overflow: hidden; }
.ov-hero__panel > *:not(.ov-hero__art):not(.ov-sticker) { position: relative; z-index: 1; }
.ov-hero__art { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.ov-hero__art .hero__obj {
  position: absolute; aspect-ratio: 1;
  background-repeat: no-repeat; background-size: 3600% 100%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
  animation: obj-spin 4s steps(36, jump-none) infinite alternate,
             obj-float 12s ease-in-out infinite;
  will-change: background-position, transform;
}
.ov-hero__art .hero__obj--1 { width: 104px; left: 3%;    top: 16%;    background-image: url("../images/map-location-icon-spin.webp"); animation-duration: 4.5s, 11s; }
.ov-hero__art .hero__obj--2 { width: 116px; right: 3.5%; top: 10%;    background-image: url("../images/delivery-box-icon-spin.webp"); animation-duration: 4s, 13s; }
/* these two are grid sheets, not one row: nine across, eight down, so they
   need the column and row passes the first build gave them */
.ov-hero__art .hero__obj--3,
.ov-hero__art .hero__obj--4 {
  background-size: 900% 800%;
  animation-name: obj-col, obj-row, orb-drift;
  animation-timing-function: steps(9, jump-none), steps(8, jump-none), cubic-bezier(0.37, 0, 0.63, 1);
  animation-iteration-count: infinite, infinite, infinite;
  animation-direction: normal, normal, normal;
}
.ov-hero__art .hero__obj--3 {
  /* the props stay high in the copy area, well clear of the cards */
  width: 104px; left: 14%; top: 34%;
  background-image: url("../images/coin-icon-spin.webp");
  animation-duration: 1.75s, 14s, 11s;
}
.ov-hero__art .hero__obj--4 {
  width: 148px; right: 4%; top: 32%;
  background-image: url("../images/polo-shirt-spin.webp");
  animation-duration: 2.1s, 16.8s, 13s; animation-delay: 0s, 0s, -6.5s;
}
.ov-hero__art .hero__obj--5 { width: 92px;  left: 17%;   top: 6%;     background-image: url("../images/sofa-spin.webp");              animation-duration: 4.25s, 15s; }

@media (max-width: 1100px) {
  .ov-hero__art .hero__obj--5, .ov-hero__art .hero__obj--1 { display: none; }
  .ov-hero__art .hero__obj--2 { width: 96px; }
  .ov-hero__art .hero__obj--3 { width: 90px; }
  .ov-hero__art .hero__obj--4 { width: 120px; }
}
@media (max-width: 720px) { .ov-hero__art { display: none; } }
@media (prefers-reduced-motion: reduce) { .ov-hero__art .hero__obj { animation: none; } }

/* inside the panel the two cards share one height, and it stays short */
.ov-hero__row > * { min-height: 0; }
.ov-hero__stat { padding: 22px 22px; }
@media (min-width: 1024px) {
  .ov-hero__row { align-items: stretch; }
  .ov-hero__shot-h { height: 100%; }
}

/* on narrow screens the columns give way and the copy fills the panel */
@media (max-width: 899px) {
  .ov-say__title, .ov-say__line { max-width: none; }
}

/* ------------------------ type scale, from the reference ----------------
   Taken from its own style presets, not guessed: the claim and the inner
   heading are 52 / 42 / 30px at 1200 / 810 / below, weight 500 at -0.02em
   with a 1.1 line; the list items 36 / 26 / 22px at -0.03em; the pills
   14px and the small copy 16px, both at weight 400. */
.ov-say__title, .ov-inner__h {
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1;
}
.ov-say__who p, .ov-cap { font-size: 16px; font-weight: 400; line-height: 1.35; }
.ov-pick span { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; }

@media (min-width: 810px) {
  .ov-say__title, .ov-inner__h { font-size: 42px; }
  .ov-pick span { font-size: 26px; }
}
@media (min-width: 1200px) {
  .ov-say__title, .ov-inner__h { font-size: 52px; }
  .ov-pick span { font-size: 36px; }
}

/* a short window cannot hold the full scale while the block is pinned, so it
   steps down there and nowhere else */
/* only a genuinely short window steps the scale down, and only a little:
   at 1440x800 the full 52/36 still fits inside the pin */
@media (min-width: 900px) and (max-height: 660px) and (prefers-reduced-motion: no-preference) {
  .ov-inner__h { font-size: clamp(30px, 6vh, 46px); }
  .ov-pick span { font-size: clamp(22px, 4.2vh, 32px); }
}

/* --------------------- the job list, pinned to the scroll ---------------
   The block holds still while the page scrolls past it, and the live job
   steps 01 → 04 across that distance. */
.ov-inner__track { position: relative; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* the block lets go soon after the last job, rather than holding on */
  /* each job gets the same run of scroll the other pinned stories give
     their cards (62-64vh); at 46vh a single flick cleared two rows */
  .ov-inner__track { height: calc(var(--n, 4) * 52vh + 10vh); }
  .ov-say .ov-panel { padding-bottom: clamp(14px, 2vh, 26px); }
  .ov-inner {
    position: sticky; top: 0;
    height: 100vh; margin-top: 0;
    align-content: center; align-items: center;
    padding-block: clamp(12px, 2.4vh, 36px);
  }
  /* everything inside is sized off the window height, so the pinned view
     always fits and nothing scrolls out from under the pin */
  .ov-inner__list ul { margin-top: clamp(16px, 2.6vh, 34px); }
  .ov-pick { padding: clamp(9px, 1.5vh, 14px) 16px; }
  /* the type itself stays on the reference's scale — 52px head, 36px rows —
     and only a short window steps it down, further below */
  .ov-phone { --phone-w: min(330px, 34vh, 100%); }
  .ov-inner__shot figcaption { min-height: 3em; }
}

/* --------------------------------- chat --------------------------------
   The order bot, as the site's own demo of it: a launcher in the bottom
   left (the install nudge owns the right), and a small panel that answers
   from a short script. Nothing here talks to a server. */
/* it sits on the right, and steps up over the install nudge when that is
   showing so the two never stack on the same corner */
.ov-chat {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: grid; justify-items: end; gap: 12px;
  transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ov-chat.is-clear { bottom: var(--chat-lift, 16px); }

/* the launcher is the icon and nothing else */
.ov-chat__btn {
  order: 2; position: relative; display: grid; place-items: center;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--ov-lime); color: var(--ov-ink);
  box-shadow: 0 2px 4px rgba(17, 19, 18, 0.1), 0 18px 34px -16px rgba(184, 242, 74, 0.9);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}
.ov-chat__btn:hover { transform: translateY(-2px); background: var(--ov-lime-2); }
.ov-chat__ic { grid-area: 1 / 1; display: grid; place-items: center; }
.ov-chat__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ov-chat__ic--talk circle { fill: currentColor; stroke: none; }
.ov-chat__ic--x { display: none; }
.ov-chat.is-open .ov-chat__ic--talk { display: none; }
.ov-chat.is-open .ov-chat__ic--x { display: grid; }

/* the panel */
.ov-chat__panel {
  order: 1; display: flex; flex-direction: column; overflow: hidden;
  transform-origin: 100% 100%;
  width: min(360px, calc(100vw - 32px)); height: min(520px, calc(100vh - 120px));
  border-radius: 18px; background: #fff; border: 1px solid rgba(17, 19, 18, 0.08);
  box-shadow: 0 10px 60px -12px rgba(17, 19, 18, 0.3), 0 2px 6px rgba(17, 19, 18, 0.06);
}
.ov-chat__panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ov-chat__panel { animation: ov-chat-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes ov-chat-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
}

.ov-chat__head {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 14px 14px 13px; background: var(--ov-dark); color: #fff;
}
.ov-chat__mark { width: 32px; height: 32px; border-radius: 9px; }
.ov-chat__who { display: grid; gap: 2px; min-width: 0; }
.ov-chat__who b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.ov-chat__who i { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.ov-chat__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ov-lime); }
.ov-chat__close {
  margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer;
}
.ov-chat__close:hover { background: rgba(255, 255, 255, 0.2); }
.ov-chat__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.ov-chat__log {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 14px; background: #f7f6f3;
}
.ov-chat__msg {
  max-width: 84%; margin: 0; padding: 10px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.45;
}
.ov-chat__msg--bot { align-self: flex-start; background: #fff; border: 1px solid rgba(17, 19, 18, 0.08); border-bottom-left-radius: 5px; color: var(--ov-ink); }
.ov-chat__msg--me { align-self: flex-end; background: var(--ov-ink); color: #fff; border-bottom-right-radius: 5px; }
.ov-chat__msg b { font-weight: 600; }
.ov-chat__typing { display: inline-flex; gap: 4px; align-self: flex-start; padding: 12px 13px; border-radius: 14px; border-bottom-left-radius: 5px; background: #fff; border: 1px solid rgba(17, 19, 18, 0.08); }
.ov-chat__typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(17, 19, 18, 0.35); animation: ov-chat-dot 1.2s ease-in-out infinite; }
.ov-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.ov-chat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ov-chat-dot { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }

.ov-chat__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: none; padding: 12px 14px 0; background: #fff; }
.ov-chat__chips button {
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(17, 19, 18, 0.14); background: #fff; color: var(--ov-ink-2);
  font-family: inherit; font-size: 12px; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ov-chat__chips button:hover { background: var(--ov-lime); border-color: var(--ov-lime); color: var(--ov-ink); }
.ov-chat__chips:empty { display: none; }

.ov-chat__form { display: flex; gap: 8px; flex: none; padding: 12px 14px 14px; background: #fff; }
.ov-chat__form input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(17, 19, 18, 0.14); background: #f7f6f3; color: var(--ov-ink);
  font-family: inherit; font-size: 13.5px;
}
.ov-chat__form input::placeholder { color: var(--ov-ink-3); }
.ov-chat__form input:focus-visible { outline: 2px solid var(--ov-ink); outline-offset: 1px; }
.ov-chat__form button {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 0; border-radius: 50%; background: var(--ov-ink); color: #fff; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ov-chat__form button:hover { transform: translate(2px, -2px) rotate(45deg); }
.ov-chat__form button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 560px) {
  .ov-chat { left: 12px; right: 12px; bottom: 12px; justify-items: end; }
  .ov-chat__panel { width: 100%; height: min(70vh, 520px); }
}

@media (prefers-reduced-motion: reduce) {
  .ov-chat__btn, .ov-chat__form button { transition: none; }
  .ov-chat__typing i { animation: none; }
}



@media (min-width: 1100px) {
  /* the badge waits for room; below this the pill keeps the right on its own */
  .ov-hdr__bfs { display: inline-flex; }
  .ov-hdr__cta { margin-left: 0; }
}

/* ---------------------------- the bottom fade --------------------------
   The page softens into the bottom edge of the window: three layers of
   backdrop blur, each masked to its own third, so the blur builds rather
   than starting all at once. It only paints while you are mid-page. */
.ov-fade {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: clamp(78px, 11vh, 118px);
  pointer-events: none;
  opacity: 0; transition: opacity 0.45s ease;
}
.ov-fade.is-on { opacity: 1; }
.ov-fade i { position: absolute; inset: 0; display: block; }
.ov-fade i:nth-child(1) {
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 33.33%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 33.33%);
}
.ov-fade i:nth-child(2) {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, transparent 33.33%, #000 66.66%);
          mask-image: linear-gradient(180deg, transparent 33.33%, #000 66.66%);
}
.ov-fade i:nth-child(3) {
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, transparent 66.66%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 66.66%, #000 100%);
}
@media (prefers-reduced-motion: reduce) { .ov-fade { transition: none; } }

/* ------------------------------ the parallax ---------------------------
   The big shots drift a little slower than the page. They are scaled a
   touch so the drift never uncovers an edge, and only the image moves —
   a GPU transform, nothing that asks the page to lay out again. */
@media (prefers-reduced-motion: no-preference) {
  [data-par] { overflow: hidden; }
  [data-par] > img, [data-par] > a > img {
    transform: translate3d(0, 0, 0) scale(1.14);
  }
}


/* ------------------- the phone column matches the hero ------------------
   The hero panel pads 20px inside the page gutter, every other panel padded
   30px, so on a phone the hero read a full column wider than everything
   under it. Below 760px they all take the hero's inset and the copy starts
   at the same place down the whole page. */
@media (max-width: 760px) {
  /* Both insets come down on a phone. 20px of page gutter plus 20px inside
     the panel put the copy 40px into a 390px screen before a card had even
     added its own padding; 12 + 14 keeps the panel reading as a panel and
     hands 28px of column back per row. */
  .ov-hdr .wrap, .ov-hero .wrap, .o-trust .wrap, .ov-say .wrap, .ov-proof .wrap,
  .ov-work .wrap, .ov-num .wrap, .ov-how .wrap, .ov-stack .wrap, .ov-cmp .wrap,
  .ov-more .wrap, .o-faq .wrap, .ov-cta .wrap, .ov-ftr .wrap { padding-inline: 12px; }
  .ov-ftr--pin .wrap { padding-inline: 0; }
  .ov-panel, .ov-hero__panel { padding-inline: 14px; }
  /* the FAQ has no panel, its copy sits straight on the wrap */
  .o-faq .wrap.o-faq__in { padding-inline: 26px; }
  /* the shot and the lead are sized for the 300px desktop column; stacked
     they take the full width so they end where the questions end */
  .o-faq__shot { max-width: none; }
  .o-faq__lead { max-width: none; }
  /* the cards inside a panel were stacking their own desktop padding on top */
  .ov-case__card { margin-inline: 8px; padding-inline: 18px; }
  .ov-vs__row { padding-inline: 8px; }
  .ov-pick { padding-inline: 12px; }
}

/* -------------------------------- the maths ---------------------------------
   Two cards on one ledger: the inbox route with every line struck through
   and its price beside it, and what the same orders cost with Account Editor
   in lime, the year's recovery at the foot of each. The gap is read off the
   four figures underneath. */
.ov-mth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: var(--ov-head-gap); }
.ov-mth__card {
  display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px);
  border-radius: 22px; background: var(--ov-dark-2);
}
.ov-mth__card--new { background: transparent; border: 1px solid var(--ov-lime); }
.ov-mth__lab, .ov-mth__fine {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
}
.ov-mth__lab--on { color: var(--ov-lime); }
.ov-mth__fine { margin-top: 18px; font-size: 11.5px; line-height: 1.6; }
.ov-mth__card--new .ov-mth__fine { text-transform: none; letter-spacing: 0.02em; font-size: 14px; font-family: inherit; color: rgba(255, 255, 255, 0.6); max-width: 34ch; }

.ov-mth__list, .ov-mth__ok { list-style: none; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0; display: grid; gap: 22px; }
.ov-mth__list li { display: flex; align-items: flex-end; gap: 14px; font-size: 18px; line-height: 1.3; }
.ov-mth__k { color: rgba(255, 255, 255, 0.5); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); }
.ov-mth__dots { flex: 1; min-width: 24px; margin-bottom: 6px; border-bottom: 1px dotted rgba(255, 255, 255, 0.2); }
.ov-mth__v {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px;
  color: rgba(255, 255, 255, 0.45); text-decoration: line-through; white-space: nowrap;
}
.ov-mth__ok li {
  position: relative; padding-left: 26px; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.3;
  color: rgba(255, 255, 255, 0.62); letter-spacing: -0.02em;
}
.ov-mth__ok li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--ov-lime);
}
.ov-mth__ok b { font-weight: 600; color: #fff; }

.ov-mth__tot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ov-mth__list + .ov-mth__tot, .ov-mth__ok + .ov-mth__tot { margin-top: clamp(28px, 4vw, 48px); }
.ov-mth__tot span { font-size: 17px; color: rgba(255, 255, 255, 0.5); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); }
.ov-mth__tot b {
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1; font-weight: 800; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.4); text-decoration: line-through;
}
.ov-mth__tot--on span { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.ov-mth__tot--on b { color: var(--ov-lime); text-decoration: none; }
.ov-mth__cta { margin-top: 26px; align-self: flex-start; }

.ov-mth__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px;
  margin-top: clamp(26px, 3.4vw, 44px); padding-top: clamp(22px, 2.8vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ov-mth__stats div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.ov-mth__stats b { font-size: clamp(26px, 2.8vw, 38px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--ov-lime); }
.ov-mth__stats span {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}
.ov-cmp__foot { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
  .ov-mth { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ov-mth__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ov-cmp__foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ov-mth__list li { flex-wrap: wrap; gap: 4px 12px; }
  .ov-mth__dots { display: none; }
  .ov-mth__v { margin-left: auto; }
}
@media (min-width: 900px) {
  /* the two cards share their rows, so the labels, the lists, the totals and
     the notes line up across the gap however long either list runs */
  .ov-mth { grid-template-rows: auto auto auto auto auto; }
  .ov-mth__card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .ov-mth__list, .ov-mth__ok { align-content: start; }
  .ov-mth__tot { margin-top: 0 !important; align-self: end; }
  .ov-mth__list + .ov-mth__tot, .ov-mth__ok + .ov-mth__tot { margin-top: 0; }
  .ov-mth__list, .ov-mth__ok { padding-bottom: clamp(28px, 4vw, 48px); }
}
.ov-cmp__side { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) {
  .ov-cmp__side { justify-self: end; max-width: 42ch; }
  .ov-mth { grid-template-rows: auto auto auto auto; }
  .ov-mth__card { grid-row: span 4; grid-template-rows: subgrid; }
}

/* a section, or a link to it, can be parked with the hidden attribute */
.ov-more[hidden], .ov-hdr__nav a[hidden], .ov-ftr__nav li[hidden] { display: none !important; }