/* Film theme layer — loaded last.
   1. Fixes that follow from the move to the film's palette (near-black + lime)
   2. The film player and the outcomes under it
   3. Platform: the feature explorer and its six product close-ups
   4. Old way versus BeautyScale way
   5. Buyer database spotlight widgets
   6. Implementation steps
   7. Testimonials: brand category */

:root {
  --lime: #c4f000; --violet: #c18afa; --roseate: #ff7a9c; --amber: #ffb454; --red: #ff6464;
  --ink-2: #b3b8b0; --ink-3: #7b8078; --hair: rgba(255, 255, 255, .08); --hair-2: rgba(255, 255, 255, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* line icons, used as masks */
  --i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V9l8-6 8 6v12M9 21v-7h6v7'/%3E%3C/svg%3E");
  --i-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.4 5.7M20 4v7h-7'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10l7 3 3 7zM10 13l5-5'/%3E%3C/svg%3E");
  --i-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.6L22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4z'/%3E%3C/svg%3E");
  --i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 21V11M12 21V4M18 21v-7'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM3 7l9 6 9-6'/%3E%3C/svg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
  --i-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5zM3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  --i-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L7 17M7 8v9h9'/%3E%3C/svg%3E");
  --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18L17 7M8 7h9v9'/%3E%3C/svg%3E");
  --i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l4 4v3h-8z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --i-megaphone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4h3l7 4V6l-7 4zM17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
  --i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1'/%3E%3C/svg%3E");
  --i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16zM13 7l4 4'/%3E%3C/svg%3E");
  --i-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h12v10H3zM15 10l6-3v10l-6-3'/%3E%3C/svg%3E");
  --i-db: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E");
  --i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.5 3-5.5 6.5-5.5s6.5 2 6.5 5.5M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14.8c2.2.6 3.5 2.3 3.5 5.2'/%3E%3C/svg%3E");
  --i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h12l-2.5 4 2.5 4H5'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6zM9 12l2.2 2.2L15 10'/%3E%3C/svg%3E");
}

/* ── 1. Palette follow-ups ── */
/* Labels that sat in white on pink now sit on lime: they go dark. */
.btn-p, .design-preview .btn-p, .btn-p:hover, .pr-tag { color: #0a0b0a !important; }
/* Wordmark: "AI" set like in the film. */
.brand span, nav .brand span, footer span[style*="font-weight:700"] { display: inline !important; font-family: var(--sans) !important; font-style: normal !important; font-weight: 800 !important; font-size: 15px !important; letter-spacing: -.02em !important; color: var(--lime) !important; }
/* Hero footage: people and products from the film, toned down so the headline stays in front. */
.cinema-backdrop video { filter: saturate(.78) brightness(.6) contrast(1.06); }
::selection { background: var(--lime); color: #0a0b0a; }

/* Two wordings where a phone needs a shorter one */
.only-phone { display: none; }
@media (max-width: 700px) {
  .not-phone { display: none; }
  .only-phone { display: inline; }
}

/* Media: the way to the BeautyScale site, in the header and in the footer */
.nav-end { display: flex; align-items: center; gap: 10px; }
.nav-media { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font: 600 13px/1.2 var(--sans); color: #fff; text-decoration: none; transition: box-shadow .25s, color .25s; }
.nav-media:hover { box-shadow: inset 0 0 0 1px var(--lime); color: var(--lime); }
@media (max-width: 430px) {
  .nav-end { gap: 6px; }
  .nav-media { padding: 8px 11px; font-size: 12px; }
  nav .nav-end .btn-p { padding: 9px 13px !important; font-size: 12.5px !important; }
}
@media (max-width: 349px) { .nav-media { display: none; } }
.foot-media { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); font: 600 13px/1.2 var(--sans); color: #fff !important; text-decoration: none; transition: box-shadow .25s, color .25s; }
.foot-media svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot-media:hover { box-shadow: inset 0 0 0 1px var(--lime); color: var(--lime) !important; }

/* Hero: a little less air under the rating, on screens wider than a phone. The class is doubled so the rule also
   wins over the style layer the live page injects after the stylesheets. */
@media (min-width: 701px) {
  .design-preview .hero.hero { min-height: 660px; min-height: min(780px, 90svh); }
  .design-preview .hero .hero-grid.hero-grid { padding-bottom: 64px; }
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.btn.btn-ghost { background: rgba(10, 11, 10, .35); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--lime); }
.btn.btn-ghost svg { width: 13px; height: 13px; margin-right: 9px; fill: var(--lime); }

/* ── 2. The film ── */
.film-sec { padding: 26px 0 100px; }
.player { position: relative; overflow: hidden; width: min(100%, calc((100svh - 120px) * 16 / 9)); min-width: min(100%, 480px); margin-inline: auto; aspect-ratio: 16/9; border-radius: clamp(14px, 1.8vw, 24px); background: #000; box-shadow: 0 0 0 1px var(--hair-2), 0 60px 140px -50px rgba(196, 240, 0, .3); }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Play: a small pill in the corner. The whole picture stays clickable. */
.player__start { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; height: 100%; padding: clamp(10px, 1.4vw, 18px); border: 0; background: none; font: inherit; cursor: pointer; transition: opacity .4s; }
.player__cap { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 11px; border-radius: 999px; background: rgba(10, 11, 10, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; font: 600 12.5px/1 var(--sans); transition: background .3s, color .3s, box-shadow .3s; }
.player__cap svg { width: 11px; height: 11px; fill: var(--lime); transition: fill .3s; }
.player__cap i { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .25); font-style: normal; font-weight: 500; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; transition: color .3s, border-color .3s; }
@media (hover: hover) {
  .player__start:hover .player__cap { background: var(--lime); color: #0a0b0a; box-shadow: none; }
  .player__start:hover .player__cap svg { fill: #0a0b0a; }
  .player__start:hover .player__cap i { color: rgba(10, 11, 10, .65); border-color: rgba(10, 11, 10, .25); }
}
@media (max-width: 760px) {
  .player__start { padding: 8px; }
  .player__cap { gap: 6px; height: 26px; padding: 0 10px 0 9px; font-size: 11px; }
  .player__cap svg { width: 9px; height: 9px; }
  .player__cap i { padding-left: 6px; }
}
.player.is-live .player__start { opacity: 0; pointer-events: none; }
.player__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); padding: 34px clamp(10px, 1.6vw, 22px) clamp(8px, 1.1vw, 14px); background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .35s; }
.player.is-live .player__bar { opacity: 1; pointer-events: auto; }
.player.is-live.is-idle .player__bar { opacity: 0; pointer-events: none; }
.player.is-live.is-idle { cursor: none; }
.pb { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; background: none; color: #fff; cursor: pointer; }
.pb svg { width: 20px; height: 20px; fill: currentColor; }
.pb .i-play, .pb .i-off { display: none; }
.player:not(.is-playing) .pb--toggle .i-pause { display: none; }
.player:not(.is-playing) .pb--toggle .i-play { display: block; }
.player.is-muted .pb--mute .i-on { display: none; }
.player.is-muted .pb--mute .i-off { display: block; }
.player__seek { flex: 1; min-width: 0; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --p: 0%; }
.player__seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--lime) var(--p), rgba(255, 255, 255, .28) var(--p)); }
.player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: var(--lime); }
.player__seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.player__seek::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--lime); }
.player__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--lime); }
.player__end { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(12px, 1.8vw, 22px); padding: 20px; background: #0a0b0a; color: #fff; text-align: center; }
.player__end[hidden] { display: none; }
.player__end p { font: 700 clamp(22px, 3.4vw, 44px)/1.08 var(--sans); letter-spacing: -.04em; }
.player__again { border: 0; background: none; font: 500 14px var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* What the film proves: four outcomes, one line each */
.film-outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(100%, calc((100svh - 120px) * 16 / 9)); min-width: min(100%, 480px); margin: clamp(18px, 2vw, 26px) auto 0; padding: 0; list-style: none; }
.film-outs li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #111311; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .3s, transform .3s var(--ease); }
.film-outs i { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(196, 240, 0, .1); }
.film-outs i::after { content: ""; position: absolute; inset: 10px; background: var(--lime); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.film-outs p { min-width: 0; margin: 0; }
.film-outs b { display: block; font: 600 15px/1.25 var(--sans); letter-spacing: -.012em; color: #fff; }
.film-outs small { display: block; margin-top: 3px; font: 400 12.5px/1.35 var(--sans); color: var(--ink-2); }
@media (hover: hover) {
  .film-outs li:hover { box-shadow: inset 0 0 0 1px rgba(196, 240, 0, .5); transform: translateY(-2px); }
}
@media (max-width: 1100px) { .film-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .film-outs { gap: 8px; }
  .film-outs li { align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; }
  .film-outs i { width: 30px; height: 30px; border-radius: 10px; }
  .film-outs i::after { inset: 8px; }
  .film-outs b { font-size: 13.5px; }
  .film-outs small { font-size: 11.5px; }
}

/* ── 3. Platform: the feature explorer. Six named features on the left, one large close-up on the right. ── */
.fx { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); align-items: center; gap: clamp(28px, 4.4vw, 72px); }
.fx-group { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 6px; font: 700 11px/1.3 var(--sans); letter-spacing: 2.2px; text-transform: uppercase; color: #fff; }
.fx-group:first-child { margin-top: 0; }
.fx-group span { color: var(--lime); }
.fx-tab { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 14px; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--hair); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fx-ic { position: relative; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .06); transition: background .4s; }
.fx-ic::after { content: ""; position: absolute; inset: 11px; background: var(--ink-3); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; transition: background .4s; }
.fx-tab b { display: block; padding-top: 9px; font: 700 clamp(17px, 1.5vw, 20px)/1.2 var(--sans); letter-spacing: -.025em; color: #9ea39b; transition: color .4s; }
.fx-tab em { display: block; max-height: 0; overflow: hidden; opacity: 0; font: 400 14.5px/1.55 var(--sans); font-style: normal; color: var(--t2); transition: max-height .6s var(--ease), opacity .4s, margin .6s var(--ease); }
.fx-tab u { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.fx-tab:hover b, .fx-tab.is-on b { color: #fff; }
.fx-tab.is-on .fx-ic { background: rgba(196, 240, 0, .12); }
.fx-tab.is-on .fx-ic::after { background: var(--lime); }
.fx-tab.is-on em { max-height: 7em; margin: 6px 0 4px; opacity: 1; }
.fx-tab.is-on u { animation: fxRun 10s linear forwards; }
.fx.is-paused .fx-tab u { animation-play-state: paused; }
.fx.is-manual .fx-tab.is-on u { animation: none; transform: scaleX(1); }
@keyframes fxRun { to { transform: scaleX(1); } }

.fx-stage { display: grid; }
.fx-pane { grid-area: 1/1; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.985); transition: opacity .45s var(--ease), transform .7s var(--ease), visibility 0s .45s; }
.fx-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .1s, transform .8s var(--ease) .1s; }
.fx-cap { display: none; }
.fx-frame { container-type: inline-size; overflow: hidden; border-radius: 26px; background: radial-gradient(110% 80% at 50% 0%, rgba(196, 240, 0, .08), rgba(196, 240, 0, 0) 62%), #0f110f; box-shadow: inset 0 0 0 1px var(--hair-2), 0 50px 120px -50px rgba(196, 240, 0, .25); }
.fx-dots { display: none; }

@media (max-width: 1000px) {
  /* Phone and tablet: the six features one under the other, each with its title above its close-up. */
  .fx { display: block; }
  .fx-nav, .fx-dots { display: none; }
  .fx-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 22px; counter-reset: fx; }
  .fx-pane { grid-area: auto; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 16px; opacity: 1; visibility: visible; transform: none; counter-increment: fx; }
  .fx-frame { border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair-2), 0 30px 70px -50px rgba(196, 240, 0, .3); }
  .fx-cap { display: block; }
  .fx-cap span { display: flex; align-items: center; gap: 10px; font: 700 11px/1.3 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--lime); }
  .fx-cap span::before { content: "0" counter(fx); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(196, 240, 0, .12); letter-spacing: 0; font-size: 12px; }
  .fx-cap h3 { margin: 12px 0 0; font: 700 22px/1.2 var(--sans); letter-spacing: -.03em; color: #fff; }
  .fx-cap p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--t2); }
}
@media (max-width: 700px) {
  .fx-stage { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Product close-ups: small working screens. Everything inside is sized in em and the em follows the frame's width
   (--u), so each one scales like a picture. Narrow frames get a taller format and drop the extras (.mk-x).
   Tabs, filters and buttons answer to clicks; assets/widgets.js also plays a short demonstration with them. */
.mock { --u: 3.2cqw; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: .65em; width: 100%; aspect-ratio: 4/3; padding: 1.4em 1.6em; color: #fff; font: 400 12px/1.35 var(--sans); font-size: var(--u); text-align: left; -webkit-user-select: none; user-select: none; }
.mock ul, .mock ol { margin: 0; padding: 0; list-style: none; }
.mock p { max-width: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.mock i, .mock em, .mock u { font-style: normal; text-decoration: none; }
.mock em { color: inherit; }
.mock small { display: block; font-size: .68em; font-weight: 400; color: var(--ink-2); }
.mock b { font-weight: 600; color: inherit; }
.mock [hidden] { display: none !important; }
.mock [data-tab], .mock [data-go], .mock [data-filter], .mock [data-do] { cursor: pointer; }
.c-lime { color: var(--lime); } .c-rose { color: var(--roseate); } .c-violet { color: var(--violet); } .c-amber { color: var(--amber); }
.mk-spark { flex: none; width: 1em; height: 1em; background: var(--violet); -webkit-mask: var(--i-spark) center/contain no-repeat; mask: var(--i-spark) center/contain no-repeat; }
.mk-bar { display: flex; align-items: center; gap: .55em; font-size: .9em; }
.mk-bar > small { font-size: .76em; }
.mk-line { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.mk-title { font-size: .9em; }
.mk-tag { flex: none; margin-left: auto; padding: .28em .7em; border-radius: 99em; background: rgba(255, 255, 255, .08); font-size: .68em; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.mk-tag b { color: #fff; }
.mk-tag--lime { background: rgba(196, 240, 0, .14); color: var(--lime); }
.mk-tag--amber { background: rgba(255, 180, 84, .14); color: var(--amber); }
.mk-tag--rose { background: rgba(255, 122, 156, .14); color: var(--roseate); }
.mk-tag--violet { background: rgba(193, 138, 250, .16); color: var(--violet); }
.mk-btn { position: relative; flex: none; display: inline-grid; padding: .5em .95em; border-radius: 99em; background: var(--lime); color: #0a0b0a; font-size: .68em; font-weight: 600; white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.mk-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--hair-2); }
.mk-btn > span, .mk-swap > span { grid-area: 1/1; text-align: center; }
.mk-btn .b, .mk-swap .b { visibility: hidden; }
.is-done > .a { visibility: hidden; }
.is-done > .b { visibility: visible; }
.mk-btn.is-done { background: rgba(196, 240, 0, .14); color: var(--lime); box-shadow: none; }
@media (hover: hover) {
  .mk-btn--ghost[data-do]:not(.is-done):hover { box-shadow: inset 0 0 0 1px var(--lime); }
}
.mk-av { flex: none; display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .56em; font-weight: 700; font-style: normal; }
/* a contact with a photo */
.mk-av--ph { overflow: hidden; background: none; }
.mk-av--ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Account marks: one tile per account, generated from the company's own logo */
.mk-logo { flex: none; display: block; width: calc(var(--u) * 2); height: calc(var(--u) * 2); overflow: hidden; border-radius: calc(var(--u) * .55); background: #fff; }
.mk-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-logo--lg { width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); border-radius: calc(var(--u) * .75); }
/* a wordmark keeps its width */
.mk-logo--wide { width: calc(var(--u) * 7.4); height: calc(var(--u) * 2.9); border-radius: calc(var(--u) * .75); }
.mk-logo--wide img { object-fit: contain; }
.mk-ico { position: relative; flex: none; width: 1.9em; height: 1.9em; border-radius: .55em; background: rgba(255, 255, 255, .07); }
.mk-ico::after { content: ""; position: absolute; inset: .45em; background: var(--lime); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.mk-ico--lime { background: rgba(196, 240, 0, .12); }
.mk-ico--amber { background: rgba(255, 180, 84, .14); } .mk-ico--amber::after { background: var(--amber); }
.mk-ico--rose { background: rgba(255, 122, 156, .14); } .mk-ico--rose::after { background: var(--roseate); }
.mk-ico--violet { background: rgba(193, 138, 250, .14); } .mk-ico--violet::after { background: var(--violet); }
.mk-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 1.3em; height: 1.3em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.6L10.4 19z' fill='%23fff' stroke='%230a0b0a' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; opacity: 0; pointer-events: none; }
.mk-foot { display: flex; align-items: center; gap: .45em; font-size: .68em !important; color: var(--violet) !important; }
.mk-swap { display: grid; }
.mk-swap > span { display: flex; align-items: center; gap: .45em; text-align: left; }
.mk-swap .b { color: var(--lime); }
.mk-note { display: flex; align-items: center; gap: .45em; font-size: .68em !important; color: var(--ink-2) !important; }

/* Filters and choices: the lit one is the one in use */
.mk-chips { display: flex; flex-wrap: wrap; gap: .4em; font-size: .66em; }
.mk-chips li { display: flex; gap: .45em; padding: .38em .8em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink-2); white-space: nowrap; transition: background .25s, box-shadow .25s, color .25s; }
.mk-chips li b { color: #fff; font-variant-numeric: tabular-nums; }
.mk-chips--pick li.is-on { background: rgba(196, 240, 0, .12); box-shadow: inset 0 0 0 1px var(--lime); color: #fff; }

/* Lists. A row that comes into view slides in after the one above it. */
.mk-rows { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .42em; }
.mk-rows li { display: flex; align-items: center; gap: .7em; padding: .5em .7em; border-radius: .7em; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--hair); }
.mock > .mk-rows li, .mk-duo > .mk-rows li, .mk-panel.is-on .mk-rows li { animation: mkRow .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.mk-rows li:nth-child(2) { --i: 1; } .mk-rows li:nth-child(3) { --i: 2; } .mk-rows li:nth-child(4) { --i: 3; }
.mk-rows p { flex: 1; min-width: 0; }
.mk-rows p b { display: block; overflow: hidden; font-size: .8em; white-space: nowrap; text-overflow: ellipsis; }
.mk-rows p small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-rows li > .mk-btn, .mk-rows li > .mk-tag { min-width: 5.8em; margin-left: 0; text-align: center; }
@keyframes mkRow { from { opacity: 0; transform: translateY(.7em); } }
@keyframes mkGrow { from { transform: scaleX(0); } }
@keyframes mkRise { from { transform: scaleY(0); } }

/* Tabs and their panels: one panel on screen at a time */
.mk-panels { flex: 1 1 auto; min-height: 0; display: grid; }
.mk-panel { grid-area: 1/1; min-width: 0; min-height: 0; display: none; flex-direction: column; gap: .65em; }
.mk-panel.is-on { display: flex; animation: mkRow .4s var(--ease) backwards; }

/* 01 Account */
.mk-acc { display: flex; align-items: center; gap: .7em; }
.mk-acc > div { flex: 1; min-width: 0; }
.mk-acc > div > b { display: block; font-size: 1.05em; letter-spacing: -.02em; }
.mk-acc > div > span { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .3em; }
.mk-acc u { padding: .2em .6em; border-radius: 99em; background: rgba(255, 255, 255, .08); font-size: .62em; color: var(--ink-2); white-space: nowrap; }
.mk-tabs { display: flex; gap: 1.2em; border-bottom: 1px solid var(--hair); font-size: .7em; color: var(--ink-3); }
.mk-tabs li { position: relative; display: flex; gap: .4em; padding-bottom: .6em; white-space: nowrap; transition: color .25s; }
.mk-tabs li b { font-weight: 500; color: var(--ink-3); }
.mk-tabs li.is-on, .mk-tabs li:hover { color: #fff; }
.mk-tabs li.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lime); }
.mk-brief { padding: .7em .9em; border-radius: .8em; background: rgba(193, 138, 250, .08); box-shadow: inset 0 0 0 1px rgba(193, 138, 250, .4); }
.mk-h { display: flex; align-items: center; gap: .45em; font-size: .64em !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--violet) !important; }
.mk-brief > p:nth-child(2) { margin-top: .4em; font-size: .8em !important; line-height: 1.45 !important; }
.mk-brief > div { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .5em; padding-top: .5em; border-top: 1px solid rgba(193, 138, 250, .22); }
.mk-next { min-width: 0; }
.mk-next small { font-size: .6em; letter-spacing: .04em; text-transform: uppercase; }
.mk-next b { display: block; font-size: .76em; }
.mk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em; margin-top: auto !important; }
.mk-tiles li { display: flex; align-items: center; gap: .65em; padding: .55em .7em; border-radius: .75em; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .25s, background .25s; }
.mk-tiles li:hover { background: rgba(196, 240, 0, .07); box-shadow: inset 0 0 0 1px rgba(196, 240, 0, .5); }
.mk-tiles p { min-width: 0; }
.mk-tiles b { display: block; overflow: hidden; font-size: .76em; white-space: nowrap; text-overflow: ellipsis; }
.mk-tiles small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* emails: who and when, then the subject and the first words */
.mk-mails p b { display: inline; overflow: visible; font-size: inherit; }
.mk-mails p > small b { color: #fff; }
.mk-mails p > span { display: block; overflow: hidden; margin-top: .1em; font-size: .74em; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.mk-mails p > span b { margin-right: .6em; color: #fff; }
/* contacts: email, phone, LinkedIn */
.mk-contacts li { padding-block: .42em; }
.mk-reach { flex: none; display: grid; gap: .3em; font-size: .62em; color: var(--ink-2); }
.mk-reach > span { display: flex; align-items: center; gap: .5em; white-space: nowrap; }
.mk-reach i { flex: none; width: 1.05em; height: 1.05em; background: var(--lime); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.mk-reach img { width: 1.05em; height: 1.05em; margin-left: .7em; }

/* 02 Reorders: account, last order and due date, stock left, suggested amount */
.mock .mk-kpi { display: flex; align-items: baseline; gap: .6em; margin-left: auto; }
.mk-kpi b { font-size: 1.15em; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk-reorders p > span:first-child { display: flex; align-items: baseline; gap: .6em; min-width: 0; }
.mk-reorders p b { flex: none; max-width: 100%; }
.mk-reorders p small { flex: 1; min-width: 0; font-size: .62em; }
.mk-when { display: flex; align-items: center; gap: 1em; margin-top: .22em; font-size: .62em; color: var(--ink-2); white-space: nowrap; }
.mk-when em { display: flex; align-items: center; gap: .45em; }
.mk-due--red { color: var(--red); } .mk-due--amber { color: var(--amber); }
.mk-stock i { position: relative; width: 3.4em; height: .5em; overflow: hidden; border-radius: 99em; background: rgba(255, 255, 255, .12); }
.mk-stock i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cc, var(--lime)); transform-origin: 0 50%; transform: scaleX(var(--c)); animation: mkGrow .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + .15s); }
.mk-val { flex: none; width: 3.3em; text-align: right; }
.mk-val b { display: block; font-size: .8em; font-variant-numeric: tabular-nums; }
.mk-val small { font-size: .56em; }
.mk-rows li.is-drafted { box-shadow: inset 0 0 0 1px rgba(196, 240, 0, .45); }

/* 03 Buyers: the question, the matches, and who to talk to at the one you pick */
.mk-search { display: flex; align-items: center; gap: .6em; padding: .55em .6em .55em .9em; border-radius: .9em; background: rgba(193, 138, 250, .08); box-shadow: inset 0 0 0 1px rgba(193, 138, 250, .4); }
.mk-search p { flex: 1; min-width: 0; overflow: hidden; font-size: .86em !important; white-space: nowrap; }
.mk-duo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .55em; }
.mk-rows--pick { gap: .32em; }
.mk-rows--pick li { gap: .55em; padding: .26em .55em; transition: background .25s, box-shadow .25s; }
.mk-rows--pick .mk-logo { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: calc(var(--u) * .4); }
.mk-rows--pick p { line-height: 1.25; }
.mk-rows--pick p b { font-size: .7em; }
.mk-rows--pick p small { font-size: .56em; }
.mk-rows--pick li.is-on { background: rgba(196, 240, 0, .08); box-shadow: inset 0 0 0 1px rgba(196, 240, 0, .6); }
.mk-fit { flex: none; min-width: 2.9em; padding: .3em .5em; border-radius: .45em; background: rgba(196, 240, 0, .12); color: var(--lime); font-size: .62em; font-weight: 600; text-align: center; transition: background .3s, color .3s; }
.is-added .mk-fit { background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.4' fill='none' stroke='%230a0b0a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1.2em no-repeat; color: transparent; }
.mk-card { gap: .5em; padding: .8em .9em; border-radius: .9em; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hair-2); }
.mk-card-h { display: flex; align-items: center; gap: .6em; }
.mk-card-h p { min-width: 0; }
.mk-card-h b { display: block; font-size: .88em; line-height: 1.15; letter-spacing: -.02em; }
.mk-card-h small { font-size: .56em; white-space: nowrap; }
.mk-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.mk-facts li { display: flex; align-items: baseline; gap: .4em; padding: .3em .6em; border-radius: .6em; background: rgba(255, 255, 255, .05); }
.mk-facts b { font-size: .9em; letter-spacing: -.02em; color: var(--lime); }
.mk-facts small { font-size: .56em; white-space: nowrap; }
/* a person of the company: photo or initials, the name on a full line, then the role and the channels */
.mk-people li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .55em; padding: .26em 0; border-top: 1px solid var(--hair); line-height: 1.2; }
.mk-people .mk-av { grid-row: 1 / span 2; width: 2.7em; height: 2.7em; font-size: .5em; }
.mock .mk-people p { display: contents; }
.mk-people b { grid-column: 2 / 4; font-size: .66em; font-weight: 600; white-space: nowrap; }
.mk-people small { grid-column: 2; font-size: .54em; white-space: nowrap; }
.mk-people span { grid-column: 3; grid-row: 2; }
.mk-people span { flex: none; display: flex; align-items: center; gap: .4em; }
.mk-people span i { width: .85em; height: .85em; background: var(--lime); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.mk-people span img { width: .85em; height: .85em; }
.mk-card > .mk-btn { margin-top: auto; padding: .65em .95em; font-size: .72em; }

/* 04 Campaign: pick a step to read its message. An email, a LinkedIn note and a WhatsApp message do not look alike. */
.mk-seq { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; }
.mk-seq::before, .mk-seq::after { content: ""; position: absolute; left: 10%; right: 10%; top: 1.1em; height: 2px; background: var(--hair-2); }
.mk-seq::after { background: var(--lime); transform-origin: 0 50%; transform: scaleX(var(--run, 1)); }
.mk-seq li { position: relative; z-index: 1; display: grid; justify-items: center; gap: .3em; }
.mk-seq i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #0f110f; box-shadow: 0 0 0 2px var(--lime); transition: box-shadow .3s, background .3s; }
.mk-seq img { width: 1.1em; height: 1.1em; object-fit: contain; }
.mk-seq b { font-size: .68em; font-weight: 500; color: var(--ink-3); transition: color .3s; }
.mk-seq .is-on i { background: #26300a; box-shadow: 0 0 0 2px var(--lime), 0 0 0 .42em rgba(196, 240, 0, .16); }
.mk-seq .is-on b { color: #fff; }
.mk-msg { gap: .4em; padding: .65em .9em; border-radius: .8em; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--hair); }
.mk-msg .mk-h small { margin-left: auto; font-size: 1em; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.mk-msg .mk-h img { width: 1.5em; height: 1.5em; margin-left: .5em; }
.mk-to { display: flex; align-items: center; gap: .7em; padding-bottom: .34em; border-bottom: 1px solid var(--hair); font-size: .68em !important; }
.mk-to small { flex: none; width: 4.4em; font-size: 1em; color: var(--ink-3); }
/* an email reads like an email: recipient and subject, greeting, text, signature, what is attached */
.mm-head { display: grid; }
.mock .mm-head p { display: flex; align-items: baseline; gap: .7em; padding-bottom: .24em; margin-bottom: .24em; border-bottom: 1px solid var(--hair); font-size: .64em; white-space: nowrap; }
.mm-head small { flex: none; width: 4.4em; font-size: 1em; color: var(--ink-3); }
.mm-head b { font-weight: 600; color: #fff; }
.mm-head span { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; }
.mm-body { display: grid; gap: .3em; }
.mock .mm-body p { font-size: .62em; line-height: 1.45; color: #dcdfd8; }
.mm-body b { font-weight: 600; color: #fff; }
.mk-msg--mail { position: relative; }
/* what is attached sits on the right of the recipient and subject lines, where an email client shows it */
.mock .mm-att { position: absolute; right: .9em; top: 2.5em; display: flex; align-items: center; gap: .55em; padding: .28em .8em .28em .3em; border-radius: .7em; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair); font-size: .6em; color: #fff; }
.mm-att .mo-tool { width: 1.85em; height: 1.85em; border-radius: .45em; }
.mm-att .mo-tool--wide { width: 2.9em; }
.mk-body { font-size: .74em !important; line-height: 1.5 !important; color: #e6e8e3 !important; }
.mk-sign { font-size: .62em !important; color: var(--ink-2) !important; }
.mk-sign b { color: #fff; }
.mock .mk-bubble { align-self: flex-end; max-width: 78%; margin-block: auto; padding: .6em .85em .45em; border-radius: 1.1em 1.1em .3em 1.1em; font-size: .84em !important; line-height: 1.45 !important; color: #fff !important; }
.mk-bubble small { margin-top: .35em; font-size: .7em; text-align: right; color: rgba(255, 255, 255, .7); }
.mk-msg--li { background: rgba(10, 102, 194, .12); box-shadow: inset 0 0 0 1px rgba(64, 146, 228, .5); }
.mk-msg--li .mk-h { color: #74b6f7 !important; } .mk-msg--li .mk-spark { background: #74b6f7; }
.mk-msg--li .mk-bubble { background: #0a66c2; }
.mk-msg--wa { background: rgba(37, 211, 102, .08); box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .42); }
.mk-msg--wa .mk-h { color: #4be08b !important; } .mk-msg--wa .mk-spark { background: #4be08b; }
.mk-msg--wa .mk-bubble { background: #075e54; }
.mk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45em; }
.mk-kpis li { padding: .38em .75em; border-radius: .75em; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--hair); }
.mk-kpis b { display: block; font-size: 1.05em; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mk-kpis .is-lime { background: rgba(196, 240, 0, .1); box-shadow: inset 0 0 0 1px rgba(196, 240, 0, .4); }
.mk-kpis .is-lime b { color: var(--lime); }

/* 05 Today: a conversation. The question, the answer, then each follow up with the action it prepared. */
.mk-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .5em; }
.mk-chat .mk-panels { flex: 0 0 auto; }
.mk-chat .mk-panel { gap: .5em; }
.mock .mk-me { align-self: flex-end; max-width: 80%; padding: .45em .9em; border-radius: 1.1em 1.1em .3em 1.1em; background: rgba(193, 138, 250, .16); box-shadow: inset 0 0 0 1px rgba(193, 138, 250, .4); font-size: .8em; font-weight: 500; }
.mock .mk-ai { align-self: flex-start; max-width: 86%; padding: .5em .9em; border-radius: 1.1em 1.1em 1.1em .3em; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair); font-size: .76em; line-height: 1.45; }
.mk-act { display: flex; align-items: center; gap: .7em; padding: .55em .7em; border-radius: .8em; background: rgba(196, 240, 0, .06); box-shadow: inset 0 0 0 1px rgba(196, 240, 0, .35); }
.mk-act p { flex: 1; min-width: 0; }
.mk-act b { display: block; font-size: .8em; }
.mk-act small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-panel.is-on > .mk-ai { animation: mkRow .45s var(--ease) .55s backwards; }
.mk-panel.is-on > .mk-act { animation: mkRow .45s var(--ease) 1.15s backwards; }

/* 06 Orders and sales: one order from the order form to the payment, then the analytics of the period you pick */
.mk-switch { display: flex; gap: .2em; padding: .2em; border-radius: 99em; background: rgba(255, 255, 255, .07); font-size: .76em; }
.mk-switch li { padding: .42em 1em; border-radius: 99em; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s; }
.mk-switch li.is-on { background: var(--lime); color: #0a0b0a; }
.mk-switch + small { margin-left: auto; }
.mk-order { display: flex; align-items: center; gap: .7em; padding: .5em .7em; border-radius: .8em; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--hair); }
.mk-order p { flex: 1; min-width: 0; }
.mk-order b { display: block; font-size: .86em; }
.mk-duo--flow { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.mk-steps { position: relative; display: grid; align-content: space-between; }
.mk-steps::before { content: ""; position: absolute; left: 1.14em; top: 1em; bottom: 1em; width: 1.5px; background: var(--hair-2); }
.mk-steps li { position: relative; display: flex; align-items: center; gap: .6em; padding: .34em .6em; border-radius: .6em; transition: background .25s, box-shadow .25s; }
.mk-steps li.is-on { background: rgba(196, 240, 0, .08); box-shadow: inset 0 0 0 1px rgba(196, 240, 0, .5); }
.mk-steps i { flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; background: #171916; box-shadow: inset 0 0 0 1.5px #4a4e47; transition: background .3s, box-shadow .3s; }
.mk-steps .is-done i { background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.3l2 2 4-4.4' fill='none' stroke='%230a0b0a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat; box-shadow: none; }
.mk-steps b { flex: 1; min-width: 0; font-size: .74em; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color .3s; }
.mk-steps .is-done b { color: #fff; }
.mk-steps small { font-size: .58em; white-space: nowrap; }
.mk-sheet { gap: .45em; padding: .8em .9em; border-radius: .9em; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hair-2); }
.mk-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.mk-sheet-h b { font-size: .92em; letter-spacing: -.02em; }
.mk-sheet > small { font-size: .62em; }
/* the tools a step talks to (Excel, PDF, Gmail, Stripe, DHL, UPS): its tile, then what was done with it */
.mo-tool { flex: none; display: block; width: 1.8em; height: 1.8em; border-radius: .46em; }
.mo-tool--plain { padding: .32em; background: #fff; }
.mo-tool--wide { width: 2.85em; }
.mock .mk-via { display: flex; align-items: center; gap: .6em; padding: .36em .55em; border-radius: .65em; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair); }
.mk-via span { display: grid; min-width: 0; line-height: 1.25; }
.mk-via b { overflow: hidden; font-size: .72em; white-space: nowrap; text-overflow: ellipsis; }
.mk-via small { overflow: hidden; font-size: .58em; white-space: nowrap; text-overflow: ellipsis; }
.mk-panel.is-on .mk-via { animation: mkRow .45s var(--ease) .12s backwards; }
.mk-panel.is-on .mk-via + .mk-via { animation-delay: .24s; }
.mk-sheet ul { margin-top: .3em !important; }
.mk-sheet li { display: flex; justify-content: space-between; gap: .8em; padding: .55em 0; border-top: 1px solid var(--hair); font-size: .72em; color: var(--ink-2); }
.mk-sheet li b { color: #fff; white-space: nowrap; }
.mk-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45em; }
.mk-figs li { padding-left: .7em; border-left: 2px solid var(--hair-2); }
.mk-figs li:first-child { border-left-color: var(--lime); }
.mk-figs small { font-size: .58em; white-space: nowrap; }
.mk-figs b { display: block; font-size: 1.25em; font-weight: 700; letter-spacing: -.04em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mk-figs em { display: block; font-size: .56em; color: var(--ink-3); white-space: nowrap; }
.mk-figs em.c-lime { color: var(--lime); }
.mk-plot { position: relative; flex: 1; min-height: 0; display: flex; padding: 1.7em .8em .45em; border-radius: .9em; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hair); }
.mk-bars { flex: 1; min-height: 0; display: flex; gap: .3em; }
.mk-bars li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.mk-bars li > span { position: relative; flex: 1; min-height: 0; border-bottom: 1px solid var(--hair-2); }
.mk-bars i { position: absolute; left: 12%; bottom: 0; width: 34%; height: var(--h); border-radius: .18em .18em 0 0; background: var(--lime); transform-origin: 50% 100%; }
.mk-bars i.is-out { left: 54%; background: var(--violet); }
.mk-panel.is-on .mk-bars i { animation: mkRise .7s var(--ease) backwards; animation-delay: calc(var(--n) * 40ms); }
.mk-bars small { font-size: .5em; text-align: center; color: var(--ink-3); white-space: nowrap; }
.mk-legend { position: absolute; top: .65em; right: .9em; display: flex; gap: 1.1em; font-size: .56em !important; color: var(--ink-2) !important; }
.mk-legend span { display: flex; align-items: center; gap: .45em; }
.mk-legend i { width: .75em; height: .75em; border-radius: .2em; background: var(--lime); }
.mk-legend i.is-out { background: var(--violet); }

@container (max-width: 520px) {
  /* a phone gets its own version: larger type, taller frame, fewer details */
  .mock { --u: 4.9cqw; aspect-ratio: 1/1.3; padding: 1.15em; }
  .mock .mk-x { display: none !important; }
  .mk-logo--wide { width: calc(var(--u) * 5.2); height: calc(var(--u) * 2.1); }
  .mk-tabs { gap: .9em; font-size: .68em; }
  .mk-tabs li b { display: none; }
  .mk-tiles .mk-ico { display: none; }
  .mk-tiles b { font-size: .72em; }
  .mk-rows li { gap: .55em; padding: .5em .6em; }
  .mk-chips { font-size: .6em; }
  .mk-chips li { padding: .36em .68em; }
  .mk-search p { font-size: .74em !important; }
  .mk-search .mk-btn { display: none; }
  .mk-search { padding-block: .7em; }
  .mk-reach { font-size: .56em; }
  .mk-reorders p small { display: none; }
  /* the list above, and the company you picked as one line under it */
  .mk-duo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: space-between; }
  .mk-card { flex-direction: row; align-items: center; justify-content: space-between; padding: .6em .7em; }
  .mk-card > .mk-btn { margin-top: 0; }
  .mk-rows--pick li { padding: .24em .5em; }
  .mk-act { flex-wrap: wrap; }
  .mk-act small { white-space: normal; }
  .mk-act .mk-btn { margin-left: auto; }
  /* the seven steps on one line, the step you picked under them */
  .mk-steps { display: flex; justify-content: space-between; }
  .mk-steps::before { left: 1em; right: 1em; top: 50%; bottom: auto; width: auto; height: 1.5px; }
  .mk-steps li { padding: .3em; border-radius: 50%; }
  .mk-steps b, .mk-steps small { display: none; }
  .mk-steps i { width: 1.5em; height: 1.5em; }
  .mk-kpis { gap: .35em; }
  .mk-kpis li { padding-inline: .5em; }
  .mk-kpis b { font-size: 1em; }
  .mk-figs b { font-size: 1.12em; }
  .mock .mk-bubble { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .mock .mk-rows li, .mk-panel.is-on, .mk-stock i::after, .mk-panel.is-on .mk-bars i { animation: none; }
}

/* ── 4. Old way versus BeautyScale way. A brand team at work stays in the background. ── */
#compare { position: relative; overflow: hidden; isolation: isolate; }
.cmp-photo { position: absolute; inset: 0; z-index: -1; background: url("../posters/team.jpg") center 26% / cover no-repeat; }
.cmp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0c0b 0%, rgba(11, 12, 11, .74) 18%, rgba(11, 12, 11, .6) 46%, rgba(11, 12, 11, .88) 80%, #0b0c0b 100%); }
#compare .sw-card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#compare .sw-old { background: rgba(18, 19, 17, .8); }
#compare .sw-new { background: radial-gradient(circle at 80% 0%, rgba(196, 240, 0, .14), transparent 45%), rgba(15, 16, 14, .84); }
@media (max-width: 820px) { .cmp-photo { background-image: url("../posters/team-m.jpg"); background-position: 50% 12%; } }
/* phone table: a little more room so that no category word breaks in the middle */
.swm-category { padding-inline: 5px; letter-spacing: -.02em; }
/* Old way versus BeautyScale way: neutral greys and red crosses on one side, lime on the other ── */
.sw-old .sw-lbl { color: rgba(255, 255, 255, .42); }
.sw-old .sw-h { color: rgba(255, 255, 255, .82); }
.sw-old .sw-k { color: rgba(255, 255, 255, .88); }
.sw-old .sw-v { color: rgba(255, 255, 255, .52); }
.sw-old .sw-ic svg { stroke: #ff6464; }
.sw-new .sw-ic svg { stroke: var(--lime); }
.sw-new .sw-v { color: rgba(255, 255, 255, .8); }

/* ── 5. Buyer database: two spotlight widgets. One figure in focus at a time, the bar lights its share.
      The first one is lime, the second one rose. ── */
.spot { --acc: var(--lime); --acc-rgb: 196, 240, 0; position: relative; margin: 0; padding: 22px 24px 20px; border-radius: 20px; background: #111311; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.spot--rose { --acc: var(--roseate); --acc-rgb: 255, 122, 156; }
.spot figcaption, .spot__title { display: block; font: 700 11px/1.3 var(--sans); letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
/* Fallback list (before the script runs, or without it) */
.spot > ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.spot > ul li { display: flex; justify-content: space-between; gap: 12px; }
.spot > ul b { color: #fff; font-variant-numeric: tabular-nums; }
.spot__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.spot__share { font: 600 13px/1 var(--sans); color: var(--acc); font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius: 999px; background: rgba(var(--acc-rgb), .12); }
.spot__num { display: block; margin-top: 18px; font: 700 clamp(40px, 4.4vw, 60px)/1 var(--sans); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.spot__label { display: block; height: 22px; margin-top: 8px; overflow: hidden; font: 500 15px/22px var(--sans); color: var(--ink-2); }
.spot__label span { display: block; }
.spot__bar { display: flex; gap: 4px; height: 12px; margin-top: 22px; }
.spot__seg { flex: var(--v) 1 0; min-width: 6px; padding: 0; border: 0; border-radius: 4px; background: rgba(var(--acc-rgb), .2); cursor: pointer; transform-origin: 0 50%; transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.spot__seg.is-on { background: var(--acc); animation: spotGlow 2s ease-in-out infinite; }
@keyframes spotGlow { 0%, 100% { box-shadow: 0 0 14px rgba(var(--acc-rgb), .35); } 50% { box-shadow: 0 0 26px rgba(var(--acc-rgb), .7); } }
/* the categories sit on one line; only a phone lets them wrap */
.spot__keys { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 18px; }
.spot__key { white-space: nowrap; }
.spot__key { padding: 7px 11px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--hair); font: 500 12.5px/1 var(--sans); color: var(--ink-3); cursor: pointer; transition: color .35s, box-shadow .35s, background .35s; }
.spot__key.is-on { color: #fff; background: rgba(var(--acc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .6); }
@media (max-width: 760px) {
  .spot { padding: 18px 18px 16px; border-radius: 16px; }
  .spot__keys { flex-wrap: wrap; gap: 6px; }
  .spot__key { padding: 6px 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .spot__seg.is-on { animation: none; } }

/* ── 6. Implementation: four steps on one line. What happens, who does it, how long it takes. ── */
.impl { position: relative; overflow: hidden; isolation: isolate; }
/* the team at work, from the film, kept in the background */
.impl-photo { position: absolute; inset: 0; z-index: -1; background: url("../posters/onboarding.jpg") center 28% / cover no-repeat; }
.impl-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0c0b 0%, rgba(11, 12, 11, .78) 22%, rgba(11, 12, 11, .62) 48%, rgba(11, 12, 11, .86) 78%, #0b0c0b 100%); }
.impl-head { max-width: 860px; margin: 0 auto; text-align: center; }
.impl-head .eyebrow { justify-content: center; }
.impl-steps { --node: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: clamp(40px, 4.6vw, 64px) 0 0; padding: 28px 30px 32px; border-radius: 24px; background: rgba(11, 12, 11, .66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--hair-2); list-style: none; }
.impl-steps li { --c: var(--lime); --c-rgb: 196, 240, 0; position: relative; }
.impl-steps li:nth-child(even) { --c: var(--roseate); --c-rgb: 255, 122, 156; }
/* Each step carries the stretch of line that leads to the next one. */
.impl-steps li::before, .impl-steps li::after { content: ""; position: absolute; left: var(--node); top: 57px; width: calc(100% + 24px - var(--node)); height: 2px; background: rgba(255, 255, 255, .12); }
.impl-steps li::after { background: linear-gradient(90deg, var(--lime), var(--roseate)); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.impl-steps li:nth-child(even)::after { background: linear-gradient(90deg, var(--roseate), var(--lime)); }
.impl-steps li:last-child::before, .impl-steps li:last-child::after { content: none; }
.impl-when { display: block; height: 34px; font: 700 11px/1.3 var(--sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--c); transition: color .5s; }
.impl-node { position: relative; z-index: 1; display: block; width: var(--node); height: var(--node); border-radius: 15px; background: #131510; box-shadow: inset 0 0 0 1.5px var(--c), 0 0 24px rgba(var(--c-rgb), .22); transition: box-shadow .5s var(--ease); }
.impl-node::after { content: ""; position: absolute; inset: 13px; background: var(--c); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; transition: background .5s; }
.impl-steps h3 { margin: 22px 0 0; font: 700 clamp(19px, 1.7vw, 23px)/1.2 var(--sans); letter-spacing: -.03em; color: #fff; transition: opacity .6s; }
.impl-steps p { max-width: 27ch; margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--t2); transition: opacity .6s; }
/* While the steps wait for their turn */
.impl-steps.is-armed li:not(.is-on) .impl-node { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.impl-steps.is-armed li:not(.is-on) .impl-node::after { background: rgba(255, 255, 255, .35); }
.impl-steps.is-armed li:not(.is-on) .impl-when { color: rgba(255, 255, 255, .35); }
.impl-steps.is-armed li:not(.is-on) :is(h3, p) { opacity: .38; }
.impl-steps.is-armed li:not(.is-done)::after { transform: scaleX(0); }
.impl-cta { display: flex; justify-content: center; margin-top: clamp(40px, 4.6vw, 64px); }
@media (max-width: 820px) {
  /* Phone: the same line, turned upright. */
  .impl-photo { background-image: url("../posters/onboarding-m.jpg"); background-position: 62% 20%; }
  .impl-steps { --node: 42px; grid-template-columns: minmax(0, 1fr); gap: 30px 0; padding: 24px 18px 26px 78px; border-radius: 20px; }
  .impl-steps li::before, .impl-steps li::after { left: -40px; top: var(--node); width: 2px; height: calc(100% + 30px - var(--node)); }
  .impl-steps li::after { background: linear-gradient(180deg, var(--lime), var(--roseate)); transform-origin: 50% 0; }
  .impl-steps li:nth-child(even)::after { background: linear-gradient(180deg, var(--roseate), var(--lime)); }
  .impl-steps.is-armed li:not(.is-done)::after { transform: scaleY(0); }
  .impl-node { position: absolute; left: -60px; top: 0; border-radius: 13px; }
  .impl-node::after { inset: 11px; }
  .impl-when { height: 26px; line-height: 26px; }
  .impl-steps h3 { margin-top: 4px; }
  .impl-steps p { max-width: none; }
}

/* FAQ: the brand team at work, from the film, behind the questions; kept dark so the text stays in front */
#faq { position: relative; overflow: hidden; isolation: isolate; }
.faq-video { position: absolute; inset: 0; z-index: -1; background: #0b0c0b; }
.faq-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.75) brightness(.62); }
.faq-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0c0b 0%, rgba(11, 12, 11, .76) 16%, rgba(11, 12, 11, .7) 50%, rgba(11, 12, 11, .88) 84%, #0b0c0b 100%); }

/* ── 7. Testimonials: the category of the brand, in the corner of each card ── */
.rvw-card { position: relative; }
.rvw-cat { position: absolute; top: 24px; right: 28px; padding: 5px 10px; border-radius: 999px; background: rgba(196, 240, 0, .1); font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
@media (max-width: 1000px) { .rvw-cat { top: 20px; right: 24px; } }
@media (max-width: 640px) { .rvw-cat { top: 18px; right: 22px; } }

/* ── 8. Phone. Under 700 px the new sections get a layout of their own rather than a smaller desktop. ── */
@media (max-width: 700px) {
  /* hero: short text, the two buttons side by side, the rating in full, no empty screen under it */
  .design-preview .hero.hero { min-height: 0; }
  .design-preview .hero .hero-grid.hero-grid { padding: 104px 18px 30px; }
  .design-preview .hero .lead.lead { max-width: 34ch; margin-bottom: 20px; font-size: 15px; line-height: 1.5; }
  .design-preview .hero-cta.hero-cta { flex-direction: row; flex-wrap: nowrap; gap: 8px; width: 100%; margin-bottom: 18px; }
  .design-preview .hero-cta .btn.btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 11px 8px; font-size: 13px; white-space: nowrap; }
  .design-preview .hero-cta .btn.btn-ghost svg { margin-right: 6px; }
  .design-preview .hero-proof .tprow > span:first-child, .design-preview .hero-proof .tprow .sc { display: inline; }
  .design-preview .hero-proof .tprow { gap: 6px; font-size: 11.5px; }

  /* brand strip: the label in the same voice as the page, the logos at walking pace */
  .brand-proof.brand-proof { padding: 22px 0 !important; }
  .brand-proof .mq-lbl.mq-lbl { margin-bottom: 16px; font-size: 11.5px; font-weight: 760; letter-spacing: .02em; color: rgba(255, 255, 255, .96); }
  .brand-proof .bmq-t.bmq-t { animation-duration: 52s; }

  /* film: edge to edge, then the four outcomes on a single line */
  .film-sec { padding: 4px 0 40px; }
  .film-sec > .w { padding-inline: 0; }
  .film-sec .player { width: 100%; min-width: 0; border-radius: 0; box-shadow: 0 40px 90px -50px rgba(196, 240, 0, .35); }
  .film-outs { display: flex; justify-content: space-between; gap: 0; width: auto; min-width: 0; margin: 14px 14px 0; padding: 10px 13px; border-radius: 999px; background: #111311; box-shadow: inset 0 0 0 1px var(--hair-2); }
  .film-outs li { position: relative; display: block; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .film-outs li + li { padding-left: 12px; }
  .film-outs li + li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--lime); }
  .film-outs i, .film-outs small { display: none; }
  .film-outs b { font: 600 clamp(9px, 2.85vw, 11.5px)/1 var(--sans); letter-spacing: 0; white-space: nowrap; }

  /* platform: less air under the heading (the features follow one under the other) */
  #platform .w > .rv { margin-bottom: 26px !important; }

  /* buyer database: the two figures side by side, without the category pills (the focus moves by itself) */
  .sdc-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .spot { padding: 14px 14px 13px; border-radius: 16px; }
  .spot__title { font-size: 9px; letter-spacing: 1.4px; }
  .spot__share { padding: 4px 7px; font-size: 11px; }
  .spot__num { margin-top: 12px; font-size: 30px; }
  .spot__label { height: 18px; margin-top: 5px; font-size: 12.5px; line-height: 18px; }
  .spot__bar { height: 8px; gap: 3px; margin-top: 13px; }
  .spot__keys { display: none; }
}

/* FAQ: the four questions asked most, the others behind a button */
.faq-more[hidden] { display: none; }
.faq-toggle { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 26px auto 0; padding: 12px 24px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font: 600 14px/1.2 var(--sans); color: #fff; cursor: pointer; transition: box-shadow .25s, background .25s; }
.faq-toggle:hover { background: rgba(196, 240, 0, .08); box-shadow: inset 0 0 0 1px var(--lime); }
.faq-toggle svg { width: 14px; height: 14px; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.faq-toggle.is-open svg { transform: rotate(180deg); }

/* ── 9. Computer screens that are wide but not tall (laptops, scaled displays). Headings, spacing, the film and the
      platform follow the height of the screen: full size from 960 px of height, about a third smaller at 700 px,
      so that a heading and what it introduces are on screen together. Wider than 1000 px only: tablets and phones
      have their own layouts. ── */
@media (min-width: 1001px) and (max-height: 960px) {
  /* headings */
  .design-preview .hero.hero h1 { font-size: min(clamp(46px, 5.8vw, 88px), max(40px, calc(11.7vh - 25px))); }
  .design-preview #platform .platform-title { font-size: min(clamp(46px, 4vw, 60px), max(28px, calc(9.5vh - 32px))) !important; }
  .design-preview #database h2, .design-preview #invite h2, .design-preview #reviews h2, .design-preview #faq h2 { font-size: min(clamp(34px, 3.5vw, 52px), max(26px, calc(8vh - 25.7px))); }
  .design-preview #compare h2, .design-preview #results h2 { font-size: min(clamp(30px, 3.1vw, 46px), max(24px, calc(6.6vh - 18px))); }
  /* air around the sections */
  .design-preview #platform, .design-preview #database, .design-preview #compare, .design-preview #invite, .design-preview #reviews, .design-preview #faq { padding-top: clamp(52px, calc(18.25vh - 67px), 110px); padding-bottom: clamp(52px, calc(18.25vh - 67px), 110px); }
  .design-preview #results .res-stage { padding-top: clamp(52px, calc(18.25vh - 67px), 110px); padding-bottom: clamp(52px, calc(18.25vh - 67px), 110px); }
  .design-preview #platform .w > .rv { margin-bottom: clamp(26px, calc(14.6vh - 69.6px), 72px) !important; }
  /* film: the screen and its four results on one screen */
  .player { width: min(100%, calc((100svh - 217px) * 16 / 9)); }
  /* platform: the heading, the list and the close-up on one screen */
  .fx { max-width: calc((100svh - 276px) * 2.08 + 60px); margin-inline: auto; }
  .fx-tab { padding: clamp(7px, calc(1.82vh - 4.7px), 13px) 0; }
  .fx-tab b { font-size: min(clamp(17px, 1.5vw, 20px), max(15px, calc(1.46vh + 5.8px))); }
  .fx-group { margin-top: clamp(12px, calc(4.38vh - 16.5px), 26px); }
}
@media (min-width: 1001px) and (max-height: 800px) {
  nav { padding: 10px 0; }
  nav .nv a { font-size: 13px; }
  .nav-media { padding: 7px 14px; font-size: 12px; }
  nav .nav-end .btn-p { padding: 8px 16px !important; font-size: 12px !important; }
  /* hero */
  .design-preview .hero .hero-grid.hero-grid { padding-top: 96px; padding-bottom: 40px; }
  .design-preview .hero.hero h1 { margin-bottom: 16px; }
  .design-preview .hero .hero-badge.hero-badge { margin-bottom: 18px; }
  .design-preview .hero .lead.lead { margin-bottom: 20px; font-size: 15px; }
  .design-preview .hero-cta .btn.btn { min-width: 168px; min-height: 46px; padding: 12px 22px; font-size: 13.5px; }
  /* film */
  .film-sec { padding-bottom: 64px; }
  .film-outs { width: min(100%, 940px); margin-top: 16px; }
  .film-outs li { padding: 10px 14px; }
  .film-outs b { font-size: 14px; }
  .film-outs small { font-size: 12px; }
  /* platform list */
  .fx-tab em { font-size: 13px; line-height: 1.5; }
  /* buyer database, comparison, results, implementation, testimonials, questions */
  section .eyebrow { font-size: 10.5px; }
  .spot { padding: 18px 22px 16px; }
  .spot__num { font-size: 38px; }
  #buyerWall .bc { padding: 14px 18px; }
  .sw-card { padding: 22px 26px 18px; }
  .sw-card h3 { font-size: 20px; }
  .sw-row { padding: 8px 0; font-size: 14px; }
  .res-kpis { margin-top: 32px; }
  .res-v { font-size: 38px; }
  .impl-steps { margin-top: 32px; padding: 20px 26px 22px; }
  .impl-steps h3 { margin-top: 14px; font-size: 19px; }
  .impl-steps p { margin-top: 7px; font-size: 13.5px; }
  .impl-cta { margin-top: 30px; }
  .rvw-card { padding: 20px 22px 18px; }
  .rvw-q { font-size: 14px; }
  details.faq summary { padding: 14px 0; font-size: 15px; }
}