/* Subpages (cases, process, story, legal). Same look as the landing: black and white, brand cream for soft
   surfaces, and the FOCUS orange only to highlight (labels, progress, the result, the main call to action). */
:root {
  --bg: #fff; --bg-soft: #F3EEE7; --ink: #1d1d1f; --ink-soft: #6e6e73; --line: #e7e1d8;
  --accent: #b8613d; --accent-ink: #94482a; --accent-soft: #f6e8e0;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline-color: var(--accent); }
.wrap { max-width: calc(1040px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.76);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.06); }
.top__in { display: flex; align-items: center; gap: 28px; height: 64px; }
.top__logo { line-height: 0; margin-right: auto; }
.top__logo img { height: 30px; width: auto; }
.top__nav { display: flex; gap: 26px; font-size: .9rem; }
.top__nav a { text-decoration: none; color: var(--ink-soft); }
.top__nav a:hover, .top__nav a[aria-current] { color: var(--ink); }
.top__nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 20px;
  font: 600 .92rem/1 var(--body); text-decoration: none; background: var(--ink); color: #fff; transition: transform .2s ease, opacity .2s ease, background-color .2s ease; }
.btn:hover { background: var(--accent); }
.top .btn { background: var(--accent); }
.top .btn:hover { background: var(--accent-ink); }
.btn--light { background: #fff; color: var(--ink); }
.top .btn { padding: 10px 16px; font-size: .86rem; }
@media (max-width: 760px) { .top__nav { display: none; } }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 10vh, 112px) 0 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--accent-ink); border-color: #ead8cc; background: #fff; }
.hero h1 { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.04;
  font-size: clamp(2.5rem, 6vw, 4.6rem); margin: 22px 0 0; max-width: 17ch; text-wrap: balance; }
.hero h1:has(> .eyebrow) { margin-top: 0; }
h1 > .eyebrow { display: flex; width: fit-content; max-width: 100%; margin: 0 0 22px; font-family: var(--body, inherit); letter-spacing: 0; line-height: 1.3; white-space: normal; text-wrap: wrap; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); margin: 22px 0 0; max-width: 60ch; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.meta li { padding: 7px 14px; border-radius: 999px; background: var(--bg-soft); font-size: .86rem; font-weight: 500; }

/* ---------- sections ---------- */
.section { margin-top: clamp(64px, 11vh, 120px); }
.kicker { margin: 0; font-size: .95rem; font-weight: 600; color: var(--accent-ink); }
.section h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin: 10px 0 0; max-width: 22ch; text-wrap: balance; }
.section > .lead { margin-top: 16px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 34px; }
.hero + .stats, .hero .stats { margin-top: 48px; }
.stat { background: var(--bg-soft); border-radius: 22px; padding: 26px 24px 24px; }
.stat b { display: block; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 12px; color: var(--ink-soft); font-size: .95rem; line-height: 1.4; }
.stat small { display: block; margin-bottom: 10px; font-size: .78rem; font-weight: 600; color: var(--accent-ink); }

.bars { display: grid; gap: 14px; margin-top: 34px; padding: 28px; border-radius: 22px; background: var(--bg-soft); }
.bar { display: grid; grid-template-columns: 86px 1fr 96px; align-items: center; gap: 16px; }
.bar em { font-style: normal; font-size: .9rem; color: var(--ink-soft); }
.bar > div { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.bar:last-child i { background: var(--accent); }
.bar strong { text-align: right; font-variant-numeric: tabular-nums; font-size: .98rem; }
.note { margin: 16px 0 0; color: var(--ink-soft); font-size: .95rem; }

/* story told in steps, a thin line down the left */
.timeline { list-style: none; margin: 38px 0 0; padding: 0; display: grid; gap: 0; }
.tl { position: relative; padding: 0 0 36px 34px; border-left: 2px solid var(--line); margin-left: 7px; }
.tl:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl::before { content: ""; position: absolute; left: -9px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); }
.tl.is-key::before { background: var(--accent); border-color: var(--accent); }
.tl small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.tl h3 { margin: 6px 0 0; font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.tl p { margin: 8px 0 0; color: var(--ink-soft); max-width: 62ch; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 34px; }
.card { background: var(--bg-soft); border-radius: 22px; padding: 26px 24px; }
.card h3 { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.card p { margin: 8px 0 0; color: var(--ink-soft); font-size: .96rem; }
.card ul { margin: 10px 0 0; padding-left: 1.1em; color: var(--ink-soft); font-size: .96rem; }
.card .num { display: block; margin-bottom: 14px; font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.callout { margin-top: 34px; padding: 26px 28px; border-radius: 22px; background: var(--ink); color: #f5f5f7; font-size: 1.05rem; line-height: 1.55; }
.callout b { color: #fff; }

.figure { margin: 34px 0 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); filter: grayscale(1) contrast(1.05); }
.card .ico { margin-bottom: 18px; }
.figure figcaption { margin-top: 12px; font-size: .88rem; color: var(--ink-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.chips li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: .92rem; font-weight: 500; }
.fine { margin: 18px 0 0; font-size: .8rem; color: #86868b; }

.quote { margin: 34px 0 0; padding: 0 0 0 22px; border-left: 3px solid var(--accent); }
.quote p { margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.quote cite { display: block; margin-top: 10px; font-style: normal; color: var(--ink-soft); font-size: .92rem; }
.quote--soft p { font-weight: 400; font-style: italic; }

/* closing call to action */
.cta { margin-top: clamp(72px, 12vh, 130px); padding: clamp(36px, 6vw, 64px); border-radius: 28px; background: var(--ink); color: #fff; }
.cta h2 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(1.9rem, 4vw, 3rem); max-width: 18ch; }
.cta p { margin: 14px 0 26px; color: #a1a1a6; max-width: 46ch; }
.cta .btn { background: var(--accent); color: #fff; }
.cta .btn:hover { background: #cf7450; }

.next { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding: 22px 26px;
  border-radius: 22px; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s ease; }
.next:hover { border-color: var(--accent); }
.next:hover span[aria-hidden] { color: var(--accent); }
.next small { display: block; font-size: .8rem; color: var(--ink-soft); }
.next strong { display: block; margin-top: 4px; font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.next span[aria-hidden] { font-size: 1.4rem; }

/* ---------- legal text ---------- */
.prose { max-width: 720px; margin-inline: auto; }
.prose > h1, .prose > .updated { text-align: center; margin-inline: auto; }
.prose .updated { margin: 14px 0 0; font-size: .88rem; color: var(--ink-soft); }
.prose h2 { margin: 44px 0 0; font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.prose h3 { margin: 26px 0 0; font-size: 1.05rem; font-weight: 600; }
.prose p, .prose li { color: #424245; }
.prose p { margin: 12px 0 0; }
.prose ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.prose .intro { font-size: 1.12rem; color: var(--ink-soft); }
.prose a { color: var(--accent-ink); }
.id-card { margin: 16px 0 0; padding: 22px 24px; border-radius: 18px; background: var(--bg-soft); }
.id-card dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; font-size: .95rem; }
.id-card dt { color: var(--ink-soft); }
.id-card dd { margin: 0; }
@media (max-width: 560px) { .id-card dl { grid-template-columns: 1fr; gap: 2px; } .id-card dd { margin-bottom: 10px; } }

@media (max-width: 600px) {
  .bar { grid-template-columns: 70px 1fr 78px; gap: 10px; }
  .bars { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { .bar i { transition: none; } }

/* ================= case pages: big cards, scroll stories, before/after ================= */
.i { width: 22px; height: 22px; display: block; flex: none; }
.ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ink); color: #fff; flex: none; }
.ico--sm { width: 38px; height: 38px; border-radius: 12px; }
.ico--sm .i { width: 19px; height: 19px; }
.pill { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .86rem; font-weight: 600; line-height: 1; }
.pill--line { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line); }

/* scroll-in: only once JS is running, so the page never stays hidden */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.js .rv.is-in { opacity: 1; transform: none; }

/* tall cards, same build as the home's case cards */
.deck { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 20px; margin-top: clamp(40px, 6vh, 64px); }
.big { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 4 / 5; padding: 24px; margin: 0; border: 0;
  border-radius: 32px; overflow: hidden; background: var(--bg-soft); color: var(--ink); font: inherit; text-align: left;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 20px 50px rgba(0,0,0,.07); transition: box-shadow .35s, background-color .5s ease, color .5s ease; }
.big:hover { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 70px rgba(0,0,0,.12); }
.big > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  transform-origin: 50% 22%; transform: scale(1.32); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.big:hover > img.bg { transform: scale(1.4); }
.big.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(243,238,231,0) 30%, rgba(243,238,231,.9) 56%, var(--bg-soft) 76%); }
.big__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.big__body { position: relative; z-index: 2; margin-top: auto; display: block; }
.big__metric { display: block; font-family: var(--display); font-weight: 600; letter-spacing: -.04em; line-height: 1;
  font-size: clamp(3rem, 5.6vw, 4.8rem); font-variant-numeric: tabular-nums; }
.big__title { display: block; margin-top: 12px; font-size: 1.18rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.big__sub { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .97rem; line-height: 1.4; }
.big.is-dark { background: var(--ink); color: #fff; }
.is-dark .ico, .is-dark .pill { background: #fff; color: var(--ink); }
.is-dark .big__sub { color: #a1a1a6; }
.big .shade { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; }

/* month bars inside a card */
.months { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 18px; }
.month { display: flex; flex-direction: column; min-height: 0; }
.month__bar { position: relative; flex: 1; min-height: 40px; }
.month__bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 12px 12px 5px 5px; background: rgba(255,255,255,.18);
  transition: height 1.2s cubic-bezier(.2,.7,.2,1); }
.month:last-child .month__bar i { background: var(--accent); }
.month b { margin-top: 10px; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.month small { font-size: .8rem; color: #a1a1a6; }

/* before/after cards: the dark side is the result */
.flip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flip:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.flip.is-after { background: var(--ink); color: #fff; }
.flip__state { position: absolute; inset: 24px; z-index: 2; display: flex; flex-direction: column;
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.flip__state--after { opacity: 0; transform: translateY(22px); }
.flip.is-after .flip__state--before { opacity: 0; transform: translateY(-22px); }
.flip.is-after .flip__state--after { opacity: 1; transform: none; }
.flip__state--after .ico, .flip__state--after .pill { background: #fff; color: var(--ink); }
.flip__state--after .big__sub { color: #a1a1a6; }
.ba .big__metric { font-size: clamp(2.6rem, 4.4vw, 3.8rem); }
.ba__hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--ink-soft); font-size: .95rem; }
.ba__hint .hint-touch { display: none; }
@media (hover: none) { .ba__hint .hint-desk { display: none; } .ba__hint .hint-touch { display: inline; } }
@media (min-width: 861px) {
  /* the section is tall and its content stays pinned; scrolling through it turns the cards one by one */
  .ba { height: 250vh; }
  .ba__pin { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: center; }
  .ba .deck { margin-top: 32px; }
}
@media (min-width: 861px) and (max-width: 1080px) { .ba .deck { --n: 2 !important; max-width: 560px; } .ba .big { aspect-ratio: 1; } }

/* scroll story: sticky picture on one side, steps scrolling on the other */
.scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); margin-top: 24px; }
.scrolly__stage { position: sticky; top: 64px; height: calc(100vh - 64px); display: grid; place-items: center; }
.frame { grid-area: 1 / 1; width: 100%; max-width: 440px; opacity: 0; transform: translateY(26px) scale(.97);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.frame.is-on { opacity: 1; transform: none; }
.scrolly__steps { padding: 18vh 0 22vh; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .45s ease; }
.step.is-on { opacity: 1; }
.step > small { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.step h3 { margin: 10px 0 0; font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(1.6rem, 3vw, 2.3rem); text-wrap: balance; }
.step p { margin: 14px 0 0; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.6; max-width: 46ch; }
.step .quote { margin-top: 24px; }
.step .quote p { color: var(--ink); max-width: none; }
.step__end { font-family: var(--display); font-weight: 600; color: var(--ink) !important; font-size: 1.25rem !important; }

/* little product mock-ups shown in the sticky stage */
.mock { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.08); }
.mock__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mock__head b { display: block; font-size: 1rem; }
.mock__head small { display: block; color: var(--ink-soft); font-size: .84rem; }
.report { margin: 0; display: grid; }
.report > div { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; border-bottom: 1px solid #f0f0f2; }
.report dt { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .95rem; }
.report dt .i { width: 18px; height: 18px; }
.report dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.report dd em { font-style: normal; color: var(--ink-soft); margin-left: 4px; }
.report .is-miss { margin-top: 10px; padding: 16px; border: 0; border-radius: 16px; background: var(--ink); }
.report .is-miss dt, .report .is-miss dd { color: #fff; }
.report .is-miss dd { font-family: var(--display); font-size: 1.8rem; line-height: 1; }
.frame.is-on .is-miss dd { animation: blink 1.6s ease-in-out .5s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.mock-strategy { display: grid; justify-items: center; gap: 22px; padding: 30px 22px; }
.target { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--ink); color: #fff; }
.target .i { width: 54px; height: 54px; stroke-width: 1.4; }
.frame.is-on .target { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(29,29,31,.25); } 50% { box-shadow: 0 0 0 18px rgba(29,29,31,0); } }
.qs { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.qs li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg-soft); font-size: .95rem; font-weight: 500; }
.qs .i { width: 18px; height: 18px; }

.mock-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.cmp { border-radius: 18px; padding: 18px 16px; background: var(--bg-soft); }
.cmp.is-good { background: var(--ink); color: #fff; }
.cmp small { display: block; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.cmp.is-good small, .cmp.is-good span { color: #a1a1a6; }
.cmp b { display: block; margin-top: 10px; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.03em; line-height: 1; }
.cmp span { display: block; margin-top: 6px; font-size: .84rem; color: var(--ink-soft); line-height: 1.35; min-height: 2.7em; }
.dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 16px; max-width: 150px; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: #d9d2c7; }
.dots i.on { background: var(--ink); }
.is-good .dots { grid-template-columns: repeat(6, 1fr); }
.is-good .dots i { background: #48484a; }
.is-good .dots i.on { background: var(--accent); }
.cmp p { margin: 14px 0 0; font-size: .88rem; font-weight: 600; line-height: 1.3; }

.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 16px; }
.cal span { text-align: center; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.cal i { height: 26px; border-radius: 8px; background: var(--bg-soft); transition: background-color .3s ease; transition-delay: calc(var(--k, 0) * 35ms); }
.frame.is-on .cal i { background: var(--ink); }
.wait { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 13px 16px; border-radius: 14px; background: var(--bg-soft); font-weight: 600; font-size: .95rem; }

.route { display: grid; gap: 10px; }
.route__row { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--bg-soft); }
.route__row.is-good { background: var(--ink); color: #fff; }
.route__row b { display: block; }
.route__row small { display: block; color: var(--ink-soft); font-size: .86rem; }
.route__row.is-good small { color: #a1a1a6; }
.route__row.is-good .ico { background: #fff; color: var(--ink); }
.route__arrow { justify-self: center; color: var(--ink-soft); transform: rotate(90deg); }

.sys { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sys li { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid #f0f0f2; }
.sys li:last-child { border-bottom: 0; }
.sys b { display: block; font-size: .98rem; }
.sys small { display: block; color: var(--ink-soft); font-size: .85rem; }
.sys .tick { margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-soft); color: var(--bg-soft); transition: background-color .3s, color .3s; transition-delay: calc(var(--k, 0) * 160ms + .2s); }
.sys .tick .i { width: 15px; height: 15px; stroke-width: 2.4; }
.frame.is-on .sys .tick { background: var(--accent); color: #fff; }

.roi { display: grid; gap: 16px; }
.roi__row small { display: flex; justify-content: space-between; font-size: .88rem; color: var(--ink-soft); }
.roi__row small b { color: var(--ink); font-variant-numeric: tabular-nums; }
.roi__row > div { margin-top: 8px; height: 46px; border-radius: 14px; background: var(--bg-soft); overflow: hidden; }
.roi__row i { display: block; height: 100%; width: 0; border-radius: inherit; background: #c7c7cc; transition: width 1.2s cubic-bezier(.2,.7,.2,1) .15s; }
.roi__row.is-good i { background: var(--accent); }
.frame.is-on .roi__row i { width: var(--w); }
.roi__foot { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; }

/* SEO curve: chart stays pinned while the steps explain each phase */
.chart { margin-top: 30px; }
.chart__fig { position: sticky; top: 64px; z-index: 3; margin: 0 auto; max-width: 900px; padding: 14px 0 10px; background: #fff; }
.chart__img { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); cursor: crosshair; outline: 0; }
.chart__img img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
.chart__img:hover img, .chart__img:focus-visible img, .chart__img.is-color img { filter: none; }
.band { position: absolute; top: 37%; bottom: 12%; left: var(--a); width: calc(var(--b) - var(--a)); border-left: 2px solid var(--accent);
  background: rgba(184,97,61,.10); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.band.is-on { opacity: 1; }
.band--start { width: 0; }
.band span { position: absolute; top: 8px; left: 8px; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .76rem; font-weight: 600; white-space: nowrap; }
.chart__tip { margin: 10px 0 0; text-align: center; font-size: .84rem; color: var(--ink-soft); }
.chart__steps { max-width: 640px; margin: 0 auto; padding: 6vh 0 28vh; }
.chart__steps .step { min-height: 52vh; justify-content: flex-start; padding-top: 4vh; }

@media (max-width: 860px) {
  /* stacked deck: each card sticks under the top bar and the next slides over it (pages.js dims the covered one) */
  .deck { display: block; }
  .deck > .big { position: sticky; top: calc(84px + var(--i, 0) * 14px); margin: 0 auto 22px; max-width: 460px;
    max-height: calc(100dvh - 140px); transform-origin: 50% 0; will-change: transform; }
  .deck > .big:last-child { margin-bottom: 0; }
  .big:hover > img.bg { transform: scale(1.32); }
  .scrolly { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
  .scrolly__stage { top: 64px; z-index: 3; height: auto; padding: 14px 0 18px; background: #fff; }
  .scrolly__steps { padding: 8px 0 34vh; }
  .step { min-height: 62vh; justify-content: flex-start; padding-top: 20px; }
  .step p { font-size: 1.02rem; }
  .mock { padding: 16px; border-radius: 22px; box-shadow: 0 16px 40px rgba(0,0,0,.07); }
  .report > div { padding: 9px 2px; }
  .report .is-miss { padding: 12px 14px; }
  .mock-strategy { gap: 14px; padding: 18px 16px; }
  .target { width: 70px; height: 70px; } .target .i { width: 36px; height: 36px; }
  .qs li { padding: 8px 12px; font-size: .88rem; }
  .cal i { height: 16px; }
  .chart__fig { padding: 10px 0 6px; }
  .band span { font-size: .66rem; padding: 3px 7px; top: 4px; left: 4px; }
  .chart__steps .step { min-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv, .frame, .flip__state, .big, .big > img.bg, .cal i, .sys .tick, .roi__row i, .month__bar i { transition: none !important; animation: none !important; }
  .frame.is-on .is-miss dd, .frame.is-on .target { animation: none; }
}

/* ================= process page: full-screen hero, sideways steps, quality vs quantity ================= */
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--ink); }

.ph { position: relative; min-height: calc(100svh - 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  align-items: center; align-content: center; gap: 22px clamp(32px, 5vw, 64px); padding: clamp(32px, 6vh, 64px) 0 clamp(72px, 12vh, 110px); }
.ph h1 { grid-column: 1; grid-row: 1; align-self: end; font-family: var(--display); font-weight: 600; letter-spacing: -.045em; line-height: .98; margin: 0;
  font-size: clamp(2.6rem, 5.85vw, 5.25rem); }
.ph__copy { grid-column: 1; grid-row: 2; align-self: start; }
.ph__live { grid-column: 2; grid-row: 1 / 3; }
.ph h1 span { display: block; white-space: nowrap; }
.ph h1 span + span { color: var(--accent); }
.ph .lead { max-width: 46ch; }
.ph__copy > .lead:first-child { margin-top: 0; }
.ph .lead + .lead { margin-top: 12px; }
.ph__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ph__cta .btn { padding: 14px 22px; font-size: .97rem; }
.ph__proof { list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px clamp(18px, 3vw, 34px); margin: 38px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.ph__proof b { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.ph__proof span { display: block; margin-top: 3px; font-size: .86rem; color: var(--ink-soft); }

/* live feed: a slice of the client panel, new events keep arriving on top */
.ph__live { position: relative; display: grid; place-items: center; }
.ph__live::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg-soft), rgba(255,255,255,0)); }
.live { width: 100%; max-width: 420px; padding: 18px; border-radius: 30px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 40px 90px rgba(0,0,0,.10); transform: rotate(-2deg); }
.live__head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.live__head small { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; animation: live 1.6s ease-in-out infinite; }
.live__head .live__dot { color: var(--accent); }
@keyframes live { 50% { opacity: .25; } }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; height: 304px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.feed li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--bg-soft); }
.feed li:first-child { background: var(--ink); color: #fff; }
.feed li:first-child .ico { background: var(--accent); color: #fff; }
.feed li:first-child small { color: #a1a1a6; }
.feed b { display: block; font-size: .95rem; line-height: 1.25; }
.feed small { display: block; font-size: .84rem; color: var(--ink-soft); line-height: 1.3; }
.feed li.is-new { animation: drop .6s cubic-bezier(.2,.8,.2,1); }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) scale(.96); } }

.ph__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px;
  text-decoration: none; font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.ph__cue i { width: 1.5px; height: 34px; background: linear-gradient(var(--ink), transparent); background-size: 100% 200%; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } }

/* sideways steps: the section is tall and pinned; scrolling slides the cards in from the right */
.hs { margin-top: clamp(24px, 4vh, 48px); scroll-margin-top: 64px; }
.hs__pin { display: flex; flex-direction: column; justify-content: center; }
.hs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hs__head h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.08;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin: 10px 0 0; max-width: 22ch; text-wrap: balance; }
.hs__count { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs__count b { color: var(--accent-ink); }
.hs__view { margin: clamp(24px, 4vh, 40px) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hs__view::-webkit-scrollbar { display: none; }
.hs__track { list-style: none; margin: 0; padding: 0 0 30px; display: flex; gap: 18px; width: max-content; }
.sc { position: relative; flex: none; display: flex; flex-direction: column; width: clamp(272px, 78vw, 340px); aspect-ratio: 4 / 5;
  max-height: calc(100svh - 300px); min-height: 340px; padding: 24px; border-radius: 32px; background: var(--bg-soft); scroll-snap-align: start;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 20px 50px rgba(0,0,0,.07); }
.sc.is-dark { background: var(--ink); color: #fff; }
.sc__n { margin: auto 0 0; font-family: var(--display); font-weight: 600; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(4.4rem, 8vw, 6.2rem); color: #ddd3c6; font-variant-numeric: tabular-nums; }
.sc.is-dark .sc__n { color: var(--accent); }
.sc__body { margin-top: 14px; }
.sc h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.sc p { margin: 8px 0 0; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.sc.is-dark p { color: #a1a1a6; }
.hs__bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.hs__bar i { display: block; height: 100%; width: calc(100% / 6); background: var(--accent); border-radius: inherit; transform-origin: 0 50%; }
.hs.is-pinned .hs__bar i { width: 100%; transform: scaleX(var(--p, 0)); }

/* pinned mode (pages.js adds .is-pinned unless motion is reduced) */
.hs.is-pinned { height: calc(100svh + var(--run, 1600px)); }
.hs.is-pinned .hs__pin { position: sticky; top: 64px; height: calc(100svh - 64px); }
.hs.is-pinned .hs__view { overflow: visible; scroll-snap-type: none; }
.hs.is-pinned .hs__track { transform: translateX(calc(-1 * var(--x, 0px))); will-change: transform; }
.hs.is-pinned .sc { opacity: 0; transform: translateX(80px) rotate(3deg) scale(.94); transform-origin: 0 100%;
  transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.hs.is-pinned .sc.is-in { opacity: 1; transform: none; }

/* quality over quantity */
.qual .kicker { font-size: 1.15rem; }
.section.qual h2 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); letter-spacing: -.035em; max-width: none; }
.qual > .lead { max-width: 62ch; }
.qual > .lead + .lead { margin-top: 12px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 68px; }
.vs__card { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: var(--bg-soft); }
.vs__card.is-good { background: var(--ink); color: #fff; }
.vs__card small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.vs__card.is-good small { color: #e9a687; }
.vs__card b { display: block; margin-top: 16px; font-family: var(--display); font-weight: 600; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(1.9rem, 3.2vw, 3.05rem); font-variant-numeric: tabular-nums; }
.vs__logo { display: block; height: 20px; width: auto; }
.vs__text > span { display: block; margin-top: 14px; max-width: 34ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; }
.vs__card.is-good .vs__text > span { color: #a1a1a6; }
.vs .dots { margin: auto 0 0; padding-top: 28px; }
.vs .dots--many { grid-template-columns: repeat(24, 1fr); gap: 4px; max-width: 340px; }
.vs .dots--half { grid-template-columns: repeat(12, 1fr); gap: 7px; max-width: 360px; }
.vs .is-good .dots i { background: #48484a; }
.vs .is-good .dots i.on { background: var(--accent); }

/* transparency: two lines, same size; taller cards */
.h2-2 span { display: block; }
.h2-2 span:first-child { color: #a1a1a6; }
.section h2.h2-2 { max-width: none; }
.tp .big { aspect-ratio: 3 / 4.3; }
.tp .big__title { font-size: 1.12rem; }
.tp .big__sub { font-size: .93rem; }
.tp .pill { gap: 7px; }
.tp .pill .i { width: 15px; height: 15px; }
.tp .is-dark .pill .live__dot { color: var(--ink); }
.tp__viz { position: relative; z-index: 2; flex: 1; min-height: 0; margin: 18px 0; display: grid; align-content: center; }
.tp__spark { grid-template-columns: repeat(7, 1fr); align-items: end; align-content: stretch; gap: 7px; }
.tp__spark i { align-self: end; height: 0; border-radius: 8px 8px 4px 4px; background: rgba(255,255,255,.2); transition: height 1.1s cubic-bezier(.2,.7,.2,1); }
.tp__spark i:last-child { background: var(--accent); }
.tp.is-in .tp__spark i { height: calc(var(--h) * 1%); }
.tp__week { grid-template-columns: repeat(7, 1fr); gap: 8px 6px; }
.tp__week span { text-align: center; font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.tp__week i { aspect-ratio: 1; border-radius: 50%; background: #e4ddd2; transition: background-color .3s ease; transition-delay: calc(var(--k) * 110ms + .2s); }
.tp.is-in .tp__week i { background: var(--ink); }
.tp__doc { gap: 10px; padding: 18px; border-radius: 18px; background: #fff; align-content: center; flex: none; margin: auto 0; }
.tp__doc i { height: 9px; width: 0; border-radius: 9px; background: #e4ddd2; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.tp__doc i.on { height: 22px; background: var(--accent); }
.tp.is-in .tp__doc i { width: calc(var(--w) * 1%); }
@media (max-width: 1080px) and (min-width: 861px) { .tp .big { aspect-ratio: 3 / 4.6; padding: 20px; } }
.cta--lines h2, .cta--lines p { max-width: none; }
@media (min-width: 700px) { .cta--lines .ln { display: block; } }
@media (max-width: 860px) {
  .ph { grid-template-columns: 1fr; align-content: center; gap: 22px; padding-top: 28px; }
  .ph__live { grid-column: 1; grid-row: 3; margin-top: 14px; }
  .ph h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .live { max-width: 380px; transform: none; }
  .feed { height: 200px; }
  .ph__proof { gap: 10px 18px; }
  .ph__proof b { font-size: 1.25rem; }
  .ph__cue { display: none; }
  .vs { grid-template-columns: 1fr; margin-top: 48px; }
  .tp .big { aspect-ratio: 3 / 4; }
  .hs__count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live__dot, .ph__cue i, .feed li.is-new { animation: none !important; }
  .tp__spark i, .tp__week i, .tp__doc i { transition: none !important; }
}
.vs__card b .ln { display: block; }

/* Pinned sideways track on como-trabajamos must not let the page scroll sideways */
html { overflow-x: clip; }