@font-face {
  font-family: 'Spartan'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/spartan-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/nunito-sans-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/nunito-sans-v15-latin-700.woff2') format('woff2');
}

:root {

  --paper:        #FFFFFF;
  --panel:        #F5F3EF;
  --panel-2:      #F2EFE9;
  --panel-3:      #EAE6DE;
  --panel-4:      #EDE9E1;
  --panel-5:      #E4E0D7;
  --panel-0:      rgba(245, 243, 239, 0);

  --ink:          #121212;
  --ink-soft:     var(--ink);
  --muted:        #5B5B57;
  --label:        var(--muted);
  --faint:        #C3BFB7;
  --gold:         #AA8A51;

  --line:         #E6E2DB;
  --line-strong:  #D5D0C7;
  --line-warm:    #DFDAD1;
  --line-panel:   #E1DCD3;

  --d-bg:         #101010;
  --d-card:       #1A1A19;
  --d-card-2:     #242423;
  --d-card-3:     #1E1E1D;
  --d-line:       #2C2C2A;
  --d-text:       #B8B4AC;
  --d-label:      var(--d-text);

  --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Spartan', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-d1:   clamp(38px, 7.1vw, 78px);
  --fs-d2:   clamp(30px, 4.4vw, 52px);
  --fs-d2s:  clamp(28px, 3.9vw, 46px);
  --fs-d3:   clamp(24px, 2.8vw, 36px);
  --fs-d4:   clamp(20px, 1.9vw, 27px);
  --fs-d5:   clamp(18px, 1.5vw, 22px);
  --fs-h5:   20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm:   16px;
  --fs-xs:   12px;
  --fs-2xs:  10px;
  --fs-3xs:  8px;

  --gutter:  clamp(20px, 3.6vw, 48px);
  --sec-y:   clamp(56px, 7vw, 92px);
  --maxw:    1600px;
  --r-lg:    20px;
  --r-md:    18px;
  --r-sm:    14px;
  --pill:    99px;

  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

body[data-vertical="performance"] {
  --panel:        #F4F4F5;
  --panel-2:      #F0F0F2;
  --panel-3:      #E7E7EA;
  --panel-4:      #EAEAED;
  --panel-5:      #E1E1E4;
  --panel-0:      rgba(244, 244, 245, 0);
  --line:         #E5E5E8;
  --line-strong:  #D3D3D8;
  --line-warm:    #DCDCE0;
  --line-panel:   #DFDFE3;
  --faint:        #C1C1C6;
  --label:        var(--muted);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;

}

body {
  margin: 0;
  touch-action: manipulation;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: none;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;

  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; transition: color .25s var(--ease), opacity .25s var(--ease); }
a:hover { color: var(--muted); }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible { outline-color: var(--paper); }

html { scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }

[id] { scroll-margin-top: 96px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 14px 20px; background: var(--ink); color: var(--paper);
  font-size: var(--fs-sm); font-weight: 600; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; color: var(--paper); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.h1 {

  font-size: min(var(--fs-d1), 10vw);
  line-height: .94;
  letter-spacing: -.045em;
  font-weight: 800;
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-d2);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 800;
  text-wrap: balance;
}
.h2--sm { font-size: var(--fs-d2s); line-height: 1.04; }
.h3 { font-size: var(--fs-d4); line-height: 1.2; letter-spacing: -.03em; font-weight: 700; }
.h4 { font-size: var(--fs-d5); line-height: 1.25; letter-spacing: -.03em; font-weight: 700; }
.h5 { font-size: var(--fs-h5); line-height: 1.25; letter-spacing: -.025em; font-weight: 700; }

.lead    { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.body    { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); }
.body-sm { font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
  line-height: 1.5;
}
.eyebrow::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: var(--pill);
  background: var(--ink);
}
.eyebrow--plain { display: block; }
.eyebrow--plain::before { display: none; }

.shoplock { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.shoplock img { height: 27px; width: auto; }
.shoplock__meta {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--label);
}

.h1, .h2, .prin__t, .phase__t, .chapter__t, .consent__t,
.case__title, .case__invite-t {
  font-family: var(--display);
}

.mono {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
}
.mono--xs { font-size: var(--fs-2xs); letter-spacing: .1em; }
.mono--tight { letter-spacing: .06em; text-transform: none; }
.arrow { font-family: var(--sans); font-weight: 400; }

.tagpill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section {
  position: relative;
  padding: var(--sec-y) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.section--flush   { padding-bottom: 0; }
.section--panel   { background: var(--panel); }
.section--tight   { padding-top: clamp(32px, 3.4vw, 44px); padding-bottom: clamp(32px, 3.4vw, 44px); }
.section--nobord  { border-bottom: 0; }

.section--dark {
  background: var(--d-bg);
  color: var(--paper);
  border-bottom: 0;
}
.section--dark .h1, .section--dark .h2, .section--dark .h3 { color: var(--paper); }
.section--dark .body, .section--dark .lead, .section--dark .body-sm { color: var(--d-text); }
.section--dark .mono, .section--dark .eyebrow { color: var(--d-label); }
.section--dark .eyebrow::before { background: var(--paper); }
.section--dark a:hover { color: var(--d-text); }

.wrap { max-width: min(var(--maxw), 100%); margin-inline: auto; }

.breadcrumbs {
  padding: clamp(16px, 1.8vw, 24px) var(--gutter) 0;
  border-bottom: 0;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}
.breadcrumbs__list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.breadcrumbs__list li + li::before {
  content: "/";
  color: var(--faint);
  font-weight: 400;
}
.breadcrumbs__list a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.breadcrumbs__list a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.breadcrumbs__list [aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}

.head {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: clamp(20px, 3vw, 48px);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.head__title { max-width: 680px; }

.head__aside {
  --ha-surface: var(--panel);
  max-width: 400px;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ha-surface);
  color: var(--ink-soft);
}
.section--panel .head__aside,
.section--shopify .head__aside { --ha-surface: var(--paper); }
.section--dark .head__aside {
  --ha-surface: var(--d-card);
  border-color: var(--d-line);
  color: var(--d-text);
}

.split > *, .grid > *, .head > *, .wall__col, .footer__grid > *,
.handoff > *, .editions > *, .principles > * { min-width: 0; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.grid--team {
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(26px, 3.4vw, 52px);
  row-gap: clamp(36px, 4.4vw, 66px);
  max-width: 1050px;
  margin-inline: auto;
}

.prodsplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 34vw, 500px);
  column-gap: clamp(32px, 4.5vw, 78px);
  row-gap: clamp(38px, 4.6vw, 68px);
  align-items: start;
}

.prodsplit__head  { grid-column: 1; grid-row: 1; }
.prodsplit__aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 116px; }
.prodsplit__main  { grid-column: 1; grid-row: 2; }
.prodclip__lead { margin-top: clamp(22px, 2.4vw, 30px); display: grid; gap: 14px; }

.prodclip__t {
  font-size: var(--fs-d5); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.15;
}
.prodclip__t::after {
  content: '';
  display: block; width: 64px; height: 4px;
  margin-top: 13px; border-radius: 3px;
  background: var(--gold);
}
.prodclip {
  position: relative; margin: 0;
  width: 100%;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--d-bg);

  aspect-ratio: 9 / 7;
}
.prodclip__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.prodclip__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(48px, 7vw, 84px) clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 26px);
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -.03em;
  color: var(--paper); text-wrap: balance;
  background: linear-gradient(180deg, rgba(16,16,16,0) 0%, rgba(16,16,16,.62) 52%, rgba(16,16,16,.86) 100%);
}

.head--center {
  flex-direction: column; align-items: center;
  text-align: center;
}
.head--center .head__title { max-width: 720px; }
.span-2 { grid-column: span 2; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split--hero { grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 4.4vw, 56px); }
.split--wide { grid-template-columns: 1.1fr 1fr; }
.split--form { grid-template-columns: .9fr 1.1fr; align-items: start; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--ink-soft); color: var(--paper); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--panel); }

.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }

.btn--sm { padding: 12px 22px; font-size: var(--fs-sm); }
.btn--xs { padding: 11px 18px; font-size: var(--fs-sm); border-color: var(--line-strong); }
.btn--xs:hover { border-color: var(--ink); }

.section--dark .btn--solid { background: var(--paper); color: var(--ink); }
.section--dark .btn--solid:hover { background: var(--d-text); }
.section--dark .btn--ghost { border-color: var(--d-line); color: var(--paper); }
.section--dark .btn--ghost:hover { border-color: var(--paper); background: transparent; color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }

.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);

  padding: 16px max(var(--gutter), calc((100% - var(--maxw)) / 2));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 1px 8px rgba(16, 16, 16, .06);
}

.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand:hover { color: var(--ink); }
.brand__logo {
  height: clamp(28px, 2.8vw, 38px);
  width: auto;
  display: block;
}
.brand__sub {
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); font-size: var(--fs-sm); font-weight: 500; letter-spacing: -.01em; }
.nav__link { position: relative; padding: 4px 0; }
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  font-weight: 600;
  line-height: 1.2;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav__pill:hover { background: var(--ink); color: var(--paper); }
.nav__pill[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav__pill::after { display: none; }
.nav__pill-main { display: inline-flex; align-items: center; align-self: center; gap: 10px; min-width: 0; }
.nav__brands { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.nav__brand-mark { display: block; overflow: hidden; flex: none; }
.nav__brand-mark img { display: block; width: auto; max-width: none; }
.nav__brand-mark--shopify { width: 25px; height: 28px; transform: translateY(-1px); }
.nav__brand-mark--shopify img { height: 28px; }
.nav__brand-mark--meta { width: 28px; height: 18px; }
.nav__brand-mark--meta img { height: 18px; }

.header__cta { flex: none; }
.nav__cta-mark {
  display: block;
  width: 28px;
  height: 23px;
  object-fit: contain;
  transform: scale(1.2);
}
.nav-toggle { display: none; }

.nav > .btn { display: none; }

@media (min-width: 1021px) {
  .nav__pill, .header__cta { height: 44px; }
}

.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: 2px; background: transparent; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 100%;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
}

.hero { padding-block: clamp(56px, 6.6vw, 88px) clamp(56px, 6.4vw, 84px); }
.hero__lead { margin-top: clamp(22px, 2.4vw, 32px); max-width: 530px; }
.hero__eyebrow { margin-bottom: clamp(20px, 2.2vw, 28px); }

.hero__proof {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(16px, 2vw, 26px);
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
}
.hero__proof strong {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: -.02em; text-transform: none; color: var(--ink);
}
.hero__proof img { height: 17px; width: auto; opacity: .82; transition: opacity .3s var(--ease); }
.hero__proof img:hover { opacity: 1; }
.hero__proof img.is-tall { height: 21px; }

.hero__proof img.is-gads { height: 34px; margin-block: -9px; }

.hero__rating {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 14px;
  margin-top: 16px;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
}
.hero__rating strong {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: -.02em; text-transform: none; color: var(--ink);
}
.hero__rating strong em { font-style: normal; color: var(--gold); letter-spacing: .06em; }

.wall {
  position: relative;
  height: clamp(420px, 46vw, 660px);
  overflow: hidden;
}

.wall--row { height: auto; overflow: visible; }

.wall__cols { display: flex; gap: 12px; align-items: flex-start; }
.wall__col { flex: 1; display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.wall__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--paper) 78%);
  pointer-events: none;
}
.section--panel .wall__fade { background: linear-gradient(180deg, var(--panel-0) 0%, var(--panel) 78%); }

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px;
}
.tile--ph {
  background-image: repeating-linear-gradient(135deg, var(--panel-2) 0 9px, var(--panel-3) 9px 18px);
}
.tile--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tile--ink .tile__label { color: var(--d-label); }
.tile--flat { background: var(--panel); }
.tile--9x16 { aspect-ratio: 9 / 16; }
.tile--4x5  { aspect-ratio: 4 / 5; }
.tile--3x4  { aspect-ratio: 3 / 4; }
.tile--1x1  { aspect-ratio: 1; }
.tile--16x10 { aspect-ratio: 16 / 10; }
.tile--end { justify-content: flex-end; }

.tile__label {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .08em;
  color: var(--label);
  line-height: 1.5;
  position: relative; z-index: 2;
}
.tile__play {
  width: 26px; height: 26px; border-radius: var(--pill);
  background: rgba(16, 16, 16, .08);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs);
  position: relative; z-index: 2;
}
.tile--ink .tile__play { background: rgba(255, 255, 255, .14); }

.tile--video { padding: 0; border-color: var(--line); background: var(--panel-2); }
.tile--video video, .tile--video img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tile--video .tile__label {
  position: absolute; left: 11px; bottom: 10px;
  padding: 5px 9px; border-radius: var(--pill);
  background: rgba(16, 16, 16, .58);
  color: var(--paper);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.marquee { position: relative; overflow: hidden; margin-inline: calc(var(--gutter) * -1); }
.marquee__track {
  display: flex; width: max-content;
  will-change: transform;
}
.marquee__group {
  display: flex; align-items: center;
  gap: clamp(24px, 3.2vw, 44px);
  padding-inline: clamp(12px, 1.6vw, 22px);
  white-space: nowrap;
}
.marquee__group > span { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 44px); }
.marquee__group i {
  width: 5px; height: 5px; border-radius: var(--pill);
  background: var(--faint); flex: none;
}
.marquee__fade {
  position: absolute; top: 0; bottom: 0; width: clamp(40px, 6vw, 90px);
  pointer-events: none; z-index: 2;
}
.marquee__fade--l { left: 0; background: linear-gradient(90deg, var(--panel) 10%, var(--panel-0)); }
.marquee__fade--r { right: 0; background: linear-gradient(270deg, var(--panel) 10%, var(--panel-0)); }

.card {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  min-height: 212px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px;
  transition: transform .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.card--fill { background: var(--panel); }
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.card--fill:hover { background: var(--panel-2); }
.card__num { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .12em; color: var(--label); }

.card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}

.card__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.card__icon svg { width: 20px; height: 20px; display: block; }
.card:hover .card__icon { border-color: var(--ink); transform: translateY(-2px); }
.section--dark .card__icon { background: transparent; border-color: var(--d-line); color: var(--paper); }
.card__body p { margin-top: 9px; }
.card--lg { min-height: 230px; }

.section--dark .card { border-color: var(--d-line); }
.section--dark .card:hover { border-color: #3C3C39; }

.dots { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(26px, 3vw, 34px); font-size: var(--fs-body); color: var(--ink-soft); }
.dots li { display: flex; gap: 12px; align-items: flex-start; }
.dots li::before {
  content: ''; flex: none;
  width: 6px; height: 6px; margin-top: 9px;
  border-radius: var(--pill); background: var(--ink);
}

.section--dark .dots { color: var(--d-text); }
.section--dark .dots li::before { background: var(--gold); }

.ledger { display: grid; }

.sys {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 34vw, 480px);
  grid-template-areas:
    "specs stage";
  column-gap: clamp(36px, 5vw, 88px);
  align-content: start;
  padding-block: clamp(40px, 4.6vw, 68px);
  border-top: 1px solid var(--line);
}
.sys:first-child { border-top: 0; padding-top: clamp(8px, 1vw, 16px); }
.sys:last-child { padding-bottom: clamp(16px, 2vw, 28px); }
.sys > * { min-width: 0; }

.specs {
  grid-area: specs;
  margin-top: clamp(24px, 2.6vw, 38px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.spec {
  position: relative;
  display: block;
  padding: clamp(16px, 1.7vw, 22px);
  padding-left: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: opacity .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}

.spec::before {
  content: '';
  position: absolute;
  left: 20px;
  top: calc(clamp(16px, 1.7vw, 22px) + .55em);
  width: 7px; height: 7px;
  border-radius: var(--pill);
  background: var(--faint);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.spec.is-live {
  border-color: var(--gold);
  background: linear-gradient(165deg, rgba(170, 138, 81, .07), rgba(170, 138, 81, .02));
}
.spec.is-live::before { background: var(--gold); transform: scale(1.3); }

@media (hover: hover) and (pointer: fine) {
  .spec:hover {
    border-color: var(--gold);
    background: linear-gradient(165deg, rgba(170, 138, 81, .07), rgba(170, 138, 81, .02));
  }
  .specs:hover .spec { opacity: .38; }
  .specs:hover .spec:hover { opacity: 1; }
}

.spec__name {
  font-size: var(--fs-d5);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}
.spec__desc {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

.stage {
  grid-area: stage;
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
  min-height: clamp(420px, 36vw, 560px);
}
.stage__view { position: absolute; inset: 0 0 41px 0; }
.stage__view::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .38;
}

.stage__item {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: clamp(18px, 2vw, 28px);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  visibility: hidden;
  transition:
    clip-path .8s var(--ease-out),
    opacity .5s var(--ease),
    visibility 0s .8s;
}
.stage__item.is-on {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition:
    clip-path .8s var(--ease-out),
    opacity .5s var(--ease),
    visibility 0s;
}

.stage__tile {
  height: min(88%, 470px);
  aspect-ratio: 9 / 16;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel-2);
  box-shadow: 0 24px 60px -38px rgba(16, 16, 16, .45);
}
.stage__tile video, .stage__tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.stage__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  height: 41px;
  padding: 0 15px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.stage__cap {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap; overflow: hidden;
}
.stage__cap::before {
  content: ''; flex: none;
  width: 6px; height: 6px; border-radius: var(--pill);
  background: var(--ink);
}
.stage__count {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mock {
  width: min(100%, 340px);
  display: grid; gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: 0 24px 60px -42px rgba(16, 16, 16, .4);
}
.mock__head, .mock__foot {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
}
.mock__foot { padding-top: 10px; border-top: 1px solid var(--line); }

.mock-rep__graph { width: 100%; height: 72px; display: block; }
.mock-rep__grid { fill: none; stroke: var(--line); stroke-width: 1; }
.mock-rep__line {
  fill: none;
  stroke: var(--gold); stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.stage__item.is-on .mock-rep__line { animation: repDraw 1.3s var(--ease-out) both; }
@keyframes repDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mock-rep__rows { display: grid; gap: 9px; }
.mock-rep__row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr);
  align-items: center; gap: 12px;
}
.mock-rep__row em {
  font-style: normal;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--label);
}
.mock-rep__row span { display: block; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.mock-rep__row i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 4px; background: var(--ink); }
.mock-rep__row:first-child i { background: var(--gold); }

.mock-serp__query {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
}
.mock-serp__q { font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.01em; }
.mock-serp__loc {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--label);
}
.mock-serp__result { display: grid; gap: 7px; padding: 12px 2px 2px; }
.mock-serp__ad {
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.mock-serp__title { height: 11px; width: 74%; border-radius: 4px; background: var(--ink); }
.mock-serp__title--sm { height: 9px; width: 58%; background: var(--faint); }
.mock-serp__line { height: 7px; width: 92%; border-radius: 4px; background: var(--panel-3); }
.mock-serp__line--short { width: 64%; }
.mock-serp__links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  padding-top: 4px;
}
.mock-serp__links span {
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    linear-gradient(90deg, var(--panel-3) 0 52%, transparent 52%) no-repeat 7px 8px / 60% 6px;
}
.mock-serp__result--dim { opacity: .5; padding-top: 4px; }

.mock-loc__root {
  justify-self: start;
  padding: 7px 13px;
  border-radius: 9px;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.01em;
}
.mock-loc__branches {
  display: grid; gap: 9px;
  margin-left: 13px;
  padding-left: 17px;
  border-left: 1px solid var(--line-strong);
}
.mock-loc__node {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink-soft);
}
.mock-loc__node::before {
  content: '';
  position: absolute; left: -17px; top: 50%;
  width: 12px; height: 1px;
  background: var(--line-strong);
}
.mock-loc__dot { width: 6px; height: 6px; border-radius: var(--pill); background: var(--ink); flex: none; }
.mock-loc__node em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em;
  color: var(--label);
}

.mock-pipe__flow {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 7px;
}
.mock-pipe__node {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .05em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mock-pipe__node--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mock-pipe__lane { position: relative; height: 1px; border-top: 1px dashed var(--line-strong); }
.mock-pipe__lane i {
  position: absolute; top: -3px; left: 0;
  width: 5px; height: 5px; border-radius: var(--pill);
  background: var(--ink);
  opacity: 0;
}
.sys.is-anim .stage__item.is-on .mock-pipe__lane i { animation: pipeDot 2.6s var(--ease) infinite; }
.sys.is-anim .stage__item.is-on .mock-pipe__lane--b i { animation-delay: 1.3s; }
@keyframes pipeDot {
  0%       { left: 0;   opacity: 0; }
  12%      { opacity: 1; }
  46%      { left: calc(100% - 5px); opacity: 1; }
  58%, 100%{ left: calc(100% - 5px); opacity: 0; }
}
.mock-pipe__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-pipe__tags span {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.creed { position: relative; padding-block: clamp(56px, 7vw, 104px); overflow: clip; }
.creed__aura {
  position: absolute;
  top: 50%; right: -6%;
  width: clamp(420px, 52vw, 860px);
  aspect-ratio: 1;
  margin-top: calc(clamp(420px, 52vw, 860px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 138, 81, .13) 0%, rgba(170, 138, 81, .05) 42%, rgba(170, 138, 81, 0) 68%);
  pointer-events: none;
}
.creed.is-anim .creed__aura { animation: auraDrift 16s ease-in-out infinite alternate; }
@keyframes auraDrift {
  from { transform: translate3d(0, -3%, 0) scale(1); }
  to   { transform: translate3d(-9%, 5%, 0) scale(1.14); }
}

.creed__sig {
  position: absolute;
  top: 50%; right: -3%;
  width: clamp(440px, 52vw, 940px);
  transform: translateY(-46%);
  pointer-events: none;
}
.creed__sigbase { fill: #232321; }
.creed__sigsheen { transform: translateX(-380px); }

.creed.is-anim .creed__sigsheen { animation: creedSheen 2.6s var(--ease) .8s forwards; }
@keyframes creedSheen {
  from { transform: translateX(-380px); }
  to   { transform: translateX(1340px); }
}

.creed__side {
  display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start;
  padding-left: clamp(0px, 5vw, 86px);
}
.creed__marks { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 30px); }
.creed__mark {
  display: block; width: auto;
  filter: invert(1) grayscale(1);
}
.creed__mark--bmw  { height: 34px; }
.creed__mark--mini { height: 24px; }
.creed__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px clamp(36px, 5vw, 84px);
  align-items: center;
}
.creed__lead {
  margin: 0;
  font-size: var(--fs-body); line-height: 1.7;
  color: var(--d-text);
  max-width: 52ch;
}

.case {
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);

  color: var(--ink);
  transition: transform .55s var(--ease), border-color .4s var(--ease), box-shadow .55s var(--ease);
}
.section--dark .case:not(.case--dark) .btn--xs { border-color: var(--line-strong); color: var(--ink); }
.section--dark .case:not(.case--dark) .btn--xs:hover { border-color: var(--ink); background: var(--panel); }
.case:hover { transform: translateY(-4px); box-shadow: 0 18px 50px -28px rgba(16,16,16,.28); border-color: var(--line-strong); }

.refcases { display: grid; }
.refcase {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
  padding-block: clamp(36px, 4.6vw, 68px);
  border-top: 1px solid var(--line);
}
.refcase:first-child { border-top: 0; padding-top: clamp(10px, 1.6vw, 22px); }
.refcase__media {
  position: sticky; top: 92px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  aspect-ratio: 16 / 10;
}
.refcase__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.refcase { --acc: var(--gold); --acc-ink: var(--gold); }
.refcase__name {
  font-size: var(--fs-d3);
  font-weight: 800; letter-spacing: -.03em;
}

.refcase__name::after {
  content: '';
  display: block;
  width: 78px; height: 5px;
  margin-top: 13px;
  border-radius: 3px;
  background: var(--acc);
}
.refcase__intro {
  margin-top: 12px;
  max-width: 58ch;
  font-size: var(--fs-body); line-height: 1.65;
  color: var(--muted);
}

.refcase__facts { margin-top: clamp(18px, 2vw, 26px); display: grid; gap: 8px; }
.refcase__item summary {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  border-radius: 11px;
  font-size: var(--fs-body); font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.refcase__item summary::-webkit-details-marker { display: none; }
.refcase__item summary::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--acc);
  opacity: .13;
  transition: opacity .3s var(--ease);
}
@media (hover: hover) {
  .refcase__item summary:hover::before { opacity: .22; }
}
.refcase__item[open] summary::before { opacity: .24; }

.refcase__item summary:focus-visible { outline-offset: 3px; border-radius: 11px; }
.refcase__item summary i {
  position: relative; flex: none;
  width: 14px; height: 14px;
}
.refcase__item summary i::before,
.refcase__item summary i::after {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--acc-ink);
  transition: transform .35s var(--ease);
}
.refcase__item summary i::after { transform: rotate(90deg); }
.refcase__item[open] summary i::after { transform: rotate(0deg); }

.refcase__item summary > span, .refcase__item summary i { position: relative; z-index: 1; }
.refcase__go:hover { border-color: var(--acc-ink); color: var(--acc-ink); }
.refcase__panel p {
  padding: 13px 16px 5px;
  font-size: var(--fs-body); line-height: 1.65; color: var(--muted);
  max-width: 60ch;
}
.refcase__go { margin-top: 20px; }

.refmore { display: none; justify-content: center; margin-top: 4px; }

.case__media { position: relative; overflow: hidden; background: var(--panel-2); aspect-ratio: 16 / 10; }
.case__media video, .case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__media--ph { background-image: repeating-linear-gradient(135deg, var(--panel-2) 0 10px, var(--panel-3) 10px 20px); display: flex; align-items: flex-end; padding: 16px; }

.case__body { padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; gap: 20px; flex: 1; }
.case__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.case__title { font-size: var(--fs-d4); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.case__tag { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.case__text { margin-top: 12px; font-size: var(--fs-body); line-height: 1.6; color: var(--muted); }

.case__foot {
  margin-top: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.case__metrics { display: flex; gap: clamp(18px, 2.2vw, 26px); }
.metric__value { font-size: var(--fs-d4); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric__label { margin-top: 5px; font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .06em; color: var(--label); }

.case--dark { background: var(--d-card); border-color: transparent; color: var(--paper); }
.case--dark .case__media { background: var(--d-card-2); }
.case--dark .case__media--ph { background-image: repeating-linear-gradient(135deg, var(--d-card-2) 0 10px, var(--d-card-3) 10px 20px); }
.case--dark .case__text { color: var(--d-text); }
.case--dark .case__tag, .case--dark .metric__label, .case--dark .mono { color: var(--d-label); }
.case--dark .case__foot { border-top-color: var(--d-line); }
.case--dark:hover { border-color: var(--d-line); box-shadow: none; }

.voice {
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.voice:hover { transform: translateY(-4px); box-shadow: 0 16px 44px -26px rgba(16,16,16,.26); }
.voice__media { position: relative; aspect-ratio: 9 / 13; background: var(--panel-2); }
.voice__media video { width: 100%; height: 100%; object-fit: cover; }
.voice__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(16,16,16,.05), rgba(16,16,16,.34));
  transition: opacity .4s var(--ease);
  cursor: pointer;
}
.voice__play span {
  width: 54px; height: 54px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .94);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body); color: var(--ink);
  padding-left: 3px;
  transition: transform .4s var(--ease);
  box-shadow: 0 6px 24px -8px rgba(16,16,16,.4);
}
.voice:hover .voice__play span { transform: scale(1.07); }
.voice__play.is-hidden { opacity: 0; pointer-events: none; }
.voice__body { padding: 18px; }
.voice__name { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.02em; }
.voice__role { margin-top: 4px; font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.voice__transcript { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.voice__transcript summary {
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.voice__transcript summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.voice__transcript p { margin-top: 12px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.65; }
.voice__transcript strong { color: var(--ink); }

.partnerbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 32px);
  margin-top: 32px;
  padding: 26px clamp(20px, 2.4vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.partnerbar__left { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 20px); }
.partnerbar img { height: 26px; width: auto; }

.person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, var(--panel-2) 0 10px, var(--panel-3) 10px 20px);
}
.person__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.person__name { margin-top: 13px; font-size: var(--fs-body); font-weight: 700; letter-spacing: -.02em; }

.person__name::after {
  content: '';
  display: block;
  margin-top: 5px;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(.45);
  opacity: .55;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease);
}
.person:hover .person__name::after { transform: scaleX(2.2); opacity: 1; }
.person__role { margin-top: 6px; font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--label); text-wrap: balance; }

.section--shopify {
  --shop: #5E8E3E;
  background:
    radial-gradient(85% 110% at 6% 0%, rgba(94, 142, 62, .13) 0%, rgba(94, 142, 62, 0) 55%),
    radial-gradient(65% 95% at 96% 18%, rgba(140, 191, 84, .10) 0%, rgba(140, 191, 84, 0) 58%),
    var(--paper);
}
.section--shopify .eyebrow::before { background: var(--shop); }

.editions {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) clamp(280px, 23vw, 350px);
  gap: clamp(28px, 4vw, 64px);
  row-gap: 0;
  align-items: start;
}
.editions > * { min-width: 0; }

.editions .chapters { order: 1; }
.editions .chapters__body { order: 2; }
.editions .chapstage { order: 3; }
.editions > .chapter--cta { grid-column: 2; order: 4; }

.chapstage { position: sticky; top: 104px; }
.chapstage__view {
  position: relative;
  min-height: 400px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.chapstage__view::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: .34;
}
.chapstage__item {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: clamp(16px, 1.8vw, 24px);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  visibility: hidden;
  transition: opacity .4s var(--ease), transform .55s var(--ease-out), visibility 0s .4s;
}
.chapstage__item.is-on {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .4s var(--ease), transform .55s var(--ease-out), visibility 0s;
}
.chapstage .mock { width: min(100%, 300px); }

.mock-pay__btn {
  display: block;
  padding: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  text-align: center;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink-soft);
}
.mock-pay__btn--shop { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mock-pay__total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-xs); font-weight: 700;
}
.mock-pay__total i { height: 11px; width: 64px; border-radius: 4px; background: var(--ink); }

.mock-ops__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: var(--fs-xs); color: var(--muted);
}
.mock-ops__row b {
  font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase;
  color: #3D6727;
}
.mock-ops__load { margin-top: 4px; display: grid; gap: 7px; font-size: var(--fs-xs); color: var(--muted); }
.mock-ops__bar {
  position: relative;
  height: 9px; border-radius: 4px;
  background: var(--panel-2);
  overflow: hidden;
}
.mock-ops__bar::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 0; border-radius: 4px;
  background: #5E8E3E;
  transition: width 1s var(--ease-out) .35s;
}
.chapstage__item.is-on .mock-ops__bar::after { width: 100%; }

.mock-edit__field {
  display: grid; gap: 5px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--label);
}
.mock-edit__field i {
  display: block; height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
}
.mock-edit__field .mock-edit__area { height: 54px; }
.mock-edit__save {
  justify-self: start;
  margin-top: 2px;
  padding: 9px 16px;
  border-radius: var(--pill);
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-xs); font-weight: 600;
}

.mock-apps__row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink-soft);
}
.mock-apps__tgl {
  position: relative; flex: none;
  width: 34px; height: 20px;
  border-radius: var(--pill);
  background: var(--panel-3);
  transition: background .4s var(--ease) .45s;
}
.mock-apps__tgl::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(16, 16, 16, .35);
  transition: left .4s var(--ease) .45s;
}
.chapstage__item.is-on .mock-apps__tgl.is-on-tgl { background: #5E8E3E; }
.chapstage__item.is-on .mock-apps__tgl.is-on-tgl::after { left: 17px; }
.mock-apps__row:nth-child(3) .mock-apps__tgl, .mock-apps__row:nth-child(3) .mock-apps__tgl::after { transition-delay: .6s; }
.mock-apps__row:nth-child(4) .mock-apps__tgl, .mock-apps__row:nth-child(4) .mock-apps__tgl::after { transition-delay: .75s; }

.mock-chan__map {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
}
.mock-chan__list { display: grid; gap: 6px; }
.mock-chan__list span {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.mock-chan__lines { display: grid; gap: 17px; }
.mock-chan__lines i { display: block; border-top: 1px dashed var(--line-strong); }
.mock-chan__store {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: -.01em;
}
.chapters { position: sticky; top: 104px; }
.chapters__label { margin-bottom: 14px; }
.chapters__list { display: grid; gap: 2px; }
.chapters__link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em;
  color: var(--label);
  transition: color .3s var(--ease);
}
.chapters__dot {
  width: 6px; height: 6px; border-radius: var(--pill);
  background: var(--line-strong);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.chapters__link:hover, .chapters__link.is-active { color: var(--ink); }
.chapters__link.is-active .chapters__dot { background: var(--shop); transform: scale(1.6); }

.chapters__body { display: grid; }
.chapter {
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter__cat {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--shop); margin-bottom: 14px;
}
.chapter__t {
  font-size: var(--fs-d3);
  line-height: 1.1; letter-spacing: -.035em; font-weight: 800;
  max-width: 660px; text-wrap: balance;
}
.chapter__d {
  margin-top: 14px; max-width: 620px;
  font-size: var(--fs-body); line-height: 1.62; color: var(--muted);
}
.chapter__d a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.related-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 340px);
  gap: clamp(32px, 5vw, 76px);
  align-items: end;
  margin-block: clamp(30px, 4vw, 54px) clamp(56px, 7vw, 96px);
  padding: clamp(30px, 4vw, 56px);
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
}
.related-strip__copy { max-width: 880px; }
.related-strip p {
  max-width: 54ch;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(24px, 2.25vw, 36px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.22;
  text-wrap: balance;
}
.related-strip__action {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 11px 11px 11px 20px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.related-strip__action:hover { background: var(--gold); color: var(--ink); }
.related-strip__action:focus-visible { outline: 2px solid var(--paper); outline-offset: 6px; }
.related-strip__action > span:first-child { white-space: nowrap; }
.related-strip__arrow {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 20px;
  transition: transform .3s var(--ease);
}
.related-strip__action:hover .related-strip__arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .related-strip { grid-template-columns: 1fr; gap: 26px; }
  .related-strip__action { width: 100%; font-size: var(--fs-xs); }
}

.contact-person {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: center;
  max-width: 520px;
  margin: 28px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}
.contact-person img { width: 72px; height: 82px; border-radius: 12px; object-fit: cover; }
.contact-person strong { display: block; margin-top: 5px; font-size: var(--fs-sm); }
.contact-person p { color: var(--muted); font-size: var(--fs-xs); }
.contact-person a { color: var(--ink); font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px; }

.platform-comparison {
  margin: clamp(42px, 6vw, 82px) 0 clamp(54px, 7vw, 94px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}
.platform-comparison__head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  padding: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.platform-comparison__head h3 {
  margin-top: 8px;
  font-size: var(--fs-d3);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.platform-comparison__head > p,
.platform-comparison__head > time {
  flex: none;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.platform-comparison__scroll { overflow-x: auto; }
.platform-comparison table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}
.platform-comparison th,
.platform-comparison td {
  padding: 18px clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.platform-comparison thead th {
  background: #f5f4f1;
  color: var(--muted);
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.platform-comparison tbody th { width: 19%; color: var(--ink); }
.platform-comparison tbody td { width: 40.5%; color: var(--muted); }
.platform-comparison tbody tr:last-child > * { border-bottom: 0; }
.platform-comparison__sources {
  padding: 18px clamp(24px, 3vw, 40px) 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.platform-comparison__sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.chapter--cta {
  margin-top: 8px; padding: clamp(28px, 3vw, 40px);
  border: 1px solid #EDE5D4; border-radius: var(--r-lg);
  background: linear-gradient(165deg, #FBF7EF 0%, #F6F1E6 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(200px, .85fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.chapter--cta .chapter__cat { color: #8A6F41; }
.chapter--cta .chapter__t { color: var(--ink); }
.chapter--cta .chapter__d { color: var(--muted); }

.scan { display: grid; gap: 13px; }
.scan__shop {
  position: relative;
  display: grid; gap: 8px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.scan__bar { display: flex; gap: 5px; }
.scan__bar i { width: 6px; height: 6px; border-radius: var(--pill); background: rgba(16, 16, 16, .16); }
.scan__hero { display: block; height: 46px; border-radius: 7px; background: var(--panel-3); }
.scan__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scan__grid i { height: 36px; border-radius: 7px; background: var(--panel-2); }
.scan__beam {
  position: absolute; left: 6px; right: 6px; top: 8%;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(170, 138, 81, 0) 0%, var(--gold) 18%, #EBD6A6 50%, var(--gold) 82%, rgba(170, 138, 81, 0) 100%);
  box-shadow: 0 0 16px 2px rgba(170, 138, 81, .55);
  opacity: 0;
}
.chapter--cta.is-anim .scan__beam { animation: scanBeam 6s var(--ease) infinite; }
@keyframes scanBeam {
  0%       { top: 8%; opacity: 0; }
  6%       { opacity: 1; }
  84%      { top: 90%; opacity: 1; }
  92%, 100%{ top: 90%; opacity: 0; }
}
.scan__checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.scan__check {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  opacity: .5;
}
.scan__check svg { width: 13px; height: 11px; flex: none; }
.scan__check svg path {
  fill: none;
  stroke: var(--gold); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.chapter--cta.is-anim .scan__check--1 { animation: scanWake1 6s var(--ease) infinite; }
.chapter--cta.is-anim .scan__check--2 { animation: scanWake2 6s var(--ease) infinite; }
.chapter--cta.is-anim .scan__check--3 { animation: scanWake3 6s var(--ease) infinite; }
.chapter--cta.is-anim .scan__check--1 path { animation: scanTick1 6s linear infinite; }
.chapter--cta.is-anim .scan__check--2 path { animation: scanTick2 6s linear infinite; }
.chapter--cta.is-anim .scan__check--3 path { animation: scanTick3 6s linear infinite; }
@keyframes scanWake1 { 0%, 26% { opacity: .5; } 32%, 92% { opacity: 1; } 97%, 100% { opacity: .5; } }
@keyframes scanWake2 { 0%, 50% { opacity: .5; } 56%, 92% { opacity: 1; } 97%, 100% { opacity: .5; } }
@keyframes scanWake3 { 0%, 74% { opacity: .5; } 80%, 92% { opacity: 1; } 97%, 100% { opacity: .5; } }
@keyframes scanTick1 { 0%, 26% { stroke-dashoffset: 1; } 34% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes scanTick2 { 0%, 50% { stroke-dashoffset: 1; } 58% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes scanTick3 { 0%, 74% { stroke-dashoffset: 1; } 82% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }

.loop { position: relative; display: inline-block; margin-bottom: 26px; }
.loop::after {
  content: '';
  position: absolute;
  inset: -34% -22%;
  background: radial-gradient(closest-side, rgba(170, 138, 81, .32) 0%, rgba(170, 138, 81, 0) 72%);
  opacity: 0;
  pointer-events: none;
}
.loopmark {
  position: relative; z-index: 1;
  width: clamp(140px, 15vw, 230px);
  height: auto; display: block; overflow: visible;
  transform-origin: 50% 50%;
}

.loopmark__base {
  fill: rgba(170, 138, 81, 0);
  stroke: var(--gold);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.loopmark__sheen { transform: translateX(-460px); }
.loopmark__pen {
  fill: #D9BC85;
  opacity: 0;
  offset-rotate: 0deg;
  filter: drop-shadow(0 0 7px rgba(217, 188, 133, .95)) drop-shadow(0 0 18px rgba(170, 138, 81, .55));
}

.loop.is-anim .loopmark__base { animation: loopWrite 3.4s var(--ease-out) forwards; }
.loop.is-anim .loopmark__base--2 { animation-delay: .4s; }

.loop.is-anim .loopmark__pen { animation: penWrite 3.4s var(--ease-out) forwards; }
.loop.is-anim .loopmark__pen--2 { animation-delay: .4s; }
.loop.is-anim .loopmark__sheen { animation: loopSheen 6.5s ease-in-out 4.6s 3; }
.loop.is-anim::after { animation: loopGlow 3.8s var(--ease) forwards; }
.loop.is-anim .loopmark { animation: loopSettle 3.8s var(--ease) forwards; }

@keyframes loopWrite {
  0%   { stroke-dashoffset: 1; fill: rgba(170, 138, 81, 0); }
  58%  { stroke-dashoffset: 0; fill: rgba(170, 138, 81, 0); }
  100% { stroke-dashoffset: 0; fill: rgba(170, 138, 81, 1); }
}
@keyframes penWrite {
  0%   { offset-distance: 0%; opacity: 0; }
  3%   { opacity: 1; }
  58%  { offset-distance: 100%; opacity: 1; }
  66%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes loopSheen {
  0%   { transform: translateX(-460px); }
  38%  { transform: translateX(1280px); }
  100% { transform: translateX(1280px); }
}
@keyframes loopGlow {
  0%, 50% { opacity: 0; }
  78%     { opacity: .85; }
  100%    { opacity: .3; }
}
@keyframes loopSettle {
  0%, 55% { transform: scale(.985); }
  75%     { transform: scale(1.012); }
  100%    { transform: scale(1); }
}

.principles__pic {

  margin: clamp(30px, 3.4vw, 44px) 0 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--d-line);
}
.principles__pic img {
  display: block; width: 100%;

  height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  filter: brightness(.82) saturate(.92);
}

.principles {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.principles__aside { position: sticky; top: calc(var(--sec-y) * .55 + 60px); }
.principles__list { display: grid; }

@media (min-width: 1021px) {
  .principles { align-items: stretch; }
  .principles__aside { position: static; display: flex; flex-direction: column; }

  .principles__pic { position: relative; flex: 1 1 0%; min-height: 200px; }
  .principles__pic img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: cover;
  }
}

.prinflow { --railpad: clamp(30px, 3.4vw, 46px); position: relative; padding-left: var(--railpad); }
.prinrail {
  position: absolute;
  left: 0; top: 12px;
  width: 18px; height: calc(100% - 24px);
  overflow: visible;
}
.prinrail path {
  fill: none;
  stroke: rgba(170, 138, 81, .55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
#arbeitsweise.is-anim .prinrail path { animation: railDraw 2.8s var(--ease-out) 1.5s forwards; }
@keyframes railDraw { to { stroke-dashoffset: 0; } }
.prin__t { position: relative; }
.prin__t::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--railpad) + 9px);
  top: .5em;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: #4A3E28;
  transform: scale(.6);
}
#arbeitsweise.is-anim .prin:nth-child(1) .prin__t::before { animation: prinIgnite .7s var(--ease-out) 2s forwards; }
#arbeitsweise.is-anim .prin:nth-child(2) .prin__t::before { animation: prinIgnite .7s var(--ease-out) 2.9s forwards; }
#arbeitsweise.is-anim .prin:nth-child(3) .prin__t::before { animation: prinIgnite .7s var(--ease-out) 3.8s forwards; }
@keyframes prinIgnite {
  55% {
    background: #F4E3BF;
    box-shadow: 0 0 14px rgba(217, 188, 133, 1), 0 0 30px rgba(170, 138, 81, .7);
    transform: scale(1.25);
  }
  100% {
    background: #D9BC85;
    box-shadow: 0 0 9px rgba(217, 188, 133, .85), 0 0 20px rgba(170, 138, 81, .45);
    transform: scale(1);
  }
}
.prin {
  padding: clamp(28px, 3vw, 40px) 0;
  border-top: 1px solid var(--d-line);
  display: grid; gap: 10px;
}
.prin:first-child { border-top: 0; padding-top: 0; }
.prin:last-child { padding-bottom: 0; }
.prin__t {
  font-size: var(--fs-d3);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 800;
  color: var(--paper); text-wrap: balance;
}
.prin__d {
  max-width: 560px;
  font-size: var(--fs-body); line-height: 1.6; color: var(--d-text);
}

.orbit { display: grid; justify-items: center; gap: 20px; }
.orbit__field {
  position: relative;
  width: min(100%, 580px);
  aspect-ratio: 1;
  --orbR: clamp(130px, 18vw, 220px);

  overflow: clip;
}
.orbit__ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.orbit__ring--outer {
  width: calc(var(--orbR) * 2);
  height: calc(var(--orbR) * 2);
  border: 1px dashed var(--line-strong);
}
.orbit__ring--inner {
  width: calc(var(--orbR) * 1.16);
  height: calc(var(--orbR) * 1.16);
  border: 1px solid var(--line);
}
.orbit__core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(140px, 12vw, 176px); height: clamp(140px, 12vw, 176px);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-content: center; gap: 7px;
  text-align: center;
  box-shadow: 0 26px 56px -26px rgba(16, 16, 16, .6);
}
.orbit__core b { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.02em; }

.orbit__core::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(94, 142, 62, 0);
  opacity: 0;
  pointer-events: none;
}
.orbit.is-anim .orbit__core::after { animation: coreRipple 4.6s var(--ease) infinite .5s; }
@keyframes coreRipple {
  0%, 2%    { opacity: 0; transform: scale(1); border-color: rgba(94, 142, 62, .55); }
  4%        { opacity: 1; }
  24%       { opacity: 0; transform: scale(1.4); border-color: rgba(94, 142, 62, 0); }
  100%      { opacity: 0; transform: scale(1); }
}

.orbit__rot { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.orbit.is-anim .orbit__rot { animation: orbitSpin 48s linear infinite; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

.orbit__sat {
  position: absolute; top: 0; left: 0;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--orbR)));
}
.orbit__chip {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
  box-shadow: 0 10px 24px -16px rgba(16, 16, 16, .4);
}

.orbit.is-anim .orbit__chip {
  animation: orbitCounter 48s linear infinite, chipSend 4.6s var(--ease) infinite;
  animation-delay: 0s, calc(var(--i) * .92s);
}
@keyframes chipSend {
  0%       { border-color: var(--line-strong); box-shadow: 0 0 0 0 rgba(94, 142, 62, 0); }
  3%       { border-color: #5E8E3E; box-shadow: 0 0 0 4px rgba(94, 142, 62, .18); }
  10%      { border-color: var(--line-strong); box-shadow: 0 0 0 0 rgba(94, 142, 62, 0); }
  100%     { border-color: var(--line-strong); box-shadow: 0 0 0 0 rgba(94, 142, 62, 0); }
}
.orbit.is-anim .orbit__core { animation: coreBeat 4.6s var(--ease) infinite .5s; }
@keyframes coreBeat {
  0%, 6%, 100% { transform: translate(-50%, -50%) scale(1); }
  3%           { transform: translate(-50%, -50%) scale(1.03); }
}
.orbit__logos {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 8px;
}
.orbit__logos img { height: 23px; width: auto; opacity: .92; }
@keyframes orbitCounter {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
  to   { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); }
}

.orbit__ray {
  position: absolute; top: 0; left: 0;
  width: 1px; height: var(--orbR);
  background: linear-gradient(180deg, var(--line-strong) 0%, rgba(213, 208, 199, 0) 82%);
}
.orbit__pulse {
  position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: var(--pill);
  background: #5E8E3E;
  box-shadow: 0 0 12px 2px rgba(94, 142, 62, .4);
  opacity: 0;
}
.orbit.is-anim .orbit__pulse {
  animation: orbitPulse 4.6s var(--ease) infinite;
  animation-delay: calc(var(--i) * .92s);
}
@keyframes orbitPulse {
  0%        { transform: translateY(0) scale(1); opacity: 0; }
  10%       { opacity: .95; }
  58%       { transform: translateY(var(--orbR)) scale(.55); opacity: .9; }
  64%, 100% { transform: translateY(var(--orbR)) scale(.4); opacity: 0; }
}

.orbit__cap {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.orbit__capdot { width: 6px; height: 6px; border-radius: var(--pill); background: #5E8E3E; }

.marquee__group span { display: inline-flex; align-items: center; }
.marquee__group img {
  height: 30px; width: auto;
  max-width: 190px; object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.marquee__group span:hover img { filter: none; opacity: 1; }
.marquee__group img.is-mq-sm { height: 24px; }
.marquee__group img.is-mq-lg { height: 40px; }
.marquee__group img.is-mq-tall { height: 44px; }
.marquee__group img.is-mq-xl { height: 56px; }
.marquee__group img.is-mq-inv { filter: invert(1) grayscale(1); }
.marquee__group span:hover img.is-mq-inv { filter: invert(1); opacity: 1; }

.hero--sheet {
  background: radial-gradient(88% 130% at 88% -4%, var(--panel) 0%, var(--panel-0) 62%), var(--paper);
}
.uline { position: relative; display: inline-block; font-style: normal; }
.uline__svg {
  position: absolute; left: -1%; bottom: -.06em;
  width: 102%; height: .18em;
  overflow: visible;
}
.uline__svg path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .lines.is-in .uline__svg path { animation: ulineDraw .9s var(--ease-out) 1.05s forwards; }
@keyframes ulineDraw { to { stroke-dashoffset: 0; } }

.sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
  align-items: start;
}
.sheet__card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 8px 10px;
  box-shadow: 0 28px 56px -40px rgba(16, 16, 16, .55);
  will-change: transform;
}

.sheet__card[data-speed], .sheet__card {
  transform: translate3d(0, var(--py, 0px), 0) skewY(var(--skew, 0deg)) rotate(var(--rot, 0deg));
}
.sheet__card--mid { margin-top: 48px; }
.sheet__card:nth-child(3) { margin-top: 20px; }
.sheet__pin {
  position: absolute; top: -7px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: var(--pill);
  background: radial-gradient(circle at 34% 30%, #D9BC85 0%, var(--gold) 58%, #7E663C 100%);
  box-shadow: 0 2px 6px rgba(16, 16, 16, .35);
  z-index: 2;
}
.sheet__media {
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-2);
}
.sheet__media video, .sheet__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sheet__cap { display: grid; gap: 2px; padding: 10px 4px 2px; }
.sheet__cap b { font-size: var(--fs-xs); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.sheet__cap span {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .07em;
  text-transform: uppercase; color: var(--label);
}

.journey { position: relative; --jgap: clamp(28px, 4vw, 64px); }

.journey__rail {
  position: absolute; left: 23px; top: 23px;
  right: calc((100% - 2 * var(--jgap)) / 3 - 23px);
  border-top: 1px dashed var(--line-strong);
}

.journey__rail::after {
  content: '';
  position: absolute; left: 0; top: -1.5px;
  height: 2px; width: 0;
  border-radius: 2px;
  background: var(--gold);
}
.journey.is-anim .journey__rail::after { animation: railFill 1.65s var(--ease) forwards; }
@keyframes railFill {
  0%, 6% { width: 0; }
  86%, 100% { width: calc(100% - 4px); }
}
.journey__pulse {
  position: absolute; top: -4px; left: 0;
  width: 8px; height: 8px; border-radius: var(--pill);
  background: var(--ink);
  box-shadow: 0 0 10px 1px rgba(16, 16, 16, .3);
  opacity: 0;
}
.journey.is-anim .journey__pulse { animation: journeyRun 1.65s var(--ease) forwards; }
@keyframes journeyRun {
  0%        { left: 0; opacity: 0; }
  7%        { opacity: 1; }
  86%       { left: calc(100% - 6px); opacity: 1; }
  96%, 100% { left: calc(100% - 6px); opacity: 0; }
}
.journey__phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jgap);
}
.journey__phases > * { min-width: 0; }
.phase { display: block; }
.phase__node {
  position: relative; z-index: 1;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--pill);
  background: var(--paper);
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.journey.is-anim .phase:nth-child(1) .phase__node { animation: nodeBeat1 1.65s var(--ease) forwards; }
.journey.is-anim .phase:nth-child(2) .phase__node { animation: nodeBeat2 1.65s var(--ease) forwards; }
.journey.is-anim .phase:nth-child(3) .phase__node { animation: nodeBeat3 1.65s var(--ease) forwards; }
@keyframes nodeBeat1 {
  0%, 3%   { background: var(--paper); color: var(--ink); transform: scale(1); box-shadow: 0 0 0 0 rgba(170, 138, 81, 0); }
  8%       { background: var(--ink); color: var(--paper); transform: scale(1.24); box-shadow: 0 0 0 4px rgba(170, 138, 81, .5); }
  15%      { box-shadow: 0 0 0 17px rgba(170, 138, 81, 0); }
  18%, 100% { background: var(--ink); color: var(--paper); transform: scale(1); box-shadow: 0 0 0 0 rgba(170, 138, 81, 0); }
}
@keyframes nodeBeat2 {
  0%, 42%  { background: var(--paper); color: var(--ink); transform: scale(1); box-shadow: 0 0 0 0 rgba(170, 138, 81, 0); }
  47%      { background: var(--ink); color: var(--paper); transform: scale(1.24); box-shadow: 0 0 0 4px rgba(170, 138, 81, .5); }
  54%      { box-shadow: 0 0 0 17px rgba(170, 138, 81, 0); }
  57%, 100% { background: var(--ink); color: var(--paper); transform: scale(1); box-shadow: 0 0 0 0 rgba(170, 138, 81, 0); }
}
@keyframes nodeBeat3 {
  0%, 82%  { background: var(--paper); color: var(--ink); transform: scale(1); box-shadow: 0 0 0 0 rgba(170, 138, 81, 0); }
  87%      { background: var(--ink); color: var(--paper); transform: scale(1.24); box-shadow: 0 0 0 4px rgba(170, 138, 81, .5); }
  92%      { box-shadow: 0 0 0 17px rgba(170, 138, 81, 0); }
  93%, 100% { background: var(--ink); color: var(--paper); transform: scale(1); box-shadow: 0 0 0 0 rgba(170, 138, 81, 0); }
}

.journey.is-anim .phase:nth-child(1) :is(.phase__t, .phase__d, .jrow) { animation: phaseWake1 1.65s var(--ease) forwards; }
.journey.is-anim .phase:nth-child(2) :is(.phase__t, .phase__d, .jrow) { animation: phaseWake2 1.65s var(--ease) forwards; }
.journey.is-anim .phase:nth-child(3) :is(.phase__t, .phase__d, .jrow) { animation: phaseWake3 1.65s var(--ease) forwards; }
@keyframes phaseWake1 {
  0%, 3%    { opacity: .45; }
  10%, 100% { opacity: 1; }
}
@keyframes phaseWake2 {
  0%, 42%   { opacity: .45; }
  49%, 100% { opacity: 1; }
}
@keyframes phaseWake3 {
  0%, 82%   { opacity: .45; }
  89%, 100% { opacity: 1; }
}
.phase__t {
  margin-top: 20px;
  font-size: var(--fs-d4);
  font-weight: 800; letter-spacing: -.03em;
}
.phase__d { margin-top: 7px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); max-width: 36ch; }
.jrow { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.jrow__t { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.015em; }
.jrow__d { margin-top: 5px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }

.journey--stack { --jstack-gap: clamp(34px, 3.6vw, 52px); }
.journey--stack .journey__rail { display: none; }
.journey--stack .journey__phases {
  grid-template-columns: 1fr;
  gap: var(--jstack-gap);
}
.journey--stack .phase {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: clamp(16px, 1.8vw, 24px);
}
.journey--stack .phase > :not(.phase__node) { grid-column: 2; }
.journey--stack .phase__node { grid-row: 1 / -1; align-self: start; }
.journey--stack .phase__t { margin-top: 7px; }

.journey--stack .phase__d { max-width: none; }

.journey--stack .phase::before,
.journey--stack .phase::after {
  content: '';
  position: absolute; top: 52px; bottom: calc(var(--jstack-gap) * -1 + 4px);
}
.journey--stack .phase::before {
  left: 23px; border-left: 1px dashed var(--line-strong);
}
.journey--stack .phase::after {
  left: 22px; width: 2px; border-radius: 2px;
  background: var(--gold);
  transform: scaleY(0); transform-origin: top;
}

.journey--stack .phase:last-child::before,
.journey--stack .phase:last-child::after {
  bottom: 6px;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}

.journey--stack.is-anim .phase:nth-child(1)::after { animation: railDrop .58s var(--ease) .15s forwards; }
.journey--stack.is-anim .phase:nth-child(2)::after { animation: railDrop .58s var(--ease) .8s forwards; }
.journey--stack.is-anim .phase:nth-child(3)::after { animation: railDrop .5s var(--ease) 1.45s forwards; }
@keyframes railDrop { to { transform: scaleY(1); } }

.chapters__list { position: relative; padding-left: 15px; }
.chapters__list::before {
  content: '';
  position: absolute; left: 2px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line-strong);
}
.chapters__list::after {
  content: '';
  position: absolute; left: 1px; top: 8px;
  width: 3px; border-radius: 3px;
  height: calc((100% - 16px) * var(--prog, 0));
  background: var(--shop, #5E8E3E);
  transition: height .6s var(--ease);
}

.case--invite {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  padding: clamp(22px, 2.4vw, 32px) clamp(26px, 2.8vw, 38px);
  border: 1px dashed var(--line-strong);
  background: transparent;
  box-shadow: none;
}
.case--invite .case__invite-d { max-width: 44ch; }
.case--invite .case__invite-go { margin-top: 0; }
.case--invite:hover {
  border-color: var(--ink);
  border-style: dashed;
  background: var(--panel);
  box-shadow: none;
}
.case__invite-k {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--label);
}
.case__invite-t { font-size: var(--fs-d3); font-weight: 800; letter-spacing: -.035em; }
.case__invite-d { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); max-width: 36ch; }
.case__invite-go {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 6px;
  font-weight: 600; font-size: var(--fs-body); color: var(--ink);
}
.case__invite-go .arrow { transition: transform .35s var(--ease); }
.case--invite:hover .case__invite-go .arrow { transform: translateX(4px); }

.calbox {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(16px, 1.8vw, 22px);
}
.consent { position: relative; }
.consent__gate {
  min-height: 680px;
  display: grid;
  gap: 16px;
  align-content: center;
  justify-items: start;
  padding: clamp(24px, 3vw, 44px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background-image: radial-gradient(var(--line) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.consent.is-loaded .consent__gate { display: none; }
.consent__host { display: none; }
.consent.is-loaded .consent__host { display: block; position: relative; }

.consent__host .calendly-inline-widget { height: 790px; }

.consent__host .calendly-spinner { display: none !important; }

.consent__host.is-booting::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle 5px at calc(50% - 17px) 50%, var(--gold) 98%, transparent),
    radial-gradient(circle 5px at 50% 50%, var(--gold) 98%, transparent),
    radial-gradient(circle 5px at calc(50% + 17px) 50%, var(--gold) 98%, transparent),
    var(--paper);
  animation: bootPulse 1.2s ease-in-out infinite;
}
@keyframes bootPulse { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }

.consent__k {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--label);
}
.consent__t { font-size: var(--fs-d4); font-weight: 800; letter-spacing: -.03em; }
.consent__d { font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); max-width: 46ch; }
.consent__d a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.consent__remember {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .06em;
  color: var(--muted);
  cursor: pointer;
}
.consent__remember input {
  width: 15px; height: 15px;
  accent-color: var(--ink);
  cursor: pointer;
}
.consent__alt { font-size: var(--fs-sm); color: var(--muted); margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.consent__alt a { font-weight: 600; color: var(--ink); }

.cmp {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex; align-items: flex-end;
  padding: clamp(14px, 2vw, 24px);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.cmp.is-open { opacity: 1; pointer-events: auto; }

.cmp__scrim { position: fixed; inset: 0; width: 100vw; background: rgba(16, 16, 16, .62); }
html.is-cmp { overflow: hidden; }

.cmp__card {
  position: relative;
  width: 100%;
  background: var(--paper);
  border: 0;
  border-radius: var(--r-sm);
  padding: 22px 24px 20px;
  box-shadow: 0 4px 10px rgba(16, 16, 16, .07), 0 24px 54px -14px rgba(16, 16, 16, .3);
  transform: translate3d(0, 16px, 0);
  transition: transform .45s var(--ease);
}
.cmp.is-open .cmp__card { transform: none; }

.cmp__t { display: flex; align-items: center; gap: 11px; }
.cmp__mark { flex: none; height: 26px; width: auto; }
.cmp__k {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--label);
}
.cmp__t { margin-top: 8px; font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.02em; }
.cmp__d { margin-top: 8px; max-width: 68ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
.cmp__d a { font-weight: 600; color: var(--ink); }

.cmp__row { display: grid; gap: 8px; margin-top: 18px; }
.cmp__row .btn { width: 100%; justify-content: center; }

@media (min-width: 860px) {
  .cmp__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(214px, 268px);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: center;
    padding: 20px clamp(24px, 2.6vw, 36px);
  }
  .cmp__row { margin-top: 0; }
}

.linklike {
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
  transition: color .25s var(--ease);
}

.footer__bottom .linklike {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
}
.linklike:hover { color: var(--muted); }
.site-footer .footer__bottom .linklike:hover { color: var(--ink); }

.booking__meta { margin-top: 12px; font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); line-height: 1.5; color: var(--label); }

.contact__links { margin-top: clamp(28px, 3.2vw, 38px); padding-top: 24px; border-top: 1px solid var(--line-panel); font-size: var(--fs-body); line-height: 1.8; color: var(--muted); }
.contact__links a { font-weight: 600; color: var(--ink); }

.tflow {
  --tfpad: 30px;
  --tfsurface: var(--paper);
  position: relative;
  margin-top: clamp(26px, 3vw, 34px);
  padding-left: var(--tfpad);
}
.section--panel .tflow { --tfsurface: var(--panel); }
.tflow::before {
  content: '';
  position: absolute;
  left: 5px; top: 10px; bottom: 12px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(170, 138, 81, .6), rgba(170, 138, 81, .16));
}
.tstep { position: relative; padding-bottom: 20px; }
.tstep:last-child { padding-bottom: 0; }
.tstep::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--tfpad) + 1px);
  top: .42em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--tfsurface);
}
.tstep__t { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.015em; }
.tstep__d { margin-top: 4px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); max-width: 46ch; }

.legal__stand {
  margin-top: 14px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--label);
}
.legal h2 {
  margin-top: clamp(32px, 3.4vw, 46px);
  font-size: var(--fs-d5);
  font-weight: 700; letter-spacing: -.02em;
}
.legal p, .legal address {
  margin-top: 12px;
  font-size: var(--fs-body); line-height: 1.7;
  color: var(--ink-soft);
  font-style: normal;
  max-width: 70ch;
}
.legal a {
  font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.legal strong { color: var(--ink); }

.legal__box {
  margin-top: 18px;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.legal__box p:first-child { margin-top: 0; }
.site-footer .footer__bottom a:hover { color: var(--ink); }

.site-footer { padding: clamp(44px, 5vw, 64px) var(--gutter) 36px; background: var(--paper); border-top: 1px solid var(--line); }
.footer__grid {
  display: grid; grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.footer__brand { font-size: var(--fs-h5); font-weight: 700; letter-spacing: -.04em; }
.footer__logo-mark { height: clamp(30px, 3vw, 40px); width: auto; }
.footer__blurb { margin-top: 16px; max-width: 300px; font-size: var(--fs-sm); line-height: 1.6; color: var(--label); }

.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
.footer__col a,
.footer__bottom a,
.footer__bottom .linklike { color: var(--ink); }
.footer__insta { display: inline-flex; align-items: center; margin-top: 2px; }
.footer__insta svg { width: 19px; height: 19px; }
.footer__insta:hover { color: var(--ink); }
.footer__title { font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  padding-top: 24px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--label);
}

.wall__col,
[data-speed] {
  transform: translate3d(0, var(--py, 0px), 0) skewY(var(--skew, 0deg));
  will-change: transform;
}

.pfx { position: relative; overflow: hidden; }
.pfx > img,
.pfx > video {
  position: absolute;
  left: 0;

  top: -4%;
  width: 100%;
  height: 108%;
  object-fit: cover;
  transform: translate3d(0, var(--pfx, 0px), 0);
  will-change: transform;
}

.case__media--tall { aspect-ratio: 4 / 5; }

.js [data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity .9s var(--ease-out) var(--d, 0ms),
    transform 1s var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(28px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.965); transform-origin: center bottom; }

.lines { display: block; }
.lines .line {
  display: block;
  overflow: hidden;

  padding: .16em 0 .12em;
  margin: -.16em 0 -.12em;
}
.js .lines .line > span {
  display: block;

  transform: translate3d(0, 118%, 0);
  transition: transform 1.05s var(--ease-out) var(--d, 0ms);
}
.js .lines.is-in .line > span { transform: none; }

.webwall {
  position: relative;
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: clamp(30px, 4vw, 48px);
  overflow: hidden;
}

.webwall__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(180deg, var(--panel-0) 0%, var(--panel) 82%);
  pointer-events: none;
  z-index: 3;
}
.webcol {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  will-change: transform;
}

.webframe {
  position: relative; z-index: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}

@media (hover: hover) {
  .webframe {
    transition: transform .35s var(--ease), border-color .35s var(--ease),
                box-shadow .35s var(--ease);
  }
  .webframe:hover {
    transform: translateY(-4px);
    border-color: var(--ink);
    box-shadow: 0 14px 28px rgba(16, 16, 16, .1);
  }
  .webframe__bar i { transition: background .3s var(--ease); }
  .webframe:hover .webframe__bar i { background: var(--gold); }
}
.webframe__hit { display: block; color: inherit; }

.webframe__bar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.webframe__bar i {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(16, 16, 16, .16);
}
.webframe__url {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .04em;
  color: var(--label);
  min-width: 0;
  margin-left: 7px; padding: 2px 9px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.webframe__url:hover { color: var(--ink); border-color: var(--ink); }
.webframe__url:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.webframe__screen {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--panel-2);
}
.webframe__screen video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.webframe__label {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .08em;
  color: var(--label);
  line-height: 1.5;
  padding: 9px 11px;
  border-top: 1px solid var(--line);
}

/* The Autohaus website landing page shows only relevant website projects in its hero. */
.seo-webwall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  height: clamp(500px, 49vw, 690px);
  margin-top: -8px;
  overflow: hidden;
}
.seo-webwall__col {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
}
.seo-webwall .webframe { flex: none; }
.seo-webwall .webframe__screen { aspect-ratio: 16 / 10.5; }
.seo-webwall .webframe__label { padding-block: 8px; }
.seo-webwall__fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 110px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--paper) 88%);
  pointer-events: none;
}

.chatfeed { display: grid; place-items: center; min-height: 440px; margin: 0; }
.chatfeed__frame {
  width: min(100%, 500px);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--paper);
  overflow: hidden;
}
.chatfeed__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--label);
}
.chatfeed__dot { width: 7px; height: 7px; border-radius: var(--pill); background: #5E8E3E; }
.chatfeed__body { display: grid; gap: 12px; align-content: start; padding: 20px; min-height: 560px; }
.chatfeed__msg {
  max-width: 84%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: var(--fs-body); line-height: 1.55;
}
.chatfeed__msg--in { justify-self: start; background: var(--panel); color: var(--ink-soft); border-bottom-left-radius: 5px; }
.chatfeed__msg--out { justify-self: end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 5px; }
.chatfeed__card {
  justify-self: stretch;
  display: grid; gap: 6px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: var(--fs-sm); color: var(--muted);
}
.chatfeed__card--live {
  border-color: #C3DDB1;
  background: #EFF7E9;
  color: #3D5C2B;
}
.chatfeed__card--live .chatfeed__badge { color: #33591F; }
.chatfeed__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
.chatfeed__badge--live i { width: 6px; height: 6px; border-radius: var(--pill); background: #5E8E3E; }
.chatfeed.is-anim .chatfeed__badge--live i { animation: chatLivePulse 2.2s var(--ease) infinite; }
@keyframes chatLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 142, 62, .5); }
  50%      { box-shadow: 0 0 0 5px rgba(94, 142, 62, 0); }
}

.chatfeed__card--vis { gap: 9px; }
.figmamock {
  position: relative;
  display: grid; place-items: center;
  padding: 14px 12px;
  border-radius: 9px;
  background-image: radial-gradient(var(--line) 1px, transparent 1.4px);
  background-size: 14px 14px;
  background-color: var(--panel-2);
}
.figmamock__frame {
  position: relative;
  display: block;
  width: min(96px, 62%);
  aspect-ratio: 4 / 5;
  outline: 1.5px solid #0D99FF;
}
.figmamock__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.figmamock__hd {
  position: absolute;
  width: 7px; height: 7px;
  background: #fff;
  border: 1.5px solid #0D99FF;
}
.figmamock__hd--tl { top: -4px; left: -4px; }
.figmamock__hd--tr { top: -4px; right: -4px; }
.figmamock__hd--bl { bottom: -4px; left: -4px; }
.figmamock__hd--br { bottom: -4px; right: -4px; }
.figmamock__tag {
  position: absolute; left: 50%; bottom: -20px;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 4px;
  background: #0D99FF;
  color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .04em;
  white-space: nowrap;
}
.figmamock__frame--abs {
  aspect-ratio: 9 / 16;
  width: min(72px, 60%);
  background: var(--paper);
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  gap: 5px;
  padding: 6px;
}
.figmamock__ph { display: block; border-radius: 3px; background: var(--panel-3); }
.figmamock__ph--media { background: repeating-linear-gradient(135deg, var(--panel-3) 0 7px, var(--panel-2) 7px 14px); }
.figmamock__ph--line { height: 5px; }
.figmamock__ph--short { width: 62%; }
.figmamock__ph--btn { height: 10px; width: 54%; border-radius: 5px; background: var(--gold); opacity: .8; }
.figmamock__cursor {
  position: absolute; top: 24%; left: 58%;
  width: 11px; height: 11px;
  background: #101010;
  clip-path: polygon(0 0, 100% 42%, 46% 52%, 32% 100%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
.chatfeed.is-anim .figmamock__cursor { animation: figCursor 4.2s var(--ease) infinite alternate; }
@keyframes figCursor {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(-34px, 26px); }
  100% { transform: translate(18px, 44px); }
}

.pipemock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  gap: 10px;
  align-items: center;
}
.pipemock--cut {
  grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr);
  gap: 8px;
}
.pipemock--cut .pipemock__arrow { font-size: var(--fs-sm); }
.pipemock__arrow {
  font-size: var(--fs-lead); font-weight: 700;
  color: var(--gold);
}
.chatfeed.is-anim .pipemock__arrow { animation: pipeNudge 1.5s var(--ease) infinite alternate; }
@keyframes pipeNudge {
  from { transform: translateX(-2px); }
  to   { transform: translateX(3px); }
}

.cutmock {
  display: grid; gap: 6px;
  padding: 7px;
  border-radius: 9px;
  background: #151514;
  border: 1px solid #2A2A28;
}
.cutmock__screen {
  display: grid; place-items: center;
  height: 96px;
  border-radius: 5px;
  background: #000;
  overflow: hidden;
}
.cutmock__screen video { display: block; height: 100%; width: auto; }
.cutmock__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding-inline: 1px;
}
.cutmock__meta em {
  font-style: normal;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .07em;
  text-transform: uppercase; color: var(--d-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cutmock__meta em:last-child { flex: none; }
.cutmock__track { position: relative; border-radius: 4px; overflow: hidden; }
.cutmock__strip { display: flex; gap: 1px; }
.cutmock__strip img { display: block; width: calc((100% - 5px) / 6); height: 28px; object-fit: cover; }
.cutmock__playhead {
  position: absolute; top: 0; bottom: 0; left: 4%;
  width: 2px; border-radius: 1px;
  background: #FFFFFF;
  box-shadow: 0 0 7px rgba(255, 255, 255, .65);
}
.chatfeed.is-anim .cutmock__playhead { animation: cutScrub 8s linear infinite; }
@keyframes cutScrub {
  0%   { left: 3%; }
  100% { left: 96%; }
}
.admock {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--paper);
}
.admock__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
}
.admock__avatar {
  width: 20px; height: 20px; flex: none;
  border-radius: var(--pill);
  background: var(--panel-3);
}
.admock__lines { display: grid; gap: 3px; }
.admock__lines i { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--panel-3); }
.admock__lines em {
  font-style: normal;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-3xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--label);
}
.admock__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.admock__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.admock__img video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.admock__cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
}

.chatfeed.is-anim .chatfeed__item { animation: chatIn .6s var(--ease) both; }
.chatfeed.is-anim .chatfeed__item:nth-child(1) { animation-delay: .25s; }
.chatfeed.is-anim .chatfeed__item:nth-child(2) { animation-delay: 1.35s; }
.chatfeed.is-anim .chatfeed__item:nth-child(3) { animation-delay: 2.6s; }
.chatfeed.is-anim .chatfeed__item:nth-child(4) { animation-delay: 4.4s; }
.chatfeed.is-anim .chatfeed__item:nth-child(5) { animation-delay: 5.4s; }
@keyframes chatIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.hero__note {
  margin-top: 18px;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--label);
}

.crew {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(10px, 1.4vw, 16px);
  align-items: start;
}
.crew__card {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--panel-2);
  aspect-ratio: 4 / 3;
}
.crew__card--tall { grid-row: span 2; aspect-ratio: 3 / 4; }
.crew__card:not(.crew__card--tall) { aspect-ratio: 7 / 5; }
.crew__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crewband {
  margin: 0 0 clamp(24px, 3vw, 38px);
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  aspect-ratio: 21 / 8;
}
.crewband img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crewband--dark { border-color: var(--d-line); aspect-ratio: 4 / 3; margin-bottom: 0; }

.perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 64px);
  margin-top: clamp(24px, 2.8vw, 34px);
}
.perks > * { min-width: 0; }
.perk { padding: clamp(15px, 1.7vw, 21px) 0; border-top: 1px solid var(--line-panel); }
.perk__t { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.02em; }
.perk__d { margin-top: 5px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); max-width: 44ch; }

.jobs { display: grid; }
.job {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(34px, 4.4vw, 64px);
  border-top: 1px solid var(--line);
}
.job:first-child { border-top: 0; padding-top: clamp(6px, 1.4vw, 18px); }
.job:last-child { padding-bottom: 0; }
.job > * { min-width: 0; }
.job:nth-child(even) .joblab { order: -1; }

.job__t {
  font-family: var(--display);
  font-size: var(--fs-d3);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.12;
  text-wrap: balance;
}
.job__mwd {
  font-family: var(--sans); font-size: var(--fs-lead); font-weight: 600;
  letter-spacing: 0; color: var(--label); white-space: nowrap;
}
.job__sub {
  margin-top: 10px;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
}
.job__lead {
  margin-top: 18px; max-width: 54ch;
  font-size: var(--fs-body); line-height: 1.6; color: var(--muted);
}
.job__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(22px, 2.6vw, 32px);
}
.job__cols > * { min-width: 0; }
.job__k {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
.joblist { display: grid; gap: 11px; margin-top: 13px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.joblist li { display: flex; gap: 10px; }
.joblist li::before {
  content: ''; flex: none;
  width: 6px; height: 6px; margin-top: 7px;
  border-radius: 50%; background: var(--gold);
}
.joblist--plain li::before { background: var(--faint); }
.job__apply--mobile { display: none; }

.joblab {
  margin: 0;
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
  align-items: center;
  padding: clamp(14px, 1.7vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
}
.joblab__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
}
.joblab__head img { height: 14px; width: auto; }
.joblab__dot { width: 7px; height: 7px; border-radius: var(--pill); background: var(--gold); flex: none; }

.joblab__flow {
  position: relative;
  width: clamp(24px, 3.4vw, 46px); height: 1px;
  border-top: 1px dashed var(--line-strong);
}
.joblab__flow i {
  position: absolute; top: -3.5px; left: 0;
  width: 7px; height: 7px; border-radius: var(--pill);
  background: var(--gold);
  box-shadow: 0 0 10px rgba(170, 138, 81, .6);
  opacity: 0;
}
@keyframes labFlow {
  0%       { left: 0; opacity: 0; }
  16%      { opacity: 1; }
  84%      { left: calc(100% - 7px); opacity: 1; }
  100%     { left: calc(100% - 7px); opacity: 0; }
}

.cutlab { grid-template-columns: minmax(0, 1.3fr) auto minmax(0, .8fr); }
.cutlab__edit {
  display: grid; gap: 9px;
  padding: 10px;
  border-radius: 12px;
  background: #151514;
  border: 1px solid #2A2A28;
}
.cutlab__edit .joblab__head { color: var(--d-text); }

.cutlab__screen {
  position: relative;
  display: block;
  height: clamp(146px, 15vw, 196px);
  border-radius: 6px;
  background: #000;
  overflow: hidden;
}

.cutlab__screen video {
  position: absolute; inset: 0; margin: auto;
  height: 100%; width: auto; max-width: none;
  object-fit: contain; display: block;
}

.cutlab__track { position: relative; border-radius: 5px; overflow: hidden; }
.cutlab__strip { display: flex; gap: 1px; }
.cutlab__strip img { display: block; width: calc((100% - 5px) / 6); height: 32px; object-fit: cover; }
.cutlab__cut {
  position: absolute; top: 0; bottom: 0;
  width: 2px; border-radius: 1px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(217, 188, 133, .9);
  opacity: 0;
}
.cutlab__cut--a { left: 24%; }
.cutlab__cut--b { left: 67%; }
.cutlab__play {
  position: absolute; top: 0; bottom: 0; left: 2%;
  width: 2px; border-radius: 1px;
  background: #FFFFFF;
  box-shadow: 0 0 7px rgba(255, 255, 255, .65);
}
.cutlab__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cutlab__chip {
  padding: 4px 9px;
  border: 1px solid #33332F; border-radius: var(--pill);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-3xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

.cutlab__out { display: grid; gap: 9px; justify-items: center; justify-self: center; max-width: 208px; }
.cutlab__out .admock { width: 100%; }
.cutlab__live, .shoplab__live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  border: 1px solid #C3DDB1; border-radius: var(--pill);
  background: #EFF7E9;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase;
  color: #33591F;
}
.cutlab__live i, .shoplab__live i { width: 6px; height: 6px; border-radius: var(--pill); background: #5E8E3E; flex: none; }

.shoplab__live { justify-self: start; margin-top: 2px; }
.js .shoplab__live { opacity: 0; transform: translate3d(0, 6px, 0); }

.js .cutlab__out { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); }
.cutlab.is-anim .cutlab__play { animation: cutPlay 2.6s linear .2s forwards; }
.cutlab.is-anim .cutlab__cut--a { animation: cutSnap .5s var(--ease-out) 1.15s forwards; }
.cutlab.is-anim .cutlab__cut--b { animation: cutSnap .5s var(--ease-out) 1.95s forwards; }
.cutlab.is-anim .cutlab__chip--1 { animation: cutChip .45s var(--ease) 1.2s forwards; }
.cutlab.is-anim .cutlab__chip--2 { animation: cutChip .45s var(--ease) 2s forwards; }
.cutlab.is-anim .cutlab__chip--3 { animation: cutChipGo .5s var(--ease) 3s forwards; }
.cutlab.is-anim .joblab__flow i { animation: labFlow .8s var(--ease) .65s forwards; }
.cutlab.is-anim .cutlab__out { animation: labOut .5s var(--ease-out) 1.25s forwards; }
.cutlab.is-anim .cutlab__live i { animation: chatLivePulse 2.2s var(--ease) 1.9s 3; }
@keyframes cutPlay { from { left: 2%; } to { left: 96%; } }
@keyframes cutSnap {
  0%   { opacity: 0; transform: scaleY(.35); }
  60%  { opacity: 1; transform: scaleY(1.12); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes cutChip { to { border-color: #56534C; color: #D6D2C9; } }
@keyframes cutChipGo {
  to { border-color: var(--gold); background: rgba(170, 138, 81, .18); color: #EBD6A6; }
}
@keyframes labOut { to { opacity: 1; transform: none; } }

.shoplab { grid-template-columns: minmax(0, .82fr) minmax(0, 1.25fr) minmax(0, .8fr); align-items: start; }
.shoplab__side, .shoplab__panel {
  display: grid; gap: 8px; align-content: start;
  padding: 10px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper);
}
.shoplab__list { display: grid; gap: 5px; }
.shoplab__item {
  padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink-soft);
}
.shoplab__canvas {

  position: relative;
  display: grid; gap: 7px; align-content: start;
  padding: 9px;
  border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--paper);
}
.shoplab__bar { display: flex; align-items: center; gap: 5px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.shoplab__bar i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(16, 16, 16, .14); }
.shoplab__bar em {
  margin-left: 5px; font-style: normal;
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase; color: var(--label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shoplab__page { position: relative; display: grid; gap: 6px; }
.shoplab__blk { display: block; border-radius: 6px; background: var(--panel-3); overflow: hidden; }

.shoplab__blk--hero { position: relative; height: clamp(76px, 8vw, 104px); }
.shoplab__blk--hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shoplab__blk--hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16, 16, 16, .62) 0%, rgba(16, 16, 16, .12) 68%);
}
.shoplab__blk--hero b, .shoplab__blk--hero em {
  position: absolute; left: 11px; z-index: 2;
  color: var(--paper); font-style: normal;
}
.shoplab__blk--hero b { top: 28%; font-size: var(--fs-xs); font-weight: 700; letter-spacing: -.02em; }
.shoplab__blk--hero em {
  top: 58%;
  padding: 4px 9px;
  border-radius: var(--pill);
  background: #fff; color: var(--ink);
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.shoplab__blk--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; background: none; overflow: visible; }
.shoplab__blk--grid i {
  display: block; height: clamp(40px, 4.4vw, 54px);
  border-radius: 5px; overflow: hidden; background: var(--panel-3);
}
.shoplab__blk--grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shoplab__blk--rev {
  display: grid; gap: 5px;
  padding: 8px 10px;
  background: var(--panel-2);
}
.shoplab__stars { display: flex; gap: 3px; }
.shoplab__stars b {
  width: 9px; height: 9px;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.shoplab__blk--rev i { display: block; height: 4px; border-radius: 2px; background: var(--panel-5); }
.shoplab__blk--rev i.is-short { width: 62%; }
.shoplab__blk--faq { display: grid; gap: 4px; padding: 7px 9px; background: none; }
.shoplab__blk--faq i { display: block; height: 9px; border-radius: 4px; background: var(--panel-3); }

.shoplab__cursor {
  position: absolute; top: 8%; left: -6%;
  width: 12px; height: 12px;
  background: #101010;
  clip-path: polygon(0 0, 100% 42%, 46% 52%, 32% 100%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  opacity: 0;
  z-index: 4;
}

.shoplab__phone {
  position: absolute; right: 6px; bottom: 6px; z-index: 5;
  width: clamp(42px, 4.6vw, 56px);
  padding: 4px 3px 5px;
  border-radius: 8px;
  background: #101010;

  box-shadow: 0 0 0 2px var(--paper), 0 16px 30px -12px rgba(16, 16, 16, .65);
}
.js .shoplab__phone { opacity: 0; transform: translate3d(14px, 10px, 0) scale(.9); }
.shoplab__phonetop { display: block; width: 40%; height: 2px; margin: 0 auto 3px; border-radius: 2px; background: #3A3A37; }
.shoplab__phoneshot {
  position: relative; display: block;
  aspect-ratio: 9 / 16;
  border-radius: 5px; overflow: hidden;
  background: var(--panel-2);
}
.shoplab__phoneshot img,
.shoplab__phoneshot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shoplab__phoneshot i {
  position: absolute; left: 12%; right: 12%;
  height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .85);
}
.shoplab__phoneshot i:nth-child(2) { bottom: 26%; }
.shoplab__phoneshot i:nth-child(3) { bottom: 16%; right: 42%; }

.shoplab__gl { flex: none; width: 13px; height: 13px; border-radius: 3px; background: var(--panel-3); }
.shoplab__gl--hero { background: linear-gradient(180deg, var(--panel-5) 0 55%, var(--panel-2) 55%); }
.shoplab__gl--grid { background: repeating-linear-gradient(90deg, var(--panel-5) 0 4px, var(--panel-2) 4px 6px); }
.shoplab__gl--rev  { background: var(--gold); opacity: .55; }
.shoplab__gl--faq  { background: repeating-linear-gradient(180deg, var(--panel-5) 0 3px, var(--panel-2) 3px 6px); }
.shoplab__item { display: flex; align-items: center; gap: 8px; }

.shoplab__drop { height: 0; border-radius: 2px; background: var(--gold); opacity: 0; }
.shoplab__ghost {
  position: absolute; left: 0; top: 52%;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--gold); border-radius: 7px;
  background: var(--paper);
  box-shadow: 0 14px 28px -16px rgba(16, 16, 16, .5);
  font-size: var(--fs-2xs); font-weight: 600; color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.shoplab__ghost img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; flex: none; }
.shoplab__field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--muted);
}
.shoplab__sw { flex: none; width: 26px; height: 16px; border-radius: 5px; background: var(--panel-3); border: 1px solid var(--line-strong); }
.shoplab__slider { position: relative; flex: none; width: 58px; height: 4px; border-radius: 3px; background: var(--panel-3); }
.shoplab__slider b { position: absolute; top: -4px; left: 10%; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.shoplab__steps { display: flex; gap: 3px; flex: none; }
.shoplab__steps b { width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--paper); }
.shoplab__save {
  justify-self: start; margin-top: 2px;
  padding: 7px 13px; border-radius: var(--pill);
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-2xs); font-weight: 600;
}

.js .shoplab__blk, .js .shoplab__item { opacity: 0; transform: translate3d(0, 8px, 0); }
.js .shoplab__blk--grid i { opacity: 0; transform: scale(.92); }
.js .shoplab__stars b { opacity: 0; transform: scale(.4); }

.shoplab.is-anim .shoplab__cursor { animation: labCursor 7.4s var(--ease) .3s forwards; }
.shoplab.is-anim .shoplab__item--1 { animation: labBlk .5s var(--ease-out) .5s forwards; }
.shoplab.is-anim .shoplab__item--2 { animation: labBlk .5s var(--ease-out) 1.3s forwards; }
.shoplab.is-anim .shoplab__item--3 { animation: labBlkPick .5s var(--ease-out) 2.2s forwards; }
.shoplab.is-anim .shoplab__item--4 { animation: labBlk .5s var(--ease-out) 4.6s forwards; }
.shoplab.is-anim .shoplab__blk--hero { animation: labBlk .55s var(--ease-out) .7s forwards; }
.shoplab.is-anim .shoplab__blk--grid { animation: labBlk .55s var(--ease-out) 1.5s forwards; }
.shoplab.is-anim .shoplab__blk--grid i:nth-child(1) { animation: labTile .5s var(--ease-out) 1.6s forwards; }
.shoplab.is-anim .shoplab__blk--grid i:nth-child(2) { animation: labTile .5s var(--ease-out) 1.75s forwards; }
.shoplab.is-anim .shoplab__blk--grid i:nth-child(3) { animation: labTile .5s var(--ease-out) 1.9s forwards; }
.shoplab.is-anim .shoplab__blk--rev { animation: labBlk .55s var(--ease-out) 3.9s forwards; }
.shoplab.is-anim .shoplab__stars b { animation: labStar .45s var(--ease-out) forwards; }
.shoplab.is-anim .shoplab__stars b:nth-child(1) { animation-delay: 4.1s; }
.shoplab.is-anim .shoplab__stars b:nth-child(2) { animation-delay: 4.19s; }
.shoplab.is-anim .shoplab__stars b:nth-child(3) { animation-delay: 4.28s; }
.shoplab.is-anim .shoplab__stars b:nth-child(4) { animation-delay: 4.37s; }
.shoplab.is-anim .shoplab__stars b:nth-child(5) { animation-delay: 4.46s; }
.shoplab.is-anim .shoplab__blk--faq { animation: labBlk .55s var(--ease-out) 4.7s forwards; }
.shoplab.is-anim .shoplab__drop { animation: labDrop 1.6s var(--ease) 2.5s forwards; }
.shoplab.is-anim .shoplab__ghost { animation: labGhost 1.8s var(--ease-out) 2.3s forwards; }
.shoplab.is-anim .shoplab__sw { animation: labSwatch .45s var(--ease) 5.05s forwards; }
.shoplab.is-anim .shoplab__slider b { animation: labKnob .7s var(--ease-out) 5.4s forwards; }
.shoplab.is-anim .shoplab__steps b:nth-child(2) { animation: labStep .35s var(--ease) 5.8s forwards; }
.shoplab.is-anim .shoplab__steps b:nth-child(3) { animation: labStep .35s var(--ease) 5.95s forwards; }
.shoplab.is-anim .shoplab__phone { animation: labPhone .8s var(--ease-out) 6.2s forwards; }
.shoplab.is-anim .shoplab__save { animation: labSave .9s var(--ease) 6.7s forwards; }
.shoplab.is-anim .shoplab__live { animation: labOut .6s var(--ease-out) 7.4s forwards; }
.shoplab.is-anim .shoplab__live i { animation: chatLivePulse 2.2s var(--ease) 8s 3; }
@keyframes labTile { to { opacity: 1; transform: none; } }
@keyframes labStar { 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
@keyframes labPhone { to { opacity: 1; transform: none; } }
@keyframes labCursor {
  0%       { opacity: 0; transform: translate3d(0, 0, 0); }
  8%       { opacity: 1; transform: translate3d(0, 0, 0); }
  26%      { transform: translate3d(-4px, 30px, 0); }
  32%      { transform: translate3d(-4px, 38px, 0) scale(.86); }
  52%      { transform: translate3d(58px, 74px, 0) scale(.86); }
  58%      { transform: translate3d(62px, 80px, 0); }
  78%      { transform: translate3d(62px, 80px, 0); }
  92%      { opacity: 1; transform: translate3d(96px, 104px, 0); }
  100%     { opacity: 0; transform: translate3d(96px, 104px, 0); }
}
@keyframes labBlk { to { opacity: 1; transform: none; } }
@keyframes labBlkPick {
  0%   { opacity: 0; transform: translate3d(0, 8px, 0); }
  100% { opacity: 1; transform: none; border-color: var(--gold); background: rgba(170, 138, 81, .09); }
}
@keyframes labDrop {
  0%       { height: 0; opacity: 0; }
  22%      { height: 2px; opacity: 1; }
  76%      { height: 2px; opacity: 1; }
  100%     { height: 0; opacity: 0; }
}
@keyframes labGhost {
  0%   { opacity: 0; transform: translate3d(-42%, -16px, 0) rotate(-4deg); }
  22%  { opacity: 1; }
  68%  { opacity: 1; transform: translate3d(6%, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(6%, 6px, 0) rotate(0deg); }
}
@keyframes labSwatch { to { background: var(--gold); border-color: var(--gold); } }
@keyframes labKnob { to { left: 66%; } }
@keyframes labStep { to { background: var(--ink); border-color: var(--ink); } }
@keyframes labSave {
  0%   { background: var(--ink); }
  35%  { background: #5E8E3E; }
  100% { background: #5E8E3E; }
}

/* Search and campaign landing pages */
body[data-page-type="content_landingpage"] {
  --lp-accent: var(--gold);
  --lp-accent-soft: rgba(170, 138, 81, .12);
}
body[data-landing="shopify-food"],
body[data-landing="shopify-migration"],
body[data-landing="shopify-compare"] {
  --lp-accent: #5E8E3E;
  --lp-accent-soft: rgba(94, 142, 62, .12);
}

.lp-hero { overflow: hidden; }
.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  gap: clamp(42px, 6vw, 94px);
  align-items: center;
}
.lp-hero__copy { position: relative; z-index: 2; }
.lp-hero .h1 { max-width: 800px; }
.lp-hero__lead { max-width: 620px; margin-top: clamp(24px, 2.8vw, 36px); }
.lp-hero__note {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-size: var(--fs-sm); color: var(--muted);
}
.lp-hero__note::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lp-accent); box-shadow: 0 0 0 5px var(--lp-accent-soft);
}

.lp-visual {
  position: relative;
  min-height: clamp(430px, 42vw, 590px);
  border: 1px solid var(--d-line);
  border-radius: clamp(18px, 2.3vw, 28px);
  overflow: hidden;
  background: var(--d-bg);
  color: var(--paper);
  box-shadow: 0 34px 80px -52px rgba(16, 16, 16, .68);
}
.lp-visual::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000, transparent 88%);
}
.lp-visual__top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--d-line);
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--d-label);
}
.lp-visual__status { display: inline-flex; align-items: center; gap: 8px; }
.lp-visual__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-accent); }

.lp-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.lp-strip__item {
  min-height: 92px;
  padding: 18px clamp(18px, 2vw, 28px);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.lp-strip__item:last-child { border-right: 0; }
.lp-strip__item strong { font-size: var(--fs-body); line-height: 1.3; }
.lp-strip__item span {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--label);
}

.lp-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-service {
  position: relative; min-height: 275px;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden;
}
.lp-service::after {
  content: attr(data-index);
  position: absolute; right: 22px; bottom: 12px;
  font-family: var(--display); font-size: clamp(54px, 6vw, 90px);
  font-weight: 800; line-height: 1; color: var(--panel-2);
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.lp-service:hover::after { color: var(--lp-accent-soft); transform: translateY(-4px); }
.lp-service__k {
  position: relative; z-index: 1;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-accent);
}
.lp-service__t {
  position: relative; z-index: 1; margin-top: 16px;
  font-family: var(--display); font-size: var(--fs-d4); font-weight: 800;
  line-height: 1.18; letter-spacing: -.035em;
}
.lp-service__d { position: relative; z-index: 1; margin-top: 14px; max-width: 42ch; color: var(--muted); }

.lp-system {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(440px, 1.18fr);
  gap: clamp(42px, 6vw, 100px); align-items: center;
}
.lp-system__copy .body { max-width: 520px; margin-top: 24px; }
.lp-points { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--d-line); }
.lp-points li {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--d-line);
  color: var(--d-text);
}
.lp-points li::before { content: '→'; color: var(--lp-accent); }

.lp-pipeline {
  position: relative;
  min-height: 420px; padding: clamp(24px, 3vw, 42px);
  border: 1px solid var(--d-line); border-radius: var(--r-lg);
  background: var(--d-card); overflow: hidden;
}
.lp-pipeline::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 20%, var(--lp-accent-soft), transparent 34%);
}
.lp-pipeline__label {
  position: relative; z-index: 2;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--d-label);
}
.lp-pipeline__track {
  position: absolute; left: clamp(36px, 5vw, 70px); right: clamp(36px, 5vw, 70px);
  top: 50%; height: 2px; background: var(--d-line);
}
.lp-pipeline__track::after {
  content: ''; position: absolute; inset: 0;
  background: var(--lp-accent); transform: scaleX(0); transform-origin: left;
}
.lp-pipeline.is-anim .lp-pipeline__track::after { animation: lpTrack 2.6s var(--ease) .3s forwards; }
.lp-pipeline__steps {
  position: absolute; inset: 0 clamp(24px, 3.8vw, 54px);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
}
.lp-pipeline__step { position: relative; text-align: center; }
.lp-pipeline__step i {
  display: grid; place-items: center; width: 46px; height: 46px;
  margin: 0 auto; border: 1px solid var(--d-line); border-radius: 50%;
  background: var(--d-card); color: var(--d-label); font-style: normal;
  font-size: var(--fs-2xs); font-weight: 700;
}
.lp-pipeline__step b { display: block; margin-top: 16px; font-size: var(--fs-sm); }
.lp-pipeline__step span { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--d-label); }
.lp-pipeline.is-anim .lp-pipeline__step i { animation: lpNode .55s var(--ease-out) forwards; }
.lp-pipeline.is-anim .lp-pipeline__step:nth-child(1) i { animation-delay: .28s; }
.lp-pipeline.is-anim .lp-pipeline__step:nth-child(2) i { animation-delay: .88s; }
.lp-pipeline.is-anim .lp-pipeline__step:nth-child(3) i { animation-delay: 1.48s; }
.lp-pipeline.is-anim .lp-pipeline__step:nth-child(4) i { animation-delay: 2.08s; }
@keyframes lpTrack { to { transform: scaleX(1); } }
@keyframes lpNode {
  60% { border-color: var(--lp-accent); color: var(--paper); transform: scale(1.12); }
  100% { border-color: var(--lp-accent); color: var(--paper); transform: none; box-shadow: 0 0 0 7px var(--lp-accent-soft); }
}

.lp-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-workcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.lp-workcard:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 22px 50px -34px rgba(16,16,16,.36); }
.lp-workcard__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--panel-2); }
.lp-workcard__media img, .lp-workcard__media video { width: 100%; height: 100%; object-fit: cover; }
.lp-workcard__media::after {
  content: ''; position: absolute; inset: auto 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(16,16,16,.28)); pointer-events: none;
}
.lp-workcard__body { padding: clamp(20px, 2.3vw, 30px); flex: 1; }
.lp-workcard__tag {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--lp-accent);
}
.lp-workcard__t { margin-top: 12px; font-family: var(--display); font-size: var(--fs-d5); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.lp-workcard__d { margin-top: 12px; color: var(--muted); }

.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.lp-step { position: relative; padding: 26px clamp(18px, 2.4vw, 34px) 8px 0; }
.lp-step::before { content: ''; position: absolute; top: -4px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-accent); }
.lp-step__n { color: var(--label); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; }
.lp-step__t { margin-top: 18px; font-family: var(--display); font-size: var(--fs-d5); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.lp-step__d { margin-top: 10px; color: var(--muted); max-width: 34ch; }

.lp-faq { max-width: 980px; margin-inline: auto; border-top: 1px solid var(--line); }
.lp-faq__item { border-bottom: 1px solid var(--line); }
.lp-faq__item summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 22px 54px 22px 0;
  font-family: var(--display); font-size: var(--fs-d5); font-weight: 800;
  line-height: 1.3; letter-spacing: -.025em;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__item summary::before,
.lp-faq__item summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 18px; height: 2px;
  background: var(--ink); transition: transform .3s var(--ease);
}
.lp-faq__item summary::after { transform: rotate(90deg); }
.lp-faq__item[open] summary::after { transform: rotate(0deg); }
.lp-faq__answer { max-width: 760px; padding: 0 0 24px; color: var(--muted); }

.lp-contact {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px; align-items: end;
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid var(--d-line); border-radius: var(--r-lg);
  background: var(--d-card);
}
.lp-contact__copy .body { max-width: 660px; margin-top: 20px; }
.lp-contact__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--paper); }
.lp-contact__links a { font-weight: 700; }
.lp-contact__links span { color: var(--d-label); font-size: var(--fs-xs); }

/* Location visual */
.lp-map__field { position: absolute; inset: 58px 0 0; }
.lp-map__radar {
  position: absolute; width: min(62%, 350px); aspect-ratio: 1;
  left: 50%; top: 48%; transform: translate(-50%, -50%);
  border: 1px solid var(--d-line); border-radius: 50%;
}
.lp-map__radar::before, .lp-map__radar::after {
  content: ''; position: absolute; inset: 17%; border: 1px solid var(--d-line); border-radius: 50%;
}
.lp-map__radar::after { inset: 34%; }
.lp-map__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, var(--lp-accent-soft) 94%, transparent 100%);
  opacity: .8;
}
.lp-map.is-anim .lp-map__sweep { animation: lpSweep 4.8s linear infinite; }
.lp-map__city {
  position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 92px; height: 92px;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 800;
  box-shadow: 0 0 0 10px rgba(255,255,255,.06);
}
.lp-map__pin { position: absolute; display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--d-text); }
.lp-map__pin::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-accent); }
.lp-map__pin--a { left: 14%; top: 28%; }
.lp-map__pin--b { right: 12%; top: 31%; }
.lp-map__pin--c { left: 18%; bottom: 20%; }
.lp-map__pin--d { right: 15%; bottom: 18%; }
.lp-map.is-anim .lp-map__pin::before { animation: lpPing 2.4s var(--ease) infinite; }
@keyframes lpSweep { to { transform: rotate(360deg); } }
@keyframes lpPing { 50% { box-shadow: 0 0 0 8px var(--lp-accent-soft); } }

/* Google Ads visual */
.lp-serp__body { position: relative; z-index: 2; padding: clamp(22px, 3vw, 38px); }
.lp-serp__search {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--pill); background: var(--paper); color: var(--ink);
  font-size: var(--fs-sm); box-shadow: 0 12px 34px -22px rgba(0,0,0,.75);
}
.lp-serp__search::before { content: ''; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 50%; opacity: .7; }
.lp-serp__result { margin-top: 18px; padding: 18px; border: 1px solid var(--d-line); border-radius: var(--r-sm); background: var(--d-card); }
.lp-serp__ad { font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--lp-accent); }
.lp-serp__title { width: 78%; height: 13px; margin-top: 12px; border-radius: 3px; background: #9BB9E8; }
.lp-serp__line { width: 94%; height: 6px; margin-top: 10px; border-radius: 3px; background: #4B4B48; }
.lp-serp__line--short { width: 68%; }
.lp-serp__terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.lp-serp__term { padding: 9px 10px; border: 1px solid var(--d-line); border-radius: 8px; font-size: var(--fs-3xs); color: var(--d-label); text-align: center; }
.lp-serp.is-anim .lp-serp__result { animation: lpResult 1s var(--ease-out) .25s both; }
.lp-serp.is-anim .lp-serp__term { animation: lpResult .55s var(--ease-out) both; }
.lp-serp.is-anim .lp-serp__term:nth-child(1) { animation-delay: .7s; }
.lp-serp.is-anim .lp-serp__term:nth-child(2) { animation-delay: .85s; }
.lp-serp.is-anim .lp-serp__term:nth-child(3) { animation-delay: 1s; }
@keyframes lpResult { from { opacity: 0; transform: translateY(14px); } }

/* Creative testing visuals */
.lp-creative__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 18px; }
.lp-creative__card { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--d-card-2); }
.lp-creative__card img, .lp-creative__card video { width: 100%; height: 100%; object-fit: cover; }
.lp-creative__card::after { content: attr(data-label); position: absolute; left: 9px; bottom: 9px; padding: 5px 8px; border-radius: 6px; background: rgba(16,16,16,.78); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lp-creative.is-anim .lp-creative__card { animation: lpCreative 3.4s var(--ease) infinite; }
.lp-creative.is-anim .lp-creative__card:nth-child(2) { animation-delay: .45s; }
.lp-creative.is-anim .lp-creative__card:nth-child(3) { animation-delay: .9s; }
.lp-creative.is-anim .lp-creative__card:nth-child(4) { animation-delay: 1.35s; }
@keyframes lpCreative { 0%, 75%, 100% { box-shadow: none; transform: none; } 84% { box-shadow: 0 0 0 2px var(--lp-accent); transform: translateY(-3px); } }

/* Food shop visual */
.lp-food__body { position: relative; z-index: 2; display: grid; grid-template-columns: .78fr 1.22fr; gap: 12px; padding: 18px; }
.lp-food__nav, .lp-food__shop { border: 1px solid var(--d-line); border-radius: 13px; background: var(--d-card); padding: 14px; }
.lp-food__nav span { display: block; height: 8px; margin-bottom: 12px; border-radius: 4px; background: #444440; }
.lp-food__nav span:nth-child(2) { width: 72%; }
.lp-food__nav span:nth-child(3) { width: 86%; }
.lp-food__nav span:nth-child(4) { width: 58%; }
.lp-food__products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.lp-food__product { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--d-card-2); }
.lp-food__product img { width: 100%; height: 100%; object-fit: cover; }
.lp-food__cart { margin-top: 12px; padding: 11px 13px; border-radius: 8px; background: #5E8E3E; font-size: var(--fs-xs); font-weight: 700; text-align: center; }
.lp-food.is-anim .lp-food__product { animation: lpFood .6s var(--ease-out) both; }
.lp-food.is-anim .lp-food__product:nth-child(1) { animation-delay: .25s; }
.lp-food.is-anim .lp-food__product:nth-child(2) { animation-delay: .4s; }
.lp-food.is-anim .lp-food__product:nth-child(3) { animation-delay: .55s; }
.lp-food.is-anim .lp-food__product:nth-child(4) { animation-delay: .7s; }
.lp-food.is-anim .lp-food__cart { animation: lpCart 1.7s var(--ease) 1s infinite alternate; }
@keyframes lpFood { from { opacity: 0; transform: scale(.92); } }
@keyframes lpCart { to { background: #6CA04A; box-shadow: 0 0 0 6px rgba(94,142,62,.12); } }

/* Migration visual */
.lp-migrate__body { position: relative; z-index: 2; padding: clamp(24px, 3vw, 38px); }
.lp-migrate__sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.lp-migrate__source { padding: 13px 8px; border: 1px solid var(--d-line); border-radius: 9px; text-align: center; font-size: var(--fs-xs); color: var(--d-text); background: var(--d-card); }
.lp-migrate__route { position: relative; height: 150px; }
.lp-migrate__route::before { content: ''; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--d-line); }
.lp-migrate__packet { position: absolute; left: 8%; top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 5px; background: var(--lp-accent); opacity: 0; }
.lp-migrate.is-anim .lp-migrate__packet { animation: lpPacket 3s var(--ease) .4s infinite; }
.lp-migrate__target { padding: 18px; border: 1px solid #5E8E3E; border-radius: 12px; background: rgba(94,142,62,.11); text-align: center; font-family: var(--display); font-weight: 800; }
@keyframes lpPacket { 0% { left: 8%; opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; } 100% { left: calc(92% - 16px); opacity: 0; } }

/* Automotive visual */
.lp-auto {
  --d-bg: #f3f4f1;
  --d-card: #ffffff;
  --d-card-2: #e9ebe6;
  --d-line: #d5d8d0;
  --d-text: #4e524a;
  --d-label: #60645b;
  --lp-auto-active-text: #624a24;
  background: var(--d-bg);
  color: #1b1d19;
}
.lp-auto::before {
  background:
    linear-gradient(rgba(18, 18, 18, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, .045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.lp-auto__body { position: relative; z-index: 2; padding: 18px; }
.lp-auto__locations { display: flex; gap: 7px; margin-bottom: 12px; }
.lp-auto__location { flex: 1; padding: 9px 8px; border: 1px solid var(--d-line); border-radius: 8px; color: var(--d-label); font-size: var(--fs-3xs); text-align: center; }
.lp-auto__location.is-active { color: var(--lp-auto-active-text); border-color: var(--lp-accent); background: var(--lp-accent-soft); }
.lp-auto__vehicle { position: relative; aspect-ratio: 16 / 10; border-radius: 13px; overflow: hidden; background: var(--d-card-2); }
.lp-auto__inventory {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 112%, rgba(178, 143, 80, .16), transparent 54%), #e9ebe6;
}
.lp-auto__inventory::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(18,18,18,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,18,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .72;
}
.lp-auto__stock {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
  height: 100%; padding: 16px 16px 68px;
}
.lp-auto__stock-card {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px;
  min-width: 0; padding: 7px;
  border: 1px solid var(--d-line); border-radius: 9px;
  background: rgba(255, 255, 255, .94);
}
.lp-auto__stock-thumb {
  position: relative; min-height: 0; overflow: hidden;
  border-radius: 6px; background: #dfe2db;
}
.lp-auto__stock-thumb::before {
  content: ''; position: absolute; inset: 22% 16%;
  border: 1px solid rgba(50, 55, 46, .2); border-radius: 5px;
  background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(191, 196, 186, .28) 62%);
}
.lp-auto__stock-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(178,143,80,.2) 50%, transparent 65%);
  transform: translateX(-115%);
}
.lp-auto__stock-copy { display: grid; gap: 5px; }
.lp-auto__stock-copy b { display: block; height: 4px; border-radius: 2px; background: #c5c9c0; }
.lp-auto__stock-copy b:last-child { width: 62%; background: #d7dad3; }
.lp-auto__sync {
  position: absolute; z-index: 2; left: 10%; right: 10%; bottom: 58px;
  height: 1px; overflow: visible; background: var(--d-line);
}
.lp-auto__sync::before {
  content: ''; position: absolute; left: 0; top: -1px;
  width: 20%; height: 3px; border-radius: 2px;
  background: var(--lp-accent); transform: translateX(-100%);
}
.lp-auto__sync::after {
  content: ''; position: absolute; right: -4px; top: -4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lp-accent); box-shadow: 0 0 0 5px var(--lp-accent-soft);
}
.lp-auto__overlay { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 9px; background: rgba(255, 255, 255, .92); color: #242720; font-size: var(--fs-xs); }
.lp-auto__leads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.lp-auto__lead { padding: 10px; border: 1px solid var(--d-line); border-radius: 8px; background: rgba(255, 255, 255, .72); color: var(--d-label); font-size: var(--fs-3xs); text-align: center; }
.lp-auto.is-anim .lp-auto__location { animation: lpLocation 4s var(--ease) 12 both; }
.lp-auto.is-anim .lp-auto__location:nth-child(2) { animation-delay: 1.3s; }
.lp-auto.is-anim .lp-auto__location:nth-child(3) { animation-delay: 2.6s; }
.lp-auto.is-anim .lp-auto__stock-card { animation: lpAutoStock 4.8s var(--ease-out) 12 both; animation-delay: calc(var(--i) * 1.6s); }
.lp-auto.is-anim .lp-auto__stock-card .lp-auto__stock-thumb::after { animation: lpAutoScan 4.8s var(--ease-out) 12 both; animation-delay: calc(var(--i) * 1.6s); }
.lp-auto.is-anim .lp-auto__sync::before { animation: lpAutoSync 4.8s var(--ease-out) 12 both; }
.lp-auto.is-anim .lp-auto__sync::after { animation: lpAutoEndpoint 4.8s var(--ease-out) 12 both; }
@keyframes lpLocation { 0%, 28%, 100% { color: var(--d-label); border-color: var(--d-line); background: transparent; } 8%, 20% { color: var(--lp-auto-active-text); border-color: var(--lp-accent); background: var(--lp-accent-soft); } }
@keyframes lpAutoStock { 0%, 30%, 100% { border-color: var(--d-line); transform: translateY(0); } 8%, 20% { border-color: var(--lp-accent); transform: translateY(-3px); } }
@keyframes lpAutoScan { 0%, 7% { transform: translateX(-115%); } 24%, 100% { transform: translateX(115%); } }
@keyframes lpAutoSync { 0%, 16% { opacity: 0; transform: translateX(-100%); } 24% { opacity: 1; } 72% { opacity: 1; transform: translateX(400%); } 82%, 100% { opacity: 0; transform: translateX(400%); } }
@keyframes lpAutoEndpoint { 0%, 68%, 100% { transform: scale(1); } 76% { transform: scale(1.35); } }

/* Commerce platform comparison visual */
.lp-compare__body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px; align-items: stretch;
  padding: clamp(20px, 2.6vw, 34px);
}
.lp-compare__panel {
  min-height: 310px; padding: 20px;
  border: 1px solid var(--d-line); border-radius: 14px;
  background: var(--d-card);
}
.lp-compare__panel--shopify { border-color: rgba(94, 142, 62, .62); }
.lp-compare__name {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 15px; border-bottom: 1px solid var(--d-line);
  font-family: var(--display); font-size: var(--fs-lead); font-weight: 800;
}
.lp-compare__name i { width: 8px; height: 8px; border-radius: 50%; background: var(--d-line); }
.lp-compare__panel--shopify .lp-compare__name i { background: #5E8E3E; }
.lp-compare__list { display: grid; gap: 11px; margin-top: 20px; }
.lp-compare__list li { display: flex; gap: 9px; color: var(--d-label); font-size: var(--fs-xs); }
.lp-compare__list li::before { content: '•'; color: var(--lp-accent); }
.lp-compare__fit {
  margin-top: 24px; padding: 11px 12px;
  border-radius: 8px; background: var(--d-card-2);
  color: var(--d-text); font-size: var(--fs-xs); line-height: 1.45;
}
.lp-compare__versus { align-self: center; color: var(--d-label); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .12em; }
.lp-compare.is-anim .lp-compare__panel--shopify { animation: lpCompare 2.8s var(--ease) infinite alternate; }
@keyframes lpCompare { to { box-shadow: 0 0 0 3px rgba(94, 142, 62, .12); transform: translateY(-4px); } }

/* Owned automotive channel visual */
.lp-owned__body { position: relative; z-index: 2; padding: clamp(22px, 3vw, 38px); }
.lp-owned__sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.lp-owned__source { padding: 12px 8px; border: 1px solid var(--d-line); border-radius: 9px; color: var(--d-label); font-size: var(--fs-xs); text-align: center; background: var(--d-card); }
.lp-owned__route { position: relative; height: 155px; }
.lp-owned__route::before, .lp-owned__route::after {
  content: ''; position: absolute; top: 0; bottom: 18px; width: 1px;
  background: linear-gradient(var(--d-line), var(--lp-accent));
  transform-origin: top;
}
.lp-owned__route::before { left: 28%; transform: rotate(-18deg); }
.lp-owned__route::after { right: 28%; transform: rotate(18deg); }
.lp-owned__packet { position: absolute; left: calc(50% - 6px); top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--lp-accent); opacity: 0; }
.lp-owned.is-anim .lp-owned__packet { animation: lpOwned 2.4s var(--ease) infinite; }
.lp-owned__hub { padding: 18px; border: 1px solid var(--lp-accent); border-radius: 12px; background: var(--lp-accent-soft); text-align: center; }
.lp-owned__hub strong { display: block; font-family: var(--display); font-size: var(--fs-lead); }
.lp-owned__hub span { display: block; margin-top: 5px; color: var(--d-label); font-size: var(--fs-xs); }
@keyframes lpOwned { 0% { top: 0; opacity: 0; } 16% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 28px); opacity: 0; } }

/* SEO landing pages reuse the main page composition with topic-specific stages. */
.seo-stage {
  --d-bg: #f3f4f1;
  --d-card: #ffffff;
  --d-card-2: #e9ebe6;
  --d-line: #d5d8d0;
  --d-text: #4e524a;
  --d-label: #60645b;
  color: #1b1d19;
}
.seo-hero .h1 { max-width: 820px; }
.seo-hero .h1--herford { font-size: clamp(34px, 4.6vw, 64px); line-height: .96; }
.seo-hero .h1--herford .line:first-child > span { white-space: nowrap; }
.seo-hero .hero__lead { max-width: 620px; }
.seo-stage .stage__item { padding: clamp(14px, 1.6vw, 22px); }
.seo-stage .stage__item > .lp-visual {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: calc(var(--r-md) - 2px);
  box-shadow: none;
  background: var(--d-bg);
  color: #1b1d19;
}
.seo-stage .stage__item > .lp-visual::before {
  background:
    linear-gradient(rgba(18, 18, 18, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, .045) 1px, transparent 1px);
}
.seo-stage .lp-map__city { box-shadow: 0 0 0 10px rgba(18, 18, 18, .045); }
.seo-stage .lp-pipeline { width: 100%; min-height: 100%; border: 0; border-radius: calc(var(--r-md) - 2px); }
.seo-stage .lp-pipeline.is-anim .lp-pipeline__step i { animation-name: lpNodeLight; }
@keyframes lpNodeLight {
  60% { border-color: var(--lp-accent); background: var(--lp-accent-soft); color: #1b1d19; transform: scale(1.12); }
  100% { border-color: var(--lp-accent); background: var(--lp-accent-soft); color: #1b1d19; transform: none; box-shadow: 0 0 0 7px var(--lp-accent-soft); }
}
.seo-stage .lp-creative__grid { height: calc(100% - 53px); align-content: center; }
.seo-stage .lp-creative__card { aspect-ratio: 4 / 5.15; }
.seo-stage .lp-auto__body,
.seo-stage .lp-owned__body,
.seo-stage .lp-migrate__body,
.seo-stage .lp-compare__body { padding: clamp(16px, 2vw, 24px); }
.seo-stage .lp-auto__body { display: grid; align-content: center; height: calc(100% - 53px); }
.seo-stage .lp-owned__body,
.seo-stage .lp-migrate__body { display: grid; align-content: center; height: calc(100% - 53px); }
.seo-stage .lp-map__field { inset: 53px 0 0; }

/* Google Ads hero: a search query moves through matching, ad delivery and measurement. */
.google-ads-hero {
  --google-blue: #4285f4;
  --google-green: #34a853;
  --google-yellow: #fbbc04;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: clamp(9px, 1.2vw, 14px);
  width: min(100%, 650px);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: #f8f9fb;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(66, 133, 244, .11), transparent 24%),
    radial-gradient(circle at 16% 86%, rgba(251, 188, 4, .1), transparent 26%),
    radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .055) 1px, transparent 1.2px);
  background-size: auto, auto, 24px 24px;
}
.google-ads-hero__top,
.google-ads-hero__search,
.google-ads-hero__matches,
.google-ads-hero__ad,
.google-ads-hero__route,
.google-ads-hero__result { position: relative; z-index: 2; }
.google-ads-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(9px, 1.2vw, 14px);
  border-bottom: 1px solid rgba(18, 18, 18, .12);
}
.google-ads-hero__brand { display: flex; align-items: center; min-width: 0; }
.google-ads-hero__brand img { display: block; width: clamp(72px, 8vw, 96px); height: auto; }
.google-ads-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: clamp(8px, .85vw, 11px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.google-ads-hero__status i,
.google-ads-hero__result strong i {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--google-green);
  box-shadow: 0 0 0 5px rgba(52, 168, 83, .12);
}
.google-ads-hero__search {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: clamp(45px, 5vw, 57px);
  gap: 12px;
  padding: 0 clamp(15px, 2vw, 21px);
  border: 1px solid #d6d8dc;
  border-radius: var(--pill);
  background: var(--paper);
}
.google-ads-hero__search strong {
  overflow: hidden;
  color: #2e3135;
  font-family: var(--sans);
  font-size: clamp(11px, 1.25vw, 15px);
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.google-ads-hero__glass {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  aspect-ratio: 1;
  border: 1.8px solid var(--google-blue);
  border-radius: 50%;
}
.google-ads-hero__glass::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--google-blue);
  transform: rotate(45deg);
}
.google-ads-hero__cursor {
  flex: 0 0 auto;
  width: 1px;
  height: 1.1em;
  margin-left: -7px;
  background: var(--google-blue);
  animation: googleAdsCursor 1s steps(1, end) 12 both;
}
.google-ads-hero__matches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, .8vw, 9px); }
.google-ads-hero__matches span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 5px;
  padding: clamp(7px, 1vw, 10px);
  border: 1px solid #dcdee2;
  border-radius: 9px;
  background: rgba(255, 255, 255, .86);
  animation: googleAdsMatch 6.4s var(--ease) 12 both;
  animation-delay: calc(var(--match-order) * 180ms);
}
.google-ads-hero__matches b,
.google-ads-hero__matches i {
  overflow: hidden;
  font-family: var(--sans);
  font-size: clamp(7px, .75vw, 10px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.google-ads-hero__matches b { font-weight: 700; }
.google-ads-hero__matches i { color: #248341; font-style: normal; }
.google-ads-hero__ad {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(15px, 2.3vw, 25px);
  border: 1px solid rgba(66, 133, 244, .38);
  border-radius: 14px;
  background: var(--paper);
  transform-origin: 50% 100%;
  animation: googleAdsCard 6.4s var(--ease) 12 both;
}
.google-ads-hero__ad > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.google-ads-hero__ad > div span {
  flex: 0 0 auto;
  padding: 3px 6px;
  border: 1px solid #a6a8ac;
  border-radius: 4px;
  color: #4e5156;
  font-size: clamp(7px, .75vw, 9px);
  font-weight: 700;
  line-height: 1;
}
.google-ads-hero__ad small {
  overflow: hidden;
  color: var(--muted);
  font-size: clamp(8px, .85vw, 11px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.google-ads-hero__ad h2 {
  margin: clamp(9px, 1.3vw, 13px) 0 0;
  color: #1959b8;
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 25px);
  line-height: 1.12;
}
.google-ads-hero__ad p { margin: 7px 0 0; color: var(--muted); font-size: clamp(9px, 1.05vw, 13px); line-height: 1.45; }
.google-ads-hero__ad > b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-top: clamp(10px, 1.5vw, 16px);
  color: #1959b8;
  font-size: clamp(9px, 1vw, 12px);
}
.google-ads-hero__ad > b i { font-style: normal; transition: transform .3s var(--ease); }
.google-ads-hero__route { align-self: center; height: clamp(13px, 2vw, 22px); }
.google-ads-hero__route::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 4%;
  right: 4%;
  height: 1px;
  background: #d7d9de;
}
.google-ads-hero__route i {
  position: absolute;
  top: calc(50% - 2px);
  left: 4%;
  width: 92%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--google-blue), var(--google-green));
  transform: scaleX(0);
  transform-origin: left;
  animation: googleAdsRoute 6.4s var(--ease) 12 both;
}
.google-ads-hero__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: clamp(10px, 1.4vw, 14px) clamp(13px, 1.8vw, 18px);
  border: 1px solid rgba(52, 168, 83, .34);
  border-radius: 10px;
  background: rgba(241, 249, 243, .94);
  animation: googleAdsResult 6.4s var(--ease) 12 both;
}
.google-ads-hero__result span {
  color: var(--muted);
  font-size: clamp(8px, .85vw, 11px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.google-ads-hero__result strong { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(10px, 1.1vw, 14px); }
@keyframes googleAdsCursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes googleAdsMatch {
  0%, 18%, 88%, 100% { border-color: #dcdee2; background: rgba(255, 255, 255, .86); transform: translateY(0); }
  28%, 72% { border-color: rgba(52, 168, 83, .48); background: rgba(241, 249, 243, .96); transform: translateY(-2px); }
}
@keyframes googleAdsCard {
  0%, 32%, 90%, 100% { border-color: rgba(66, 133, 244, .28); transform: translateY(0); }
  44%, 74% { border-color: rgba(66, 133, 244, .68); transform: translateY(-4px); }
}
@keyframes googleAdsRoute { 0%, 53% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes googleAdsResult {
  0%, 65% { border-color: rgba(52, 168, 83, .2); background: rgba(255, 255, 255, .88); }
  78%, 100% { border-color: rgba(52, 168, 83, .48); background: rgba(241, 249, 243, .98); }
}

/* Each Shopify SEO hero visual explains its page topic without relying on project media. */
.shop-hero-visual {
  --shop-green: #95bf47;
  --shop-green-soft: rgba(149, 191, 71, .13);
  position: relative;
  isolation: isolate;
  width: min(100%, 650px);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(24px, 3vw, 38px);
  background-color: #f7f7f5;
  background-image: radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .065) 1px, transparent 1.2px);
  background-size: 25px 25px;
  box-shadow: 0 26px 65px rgba(18, 18, 18, .075);
}
.shop-hero-visual::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 58%;
  aspect-ratio: 1;
  right: -14%;
  bottom: -18%;
  border-radius: 50%;
  background: var(--shop-green-soft);
  filter: blur(48px);
}
.shop-hero-visual__top {
  position: absolute;
  z-index: 10;
  top: clamp(18px, 3.6vw, 34px);
  left: clamp(18px, 3.6vw, 34px);
  right: clamp(18px, 3.6vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: clamp(13px, 1.8vw, 18px);
  border-bottom: 1px solid rgba(18, 18, 18, .13);
}
.shop-hero-visual__top span {
  font-family: var(--sans);
  font-size: clamp(9px, .9vw, 12px);
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
}
.shop-hero-visual__top img { display: block; width: clamp(68px, 8.5vw, 100px); height: auto; }
.seo-hero .h1--long-commerce { font-size: clamp(38px, 5.4vw, 69px); line-height: .95; }

/* Food commerce: one inventory connects the farm shop with online orders. */
.shop-hero-visual--food {
  background-color: #f4f7ed;
  background-image:
    radial-gradient(circle at 78% 76%, rgba(149, 191, 71, .22), transparent 31%),
    radial-gradient(circle at 1px 1px, rgba(51, 67, 29, .09) 1px, transparent 1.2px);
  background-size: auto, 25px 25px;
}
.food-system { position: absolute; inset: 19% 5% 5%; }
.food-system__ring {
  position: absolute;
  left: 50%;
  top: 51%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.food-system__ring--outer { width: 77%; aspect-ratio: 1; border: 1px dashed rgba(58, 76, 31, .26); animation: foodOrbit 24s linear 4 both; }
.food-system__ring--inner { width: 48%; aspect-ratio: 1; border: 1px solid rgba(58, 76, 31, .16); }
.food-system__core {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 51%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(112, 153, 65, .62);
  background: linear-gradient(150deg, #f2f8e8, #e4f0d3 82%);
  color: #17200d;
  box-shadow: 0 8px 0 rgba(71, 99, 40, .1);
  transform: translate(-50%, -50%);
  animation: foodCore 5.6s var(--ease) 12 both;
}
.food-system__core span { font: 750 clamp(11px, 1.25vw, 17px)/1 var(--sans); }
.food-system__core img { width: min(66%, 112px); filter: none; }
.food-system__node {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 31%;
  padding: clamp(10px, 1.35vw, 14px);
  border: 1px solid rgba(58, 76, 31, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  color: #1c2710;
  font: 750 clamp(9px, .9vw, 12px)/1.1 var(--sans);
  animation: foodNode 5.6s var(--ease) 12 both;
  animation-delay: var(--food-delay, 0s);
}
.food-system__node small { margin-top: 5px; color: #65704e; font-size: clamp(7px, .68vw, 9px); font-weight: 550; }
.food-system__node--store { left: 1%; top: 9%; --food-delay: .1s; }
.food-system__node--shop { right: 1%; top: 8%; --food-delay: .8s; }
.food-system__node--stock { left: 0; bottom: 16%; --food-delay: 1.5s; }
.food-system__node--shipping { right: 0; bottom: 18%; --food-delay: 2.2s; }
.food-system__node--repeat { left: 50%; bottom: 0; min-width: 35%; text-align: center; transform: translateX(-50%); --food-delay: 2.9s; }
.food-system__beam {
  --beam-travel: clamp(95px, 12vw, 145px);
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 51%;
  width: 38%;
  height: 1px;
  overflow: visible;
  background: rgba(58, 76, 31, .22);
  transform: rotate(var(--beam-angle));
  transform-origin: left center;
}
.food-system__beam::after {
  content: '';
  position: absolute;
  left: 8%;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--shop-green);
  box-shadow: 0 0 0 5px rgba(149, 191, 71, .15);
  opacity: 0;
  animation: foodSignal 5.6s var(--ease) 12 both;
  animation-delay: var(--beam-delay, 0s);
}
.food-system__beam--store { --beam-angle: -142deg; --beam-delay: 0s; }
.food-system__beam--shop { --beam-angle: -38deg; --beam-delay: .7s; }
.food-system__beam--stock { --beam-angle: 151deg; --beam-delay: 1.4s; }
.food-system__beam--shipping { --beam-angle: 30deg; --beam-delay: 2.1s; }
.food-system__beam--repeat { width: 32%; --beam-angle: 90deg; --beam-delay: 2.8s; }

/* Migration: a reviewed project map replaces the false impression of an automatic transfer. */
.shop-hero-visual--migration {
  background-color: #eef0ec;
  background-image:
    linear-gradient(rgba(18, 18, 18, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 18, .035) 1px, transparent 1px),
    radial-gradient(circle at 82% 78%, rgba(149, 191, 71, .19), transparent 31%);
  background-size: 25px 25px, 25px 25px, auto;
}
.migration-map {
  position: absolute;
  inset: 19% 5% 5%;
  display: grid;
  grid-template-columns: .72fr 1.45fr .84fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.1vw, 13px);
}
.migration-map__status {
  z-index: 3;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #c9cbc5;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  font: 700 clamp(8px, .76vw, 10px)/1 var(--sans);
}
.migration-map__status b { display: flex; align-items: center; gap: 7px; color: #8a4b13; font-weight: 700; }
.migration-map__status i { width: 7px; height: 7px; border-radius: 50%; background: #e58c35; animation: migrationOpen 2.6s var(--ease) 12 both; }
.migration-map__source, .migration-map__matrix, .migration-map__target {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  padding: clamp(11px, 1.45vw, 16px);
  border: 1px solid #c6c8c1;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
}
.migration-map__source small, .migration-map__matrix small, .migration-map__target small {
  margin-bottom: 12px;
  color: #666960;
  font: 800 clamp(7px, .7vw, 9px)/1 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.migration-map__source span { padding: 9px 0; border-top: 1px solid #dedfd9; font: 700 clamp(8px, .8vw, 11px)/1 var(--sans); }
.migration-map__matrix { align-content: stretch; gap: 7px; overflow: hidden; }
.migration-map__matrix > span {
  display: grid;
  grid-template-columns: 1.1fr .78fr .78fr;
  align-items: center;
  gap: 5px;
  padding: 10px 9px;
  border: 1px solid #d4d5cf;
  border-radius: 8px;
  font: 650 clamp(7px, .71vw, 10px)/1.1 var(--sans);
  animation: migrationReview 6.2s var(--ease) 10 both;
  animation-delay: calc(var(--row) * .7s);
}
.migration-map__matrix b { font-weight: 750; }
.migration-map__matrix i { color: #6f7269; font-style: normal; }
.migration-map__matrix em { justify-self: end; padding: 5px 7px; border-radius: var(--pill); background: #f0e4d4; color: #744616; font-style: normal; font-weight: 750; }
.migration-map__target { border-color: rgba(112, 153, 65, .68); background: linear-gradient(150deg, #f2f8e8, #e4f0d3 82%); color: #17200d; }
.migration-map__target small { color: #536344; }
.migration-map__target img { width: min(92%, 112px); filter: none; }
.migration-map__target strong { margin-top: 20px; font: 750 clamp(9px, .9vw, 12px)/1.2 var(--sans); }
.migration-map__decisions {
  z-index: 3;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: .8fr .8fr 1.4fr;
  gap: 7px;
}
.migration-map__decisions span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px; border: 1px solid #c9cbc5; border-radius: 9px; background: rgba(255, 255, 255, .93); font: 700 clamp(7px, .7vw, 9px)/1.1 var(--sans); }
.migration-map__decisions i { color: #9a541c; font-style: normal; font-weight: 650; text-align: right; }
.migration-map__decisions span:last-child { border-color: #b8bab4; background: #e5e6e1; }
.migration-map__decisions span:last-child i { max-width: 12ch; color: #454840; }
.migration-map__connector { position: absolute; z-index: 1; top: 46%; height: 1px; border-top: 1px dashed #aeb1a8; }
.migration-map__connector--a { left: 19%; width: 12%; }
.migration-map__connector--b { right: 20%; width: 11%; }
.migration-map__scan {
  --scan-travel: clamp(105px, 13vw, 155px);
  position: absolute;
  z-index: 4;
  left: 27%;
  top: 25%;
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(149, 191, 71, .95), transparent);
  opacity: 0;
  pointer-events: none;
  animation: migrationScan 6.2s var(--ease) 10 both;
}

/* Platform comparisons use the same two-panel grammar with a page-specific color world. */
.shop-hero-visual--woocommerce {
  --compare-accent: #ff5b4d;
  --compare-deep: #8f2528;
  background-color: #f7f7f5;
  background-image:
    radial-gradient(circle at 18% 70%, rgba(255, 91, 77, .12), transparent 31%),
    radial-gradient(circle at 83% 71%, rgba(149, 191, 71, .18), transparent 31%),
    radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .065) 1px, transparent 1.2px);
  background-size: auto, auto, 25px 25px;
}
.shop-hero-visual--shopware {
  --compare-accent: #ffb24a;
  --compare-deep: #8a4618;
  background-color: #f7f7f5;
  background-image:
    radial-gradient(circle at 18% 70%, rgba(255, 178, 74, .14), transparent 31%),
    radial-gradient(circle at 83% 71%, rgba(149, 191, 71, .18), transparent 31%),
    radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .065) 1px, transparent 1.2px);
  background-size: auto, auto, 25px 25px;
}
.shop-hero-visual--wix {
  --compare-accent: #62c5ff;
  --compare-deep: #164f87;
  background-color: #f7f7f5;
  background-image:
    radial-gradient(circle at 18% 70%, rgba(27, 128, 255, .13), transparent 31%),
    radial-gradient(circle at 83% 71%, rgba(149, 191, 71, .18), transparent 31%),
    radial-gradient(circle at 1px 1px, rgba(18, 18, 18, .065) 1px, transparent 1.2px);
  background-size: auto, auto, 25px 25px;
}
.shop-hero-visual--woocommerce .shop-hero-visual__top,
.shop-hero-visual--shopware .shop-hero-visual__top,
.shop-hero-visual--wix .shop-hero-visual__top { border-bottom-color: rgba(255, 255, 255, .22); color: #fff; }
.shop-hero-visual--woocommerce .shop-hero-visual__top img,
.shop-hero-visual--shopware .shop-hero-visual__top img,
.shop-hero-visual--wix .shop-hero-visual__top img { filter: brightness(0) invert(1); }
.shop-hero-visual--woocommerce .shop-hero-visual__top {
  border-bottom-color: rgba(18, 18, 18, .13);
  color: var(--ink);
}
.shop-hero-visual--woocommerce .shop-hero-visual__top img,
.shop-hero-visual--shopware .shop-hero-visual__top img,
.shop-hero-visual--wix .shop-hero-visual__top img { filter: none; }
.shop-hero-visual--shopware .shop-hero-visual__top,
.shop-hero-visual--wix .shop-hero-visual__top {
  border-bottom-color: rgba(18, 18, 18, .13);
  color: var(--ink);
}
.compare-stack { position: absolute; inset: 22% 6% 7%; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(8px, 1.3vw, 15px); align-items: center; }
.compare-stack__side {
  min-height: 75%;
  padding: clamp(15px, 2.2vw, 23px);
  border-radius: 14px;
}
.compare-stack__side > small { display: block; margin-bottom: 14px; font: 800 clamp(8px, .8vw, 11px)/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; }
.compare-stack__side--parts {
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: linear-gradient(155deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .055));
  color: #fff;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.compare-stack__side--parts > small { color: rgba(255, 255, 255, .8); }
.compare-stack__alert { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: #fff; font: 700 clamp(8px, .8vw, 11px)/1.2 var(--sans); }
.compare-stack__alert i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--compare-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--compare-accent) 20%, transparent); animation: compareAlert 2.8s var(--ease) 12 both; }
.compare-stack__side--parts > span { display: flex; justify-content: space-between; gap: 5px; padding: 11px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: rgba(10, 10, 10, .22); font: 700 clamp(8px, .8vw, 11px)/1 var(--sans); animation: stackPart 5.4s var(--ease) 12 both; animation-delay: calc(var(--part) * .42s); }
.compare-stack__side--parts > span i { color: rgba(255, 255, 255, .65); font-style: normal; font-weight: 550; }
.compare-stack__versus { color: rgba(255, 255, 255, .72); font: 800 clamp(10px, 1vw, 14px)/1 var(--sans); }
.compare-stack__side--unified {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 82%;
  background: linear-gradient(150deg, #1b2610, #0d110a 76%);
  color: #fff;
  box-shadow: 0 17px 8px rgba(0, 0, 0, .24);
  animation: unifiedPlatform 5.4s var(--ease) 12 both;
}
.compare-stack__side--unified::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(149, 191, 71, .72); border-radius: inherit; pointer-events: none; }
.compare-stack__side--unified > img { width: min(79%, 128px); filter: grayscale(1) brightness(0) invert(1); }
.compare-stack__side--unified > strong { max-width: 15ch; margin-top: 32px; font: 750 clamp(12px, 1.25vw, 17px)/1.15 var(--sans); }
.compare-stack__side--unified > span { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: #c7cfbd; font: 600 clamp(8px, .8vw, 11px)/1.25 var(--sans); }
.compare-stack__side--unified i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--shop-green); box-shadow: 0 0 0 5px rgba(149, 191, 71, .15); }

/* WooCommerce keeps the warning color on the fragmented system, not on the entire scene. */
.shop-hero-visual--woocommerce .compare-stack__side--parts {
  border-color: rgba(137, 24, 31, .72);
  background: linear-gradient(150deg, #b83b3d, #7f2026 82%);
  box-shadow: 0 8px 0 rgba(94, 17, 22, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.shop-hero-visual--woocommerce .compare-stack__side--parts > span {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(72, 9, 14, .2);
}
.shop-hero-visual--woocommerce .compare-stack__side--parts > span i,
.shop-hero-visual--woocommerce .compare-stack__side--parts > small { color: rgba(255, 255, 255, .78); }
.shop-hero-visual--woocommerce .compare-stack__versus { color: #6c6c67; }
.shop-hero-visual--woocommerce .compare-stack__side--unified {
  background: linear-gradient(150deg, #f2f8e8, #e4f0d3 82%);
  color: #17200d;
  box-shadow: 0 8px 0 rgba(71, 99, 40, .1);
}
.shop-hero-visual--woocommerce .compare-stack__side--unified::before { border-color: rgba(112, 153, 65, .78); }
.shop-hero-visual--woocommerce .compare-stack__side--unified > img { filter: none; }
.shop-hero-visual--woocommerce .compare-stack__side--unified > span { color: #536344; }

/* Shopware follows the light comparison scene while keeping its technical workload distinct. */
.shop-hero-visual--shopware .compare-stack__side--parts {
  border-color: rgba(153, 76, 22, .72);
  background: linear-gradient(150deg, #d98738, #9a4d1c 82%);
  box-shadow: 0 8px 0 rgba(112, 56, 20, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.shop-hero-visual--shopware .compare-stack__side--parts > span {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(89, 39, 8, .2);
}
.shop-hero-visual--shopware .compare-stack__side--parts > span i,
.shop-hero-visual--shopware .compare-stack__side--parts > small { color: rgba(255, 255, 255, .82); }
.shop-hero-visual--shopware .compare-stack__versus { color: #6c6c67; }
.shop-hero-visual--shopware .compare-stack__side--unified {
  background: linear-gradient(150deg, #f2f8e8, #e4f0d3 82%);
  color: #17200d;
  box-shadow: 0 8px 0 rgba(71, 99, 40, .1);
}
.shop-hero-visual--shopware .compare-stack__side--unified::before { border-color: rgba(112, 153, 65, .78); }
.shop-hero-visual--shopware .compare-stack__side--unified > img { filter: none; }
.shop-hero-visual--shopware .compare-stack__side--unified > span { color: #536344; }

/* Wix uses the same light comparison scene with cloud limitations in blue. */
.shop-hero-visual--wix .compare-stack__side--parts {
  border-color: rgba(20, 80, 149, .72);
  background: linear-gradient(150deg, #3f87da, #175397 82%);
  box-shadow: 0 8px 0 rgba(16, 64, 120, .12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.shop-hero-visual--wix .compare-stack__side--parts > span {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(5, 42, 88, .2);
}
.shop-hero-visual--wix .compare-stack__side--parts > span i,
.shop-hero-visual--wix .compare-stack__side--parts > small { color: rgba(255, 255, 255, .82); }
.shop-hero-visual--wix .compare-stack__versus { color: #6c6c67; }
.shop-hero-visual--wix .compare-stack__side--unified {
  background: linear-gradient(150deg, #f2f8e8, #e4f0d3 82%);
  color: #17200d;
  box-shadow: 0 8px 0 rgba(71, 99, 40, .1);
}
.shop-hero-visual--wix .compare-stack__side--unified::before { border-color: rgba(112, 153, 65, .78); }
.shop-hero-visual--wix .compare-stack__side--unified > img { filter: none; }
.shop-hero-visual--wix .compare-stack__side--unified > span { color: #536344; }

@keyframes foodOrbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes foodCore { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.025); } }
@keyframes foodNode { 0%, 14%, 100% { border-color: rgba(58, 76, 31, .24); transform: translateY(0); } 24%, 39% { border-color: rgba(149, 191, 71, .82); transform: translateY(-3px); } }
@keyframes foodSignal { 0%, 12% { opacity: 0; transform: translateX(0); } 22% { opacity: 1; } 72% { opacity: 1; transform: translateX(var(--beam-travel)); } 88%, 100% { opacity: 0; transform: translateX(var(--beam-travel)); } }
@keyframes migrationOpen { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 140, 53, .22); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes migrationReview { 0%, 100% { border-color: #d4d5cf; transform: translateX(0); } 22%, 38% { border-color: #e58c35; transform: translateX(3px); } 54%, 70% { border-color: rgba(149, 191, 71, .78); transform: translateX(0); } }
@keyframes migrationScan { 0%, 12% { opacity: 0; transform: translateY(0); } 22% { opacity: .85; } 74% { opacity: .85; transform: translateY(var(--scan-travel)); } 88%, 100% { opacity: 0; transform: translateY(var(--scan-travel)); } }
@keyframes stackPart { 0%, 100% { border-color: rgba(255, 255, 255, .2); transform: translateX(0); } 24%, 40% { border-color: var(--compare-accent); transform: translateX(4px); } }
@keyframes unifiedPlatform { 0%, 100% { transform: translateY(0); box-shadow: 0 16px 36px rgba(18, 18, 18, .14); } 50% { transform: translateY(-5px); box-shadow: 0 24px 46px rgba(18, 18, 18, .2); } }
@keyframes compareAlert { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .18); } 50% { box-shadow: 0 0 0 8px transparent; } }

.seo-shop-wall {
  height: clamp(500px, 49vw, 690px);
  margin-top: -18px;
}
.seo-shop-wall .wall__cols { gap: 12px; }
.seo-shop-wall .wall__col { gap: 12px; }
.seo-shop-wall .tile { border-radius: var(--r-md); }
.seo-shop-wall .tile::after {
  content: attr(data-project);
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(16, 16, 16, .72);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.seo-faq-head { max-width: 980px; margin: 0 auto clamp(34px, 4vw, 54px); }
.seo-faq-head .h2 { max-width: 760px; }
.seo-faq-head .body { max-width: 620px; margin-top: 18px; }

.local-office__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: clamp(36px, 7vw, 108px);
  align-items: end;
}
.local-office .h2 { margin-top: 16px; max-width: 760px; }
.local-office .body { margin-top: 26px; max-width: 680px; }
.local-office .btn-row { margin-top: 32px; }
.local-office__card {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.local-office__card address {
  margin: 24px 0;
  color: var(--ink);
  font-size: var(--fs-d4);
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.local-office__card a { text-decoration: underline; text-underline-offset: 4px; }
.local-office__card > p:last-child { margin-top: 12px; color: var(--muted); font-size: var(--fs-xs); }
.local-office__related {
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.local-office__related a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1020px) {
  .seo-webwall { width: min(100%, 760px); margin: 8px auto 0; }
  .google-ads-hero { width: min(100%, 640px); margin-inline: auto; }
  .shop-hero-visual { width: min(100%, 640px); margin-inline: auto; }
  .seo-shop-wall { max-width: 760px; width: 100%; margin-top: 10px; }
}

@media (max-width: 640px) {
  .seo-webwall { height: 470px; gap: 8px; }
  .seo-webwall__col { gap: 8px; }
  .seo-webwall .webframe__bar { padding: 6px 7px; }
  .seo-webwall .webframe__bar i { width: 5px; height: 5px; }
  .seo-webwall .webframe__url { margin-left: 3px; padding-inline: 6px; }
  .seo-webwall .webframe__label { padding: 6px 7px; font-size: var(--fs-3xs); }
  .google-ads-hero { width: 100%; aspect-ratio: .88; }
  .google-ads-hero__matches { gap: 5px; }
  .google-ads-hero__matches span { flex-direction: column; align-items: flex-start; }
  .shop-hero-visual { width: 100%; }
  .food-system { inset-inline: 3%; }
  .food-system__node { min-width: 32%; padding: 9px; }
  .food-system__node--repeat { min-width: 39%; }
  .migration-map, .compare-stack { inset-inline: 4%; }
  .migration-map { gap: 6px; }
  .migration-map__source, .migration-map__matrix, .migration-map__target { padding: 9px; }
  .migration-map__matrix > span { padding: 8px 6px; }
  .migration-map__decisions { gap: 5px; }
  .migration-map__decisions span { padding: 8px 6px; }
  .compare-stack { gap: 7px; }
  .compare-stack__side { padding: 13px; }
  .compare-stack__alert { min-height: 25px; }
  .seo-stage .stage__item { padding: 10px; }
  .seo-stage .lp-creative__grid { gap: 7px; padding: 12px; }
  .seo-stage .lp-creative__card:nth-child(n+3) { display: none; }
  .seo-shop-wall { height: 620px; }
  .seo-shop-wall .wall__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-shop-wall .wall__cols > .wall__col { display: flex !important; margin-top: 0 !important; }
  .seo-shop-wall .wall__col:nth-child(3) { transform: translateY(-34px); }
}

@media (max-width: 1180px) {
  .lp-hero__grid, .lp-system { grid-template-columns: 1fr 1fr; gap: 42px; }
  .lp-visual { min-height: 480px; }
  .lp-service-grid, .lp-work-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-service:last-child, .lp-workcard:last-child { grid-column: span 2; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1020px) {
  .lp-hero__grid, .lp-system { grid-template-columns: 1fr; }
  .lp-hero__visual { max-width: 720px; width: 100%; }
  .lp-system__visual { max-width: 760px; width: 100%; }
  .lp-strip { grid-template-columns: repeat(2, 1fr); }
  .lp-strip__item:nth-child(2) { border-right: 0; }
  .lp-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .lp-steps { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .lp-contact { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 720px) {
  .lp-visual { min-height: 430px; }
  .lp-service-grid, .lp-work-grid { grid-template-columns: 1fr; }
  .lp-service:last-child, .lp-workcard:last-child { grid-column: auto; }
  .lp-service { min-height: 230px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-step { padding-right: 0; }
  .lp-pipeline { min-height: 500px; }
  .lp-pipeline__track { left: 50%; top: 76px; bottom: 64px; width: 2px; height: auto; }
  .lp-pipeline__track::after { transform: scaleY(0); transform-origin: top; }
  .lp-pipeline.is-anim .lp-pipeline__track::after { animation-name: lpTrackMobile; }
  .lp-pipeline__steps { inset: 58px 24px 48px; grid-template-columns: 1fr; align-items: stretch; }
  .lp-pipeline__step { display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; text-align: left; align-items: center; }
  .lp-pipeline__step i { margin: 0; grid-row: 1 / span 2; }
  .lp-pipeline__step b, .lp-pipeline__step span { margin: 0; }
  .lp-food__body { grid-template-columns: 1fr; }
  .lp-food__nav { display: none; }
  .lp-migrate__sources { grid-template-columns: 1fr; }
  .lp-migrate__route { height: 90px; }
  .lp-auto__locations { flex-wrap: wrap; }
  .lp-auto__location { flex: 1 1 28%; }
  .lp-compare__body { grid-template-columns: 1fr; }
  .lp-compare__versus { justify-self: center; }
  .lp-compare__panel { min-height: 0; }
  .lp-owned__sources { grid-template-columns: 1fr; }
  .lp-owned__route { height: 105px; }
  @keyframes lpTrackMobile { to { transform: scaleY(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .google-ads-hero__cursor, .google-ads-hero__matches span, .google-ads-hero__ad,
  .google-ads-hero__route i, .google-ads-hero__result { animation: none !important; }
  .google-ads-hero__cursor { opacity: 1; }
  .google-ads-hero__route i { transform: scaleX(1); }
  .food-system__ring--outer, .food-system__core, .food-system__node,
  .food-system__beam::after, .migration-map__status i, .migration-map__matrix > span,
  .migration-map__scan, .compare-stack__side--parts > span,
  .compare-stack__side--unified, .compare-stack__alert i { animation: none !important; }
  .food-system__ring { transform: translate(-50%, -50%); }
  .food-system__core { transform: translate(-50%, -50%); }
  .food-system__beam::after { display: none; }
  .migration-map__scan { display: none; }
  .lp-pipeline__track::after { transform: scaleX(1) !important; }
  .lp-pipeline__step i { border-color: var(--lp-accent) !important; color: var(--paper) !important; box-shadow: 0 0 0 7px var(--lp-accent-soft); }
  .seo-stage .lp-pipeline__step i { background: var(--lp-accent-soft) !important; color: #1b1d19 !important; }
  .lp-map__sweep, .lp-map__pin::before, .lp-serp__result, .lp-serp__term,
  .lp-creative__card, .lp-food__product, .lp-food__cart, .lp-migrate__packet,
  .lp-auto__location, .lp-auto__stock-card, .lp-auto__stock-thumb::after,
  .lp-auto__sync::before, .lp-auto__sync::after { animation: none !important; }
  .lp-auto__stock-card:first-child { border-color: var(--lp-accent); }
  .lp-auto__stock-thumb::after, .lp-auto__sync::before { display: none; }
  .lp-migrate__packet { display: none; }
}

@media (max-width: 1180px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .editions { grid-template-columns: 220px minmax(0, 1fr); }
  .chapstage { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1020px) {
  .prodsplit { grid-template-columns: 1fr; }
  .prodsplit__head, .prodsplit__aside, .prodsplit__main { grid-column: 1; grid-row: auto; }
  .prodsplit__aside { position: static; }
  .prodclip { max-width: 560px; }
  .refcase { grid-template-columns: 1fr; gap: 22px; }
  .refcase__media { position: static; }
  .nav { display: none; }
  html:not(.js) .site-header { flex-wrap: wrap; row-gap: 12px; }
  html:not(.js) .nav {
    display: flex; flex-wrap: wrap; row-gap: 4px;
    order: 3; width: 100%; font-size: var(--fs-sm);
  }
  html:not(.js) .nav-toggle { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: var(--pill);
    font-family: var(--sans); font-weight: 600; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  }
  .nav-toggle:hover { border-color: var(--ink); }
  .header__cta { display: none; }

  .site-header.is-open {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--paper);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .site-header.is-open .nav {

    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    height: calc(100dvh - 100% - 1px);
    z-index: 2;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    font-size: var(--fs-lead); font-weight: 600;
  }
  .site-header.is-open .nav > .btn { display: inline-flex; justify-content: center; margin-top: 16px; }
  .site-header.is-open .nav__cta-mark { width: 36px; height: 30px; transform: scale(1.25); }
    .site-header.is-open .nav > * { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .site-header.is-open .nav > .btn { padding: 16px 24px; border-bottom: 0; }
  .site-header.is-open .nav > *:last-child { border-bottom: 0; }
  .site-header.is-open .nav__pill { justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding-inline: 0; font-size: var(--fs-lead); }
  .site-header.is-open .nav__pill:hover, .site-header.is-open .nav__pill[aria-current="page"] { background: transparent; color: var(--ink); }
  .site-header.is-open .nav__link::after { display: none; }

  .split, .split--hero, .split--wide, .split--form { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .span-2 { grid-column: span 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .js [data-reveal="left"], .js [data-reveal="right"] { transform: translate3d(0, 26px, 0); }
  .head { align-items: flex-start; }
  .editions { grid-template-columns: 1fr; gap: 28px; }
  .editions > .chapter--cta { grid-column: 1; }
  .chapters { position: static; }
  .chapters__list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .chapters__link { padding: 6px 0; }
  .principles { grid-template-columns: 1fr; gap: 32px; }
  .principles__aside { position: static; }
  .sys {
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "specs";
  }
  .journey__rail { display: none; }
  .journey__phases { grid-template-columns: 1fr; gap: 34px; }
  .phase__node { width: 40px; height: 40px; }
  .stage { margin-top: clamp(20px, 3vw, 30px); min-height: clamp(380px, 58vw, 480px); }
  .specs { margin-top: clamp(18px, 2.4vw, 26px); }
  .wall { height: clamp(400px, 78vw, 520px); }

  .wall__cols > .wall__col:nth-child(n+4) { display: none; }
  .webwall { flex-wrap: wrap; }
  .webcol { flex: 1 1 44%; }
  .webcol { margin-top: 0 !important; }
  .webcol:nth-child(even) { margin-top: 44px !important; }

  .job { grid-template-columns: 1fr; gap: 26px; }
  .job:nth-child(even) .joblab { order: 0; }
}

@media (max-width: 720px) {
  .brand__sub { display: none; }
  .platform-comparison__head { align-items: start; flex-direction: column; }
  .platform-comparison table { min-width: 680px; }
  .local-office__grid { grid-template-columns: 1fr; }
  .consent__host .calendly-inline-widget { height: 1080px; }
  .consent__gate { min-height: 520px; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--team { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: 1fr; }
  .card__head { flex-wrap: wrap; gap: 12px; }
  .footer__grid { grid-template-columns: 1fr; }

  .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; padding-inline: 22px; }
  .btn--sm, .btn--xs, .nav__pill { width: auto; }
  .btn--xs { white-space: nowrap; }
  .btn-row { gap: 10px; }
  .case__foot { flex-direction: column; align-items: flex-start; }

  .specs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .specs::-webkit-scrollbar { display: none; }
  .spec { flex: 0 0 86%; scroll-snap-align: center; }

  .js .specs [data-reveal] { opacity: 1; transform: none; }
  .chapter--cta { grid-template-columns: 1fr; }
  .creed__row { grid-template-columns: 1fr; align-items: start; }
  .creed__side { padding-left: 0; }
  .chatfeed { min-height: 0; }
  .chatfeed__body { padding: 16px; min-height: 470px; gap: 10px; }
  .chatfeed__msg { font-size: var(--fs-sm); padding: 10px 14px; }
  .chatfeed__card { font-size: var(--fs-xs); padding: 11px 14px; }

  .orbit__field { --orbR: clamp(94px, 30vw, 124px); }
  .orbit__core { width: 112px; height: 112px; }
  .orbit__core b { font-size: var(--fs-sm); }
  .orbit__logos img { height: 17px; }
  .orbit__chip { font-size: var(--fs-3xs); padding: 5px 9px; }
  .stage { min-height: clamp(340px, 96vw, 440px); }
  .stage__tile { height: min(86%, 380px); }

  .sheet { gap: 8px; margin-top: 20px; }
  .sheet__card { padding: 5px 5px 7px; }
  .sheet__cap b { font-size: var(--fs-2xs); }
  .sheet__cap span { letter-spacing: .04em; }
  .sheet__card--mid { margin-top: 30px; }
  .voice__media { aspect-ratio: 9 / 12; }
  .partnerbar { flex-direction: column; align-items: flex-start; }
  .wall__cols { gap: 8px; }
  .wall__col { gap: 8px; }

  .wall__cols > .wall__col:nth-child(n+3) { display: none; }
  .wall__cols > .wall__col { margin-top: 0 !important; }
  .wall.wall--row { height: auto; overflow: hidden; }
  .wall--row .wall__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-inline: var(--gutter);
  }
  .wall--row .wall__cols > .wall__col:nth-child(-n+4) {
    display: block;
    min-width: 0;
    transform: none !important;
    will-change: auto;
  }
  .wall--row .wall__cols > .wall__col:nth-child(n+3):nth-child(-n+4) {
    aspect-ratio: 45 / 56;
    overflow: hidden;
  }
  .wall--row .wall__cols > .wall__col:nth-child(n+3) .tile__label { display: none; }
  .wall--row .wall__cols > .wall__col:nth-child(n+5) { display: none; }
  .wall--row .wall__fade { height: 70px !important; }
  .webwall { gap: 10px; }
  .webcol { gap: 10px; }
  .webcol:nth-child(even) { margin-top: 24px !important; }

  .h1 { line-height: 1.06; }
  .h2 { line-height: 1.12; }
  .h2--sm { line-height: 1.14; }
  .prin__t { line-height: 1.16; }
  .chapter__t { line-height: 1.2; }

  .hero__proof { gap: 10px 14px; }
  .hero__proof > span { width: 100%; }
  .hero__proof img { height: 14px; }
  .hero__proof img.is-tall { height: 17px; }
  .hero__proof img.is-gads { height: 27px; margin-block: -7px; }

  .marquee__group img { height: 22px; max-width: 120px; }
  .marquee__group img.is-mq-sm { height: 18px; }
  .marquee__group img.is-mq-tall { height: 30px; }
  .marquee__group img.is-mq-xl { height: 36px; }

  .shoplock { flex-wrap: wrap; row-gap: 9px; }
  .shoplock__meta { width: 100%; line-height: 1.6; }

  .person__role { letter-spacing: .05em; line-height: 1.5; }

  #stimmen .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .voice__body { padding: 12px 14px; }
  .voice__name { font-size: var(--fs-sm); }
  .voice__role { font-size: var(--fs-3xs); }
  .voice__play span { width: 42px; height: 42px; font-size: var(--fs-xs); }

  .chapters { display: none; }
  .editions .chapstage {
    display: block;
    position: relative;
    top: auto;
    order: 2;
  }
  .editions .chapters__body { order: 3; }
  .chapstage__view { min-height: clamp(400px, 108vw, 430px); }
  .chapstage .mock { width: min(100%, 260px); }
  .chapters__body {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chapters__body.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }
  .chapters__body::-webkit-scrollbar { display: none; }
  .js .chapters__body [data-reveal] { opacity: 1; transform: none; }
  .chapter, .chapter:first-child {
    flex: 0 0 86%;
    scroll-snap-align: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    padding: 22px 20px;
    transition: border-color .3s var(--ease), background .3s var(--ease);
  }
  .chapter[role="button"] { cursor: grab; }
  .chapter.is-active { border-color: rgba(94, 142, 62, .5); background: rgba(255, 255, 255, .94); }
  .chapter--cta { width: 100%; margin-top: 0; border-color: #EDE5D4; }

  .perks { grid-template-columns: 1fr; }
  .job__cols { grid-template-columns: 1fr; gap: 22px; }
  .job__apply--desktop { display: none; }
  .job__apply--mobile { display: flex; margin-top: 0; }
  .crewband { aspect-ratio: 3 / 2; }
  .cutlab, .shoplab { grid-template-columns: 1fr; }
  .joblab__flow { width: 100%; justify-self: stretch; }
  .shoplab__side .shoplab__list { grid-template-columns: 1fr 1fr; }

  .refcases.is-collapsed .refcase:nth-child(n+7) { display: none; }

  .refcases.is-collapsed .refcase:nth-child(6) {
    position: relative;
    height: 128px;
    overflow: hidden;
    padding-bottom: 0;
  }

  .refcases.is-collapsed .refcase:nth-child(6) .refcase__body { display: none; }
  .refcases.is-collapsed .refcase:nth-child(6)::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, var(--paper) 92%);
    pointer-events: none;
  }
  .refcases.is-collapsed + .refmore { display: flex; }
}

@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .wall { height: 420px; }

  .pipemock--cut { gap: 6px; }
  .pipemock--cut .pipemock__arrow { font-size: var(--fs-xs); }
  .figmamock { padding: 10px 8px; }
  .cutmock { padding: 5px; }
  .cutmock__screen { height: 74px; }
  .cutmock__strip img { height: 22px; }
  .pipemock--cut { grid-template-columns: minmax(0, .72fr) auto minmax(0, 1.18fr) auto minmax(0, 1.12fr); }
  .pipemock--cut .cutmock__meta em:first-child { display: none; }
  .pipemock--cut .admock__head { padding: 6px 8px; gap: 6px; }
  .pipemock--cut .admock__avatar { width: 16px; height: 16px; }
  .pipemock--cut .admock__lines i { width: 40px; }
  .pipemock--cut .admock__lines em { display: none; }
  .pipemock--cut .admock__cta { padding: 6px; font-size: var(--fs-2xs); justify-content: center; }
  .pipemock--cut .admock__cta span { white-space: nowrap; }
  .pipemock--cut .admock__cta b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .journey__pulse, .phase__node, .orbit__rot, .orbit__chip, .orbit__pulse, .orbit__core { animation: none !important; }
  .journey__rail::after { animation: none !important; width: 0 !important; }
  .journey--stack .phase::after { animation: none !important; transform: scaleY(0) !important; }
  .journey.is-anim .phase :is(.phase__t, .phase__d, .jrow) { animation: none !important; opacity: 1 !important; }
  .orbit__pulse { opacity: 0 !important; }
  .orbit__core::after { animation: none !important; opacity: 0 !important; }
  .loopmark__sheen { animation: none !important; }
  .chapstage__item { transition: none !important; }
  .chatfeed__item { animation: none !important; opacity: 1 !important; transform: none !important; }
  .chatfeed__badge--live i { animation: none !important; }
  .figmamock__cursor { animation: none !important; }
  .cutmock__playhead { animation: none !important; }
  .creed__aura { animation: none !important; transform: none !important; }
  .creed__sigsheen { animation: none !important; }
  .mock-rep__line { animation: none !important; stroke-dashoffset: 0 !important; }
  .scan__beam { animation: none !important; opacity: 0 !important; }
  .scan__check { animation: none !important; opacity: 1 !important; }
  .scan__check path { animation: none !important; stroke-dashoffset: 0 !important; }
  .mock-pipe__lane i { animation: none !important; opacity: 0 !important; }
  .stage__item { transition: none !important; }
  .handoff__chip { opacity: 1 !important; transform: none !important; }
  .lines .line > span { transform: none !important; }
  .wall__col { transform: none !important; }
  .webcol { transform: none !important; }
  .loopmark path { animation: none !important; stroke-dashoffset: 0 !important;
                   fill: var(--gold) !important; stroke: none !important; }
  .loopmark__pen { display: none !important; }
  .uline__svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .loop::after { animation: none !important; opacity: 0 !important; }
  .loopmark { animation: none !important; transform: none !important; }
  .prinrail path { animation: none !important; stroke-dashoffset: 0 !important; }
  .prin__t::before {
    animation: none !important;
    background: #D9BC85 !important;
    transform: scale(1) !important;
  }
  .marquee__track { transform: none !important; }

  .cutlab__play, .cutlab__chip, .cutlab__live i, .shoplab__live i,
  .shoplab__sw, .shoplab__slider b, .shoplab__steps b, .shoplab__save { animation: none !important; }
  .shoplab__live { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cutlab__cut, .cutlab__out, .shoplab__blk, .shoplab__item,
  .shoplab__blk--grid i, .shoplab__stars b, .shoplab__phone {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .cutlab__play, .shoplab__ghost, .shoplab__drop, .shoplab__cursor { animation: none !important; opacity: 0 !important; }
  .joblab__flow i { animation: none !important; opacity: 0 !important; }
}

@media print {
  .site-header, .progress, .wall, .marquee, .webwall { display: none; }
  .section { border: 0; padding: 20px 0; }

  .uline__svg path { stroke-dashoffset: 0 !important; }
  .journey__pulse, .loopmark__pen, .loopmark__sheen, .orbit__pulse, .chapstage { display: none !important; }
  .orbit__core::after { display: none !important; }
  .journey__rail::after { display: none !important; }
  .scan__beam { display: none !important; }
  .scan__check { opacity: 1 !important; }
  .scan__check path { stroke-dashoffset: 0 !important; }
  .chatfeed__item { opacity: 1 !important; transform: none !important; }
  .cutmock__playhead { display: none !important; }
  .creed__aura { animation: none !important; transform: none !important; }
  .creed__sigsheen { animation: none !important; }
  .mock-rep__line { animation: none !important; stroke-dashoffset: 0 !important; }
  .phase__t, .phase__d, .jrow { animation: none !important; opacity: 1 !important; }
  .loopmark__base { stroke-dashoffset: 0 !important; fill: var(--gold) !important; }
  .stage__item { opacity: 1 !important; clip-path: none !important; visibility: visible !important; position: static !important; }
  .cutlab__out, .shoplab__blk, .shoplab__item,
  .shoplab__blk--grid i, .shoplab__stars b { opacity: 1 !important; transform: none !important; }
  .cutlab__play, .shoplab__ghost, .shoplab__drop, .shoplab__cursor,
  .shoplab__phone, .joblab__flow i { display: none !important; }
}