/* ==========================================================================
   Alex Iosif · personal site
   Paper, ink and a highlighter. Fraunces for headlines, Geist for everything
   you read, Geist Mono for labels and criterion IDs. The seven experience
   categories keep the same colours as the teardown framework.
   ========================================================================== */

/* ---------- fonts (self-hosted: no third-party requests) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  --paper: #f3f1ea;
  --paper-2: #ebe8df;
  --card: #ffffff;
  --card-2: #faf9f5;
  --ink: #15161b;
  --ink-2: #3a3d44;
  --ink-3: #50535b;
  --line: #dcd8cd;
  --line-2: #c6c1b4;
  --dot: rgba(21, 22, 27, 0.13);

  --hl: #e0f94a;
  --hl-2: #c4e21c;
  --hl-ink: #15161b;
  --hl-soft: rgba(224, 249, 74, 0.55);
  /* text highlights: a rounded marker, pale lime behind ink on light grounds */
  --mk-fg: #15161b;
  --mk-bg: rgba(224, 249, 74, 0.62);

  --good: #1d7a47;
  --bad: #c0392b;
  --warn: #9a6a00;
  --pull: #1f8a55;
  --drag: #d04a35;

  /* the seven experience categories */
  --c0: #2563eb;
  --c1: #c2610c;
  --c2: #0d9488;
  --c3: #9333ea;
  --c4: #db2777;
  --c5: #16a34a;
  --c6: #a16207;

  --focus: #2f54eb;
  /* ID pills: category colour darkened for white text in light, plain with dark text on dark */
  --id-dark: 20%;
  --id-fg: #ffffff;

  --btn-bg: var(--ink);
  --btn-fg: #f7f6f1;
  --btn-sweep: var(--hl);
  --btn-sweep-fg: var(--hl-ink);

  --sh-1: 0 1px 2px rgba(21, 22, 27, 0.05), 0 1px 3px rgba(21, 22, 27, 0.04);
  --sh-2: 0 2px 4px rgba(21, 22, 27, 0.04), 0 14px 34px -14px rgba(21, 22, 27, 0.18);
  --sh-3: 0 10px 24px rgba(21, 22, 27, 0.06), 0 40px 80px -28px rgba(21, 22, 27, 0.28);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gut: clamp(16px, 4vw, 32px);
  --nav-h: 68px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.3, 1.45, 0.5, 1);
}

/* dark sections inside the light theme, and the whole dark theme */
.night,
.foot,
.plan-main,
:root[data-theme="dark"] {
  --paper: #121317;
  --paper-2: #1a1b20;
  --card: #1c1d23;
  --card-2: #22242b;
  --ink: #eeece6;
  --ink-2: #d3d5d9;
  --ink-3: #b4b7be;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.2);
  --dot: rgba(255, 255, 255, 0.09);
  --hl-soft: rgba(224, 249, 74, 0.25);
  /* on dark grounds the highlight is lime text on a soft lime tint */
  --mk-fg: var(--hl);
  --mk-bg: rgba(224, 249, 74, 0.13);

  --good: #4ec27a;
  --bad: #f0776a;
  --warn: #e0b04a;
  --pull: #4ec27a;
  --drag: #f07a64;

  --c0: #6f9bff;
  --c1: #eb953b;
  --c2: #2fc4b2;
  --c3: #b58cf7;
  --c4: #f06aa8;
  --c5: #4ccb7a;
  --c6: #d9b040;

  --focus: var(--hl);
  --id-dark: 0%;
  --id-fg: #15161b;

  --btn-bg: var(--hl);
  --btn-fg: var(--hl-ink);
  --btn-sweep: #ffffff;
  --btn-sweep-fg: var(--hl-ink);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 36px -14px rgba(0, 0, 0, 0.6);
  --sh-3: 0 10px 24px rgba(0, 0, 0, 0.4), 0 40px 80px -28px rgba(0, 0, 0, 0.75);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111216;
  --paper-2: #16171c;
}
:root[data-theme="dark"] .night,
:root[data-theme="dark"] .foot {
  --paper: #0a0b0e;
  --paper-2: #101115;
  --card: #17181d;
  --card-2: #1d1f25;
}
.night,
.foot {
  background: var(--paper);
  color: var(--ink);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
p,
li,
dd {
  text-wrap: pretty;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 540;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
a {
  color: inherit;
}
img,
svg {
  display: block;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
input,
textarea {
  font: inherit;
  color: inherit;
}
code,
.mono {
  font-family: var(--mono);
}
b,
strong {
  font-weight: 600;
}
::selection {
  background: var(--hl);
  color: var(--hl-ink);
}
:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
[hidden] {
  display: none !important;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.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;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip:focus {
  top: 12px;
}
.ic {
  width: 18px;
  height: 18px;
  flex: none;
}
.wrap {
  width: min(100% - 2 * var(--gut), 1200px);
  margin-inline: auto;
}

/* audience switch: show the copy for the chosen audience only */
[data-seg="saas"] [data-for]:not([data-for="saas"]),
[data-seg="shop"] [data-for]:not([data-for="shop"]),
[data-seg="other"] [data-for]:not([data-for="other"]) {
  display: none !important;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15px/1.1 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--ease), background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn .ic {
  transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
  .btn:hover .ic {
    transform: translateX(3px);
  }
}
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 10px 24px -12px rgba(21, 22, 27, 0.55);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) {
  .btn-primary:hover {
    color: var(--btn-sweep-fg);
  }
  .btn-primary:hover::before {
    transform: none;
  }
}
.btn-ghost {
  border-color: var(--line-2);
  color: var(--ink);
  background: transparent;
}
@media (hover: hover) {
  .btn-ghost:hover {
    border-color: var(--ink);
    background: var(--card);
  }
}
.btn-light {
  background: var(--ink);
  color: var(--paper);
  --in-knock: var(--ink);
}
.btn-light:hover {
  background: var(--hl);
  color: var(--hl-ink);
  --in-knock: var(--hl);
}
.btn-dark-ghost {
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-dark-ghost:hover {
  border-color: var(--ink);
}
.btn-sm {
  padding: 9px 15px;
  font-size: 14px;
}
.btn-lg {
  padding: 16px 24px;
  font-size: 16px;
}
.btn-block {
  width: 100%;
}
.btn-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color 0.2s;
}
.btn-link:hover {
  text-decoration-color: currentColor;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.icon-btn:hover {
  background: var(--card);
  border-color: var(--line-2);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}
.icon-btn.sm {
  width: 32px;
  height: 32px;
}
.icon-btn.sm svg {
  width: 15px;
  height: 15px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  height: var(--nav-h);
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--hl);
  transition: transform 0.5s var(--spring);
}
.brand:hover .brand-mark {
  transform: rotate(-12deg) scale(1.06);
}
.brand-mark svg {
  width: 20px;
  height: 20px;
}
/* in the dark theme the ink tile turns light, so the mark flips to lime with a dark pin, as in the footer */
:root[data-theme="dark"] .brand-mark {
  background: var(--hl);
  color: #15161b;
}
.brand-name {
  font: 600 19px/1 var(--serif);
  letter-spacing: -0.01em;
}
.brand-role {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 4px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
}
.nav-links {
  display: flex;
  gap: 2px;
  margin-inline: auto;
}
.nav-links a {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-links a[aria-current="true"] {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.nav-act {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 6px;
  font: 600 14px/1 var(--sans);
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 4px;
}
.nav-call .ic {
  width: 16px;
  height: 16px;
}
.nav-call:hover {
  text-decoration: underline;
}
@media (max-width: 1180px) {
  .nav-call {
    display: none;
  }
}
.theme-btn .ic-sun,
:root[data-theme="dark"] .theme-btn .ic-moon {
  display: none;
}
:root[data-theme="dark"] .theme-btn .ic-sun {
  display: block;
}
.burger {
  display: none;
}
.burger span,
.burger span::before {
  display: block;
  width: 16px;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  position: relative;
  transition: transform 0.3s var(--ease);
}
.burger span {
  transform: translateY(-3px);
}
.burger span::before {
  content: "";
  transform: translateY(6px);
}
.menu-open .burger span {
  transform: rotate(45deg);
}
.menu-open .burger span::before {
  transform: rotate(-90deg);
}
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--hl-2), var(--hl));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.menu {
  position: fixed;
  inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
  z-index: 49;
  display: grid;
  gap: 2px;
  padding: 12px var(--gut) 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-3);
  animation: menuIn 0.35s var(--ease);
}
.menu a:not(.btn) {
  padding: 13px 4px;
  font: 500 22px/1.2 var(--serif);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu .btn {
  margin-top: 16px;
}
@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 4.5vw, 60px) 0 clamp(56px, 7vw, 100px);
}
.hero-bg {
  position: absolute;
  inset: calc(-1 * var(--nav-h)) 0 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, #000 25%, transparent 78%);
}
.hero-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 720px;
  height: 720px;
  margin: -360px 0 0 -360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 249, 74, 0.5) 0%, rgba(255, 196, 64, 0.16) 36%, transparent 66%);
  transform: translate3d(var(--gx, 68vw), var(--gy, 38vh), 0);
  opacity: 0;
  transition: opacity 0.8s;
  will-change: transform;
}
.hero.glow-on .hero-glow {
  opacity: 0.75;
}
:root[data-theme="dark"] .hero-glow {
  background: radial-gradient(circle, rgba(224, 249, 74, 0.2) 0%, rgba(255, 170, 60, 0.07) 38%, transparent 66%);
}
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.seg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.seg-l {
  font: 500 12.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.seg-opts {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.seg-opts button {
  position: relative;
  z-index: 1;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.3s;
}
.seg-opts button:hover {
  color: var(--ink);
}
.seg-opts button[aria-checked="true"] {
  color: var(--hl-ink);
}
.seg-opts .ss {
  display: none;
}
.seg-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--sw, 0);
  border-radius: 999px;
  background: var(--hl);
  transform: translateX(var(--sx, 4px));
  transition: transform 0.5s var(--spring), width 0.4s var(--ease);
}
.no-anim .seg-ind {
  transition: none;
}
.avail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-2);
}
.avail i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}
.avail i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #22c55e;
  opacity: 0;
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  80%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.hero-h {
  font-size: clamp(2.3rem, 0.9rem + 3.3vw, 4.1rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 530;
  text-wrap: balance;
}
.swap {
  white-space: nowrap;
}
.swap em {
  font-style: italic;
  font-weight: 480;
  padding: 0 0.06em;
  margin: 0 -0.06em;
  background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 86% / 100% 0.36em;
  border-radius: 0.08em;
}
.swap em.in {
  animation: swapIn 0.7s var(--ease) both, hlSweep 0.9s var(--ease) 0.25s both;
}
:root[data-theme="dark"] .swap em {
  color: var(--hl);
  background-image: none;
}
@keyframes swapIn {
  from {
    opacity: 0;
    transform: translateY(0.25em);
    filter: blur(6px);
  }
}
@keyframes hlSweep {
  from {
    background-size: 0% 0.36em;
  }
}
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
  margin-top: clamp(26px, 3.4vw, 48px);
}
.lede {
  font-size: clamp(1.06rem, 0.98rem + 0.35vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}
.lede mark,
.turn mark,
.gains-list mark,
.about-copy mark,
.oc-standard mark,
.sh mark,
.fw-next mark,
.q mark,
.rp-lede mark {
  padding: 0.03em 0.12em 0.07em;
  border-radius: 0.34em;
  color: var(--mk-fg);
  background: linear-gradient(var(--mk-bg), var(--mk-bg)) no-repeat 0 0 / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lede mark,
.about-copy mark,
.oc-standard mark,
.sh mark,
.fw-next mark,
.rp-lede mark {
  font-weight: 500;
}
@keyframes markIn {
  from {
    background-size: 0% 100%;
  }
}
.lede p + p {
  margin-top: 0.75em;
}
.js .lede mark {
  animation: markIn 0.9s var(--ease) 1s backwards;
}
.js .lede p:nth-child(2) mark {
  animation-delay: 1.3s;
}
.js .lede p:nth-child(3) mark {
  animation-delay: 1.6s;
}
.quick {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  padding: 6px;
  max-width: 540px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  transition: border-color 0.2s, box-shadow 0.3s;
}
.quick:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--hl-soft), var(--sh-2);
}
.quick.err {
  border-color: var(--bad);
  animation: shake 0.4s;
}
.quick-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 14px;
  color: var(--ink-3);
}
.quick-field .ic {
  width: 16px;
  height: 16px;
}
.quick-field input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
}
.quick-field input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
  opacity: 0.8;
}
.quick .btn {
  flex: none;
}
@keyframes shake {
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}
.field-err {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bad);
}
.quick-note {
  margin-top: 14px;
  max-width: 50ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}
/* the hero form's second step: which page it's for, with a way back */
.quick-for {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.quick-for b {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* "Set up a call": the quieter way in, beside the main buttons */
.call-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 0.2s;
}
.call-link:hover {
  text-decoration-color: currentColor;
}
.call-link .ic {
  width: 16px;
  height: 16px;
}
.alt-call {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.alt-call .call-link {
  font-weight: inherit;
}
.sent {
  margin-top: 14px;
  max-width: 540px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--hl-2);
  font-size: 14.5px;
  color: var(--ink-2);
  animation: rise 0.5s var(--ease);
}
.sent b {
  display: block;
  color: var(--ink);
}
.sent .btn-link {
  font-size: 14px;
}
.byline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.byline img {
  width: 128px;
  height: 128px;
  flex: none;
  border-radius: 22px;
  object-fit: cover;
  background: #0b0b0b;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--hl-2), 0 18px 34px -16px rgba(21, 22, 27, 0.6);
}
.by-name {
  font: 600 21px/1.2 var(--serif);
  letter-spacing: -0.01em;
}
.by-role {
  margin-top: 1px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.by-cv {
  margin-top: 5px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-3);
}
.by-cv b {
  font-weight: 600;
  color: var(--ink-2);
}
.by-cv a {
  font-weight: 600;
  color: var(--ink);
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

/* hero entrance */
.js .hero-top,
.js .hero-h,
.js .hero-copy > *,
.js .hx {
  animation: rise 0.9s var(--ease) both;
}
.js .hero-h {
  animation-delay: 0.08s;
}
.js .hero-copy > :nth-child(1) {
  animation-delay: 0.2s;
}
.js .hero-copy > :nth-child(2) {
  animation-delay: 0.28s;
}
.js .hero-copy > :nth-child(n + 3) {
  animation-delay: 0.36s;
}
.js .hx {
  animation-delay: 0.3s;
  animation-duration: 1.1s;
}
.js .hero-top,
.js .hero-h,
.js .hero-copy > *,
.js .hx {
  animation-name: heroIn;
}
@keyframes heroIn {
  from {
    transform: translateY(16px);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ---------- hero: the page before and after the sprint ---------- */
.hx {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
/* the three key pages, as browser tabs above the address bar */
.hx-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.hx-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 8px 15px 9px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font: 500 12.5px/1.2 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s, background-color 0.25s;
}
.hx-tabs button::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--line-2);
  transition: background-color 0.25s;
}
.hx-tabs button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.hx-tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  background: var(--card-2);
  border-color: var(--line);
}
.hx-tabs button[aria-selected="true"]::before {
  background: var(--hl);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl-ink) 25%, transparent);
}
/* only the open tab's pages, address and strip show */
.hx[data-pg="1"] [data-pg]:not([data-pg="1"]),
.hx[data-pg="2"] [data-pg]:not([data-pg="2"]),
.hx[data-pg="3"] [data-pg]:not([data-pg="3"]) {
  display: none !important;
}
.hx-bar,
.con-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
}
.dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-2);
}
.tw-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 340px;
  margin-inline: auto;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--paper);
  font: 500 12px/1.2 var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
}
.tw-url span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-url .ic {
  width: 12px;
  height: 12px;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.hx-mode {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.hx-mode button {
  padding: 4px 11px;
  border-radius: 999px;
  font: 600 10.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  transition: background-color 0.3s, color 0.3s;
}
.hx-mode button:hover {
  color: var(--ink);
}
.hx-mode button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.hx-mode button[data-hx="after"][aria-pressed="true"] {
  background: var(--hl);
  color: var(--hl-ink);
}
.hx-stage {
  position: relative;
  container-type: inline-size;
  /* the pages are drawn in units of the stage's width, so the stage keeps their proportions: 3:2, up to 440px */
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 440px;
  overflow: hidden;
  background: #ffffff;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.hx-stage.dragging,
.hx-stage.dragging * {
  cursor: grabbing !important;
}
.hx-pane {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #ffffff;
}
.hx-after {
  clip-path: inset(0 0 0 var(--pos));
}
.hx .mp {
  height: 100%;
  overflow: hidden;
  font-size: 1.62cqw;
}
.hx .mp-void span {
  opacity: 1;
}
.hx .mp-ctas {
  flex-wrap: wrap;
  row-gap: 0.45em;
}
/* today's product page puts its details on the left, so at rest the slider sets them against the fixed ones */
.hx .mp-shop .mp-pdp {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.hx .mp-shop .mp-gallery {
  order: 2;
}
.hx .mp-shop .mp-img {
  aspect-ratio: 4 / 3;
}
/* the Before and After labels ride either side of the divider */
/* a thin divider and a small handle docked at the bottom edge, so nothing sits over the pages */
.hx-stage > .ba-line {
  width: 2px;
  margin-left: -1px;
}
.hx .hx-handle {
  top: auto;
  bottom: 12px;
  left: clamp(20px, var(--pos), calc(100% - 20px));
  width: 32px;
  height: 32px;
  margin: 0 0 0 -16px;
}
.hx .hx-handle svg {
  width: 16px;
  height: 16px;
}
.hx-stage.at-edge > .ba-line {
  opacity: 0;
}
/* resting on the rebuilt page, a note beside the handle invites a drag back to today's page, and pulses
   gently until the visitor takes over */
.hx-try {
  position: absolute;
  bottom: 15px;
  left: calc(clamp(20px, var(--pos), 100% - 20px) + 26px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  background: #15161b;
  color: #ffffff;
  font: 600 12px/1.2 var(--sans);
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.hx-try .ic {
  width: 13px;
  height: 13px;
  color: var(--hl);
}
.hx.inviting .hx-try {
  opacity: 1;
  transform: none;
  animation: tryPulse 2.2s ease-in-out 0.6s infinite;
}
.hx.inviting .hx-try .ic {
  animation: tryNudge 2.2s ease-in-out 0.6s infinite;
}
@keyframes tryPulse {
  0%,
  100% {
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(224, 249, 74, 0.6);
  }
  65% {
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5), 0 0 0 10px rgba(224, 249, 74, 0);
  }
}
@keyframes tryNudge {
  0%,
  100% {
    transform: none;
  }
  45% {
    transform: translateX(3px);
  }
}
.hx .hp {
  font-size: 1.86cqw;
}
/* what I found on today's page, marked up like a review: a red dashed box and a number on each fault.
   The rebuilt page gets a green outline and the same number on the same spots. "Show where on the page"
   in the strip takes them all away (#hx.no-marks) */
.hx-pins,
.hx-oks {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hx-fault {
  position: absolute;
  border: 2px dashed #e5484d;
  border-radius: 9px;
  background: rgba(229, 72, 77, 0.07);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.35s var(--ease), transform 0.5s var(--spring), background-color 0.3s, box-shadow 0.3s;
}
.hx-fault.in {
  opacity: 1;
  transform: none;
}
.hx-fault.hot {
  background: rgba(229, 72, 77, 0.15);
  box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18);
}
.hx-fault b,
.hx-good b {
  position: absolute;
  top: -11px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  font: 700 11px/1 var(--sans);
  box-shadow: 0 0 0 2px #ffffff, 0 4px 10px -3px rgba(0, 0, 0, 0.4);
}
.hx-fault b {
  left: -11px;
  background: #e5484d;
}
/* the rebuilt page stays as it is: only a thin green line and the fault's number on what changed */
.hx-good {
  position: absolute;
  border: 1.5px solid rgba(31, 138, 85, 0.8);
  border-radius: 9px;
  opacity: 0;
  transition: opacity 0.35s var(--ease), border-color 0.3s, border-width 0.2s, box-shadow 0.3s;
}
.hx-good.in {
  opacity: 1;
}
.hx-good.hot {
  border: 2.5px solid #1f8a55;
  box-shadow: 0 0 0 4px rgba(31, 138, 85, 0.14);
}
.hx-good b {
  top: -15px;
  right: -15px;
  background: #1f8a55;
  transform: scale(0);
  transition: transform 0.45s var(--spring);
}
.hx-good.in b {
  transform: scale(1);
}
/* the number pointed at, here or in the strip, grows a little */
.hx-fault b,
.hx-good b {
  pointer-events: auto;
  transition: transform 0.3s var(--spring);
}
.hx-fault.hot b,
.hx-good.in.hot b {
  transform: scale(1.18);
}
.hx-good.edge b {
  top: -15px;
  right: 6px;
}
/* at the top of the page the numbers tuck inside their boxes, so they aren't cut off */
.hx-fault.top b {
  top: 4px;
  left: 4px;
}
.hx-fault.side b {
  left: 4px;
}
.hx-good.top b {
  top: 3px;
}
.hx-good b svg {
  width: 12px;
  height: 12px;
}
/* the faults, each turning into its fix as the divider uncovers it: the page score on the left,
   with a bar that climbs as the fixes land, and the five findings beside it as a checklist */
.hx-fixes {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--card-2);
}
.hx-set {
  display: grid;
  grid-template-columns: minmax(150px, 0.6fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 3px 6px;
}
.hf-score {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-right: 10px;
  padding: 4px 18px 4px 4px;
  border-right: 1px solid var(--line);
}
.hf-k {
  font: 500 10.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.hf-num {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.hf-num b {
  display: inline-block;
  font: 540 32px/1 var(--serif);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hf-n.bump {
  animation: numBump 0.45s var(--spring);
}
@keyframes numBump {
  from {
    color: var(--good);
    transform: scale(1.16);
  }
}
.hf-num small {
  font: 500 12px var(--mono);
  color: var(--ink-3);
}
/* 0 to 5, filled to the score now, with marks where the page started and where the rebuild lands */
.hf-meter {
  position: relative;
  height: 6px;
  margin-top: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 11%, transparent);
}
.hf-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--sv, 0) * 100%);
  border-radius: inherit;
  background: var(--good);
  transition: width 0.5s var(--ease);
}
.hf-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(var(--from) * 100%);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink-3);
}
.hf-tick.to {
  left: calc(var(--to) * 100%);
  background: var(--good);
}
.hf-range {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink-3);
}
.hf {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-2);
  transition: background-color 0.3s, color 0.3s;
}
.hf:hover,
.hf.hot {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.hf-t {
  display: grid;
}
.hf-was,
.hf-now {
  grid-area: 1 / 1;
  transition: opacity 0.35s var(--ease), transform 0.4s var(--ease);
}
.hf-now {
  opacity: 0;
  transform: translateY(5px);
  font-weight: 500;
}
.hf.fixed .hf-was {
  opacity: 0;
  transform: translateY(-5px);
}
.hf.fixed .hf-now {
  opacity: 1;
  transform: none;
}
.hf-st {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e5484d;
  color: #ffffff;
  transition: background-color 0.3s;
}
.hf-st > * {
  grid-area: 1 / 1;
  transition: opacity 0.25s, transform 0.35s var(--spring);
}
.hf-st b {
  font: 700 10.5px/1 var(--sans);
}
.hf-st svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.4);
}
.hf.fixed {
  color: var(--ink);
}
.hf.fixed:hover,
.hf.fixed.hot {
  background: color-mix(in srgb, var(--good) 12%, transparent);
}
.hf.fixed .hf-st {
  background: var(--good);
}
/* "Show where on the page", in the strip's last slot: on (the default), each point carries its number on
   both pages and in the strip; off, both pages are clean, the strip shows a cross or a tick instead of the
   number, and a point pointed at in the strip still outlines its spot */
.hf-st svg.st-x,
.hf-st svg.st-ok {
  width: 11px;
  height: 11px;
}
#hx.no-marks .hx-fault:not(.hot),
#hx.no-marks .hx-good:not(.hot) {
  opacity: 0;
}
#hx.no-marks .hx-fault b,
#hx.no-marks .hx-good b {
  display: none;
}
#hx.no-marks .mp-void span,
#hx.no-marks .yb-img > span {
  opacity: 0;
}
#hx.no-marks .hf-st {
  background: color-mix(in srgb, #e5484d 14%, transparent);
  color: #e5484d;
}
#hx.no-marks .hf.fixed .hf-st {
  background: var(--good);
  color: #ffffff;
}
#hx.no-marks .hf-st b {
  opacity: 0;
  transform: scale(0.4);
}
#hx.no-marks .hf-st .st-x,
#hx.no-marks .hf.fixed .hf-st .st-ok {
  opacity: 1;
  transform: none;
}
#hx.no-marks .hf.fixed .hf-st .st-x {
  opacity: 0;
  transform: scale(0.4);
}
.hf-show {
  align-self: center;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  padding: 3px 4px 3px 11px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font: 600 12px/1.3 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.3s;
}
.hf-show:hover,
.hf-show[aria-pressed="true"] {
  color: var(--ink);
}
.hf-show i {
  position: relative;
  flex: none;
  width: 22px;
  height: 13px;
  border-radius: 999px;
  background: var(--line-2);
  transition: background-color 0.25s;
}
.hf-show i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
.hf-show[aria-pressed="true"] i {
  background: var(--ink);
}
.hf-show[aria-pressed="true"] i::after {
  background: var(--paper);
  transform: translateX(9px);
}
.tw-k,
.dg-k,
.mk-k,
.proof-k {
  font: 500 11.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.bars .b {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: hidden;
}
.bars .b i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  transform-origin: 0 50%;
  transform: scaleX(var(--v, 0));
  transition: transform 1s var(--ease) calc(var(--i, 0) * 0.07s);
}
.con-auto .ic-play,
.con:not(.auto) .con-auto .ic-pause {
  display: none;
}
.con:not(.auto) .con-auto .ic-play {
  display: block;
}
.tw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}
/* how the fixes are made, the part of the offer the pages can't show on their own */
.tw-why {
  flex: 1 1 380px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.tw-why b {
  font-weight: 600;
  color: var(--ink);
}
.tw-why .ic {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 7px;
  background: var(--hl);
  color: var(--hl-ink);
}
.tw-note {
  font-size: 12px;
}

.tw-run {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: 6px;
  margin: -3px -6px -3px 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.2s, transform 0.2s;
}
.tw-run:hover {
  background: var(--hl-2);
}
.tw-run .ic {
  width: 14px;
  height: 14px;
  transition: transform 0.35s var(--ease);
}
.tw-run:hover .ic {
  transform: translateX(3px);
}

/* ---------- the sample pages (they stay light in both themes) ---------- */
.mp {
  --navy: #1e2a4a;
  --blue: #3e63f5;
  --muted: #6b7385;
  --soft: #f3f5fa;
  --edge: #e6e9f0;
  position: relative;
  font-family: var(--sans);
  font-size: 2.55cqw;
  line-height: 1.35;
  color: #1d2433;
  background: #ffffff;
  padding-bottom: 3em;
}
.mp i {
  font-style: normal;
}
.mp-nav {
  display: flex;
  align-items: center;
  gap: 1.4em;
  padding: 1.1em 1.5em;
  border-bottom: 1px solid var(--edge);
}
.mp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--navy);
}
.mp-logo i {
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.3em;
  background: var(--blue);
}
.mp-menu {
  display: flex;
  gap: 1.2em;
  font-size: 0.88em;
  color: var(--muted);
}
.mp-menu .on {
  color: var(--navy);
  font-weight: 600;
}
.mp-login {
  margin-left: auto;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--navy);
}
.mp-hero {
  padding: 2em 2.2em 0.9em;
  text-align: center;
}
.mp-h1 {
  font-size: 2.05em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.mp-sub {
  margin-top: 0.6em;
  font-size: 0.98em;
  color: var(--muted);
}
.mp-ctas {
  display: flex;
  justify-content: center;
  gap: 0.55em;
  padding: 0.5em 1.5em 0;
}
.mb {
  display: inline-block;
  padding: 0.72em 1.05em;
  border-radius: 0.5em;
  font-size: 0.9em;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}
.mb-a {
  background: var(--blue);
}
.mb-b {
  background: var(--navy);
}
.mb-c {
  background: #2c7a68;
}
.mp-void {
  position: relative;
  height: 2.3em;
  width: 62%;
  margin: 0.3em auto 0;
  display: grid;
  place-items: center;
}
.mp-void span {
  font-size: 0.78em;
  font-style: italic;
  color: #b3263f;
  opacity: 0;
  transition: opacity 0.4s 0.3s;
}
.mp-faq {
  padding: 0.9em 1.5em;
}
.mp-faq b {
  display: block;
  margin-bottom: 0.4em;
  font-size: 0.95em;
  color: var(--navy);
}
.mp-faq > i {
  display: block;
  height: 0.6em;
  margin-top: 0.55em;
  border-radius: 0.3em;
  background: #edf0f5;
}
.mp-faq > i:nth-of-type(2) {
  width: 82%;
}
.mp-faq > i:nth-of-type(3) {
  width: 90%;
}
.mp-proof {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0.4em 1.5em 0;
  padding: 0.9em 0;
  border-top: 1px solid var(--edge);
}
.mp-proof > span:first-child {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
.mp-logos {
  display: flex;
  gap: 0.7em;
}
.mp-logos i {
  width: 2.9em;
  height: 1em;
  border-radius: 0.3em;
  background: #e3e7ef;
}

/* today's SaaS homepage: a promise that fits any company, three equal buttons and a stock photo */
.mh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.6em;
  padding: 2.3em 1.8em 1.3em;
}
.mh-copy .mp-h1 {
  font-size: 2.1em;
}
.mh-copy .mp-sub {
  max-width: 26em;
}
.mh-copy .mp-ctas {
  justify-content: flex-start;
  padding: 0.9em 0 0;
}
.mh-copy .mp-void {
  width: 100%;
  margin: 0.25em 0 0;
  justify-items: start;
}
.mh-img {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 0.8em;
  background: repeating-linear-gradient(45deg, #eceef2 0 0.7em, #f6f7f9 0.7em 1.4em);
}
.mh-img span {
  padding: 0.35em 0.7em;
  border-radius: 0.4em;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.72em;
  font-weight: 600;
  color: var(--muted);
}
.mh-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2em;
  padding: 0.6em 1.8em 1.1em;
}
.mh-feats span {
  display: grid;
  gap: 0.45em;
}
.mh-feats i {
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  background: #e5e7eb;
}
.mh-feats b {
  font-size: 0.9em;
  color: var(--navy);
}
.mh-feats em {
  height: 0.55em;
  border-radius: 0.3em;
  background: #edf0f5;
}
.mh-feats em.s {
  width: 70%;
}

/* today's pages behind the other tabs: plans that look alike, a wall of features, a store that only says
   welcome, a collection with no filters, services with no price and a seven-field contact form */
.mq-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em;
  padding: 0.5em 1.8em 0;
}
.mq-plan {
  display: grid;
  gap: 0.5em;
  justify-items: start;
  padding: 1em 1em 1.1em;
  border: 1px solid var(--edge);
  border-radius: 0.7em;
}
.mq-plan b {
  font-size: 1em;
  color: var(--navy);
}
.mq-plan em {
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy);
}
.mq-plan em small {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--muted);
}
.mq-plan em.ask {
  font-size: 1.15em;
  line-height: 1.5;
}
.mq-plan > i {
  width: 100%;
  height: 0.5em;
  border-radius: 0.3em;
  background: #edf0f5;
}
.mq-plan > i:nth-of-type(2) {
  width: 78%;
}
.mq-plan > i:nth-of-type(3) {
  width: 62%;
}
.mq-plan .mb {
  justify-self: stretch;
  margin-top: 0.35em;
  text-align: center;
}
.mq-pr .mp-void {
  width: 70%;
}
.mq-table {
  margin: 0.4em 1.8em 0;
  border-top: 1px solid var(--edge);
}
.mq-table p {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  padding: 0.5em 0;
  border-bottom: 1px solid var(--edge);
  font-size: 0.8em;
  color: var(--muted);
}
.mq-table i {
  justify-self: center;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: #cfd5e0;
}
.mq-table i.n {
  background: none;
  border: 1px solid #d9dee7;
}
.mq-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em 1.2em;
  padding: 0.4em 1.8em 0.9em;
}
.mq-feats span {
  display: grid;
  grid-template-columns: 1.9em minmax(0, 1fr);
  align-items: center;
  gap: 0.25em 0.6em;
}
.mq-feats i {
  grid-row: span 2;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.45em;
  background: #e5e7eb;
}
.mq-feats b {
  font-size: 0.86em;
  color: var(--navy);
}
.mq-feats em {
  height: 0.5em;
  border-radius: 0.3em;
  background: #edf0f5;
}
.mq-bar {
  height: 2.1em;
  margin: 0;
  background: #f6f6f3;
}
.mp-shop .mq-bar {
  width: 100%;
  height: 2.1em;
  margin: 0;
}
.mq-banner {
  display: grid;
  justify-items: center;
  gap: 0.7em;
  margin: 1em 1.5em 0;
  padding: 2.2em 1.5em;
  border-radius: 0.8em;
  background: repeating-linear-gradient(45deg, #eeeeea 0 0.7em, #f6f6f3 0.7em 1.4em);
  text-align: center;
}
.mp.mq-sh .mp-void:not(.mq-bar) {
  width: 70%;
  margin: 0.5em auto 0.3em;
}
.mq-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8em;
  padding: 0.6em 1.5em 0;
}
.mq-grid.six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em 1em;
}
.mq-grid span {
  display: grid;
  gap: 0.3em;
}
.mq-grid i {
  aspect-ratio: 5 / 4;
  border-radius: 0.5em;
  background: #ecece8;
}
.mq-grid b {
  font-size: 0.82em;
  color: var(--navy);
}
.mq-grid em {
  justify-self: start;
  font-size: 0.8em;
  color: var(--muted);
}
.mq-colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3em 1.5em 0.5em;
}
.mq-h2 {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--navy);
}
.mq-sort {
  padding: 0.4em 0.75em;
  border: 1px solid var(--edge);
  border-radius: 0.45em;
  font-size: 0.8em;
  color: var(--muted);
}
.mq-pager {
  padding: 0.9em 1.5em 0;
  text-align: center;
  font-size: 0.8em;
  color: var(--muted);
}
.mq-svcs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8em 1em;
  padding: 0.3em 2em 0.2em;
}
.mq-svcs span {
  display: grid;
  gap: 0.4em;
  padding: 0.85em 0.9em;
  border: 1px solid var(--edge);
  border-radius: 0.6em;
}
.mq-svcs b {
  font-size: 0.95em;
  color: var(--navy);
}
.mq-svcs i {
  height: 0.5em;
  border-radius: 0.3em;
  background: #edf0ee;
}
.mq-svcs i + i {
  width: 72%;
}
.mq-svc .mp-ctas {
  padding-top: 0.4em;
}
.mq-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.2em;
  padding: 0.3em 2em 0;
}
.mq-contact .mp-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45em;
}
.mq-contact .mp-fields i {
  padding: 0.55em 0.6em;
  border: 1px solid var(--edge);
  border-radius: 0.4em;
  font-size: 0.78em;
  color: var(--muted);
}
.mq-contact .mp-fields i.tall {
  grid-column: 1 / -1;
  padding-bottom: 2.2em;
}
.mq-contact .mp-fields i:nth-child(6) {
  grid-column: 1 / -1;
}
.mq-side {
  display: grid;
  align-content: start;
  gap: 0.6em;
}
.mq-map {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  border-radius: 0.6em;
  background: repeating-linear-gradient(45deg, #edf0ee 0 0.7em, #f6f7f6 0.7em 1.4em);
}
.mq-map span {
  padding: 0.3em 0.6em;
  border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.72em;
  font-weight: 600;
  color: var(--muted);
}
.mq-captcha {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 0.7em;
  border: 1px solid var(--edge);
  border-radius: 0.4em;
  background: #fafbfa;
  font-size: 0.78em;
  color: var(--muted);
}
.mq-captcha i {
  width: 1.1em;
  height: 1.1em;
  border: 1.5px solid #b9c2bd;
  border-radius: 0.2em;
}
.mq-side .mb {
  justify-self: start;
}
.mp.mq-ct .mp-void,
.mp.mq-svc .mp-void {
  width: 70%;
  margin-inline: auto;
}
/* the rebuilt pages behind the tabs were drawn for small previews: in the hero they start at the top,
   and the shorter ones get larger type and taller product photos */
.hx .hp-hq .hp-hero {
  align-items: start;
  padding-top: 1.8em;
}
.hx .hp-hq.hp-other {
  font-size: 2.3cqw;
}
.hx .hp-hq .hp-grid6 i {
  height: 7em;
}

/* the rebuilt SaaS homepage in the hero: the lead router glows, and a live counter floats beside it */
.hx-appwrap {
  position: relative;
  align-self: stretch;
  display: flex;
  min-height: 0;
}
.hx-appwrap .hp-app {
  position: relative;
  z-index: 1;
  flex: 1;
}
.hx-glow {
  position: absolute;
  inset: -14% -12% -10% -16%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(62, 99, 245, 0.3), rgba(124, 92, 255, 0.14) 55%, transparent);
  pointer-events: none;
  animation: hxGlow 7s ease-in-out infinite alternate;
}
@keyframes hxGlow {
  from {
    opacity: 0.75;
    transform: translate(-3%, 2%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(3%, -2%) scale(1.05);
  }
}
.hx-kpi {
  position: absolute;
  left: -1.7em;
  bottom: -0.7em;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 0.15em 0.7em;
  padding: 0.65em 0.8em 0.6em;
  border-radius: 0.8em;
  background: #ffffff;
  box-shadow: 0 1.2em 2.4em -1.1em rgba(30, 42, 74, 0.55), inset 0 0 0 1px var(--edge);
}
.kpi-k,
.kpi-d {
  grid-column: 1 / -1;
  font-size: 0.6em;
  color: var(--m);
}
.kpi-k {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kpi-d b {
  color: #1f8a55;
}
.kpi-n {
  display: inline-block;
  font: 700 1.25em/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.kpi-n.bump {
  animation: numBump 0.45s var(--spring);
}
.kpi-spark {
  width: 4.6em;
  height: 1.4em;
  overflow: visible;
}
.kpi-area {
  fill: color-mix(in srgb, var(--a) 14%, transparent);
}
.kpi-line {
  fill: none;
  stroke: var(--a);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* shop sample */
.mp-shop {
  --navy: #2a2622;
  --muted: #7a7068;
  --edge: #ece6dc;
  color: #2a2622;
}
.mp-shop .mp-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2a2622;
}
.mp-shop .mp-logo i {
  border-radius: 50%;
  background: #2f4a3a;
}
.mp-crumbs {
  padding: 0.8em 1.5em 0.2em;
  font-size: 0.74em;
  color: var(--muted);
}
.mp-pdp {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.2em;
  padding: 0.6em 1.5em 0.6em;
}
.mp-img {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border-radius: 0.6em;
  background: linear-gradient(160deg, #f1ebe1, #e6ddcf);
  overflow: hidden;
}
.mp-img i {
  position: absolute;
  left: 16%;
  right: 16%;
  height: 16%;
  border-radius: 0.5em;
  box-shadow: 0 0.3em 0.6em rgba(80, 60, 30, 0.14);
}
.mp-img i:nth-child(1) {
  bottom: 22%;
  background: #cdbfa9;
}
.mp-img i:nth-child(2) {
  bottom: 37%;
  background: #ddd2c1;
  left: 19%;
  right: 13%;
}
.mp-img i:nth-child(3) {
  bottom: 52%;
  background: #eae2d6;
  left: 14%;
  right: 19%;
}
.mp-thumbs {
  display: flex;
  gap: 0.45em;
  margin-top: 0.5em;
}
.mp-thumbs i {
  width: 2.4em;
  height: 2.4em;
  border-radius: 0.35em;
  background: #efe9df;
}
.mp-title {
  font-size: 1.32em;
  font-weight: 600;
  line-height: 1.15;
}
.mp-price {
  margin-top: 0.3em;
  font-size: 1.15em;
  font-weight: 600;
}
.mp-swatches {
  display: flex;
  gap: 0.4em;
  margin-top: 0.7em;
}
.mp-swatches i {
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: #d9cdb9;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.mp-swatches i:nth-child(2) {
  background: #8a9b86;
}
.mp-swatches i:nth-child(3) {
  background: #c9a78e;
}
.mp-swatches i:nth-child(4) {
  background: #5d6b7a;
}
.mp-size {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7em;
  padding: 0.5em 0.7em;
  border: 1px solid #d8d0c3;
  border-radius: 0.4em;
  font-size: 0.82em;
}
.mp-size span {
  color: var(--muted);
}
.mp-size em {
  font-style: normal;
  font-weight: 600;
}
.mp-add {
  display: block;
  margin-top: 0.7em;
  text-align: center;
  background: #2f4a3a;
}
.mp-shop .mp-void {
  width: 100%;
  height: 2em;
  margin-top: 0.2em;
}
.mp-desc {
  font-size: 0.74em;
  line-height: 1.5;
  color: var(--muted);
}
.mp-more {
  padding-top: 0.4em;
}
.mp-row {
  display: flex;
  gap: 0.5em;
}
.mp-row i {
  flex: 1;
  height: 2.6em;
  border-radius: 0.4em;
  background: #f1ece4;
}
.mp-reviews {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0.4em 1.5em 0;
  padding: 0.8em 0;
  border-top: 1px solid var(--edge);
  font-size: 0.86em;
}
.mp-shopfoot {
  display: flex;
  gap: 1.4em;
  margin-top: 1.2em;
  padding: 1.1em 1.5em;
  background: #f4efe7;
  font-size: 0.76em;
  color: var(--muted);
}
.mp-reviews .stars {
  color: #d99a00;
  letter-spacing: 0.08em;
}
.mp-reviews span:last-child {
  color: var(--muted);
}

/* service business sample */
.mp-other {
  --navy: #1d2b28;
  --blue: #2f6b57;
  --muted: #69726e;
  --edge: #e2e7e4;
  color: #1d2b28;
}
.mp-other .mp-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
}
.mp-other .mp-logo i {
  border-radius: 50% 50% 50% 0.18em;
  background: #2f6b57;
}
.mp-other .mp-login {
  padding: 0.4em 0.8em;
  border-radius: 0.4em;
  border: 1px solid #c8d2cd;
}
.mp-other .mp-hero {
  padding: 2.1em 1.5em 0.8em;
  text-align: left;
}
.mp-other .mp-h1 {
  max-width: 12em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mp-other .mp-sub {
  max-width: 25em;
}
.mp-other .mp-ctas {
  justify-content: flex-start;
  padding-left: 1.5em;
}
.mp-other .mb-b {
  background: #53645e;
}
.mp-other .mb-c {
  background: #8a9993;
}
.mp-lead {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 1em;
  align-items: start;
  padding: 2.2em 1.5em 0.2em;
}
.mp-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45em;
  padding: 0.9em;
  border: 1px solid var(--edge);
  border-radius: 0.7em;
  background: #f7f9f8;
}
.mp-fields b {
  grid-column: 1 / -1;
  margin-bottom: 0.15em;
  font-size: 0.95em;
  color: var(--navy);
}
.mp-fields i {
  padding: 0.5em 0.6em;
  border: 1px solid #d4dcd8;
  border-radius: 0.35em;
  background: #ffffff;
  font-size: 0.74em;
  color: #929b97;
}
.mp-fields i.tall {
  grid-column: 1 / -1;
  height: 3.4em;
}
.mp-fields .mb {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.15em;
}
.mp-other .mp-void {
  width: 100%;
  height: 2em;
  margin-top: 0.2em;
}
.mp-quote {
  padding: 1em;
  border-radius: 0.7em;
  background: #eef2f0;
}
.mp-quote p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05em;
  font-style: italic;
  color: var(--navy);
}
.mp-quote span {
  display: block;
  margin-top: 0.5em;
  font-size: 0.74em;
  color: var(--muted);
}
.mp-other .mp-shopfoot {
  background: #eef2f0;
}

/* ---------- why teams hire me ---------- */
.gains {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.gains-in {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding-block: 24px 22px;
}
.gains-list {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  row-gap: 24px;
}
/* the pages lead with a bigger title */
.gains-list li:first-child b {
  font-size: 20px;
}
.gains-body {
  flex: 1;
  min-width: 0;
}
.gains-plus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 18px;
  padding: 11px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 4.5%, transparent);
}
.gp-k {
  font: 600 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.gp {
  flex: 1 1 460px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
}
.gp .ic {
  width: 17px;
  height: 17px;
  color: var(--ink);
}
.gp b {
  margin-right: 6px;
  font: 600 15.5px/1.2 var(--serif);
}
.gp > span {
  font-size: 13.5px;
  color: var(--ink-2);
}
.gains-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 16px;
  border-left: 1px solid var(--line-2);
}
.gi {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 7px;
  border-radius: 9px;
  background: var(--hl);
  color: var(--hl-ink);
}
.gi svg {
  width: 17px;
  height: 17px;
}
.gains-list b {
  font: 600 16.5px/1.2 var(--serif);
  letter-spacing: -0.005em;
}
/* the first reason leads the other three: its own card, a lime edge and a soft glow */
.gains-list .gl-lead {
  position: relative;
  margin-right: 12px;
  padding: 14px 18px 15px;
  border: 1.5px solid color-mix(in srgb, var(--hl-2) 75%, transparent);
  border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--hl) 22%, var(--card)), var(--card) 70%);
  box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--hl-2) 90%, transparent), 0 0 0 4px color-mix(in srgb, var(--hl) 12%, transparent);
}
.gains-list .gl-lead + li {
  border-left: 0;
}
.gl-lead .gi {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--hl-2) 95%, transparent);
}
.gains-list .gl-lead span:last-child {
  color: var(--ink);
}
.gains-list span:last-child {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ---------- proof band ---------- */
.proof {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
}
.proof-in {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding-block: 22px;
}
.proof-k {
  flex: none;
  width: 12ch;
}
.proof-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.proof-list li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 20px;
  border-left: 1px solid var(--line-2);
}
.role {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
}
.proof-list .role {
  margin: -6px -10px;
  padding: 6px 10px;
  width: calc(100% + 20px);
  transition: background-color 0.25s;
}
.proof-list .role:hover {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.proof-list .role b {
  text-decoration: underline dotted color-mix(in srgb, var(--ink) 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.25s;
}
.role:hover b {
  text-decoration-color: var(--ink);
}
.proof-hint {
  display: block;
  width: 17ch;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: none;
}
.h-touch {
  display: none;
}
@media (hover: none) {
  .h-hover {
    display: none;
  }
  .h-touch {
    display: inline;
  }
}
.proof-list .yr {
  font: 500 11.5px/1.4 var(--mono);
  color: var(--ink-3);
}
.proof-list b {
  font: 600 21px/1.2 var(--serif);
  letter-spacing: -0.01em;
}
.proof-list .co {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 30px;
  padding-bottom: 3px;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--ink) 35%, transparent);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s;
}
.role:hover .co {
  border-bottom-color: var(--ink);
}
.co-lg {
  display: block;
  height: var(--h);
  width: auto;
}
/* what pulls a visitor forward and what holds them back, in green and red, readable on both themes */
.fw-next mark.pull {
  --mk-fg: color-mix(in srgb, var(--pull) 60%, var(--ink));
  --mk-bg: color-mix(in srgb, var(--pull) 16%, transparent);
}
.fw-next mark.drag {
  --mk-fg: color-mix(in srgb, var(--drag) 60%, var(--ink));
  --mk-bg: color-mix(in srgb, var(--drag) 16%, transparent);
}
.proof-list .what {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.proof-list .now b::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: 4px;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* ---------- sections ---------- */
.section {
  position: relative;
  padding-block: clamp(76px, 10vw, 140px);
}
.sh {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.sh h2 {
  font-size: clamp(2.05rem, 1.2rem + 2.7vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.sh > p:not(.kicker) {
  margin-top: 20px;
  max-width: 60ch;
  font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem);
  color: var(--ink-2);
  text-wrap: pretty;
}
.sh-c {
  margin-inline: auto;
  text-align: center;
}
.fw-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: clamp(44px, 6vw, 76px);
}
/* how the scores turn into an order of work, in one line above the invitation to see it live */
.fw-next {
  max-width: 58ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-2);
}
/* the invitation to watch the scoring live has a light running round its edge */
@property --fw-a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fw-cta {
  --fw-glow: #a8c800;
  --fw-hot: var(--hl);
  padding: 18px 28px;
  font-size: 17px;
  border: 3px solid transparent;
  background: linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box, conic-gradient(from var(--fw-a), transparent 0deg, transparent 220deg, var(--fw-glow) 290deg, var(--fw-hot) 322deg, var(--fw-glow) 342deg, transparent 360deg) border-box;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fw-glow) 30%, transparent), 0 12px 34px -14px color-mix(in srgb, var(--fw-glow) 70%, transparent);
  animation: fwRun 2.8s linear infinite;
}
:root[data-theme="dark"] .fw-cta {
  --fw-glow: #d9dbe2;
  --fw-hot: #ffffff;
}
@keyframes fwRun {
  to {
    --fw-a: 360deg;
  }
}
.fw-cta:hover .ic:first-child {
  transform: none;
}
/* on a phone the label is longer than the screen is wide: the button fills the row and the label may wrap */
@media (max-width: 520px) {
  .fw-cta {
    width: 100%;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
  }
}
.sh-c > p:not(.kicker) {
  margin-inline: auto;
}
.sh-c .kicker {
  justify-content: center;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  font: 500 12.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.kn {
  padding: 5px 7px 4px;
  border-radius: 6px;
  background: var(--hl);
  color: var(--hl-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rise-in {
  animation: riseIn 0.85s var(--ease) backwards;
  animation-delay: var(--d, 0s);
}
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

/* ---------- why ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.why-card {
  padding: 20px 22px 26px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
@supports (grid-template-rows: subgrid) {
  .why-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.why-card h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  margin-bottom: 10px;
}
.why-card p {
  max-width: 58ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.vis-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}
.vth-round {
  font: 500 10.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.vth-round b {
  display: inline-block;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.vth-round b.flip {
  animation: roundFlip 0.5s var(--spring);
}
@keyframes roundFlip {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* a chat that keeps going: the oldest line scrolls away as the next person starts typing */
.vth-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
}
.vth-msg {
  --c: var(--ink-3);
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  max-width: 94%;
  overflow: hidden;
  transition: height 0.5s var(--ease), opacity 0.35s var(--ease), margin 0.5s var(--ease);
}
.vth-msg > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 20%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--ink);
  font: 600 10.5px/1 var(--sans);
}
.vth-msg > span {
  min-width: 0;
  padding: 4px 10px 5px;
  border-radius: 11px 11px 11px 3px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
}
.vth-msg b {
  margin-right: 6px;
  font: 600 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--c) 72%, var(--ink));
}
.vth-dots {
  display: inline-flex;
  gap: 3px;
  padding: 3px 1px;
  vertical-align: middle;
}
.vth-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: tyDot 0.9s ease-in-out infinite;
}
.vth-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.vth-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
.vth-msg.said > span {
  animation: msgIn 0.45s var(--spring);
}
.why-card.rise-in .vth-msg {
  animation: msgIn 0.5s var(--spring) backwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.5s);
}
@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}
.why-vis {
  position: relative;
  min-height: 136px;
  margin-bottom: 22px;
  padding: 16px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: 12.5px;
  color: var(--ink-2);
}
.vt-top,
.vt-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
}
.vt-top b,
.vt-foot b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.vt-meter {
  position: relative;
  height: 12px;
  margin: 26px 0 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.vt-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--conf, 62%);
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, #f5a524 0 6px, #f7b84a 6px 12px);
  background-size: 17px 17px;
  animation: stripes 1s linear infinite;
  transition: width 1.4s var(--ease);
}
.vt-goal {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 95%;
  width: 2px;
  background: var(--ink);
}
.vt-goal::after {
  content: "95%";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 10px var(--mono);
  color: var(--ink);
}
@keyframes stripes {
  to {
    background-position: 17px 0;
  }
}
.vis-funnel {
  display: grid;
  align-content: center;
  gap: 9px;
}
.vf-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  white-space: nowrap;
}
.vf-row i {
  height: 14px;
  width: var(--w);
  border-radius: 4px;
  background: var(--c0);
}
.vf-row:nth-child(2) i {
  opacity: 0.75;
}
.vf-row:nth-child(3) i {
  opacity: 0.55;
}
.why-card.rise-in .vf-row i {
  animation: barGrow 1.1s var(--ease) backwards;
}
.why-card.rise-in .vf-row:nth-child(2) i {
  animation-delay: 0.2s;
}
.why-card.rise-in .vf-row:nth-child(3) i {
  animation-delay: 0.4s;
}
@keyframes barGrow {
  from {
    width: 0;
  }
}
.vf-q {
  position: absolute;
  right: 18px;
  bottom: 22px;
  padding: 6px 10px;
  border-radius: 10px 10px 10px 2px;
  background: var(--ink);
  color: var(--paper);
  font: 600 12px var(--sans);
  transform-origin: 0 100%;
  animation: bob 2.6s ease-in-out 1.8s infinite;
}
.why-card.rise-in .vf-q {
  animation: popIn 0.6s var(--spring) 1s backwards, bob 2.6s ease-in-out 1.8s infinite;
}
@keyframes popIn {
  from {
    transform: scale(0);
  }
}
@keyframes bob {
  50% {
    transform: translateY(-4px);
  }
}
.vis-doc {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 22px;
}
.vd-doc {
  flex: none;
  display: grid;
  align-content: start;
  gap: 6px;
  width: 62px;
  height: 80px;
  padding: 12px 9px;
  border-radius: 5px 14px 5px 5px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 5px 5px 0 -1px var(--card), 5px 5px 0 0 var(--line), 10px 10px 0 -1px var(--card), 10px 10px 0 0 var(--line);
  transform: rotate(-4deg);
}
.vd-doc i {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.vd-doc i.s {
  width: 62%;
}
.vd-info {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.vd-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font: 600 12px var(--mono);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-ext {
  flex: none;
  padding: 3px 5px;
  border-radius: 4px;
  background: #e5484d;
  color: #ffffff;
  font: 700 9.5px var(--mono);
}
.vd-meta {
  font-size: 11.5px;
  color: var(--ink-3);
}
.vd-done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 500 11px var(--mono);
  color: var(--ink-2);
}
.vd-done i {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.vd-done i b {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4%;
  border-radius: inherit;
  background: #e5484d;
}
.vd-done > span b {
  color: var(--ink);
}
.vd-seen {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-3);
}
.why-card.rise-in .vd-done i b {
  animation: barGrow 1.2s var(--ease) 0.6s backwards;
}
.turn {
  max-width: 42ch;
  margin: clamp(56px, 8vw, 100px) auto 0;
  text-align: center;
  font: 440 clamp(1.4rem, 1rem + 1.35vw, 2.1rem) / 1.32 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* a small bullseye: the diagnosis finds the spot */
.turn-mark {
  display: block;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  overflow: visible;
}
.tm-face {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.tm-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.tm-bull {
  fill: var(--hl);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.tm-hit {
  fill: none;
  stroke: var(--hl-2);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.tm-sparks path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0;
}
.tm-shaft {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.tm-fin {
  fill: var(--hl);
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.tm-dot {
  fill: var(--hl-ink);
}
.tm-dart {
  transform-box: view-box;
  transform-origin: 34px 38px;
}
.tm-aura,
.tm-sheen {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
/* the dart waits until the mark is well in view, then flies in and lands */
.js .turn-mark:not(.hit) .tm-dart {
  opacity: 0;
}
.turn-mark.hit .tm-dart {
  animation: dartIn 1.15s cubic-bezier(0.55, 0, 0.35, 1) 0.2s backwards, dartWobble 0.6s ease-out 1.35s;
}
.turn-mark.hit .tm-hit {
  animation: hitRing 0.9s var(--ease) 1.3s;
}
.turn-mark.hit .tm-sparks path {
  animation: spark 0.8s var(--ease) 1.32s;
}
/* then a soft aura breathes, and a sheen crosses the target now and then */
.turn-mark.hit .tm-aura {
  animation: tmAura 3.8s ease-in-out 1.5s infinite;
}
.turn-mark.hit .tm-sheen {
  animation: tmSheen 6s ease-in-out 2.2s infinite;
}
@keyframes tmAura {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.88);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.06);
  }
}
@keyframes tmSheen {
  0% {
    opacity: 1;
    transform: translateX(-26px);
  }
  24% {
    opacity: 1;
    transform: translateX(62px);
  }
  25%,
  100% {
    opacity: 0;
    transform: translateX(62px);
  }
}
@keyframes dartIn {
  from {
    opacity: 0;
    transform: translate(62px, -62px) rotate(-10deg);
  }
  25% {
    opacity: 1;
  }
}
@keyframes dartWobble {
  30% {
    transform: rotate(5deg);
  }
  65% {
    transform: rotate(-3deg);
  }
}
@keyframes hitRing {
  from {
    opacity: 0.95;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3.1);
  }
}
@keyframes spark {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.turn.rise-in mark {
  animation: markIn 1.1s var(--ease) 0.4s backwards;
}
.turn.rise-in mark + mark {
  animation-delay: 0.9s;
}

/* ---------- what you get ---------- */
.outcome {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}
.oc-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.oc-top .sh {
  margin-bottom: 0;
}
.oc-pages {
  position: relative;
  padding: clamp(20px, 3vw, 34px) clamp(16px, 2.4vw, 28px) 22px;
  border-radius: 26px;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--hl) 26%, transparent), transparent 70%), var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.oc-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
  align-items: start;
}
.oc-page {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(21, 22, 27, 0.1);
  box-shadow: 0 16px 30px -18px rgba(21, 22, 27, 0.45);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.oc-page:nth-child(1) {
  transform: translateY(12px) rotate(-2.2deg);
}
.oc-page:nth-child(2) {
  transform: translateY(-4px);
}
.oc-page:nth-child(3) {
  transform: translateY(12px) rotate(2.2deg);
}
.oc-page:hover {
  transform: translateY(-10px) rotate(0);
  box-shadow: 0 26px 44px -20px rgba(21, 22, 27, 0.5);
}
.ocp-bar {
  display: flex;
  gap: 4px;
  padding: 7px 9px;
  background: #f1f2f5;
  border-bottom: 1px solid #e4e6eb;
}
.ocp-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3d6dd;
}
.ocp-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 188px;
  padding: 10px;
  overflow: hidden;
}
.ocp-body i {
  display: block;
  flex: none;
  height: 5px;
  border-radius: 3px;
  background: #e6e8ee;
}
.ocp-body .nav {
  height: 6px;
  margin-bottom: 4px;
  background: linear-gradient(90deg, #1e2a4a 0 22%, transparent 22% 50%, #e6e8ee 50% 62%, transparent 62% 66%, #e6e8ee 66% 78%, transparent 78% 82%, #3e63f5 82%);
}
.ocp-body .h {
  width: 88%;
  height: 9px;
  background: #1e2a4a;
}
.ocp-body .s {
  width: 58%;
}
.ocp-body .c {
  align-self: center;
}
.ocp-body .p {
  width: 92%;
}
.ocp-body .b,
.ocp-body .b2 {
  width: 40%;
  height: 13px;
  border-radius: 4px;
  background: #3e63f5;
}
.ocp-body .b2 {
  width: 30%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #c7cede;
}
.ocp-body .img {
  height: 46px;
  border-radius: 6px;
  background: linear-gradient(135deg, #dfe6ff, #f1ede4);
}
.ocp-body .stars {
  width: 50%;
  height: 6px;
  background: repeating-linear-gradient(90deg, #e9a800 0 6px, transparent 6px 8px);
}
.ocp-body > span {
  display: grid;
  gap: 5px;
  flex: none;
}
.ocp-body .btns {
  display: flex;
  gap: 5px;
}
.ocp-body .tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ocp-body .tiles.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ocp-body .tiles i {
  height: 30px;
  border-radius: 5px;
  background: #f1f3f7;
  box-shadow: inset 0 0 0 1px #e4e7ee;
}
.ocp-body .cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 2px 0;
}
.ocp-body .cols i {
  height: 58px;
  border-radius: 5px;
  background: #f5f6f9;
  box-shadow: inset 0 0 0 1px #e1e4ec;
}
.ocp-body .cols .on {
  background: #eef2ff;
  box-shadow: inset 0 0 0 1.5px #3e63f5;
}
.ocp-body .chips {
  display: flex;
  gap: 4px;
}
.ocp-body .chips i {
  width: 22%;
  height: 8px;
  border-radius: 8px;
}
.ocp-body .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.ocp-body .grid i {
  height: 44px;
  border-radius: 5px;
  background: linear-gradient(160deg, #f1ebe1, #e4dccd);
}
.ocp-body .pdp {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.ocp-body .pdp .img {
  height: 84px;
  background: linear-gradient(160deg, #f1ebe1, #e2d8c8);
}
.ocp-body .pdp > span {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ocp-body .pdp .b {
  width: 100%;
  background: #2f4a3a;
}
.ocp-body .quote {
  padding: 8px;
  border-radius: 6px;
  background: #eef2f0;
}
.ocp-body .quote i {
  background: #cfd9d4;
}
.ocp-body .form {
  gap: 5px;
  padding: 8px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px #e1e5ea;
}
.ocp-body .form i {
  height: 12px;
  border-radius: 3px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #dde2e8;
}
.ocp-body .form .t {
  height: 26px;
}
.ocp-body .form .b {
  height: 13px;
  box-shadow: none;
  background: #2f6b57;
}
.ocp-body[data-for="other"] .h {
  background: #1d2b28;
}
.ocp-body[data-for="other"] .b {
  background: #2f6b57;
}
.oc-page figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #eceef3;
  font: 600 12.5px/1.2 var(--sans);
  color: #1d2433;
}
.ocp-done {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  background: #e2f5e9;
  color: #17683b;
  font: 600 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ocp-done .ic {
  width: 11px;
  height: 11px;
}
.oc-pages.rise-in .oc-page {
  animation: pageIn 0.8s var(--ease) backwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.14s);
}
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(40px) rotate(0);
  }
}
.oc-pages.rise-in .ocp-body > * {
  animation: blockIn 0.45s var(--ease) backwards;
}
.oc-pages.rise-in .ocp-body > :nth-child(2) { animation-delay: calc(0.55s + var(--i, 0) * 0.14s); }
.oc-pages.rise-in .ocp-body > :nth-child(3) { animation-delay: calc(0.65s + var(--i, 0) * 0.14s); }
.oc-pages.rise-in .ocp-body > :nth-child(4) { animation-delay: calc(0.75s + var(--i, 0) * 0.14s); }
.oc-pages.rise-in .ocp-body > :nth-child(5) { animation-delay: calc(0.85s + var(--i, 0) * 0.14s); }
.oc-pages.rise-in .ocp-body > :nth-child(6) { animation-delay: calc(0.95s + var(--i, 0) * 0.14s); }
.oc-pages.rise-in .ocp-body > :nth-child(n + 7) { animation-delay: calc(1.05s + var(--i, 0) * 0.14s); }
@keyframes blockIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.oc-pages.rise-in .ocp-done {
  animation: donePop 0.5s var(--spring) backwards;
  animation-delay: calc(1.4s + var(--i, 0) * 0.2s);
}
@keyframes donePop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
/* what every built page is, as a plain checklist, so nothing reads as a button */
.oc-tech {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 28px;
}
.oc-tech li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.oc-tech .ic {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--good) 16%, transparent);
  color: var(--good);
}
.oc-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(48px, 6vw, 84px);
}
.oc-benefits li {
  padding: 22px 22px 24px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.oc-benefits li:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.ocb-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--hl);
  color: var(--hl-ink);
}
.ocb-ic svg {
  width: 21px;
  height: 21px;
}
.oc-benefits h3 {
  margin-bottom: 8px;
  font-size: clamp(1.22rem, 1.08rem + 0.4vw, 1.38rem);
  line-height: 1.15;
}
.oc-benefits p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.oc-promise {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  margin-top: 18px;
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: 24px;
  overflow: hidden;
}
.oc-promise::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1.1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 0% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 100% at 0% 50%, #000, transparent 75%);
  pointer-events: none;
}
.oc-quote {
  position: relative;
  font: 460 clamp(1.6rem, 1rem + 2vw, 2.6rem) / 1.18 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.oc-quote mark {
  color: var(--hl);
  background: none;
}
.oc-standard {
  position: relative;
  font-size: clamp(17px, 0.9rem + 0.45vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- framework ---------- */
.fw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.fw-radar {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 28px;
  background: radial-gradient(120% 90% at 50% 48%, rgba(224, 249, 74, 0.08), transparent 62%), var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.fw-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}
.fw-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 11.5px/1.3 var(--mono);
  color: var(--ink-3);
}
.fw-url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fw-url > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fw-url i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hl);
  box-shadow: 0 0 0 3px rgba(224, 249, 74, 0.2);
}
.fw-chip {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.radar {
  position: relative;
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  margin: 8px auto 0;
  overflow: visible;
}
.radar .disc {
  fill: url(#rgDisc);
}
.radar .ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}
.radar .ring.r3 {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-dasharray: 3 5;
}
.radar .ring.r5 {
  stroke: rgba(255, 255, 255, 0.2);
}
.radar .ring-n {
  font: 500 9.5px var(--mono);
  fill: rgba(255, 255, 255, 0.38);
}
.radar .sector {
  fill: var(--ac);
  fill-opacity: 0.16;
}
.radar .axis {
  stroke: var(--ac);
  stroke-opacity: 0.3;
  stroke-width: 1;
  transition: stroke-opacity 0.3s, stroke-width 0.3s;
}
.radar .axis.on {
  stroke-opacity: 1;
  stroke-width: 2;
}
.radar .poly-b {
  fill: rgba(240, 122, 100, 0.1);
  stroke: #f07a64;
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  stroke-linejoin: round;
}
.radar-key {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 2px;
  font: 500 12px/1.2 var(--mono);
  color: var(--ink-3);
}
.radar-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.radar-key span::before {
  content: "";
  width: 18px;
}
.radar-key .k-b::before {
  border-top: 2px dashed #f07a64;
}
.radar-key .k-a::before {
  height: 9px;
  border-radius: 3px;
  border: 1.5px solid #e0f94a;
  background: rgba(224, 249, 74, 0.45);
}
.radar-key b {
  font-weight: 600;
  color: var(--ink);
}
.radar .poly {
  fill: url(#rgPoly);
  stroke: #e0f94a;
  stroke-width: 2;
  stroke-linejoin: round;
  filter: url(#rgGlow);
}
.radar .vx {
  fill: var(--ac);
  stroke: #121317;
  stroke-width: 2.5;
  cursor: pointer;
  transition: r 0.3s var(--spring);
}
.radar .vx.on {
  r: 7.5px;
}
.radar .vx-ring {
  fill: none;
  stroke: var(--ac);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}
.radar .vx-ring.go {
  animation: vxPulse 1.3s var(--ease) 1;
}
.radar .vx-ring.off {
  display: none;
}
@keyframes vxPulse {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}
.radar .hub circle {
  fill: rgba(14, 15, 19, 0.92);
  stroke: rgba(255, 255, 255, 0.16);
}
.radar .hub-n {
  font: 540 25px var(--serif);
  fill: #f4f2ec;
  text-anchor: middle;
}
.radar .hub-l {
  font: 600 8.5px var(--mono);
  letter-spacing: 0.1em;
  fill: rgba(255, 255, 255, 0.5);
  text-anchor: middle;
}
.radar .lbl {
  cursor: pointer;
}
.radar .lbl-n {
  font: 600 13.5px var(--sans);
  fill: var(--ink-2);
  transition: fill 0.3s;
}
.radar .lbl-s {
  font: 600 12px var(--mono);
  fill: var(--ac);
}
.radar .lbl:hover .lbl-n,
.radar .lbl.on .lbl-n {
  fill: #ffffff;
}
.radar-cap {
  position: relative;
  max-width: 44ch;
  margin: 14px auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}
.fw-list {
  border-top: 1px solid var(--line);
}
.cat {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.fw-list.auto .cat.open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--c);
  transform-origin: 0 50%;
  animation: catFill var(--cat-ms, 10000ms) linear both;
}
.fw-list.hold .cat.open::after {
  animation-play-state: paused;
}
@keyframes catFill {
  from {
    transform: scaleX(0);
  }
}
.cat-btn {
  display: grid;
  grid-template-columns: 12px auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 4px;
  text-align: left;
  border-radius: 10px;
}
.cat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent);
  transition: transform 0.4s var(--spring);
}
.cat.open .cat-dot {
  transform: scale(1.25);
}
.cat-name {
  font-size: 17px;
  font-weight: 600;
}
.cat-q {
  font: italic 420 17px/1.3 var(--serif);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-chev {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: transform 0.4s var(--ease);
}
.cat.open .cat-chev {
  transform: rotate(180deg);
}
.cat-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.js .cat:not(.open) .cat-body {
  grid-template-rows: 0fr;
}
.cat-in {
  overflow: hidden;
  min-height: 0;
}
.js .cat:not(.open) .cat-in {
  visibility: hidden;
  transition: visibility 0s 0.5s;
}
.cat-sum {
  margin: 0 4px 0 30px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cat-sum span {
  display: block;
  margin-bottom: 4px;
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c);
}
.cat-ex {
  margin: 12px 4px 20px 30px;
  padding: 12px 14px;
  border-left: 3px solid var(--c);
  border-radius: 0 12px 12px 0;
  background: var(--card);
  font-size: 14.5px;
  line-height: 1.5;
}
.cat-ex span {
  display: block;
  margin-bottom: 3px;
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

/* ---------- sprint console ---------- */
.con {
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.con-title {
  font: 500 12.5px var(--mono);
  color: var(--ink-3);
}
.con-auto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font: 500 12px var(--mono);
  color: var(--ink-2);
  transition: border-color 0.2s, color 0.2s;
}
.con-auto:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}
.con-auto svg {
  width: 12px;
  height: 12px;
}
.con-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hl);
  animation: blink 1.4s infinite;
}
.con:not(.auto) .con-live {
  background: var(--ink-3);
  animation: none;
}
.con-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 16px;
  font: 500 11.5px var(--mono);
  color: var(--ink-3);
}
.con-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hl);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl) 25%, transparent);
}
/* four weeks of five working days, with the five calls marked */
.con-weeks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 11px 18px 13px;
  border-bottom: 1px solid var(--line);
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.wk {
  padding-left: 9px;
  border-left: 1px solid var(--line-2);
  transition: color 0.3s;
}
.wk.on {
  color: var(--ink);
}
.con-call {
  position: absolute;
  z-index: 1;
  bottom: -6px;
  left: calc(18px + (100% - 36px) * (var(--at) - 0.5) / 20);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line-2);
  transition: background-color 0.3s, border-color 0.3s, transform 0.45s var(--spring);
}
.con-call.on {
  background: var(--hl);
  border-color: var(--hl);
  transform: scale(1.3);
}
.con-span {
  position: absolute;
  bottom: -1.5px;
  height: 3px;
  left: calc(18px + (100% - 36px) * var(--s, 0) / 20);
  width: calc((100% - 36px) * var(--n, 1) / 20);
  border-radius: 3px;
  background: var(--hl);
  transition: left 0.6s var(--ease), width 0.6s var(--ease);
}
.con-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.con-tab {
  position: relative;
  padding: 13px 14px 15px;
  text-align: left;
  color: var(--ink-3);
  border-right: 1px solid var(--line);
  transition: background-color 0.3s, color 0.3s;
}
.con-tab:last-child {
  border-right: 0;
}
.con-tab:hover {
  color: var(--ink);
}
.con-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--card-2);
}
.ct-d {
  display: block;
  font: 500 11px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ct-t {
  display: block;
  margin-top: 4px;
  font-size: 15.5px;
  font-weight: 600;
}
.ct-call {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hl) 14%, transparent);
  color: var(--ink);
  font: 500 10.5px/1.4 var(--mono);
  white-space: nowrap;
}
.ct-call::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hl);
}
.ct-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}
.ct-bar i {
  display: block;
  height: 100%;
  background: var(--hl);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.con-tab[aria-selected="true"] .ct-bar i {
  transform: scaleX(1);
}
.con.auto .con-tab[aria-selected="true"] .ct-bar i {
  animation: tabFill var(--stage-ms, 8000ms) linear both;
}
@keyframes tabFill {
  from {
    transform: scaleX(0);
  }
}
.con-stage {
  position: relative;
  min-height: 430px;
  padding: clamp(18px, 3vw, 32px);
}
.cp {
  display: grid;
  gap: 22px;
}
.js .cp {
  display: none;
}
.js .cp.on {
  display: grid;
  animation: stageIn 0.55s var(--ease);
}
.js .cp.measure {
  display: grid;
  animation: none;
}
.cp:focus-visible {
  outline-offset: -3px;
}
@keyframes stageIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.con-get {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--hl) 7%, transparent);
}
.con-get-k {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--hl);
  color: var(--hl-ink);
  font: 600 11px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cg {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.js .cg {
  display: none;
}
.js .cg.on {
  display: block;
  animation: stageIn 0.45s var(--ease);
}
.panel {
  padding: 16px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}

/* kickoff */
.cp-kick {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.call-card {
  padding: 16px 18px 6px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.call-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.call-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.call-badge .ic {
  width: 13px;
  height: 13px;
}
.call-t {
  font-size: 16px;
  font-weight: 600;
}
.call-len {
  margin-left: auto;
  font: 500 11.5px var(--mono);
  color: var(--ink-3);
}
.call-who {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 16px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.who {
  display: grid;
  justify-items: center;
  gap: 6px;
  font: 500 10.5px var(--mono);
  color: var(--ink-3);
}
.who em {
  font-style: normal;
}
.who img,
.who[data-i]::before {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--card-2), 0 0 0 4.5px transparent;
}
.who[data-i]::before {
  content: attr(data-i);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 24%, var(--card));
  color: var(--ink);
  font: 600 14px var(--sans);
}
.cp.on .who img,
.cp.on .who[data-i]::before {
  animation: speak 8s infinite;
  animation-delay: calc(0.8s + var(--k, 0) * 1.6s);
}
@keyframes speak {
  0%,
  17% {
    box-shadow: 0 0 0 2px var(--card-2), 0 0 0 4.5px var(--hl);
  }
  20%,
  100% {
    box-shadow: 0 0 0 2px var(--card-2), 0 0 0 4.5px transparent;
  }
}
.agenda li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.4;
}
.agenda li:last-child {
  border-bottom: 0;
}
.call-notes {
  display: grid;
  gap: 10px;
  align-content: start;
}
.notes {
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.notes > div {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 14px;
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
}
.notes > div:last-child {
  border-bottom: 0;
}
.notes dt {
  font: 500 13px/1.5 var(--sans);
  color: var(--ink-3);
}
.notes dd {
  font-size: 14.5px;
  line-height: 1.45;
}
.cp.on .notes > div {
  animation: slideIn 0.5s var(--ease) both;
  animation-delay: calc(1s + var(--i, 0) * 0.2s);
}

/* review: the live link, round by round, in the audience's brand */
[data-seg="shop"] .rv-page {
  --rv-a: #2f4a3a;
  --rv-n: #2a2622;
  --rv-f: Georgia, "Times New Roman", serif;
}
[data-seg="other"] .rv-page {
  --rv-a: #2f6b57;
  --rv-n: #1d2b28;
  --rv-f: Georgia, "Times New Roman", serif;
}
/* review: the rounds and the comments on the left, the live link on the right */
.cp-rev {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: start;
}
.cp-rev .rv-side {
  order: -1;
}
.rv-page {
  --rv-a: #3e63f5;
  --rv-n: #1e2a4a;
  --rv-f: var(--sans);
  position: relative;
  container-type: inline-size;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.rv-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #f1f2f5;
  border-bottom: 1px solid #e3e5ea;
}
.rv-bar .dots i {
  width: 8px;
  height: 8px;
  background: #d3d6dd;
}
.rv-url {
  flex: 1;
  min-width: 0;
  padding: 3px 10px;
  border-radius: 6px;
  background: #ffffff;
  font: 500 11px var(--mono);
  color: #5f6675;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-ver {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: #15161b;
  color: #e0f94a;
  font: 600 10.5px/1.4 var(--mono);
}
.rv-body {
  position: relative;
  padding-bottom: 1.2em;
  font-size: 2.3cqw;
  line-height: 1.35;
  color: var(--rv-n);
}
.rv-nav {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.9em 1.3em;
  border-bottom: 1px solid #eceef3;
}
.rv-nav i {
  width: 2.6em;
  height: 0.5em;
  border-radius: 0.3em;
  background: #e5e8ef;
}
.rv-nav .lg {
  width: 4.2em;
  height: 0.95em;
  margin-right: auto;
  background: var(--rv-n);
}
.rv-nav .bt {
  width: 4.4em;
  height: 1.5em;
  border-radius: 0.4em;
  background: var(--rv-a);
}
.rv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.3em;
  padding: 1.4em 1.3em 1.2em;
}
.rv-h1 {
  font: 700 1.5em/1.12 var(--rv-f);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.rv-sub {
  display: grid;
  gap: 0.4em;
  margin-top: 0.7em;
}
.rv-sub i {
  height: 0.5em;
  border-radius: 0.3em;
  background: #e5e8ef;
}
.rv-sub .s {
  width: 70%;
}
.rv-cta {
  margin-top: 0.9em;
}
.rv-btn {
  display: inline-block;
  padding: 0.65em 1em;
  border-radius: 0.45em;
  background: var(--rv-a);
  color: #ffffff;
  font-size: 0.82em;
  font-weight: 600;
}
.rv-note {
  position: relative;
  display: inline-block;
  margin-top: 0.55em;
  padding: 0.2em 0.35em;
  border-radius: 0.4em;
  font-size: 0.74em;
  font-weight: 600;
  color: #1f8a55;
}
.rv-img {
  position: relative;
  height: 9em;
  border-radius: 0.8em;
  background: linear-gradient(135deg, #e3e7ee, #c7cfdb);
  transition: background 0.8s var(--ease);
}
.rv-img::after {
  content: "";
  position: absolute;
  left: 32%;
  bottom: 0;
  width: 36%;
  height: 62%;
  border-radius: 50% 50% 0.4em 0.4em;
  background: rgba(255, 255, 255, 0.45);
}
.rv-page:not([data-round="1"]) .rv-img {
  background: linear-gradient(135deg, #f8dcb8, #eaa77a 55%, #c9795a);
}
/* for the SaaS page, round 2 swaps the stock photo for the product at work */
.rv-prod {
  position: absolute;
  inset: 0;
  display: none;
  align-content: center;
  justify-items: center;
  gap: 0.5em;
  padding: 0.8em;
}
.rv-prod i {
  display: block;
  width: 58%;
  height: 1.3em;
  border-radius: 0.35em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #d9dfeb, 0 0.3em 0.6em -0.4em rgba(30, 42, 74, 0.5);
}
.rv-prod > i:first-child {
  box-shadow: inset 0.3em 0 0 #3e63f5, inset 0 0 0 1px #d9dfeb;
}
.rv-prod span {
  display: flex;
  gap: 0.5em;
  width: 80%;
}
.rv-prod span i {
  flex: 1;
  width: auto;
}
.rv-prod span i:first-child {
  box-shadow: inset 0 0 0 1.5px #1f8a55;
}
[data-seg="saas"] .rv-page:not([data-round="1"]) .rv-img {
  background: radial-gradient(circle at 0.15em 0.15em, #dde3ee 0.08em, transparent 0.1em) 0 0 / 0.9em 0.9em, #f7f9fd;
  box-shadow: inset 0 0 0 1px #e3e7ef;
}
[data-seg="saas"] .rv-page:not([data-round="1"]) .rv-img::after {
  display: none;
}
[data-seg="saas"] .rv-page:not([data-round="1"]) .rv-prod {
  display: grid;
}
.rv-faq {
  position: relative;
  display: grid;
  gap: 0.45em;
  margin: 0 1.3em;
  padding: 0.9em 0.4em 0.4em;
  border-top: 1px solid #eceef3;
  border-radius: 0.4em;
}
.rv-faq b {
  font-size: 0.8em;
}
.rv-faq i {
  height: 0.55em;
  border-radius: 0.3em;
  background: #edf0f5;
  transition: opacity 0.5s, height 0.5s var(--ease), margin 0.5s var(--ease);
}
.rv-faq i:nth-of-type(2n) {
  width: 84%;
}
.rv-page[data-round="3"] .rv-faq .x {
  opacity: 0;
  height: 0;
  margin-top: -0.45em;
}
/* what changed in this round glows */
.rv-page[data-round="1"] .rv-note,
.rv-page[data-round="2"] .rv-img,
.rv-page[data-round="3"] .rv-faq {
  box-shadow: 0 0 0 2px #e0f94a, 0 0 0 7px rgba(224, 249, 74, 0.28);
  animation: changedIn 0.7s var(--ease);
}
@keyframes changedIn {
  from {
    box-shadow: 0 0 0 2px transparent, 0 0 0 16px rgba(224, 249, 74, 0);
  }
}
.rv-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 4px;
  background: #1d7a47;
  color: #ffffff;
  font: 700 11.5px/1 var(--sans);
  box-shadow: 0 0 0 2px #ffffff, 0 6px 14px -4px rgba(0, 0, 0, 0.45);
  transform: scale(0);
  transition: transform 0.4s var(--spring), background-color 0.3s, color 0.3s;
}
.rv-note .rv-pin {
  top: 50%;
  left: calc(100% + 10px);
  margin-top: -12px;
}
.rv-img .rv-pin {
  top: 12%;
  right: 10%;
}
.rv-faq .rv-pin {
  top: -12px;
  right: 6%;
}
.rv-page[data-round="1"] [data-pin="1"],
.rv-page[data-round="2"] [data-pin="1"],
.rv-page[data-round="2"] [data-pin="2"],
.rv-page[data-round="3"] .rv-pin {
  transform: scale(1);
}
.rv-page[data-round="1"] [data-pin="1"],
.rv-page[data-round="2"] [data-pin="2"],
.rv-page[data-round="3"] [data-pin="3"] {
  background: #e0f94a;
  color: #15161b;
}
.rv-side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.rv-rounds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.rv-rounds button {
  display: grid;
  gap: 2px;
  padding: 8px 11px;
  border-radius: 10px;
  text-align: left;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color 0.25s, color 0.25s;
}
.rv-rounds button:hover {
  color: var(--ink);
}
.rv-rounds small {
  font: 500 11px/1.3 var(--mono);
  color: var(--ink-3);
}
.rv-rounds button[aria-selected="true"] {
  background: var(--hl);
  color: var(--hl-ink);
}
.rv-rounds button[aria-selected="true"] small {
  color: rgba(21, 22, 27, 0.7);
}
.rv-thread li {
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.rv-thread li.later {
  display: none;
}
.rv-thread li.now {
  border-color: color-mix(in srgb, var(--hl) 60%, transparent);
  box-shadow: inset 3px 0 0 var(--hl);
}
.rv-thread li.now em,
.rv-thread li.done em {
  color: var(--good);
}
.rv-thread li.now .rev-n {
  background: var(--hl);
  color: var(--hl-ink);
}
.rv-thread li.done .rev-n {
  background: transparent;
  color: var(--good);
  box-shadow: inset 0 0 0 2px var(--good);
}

@keyframes pinPop {
  from {
    transform: scale(0);
  }
}

.rev-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.rev-thread {
  display: grid;
  gap: 8px;
}
.rev-thread li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.rev-thread b {
  display: block;
  margin-bottom: 2px;
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.rev-thread em {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font: normal 500 11.5px var(--mono);
  color: var(--warn);
}
.rev-thread li.done em {
  color: var(--good);
}
.rev-thread em::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.rev-n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 4px;
  background: var(--hl);
  color: var(--hl-ink);
  font: 700 12px/1 var(--sans);
}
.rev-thread li.done .rev-n {
  background: transparent;
  color: var(--good);
  box-shadow: inset 0 0 0 2px var(--good);
}
.rv-thread li.now {
  animation: slideIn 0.45s var(--ease) both;
}

/* ticks, shared by the kickoff agenda, the teardown and the handover list */
.tick {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--hl);
}
.tick::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--hl-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
}
.cp.on .tick {
  animation: spin 0.75s linear 1, tickDone 0.01s linear forwards;
  animation-delay: calc(var(--i, 0) * 0.28s), calc(var(--i, 0) * 0.28s + 0.75s);
}
.cp.on .tick::after {
  animation: tickMark 0.4s var(--spring) forwards;
  animation-delay: calc(var(--i, 0) * 0.28s + 0.78s);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tickDone {
  to {
    background: var(--hl);
    border-color: var(--hl);
    transform: none;
  }
}
@keyframes tickMark {
  to {
    transform: rotate(45deg) scale(1);
  }
}

.cap-issue {
  padding: 12px 14px;
  border-radius: 12px;
  border-left: 3px solid #f5a524;
  background: color-mix(in srgb, #f5a524 10%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.cap-issue b {
  display: block;
  margin-bottom: 2px;
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f5a524;
}

/* ideation: every idea on one board, scored, the strongest shortlisted */
.cp-idea {
  gap: 16px;
}
.idea-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.icol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.icol-short {
  background: color-mix(in srgb, var(--hl) 6%, var(--card-2));
  border-color: color-mix(in srgb, var(--hl) 45%, transparent);
}
.icol-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 4px;
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.icol-h b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.icol-short .icol-h b {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
}
.icards {
  display: grid;
  gap: 7px;
}
.icard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.35;
}
.icard .src {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 3px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--sc) 16%, transparent);
  color: var(--sc);
  font: 600 10px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.s-td {
  --sc: var(--c0);
}
.s-cp {
  --sc: var(--c1);
}
.s-bc {
  --sc: var(--c3);
}
.s-team {
  --sc: var(--c2);
}
.s-an {
  --sc: var(--c4);
}
.icard .it {
  font-weight: 500;
}
.ice-b {
  padding: 2px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  font: 600 12px/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
}
.icol-short .icard {
  border-left: 3px solid var(--hl);
}
.icol-short .ice-b {
  background: var(--hl);
  color: var(--hl-ink);
}
.imore {
  padding: 2px 4px 0;
  font: 500 11.5px var(--mono);
  color: var(--ink-3);
}
.cp.on .icard {
  animation: cardIn 0.5s var(--spring) both;
  animation-delay: calc(0.15s + var(--i, 0) * 0.09s);
}

/* teardown */
.cp-dg {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.dg-src {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.dg-src .dg-k {
  flex: none;
  margin: 0;
}
.dg-src-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 16px;
}
.dg-src-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.35;
}
.dg-src-list .tick {
  flex: none;
}
.dg-box .cap-issue {
  margin-top: 12px;
}
.dg-card,
.dg-box {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.dg-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.dg-h .mono {
  color: var(--ink);
  font-size: 13px;
}
.dg-total {
  margin-left: auto;
  font: 500 13px var(--mono);
  color: var(--ink-3);
}
.dg-total .cnt {
  font: 540 28px/1 var(--serif);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.bars {
  display: grid;
  gap: 11px;
}
.bars li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.bars .b {
  height: 8px;
}
.bars b {
  font: 600 12.5px var(--mono);
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dg-side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.dg-k {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dg-k small {
  font-size: 10.5px;
  text-transform: none;
  letter-spacing: 0;
}
.dots5 {
  display: grid;
  gap: 7px;
}
.dots5 li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(5, 11px);
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.dots5 i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
}
.cp.on .dots5 i.f {
  animation: dotFill 0.3s var(--spring) forwards;
  animation-delay: calc(0.4s + var(--j, 0) * 0.06s);
}
@keyframes dotFill {
  to {
    background: var(--hl);
    border-color: var(--hl);
  }
}
.dg-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.dg-note b {
  display: block;
  font: 600 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hl);
}
.sevbar {
  display: flex;
  gap: 3px;
  height: 12px;
}
.sevbar i {
  width: 0;
  border-radius: 3px;
  transition: width 1s var(--ease);
}
.cp.on .sevbar i {
  width: var(--w);
}
.sevbar .h,
.sevkey .h::before {
  background: #e5484d;
}
.sevbar .m,
.sevkey .m::before {
  background: #f5a524;
}
.sevbar .l,
.sevkey .l::before {
  background: var(--ink-3);
}
.sevbar .m {
  transition-delay: 0.15s;
}
.sevbar .l {
  transition-delay: 0.3s;
}
.sevkey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.sevkey span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
}

.cmp-lead {
  font-size: 15px;
  color: var(--ink-2);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}

/* direction: call 2, where every fix on the shortlist gets its place on a page and everyone agrees the plan */
.cp-dir {
  grid-template-columns: minmax(0, 318px) minmax(0, 1fr);
  align-items: start;
}
.dir-left {
  display: grid;
  gap: 12px;
  align-content: start;
}
.cp-dir .call-who {
  gap: 10px;
}
.who {
  position: relative;
}
.who-ok {
  position: absolute;
  top: 26px;
  left: 50%;
  margin-left: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hl);
  color: var(--hl-ink);
  box-shadow: 0 0 0 2px var(--card-2);
  transform: scale(0);
}
.who-ok svg {
  width: 11px;
  height: 11px;
}
.cp.on .who-ok {
  animation: okPop 0.45s var(--spring) forwards;
  animation-delay: calc(4.4s + var(--k, 0) * 0.14s);
}
@keyframes okPop {
  to {
    transform: scale(1);
  }
}
.dir-sign {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 6px 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.dir-stamp {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
  font: 600 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dir-stamp svg {
  width: 13px;
  height: 13px;
}
.cp.on .dir-stamp {
  animation: stampIn 0.5s var(--spring) 5.3s backwards;
}
@keyframes stampIn {
  from {
    opacity: 0;
    transform: scale(1.5) rotate(-8deg);
  }
}
.dir-agree {
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.da-n {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.da-n b {
  flex: none;
  font: 540 42px/1 var(--serif);
  letter-spacing: -0.03em;
  color: var(--hl);
  font-variant-numeric: tabular-nums;
}
.da-n span {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.da-bar {
  height: 6px;
  margin-top: 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.da-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--hl);
}
.cp.on .da-bar i {
  animation: barGrow 0.9s var(--ease) 1.5s backwards;
}

/* teardown: a scan runs across four pages, every finding lights up, then each one drops into its category */
.cp-td {
  grid-template-columns: minmax(0, 1fr);
}
.tdx {
  position: relative;
  display: grid;
  gap: 26px;
}
.tdx-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tdx-k {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font: 500 12px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.tdx-k b {
  font: 540 32px/1 var(--serif);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tdx-k small {
  font: 500 13px/1 var(--mono);
  color: var(--ink-3);
}
.js .tdx-total {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.js .cp-td.scored .tdx-total {
  opacity: 1;
  transform: none;
}
.tdx-total b {
  color: var(--hl);
}
.tdx-pages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tdx-pg {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.cp.on .tdx-pg {
  animation: cardIn 0.5s var(--spring) both;
  animation-delay: calc(0.05s + var(--i, 0) * 0.1s);
}
.tdx-shot {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1.4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(21, 22, 27, 0.08);
}
.tdx-pg figcaption {
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
/* the pages themselves: plain wireframes, so the findings stand out */
.tdw {
  --wn: #1e2a4a;
  --wa: #3e63f5;
  --wl: #e6e9f0;
  --ws: #f3f5fa;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 0.9em 1.1em;
  border-radius: inherit;
  overflow: hidden;
  font-size: 2.5cqw;
}
.tdw i {
  display: block;
  flex: none;
  height: 0.7em;
  border-radius: 0.35em;
  background: var(--wl);
}
.tdw .hd {
  width: 92%;
  height: 1.25em;
  background: var(--wn);
}
.tdw .hd.s {
  width: 62%;
}
.tdw .tx {
  width: 96%;
}
.tdw .tx.s {
  width: 70%;
}
.tdw .bt {
  width: 4.8em;
  height: 1.5em;
  background: var(--wa);
}
.tdw .bt.o {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--wa);
}
.tdw .img {
  height: auto;
  border-radius: 0.6em;
  background: linear-gradient(160deg, #e9edf6, #d6dcea);
}
.tdw-nav {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--wl);
}
.tdw-nav i {
  width: 2.4em;
  height: 0.5em;
}
.tdw-nav .lg {
  width: 3.4em;
  height: 0.85em;
  background: var(--wn);
}
.tdw-nav .bt {
  width: 3.8em;
  height: 1.2em;
  margin-left: auto;
}
.tdw-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1em;
  flex: 1;
  min-height: 0;
}
.tdw-hero > div,
.tdw-prod > div,
.tdw-form > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6em;
  min-width: 0;
}
.tdw-row,
.tdw-chips {
  display: flex;
  gap: 0.5em;
  margin-top: 0.3em;
}
.tdw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6em;
}
.tdw-cards i {
  height: 2.8em;
  border-radius: 0.5em;
  background: var(--ws);
  box-shadow: inset 0 0 0 1px var(--wl);
}
.tdw-logos {
  display: flex;
  gap: 0.8em;
}
.tdw-logos i {
  flex: 1;
  height: 0.6em;
}
.tdw-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.tdw-title .hd {
  width: 58%;
}
.tdw-title .tx {
  width: 38%;
}
.tdw-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6em;
  flex: 1;
  min-height: 0;
}
.tdw-plans p {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.6em;
  border-radius: 0.6em;
  box-shadow: inset 0 0 0 1px var(--wl);
}
.tdw-plans .rec {
  box-shadow: inset 0 0 0 1.5px var(--wa);
}
.tdw-plans .nm {
  width: 60%;
}
.tdw-plans .pr {
  width: 78%;
  height: 1.2em;
  background: var(--wn);
}
.tdw-plans .ln {
  width: 92%;
  height: 0.5em;
}
.tdw-plans .bt {
  width: 100%;
  height: 1.3em;
  margin-top: auto;
}
.tdw-faq {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
.tdw-faq i {
  width: 100%;
  height: 0.6em;
}
.tdw-prod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  flex: 1;
  min-height: 0;
}
.tdw-prod .pr {
  width: 42%;
  height: 1.1em;
  background: var(--wn);
}
.tdw-prod .bt {
  width: 100%;
}
.tdw-chips i {
  width: 2.4em;
  height: 1.4em;
  background: var(--ws);
  box-shadow: inset 0 0 0 1px var(--wl);
}
.tdw-chips .on {
  box-shadow: inset 0 0 0 1.5px var(--wn);
}
.tdw-form {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1.2em;
  flex: 1;
  align-items: center;
  min-height: 0;
}
.tdw-card {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 0.8em;
  border-radius: 0.7em;
  background: var(--ws);
  box-shadow: inset 0 0 0 1px var(--wl);
}
.tdw-card .f {
  width: 100%;
  height: 1.3em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--wl);
}
.tdw-card .bt {
  width: 100%;
  height: 1.4em;
}
/* the scan beam and the findings it lights up */
.tdx-beam {
  position: absolute;
  top: -10px;
  bottom: 18px;
  left: 0;
  z-index: 3;
  width: 80px;
  margin-left: -80px;
  background: linear-gradient(90deg, rgba(224, 249, 74, 0), rgba(224, 249, 74, 0.26));
  border-right: 2px solid var(--hl);
  box-shadow: 10px 0 26px -8px rgba(224, 249, 74, 0.55);
  opacity: 0;
  pointer-events: none;
}
.cp-td.scanning .tdx-beam {
  animation: tdxBeam 3s linear 0.6s forwards;
}
@keyframes tdxBeam {
  0% {
    left: 0;
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
.tdx-mk,
.tdx-f {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--sv);
  box-shadow: 0 0 0 2px #ffffff, 0 4px 10px -2px rgba(0, 0, 0, 0.45);
}
.tdx-mk.h,
.tdx-f.h {
  --sv: #e5484d;
}
.tdx-mk.m,
.tdx-f.m {
  --sv: #f5a524;
}
.tdx-mk.l,
.tdx-f.l {
  --sv: #9aa3b2;
}
.tdx-mk {
  z-index: 2;
  transform: scale(0);
  transition: transform 0.4s var(--spring), opacity 0.45s;
}
.tdx-mk.in {
  transform: scale(1);
}
.tdx-mk.in::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--sv);
  opacity: 0;
  animation: tdxPing 1.1s var(--ease);
}
@keyframes tdxPing {
  from {
    transform: scale(0.8);
    opacity: 0.9;
  }
  to {
    transform: scale(2.2);
    opacity: 0;
  }
}
/* once it has dropped into its category, a faint mark stays where the finding was */
.tdx-mk.gone {
  opacity: 0.28;
  transform: scale(0.55);
}
.tdx-fly,
.dir-fly {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.fly {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 16px 2px rgba(255, 255, 255, 0.18);
}
/* the seven categories, filling up as the findings land */
.tdx-cats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.tdx-cat {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.tdx-bin {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  gap: 5px;
  height: 84px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--c) 42%, transparent);
  transition: background-color 0.5s, border-color 0.5s;
}
.tdx-shot {
  transition: opacity 0.6s var(--ease);
}
.cp-td.scored .tdx-shot {
  opacity: 0.62;
}
.cp-td.scored .tdx-bin {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-style: solid;
}
.tdx-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
}
.tdx-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.tdx-name i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.tdx-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.tdx-b {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.tdx-b i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  transform-origin: 0 50%;
  transform: scaleX(var(--v, 0));
  transition: transform 0.9s var(--ease) calc(var(--i, 0) * 0.06s);
}
.tdx-score b {
  font: 600 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ideation: a board with a column per key page; ideas land, get scored, and the best leads its page */
.cp-idea {
  grid-template-columns: minmax(0, 1fr);
}
.ida {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ida-src {
  display: grid;
  gap: 12px;
  align-content: start;
}
.ida-list {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.ida-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  transition: color 0.3s;
}
.ida-list li > i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 25%, transparent);
  transition: transform 0.35s var(--spring), box-shadow 0.35s;
}
.ida-list li.on {
  color: var(--ink);
}
.ida-list li.on > i {
  transform: scale(1.3);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc) 30%, transparent);
}
.ida-list b {
  font-weight: 600;
}
.ida-list em {
  font: 600 13px/1 var(--mono);
  font-style: normal;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cp.on .ida-list li {
  animation: slideIn 0.45s var(--ease) both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.08s);
}
.ida-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  transition: color 0.4s;
}
.ida-total b {
  display: block;
  margin-bottom: 4px;
  font: 540 34px/1 var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cp-idea.scoring .ida-total {
  color: var(--ink);
}
/* the three bars: impact, confidence and ease */
.ice-key,
.kc-ice {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.ice-key {
  margin: 0 2px;
  vertical-align: -1px;
}
.ice-key i,
.kc-ice i {
  width: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--hl) 70%, var(--ink-3));
}
.ice-key i:nth-child(1) {
  height: 12px;
}
.ice-key i:nth-child(2) {
  height: 9px;
}
.ice-key i:nth-child(3) {
  height: 10px;
}
.kc-ice i {
  height: calc(var(--v) * 12px);
}
/* the board */
.pb {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.pb-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pb-col,
.pb-test,
.pb-drop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 11px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
}
.pb-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font: 600 11.5px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.pb-n {
  margin-left: auto;
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pb-test .pb-n,
.pb-drop .pb-n {
  background: var(--card-2);
  color: var(--ink);
}
.pb-body {
  position: relative;
  height: 236px;
}
.pb-f {
  padding: 0 2px;
  font-size: 12px;
  color: var(--ink-3);
}
/* an idea card: what it is and where it came from, then its score */
.kc {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  align-content: space-between;
  height: 72px;
  padding: 9px 11px 8px;
  border-radius: 11px;
  background: var(--card-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(calc(var(--row, 0) * 82px)) scale(0.96);
  transition: transform 0.7s var(--ease), opacity 0.35s, border-color 0.4s, box-shadow 0.4s;
}
.kc.on {
  opacity: 1;
  transform: translateY(calc(var(--row, 0) * 82px));
}
.kc-t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 44px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
}
.kc-m {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-3);
}
.kc-src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.kc-src i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc);
}
.kc-m .kc-ice {
  margin-left: auto;
}
.kc-s {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
  font: 700 11px/1.35 var(--mono);
}
.kc-m .kc-ice,
.kc-s {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s, transform 0.4s var(--spring), background-color 0.4s, color 0.4s;
}
.kc.scored .kc-ice,
.kc.scored .kc-s {
  opacity: 1;
  transform: none;
}
/* the strongest idea on each page leads it */
.kc.lead {
  border-color: color-mix(in srgb, var(--hl) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl) 10%, transparent), 0 8px 18px -12px rgba(0, 0, 0, 0.6);
}
.kc.lead .kc-s {
  background: var(--hl);
  color: var(--hl-ink);
}
.kc-lead {
  position: absolute;
  top: 8px;
  right: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
  font: 700 10px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.45s var(--spring);
}
.kc.lead .kc-lead {
  opacity: 1;
  transform: none;
  transition-delay: 0.45s;
}
/* under the board: kept to test later, and the odd one dropped */
.pb-lane {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}
.pb-test,
.pb-drop {
  border-style: dashed;
  background: none;
}
.pb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 11px;
  border-radius: 9px;
  border: 1px dashed var(--line-2);
  background: var(--card-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.lc b {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  font: 700 11px/1.35 var(--mono);
  color: var(--ink);
}
.lc.x {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 0.6;
}
.lc-more {
  font-size: 12px;
  color: var(--ink-3);
}
.js .pb-lane {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.js .cp-idea.done .pb-lane {
  opacity: 1;
  transform: none;
}

/* direction: everything I found flows into a first prototype of all three pages, and the team agrees on it */
.cp-dir {
  position: relative;
}
.dir-src {
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.src-list {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}
.src-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: 11px;
  row-gap: 1px;
  align-items: center;
}
.src-list li > i {
  grid-row: span 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 25%, transparent);
}
.src-list b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.src-list span {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-3);
}
.cp.on .src-list li {
  animation: slideIn 0.45s var(--ease) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.14s);
}
.cp-dir {
  align-items: stretch;
}
.cp-dir .dir-board {
  align-items: stretch;
}
.cp-dir .dpg {
  grid-template-rows: auto minmax(0, 1fr);
  padding-bottom: 12px;
}
.cp-dir .bp {
  aspect-ratio: auto;
  height: 100%;
  min-height: 380px;
  font-size: 10px;
}
/* in the tall prototypes the top of each page keeps its natural height, and the page carries on below */
.cp-dir .bp .bp-hero,
.cp-dir .bp .bp-plans,
.cp-dir .bp .bp-grid,
.cp-dir .bp .bp-pdp,
.cp-dir .bp .bp-stories {
  flex: none;
}
.cp-dir .bp .bp-hero,
.cp-dir .bp .bp-pdp {
  min-height: 13em;
}
.bp .bp-more {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6em;
  margin-top: 0.8em;
}
.bp .bp-more > span {
  flex-direction: column;
  gap: 0.45em;
  padding: 0.7em;
  border-radius: 0.5em;
  background: var(--bs);
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp .bp-more i {
  width: 90%;
}
.bp .bp-more .s {
  width: 60%;
}
.bp .bp-more .ic {
  width: 1.7em;
  height: 1.7em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--ba) 22%, #ffffff);
}
.bp .bp-split {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.9em;
  min-height: 6em;
}
.bp .bp-txt {
  flex-direction: column;
  gap: 0.5em;
}
.bp .bp-txt i {
  width: 95%;
}
.bp .bp-txt .h {
  width: 80%;
  height: 0.95em;
  background: var(--bn);
}
.bp .bp-txt .s {
  width: 60%;
}
.bp .bp-split .im {
  height: 100%;
  min-height: 5em;
  border-radius: 0.6em;
  background: linear-gradient(160deg, var(--bs), var(--bl));
}
.bp .bp-band {
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.9em 1em;
  border-radius: 0.6em;
  background: var(--bn);
}
.bp .bp-band .t {
  width: 45%;
  height: 0.8em;
  background: rgba(255, 255, 255, 0.55);
}
.bp .bp-band .bt {
  width: 5em;
  height: 1.5em;
  background: var(--ba);
}
.bp .bp-foot {
  gap: 0.8em;
  margin-top: auto;
  padding-top: 0.8em;
  border-top: 1px solid var(--bl);
}
.bp .bp-foot i {
  flex: 1;
  height: 0.5em;
}
/* direction, laid out: the prototypes across the top with a one-line key to their pins, then everything
   brought to call 2 flowing into the call itself, which is where the step ends */
.cp-dir {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.cp-dir .dir-src {
  display: grid;
  grid-template-columns: 15ch minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 2px;
  background: none;
  border: 0;
}
.cp-dir .dir-src .src-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 0;
}
.dir-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
}
.dir-brought {
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.dir-agenda {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.dir-agenda li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
}
.da-ic {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.da-ic svg {
  width: 16px;
  height: 16px;
}
.dir-agenda b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.dir-agenda span:last-child {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-3);
}
.cp.on .dir-agenda li {
  animation: slideIn 0.45s var(--ease) both;
  animation-delay: calc(3.1s + var(--i, 0) * 0.22s);
}
/* the arrow that says all of it goes into the call */
.dir-into {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hl);
  color: var(--hl-ink);
}
.dir-into .ic {
  width: 16px;
  height: 16px;
}
.cp.on .dir-into {
  animation: cardIn 0.45s var(--spring) 3.9s both;
}
/* call 2: the destination, lit */
.dir-foot .call-card {
  margin: 0;
}
.dir-call {
  background: color-mix(in srgb, var(--hl) 7%, var(--card-2));
  border-color: color-mix(in srgb, var(--hl) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl) 22%, transparent), 0 22px 44px -26px color-mix(in srgb, var(--hl) 55%, transparent);
}
/* the prototype is the real page before it gets your brand: in greys, with each input marked where it shaped the page */
.dpr .ho-pg .hp {
  filter: grayscale(0.92) contrast(0.96);
}
.dpr-v {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #15161b;
  color: var(--hl);
  font: 700 9.5px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ho-scr.dpr figcaption::after {
  content: none;
}
.dpr .ho-pg {
  height: 52cqw;
}
.dir-pin {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--sc);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px color-mix(in srgb, var(--sc) 25%, transparent), 0 4px 10px -3px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--spring);
}
.dir-pin[data-src="scan"] {
  --sc: var(--c0);
}
.dir-pin[data-src="team"] {
  --sc: var(--c2);
}
.dir-pin[data-src="comp"] {
  --sc: var(--c1);
}
.dir-pin[data-src="an"] {
  --sc: var(--c4);
}
.js .cp-dir .dir-pin {
  transform: scale(0);
}
.js .cp-dir .dir-pin.in {
  transform: scale(1);
}
/* point at an input and the parts of the prototype it shaped grow */
.cp-dir:has(.src-list .s-td:hover) .dir-pin[data-src="scan"],
.cp-dir:has(.src-list .s-team:hover) .dir-pin[data-src="team"],
.cp-dir:has(.src-list .s-cp:hover) .dir-pin[data-src="comp"],
.cp-dir:has(.src-list .s-an:hover) .dir-pin[data-src="an"] {
  transform: scale(1.5);
}
.dpg-h .v1 {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hl) 45%, transparent);
  color: var(--hl);
  font-size: 10px;
}
/* each page as a blueprint, with a numbered pin where each fix goes */
.dir-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.dpg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 12px 12px 4px;
  border-radius: 16px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.cp.on .dpg {
  animation: cardIn 0.5s var(--spring) both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.12s);
}
.dpg-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
}
.dpg-h span {
  font-weight: 500;
  color: var(--ink-3);
}
.bp {
  --bn: #1e2a4a;
  --ba: #3e63f5;
  --bl: #e3e7ef;
  --bs: #f3f5fa;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  min-width: 0;
  aspect-ratio: 16 / 11;
  padding: 0.75em 0.85em;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(21, 22, 27, 0.1), 0 10px 22px -12px rgba(0, 0, 0, 0.55);
  font-size: 9px;
}
.bp-shop {
  --bn: #2a2622;
  --ba: #2f4a3a;
  --bl: #e8e1d6;
  --bs: #f4efe7;
}
.bp-firm {
  --bn: #1d2b28;
  --ba: #2f6b57;
  --bl: #dfe6e3;
  --bs: #eef2f0;
}
.bp i {
  display: block;
  flex: none;
  height: 0.55em;
  border-radius: 0.3em;
  background: var(--bl);
}
.bp span {
  position: relative;
  display: flex;
  gap: 0.4em;
  min-width: 0;
}
.bp .bp-nav {
  align-items: center;
  gap: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--bl);
}
.bp-nav i {
  width: 2.2em;
  height: 0.45em;
}
.bp-nav .lg {
  width: 3em;
  height: 0.75em;
  background: var(--bn);
}
.bp-nav .bt {
  width: 3.4em;
  height: 1.05em;
  margin-left: auto;
  background: var(--ba);
}
.bp .bp-hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 0.8em;
}
.bp .bp-col {
  flex-direction: column;
  gap: 0.45em;
}
.bp .ey {
  width: 45%;
  height: 0.8em;
  background: color-mix(in srgb, var(--ba) 18%, #ffffff);
}
.bp .bp-h1 {
  flex-direction: column;
  gap: 0.35em;
}
.bp-h1 i {
  width: 100%;
  height: 0.95em;
  background: var(--bn);
}
.bp-h1 .s {
  width: 70%;
}
.bp .p {
  width: 85%;
}
.bp .bp-cta {
  align-items: center;
  gap: 0.5em;
}
.bp .bt {
  width: 5em;
  height: 1.5em;
  border-radius: 0.4em;
  background: var(--ba);
}
.bp .bt.o {
  background: transparent;
  box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--bn) 35%, transparent);
}
.bp .bt.w {
  width: 100%;
}
.bp .ok {
  width: 3.4em;
  height: 0.5em;
  background: #9fd8b5;
}
.bp .bp-vis {
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  gap: 0.45em;
  padding: 0.6em;
  border-radius: 0.6em;
  background: var(--bs);
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-vis > i,
.bp-vis .br i {
  height: 1.2em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-vis > i.on {
  box-shadow: inset 0.25em 0 0 var(--ba), inset 0 0 0 1px var(--bl);
}
.bp-vis .br i {
  flex: 1;
}
.bp-vis.fl > i {
  width: 70%;
  margin-inline: auto;
}
.bp .bp-vis.img {
  justify-content: flex-end;
  background: linear-gradient(160deg, #e9dfd0, #c9b89f);
  box-shadow: none;
}
.bp-vis.img .sw {
  justify-content: center;
  gap: 0.35em;
}
.bp-vis.img .sw i {
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #ffffff;
}
.bp .sw i:nth-child(1) {
  background: #d9cdb9;
}
.bp .sw i:nth-child(2) {
  background: #9fb39a;
}
.bp .sw i:nth-child(3) {
  background: #c99478;
}
.bp .sw i:nth-child(4) {
  background: #6f7f8f;
}
.bp .bp-vis.cal {
  background: #ffffff;
}
.bp-vis.cal .hd {
  width: 70%;
  height: 0.7em;
  background: var(--bn);
}
.bp-vis.cal .days,
.bp-vis.cal .slots {
  gap: 0.3em;
}
.bp-vis.cal .days i,
.bp-vis.cal .slots i {
  flex: 1;
  height: 1.1em;
  background: var(--bs);
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-vis.cal .on {
  background: var(--ba);
  box-shadow: none;
}
.bp .bp-logos {
  justify-content: space-between;
  gap: 0.6em;
  padding-top: 0.5em;
  border-top: 1px solid var(--bl);
}
.bp-logos i {
  width: 3em;
  height: 0.6em;
}
.bp .bp-title {
  flex-direction: column;
  gap: 0.4em;
}
.bp .bp-title.c {
  align-items: center;
}
.bp-title > i {
  width: 55%;
  height: 1em;
  background: var(--bn);
}
.bp-title > .tgl {
  width: 3em;
  height: 0.8em;
  background: var(--bs);
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-title > .ey {
  width: 30%;
  height: 0.7em;
}
.bp .bp-plans {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.5em;
}
.bp .bp-plans > span {
  flex-direction: column;
  gap: 0.4em;
  padding: 0.6em 0.5em;
  border-radius: 0.5em;
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp .bp-plans .rec {
  padding-top: 1.1em;
  box-shadow: inset 0 0 0 1.5px var(--ba);
}
.bp-plans .nm {
  width: 80%;
  background: color-mix(in srgb, var(--bn) 45%, #ffffff);
}
.bp-plans .pr,
.bp .pr {
  width: 55%;
  height: 1em;
  background: var(--bn);
}
.bp-plans .bt {
  width: 100%;
  height: 1.2em;
}
.bp .bp-note,
.bp .bp-cta,
.bp .bp-chips,
.bp .bp-stars,
.bp .bp-price,
.bp .bp-who {
  align-self: flex-start;
}
.bp .bp-note.c {
  align-self: center;
}
.bp .bp-pdp .bp-cta {
  align-self: stretch;
}
.bp .bp-quote {
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
  border-radius: 0.5em;
  background: var(--bs);
}
.bp .av {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ba) 45%, #ffffff);
}
.bp-quote .qt {
  flex: 1;
}
.bp .bp-ticks {
  flex-direction: column;
  gap: 0.35em;
}
.bp-ticks i {
  width: 80%;
  height: 0.5em;
}
.bp .bp-promo {
  justify-content: center;
  margin: -0.75em -0.85em 0;
  padding: 0.4em;
  border-radius: 10px 10px 0 0;
  background: var(--bn);
}
.bp-promo i {
  width: 45%;
  height: 0.5em;
  background: rgba(255, 255, 255, 0.55);
}
.bp .bp-chips {
  gap: 0.4em;
}
.bp-chips i {
  width: 3.2em;
  height: 1.2em;
  border-radius: 999px;
  background: var(--bs);
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp .bp-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.6em;
}
.bp .bp-grid > span {
  flex-direction: column;
  gap: 0.35em;
}
.bp-grid .im {
  height: 4em;
  border-radius: 0.4em;
  background: linear-gradient(160deg, #efe6d8, #d8c9b2);
}
.bp .st {
  width: 60%;
  height: 0.5em;
  background: #f5c542;
}
.bp-grid .dt {
  width: 45%;
  height: 0.5em;
  background: linear-gradient(90deg, #d9cdb9 0 25%, #9fb39a 25% 50%, #c99478 50% 75%, #6f7f8f 75%);
}
.bp .bp-pdp {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8em;
}
.bp .bp-sizes {
  gap: 0.3em;
}
.bp-sizes i {
  flex: 1;
  height: 1.1em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-sizes .on {
  box-shadow: inset 0 0 0 1.5px var(--bn);
}
.bp .bp-price i {
  width: 5em;
  height: 1em;
  background: var(--ba);
}
.bp .bp-stories {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
}
.bp .bp-stories > span {
  flex-direction: column;
  gap: 0.4em;
  padding: 0.6em;
  border-radius: 0.5em;
  background: var(--bs);
}
.bp-stories .s {
  width: 60%;
}
.bp .bp-who {
  align-items: center;
  gap: 0.5em;
}
.bp-who .av {
  width: 1.8em;
  height: 1.8em;
}
.bp-who i:not(.av) {
  width: 50%;
}
.bp .bp-form {
  flex-direction: column;
  gap: 0.4em;
  padding: 0.6em;
  border-radius: 0.5em;
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-form i {
  height: 1.1em;
  background: var(--bs);
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-form .t {
  height: 2em;
}
.bp-form .bt {
  width: 100%;
  height: 1.3em;
  background: var(--ba);
  box-shadow: none;
}
.bp .bp-cal {
  gap: 0.35em;
}
.bp-cal i {
  flex: 1;
  height: 1.4em;
  background: var(--bs);
  box-shadow: inset 0 0 0 1px var(--bl);
}
.bp-cal .on {
  background: var(--ba);
  box-shadow: none;
}
.bp .pin {
  position: absolute;
  top: -0.95em;
  right: -0.95em;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.95em;
  height: 1.95em;
  border-radius: 50%;
  background: var(--hl);
  color: var(--hl-ink);
  font: 700 1.05em/1 var(--sans);
  box-shadow: 0 0 0 1.5px #15161b, 0 0 0 3.5px #ffffff, 0 4px 10px -3px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s var(--spring);
}
.cp.on .bp .pin {
  animation: pinPop 0.45s var(--spring) backwards;
  animation-delay: calc(0.45s + var(--g, 0) * 0.12s);
}
@keyframes pinPop {
  from {
    transform: scale(0);
  }
}
.bp .pin[data-src] {
  top: -0.8em;
  right: -0.8em;
  width: 1.6em;
  height: 1.6em;
  background: var(--sc);
  box-shadow: 0 0 0 2px #ffffff, 0 4px 10px -3px rgba(0, 0, 0, 0.5);
}
.pin[data-src="scan"] {
  --sc: var(--c0);
}
.pin[data-src="team"] {
  --sc: var(--c2);
}
.pin[data-src="comp"] {
  --sc: var(--c1);
}
.pin[data-src="best"] {
  --sc: var(--c3);
}
.js .cp-dir .bp .pin {
  transform: scale(0);
  animation: none;
}
.js .cp-dir .bp .pin.in {
  transform: scale(1);
}

.dpg-fixes li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: start;
  gap: 9px;
  margin-inline: -6px;
  padding: 8px 6px;
  border-top: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.38;
  transition: background-color 0.2s;
}
.cp.on .dpg-fixes li {
  animation: slideIn 0.45s var(--ease) both;
  animation-delay: calc(0.45s + var(--g, 0) * 0.12s);
}
.dpg-fixes .n {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hl);
  color: var(--hl-ink);
  font: 700 11px/1 var(--sans);
}
.dpg-fixes .tx {
  padding-top: 1px;
}
.dpg-fixes .ok {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--good);
}
.cp.on .dpg-fixes .ok {
  animation: tickIn 0.4s var(--spring) backwards;
  animation-delay: calc(1.6s + var(--g, 0) * 0.07s);
}
@keyframes tickIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
}
/* point at a fix and its pin grows on the page, and the other way round */
.dpg[data-hot="1"] .pin[data-n="1"],
.dpg[data-hot="2"] .pin[data-n="2"],
.dpg[data-hot="3"] .pin[data-n="3"] {
  transform: scale(1.3);
}
.dpg[data-hot="1"] li[data-n="1"],
.dpg[data-hot="2"] li[data-n="2"],
.dpg[data-hot="3"] li[data-n="3"] {
  background: color-mix(in srgb, var(--hl) 10%, transparent);
}

/* build: today's homepage and the new one, on a slider you can drag or click */
.cp-mk {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}
.ba {
  position: relative;
  container-type: inline-size;
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ba.dragging,
.ba.dragging * {
  cursor: grabbing !important;
}
.ba-pane {
  position: absolute;
  inset: 0;
}
.ba-after {
  clip-path: inset(0 0 0 var(--pos));
}
.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 4;
  width: 3px;
  margin-left: -1.5px;
  background: var(--hl);
  box-shadow: 0 0 0 1px rgba(21, 22, 27, 0.2);
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--hl);
  color: #15161b;
  box-shadow: 0 0 0 4px rgba(224, 249, 74, 0.3), 0 8px 20px -6px rgba(0, 0, 0, 0.5);
  cursor: grab;
  touch-action: none;
  transition: transform 0.2s var(--ease);
}
.ba-handle svg {
  width: 22px;
  height: 22px;
}
.ba-handle:hover,
.ba.dragging .ba-handle {
  transform: scale(1.08);
}
.ba-handle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
.ba [data-live],
.hx-stage [data-live] {
  cursor: auto;
}
.ba [data-live] button,
.hx-stage [data-live] button {
  cursor: pointer;
}
.mk-changes li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
}
.mk-changes li:last-child {
  border-bottom: 0;
}
.mk-changes code {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  font: 600 11px/1.3 var(--mono);
}
.cp.on .mk-changes li {
  animation: slideIn 0.5s var(--ease) both;
}
.cp.on .mk-changes li:nth-child(2) {
  animation-delay: 0.1s;
}
.cp.on .mk-changes li:nth-child(3) {
  animation-delay: 0.2s;
}
.cp.on .mk-changes li:nth-child(4) {
  animation-delay: 0.3s;
}

/* the sample pages: one small kit, sized in em so the same page works as a large preview or a thumbnail */
.hp {
  --a: #3e63f5;
  --n: #1e2a4a;
  --m: #5d6577;
  --bg: #ffffff;
  --soft: #f3f5fa;
  --edge: #e3e7ef;
  --r: 0.5em;
  --hf: var(--sans);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--n);
  font: 400 2.05cqw/1.35 var(--sans);
  text-align: left;
}
.hp i,
.hp em,
.hp s,
.hp u,
.hp small,
.hp label {
  font-style: normal;
  text-decoration: none;
}
.hp button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.hp-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 0.9em 1.4em;
  border-bottom: 1px solid var(--edge);
}
.hp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font: 700 1.05em/1 var(--hf);
  white-space: nowrap;
}
.hp-logo i {
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.3em;
  background: var(--a);
}
.hp-links {
  display: flex;
  gap: 1.1em;
  font-size: 0.84em;
  color: var(--m);
  white-space: nowrap;
}
.hp-links .on {
  color: var(--n);
  font-weight: 600;
}
.hp-login {
  margin-left: auto;
  font-size: 0.84em;
  font-weight: 600;
  white-space: nowrap;
}
.hp-links + .hp-btn,
.hp-links + .hp-cart {
  margin-left: auto;
}
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1em;
  border-radius: var(--r);
  background: var(--a);
  color: #ffffff;
  font-size: 0.84em;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.hp-btn.lg {
  padding: 0.85em 1.3em;
  font-size: 0.94em;
  box-shadow: 0 0.6em 1.3em -0.6em color-mix(in srgb, var(--a) 80%, transparent);
}
.hp-btn.o {
  background: transparent;
  color: var(--n);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--n) 28%, transparent);
}
.hp-hero {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 1.6em;
  padding: 1.3em 1.4em;
}
.hp-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65em;
  min-width: 0;
}
.hp-eye {
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--a) 12%, transparent);
  color: var(--a);
  font-size: 0.72em;
  font-weight: 600;
}
.hp-h1 {
  font: 700 1.85em/1.08 var(--hf);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hp-h1.sm {
  font-size: 1.55em;
}
.hp-h1 u {
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--a) 24%, transparent) 60%);
}
.hp-h2 {
  font: 700 1.4em/1.12 var(--hf);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hp-p {
  font-size: 0.9em;
  color: var(--m);
}
.hp-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em 0.9em;
  margin-top: 0.15em;
}
.hp-calm {
  font-size: 0.78em;
  font-weight: 600;
  color: #1f8a55;
}
.hp-calm.c {
  padding-bottom: 1em;
  text-align: center;
}
.hp-rate {
  font-size: 0.74em;
  color: var(--m);
  white-space: nowrap;
}
.hp-rate .st {
  color: #e9a800;
  letter-spacing: 0.04em;
}

/* today: generic, grey, everything the same weight */
.hp-before {
  --a: #6b7280;
  --n: #1f2937;
  --m: #6b7280;
  --edge: #e5e7eb;
  filter: grayscale(0.9);
}
.hp-hero.c {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  padding-top: 1.8em;
  text-align: center;
}
.hp-hero.c .hp-h1 {
  max-width: 15em;
  font-size: 1.7em;
}
.hp-hero.c .hp-ctas {
  justify-content: center;
}
.hp-ph {
  width: 72%;
  height: 5em;
  margin-top: 0.7em;
  border-radius: 0.5em;
  background: repeating-linear-gradient(45deg, #eceef2 0 0.6em, #f6f7f9 0.6em 1.2em);
}
.hp-feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2em;
  padding: 1.1em 1.4em;
}
.hp-feats span {
  display: grid;
  gap: 0.45em;
}
.hp-feats i {
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.45em;
  background: #e5e7eb;
}
.hp-feats b {
  height: 0.55em;
  border-radius: 0.3em;
  background: #e5e7eb;
}
.hp-feats b.s {
  width: 68%;
}
.hp-banner {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.8em;
  height: 46%;
  margin: 1em 1.4em 0;
  border-radius: 0.5em;
  background: repeating-linear-gradient(45deg, #e9eaed 0 0.7em, #f3f4f6 0.7em 1.4em);
  text-align: center;
}
.hp-banner .hp-h1 {
  font-size: 1.7em;
}
.hp-grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9em;
  padding: 1em 1.4em;
}
.hp-grid4 span {
  display: grid;
  gap: 0.35em;
  font-size: 0.74em;
}
.hp-grid4 i {
  height: 4.5em;
  border-radius: 0.4em;
  background: #e5e7eb;
}
.hp-grid4 em {
  color: var(--m);
}
.hp-form6 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em;
  width: 72%;
  margin: 1.2em auto 0;
  padding: 1em;
  border-radius: 0.6em;
  background: #f7f8f9;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.hp-form6 b {
  grid-column: 1 / -1;
  font-size: 0.86em;
}
.hp-form6 i {
  padding: 0.5em 0.6em;
  border-radius: 0.35em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #d9dce2;
  font-size: 0.72em;
  color: #9ca3af;
}

/* the new homepage for a SaaS team: the product routing real leads, live, in the hero */
.hp-app {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0.9em;
  background: #ffffff;
  border: 1px solid var(--edge);
  box-shadow: 0 1.4em 2.8em -1.4em rgba(30, 42, 74, 0.5);
  overflow: hidden;
}
.app-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5em 0.65em;
  background: var(--soft);
  border-bottom: 1px solid var(--edge);
}
.app-bar > i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #d4d8e2;
}
.app-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-left: 0.5em;
  font-size: 0.7em;
  font-weight: 600;
  white-space: nowrap;
}
.app-name b {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #22c55e;
}
.cp.on .app-name b {
  animation: livePing 1.8s var(--ease) infinite;
}
.app-tabs {
  display: flex;
  gap: 0.2em;
  margin-left: auto;
  padding: 0.15em;
  border-radius: 0.55em;
  background: #e6e9f1;
}
.app-tabs button {
  padding: 0.3em 0.75em;
  border-radius: 0.45em;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--m);
}
.app-tabs button.on {
  background: #ffffff;
  color: var(--n);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.app-view {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.45em;
  padding: 0.6em;
}
.hp-app[data-view="flow"] .app-leads,
.hp-app[data-view="leads"] .app-flow {
  display: none;
}
/* the flow: a lead comes in, gets enriched, is routed by company size and lands with a rep or in an email */
.hp-app .app-flow {
  position: relative;
  display: block;
  padding: 0;
  background: radial-gradient(circle at 0.12em 0.12em, #dde3ee 0.07em, transparent 0.09em) 0 0 / 0.95em 0.95em, #fbfcfe;
}
.flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: var(--sans);
}
.fe {
  fill: none;
  stroke: #cfd6e4;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}
.fe.lit {
  stroke: #3e63f5;
  stroke-dasharray: 4 3;
}
.cp.on .fe.lit {
  animation: flowDash 0.5s linear infinite;
}
@keyframes flowDash {
  to {
    stroke-dashoffset: -7;
  }
}
.fcon {
  fill: none;
  stroke: #b8a6ff;
  stroke-width: 1.2;
  stroke-dasharray: 2 2;
}
.ftag {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
  transition-delay: calc(var(--k, 0) * 0.12s);
}
.ftags.on .ftag {
  opacity: 1;
  transform: none;
}
.ftag rect {
  fill: #f0ebff;
}
.ftag text {
  font-size: 7.6px;
  font-weight: 600;
  fill: #5b3fd6;
}
.flead rect {
  fill: #ffffff;
  stroke: #e3e7ef;
  stroke-width: 1.2;
}
.flead .fl-n {
  font-size: 9px;
  font-weight: 600;
  fill: #1e2a4a;
}
.flead .fl-c {
  font-size: 7.6px;
  fill: #5d6577;
}
.fl-i,
.ftok text {
  font-size: 8.5px;
  font-weight: 700;
  fill: #ffffff;
  text-anchor: middle;
}
.ftok {
  opacity: 0;
  transition: transform 0.5s linear, opacity 0.2s;
}
.ftok.show {
  opacity: 1;
}
.ftok circle {
  stroke: #ffffff;
  stroke-width: 2;
}
.fn .halo {
  fill: color-mix(in srgb, var(--fc) 14%, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.fn .box {
  fill: #ffffff;
  stroke: #e3e7ef;
  stroke-width: 1.2;
  transition: stroke 0.3s;
}
.fn.on .halo {
  opacity: 1;
}
.fn.on .box {
  stroke: var(--fc);
  stroke-width: 1.5;
}
.fn .fic {
  fill: color-mix(in srgb, var(--fc) 14%, #ffffff);
}
.fn .gl {
  fill: none;
  stroke: var(--fc);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fn .gf {
  fill: var(--fc);
}
.fn .av {
  font-size: 9px;
  font-weight: 700;
  fill: var(--fc);
  text-anchor: middle;
}
.fn .t {
  font-size: 10.2px;
  font-weight: 600;
  fill: #1e2a4a;
}
.fn .s {
  font-size: 8px;
  fill: #5d6577;
}
.fn .ck {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.2s, transform 0.35s var(--spring);
}
.fn.done .ck {
  opacity: 1;
  transform: none;
}
.fn .ck circle {
  fill: #1f8a55;
  stroke: #ffffff;
  stroke-width: 1.5;
}
.fn .ck path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-toast {
  position: absolute;
  top: 0.55em;
  left: 0.6em;
  right: 0.6em;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.65em;
  border-radius: 0.65em;
  background: #1e2a4a;
  color: #ffffff;
  box-shadow: 0 0.8em 1.6em -0.8em rgba(30, 42, 74, 0.7);
  opacity: 0;
  transform: translateY(-130%);
  transition: transform 0.45s var(--spring), opacity 0.25s;
}
.hp-app.notify .flow-toast {
  opacity: 1;
  transform: none;
}
.ft-ic {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  background: #3e63f5;
  font-size: 0.72em;
  font-weight: 700;
}
.ft-ic::before {
  content: "#";
}
.flow-toast[data-kind="mail"] .ft-ic {
  background: #0d9488;
}
.flow-toast[data-kind="mail"] .ft-ic::before {
  content: "@";
}
.flow-toast > span {
  display: grid;
  min-width: 0;
}
.flow-toast b {
  font-size: 0.62em;
  font-weight: 600;
  opacity: 0.7;
}
.flow-toast em {
  font-size: 0.72em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-toast s {
  padding: 0.3em 0.6em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.64em;
  font-weight: 700;
}
/* the leads: every routed lead lands at the top, with who got it and how fast */
.app-leads {
  gap: 0.55em;
  padding: 0.75em;
}
.ld-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6em;
}
.app-k {
  font-size: 0.7em;
  color: var(--m);
}
.app-big {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  font: 700 1.35em/1 var(--sans);
}
.app-big em {
  font-size: 0.5em;
  color: #1f8a55;
}
.ld-list {
  display: grid;
  gap: 0.4em;
}
.tk {
  position: relative;
  display: grid;
  grid-template-columns: 1.75em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.55em;
  border-radius: 0.6em;
  background: #ffffff;
  border: 1px solid var(--edge);
}
.tk > i {
  display: grid;
  place-items: center;
  width: 2.45em;
  height: 2.45em;
  border-radius: 50%;
  background: var(--c);
  color: #ffffff;
  font-size: 0.72em;
  font-weight: 700;
}
.tk > span {
  min-width: 0;
}
.tk b {
  display: block;
  font-size: 0.74em;
  line-height: 1.25;
}
.tk em {
  display: block;
  font-size: 0.68em;
  color: var(--m);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk s {
  display: inline-grid;
  place-items: center;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  font-size: 0.62em;
  font-weight: 700;
  white-space: nowrap;
}
.tk .to {
  background: #e8efff;
  color: var(--a);
}
.tk .ok {
  background: #e3f6ea;
  color: #1f8a55;
}
.tk.in {
  animation: tkIn 0.5s var(--ease);
}
@keyframes tkIn {
  from {
    opacity: 0;
    transform: translateY(-0.7em);
  }
}
@keyframes tyDot {
  50% {
    opacity: 1;
    transform: translateY(-0.15em);
  }
}
.hp-logos {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 0.7em 1.4em 0.85em;
  border-top: 1px solid var(--edge);
  overflow: hidden;
}
.hp-logos > span {
  flex: none;
  font-size: 0.64em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m);
}
.lg-track {
  display: flex;
  gap: 1.2em;
  width: max-content;
}
.lg-track i {
  flex: none;
  width: 3.8em;
  height: 1em;
  border-radius: 0.3em;
  background: #dfe3ec;
}
.lg-track i:nth-child(3n) {
  width: 2.9em;
}
.cp.on .lg-track {
  animation: marquee 24s linear infinite;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* the new homepage for a shop: the product in every colour, and live proof */
.hp-shop {
  --a: #2f4a3a;
  --n: #2a2622;
  --m: #776d64;
  --bg: #fbf8f3;
  --soft: #f4efe7;
  --edge: #ebe3d7;
  --r: 0.35em;
  --hf: Georgia, "Times New Roman", serif;
}
.hp-shop .hp-logo i {
  border-radius: 50%;
}
.hp-promo {
  flex: none;
  padding: 0.45em;
  background: var(--n);
  color: #f4efe7;
  font-size: 0.7em;
  text-align: center;
  letter-spacing: 0.02em;
}
.hp-cart {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.84em;
  font-weight: 600;
  white-space: nowrap;
}
.hp-cart b {
  display: grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--a);
  color: #ffffff;
  font-size: 0.78em;
}
.hp-shot {
  position: relative;
  align-self: stretch;
  min-height: 0;
  border-radius: 0.8em;
  overflow: hidden;
  background: linear-gradient(165deg, #f1e9de, #e2d5c3);
}
.bed {
  --t: #d9cdb9;
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 18%;
  height: 58%;
}
.bed .hb {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0;
  height: 44%;
  border-radius: 0.6em 0.6em 0.2em 0.2em;
  background: #a88f72;
  box-shadow: inset 0 -0.4em 0 rgba(0, 0, 0, 0.08);
}
.bed .pillow {
  position: absolute;
  top: 26%;
  width: 34%;
  height: 24%;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--t) 55%, #ffffff);
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.08);
  transition: background-color 0.6s;
}
.bed .p1 {
  left: 12%;
}
.bed .p2 {
  right: 12%;
}
.bed .duvet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  border-radius: 0.7em;
  background: var(--t);
  box-shadow: inset 0 -0.7em 1.1em rgba(0, 0, 0, 0.1), 0 0.6em 1em -0.4em rgba(60, 40, 20, 0.35);
  transition: background-color 0.6s;
}
.bed[data-tint="1"] {
  --t: #9fb39a;
}
.bed[data-tint="2"] {
  --t: #c99478;
}
.bed[data-tint="3"] {
  --t: #6f7f8f;
}
.swatches {
  position: absolute;
  left: 0.8em;
  bottom: 0.8em;
  display: flex;
  gap: 0.45em;
  padding: 0.4em 0.55em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}
.swatches button {
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.25s;
}
.swatches button.on {
  box-shadow: 0 0 0 0.16em #ffffff, 0 0 0 0.3em var(--n);
}
.toast {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  max-width: 80%;
  padding: 0.5em 0.75em;
  border-radius: 0.6em;
  background: #ffffff;
  box-shadow: 0 0.7em 1.5em -0.7em rgba(0, 0, 0, 0.4);
  font-size: 0.66em;
  line-height: 1.3;
  opacity: 0;
}
.toast i {
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 0.4em;
  background: linear-gradient(135deg, #d9cdb9, #a88f72);
}
.toast em {
  display: block;
  color: var(--m);
}
.cp.on .toast {
  animation: toastIn 7s var(--ease) 0.8s infinite;
}
@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translateY(-0.6em);
  }
  8%,
  62% {
    opacity: 1;
    transform: none;
  }
  70%,
  100% {
    opacity: 0;
    transform: translateY(-0.3em);
  }
}
.hp-best {
  flex: none;
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 1.4em 0.9em;
  border-top: 1px solid var(--edge);
}
.hp-best > b {
  font: 600 0.9em var(--hf);
  white-space: nowrap;
}
.pc {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  column-gap: 0.5em;
  align-items: center;
  font-size: 0.72em;
  line-height: 1.25;
}
.pc i {
  grid-row: span 2;
  width: 2.2em;
  height: 2.2em;
  border-radius: 0.4em;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 55%, #ffffff), var(--pc));
}
.pc em {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc s {
  color: var(--m);
}

/* the new homepage for a service firm: book a call in three taps */
.hp-other {
  --a: #2f6b57;
  --n: #1d2b28;
  --m: #66706c;
  --soft: #eef2f0;
  --edge: #e1e7e4;
  --r: 0.45em;
  --hf: Georgia, "Times New Roman", serif;
}
.hp-other .hp-logo i {
  border-radius: 50% 50% 50% 0.2em;
}
.hp-book {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  padding: 1em;
  border-radius: 0.9em;
  background: #ffffff;
  border: 1px solid var(--edge);
  box-shadow: 0 1.3em 2.6em -1.4em rgba(29, 43, 40, 0.5);
}
.bk-h {
  font: 600 0.95em/1.2 var(--hf);
}
.bk-days,
.bk-slots {
  display: grid;
  gap: 0.35em;
}
.bk-days {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bk-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bk-days button,
.bk-slots button {
  padding: 0.5em 0.4em;
  border-radius: 0.45em;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 0.74em;
  font-weight: 600;
  transition: background-color 0.25s, color 0.25s;
}
.bk-days button.on {
  background: var(--n);
  color: #ffffff;
  box-shadow: none;
}
.bk-slots button.on {
  background: var(--a);
  color: #ffffff;
  box-shadow: none;
}
.bk-go {
  display: block;
  padding: 0.7em;
  border-radius: var(--r);
  background: var(--a);
  color: #ffffff;
  text-align: center;
  font-size: 0.82em;
  font-weight: 600;
}
.bk-note {
  font-size: 0.68em;
  color: var(--m);
  text-align: center;
}
.hp-quote {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 1.4em 1em;
  padding: 0.7em 0.9em;
  border-radius: 0.7em;
  background: var(--soft);
}
.hp-quote i {
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a) 40%, #ffffff), var(--a));
}
.hp-quote p {
  font: italic 0.86em/1.3 var(--hf);
}
.hp-quote span {
  margin-left: auto;
  font-size: 0.68em;
  color: var(--m);
  white-space: nowrap;
}

/* the other finished pages, for the handover */
.hp-sec {
  flex: none;
  display: grid;
  justify-items: start;
  gap: 0.5em;
  padding: 1.2em 1.4em 0.6em;
}
.hp-sec.c {
  justify-items: center;
  text-align: center;
}
.hp-bill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.76em;
  color: var(--m);
}
.hp-bill em {
  font-weight: 600;
  color: #1f8a55;
}
.tg {
  position: relative;
  width: 2.4em;
  height: 1.35em;
  border-radius: 999px;
  background: var(--a);
}
.tg::after {
  content: "";
  position: absolute;
  top: 0.18em;
  left: 0.18em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #ffffff;
}
.cp.on .tg::after {
  animation: tgFlip 4s var(--ease) infinite;
}
@keyframes tgFlip {
  0%,
  45% {
    transform: none;
  }
  55%,
  100% {
    transform: translateX(1.05em);
  }
}
.hp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.7em;
  padding: 1em 1.4em 0.6em;
}
.hp-plans > span {
  position: relative;
  display: grid;
  gap: 0.3em;
  padding: 0.9em 0.8em;
  border-radius: 0.7em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.hp-plans b {
  font-size: 0.78em;
}
.hp-plans em {
  font: 700 1.5em/1 var(--sans);
}
.hp-plans small {
  font-size: 0.66em;
  color: var(--m);
}
.hp-plans .hp-btn {
  margin-top: 0.4em;
  padding: 0.55em 0.4em;
  font-size: 0.72em;
}
.hp-plans .rec {
  padding-top: 1.3em;
  box-shadow: inset 0 0 0 2px var(--a), 0 1em 2em -1.2em color-mix(in srgb, var(--a) 70%, transparent);
}
.hp-plans .rec s {
  position: absolute;
  top: -0.75em;
  left: 50%;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--a);
  color: #ffffff;
  font-size: 0.6em;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}
.cp.on .hp-plans .rec {
  animation: recLift 3s var(--ease) infinite;
}
@keyframes recLift {
  50% {
    transform: translateY(-0.25em);
  }
}
.hp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.hp-chips span {
  padding: 0.35em 0.75em;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 0.72em;
}
.hp-chips .on {
  background: var(--n);
  color: #ffffff;
  box-shadow: none;
}
.hp-grid6 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 0.7em;
  padding: 0.5em 1.4em 1em;
}
.hp-grid6 span {
  display: grid;
  gap: 0.25em;
  font-size: 0.72em;
}
.hp-grid6 i {
  height: 4.4em;
  border-radius: 0.5em;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 55%, #ffffff), var(--pc));
}
.hp-grid6 em {
  color: var(--m);
}
.hp-grid6 em s {
  color: #e9a800;
  font-size: 0.85em;
}
.cp.on .hp-grid6 span:nth-child(2) i {
  animation: cardLift 3.2s var(--ease) infinite;
}
@keyframes cardLift {
  50% {
    transform: translateY(-0.3em);
    box-shadow: 0 0.8em 1.2em -0.6em rgba(60, 40, 20, 0.4);
  }
}
.hp-pdp {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.2em;
  padding: 1.1em 1.4em;
}
.hp-pdp .hp-copy {
  gap: 0.5em;
}
.hp-price {
  font: 700 1.3em/1 var(--sans);
}
.hp-price small {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--m);
}
.hp-sizes {
  display: flex;
  gap: 0.35em;
}
.hp-sizes span {
  padding: 0.4em 0.7em;
  border-radius: 0.4em;
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 0.72em;
}
.hp-sizes .on {
  box-shadow: inset 0 0 0 2px var(--n);
  font-weight: 600;
}
.cp.on .hp-add {
  animation: addPulse 2.6s var(--ease) infinite;
}
@keyframes addPulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 45%, transparent);
  }
  60%,
  100% {
    box-shadow: 0 0 0 0.7em transparent;
  }
}
.hp-incl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.4em 1.4em 0.9em;
}
.hp-incl span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4em 0.75em;
  border-radius: 999px;
  background: var(--soft);
  font-size: 0.74em;
  font-weight: 600;
}
.hp-incl span::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--a);
}
.hp-stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7em;
  padding: 0 1.4em 1em;
}
.hp-stories span {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  gap: 0.3em 0.6em;
  padding: 0.8em;
  border-radius: 0.7em;
  background: var(--soft);
}
.hp-stories i {
  grid-row: span 2;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a) 40%, #ffffff), var(--a));
}
.hp-stories p {
  font: italic 0.8em/1.3 var(--hf);
}
.hp-stories b {
  font-size: 0.66em;
  font-weight: 600;
  color: var(--m);
}
.hp-ticks {
  display: grid;
  gap: 0.4em;
}
.hp-ticks span {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8em;
}
.hp-ticks span::before {
  content: "";
  flex: none;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: var(--a);
  box-shadow: inset 0 0 0 0.22em #ffffff, 0 0 0 1px var(--a);
}
.hp-form3 {
  display: grid;
  gap: 0.6em;
  padding: 1em;
  border-radius: 0.8em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--edge), 0 1.2em 2.4em -1.4em rgba(29, 43, 40, 0.45);
}
.hp-form3 label {
  display: grid;
  gap: 0.3em;
  font-size: 0.74em;
  font-weight: 600;
}
.hp-form3 label > i {
  display: block;
  height: 2.3em;
  padding: 0.55em 0.7em;
  border-radius: 0.4em;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
}
.hp-form3 label > i.tall {
  height: 3.6em;
}
.typed {
  display: inline-block;
}
.cp.on .typed {
  animation: typeIn 4.5s steps(13, end) infinite;
}
@keyframes typeIn {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  45%,
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* the rebuilt SaaS pricing page: plans named by team, and the comparison running down each plan's column */
.hp-pr .pr-top {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0.75em;
  padding: 1.3em 1.4em 0.7em;
}
.pr-intro {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
  min-width: 0;
}
.pr-h {
  font: 700 1.42em/1.1 var(--hf);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pr-quote {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  margin-top: auto;
  padding: 0.6em 0.7em;
  border-radius: 0.7em;
  background: var(--soft);
}
.pr-quote > i {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: linear-gradient(135deg, #c7d2fe, var(--a));
}
.pr-quote p {
  font: italic 0.72em/1.38 var(--hf);
}
.pr-quote span {
  display: block;
  margin-top: 0.35em;
  font-style: normal;
  font-size: 0.9em;
  color: var(--m);
}
.pr-plan {
  position: relative;
  display: grid;
  gap: 0.32em;
  padding: 1.05em 0.85em 0.8em;
  border-radius: 0.8em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.pr-plan b {
  font-size: 0.8em;
}
.pr-plan > small {
  font-size: 0.64em;
  color: var(--m);
}
.pr-plan em {
  margin-top: 0.15em;
  font: 700 1.55em/1 var(--sans);
  letter-spacing: -0.02em;
}
.pr-plan em small {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--m);
}
.pr-plan .hp-btn {
  margin-top: 0.45em;
  padding: 0.62em 0.4em;
  font-size: 0.7em;
}
.pr-calm {
  display: block;
  font-size: 0.6em;
  font-weight: 600;
  text-align: center;
  color: #1f8a55;
}
.pr-plan.rec {
  background: color-mix(in srgb, var(--a) 5%, #ffffff);
  box-shadow: inset 0 0 0 2px var(--a), 0 1.1em 2.2em -1.3em color-mix(in srgb, var(--a) 75%, transparent);
}
.pr-rec {
  position: absolute;
  top: -0.85em;
  left: 50%;
  padding: 0.28em 0.75em;
  border-radius: 999px;
  background: var(--a);
  color: #ffffff;
  font-size: 0.58em;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}
.pr-rows {
  flex: 1;
  min-height: 0;
  padding: 0.2em 1.4em 1em;
}
.pr-rows p {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  column-gap: 0.75em;
  border-top: 1px solid var(--edge);
}
.pr-rows span {
  padding: 0.62em 0;
  font-size: 0.66em;
  font-weight: 500;
}
.pr-rows i,
.pr-rows em {
  display: grid;
  place-items: center;
  font-size: 0.64em;
}
.pr-rows p > :nth-child(3) {
  background: color-mix(in srgb, var(--a) 6%, transparent);
}
.pr-rows p:last-child > :nth-child(3) {
  border-radius: 0 0 0.6em 0.6em;
}
.pr-rows .y::before {
  content: "";
  width: 0.5em;
  height: 0.95em;
  margin-top: -0.3em;
  border: solid #1f8a55;
  border-width: 0 0.18em 0.18em 0;
  transform: rotate(45deg);
}
.pr-rows .n::before {
  content: "";
  width: 1em;
  height: 0.16em;
  border-radius: 1em;
  background: #c9d0dc;
}

/* the rebuilt product page: stars by the price, sizes you can trust, and a mini basket on add */
.hp-sp .sp {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.4em;
  padding: 1.1em 1.4em 1.2em;
}
.sp-gal {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  min-height: 0;
}
.sp-gal .hp-shot {
  flex: 1;
}
.sp-thumbs {
  display: flex;
  gap: 0.45em;
}
.sp-thumbs i {
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.45em;
  background: linear-gradient(160deg, #efe6d8, #d8c9b2);
}
.sp-thumbs i:first-child {
  box-shadow: 0 0 0 0.14em var(--a);
}
.sp-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45em;
  min-width: 0;
}
.sp-crumb {
  font-size: 0.64em;
  color: var(--m);
}
.sp-rate {
  font-size: 0.74em;
  color: var(--m);
}
.sp-rate .st {
  color: #e9a800;
  letter-spacing: 0.04em;
}
.sp-rate u {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.sp-price {
  font: 700 1.35em/1 var(--sans);
}
.sp-ben {
  font: italic 0.95em/1.3 var(--hf);
}
.sp-spec {
  font-size: 0.64em;
  color: var(--m);
}
.sp-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4em;
  width: 100%;
  margin-top: 0.2em;
}
.sp-sizes span {
  display: grid;
  gap: 0.1em;
  padding: 0.45em 0.3em;
  border-radius: 0.45em;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: #ffffff;
  font-size: 0.72em;
  font-weight: 600;
  text-align: center;
}
.sp-sizes small {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--m);
}
.sp-sizes .on {
  box-shadow: inset 0 0 0 1.5px var(--n);
}
.sp-add {
  width: 100%;
  margin-top: 0.25em;
}
.sp-calm {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.7em;
  font-weight: 600;
  color: #1f8a55;
}
.sp-calm i {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0.25em rgba(34, 197, 94, 0.2);
}
.sp-mini {
  position: absolute;
  left: 1.4em;
  bottom: 1.2em;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5em 0.6em;
  width: min(17em, 44%);
  padding: 0.7em 0.8em;
  border-radius: 0.8em;
  background: #ffffff;
  box-shadow: 0 1.2em 2.4em -1em rgba(42, 38, 34, 0.5), inset 0 0 0 1px var(--edge);
}
.sp-tick {
  position: relative;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #1f8a55;
}
.sp-tick::after {
  content: "";
  position: absolute;
  left: 0.58em;
  top: 0.36em;
  width: 0.34em;
  height: 0.62em;
  border: solid #ffffff;
  border-width: 0 0.14em 0.14em 0;
  transform: rotate(45deg);
}
.sp-mini b {
  display: block;
  font-size: 0.72em;
}
.sp-mini em {
  display: block;
  font-size: 0.62em;
  color: var(--m);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-mini s {
  font-size: 0.74em;
  font-weight: 700;
}
.sp-mini .hp-btn {
  grid-column: 1 / -1;
  padding: 0.55em;
  font-size: 0.66em;
}

/* the rebuilt service homepage: one button, booking in three taps and two named clients */
.of-reply {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72em;
  font-weight: 600;
  color: #1f8a55;
}
.of-reply i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0.25em rgba(34, 197, 94, 0.2);
}
.of-stories {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8em;
  padding: 0 1.4em 1.2em;
}
.of-stories span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.15em 0.65em;
  padding: 0.7em 0.8em;
  border-radius: 0.7em;
  background: var(--soft);
}
.of-stories i {
  grid-row: span 2;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a) 40%, #ffffff), var(--a));
}
.of-stories p {
  font: italic 0.78em/1.3 var(--hf);
}
.of-stories b {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--m);
}

/* narrow previews: fewer details, bigger type */
@container (max-width: 560px) {
  .hp-pr .pr-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55em;
    padding: 0.9em 1em 0.5em;
  }
  .hp-pr .pr-intro {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45em 1em;
    margin-bottom: 0.5em;
  }
  .hp-pr .hp-eye {
    display: none;
  }
  .pr-h {
    flex: 1 1 100%;
    font-size: 1.2em;
  }
  .pr-quote {
    flex: 1 1 100%;
    margin-top: 0;
    padding: 0.45em 0.6em;
  }
  .pr-plan {
    padding: 0.9em 0.55em 0.6em;
  }
  .pr-plan em {
    font-size: 1.3em;
  }
  .pr-rows {
    padding: 0 1em 0.8em;
  }
  .pr-rows p {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0.55em;
  }
  .pr-rows span {
    grid-column: 1 / -1;
    padding: 0.45em 0 0.1em;
  }
  .pr-rows i,
  .pr-rows em {
    padding-bottom: 0.4em;
  }
  .hp-sp .sp {
    gap: 0.9em;
    padding: 0.9em 1em;
  }
  .sp-crumb,
  .sp-spec,
  .sp-thumbs {
    display: none;
  }
  .sp-mini {
    left: 1em;
    bottom: 0.9em;
    width: 48%;
  }
  .of-stories {
    gap: 0.5em;
    padding: 0 1em 0.9em;
  }
  .hx .mp {
    font-size: 2.5cqw;
  }
  .hx .hp {
    font-size: 2.35cqw;
  }
  .hx-kpi {
    display: none;
  }
  .mh-hero {
    gap: 1em;
    padding: 1.4em 1em 0.8em;
  }
  .mh-feats {
    padding: 0.4em 1em 0.8em;
  }
  .hp {
    font-size: 2.45cqw;
  }
  .hp-links,
  .hp-login,
  .hp-rate,
  .hp-logos > span,
  .hp-best > b,
  .hp-eye {
    display: none;
  }
  .hp-hero {
    gap: 0.9em;
    padding: 1em;
  }
  .hp-h1 {
    font-size: 1.55em;
  }
  .hp-p {
    font-size: 0.82em;
  }
  .hp-best {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ba-tag {
  position: absolute;
  bottom: 10px;
  z-index: 3;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(21, 22, 27, 0.78);
  color: #ffffff;
  font: 600 10.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.ba-l {
  left: 10px;
}
.ba-tag {
  transition: opacity 0.3s var(--ease);
}
.all-new > .ba-l,
.all-old > .ba-r {
  opacity: 0;
}
.ba-r {
  right: 10px;
  background: var(--hl);
  color: #15161b;
}

.mk-side {
  display: grid;
  gap: 10px;
  align-content: start;
}
.mk-side .mk-k:not(:first-child) {
  margin-top: 10px;
}
.tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card-2);
  font: 500 11.5px var(--mono);
  color: var(--ink-2);
}
.tok.sw::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--s);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mk-note {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* what every page is, under the slider */
.mk-traits {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mk-traits ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mk-traits li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.mk-traits .ic {
  width: 15px;
  height: 15px;
  color: var(--hl);
}
.cp.on .mk-traits li {
  animation: slideIn 0.45s var(--ease) both;
  animation-delay: calc(0.35s + var(--i, 0) * 0.07s);
}

/* handover: three finished pages, live, and everything that comes with them */
.cp-ho {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.ho-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  perspective: 1600px;
}
.ho-scr {
  container-type: inline-size;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(21, 22, 27, 0.12);
  box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.ho-scr:nth-child(1) {
  transform: rotateY(8deg);
}
.ho-scr:nth-child(3) {
  transform: rotateY(-8deg);
}
.ho-scr:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.7);
}
.cp.on .ho-scr {
  animation: scrIn 0.8s var(--ease) backwards;
  animation-delay: calc(0.1s + var(--i, 0) * 0.16s);
}
@keyframes scrIn {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.95);
  }
}
.ho-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  background: #f1f2f5;
  border-bottom: 1px solid #e4e6eb;
}
.ho-bar > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d3d6dd;
}
.ho-bar > span {
  min-width: 0;
  margin-left: 6px;
  font: 500 10.5px var(--mono);
  color: #5f6675;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ho-live {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: #e2f5e9;
  color: #17683b;
  font: 700 9.5px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ho-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}
.cp.on .ho-live::before {
  animation: livePing 1.8s var(--ease) infinite;
}
@keyframes livePing {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  }
  70%,
  100% {
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
  }
}
.ho-pg {
  position: relative;
  height: 66cqw;
}
.ho-pg .hp {
  font-size: 2.35cqw;
}
.ho-scr figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid #eceef3;
  font: 600 13px/1.2 var(--sans);
  color: #1d2433;
}
.ho-scr figcaption::after {
  content: "HTML, CSS, JS";
  font: 500 10px var(--mono);
  color: #8a8f99;
}
.ho-gets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* the code is the main deliverable: it takes the full height, the four others sit beside it */
.ho-gets li:first-child {
  grid-row: span 2;
  align-content: center;
}
.ho-gets li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
.hg-ic {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--hl);
  color: var(--hl-ink);
}
.hg-ic svg {
  width: 19px;
  height: 19px;
}
.ho-gets b {
  font-size: 14.5px;
  line-height: 1.25;
}
.ho-gets li > span:last-child {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.cp.on .ho-gets li {
  animation: cardIn 0.5s var(--spring) both;
  animation-delay: calc(0.6s + var(--i, 0) * 0.08s);
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(-14px) rotate(-2deg);
  }
}

/* ---------- experience and recommendations ---------- */
/* one tab per role and its story under it; the stories share one cell, so switching never moves the page */
.xp {
  margin-bottom: clamp(28px, 4vw, 44px);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.xp-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.xp-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 22px 15px;
  text-align: left;
  color: var(--ink-3);
  transition: background-color 0.25s, color 0.25s;
}
.xp-tab + .xp-tab {
  border-left: 1px solid var(--line);
}
.xp-tab .yr {
  font: 500 11.5px/1.4 var(--mono);
}
.xp-tab .co {
  display: flex;
  align-items: center;
  height: 26px;
  color: var(--ink);
  opacity: 0.42;
  transition: opacity 0.25s;
}
.xp-tab:hover .co {
  opacity: 0.75;
}
.xp-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--hl) 9%, var(--card));
  color: var(--ink-2);
}
.xp-tab[aria-selected="true"] .co {
  opacity: 1;
}
.xp-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--hl-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.xp-tab[aria-selected="true"]::after {
  transform: none;
}
.xp-ind {
  font: 600 19px/1.2 var(--serif);
  letter-spacing: -0.01em;
}
.xp-panels {
  display: grid;
}
.xp-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 18px clamp(24px, 4vw, 48px);
  padding: 26px 28px 28px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
.xp-panel.on {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}
.xp .rp-top b {
  font-size: 24px;
}
.xp .rp-lede {
  font-size: 16.5px;
}
.xp .rp-list {
  margin-top: 2px;
  gap: 9px;
}
.xp .rp-list li {
  font-size: 14.5px;
}
.xp .rp-foot {
  font-size: 14px;
}
/* three of the seven recommendations wait behind a button under the four, and open above it */
.q-grid:not(.open) .q-extra {
  display: none;
}
.q-grid.open .q-extra {
  animation: qIn 0.45s var(--ease) both;
}
.q-grid.open .q-extra + .q-extra {
  animation-delay: 0.06s;
}
.q-grid.open .q-extra + .q-extra + .q-extra {
  animation-delay: 0.12s;
}
@keyframes qIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .q-grid.open .q-extra {
    animation: none;
  }
}
.q-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px 7px 8px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
  transition: box-shadow 0.25s, transform 0.25s var(--ease);
}
.q-toggle:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-1px);
}
.q-toggle .ic {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease);
}
.q-toggle[aria-expanded="true"] {
  padding-left: 18px;
}
.q-toggle[aria-expanded="true"] .ic {
  transform: rotate(180deg);
}
.q-faces {
  display: inline-flex;
}
.q-faces i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 20%, var(--card));
  box-shadow: 0 0 0 2px var(--card), inset 0 0 0 1.5px color-mix(in srgb, var(--c) 50%, transparent);
  font: normal 600 10px var(--sans);
  color: var(--ink);
}
.q-faces i + i {
  margin-left: -4px;
}
.q-t-less,
.q-toggle[aria-expanded="true"] .q-t-more,
.q-toggle[aria-expanded="true"] .q-faces {
  display: none;
}
.q-toggle[aria-expanded="true"] .q-t-less {
  display: inline;
}
.q-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.q {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 26px 22px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.q:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.q blockquote {
  margin: 0;
}
.q blockquote p {
  font: 440 18px/1.5 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}
.q-big {
  grid-column: span 2;
  padding: clamp(28px, 3.4vw, 40px);
  overflow: hidden;
}
.q-big::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  right: 26px;
  font: 500 170px/1 var(--serif);
  color: var(--hl);
  opacity: 0.9;
  pointer-events: none;
}
.q-big blockquote p {
  position: relative;
  max-width: 34ch;
  font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
/* the results quote: wide, on a lime tint */
.q-wide {
  grid-column: span 2;
  background: color-mix(in srgb, var(--hl) 13%, var(--card));
  border-color: color-mix(in srgb, var(--hl-2) 55%, transparent);
}
.q-wide blockquote p {
  max-width: 46ch;
  font-size: clamp(1.15rem, 0.98rem + 0.55vw, 1.42rem);
  line-height: 1.42;
}
.q figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}
.q-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 20%, var(--card));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 50%, transparent);
  color: var(--ink);
  font: 600 13.5px var(--sans);
}
.q-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.q-who b {
  font-size: 15px;
}
.q-who span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-3);
}
.q-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- pricing ---------- */
.pricing {
  background: var(--paper-2);
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.plan-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.plan-step span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0;
}
.plan-main .plan-step span {
  background: var(--hl);
  border-color: var(--hl);
  color: var(--hl-ink);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 26px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.plan:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
}
.plan-k {
  font: 600 12.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.plan-price b {
  font: 540 50px/1 var(--serif);
  letter-spacing: -0.035em;
}
.plan-price span {
  font-size: 14px;
  color: var(--ink-3);
}
.plan-for {
  font-weight: 600;
  line-height: 1.45;
}
.plan-d {
  font-size: 15px;
  color: var(--ink-2);
}
.plan-list {
  display: grid;
  gap: 10px;
  margin: 6px 0 12px;
  font-size: 15px;
  line-height: 1.45;
}
.plan-list li {
  display: flex;
  gap: 10px;
}
.plan-list .ic {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--good);
}
.plan .btn {
  margin-top: auto;
}
.plan-main {
  grid-column: span 2;
  padding: 32px 30px 28px;
  background: #15161b;
  color: var(--ink);
  border-color: transparent;
  box-shadow: var(--sh-3);
}
.pm-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 3vw, 36px);
}
.pm-a,
.pm-b {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-b {
  gap: 16px;
  padding-left: clamp(22px, 3vw, 36px);
  border-left: 1px solid var(--line);
}
.pm-b .plan-list {
  margin: 4px 0 0;
}
.plan-list li b {
  color: var(--ink);
}
.founding {
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--hl) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--hl) 55%, transparent);
  transition: background-color 0.8s var(--ease) 2.3s, border-color 0.8s var(--ease) 2.3s;
}
.fd-k {
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--hl);
}
.fd-p {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
/* the list price is struck through as it scrolls into view, then the founding rate lights up and grows */
.ps {
  gap: 6px 14px;
  min-height: 60px;
}
.ps-old {
  position: relative;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.8s var(--ease) 1.05s;
}
.plan-price .ps-old b {
  display: inline-block;
  font-size: 30px;
  color: inherit;
  transition: font-size 0.8s var(--ease) 1.05s;
}
.ps-strike {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 55%;
  height: 2.5px;
  margin-top: -1.25px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.plan-price .ps-new b {
  display: inline-block;
  padding: 0.05em 0.16em 0.09em;
  border-radius: 0.2em;
  font-size: 56px;
  color: var(--hl-ink);
  background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 100% 100%;
  box-shadow: 0 10px 30px -12px rgba(224, 249, 74, 0.55);
  transition: font-size 0.95s var(--spring) 1.45s, padding 0.95s var(--spring) 1.45s, opacity 0.5s linear 1.45s, background-size 0.75s var(--ease) 2s, color 0.3s linear 2.3s, box-shadow 0.8s var(--ease) 2.4s;
}
.js .ps:not(.go) .ps-old {
  color: var(--ink);
}
.js .ps:not(.go) .ps-old b {
  font-size: 50px;
}
.js .ps:not(.go) .ps-strike {
  transform: scaleX(0);
}
.js .ps:not(.go) .ps-new b {
  padding: 0;
  font-size: 0;
  opacity: 0;
  color: var(--ink);
  background-size: 0 100%;
  box-shadow: none;
}
.js .ps:not(.go) + .founding {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--hl) 22%, transparent);
}
.ps.still .ps-old,
.ps.still .ps-old b,
.ps.still .ps-strike,
.ps.still .ps-new b,
.ps.still + .founding {
  transition: none;
}
.extras {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  align-items: center;
  gap: 8px 24px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ex-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ex-k {
  font: 500 11.5px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.ex-list li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--line-2);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.ex-list b {
  font: 600 13px var(--mono);
  color: var(--ink);
}
.after {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.after-h {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 24px 26px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.after-h h3 {
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.after-h p:last-child {
  font-size: 14px;
  color: var(--ink-3);
}
.after-lede {
  padding-left: 14px;
  border-left: 2px solid var(--hl-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.plan-sub .plan-price b {
  font-size: 44px;
}
/* one monthly plan: what's in it, grouped, and what can cost extra */
.plan-growth {
  grid-column: span 2;
  gap: 18px;
}
.pg-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 12px 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pg-head .plan-k {
  margin-bottom: 8px;
}
.pg-head .plan-for {
  max-width: 44ch;
  justify-self: end;
}
/* every month's work, counted */
.pg-month {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin-top: -4px;
}
.pg-month li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}
.pg-n {
  display: grid;
  place-items: center;
  width: 48px;
  height: 38px;
  border-radius: 11px;
  background: var(--hl);
  color: var(--hl-ink);
  font: 540 20px/1 var(--serif);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pg-n svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}
.pg-i {
  background: color-mix(in srgb, var(--hl) 35%, var(--card));
}
.pg-t {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}
.pg-d {
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.pg-swap {
  padding-left: 12px;
  border-left: 2px solid var(--hl-2);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
.pg-k {
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.pg-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.pg-extra {
  padding: 14px 18px 16px;
  border-radius: 16px;
  border: 1.5px dashed var(--line-2);
}
.pg-extra ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 26px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
}
.pg-extra li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.pg-extra li b {
  flex: none;
  font: 600 13px var(--mono);
  color: var(--ink);
}
.plan-growth .pg-foot .btn {
  margin-top: 0;
}
/* the button, with a way to ask for something different beside it */
.pg-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.pg-custom {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
.plan-price .pf {
  align-self: center;
  font: 500 13px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.plan-sub .plan-price b.pw {
  font-size: 34px;
}
.plan-growth {
  background: linear-gradient(180deg, color-mix(in srgb, var(--hl) 14%, var(--card)), var(--card) 42%);
}
:root[data-theme="dark"] .plan-main {
  background: #202229;
}
/* the moving lime ring: masked to a 2px band outside the card, so it can never sit behind the text */
.plan-main::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: 25px;
  background: conic-gradient(from var(--ang, 0deg), var(--hl), transparent 22%, transparent 50%, var(--hl-2) 72%, transparent 88%, var(--hl));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: orbit 6s linear infinite;
}
@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes orbit {
  to {
    --ang: 360deg;
  }
}
/* the price and its button stay together, and in view while the list beside them is read */
.pm-a .btn {
  margin-top: 10px;
}
@media (min-width: 1041px) {
  .pm-a {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
  }
}
.plan-main .plan-list .ic {
  color: var(--hl);
}
.plan-flag {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--hl);
  color: var(--hl-ink);
  font: 600 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.plan-pay {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}
.plan-main .alt-call {
  margin-top: 4px;
  text-align: center;
}
.plan-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.note-card {
  padding: 22px 24px;
  border-radius: 20px;
  border: 1.5px dashed var(--line-2);
}
.note-card h3 {
  margin-bottom: 6px;
  font: 650 16px/1.3 var(--sans);
  letter-spacing: 0;
}
.note-card p {
  font-size: 15px;
  color: var(--ink-2);
}
.note-card a {
  font-weight: 600;
  color: var(--ink);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.peek {
  margin: 2px 0 10px;
}
/* the free first look: today's page wipes into the reimagined one, then the three changes pop up, on a loop like a short clip */
.rl {
  position: relative;
  height: 142px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.rl i {
  display: block;
}
.rl-a,
.rl-b {
  position: absolute;
  inset: 0;
}
.rl-a {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 10px 14px;
  background: #f6f6f4;
}
.rl-a > i {
  height: 6px;
  border-radius: 3px;
  background: #dcdcd8;
}
.rl-a .rl-nav {
  width: 100%;
  height: 7px;
  margin-bottom: 6px;
}
.rl-a .rl-h {
  width: 64%;
  height: 9px;
  background: #b9bab5;
}
.rl-a .rl-h.s {
  width: 44%;
}
.rl-3 {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.rl-3 i {
  width: 38px;
  height: 12px;
  border-radius: 4px;
  background: #c9cac5;
}
.rl-a .rl-ph {
  width: 76%;
  height: 34px;
  margin-top: 6px;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, #e4e4e0 0 6px, #eeeeea 6px 12px);
}
.rl-b {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #ffffff 40%, #eef2ff);
}
.rl-nv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #e8ebf2;
}
.rl-nv i {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background: #d9deea;
}
.rl-nv .lg {
  width: 30px;
  height: 8px;
  background: #1e2a4a;
}
.rl-nv .bt {
  width: 34px;
  height: 11px;
  margin-left: auto;
  background: #3e63f5;
}
.rl-hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px 10px;
}
.rl-copy {
  display: grid;
  gap: 5px;
}
.rl-copy i {
  height: 5px;
  border-radius: 3px;
  background: #d9deea;
}
.rl-copy .ey {
  width: 40%;
  height: 7px;
  background: #dfe6ff;
}
.rl-copy .h1 {
  width: 94%;
  height: 9px;
  background: #1e2a4a;
}
.rl-copy .h1.s {
  width: 70%;
}
.rl-copy .p {
  width: 82%;
}
.rl-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.rl-cta .bt {
  width: 52px;
  height: 14px;
  border-radius: 4px;
  background: #3e63f5;
  box-shadow: 0 5px 10px -5px #3e63f5;
}
.rl-cta .ok {
  width: 30px;
  height: 5px;
  background: #86d3a4;
}
.rl-copy .st {
  width: 36%;
  height: 5px;
  background: #f5c542;
}
.rl-vis {
  display: grid;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #e3e7ef, 0 10px 20px -12px rgba(30, 42, 74, 0.55);
}
.rl-vis .r {
  height: 11px;
  border-radius: 4px;
  background: #f1f3f8;
}
.rl-vis .r.on {
  background: #e8efff;
  box-shadow: inset 2px 0 0 #3e63f5;
}
.rl-vis .gr {
  height: 18px;
  margin-top: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, #3e63f5 0 22%, #9fb3ff 22% 48%, #dfe6ff 48%);
}
.rl-wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--hl);
  box-shadow: 0 0 12px rgba(224, 249, 74, 0.9);
  opacity: 0;
}
.rl-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #15161b;
  color: #e0f94a;
  font: 700 10px/1 var(--sans);
  box-shadow: 0 0 0 2px #ffffff, 0 4px 10px -3px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
}
.rl-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: 5px;
  font: 600 9.5px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rl-tag-a {
  background: rgba(21, 22, 27, 0.72);
  color: #ffffff;
  opacity: 0;
}
.rl-tag-b {
  background: var(--hl);
  color: #15161b;
}
.rl-clip {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  z-index: 3;
  height: 3px;
  border-radius: 3px;
  background: rgba(21, 22, 27, 0.12);
  overflow: hidden;
}
.rl-clip i {
  height: 100%;
  background: #15161b;
  transform-origin: 0 50%;
}
.peek.play .rl-b {
  animation: rlReveal 8s var(--ease) infinite;
}
.peek.play .rl-wipe {
  animation: rlWipe 8s linear infinite;
}
.peek.play .rl-pin {
  animation: rlPin 8s var(--ease) infinite;
  animation-delay: calc(var(--k) * 0.22s);
}
.peek.play .rl-tag-a {
  animation: rlTagA 8s linear infinite;
}
.peek.play .rl-tag-b {
  animation: rlTagB 8s linear infinite;
}
.peek.play .rl-clip i {
  animation: rlClip 8s linear infinite;
}
@keyframes rlReveal {
  0%,
  16% {
    clip-path: inset(0 100% 0 0);
  }
  34%,
  90% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  97%,
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}
@keyframes rlWipe {
  0%,
  15% {
    left: 0;
    opacity: 0;
  }
  16% {
    left: 0;
    opacity: 1;
  }
  34% {
    left: 100%;
    opacity: 1;
  }
  37%,
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes rlPin {
  0%,
  37% {
    transform: translate(-50%, -50%) scale(0);
  }
  42%,
  88% {
    transform: translate(-50%, -50%) scale(1);
  }
  94%,
  100% {
    transform: translate(-50%, -50%) scale(0);
  }
}
@keyframes rlTagA {
  0%,
  22% {
    opacity: 1;
  }
  25%,
  94% {
    opacity: 0;
  }
  97%,
  100% {
    opacity: 1;
  }
}
@keyframes rlTagB {
  0%,
  26% {
    opacity: 0;
  }
  30%,
  92% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes rlClip {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.peek figcaption {
  margin-top: 7px;
  font: 500 11px/1.45 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 7vw, 110px);
  align-items: start;
}
.me {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
}
.me-frame {
  position: relative;
  width: min(100%, 320px);
}
.me-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 26px;
  background: #080808;
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.about-copy .rise-in mark {
  animation: markIn 1s var(--ease) 0.5s backwards;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  max-width: 360px;
  margin-top: 30px;
}
.facts dt {
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.facts dd {
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.4;
}
/* the same live month as the hero's "Taking on sprints for", with its green dot */
.facts .f-avail {
  display: flex;
  align-items: center;
  gap: 8px;
}
.facts .f-avail i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent);
}
.about-copy .sh {
  margin-bottom: 26px;
}
.about-copy > div.reveal > p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 60ch;
}
.about-copy > div.reveal > p + p {
  margin-top: 16px;
}
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.about-links .btn .ic {
  width: 17px;
  height: 17px;
}
.about-links .btn:hover .ic {
  transform: none;
}

/* the story behind a role, in the experience card */
.rp-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-top b {
  font: 600 21px/1.1 var(--serif);
}
.rp-top span {
  font: 500 11px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.rp-lede {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.5;
}
/* what the company is, in one line under the role */
.rp-co {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.rp-co + .rp-lede {
  margin-top: 8px;
}
.rp-list {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}
.rp-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.rp-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hl);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 55%, transparent);
}
.rp-quote {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hl) 12%, transparent);
  font: italic 440 14.5px/1.45 var(--serif);
}
.rp-quote span {
  display: block;
  margin-top: 5px;
  font: normal 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.rp-foot {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--line-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ---------- faq ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 7vw, 110px);
  align-items: start;
}
.faq-head {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  margin-bottom: 0;
}
.faq-head a {
  font-weight: 600;
  color: var(--ink);
  text-underline-offset: 3px;
}
.qa {
  border-bottom: 1px solid var(--line);
}
.qa:first-child {
  border-top: 1px solid var(--line);
}
.qa h3 {
  font: inherit;
  letter-spacing: 0;
}
.qa button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 21px 2px;
  text-align: left;
  font: 600 17.5px/1.35 var(--sans);
  letter-spacing: -0.01em;
}
.qa button i {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.qa button i::before,
.qa button i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.8px;
  margin: -0.9px 0 0 -5.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.qa button i::after {
  transform: rotate(90deg);
}
.qa button:hover i {
  border-color: var(--ink);
}
.qa.open button i {
  background: var(--hl);
  border-color: var(--hl);
  color: var(--hl-ink);
  transform: rotate(180deg);
}
.qa.open button i::after {
  transform: rotate(0deg);
}
.qa-a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.js .qa:not(.open) .qa-a {
  grid-template-rows: 0fr;
}
.qa-a > div {
  overflow: hidden;
  min-height: 0;
}
.js .qa:not(.open) .qa-a > div {
  visibility: hidden;
  transition: visibility 0s 0.45s;
}
.qa-a p {
  padding: 0 48px 22px 2px;
  color: var(--ink-2);
  max-width: 64ch;
}
.qa-a p:not(:last-child) {
  padding-bottom: 12px;
}

/* ---------- tools: the software from the CV, as app-icon tiles ---------- */
.tools {
  background: var(--paper-2);
}
.tools .sh {
  margin-bottom: 34px;
}
.tools .sh p:not(.kicker) {
  margin-top: 12px;
  font-size: 17px;
  color: var(--ink-2);
}
.tool-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
}
.tool-k {
  margin-bottom: 14px;
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.tool-list {
  display: grid;
  gap: 10px;
}
.tool-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}
/* every tile carries its own background, so it reads the same in both themes */
.tool-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--b, #ffffff);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(21, 22, 27, 0.08);
}
.tool-ic svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.tool-ic.dk {
  color: #15161b;
}
/* apps I've built: a row under the groups; each one explains itself on hover, focus or a tap */
.tool-apps {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.app-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.app-list li {
  position: relative;
}
.app-chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 16px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 500 15px/1.2 var(--sans);
  cursor: help;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.app-chip:hover,
.app-chip[aria-expanded="true"] {
  border-color: var(--ink-3);
  box-shadow: var(--sh-1, 0 4px 14px -6px rgba(0, 0, 0, 0.25));
}
.app-ws {
  background: linear-gradient(135deg, #6d28d9, #d946ef 70%, #fbbf24);
}
.app-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 5;
  width: min(280px, calc(100vw - 32px));
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s var(--ease), visibility 0.18s;
  pointer-events: none;
}
.app-chip:hover + .app-tip,
.app-chip:focus-visible + .app-tip,
.app-chip[aria-expanded="true"] + .app-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.app-offer {
  max-width: 70ch;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}
.app-offer b {
  color: var(--ink);
}
.app-offer a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 4px;
  white-space: nowrap;
}
/* on a phone the note opens under its chip instead of floating over the ones beside it */
@media (max-width: 640px) {
  .app-list {
    display: grid;
    gap: 10px;
  }
  .app-tip {
    position: static;
    width: auto;
    margin-top: 8px;
    display: none;
    transform: none;
  }
  .app-chip:hover + .app-tip,
  .app-chip:focus-visible + .app-tip {
    display: none;
  }
  .app-chip[aria-expanded="true"] + .app-tip {
    display: block;
  }
}
.tool-ic.own svg,
.tool-ic.own img {
  width: 100%;
  height: 100%;
}
.tool-ic.wt {
  background: #ffffff;
}
.tool-ic.wt svg,
.tool-ic.wt img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
@media (max-width: 1040px) {
  .tool-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .tool-groups {
    gap: 26px 16px;
  }
  .tool-list li {
    gap: 9px;
    font-size: 14px;
  }
}

/* ---------- start ---------- */
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.start-copy h2 {
  font-size: clamp(2.2rem, 1.25rem + 3.1vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.start-copy :is(.sc-look, .sc-call) > p {
  margin-top: 22px;
  max-width: 50ch;
  font-size: 17px;
  color: var(--ink-2);
}
.next {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}
.next li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.next li > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--hl);
  color: var(--hl);
  font: 600 13px var(--mono);
}
.next b {
  display: block;
  color: var(--ink);
  font-size: 16px;
}
.form {
  --card: #ffffff;
  --paper: #f3f1ea;
  --ink: #15161b;
  --ink-2: #3a3d44;
  --ink-3: #50535b;
  --line: #dcd8cd;
  --line-2: #c6c1b4;
  --bad: #c0392b;
  --focus: #2f54eb;
  --hl-soft: rgba(224, 249, 74, 0.6);
  --btn-bg: #15161b;
  --btn-fg: #f7f6f1;
  --btn-sweep: var(--hl);
  --btn-sweep-fg: var(--hl-ink);
  position: relative;
  padding: clamp(22px, 3.4vw, 36px);
  border-radius: 26px;
  background: #faf9f5;
  color: var(--ink);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .form {
  --card: #1c1d23;
  --paper: #121317;
  --ink: #eeece6;
  --ink-2: #d3d5d9;
  --ink-3: #b4b7be;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.2);
  --bad: #f0776a;
  --focus: var(--hl);
  --hl-soft: rgba(224, 249, 74, 0.25);
  --btn-bg: var(--hl);
  --btn-fg: var(--hl-ink);
  --btn-sweep: #ffffff;
  background: #17181d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.field {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.field label,
.field legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}
.opt {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  transition: border-color 0.2s, box-shadow 0.25s;
}
.field textarea {
  resize: vertical;
  min-height: 96px;
}
.field input:hover,
.field textarea:hover {
  border-color: var(--ink-3);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--hl-soft);
}
.field input[aria-invalid="true"] {
  border-color: var(--bad);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 15%, transparent);
}
.chip {
  position: relative;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip span {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--card);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.chip span:hover {
  border-color: var(--ink);
}
.chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
}
.chip input:focus-visible + span {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}
.form-fine {
  margin-top: 13px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.form-done {
  padding: 18px 6px 6px;
  text-align: center;
  outline: none;
  animation: rise 0.6s var(--ease);
}
.done-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--hl);
  color: #15161b;
  animation: pop 0.6s var(--spring);
}
.done-mark svg {
  width: 28px;
  height: 28px;
}
@keyframes pop {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
}
.form-done h3 {
  font-size: 28px;
  margin-bottom: 8px;
}
.form-done p {
  max-width: 40ch;
  margin-inline: auto;
  color: var(--ink-2);
}
.done-fallback {
  margin-top: 12px;
  font-size: 14px;
}
.done-fallback a {
  font-weight: 600;
  color: var(--ink);
}
.manual-copy {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  font: 400 12.5px/1.5 var(--mono);
  resize: vertical;
}
.done-act {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 20px;
  font-size: 14px;
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
}
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding-block: 52px 40px;
}
.foot .brand-mark {
  background: var(--hl);
  color: #15161b;
}
.foot-tag {
  margin-top: 14px;
  max-width: 38ch;
  font-size: 14.5px;
  color: var(--ink-2);
}
.foot-nav,
.foot-contact {
  display: grid;
  align-content: start;
  gap: 10px;
  font-size: 15px;
}
.foot-nav a,
.foot-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.2s;
  --in-knock: var(--paper);
}
.foot-nav a:hover,
.foot-contact a:hover {
  color: var(--ink);
}
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 24px;
  padding-block: 20px 30px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
}
.foot-bottom .btn-link {
  color: var(--ink);
  font-size: 13.5px;
}

/* ---------- teardown mode: the page grades itself ---------- */
/* on wide screens the page shrinks into the space left of the scorecard, so every outline is whole */
.page {
  transform-origin: 0 0;
  transition: transform 0.55s var(--ease);
}
.td-split .page {
  transform: scale(var(--td-k, 1));
  margin-bottom: var(--td-mb, 0px);
}
.td-split .me,
.td-split .faq-head {
  position: static;
}
/* back on the button that opened it: one ring spreads out, so the eye finds its place */
.td-back {
  animation: tdBack 1.8s var(--ease);
}
.fw-cta.td-back {
  animation: fwRun 2.8s linear infinite, tdBack 1.8s var(--ease);
}
@keyframes tdBack {
  0% {
    outline: 3px solid var(--hl);
    outline-offset: 2px;
  }
  100% {
    outline: 3px solid transparent;
    outline-offset: 18px;
  }
}
html:not(.js) .con-auto {
  display: none;
}
html:not(.js) .tick {
  background: var(--hl);
  border-color: var(--hl);
}
html:not(.js) .tick::after {
  transform: rotate(45deg) scale(1);
}
/* everything except the element being checked dims */
.td-spot {
  position: absolute;
  z-index: 70;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 3px var(--c, var(--hl)), 0 0 0 9999px rgba(10, 11, 14, 0.62);
  pointer-events: none;
  opacity: 0;
  transition: left 0.55s var(--ease), top 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease), opacity 0.35s, box-shadow 0.35s;
}
.td-spot.on {
  opacity: 1;
}
.td-spot-id {
  position: absolute;
  left: -15px;
  top: -15px;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: 999px;
  font: 700 12.5px/1 var(--sans);
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px var(--paper), 0 8px 20px -6px rgba(0, 0, 0, 0.5);
}
/* the explanation card, placed beside the element it talks about */
.tdc {
  position: absolute;
  z-index: 90;
  left: 0;
  top: 0;
  width: 380px;
  padding: 14px 18px 14px;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 3px solid var(--c, var(--hl));
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transition: left 0.5s var(--ease), top 0.5s var(--ease), opacity 0.3s, transform 0.4s var(--ease), visibility 0s linear 0.3s;
}
.td-walk .tdc {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: left 0.5s var(--ease), top 0.5s var(--ease), opacity 0.3s, transform 0.4s var(--ease), visibility 0s;
}
.tdc-caret {
  position: absolute;
  background: var(--c, var(--hl));
}
.tdc[data-side="below"] .tdc-caret {
  top: -12px;
  left: var(--caret-x, 30px);
  width: 20px;
  height: 10px;
  margin-left: -10px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tdc[data-side="above"] .tdc-caret {
  bottom: -10px;
  left: var(--caret-x, 30px);
  width: 20px;
  height: 10px;
  margin-left: -10px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tdc[data-side="left"] .tdc-caret {
  right: -10px;
  top: 26px;
  width: 10px;
  height: 20px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tdc[data-side="right"] .tdc-caret {
  left: -10px;
  top: 26px;
  width: 10px;
  height: 20px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.tdc.docked .tdc-caret {
  display: none;
}
.tdc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 11.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.tdc-all {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: -5px 0 -5px -7px;
  padding: 5px 9px 5px 4px;
  border-radius: 999px;
  font: 600 12.5px/1 var(--sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
  transition: background-color 0.2s, color 0.2s;
}
.tdc-all:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.tdc-all svg {
  width: 15px;
  height: 15px;
}
.tdc-step {
  margin-left: auto;
}
.tdc-heat {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -6px -2px;
  border-radius: 50%;
  color: var(--ink-3);
  transition: background-color 0.2s, color 0.2s;
}
.tdc-heat:hover {
  color: var(--ink);
  background: var(--paper-2);
}
.tdc-heat[aria-pressed="true"] {
  background: var(--hl);
  color: #15161b;
}
.tdc-heat svg {
  width: 16px;
  height: 16px;
}
.tdc-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -6px -8px -6px 0;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background-color 0.2s, color 0.2s;
}
.tdc-x:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.tdc-x svg {
  width: 14px;
  height: 14px;
}
.tdc-cat {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}
.tdc-cat [tabindex="-1"]:focus {
  outline: none;
}
.tdc-c {
  font-weight: 500;
  color: var(--ink-3);
}
.tdc-id {
  flex: none;
  padding: 4px 8px;
  border-radius: 6px;
  font: 700 12px/1.1 var(--sans);
  letter-spacing: 0.02em;
}
.tdc-sc {
  margin-left: auto;
  flex: none;
  font: 600 13.5px var(--mono);
  color: var(--good);
}
.tdc-sc.low {
  color: var(--bad);
}
.tdc-text {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.tdc-dots {
  display: flex;
  flex-wrap: wrap;
  margin: 12px -5px 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.tdc-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.tdc-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  transition: transform 0.3s var(--spring), background-color 0.2s, box-shadow 0.2s;
}
.tdc-dot:hover::before {
  transform: scale(1.3);
}
.tdc-dot.low::before {
  background: color-mix(in srgb, var(--bad) 75%, transparent);
}
.tdc-dot.cur::before {
  background: var(--hl);
  box-shadow: 0 0 0 2px var(--ink);
  transform: scale(1.25);
}
.tdc-btns {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.tdc-btns .btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* overview: every check at a glance, grouped by category, traced on the page */
.td-trace {
  position: absolute;
  z-index: 45;
  border: 2px dashed var(--c);
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 4%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s, box-shadow 0.3s, background-color 0.3s;
}
.td-ov .td-trace {
  opacity: 1;
}
.td-trace.hot {
  background: color-mix(in srgb, var(--c) 11%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent);
}
.td-mark {
  position: absolute;
  z-index: 46;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border-radius: 999px;
  font: 700 12px/1 var(--sans);
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px var(--paper), 0 8px 18px -6px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.45s var(--spring);
  transition-delay: calc(var(--k, 0) * 40ms);
}
.td-ov .td-mark {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.td-mark:hover,
.td-mark.hot {
  transform: scale(1.15);
  transition-delay: 0s;
}
.tdo {
  position: fixed;
  z-index: 90;
  top: calc(var(--nav-h) + 12px + env(safe-area-inset-top, 0px));
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  width: min(392px, calc(100vw - 32px));
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform: translateX(calc(100% + 24px));
  visibility: hidden;
  transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
}
.td-ov .tdo {
  transform: none;
  visibility: visible;
  transition: transform 0.55s var(--ease), visibility 0s;
}
.tdo-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.tdo-head h2 {
  font-size: 22px;
  line-height: 1.15;
  outline: none;
}
.tdo-head p {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.tdo-score {
  flex: none;
  margin-left: auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--hl);
  color: #15161b;
  text-align: center;
  font: 540 26px/1 var(--serif);
}
.tdo-score small {
  display: block;
  margin-top: 3px;
  font: 600 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tdo-head .tdc-x {
  margin: -4px -8px 0 -4px;
}
.tdo-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 18px 16px;
}
.tdo-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.tdo-cat {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 84px 28px;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
}
.tdo-cat .d {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}
.tdo-cat .b {
  position: relative;
  height: 6px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.tdo-cat .b i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  transform-origin: 0 50%;
  transform: scaleX(var(--v));
}
.tdo-cat .v {
  text-align: right;
  font: 600 12.5px var(--mono);
  font-variant-numeric: tabular-nums;
}
.tdo-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  padding-left: 19px;
}
.tdo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.2s, background-color 0.2s;
}
.tdo-chip:hover,
.tdo-chip.hot {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.tdo-chip .id {
  padding: 3px 6px;
  border-radius: 999px;
  font: 700 10.5px/1.1 var(--sans);
  letter-spacing: 0.02em;
}
.tdo-chip b {
  font: 600 11.5px var(--mono);
  color: var(--good);
}
.tdo-chip.low b {
  color: var(--bad);
}
/* checks further down than the visitor has read: greyed until they get there */
.tdo-chip.later {
  opacity: 0.42;
  cursor: default;
  border-style: dashed;
}
.tdo-chip.later:hover {
  border-color: var(--line-2);
  background: none;
}
.tdo-later {
  margin-top: 6px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.tdc-dot.later::before {
  opacity: 0.3;
}
.tdc-dot.later {
  cursor: default;
}
.tdc-later {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hl) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl) 50%, transparent);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.tdc-later b {
  display: block;
  font-weight: 650;
  color: var(--ink);
}
.tdc-later span {
  display: block;
  margin-top: 2px;
}
/* one hollow dot per criterion still to come, in its category's colour */
.tdc-later .tdc-later-dots {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tdc-later-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--c);
}
/* ...and once they get there, a small tag above the corner of what it scores */
.td-tag {
  position: absolute;
  z-index: 40;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 4px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--spring), border-color 0.2s;
}
.td-tag.in {
  opacity: 1;
  transform: none;
}
/* a tag rings twice when it first shows up, so the second part of the tour gets noticed */
.td-tag.in::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent);
  animation: tdTagPing 1.5s var(--ease) 0.35s 2;
  pointer-events: none;
}
@keyframes tdTagPing {
  to {
    box-shadow: 0 0 0 12px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .td-tag.in::after {
    animation: none;
  }
}

/* the rest of the scoring tour, offered at the bottom once its first part is done */
.td-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 44px;
  padding: 22px 26px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--hl) 60%, var(--line));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hl) 14%, transparent);
}
.td-next[hidden] {
  display: none;
}
.tdn-copy {
  flex: 1 1 360px;
  min-width: 0;
}
.tdn-k {
  font: 500 11.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}
.tdn-t {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.tdn-t b {
  font-weight: 650;
  color: var(--ink);
}
.tdn-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.tdn-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1 var(--mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tdn-bar {
  width: 96px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.tdn-bar i {
  display: block;
  width: calc(var(--v, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
}
@media (max-width: 640px) {
  .td-next {
    padding: 18px;
  }
  .tdn-go {
    width: 100%;
  }
  .tdn-go .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.td-tag:hover {
  border-color: var(--c);
}
.td-tag .id {
  padding: 3px 6px;
  border-radius: 999px;
  font: 700 10.5px/1.1 var(--sans);
  letter-spacing: 0.02em;
}
.td-tag b {
  font: 600 11.5px var(--mono);
  color: var(--good);
}
.td-tag.low b {
  color: var(--bad);
}
.td-on .td-tag {
  opacity: 0;
  pointer-events: none;
}
.tdo-chip.cur {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.td-both .td-trace,
.td-both .td-mark {
  opacity: 0;
  pointer-events: none;
}
.td-both .tdo-foot [data-walk] {
  display: none;
}
.tdo-heat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.tdo-heat p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}
.tdo-heat b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
.switch {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--line-2);
  transition: background-color 0.25s;
}
.switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s var(--spring);
}
.switch[aria-checked="true"] {
  background: var(--good);
}
.switch[aria-checked="true"]::after {
  transform: translateX(18px);
}
.tdo-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.tdo-foot .btn {
  width: 100%;
}
/* no room beside the element (phones): the card sits at the bottom */
.tdc.docked {
  position: fixed;
  left: 16px;
  top: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  max-height: min(58vh, 560px);
}
/* the middle scrolls on its own; the top row and Back and Next always stay in the card */
.tdc.docked .tdc-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tdc.docked .tdc-top,
.tdc.docked .tdc-btns {
  flex: none;
}
.tdc.docked .tdc-later {
  padding: 8px 10px;
  font-size: 12.5px;
}
/* at the end of part 1 the note about part 2 matters more than the dots, so the dots step aside */
.tdc.docked .tdc-scroll:has(.tdc-later:not([hidden])) .tdc-dots {
  display: none;
}
.tdc.docked.side .tdc-later span:not(.tdc-later-dots) {
  display: none;
}
/* on a phone on its side the words need the height more than the dots do ("All criteria" still jumps) */
.tdc.docked.side .tdc-dots {
  display: none;
}
.tdc.docked.side .tdc-text {
  font-size: 14px;
  line-height: 1.5;
}
/* a phone on its side: the card runs down the right, beside what it describes */
.tdc.docked.side {
  left: auto;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(360px, 45vw);
  max-height: none;
}
/* while walking, a veil over the page: it can't be tapped by mistake, and a tap on it closes the tour */
.td-veil {
  position: fixed;
  inset: 0;
  z-index: 69;
  display: none;
}
.td-walk .td-veil {
  display: block;
}
/* with the heatmap on, the dimming eases so the heat shows through */
.heat-on .td-spot {
  box-shadow: 0 0 0 3px var(--c, var(--hl)), 0 0 0 9999px rgba(10, 11, 14, 0.3);
}
.tdo-later.flash {
  animation: laterFlash 1.4s var(--ease);
}
@keyframes laterFlash {
  0%,
  45% {
    color: var(--ink);
    background: color-mix(in srgb, var(--hl) 45%, transparent);
  }
}
/* bigger targets for fingers */
@media (pointer: coarse) {
  .tdc-btns .btn {
    min-height: 44px;
  }
  .tdc-all {
    min-height: 40px;
  }
  .tdc-heat,
  .tdc-x {
    width: 40px;
    height: 40px;
  }
  .tdc-dots {
    gap: 4px;
  }
  .tdc-dot {
    width: 22px;
    height: 22px;
  }
  .td-tag,
  .tdo-chip {
    min-height: 36px;
  }
  .foot-bottom .btn-link {
    padding-block: 10px;
  }
}
canvas.heat {
  position: fixed;
  inset: 0;
  z-index: 44;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
canvas.heat {
  filter: blur(3px) saturate(1.15);
}
.heat-on canvas.heat {
  opacity: 0.66;
}

.snap,
.snap * {
  transition: none !important;
}

/* ID pills and category-coloured text, kept at AA contrast */
.td-spot-id,
.tdc-id,
.td-mark,
.tdo-chip .id,
.td-tag .id {
  background: color-mix(in srgb, var(--c), #000 var(--id-dark));
  color: var(--id-fg);
}
.cat-sum span {
  color: color-mix(in srgb, var(--c) 70%, var(--ink));
}
.radar .lbl.on .lbl-s {
  fill: color-mix(in srgb, var(--ac) 70%, var(--ink));
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .gains-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .gains-k {
    width: auto;
  }
  .gains-body {
    width: 100%;
  }
  .gains-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 0;
  }
}
@media (max-width: 1120px) {
  .nav-links a {
    padding: 8px 10px;
  }
  .brand-role {
    display: none;
  }
}
@media (max-width: 1040px) {
  .q-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .q-wide {
    grid-column: 1 / -1;
  }
  /* two columns: the third of the hidden three takes a full row, so the grid never leaves a gap */
  .q-extra + .q-extra + .q-extra {
    grid-column: 1 / -1;
  }
  .xp-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 22px 24px;
  }
  .q-wide blockquote p {
    font-size: 18px;
    line-height: 1.5;
  }
  .dg-src {
    flex-direction: column;
    align-items: flex-start;
  }
  .dg-src-list {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* stacked, the three lines of context come first, then the before and after, then the form:
     the slider needs that context to make sense (the user's call, 1 October 2026) */
  .hero-row {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .hero-copy {
    display: contents;
  }
  .byline {
    order: 1;
  }
  .lede {
    order: 2;
  }
  .hx {
    order: 3;
    width: 100%;
    max-width: 760px;
  }
  /* stacked, "Set up a call" stays with the note above it instead of a full gap away */
  .hero-copy > .alt-call {
    margin-top: -14px;
  }
  /* and the form's second step keeps its "For ... Change" line right under the field */
  .hero-copy > .quick-for {
    margin-top: -14px;
  }
  /* the form keeps one width through both steps instead of shrinking to its button */
  .hero-copy > .quick {
    width: 100%;
  }
  /* the note and an error message belong to the form too */
  .hero-copy > .quick-note {
    margin-top: -12px;
  }
  .hero-copy > .field-err {
    margin-top: -16px;
  }
  .hero-copy > :nth-child(n + 3) {
    order: 4;
    max-width: 640px;
  }
  .fw {
    grid-template-columns: minmax(0, 1fr);
  }
  .fw-radar {
    max-width: 520px;
    margin-inline: auto;
  }
  .about-grid,
  .faq-grid,
  .start-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .me,
  .faq-head {
    position: static;
  }
  .about-copy {
    display: contents;
  }
  .about-copy > .sh {
    order: -1;
    margin-bottom: 0;
  }
  .me {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px 40px;
  }
  .me-frame {
    width: min(100%, 280px);
  }
  .facts {
    margin-top: 0;
  }
  .plans,
  .after {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
  .plan-main,
  .plan-growth {
    grid-column: auto;
  }
  .pg-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .pg-head .plan-for {
    justify-self: start;
  }
  .pg-month {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pg-foot {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-main {
    transform: none;
  }
  .plan-main:hover {
    transform: translateY(-5px);
  }
  .oc-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .oc-pages {
    max-width: 680px;
  }
  .oc-promise {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-notes {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
  .con-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .con-tabs::-webkit-scrollbar {
    display: none;
  }
  .con-tab {
    flex: 0 0 auto;
    min-width: 150px;
    scroll-snap-align: start;
  }
  .cp-kick,
  .cp-dir,
  .cp-dg,
  .cp-mk,
  .cp-rev {
    grid-template-columns: minmax(0, 1fr);
  }
  .tdx-cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ida {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .ida-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
  }
  .ida-list li {
    grid-template-columns: 12px auto auto;
  }
  .dir-left {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
  .ho-gets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
  .burger {
    display: inline-grid;
  }
  .nav-act {
    margin-left: auto;
  }
  .why-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
  .oc-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .proof-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .proof-k {
    width: auto;
  }
  .proof-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
    width: 100%;
  }
  /* stacked: one clean list, icon on the left and the words beside it, the first reason still in its card */
  .gains-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .gains-list li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    row-gap: 3px;
    padding: 14px 4px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .gains-list .gl-lead {
    margin: 0 0 6px;
    padding: 16px 16px 17px;
    border-top: 1.5px solid color-mix(in srgb, var(--hl-2) 75%, transparent);
  }
  .gains-list .gl-lead + li {
    border-top: 0;
  }
  .gains-list .gi,
  .gl-lead .gi {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    margin: 1px 0 0;
    border-radius: 10px;
  }
  .gains-list b,
  .gains-list li:first-child b {
    font-size: 17.5px;
  }
  .gains-list span:last-child {
    font-size: 14px;
    line-height: 1.45;
  }
  /* the extra reads as one more row, with a quieter tile */
  .gains-plus {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "icon k" "icon t" "icon d";
    align-items: start;
    column-gap: 14px;
    row-gap: 3px;
    margin-top: 0;
    padding: 14px 4px 4px;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  .gp {
    display: contents;
  }
  .gp-k {
    grid-area: k;
  }
  .gp .ic {
    grid-area: icon;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin-top: 1px;
    padding: 9px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
  }
  .gp b {
    grid-area: t;
    margin: 0;
    font-size: 17.5px;
  }
  .gp > span {
    grid-area: d;
    font-size: 14px;
    line-height: 1.45;
  }
  .foot-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .foot-top > div:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  /* the one action stays in reach on a long page */
  .nav-cta {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .pg-cta .btn {
    flex: 1 1 100%;
  }
}
/* small phones: the button keeps its place, the theme follows the phone's own setting */
@media (max-width: 380px) {
  .theme-btn {
    display: none;
  }
}
@media (max-width: 340px) {
  .nav-cta {
    padding: 7px 10px;
    font-size: 12.5px;
  }
  .brand-name {
    font-size: 17px;
  }
}
@media (max-width: 640px) {
  .hero-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .seg {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* phones: the field and the button each stand on their own, full width, instead of a pill folded in two */
  .quick {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .quick:focus-within {
    box-shadow: none;
  }
  .quick-field {
    min-height: 56px;
    padding: 0 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line-2);
    box-shadow: var(--sh-1);
    transition: border-color 0.2s, box-shadow 0.3s;
  }
  .quick-field:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--hl-soft);
  }
  .quick.err .quick-field {
    border-color: var(--bad);
  }
  .quick-field input {
    padding: 15px 0;
  }
  .quick .btn {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
  }
  .hx .tw-url {
    display: none;
  }
  .hx-mode {
    margin-left: auto;
  }
  .hx-stage {
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1.2;
  }
  .hx-fixes {
    padding: 12px;
  }
  /* on phones: the score across the top, the checklist in one column under it */
  .hx-set {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 2px;
  }
  .hf-score {
    grid-row: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3px 18px;
    margin: 0 0 6px;
    padding: 2px 4px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .hf-k {
    grid-column: 1 / -1;
  }
  .hf-num {
    grid-row: 2 / 4;
  }
  .hf-meter {
    margin-top: 0;
    align-self: end;
  }
  .hf-range {
    align-self: start;
  }
  .hf {
    padding: 6px 8px 6px 6px;
    gap: 9px;
  }
  .hf-show {
    margin: 6px 0 0 2px;
  }
  .proof-list b {
    font-size: 18.5px;
    white-space: nowrap;
  }
  .co-lg {
    height: calc(var(--h) * 0.8);
  }
  .con-title {
    display: none;
  }
  .radar .lbl-n {
    font-size: 19px;
  }
  .radar .lbl-s {
    font-size: 16px;
  }
  .con-weeks,
  .con-key {
    display: none;
  }
  .ho-gets {
    grid-template-columns: minmax(0, 1fr);
  }
  .ho-gets li:first-child {
    grid-row: auto;
  }
  .ho-set {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
  }
  .ho-scr {
    scroll-snap-align: start;
    transform: none !important;
  }
  .dir-left {
    grid-template-columns: minmax(0, 1fr);
  }
  .dir-board {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
  }
  .dpg {
    scroll-snap-align: start;
  }
  .dir-foot,
  .cp-dir .dir-src {
    grid-template-columns: minmax(0, 1fr);
  }
  .cp-dir .dir-src {
    gap: 10px;
  }
  .cp-dir .dir-src .src-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dir-into {
    justify-self: center;
  }
  .dir-into .ic {
    transform: rotate(90deg);
  }
  .pb-cols {
    display: flex;
    gap: 10px;
    margin-inline: -4px;
    padding: 0 4px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  .pb-col {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .pb-lane {
    grid-template-columns: minmax(0, 1fr);
  }
  .tdx {
    gap: 20px;
  }
  .tdx-pages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .tdx-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .tdx-bin {
    height: 58px;
    padding: 8px;
  }
  .tdx-dot {
    width: 13px;
    height: 13px;
  }
  .tdx-name {
    font-size: 12.5px;
  }
  .ba {
    height: 340px;
  }
  .oc-benefits,
  .pg-month,
  .pg-extra ul,
  .q-grid,
  .idea-board,
  .dg-src-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .xp-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xp-tab {
    padding: 12px 16px;
  }
  .xp-tab:nth-child(3) {
    border-left: 0;
  }
  .xp-tab:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .xp-panel {
    padding: 20px 18px 22px;
  }
  .q-toggle {
    font-size: 13.5px;
  }
  .q-big {
    grid-column: auto;
  }
  .fw-chip {
    display: none;
  }
  .fw-radar {
    padding: 14px 12px 16px;
  }
  .oc-page figcaption {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 7px 8px;
    font-size: 11.5px;
  }
  .ocp-body {
    height: 150px;
    padding: 8px;
  }
  .pm-grid,
  .extras,
  .ex-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pm-b {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .plan-main {
    padding: 30px 22px 24px;
  }

  .call-who {
    justify-content: space-between;
    gap: 8px;
  }
  .con-tab {
    min-width: 128px;
    padding: 11px 14px 13px;
  }
  .con-stage {
    min-height: 0;
  }
  .con-get {
    flex-direction: column;
    gap: 8px;
  }

  .cat-btn {
    grid-template-columns: 12px minmax(0, 1fr) 18px;
    grid-template-areas: "dot name chev" ". q q";
    row-gap: 2px;
  }
  /* the kickoff takeaways: each label over its note */
  .notes > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .cat-dot {
    grid-area: dot;
  }
  .cat-name {
    grid-area: name;
  }
  .cat-q {
    grid-area: q;
    white-space: normal;
    font-size: 15.5px;
  }
  .cat-chev {
    grid-area: chev;
  }
  .cat-sum,
  .cat-ex {
    margin-left: 0;
  }
  .qa button {
    font-size: 16.5px;
  }
  .qa-a p {
    padding-right: 8px;
  }
  .foot-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .tdc.docked {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(56vh, 520px);
  }
  .tdo {
    top: auto;
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: min(84vh, 680px);
    transform: translateY(calc(100% + 40px));
  }
  /* on phones the scorecard keeps its list roomy: the intro and the heatmap's small print step aside */
  .tdo-head > div > p:not(.tdo-later),
  #heatDesc {
    display: none;
  }
  .td-mark {
    min-width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .byline {
    gap: 14px;
    margin-bottom: 20px;
  }
  .byline img {
    width: 104px;
    height: 104px;
    border-radius: 18px;
  }
  .by-name {
    font-size: 19px;
  }
}

/* ---------- the sprint plan on phones: the seven steps as a list, one open at a time ----------
   Every step shows its week, its call and what you get, and a tap opens what happens in it. The tab
   row, the stage and the "You get" box dissolve (display: contents), so each step's tab, its "You get"
   line and its panel line up in order without a second copy of anything. Nothing auto-advances here. */
@media (max-width: 640px) {
  .con {
    display: flex;
    flex-direction: column;
  }
  .con-title {
    display: block;
  }
  .con-auto,
  .con-get-k,
  .ct-bar {
    display: none;
  }
  .con-tabs,
  .con-stage,
  .con-get {
    display: contents;
  }
  #ct0,
  .con .cg[data-step="0"] {
    order: 1;
  }
  #cp0 {
    order: 2;
  }
  #ct1,
  .con .cg[data-step="1"] {
    order: 3;
  }
  #cp1 {
    order: 4;
  }
  #ct2,
  .con .cg[data-step="2"] {
    order: 5;
  }
  #cp2 {
    order: 6;
  }
  #ct3,
  .con .cg[data-step="3"] {
    order: 7;
  }
  #cp3 {
    order: 8;
  }
  #ct4,
  .con .cg[data-step="4"] {
    order: 9;
  }
  #cp4 {
    order: 10;
  }
  #ct5,
  .con .cg[data-step="5"] {
    order: 11;
  }
  #cp5 {
    order: 12;
  }
  #ct6,
  .con .cg[data-step="6"] {
    order: 13;
  }
  #cp6 {
    order: 14;
  }
  .con-tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 14px;
    grid-template-areas: "d call chev" "t call chev";
    align-items: center;
    column-gap: 12px;
    min-width: 0;
    padding: 16px 18px 3px;
    border-right: 0;
    border-top: 1px solid var(--line);
    color: var(--ink);
    background: transparent;
  }
  #ct0 {
    border-top: 0;
  }
  .con-tab[aria-selected="true"] {
    background: transparent;
  }
  .ct-d {
    grid-area: d;
    color: var(--ink-3);
  }
  .ct-t {
    grid-area: t;
    margin-top: 3px;
    font-size: 17px;
  }
  .ct-call {
    grid-area: call;
    margin-top: 0;
  }
  .con-tab::after {
    content: "";
    grid-area: chev;
    justify-self: center;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.3s var(--ease), border-color 0.3s;
  }
  .js .con .cg,
  .js .con .cg.on {
    display: block;
    padding: 4px 18px 16px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-2);
    animation: none;
  }
  .con .cg::before {
    content: "You get";
    margin-right: 8px;
    font: 500 10.5px/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
  }
  .cp {
    position: relative;
    padding: 2px 18px 24px;
  }
  .js .con.shut .cp {
    display: none;
  }
  /* the open step: its chevron turns, and a lime line runs down its row, its "You get" and its panel */
  .con:not(.shut) .con-tab[aria-selected="true"]::after {
    border-color: var(--hl);
    transform: translateY(2px) rotate(-135deg);
  }
  .con:not(.shut) .con-tab[aria-selected="true"],
  .con:not(.shut) .cg.on,
  .js .con:not(.shut) .cp.on {
    box-shadow: inset 3px 0 0 var(--hl);
  }
  .con:not(.shut) .cg.on {
    color: var(--ink);
  }
}
/* a short phone (SE size): the docked tour card takes a little more height, so the longest text fits unscrolled */
@media (max-width: 640px) and (max-height: 700px) {
  .tdc.docked {
    max-height: min(62vh, 520px);
  }
}
@media (hover: none) {
  .hero-glow {
    display: none;
  }
}
@media (max-width: 440px) {
  .seg-opts .sl {
    display: none;
  }
  .seg-opts .ss {
    display: inline;
  }
  .plan-price .ps-old b {
    font-size: 25px;
  }
  .plan-price .ps-new b {
    font-size: 46px;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .hero-glow {
    display: none;
  }
}

/* === hero pages: other upgrade === */
/* The sample firm's pages for "other businesses", drawn to read as real screenshots. Today's pages
   (.mp) are a stock template: a photo banner, vague copy and long forms. The rebuilt pages (.hp)
   are a polished professional-services site. Both stay light whatever the site theme, and every
   size is in em so the pages scale with the stage; the type is capped in px so a wider stage
   (tablets) shows more width, not more height. */

/* ---------- the rebuilt pages: a shared kit ---------- */
.hx .hp[data-for="other"] {
  --a: #2f6b57;
  --a2: #245546;
  --n: #1d2b28;
  --m: #5c6964;
  --soft: #f6f3ed;
  --mint: #e6efea;
  --edge: #e3e6e0;
  --gold: #d39b2c;
  --hf: Georgia, "Times New Roman", serif;
  background: #ffffff;
  color: var(--n);
  line-height: 1.4;
}
.hx .hp[data-for="other"] svg {
  flex: none;
}
.hx .hp[data-for="other"] .yf-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 0.8em 1.6em;
  border-bottom: 1px solid var(--edge);
  background: #ffffff;
}
.hx .hp[data-for="other"] .yf-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  font: 700 1.16em/1 var(--hf);
  letter-spacing: -0.015em;
  color: var(--n);
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-logo svg {
  width: 1.18em;
  height: 1.18em;
}
.hx .hp[data-for="other"] .yf-links {
  display: flex;
  gap: 1.4em;
  font-size: 0.78em;
  font-weight: 500;
  color: var(--m);
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-links .on {
  color: var(--n);
  font-weight: 600;
}
.hx .hp[data-for="other"] .yf-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
  font-size: 0.76em;
  font-weight: 600;
  color: var(--n);
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-tel svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--a);
}
.hx .hp[data-for="other"] .yf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.62em 1em;
  border-radius: 0.55em;
  background: var(--a);
  color: #ffffff;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(29, 43, 40, 0.22);
}
.hx .hp[data-for="other"] .yf-btn.lg {
  padding: 0.85em 1.3em;
  border-radius: 0.6em;
  font-size: 0.9em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0.55em 1.2em -0.5em rgba(47, 107, 87, 0.75);
}
.hx .hp[data-for="other"] .yf-btn svg {
  width: 1.05em;
  height: 1.05em;
}
.hx .hp[data-for="other"] .yf-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8em;
  min-width: 0;
}
.hx .hp[data-for="other"] .yf-eye {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.36em 0.85em 0.36em 0.6em;
  border-radius: 999px;
  background: var(--mint);
  color: var(--a);
  font-size: 0.7em;
  font-weight: 600;
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-eye svg {
  width: 1.25em;
  height: 1.25em;
}
.hx .hp[data-for="other"] .yf-h1 {
  font: 400 2.3em/1.06 var(--hf);
  letter-spacing: -0.022em;
  color: var(--n);
  text-wrap: balance;
}
.hx .hp[data-for="other"] .yf-h1 em {
  font-style: italic;
  color: var(--a);
}
.hx .hp[data-for="other"] .yf-sub {
  max-width: 25em;
  font-size: 0.9em;
  line-height: 1.45;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-reply {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.74em;
  font-weight: 600;
  color: var(--n);
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-faces {
  display: inline-flex;
}
.hx .hp[data-for="other"] .yf-faces i,
.hx .hp[data-for="other"] .yf-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: var(--c);
  color: #ffffff;
  font: 700 0.7em/1 var(--sans);
  letter-spacing: 0;
}
.hx .hp[data-for="other"] .yf-faces i {
  box-shadow: 0 0 0 0.2em #ffffff;
}
.hx .hp[data-for="other"] .yf-faces i + i {
  margin-left: -0.22em;
}
/* the booking widget, restyled around its live parts */
.hx .hp[data-for="other"] .hp-book {
  gap: 0.6em;
  padding: 1em 1em 0.85em;
  border-radius: 0.95em;
  background: #ffffff;
  border: 1px solid rgba(29, 43, 40, 0.09);
  box-shadow: 0 1.8em 3em -1.6em rgba(29, 43, 40, 0.55), 0 0.3em 0.8em -0.3em rgba(29, 43, 40, 0.14);
}
.hx .hp[data-for="other"] .bk-h {
  font: 400 1.02em/1.2 var(--hf);
  letter-spacing: -0.01em;
}
.hx .hp[data-for="other"] .bk-days,
.hx .hp[data-for="other"] .bk-slots {
  gap: 0.4em;
}
.hx .hp[data-for="other"] .bk-days button,
.hx .hp[data-for="other"] .bk-slots button {
  padding: 0.6em 0.4em;
  border-radius: 0.5em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 0.72em;
  font-weight: 600;
  color: var(--n);
  cursor: pointer;
}
.hx .hp[data-for="other"] .bk-slots button {
  color: var(--a);
}
.hx .hp[data-for="other"] .bk-days button.on {
  background: var(--n);
  color: #ffffff;
  box-shadow: none;
}
.hx .hp[data-for="other"] .bk-slots button.on {
  background: var(--a);
  color: #ffffff;
  box-shadow: 0 0.35em 0.8em -0.35em rgba(47, 107, 87, 0.8);
}
.hx .hp[data-for="other"] .bk-go {
  padding: 0.72em;
  border-radius: 0.55em;
  font-size: 0.8em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.hx .hp[data-for="other"] .bk-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-size: 0.66em;
}
.hx .hp[data-for="other"] .bk-note::before {
  content: "AC";
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #2f6b57;
  color: #ffffff;
  font-size: 0.8em;
  font-weight: 700;
}
/* client stories: an initials avatar, the quote, then who said it */
.hx .hp[data-for="other"] .yf-stories {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9em;
  padding: 0.85em 1.6em 1em;
}
.hx .hp[data-for="other"] .yf-stories figure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.3em 0.75em;
  padding: 0.8em 0.95em 0.75em 0.8em;
  border-radius: 0.85em;
  background: var(--soft);
  border: 1px solid #ede8de;
}
.hx .hp[data-for="other"] .yf-stories .yf-av {
  grid-row: span 2;
  width: 3em;
  height: 3em;
  font-size: 0.78em;
}
.hx .hp[data-for="other"] .yf-q {
  font: italic 400 0.86em/1.32 var(--hf);
  color: var(--n);
}
.hx .hp[data-for="other"] figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  min-width: 0;
  white-space: nowrap;
}
.hx .hp[data-for="other"] figcaption b {
  font-size: 0.7em;
}
.hx .hp[data-for="other"] figcaption em {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.66em;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-st {
  margin-left: auto;
  color: var(--gold);
  font-size: 0.62em;
  letter-spacing: 0.1em;
}

/* ---------- the rebuilt homepage ---------- */
.hx .hp.hp-of[data-for="other"] {
  font-size: min(1.86cqw, 12.3px);
}
.hx .hp.hp-of .yf-hero {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: 1.6em;
  padding: 1.25em 1.6em 1.15em;
  background: linear-gradient(180deg, #fbf9f5, #ffffff 80%);
}
.hx .hp.hp-of .yf-ctas {
  margin-top: 0.2em;
}
.hx .hp.hp-of .yf-h1 {
  font-size: 2.2em;
}
.hx .hp.hp-of .yf-copy {
  gap: 0.72em;
}
.hx .hp.hp-of .yf-art {
  position: relative;
  height: 18em;
}
.hx .hp.hp-of .yf-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 84%;
  height: 84%;
  border-radius: 1em;
  overflow: hidden;
  box-shadow: 0 0.2em 0.6em rgba(29, 43, 40, 0.1);
}
.hx .hp.hp-of .yf-photo svg {
  width: 100%;
  height: 100%;
}
.hx .hp.hp-of .hp-book {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16.4em;
  gap: 0.5em;
  padding: 0.85em 0.9em 0.75em;
}
.hx .hp.hp-of .bk-days button,
.hx .hp.hp-of .bk-slots button {
  padding: 0.52em 0.4em;
}
.hx .hp.hp-of .bk-go {
  padding: 0.66em;
}
.hx .hp.hp-of .yf-toast {
  position: absolute;
  bottom: 23%;
  right: -0.5em;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 0.85em 0.55em 0.55em;
  border-radius: 0.8em;
  background: #ffffff;
  box-shadow: 0 0.9em 1.8em -0.8em rgba(29, 43, 40, 0.5), 0 0 0 1px rgba(29, 43, 40, 0.06);
}
.hx .hp.hp-of .yf-toast i {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: #e2f0e7;
  color: #1f7a4f;
}
.hx .hp.hp-of .yf-toast svg {
  width: 1.05em;
  height: 1.05em;
}
.hx .hp.hp-of .yf-toast b,
.hx .hp.hp-of .yf-toast em {
  display: block;
  line-height: 1.25;
  white-space: nowrap;
}
.hx .hp.hp-of .yf-toast b {
  font-size: 0.72em;
}
.hx .hp.hp-of .yf-toast em {
  font-size: 0.62em;
  color: var(--m);
}
.hx .hp.hp-of .yf-trust {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2em;
  margin: 0 1.6em;
  padding: 0.72em 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hx .hp.hp-of .yf-k {
  flex: none;
  font-size: 0.6em;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86908b;
}
.hx .hp.hp-of .yf-marks {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  color: #8a938f;
  white-space: nowrap;
}
.hx .hp.hp-of .yf-marks .m1 {
  font: italic 400 1.02em/1 var(--hf);
}
.hx .hp.hp-of .yf-marks .m2 {
  font: 800 0.76em/1 var(--sans);
  letter-spacing: 0.26em;
}
.hx .hp.hp-of .yf-marks .m3 {
  font: 700 0.98em/1 var(--sans);
  letter-spacing: -0.05em;
}
.hx .hp.hp-of .yf-marks .m4 {
  font: 400 0.92em/1 var(--hf);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}
.hx .hp.hp-of .yf-marks .m5 {
  font: 700 0.78em/1 var(--mono);
  letter-spacing: 0.16em;
}

/* ---------- the rebuilt service page: what you get, the price and a monthly report ---------- */
.hx .hp[data-for="other"][data-pg="2"],
.hx .hp[data-for="other"][data-pg="3"] {
  font-size: min(1.86cqw, 12.3px);
}
.hx .hp[data-for="other"] .yf-sv,
.hx .hp[data-for="other"] .yf-ct {
  flex: none;
  display: grid;
  gap: 1.8em;
  padding: 1.3em 1.6em 1.2em;
  background: linear-gradient(180deg, #fbf9f5, #ffffff 80%);
}
.hx .hp[data-for="other"] .yf-sv {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
  align-items: center;
}
.hx .hp[data-for="other"] .yf-sv .yf-h1 {
  font-size: 2.15em;
}
.hx .hp[data-for="other"] .yf-crumb {
  font-size: 0.7em;
  font-weight: 500;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-crumb i {
  margin: 0 0.55em;
  color: #b3bbb7;
}
.hx .hp[data-for="other"] .yf-price {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-price small {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-price b {
  font: 700 2.05em/1 var(--sans);
  letter-spacing: -0.035em;
  color: var(--n);
}
.hx .hp[data-for="other"] .yf-price em {
  font-size: 0.78em;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-sv .yf-art {
  position: relative;
  align-self: stretch;
  min-height: 19.4em;
}
.hx .hp[data-for="other"] .yf-sv .yf-report {
  position: absolute;
  top: 0;
  right: 0;
  width: 84%;
}
/* the price as a plan card, laid over the monthly report the client gets */
.hx .hp[data-for="other"] .yf-plan {
  position: absolute;
  left: -0.8em;
  bottom: 0;
  display: grid;
  justify-items: start;
  gap: 0.55em;
  width: 63%;
  padding: 1em 1.05em 0.85em;
  border-radius: 0.95em;
  background: #ffffff;
  border: 1px solid rgba(29, 43, 40, 0.1);
  box-shadow: 0 2em 3.2em -1.6em rgba(29, 43, 40, 0.6), 0 0.3em 0.8em -0.3em rgba(29, 43, 40, 0.14);
}
.hx .hp[data-for="other"] .yfp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  width: 100%;
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yfp-top b {
  font: 400 0.98em/1.2 var(--hf);
}
.hx .hp[data-for="other"] .yfp-top s {
  position: absolute;
  top: -0.95em;
  right: 1.4em;
  box-shadow: 0 0 0 0.25em #ffffff;
  padding: 0.45em 0.8em;
  border-radius: 999px;
  background: var(--mint);
  color: var(--a);
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.hx .hp[data-for="other"] .yf-plan .yf-price b {
  font-size: 2.3em;
}
.hx .hp[data-for="other"] .yfp-fine {
  margin-top: -0.2em;
  font-size: 0.66em;
  line-height: 1.35;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-plan .yf-btn {
  width: 100%;
  margin-top: 0.15em;
}
.hx .hp[data-for="other"] .yfp-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  width: 100%;
  font-size: 0.62em;
  color: var(--m);
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yfp-note svg {
  width: 1.15em;
  height: 1.15em;
  color: var(--a);
}
.hx .hp[data-for="other"] .yf-k2 {
  margin-top: 0.3em;
  font-size: 0.64em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--a);
}
.hx .hp[data-for="other"] .yf-sv .yf-incl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75em 1em;
  width: 100%;
  margin: -0.2em 0 0;
  padding: 0;
  border: 0;
}
.hx .hp[data-for="other"] .yf-sv {
  padding-top: 1.1em;
  padding-bottom: 1.05em;
}
.hx .hp[data-for="other"] .yf-report {
  display: grid;
  gap: 0.75em;
  padding: 0.9em 1em 0.7em;
  border-radius: 0.95em;
  background: #ffffff;
  border: 1px solid rgba(29, 43, 40, 0.09);
  box-shadow: 0 1.8em 3em -1.6em rgba(29, 43, 40, 0.5), 0 0.3em 0.8em -0.3em rgba(29, 43, 40, 0.12);
}
.hx .hp[data-for="other"] .yfr-top {
  display: flex;
  align-items: center;
  gap: 0.6em;
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yfr-av {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.65em;
  background: #b86a45;
  color: #ffffff;
  font: 700 0.72em/1 var(--sans);
}
.hx .hp[data-for="other"] .yfr-top b,
.hx .hp[data-for="other"] .yfr-top em {
  display: block;
  line-height: 1.25;
}
.hx .hp[data-for="other"] .yfr-top b {
  font-size: 0.8em;
}
.hx .hp[data-for="other"] .yfr-top em {
  font-size: 0.64em;
  color: var(--m);
}
.hx .hp[data-for="other"] .yfr-top s {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: auto;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: #e3f1e8;
  color: #1f7a4f;
  font-size: 0.62em;
  font-weight: 600;
}
.hx .hp[data-for="other"] .yfr-top s::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #22a55b;
}
.hx .hp[data-for="other"] .yfr-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5em;
}
.hx .hp[data-for="other"] .yfr-kpis span {
  padding: 0.5em 0.6em 0.45em;
  border-radius: 0.55em;
  background: var(--soft);
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yfr-kpis em {
  display: block;
  font-size: 0.6em;
  color: var(--m);
}
.hx .hp[data-for="other"] .yfr-kpis b {
  font: 700 0.84em/1.25 var(--sans);
  letter-spacing: -0.01em;
}
.hx .hp[data-for="other"] .yfr-kpis i {
  margin-left: 0.35em;
  font-size: 0.58em;
  font-weight: 700;
  color: #1f7a4f;
}
.hx .hp[data-for="other"] .yfr-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.6em;
  height: 4.2em;
  padding: 0 0.3em 1.05em;
  border-bottom: 1px solid var(--edge);
  background: repeating-linear-gradient(to top, transparent 0 1.1em, #eff1ee 1.1em calc(1.1em + 1px));
  background-position: 0 -1.1em;
}
.hx .hp[data-for="other"] .yfr-chart span {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.2em;
}
.hx .hp[data-for="other"] .yfr-chart span::before,
.hx .hp[data-for="other"] .yfr-chart span::after {
  content: "";
  width: 0.62em;
  border-radius: 0.18em 0.18em 0 0;
}
.hx .hp[data-for="other"] .yfr-chart span::before {
  height: var(--s);
  background: var(--a);
}
.hx .hp[data-for="other"] .yfr-chart span::after {
  height: var(--c);
  background: #c9dcd1;
}
.hx .hp[data-for="other"] .yfr-chart em {
  position: absolute;
  bottom: -1.95em;
  font-size: 0.56em;
  color: var(--m);
}
.hx .hp[data-for="other"] .yfr-tasks {
  display: grid;
  justify-items: end;
}
.hx .hp[data-for="other"] .yfr-tasks li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.38em 0;
  font-size: 0.7em;
  font-weight: 500;
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yfr-tasks li + li {
  border-top: 1px solid #f0f1ee;
}
.hx .hp[data-for="other"] .yfr-tasks i {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: #e3f1e8;
  color: #1f7a4f;
}
.hx .hp[data-for="other"] .yfr-tasks svg {
  width: 0.95em;
  height: 0.95em;
}
.hx .hp[data-for="other"] .yfr-tasks em {
  margin-left: auto;
  color: var(--m);
  font-size: 0.92em;
}
.hx .hp[data-for="other"] .yf-incl {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
  margin: 0 1.6em;
  padding: 0.8em 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hx .hp[data-for="other"] .yf-incl span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.05em 0.65em;
  min-width: 0;
}
.hx .hp[data-for="other"] .yf-incl i {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.75em;
  background: var(--mint);
  color: var(--a);
}
.hx .hp[data-for="other"] .yf-incl svg {
  width: 1.4em;
  height: 1.4em;
}
.hx .hp[data-for="other"] .yf-incl b {
  align-self: end;
  font-size: 0.8em;
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-incl em {
  align-self: start;
  font-size: 0.64em;
  line-height: 1.3;
  color: var(--m);
}

/* ---------- the rebuilt contact page: a short form, what happens next and who replies ---------- */
.hx .hp[data-for="other"] .yf-ct {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: 2em;
  padding-top: 1.5em;
}
.hx .hp[data-for="other"] .yf-ct .yf-copy {
  gap: 0.85em;
}
.hx .hp[data-for="other"] .yf-eye svg {
  width: 1.2em;
  height: 1.2em;
}
.hx .hp[data-for="other"] .yf-ct .yf-h1 {
  font-size: 2.35em;
}
.hx .hp[data-for="other"] .yf-ct .yf-reply {
  font-size: 0.8em;
  white-space: normal;
}
.hx .hp[data-for="other"] .yf-steps {
  display: grid;
  gap: 0.5em;
  margin-top: 0.15em;
}
.hx .hp[data-for="other"] .yf-steps li {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-size: 0.76em;
  color: var(--n);
}
.hx .hp[data-for="other"] .yf-steps b {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.85em;
  height: 1.85em;
  border-radius: 50%;
  background: var(--mint);
  color: var(--a);
  font-size: 0.86em;
  font-weight: 700;
}
.hx .hp[data-for="other"] .yf-proof {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.25em;
  padding: 0.65em 0.9em 0.65em 0.7em;
  border-radius: 0.85em;
  background: var(--soft);
  border: 1px solid #ede8de;
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-proof .yf-faces i {
  width: 2.5em;
  height: 2.5em;
  font-size: 0.62em;
  box-shadow: 0 0 0 0.2em var(--soft);
}
.hx .hp[data-for="other"] .yf-proof .yf-faces i:last-child {
  width: auto;
  padding: 0 0.6em;
  border-radius: 999px;
}
.hx .hp[data-for="other"] .yf-proof b,
.hx .hp[data-for="other"] .yf-proof em {
  display: block;
  line-height: 1.3;
}
.hx .hp[data-for="other"] .yf-proof b {
  font-size: 0.74em;
}
.hx .hp[data-for="other"] .yf-proof b s {
  margin-right: 0.45em;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-decoration: none;
}
.hx .hp[data-for="other"] .yf-proof em {
  font-size: 0.66em;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-form {
  display: grid;
  gap: 0.75em;
  padding: 1.1em 1.1em 0.9em;
  border-radius: 1em;
  background: #ffffff;
  border: 1px solid rgba(29, 43, 40, 0.09);
  box-shadow: 0 1.8em 3em -1.6em rgba(29, 43, 40, 0.5), 0 0.3em 0.8em -0.3em rgba(29, 43, 40, 0.12);
}
.hx .hp[data-for="other"] .yf-fh {
  font: 400 1.05em/1.2 var(--hf);
  letter-spacing: -0.01em;
}
.hx .hp[data-for="other"] .yf-form label {
  display: grid;
  gap: 0.4em;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--n);
}
.hx .hp[data-for="other"] .yf-form label > i {
  display: block;
  height: 2.65em;
  padding: 0.72em 0.85em;
  border-radius: 0.55em;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #d6dcd8;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.hx .hp[data-for="other"] .yf-form label:first-of-type > i {
  box-shadow: inset 0 0 0 1.5px var(--a), 0 0 0 0.28em rgba(47, 107, 87, 0.14);
}
.hx .hp[data-for="other"] .yf-form label > i.ph {
  color: #9aa29e;
}
.hx .hp[data-for="other"] .yf-form label > i.tall {
  height: 4.4em;
  white-space: normal;
}
.hx .hp[data-for="other"] .yf-send {
  width: 100%;
}
.hx .hp[data-for="other"] .yf-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: 0.64em;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-lock svg {
  width: 1.1em;
  height: 1.1em;
}
.hx .hp[data-for="other"] .yf-map {
  flex: 1 0 7em;
  margin: 0 1.6em 1.2em;
  border-radius: 0.8em;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.hx .hp[data-for="other"] .yf-map svg {
  width: 100%;
  height: 100%;
}
/* the visitor's name types itself into the first field, with a blinking caret */
.hx .hp[data-for="other"] .typed {
  max-width: 0;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  border-right: 1.5px solid var(--n);
  padding-right: 1px;
  animation: yfType 4.5s steps(13, end) infinite, yfCaret 0.9s step-end infinite;
}
@keyframes yfType {
  0% {
    max-width: 0;
  }
  45%,
  100% {
    max-width: 9em;
  }
}
@keyframes yfCaret {
  50% {
    border-right-color: transparent;
  }
}
.hx .hp[data-for="other"] .yf-office {
  flex: none;
  display: flex;
  gap: 2.2em;
  margin: 0 1.6em;
  padding: 0.95em 0;
  border-top: 1px solid var(--edge);
  font-size: 0.72em;
  color: var(--m);
  white-space: nowrap;
}
.hx .hp[data-for="other"] .yf-office span {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.hx .hp[data-for="other"] .yf-office b {
  margin-right: 0.2em;
  color: var(--n);
  font-weight: 600;
}
.hx .hp[data-for="other"] .yf-office svg {
  width: 1.25em;
  height: 1.25em;
  color: var(--a);
}

/* the next section starts below the fold, as on a real page */
.hx .hp[data-for="other"] .yf-next {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 0.35em;
  padding: 0.9em 1.6em 0;
  text-align: center;
}
.hx .hp[data-for="other"] .yf-kick {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a);
}
.hx .hp[data-for="other"] .yf-h2 {
  font: 400 1.5em/1.12 var(--hf);
  letter-spacing: -0.015em;
  color: var(--n);
}

.hx .hp[data-for="other"] .yf-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em;
  width: 100%;
  margin-top: 0.9em;
  text-align: left;
}
.hx .hp[data-for="other"] .yf-trio li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  padding: 0.9em 1em;
  border-radius: 0.85em;
  background: var(--soft);
  font-size: 0.72em;
  line-height: 1.4;
  color: var(--m);
}
.hx .hp[data-for="other"] .yf-trio b {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--a);
  color: #ffffff;
}
.hx .hp[data-for="other"] .yf-trio strong {
  display: block;
  margin-bottom: 0.15em;
  font-size: 1.1em;
  color: var(--n);
}
.hx .hp[data-for="other"] .yf-faq {
  display: grid;
  width: 100%;
  max-width: 40em;
  margin-top: 0.8em;
  text-align: left;
}
.hx .hp[data-for="other"] .yf-faq li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.85em 0.2em;
  border-top: 1px solid var(--edge);
  font-size: 0.8em;
  font-weight: 600;
}
.hx .hp[data-for="other"] .yf-faq i {
  font-size: 1.3em;
  font-weight: 400;
  color: var(--a);
}

/* ---------- today's pages: a stock template, generic words and long forms ---------- */
.hx .mp[data-for="other"] {
  --navy: #1d2b28;
  --blue: #2f6b57;
  --muted: #69726e;
  --edge: #dfe4e1;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  background: #ffffff;
  color: #2b3431;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: min(1.62cqw, 10.7px);
  line-height: 1.4;
}
.hx .mp[data-for="other"] svg {
  flex: none;
}
.hx .mp[data-for="other"] > * {
  flex: none;
}
.hx .mp[data-for="other"] > .mo-foot {
  flex: 1 0 auto;
}
.hx .mp[data-for="other"] .mo-top {
  display: flex;
  align-items: center;
  gap: 1.7em;
  padding: 0.5em 1.5em;
  background: #1d2b28;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72em;
  white-space: nowrap;
}
.hx .mp[data-for="other"] .mo-top span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.hx .mp[data-for="other"] .mo-top svg {
  width: 1.15em;
  height: 1.15em;
  opacity: 0.75;
}
.hx .mp[data-for="other"] .mo-top .mo-login {
  margin-left: auto;
}
.hx .mp[data-for="other"] .mo-nav {
  gap: 1.4em;
  padding: 0.7em 1.5em;
  border-bottom: 1px solid var(--edge);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.hx .mp[data-for="other"] .mo-nav .mp-logo {
  gap: 0.5em;
  font-size: 1.2em;
}
.hx .mp[data-for="other"] .mo-nav .mp-logo i {
  width: 1.35em;
  height: 1.35em;
}
.hx .mp[data-for="other"] .mo-nav .mp-logo > span {
  display: grid;
  line-height: 1;
}
.hx .mp[data-for="other"] .mo-nav .mp-logo small {
  margin-top: 0.35em;
  font: 400 0.5em/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hx .mp[data-for="other"] .mo-nav .mp-menu {
  gap: 1.35em;
  margin-left: auto;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #55605b;
  white-space: nowrap;
}
.hx .mp[data-for="other"] .mo-nav .mp-menu i {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}
.hx .mp[data-for="other"] .mo-nav .mp-menu svg {
  width: 1.1em;
  height: 1.1em;
}
.hx .mp[data-for="other"] .mo-nav .mp-menu .on {
  color: var(--blue);
}
.hx .mp[data-for="other"] .mo-nav .mp-login {
  margin-left: 0;
  padding: 0.75em 1.1em;
  border: 0;
  border-radius: 0.2em;
  background: var(--blue);
  color: #ffffff;
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hx .mp[data-for="other"] .mb {
  padding: 0.85em 1.4em;
  border-radius: 0.2em;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* the homepage banner: a stock skyline under a dark wash, centred copy and three buttons */
.hx .mp[data-for="other"] .mo-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 12.6em;
  overflow: hidden;
  background: #2d3e3a;
  color: #ffffff;
  text-align: center;
}
.hx .mp[data-for="other"] .mo-banner > svg,
.hx .mp[data-for="other"] .mo-title > svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.hx .mp[data-for="other"] .mo-banner::after,
.hx .mp[data-for="other"] .mo-title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 33, 30, 0.5);
}
.hx .mp[data-for="other"] .mo-banner > .mp-hero,
.hx .mp[data-for="other"] .mo-banner > .mp-ctas,
.hx .mp[data-for="other"] .mo-title > .mp-hero,
.hx .mp[data-for="other"] .mo-title > .mo-crumb {
  position: relative;
  z-index: 1;
}
.hx .mp[data-for="other"] .mo-banner .mp-hero {
  padding: 0 3em;
  text-align: center;
}
.hx .mp[data-for="other"] .mo-banner .mp-h1,
.hx .mp[data-for="other"] .mo-title .mp-h1 {
  max-width: none;
  font: 700 2.35em/1.1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}
.hx .mp[data-for="other"] .mo-banner .mp-sub,
.hx .mp[data-for="other"] .mo-title .mp-sub {
  max-width: none;
  margin-top: 0.45em;
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.86);
}
.hx .mp[data-for="other"] .mo-banner .mp-ctas {
  justify-content: center;
  gap: 0.6em;
  padding: 1em 0 0;
}
.hx .mp[data-for="other"] .mo-banner .mb-b {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.hx .mp[data-for="other"] .mo-banner .mb-c {
  background: #ffffff;
  color: var(--blue);
}
.hx .mp[data-for="other"] .mo-arr {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 1.1em;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  margin-top: -1.15em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.hx .mp[data-for="other"] .mo-arr.r {
  left: auto;
  right: 1.1em;
}
.hx .mp[data-for="other"] .mo-arr svg {
  width: 1.2em;
  height: 1.2em;
}
.hx .mp[data-for="other"] .mo-dots {
  position: absolute;
  z-index: 1;
  bottom: 0.85em;
  left: 50%;
  display: flex;
  gap: 0.45em;
  transform: translateX(-50%);
}
.hx .mp[data-for="other"] .mo-dots i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.hx .mp[data-for="other"] .mo-dots .on {
  background: #ffffff;
}
/* the homepage's lead section: a six-field form first, vague praise beside it */
.hx .mp[data-for="other"] .mo-lead {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.4em;
  padding: 1.2em 1.5em 0;
}
.hx .mp[data-for="other"] .mo-lead .mp-fields {
  gap: 0.48em;
  padding: 0.95em 1em 1em;
  border: 1px solid var(--edge);
  border-radius: 0.25em;
  background: #f6f7f6;
}
.hx .mp[data-for="other"] .mp-fields b {
  margin-bottom: 0.2em;
  font-size: 1em;
  font-weight: 700;
  color: var(--navy);
}
.hx .mp[data-for="other"] .mp-fields i {
  padding: 0.62em 0.75em;
  border: 1px solid #cdd5d1;
  border-radius: 0.2em;
  background: #ffffff;
  font-size: 0.78em;
  color: #8a928e;
}
.hx .mp[data-for="other"] .mo-lead .mp-fields i.tall {
  height: 3.9em;
}
.hx .mp[data-for="other"] .mp-fields .mb {
  margin-top: 0.2em;
}
.hx .mp[data-for="other"] .mp-void {
  width: 100%;
  height: 2.1em;
  margin: 0.25em 0 0;
}
.hx .mp[data-for="other"] .mo-side {
  display: grid;
  align-content: start;
  gap: 1.1em;
  min-width: 0;
}
.hx .mp[data-for="other"] .mp-quote {
  padding: 0.95em 1.1em 1em;
  border-radius: 0.25em;
  border-left: 3px solid var(--blue);
  background: #f1f3f2;
}
.hx .mp[data-for="other"] .mo-qm {
  width: 1.7em;
  height: 1.7em;
  margin-bottom: 0.3em;
  color: #c3cbc7;
}
.hx .mp[data-for="other"] .mp-quote p {
  font: italic 1.08em/1.3 Georgia, "Times New Roman", serif;
  color: var(--navy);
}
.hx .mp[data-for="other"] .mo-news b {
  display: block;
  padding-bottom: 0.45em;
  border-bottom: 2px solid var(--blue);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy);
}
.hx .mp[data-for="other"] .mo-news p {
  padding: 0.55em 0;
  border-bottom: 1px solid var(--edge);
  font-size: 0.8em;
  line-height: 1.3;
  color: #3a4440;
}
.hx .mp[data-for="other"] .mo-news em {
  display: block;
  margin-bottom: 0.1em;
  font-size: 0.85em;
  font-style: normal;
  color: var(--muted);
}
/* inner pages: a title banner over a stock desk photo */
.hx .mp[data-for="other"] .mo-title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 7.6em;
  padding: 0 1.5em;
  overflow: hidden;
  background: #26352f;
  color: #ffffff;
}
.hx .mp[data-for="other"] .mo-title > svg {
  width: 72%;
}
.hx .mp[data-for="other"] .mo-title::after {
  background: linear-gradient(90deg, #26352f 30%, rgba(38, 53, 47, 0.6) 58%, rgba(38, 53, 47, 0.3));
}
.hx .mp[data-for="other"] .mo-title .mp-hero {
  padding: 0;
  text-align: left;
}
.hx .mp[data-for="other"] .mo-title .mp-h1 {
  font-size: 2.05em;
}
.hx .mp[data-for="other"] .mo-title .mp-sub {
  margin-top: 0.3em;
  font-size: 0.9em;
}
.hx .mp[data-for="other"] .mo-crumb {
  margin-top: 0.55em;
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.66);
}
.hx .mp[data-for="other"] .mo-crumb i {
  margin: 0 0.5em;
}
/* today's services page: four vague boxes, a fee line that asks you to call, two buttons */
.hx .mp.mq-svc .mq-svcs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9em;
  padding: 1.35em 1.5em 0.2em;
}
.hx .mp.mq-svc .mq-svcs span {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.45em;
  padding: 1.05em 0.8em 0.95em;
  border: 1px solid var(--edge);
  border-radius: 0.25em;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.hx .mp.mq-svc .mo-ico {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border: 2px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
}
.hx .mp.mq-svc .mo-ico svg {
  width: 1.5em;
  height: 1.5em;
}
.hx .mp.mq-svc .mq-svcs b {
  font-size: 0.98em;
  color: var(--navy);
}
.hx .mp.mq-svc .mq-svcs em {
  font-size: 0.76em;
  font-style: normal;
  line-height: 1.45;
  color: var(--muted);
}
.hx .mp.mq-svc .mq-svcs u {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--blue);
}
.hx .mp.mq-svc .mo-fees {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0.95em 1.5em 0;
  padding: 0.75em 1em;
  border-radius: 0.25em;
  background: #f2f4f3;
  font-size: 0.82em;
  color: #3a4440;
}
.hx .mp.mq-svc .mo-fees svg {
  width: 1.4em;
  height: 1.4em;
  color: var(--muted);
}
.hx .mp.mq-svc .mo-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin: 0.8em 1.5em 0;
  padding: 0.95em 1.2em;
  border-radius: 0.25em;
  background: var(--blue);
  color: #ffffff;
}
.hx .mp.mq-svc .mo-band p {
  font-size: 1.05em;
  font-weight: 700;
}
.hx .mp.mq-svc .mo-band .mp-ctas {
  padding: 0;
  gap: 0.6em;
}
.hx .mp.mq-svc .mo-band .mb-a {
  background: #ffffff;
  color: var(--blue);
}
.hx .mp.mq-svc .mo-band .mb-b {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.hx .mp.mq-svc .mp-void {
  width: auto;
  height: 2.3em;
  margin: 0.45em 1.5em 0;
}
.hx .mp[data-for="other"] .mo-foot {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 0.9em 1.6em;
  margin-top: 0.6em;
  padding: 1.3em 1.5em 4em;
  background: #1d2b28;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.74em;
}
.hx .mp[data-for="other"] .mo-more {
  margin-top: 1.4em;
  padding: 1.5em 1.5em 1.6em;
  background: #f2f4f3;
  text-align: center;
}
.hx .mp[data-for="other"] .mo-h2c {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--navy);
}
.hx .mp[data-for="other"] .mo-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2em;
  margin-top: 1em;
}
.hx .mp[data-for="other"] .mo-trio span {
  display: grid;
  justify-items: center;
  gap: 0.4em;
}
.hx .mp[data-for="other"] .mo-trio .mo-ico {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border: 2px solid var(--blue);
  border-radius: 50%;
  color: var(--blue);
}
.hx .mp[data-for="other"] .mo-trio svg {
  width: 1.5em;
  height: 1.5em;
}
.hx .mp[data-for="other"] .mo-trio b {
  font-size: 0.95em;
  color: var(--navy);
}
.hx .mp[data-for="other"] .mo-trio em {
  font-size: 0.76em;
  font-style: normal;
  color: var(--muted);
}
.hx .mp[data-for="other"] .mo-foot small {
  flex: 1 1 100%;
  padding-top: 0.9em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.88em;
  color: rgba(255, 255, 255, 0.45);
}
.hx .mp[data-for="other"] .mo-foot .mp-logo {
  margin-right: auto;
  font-size: 1.3em;
  color: #ffffff;
}
/* today's contact page: seven fields, a robot check, an address and a map */
.hx .mp.mq-ct .mq-contact {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 1.7em;
  padding: 1.25em 1.5em 0;
}
.hx .mp.mq-ct .mo-h2 {
  margin-bottom: 0.65em;
  font-size: 1.02em;
  font-weight: 700;
  color: var(--navy);
}
.hx .mp.mq-ct .mp-fields {
  gap: 0.5em;
}
.hx .mp.mq-ct .mp-fields i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
  padding: 0.66em 0.75em;
  white-space: nowrap;
}
.hx .mp.mq-ct .mp-fields i:nth-child(6) {
  grid-column: auto;
}
.hx .mp.mq-ct .mp-fields i svg {
  width: 1.15em;
  height: 1.15em;
  color: #6f7874;
}
.hx .mp.mq-ct .mp-fields i.tall {
  align-items: flex-start;
  height: 4.6em;
  padding-bottom: 0;
}
.hx .mp.mq-ct .mo-send {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 0.75em;
}
.hx .mp.mq-ct .mq-captcha {
  gap: 0.6em;
  width: 17em;
  padding: 0.75em 0.8em;
  border: 1px solid #d3d3d3;
  border-radius: 0.2em;
  background: #f9f9f9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-size: 0.8em;
  color: #333333;
}
.hx .mp.mq-ct .mq-captcha i {
  width: 1.7em;
  height: 1.7em;
  border: 2px solid #c1c1c1;
  border-radius: 0.15em;
  background: #ffffff;
}
.hx .mp.mq-ct .mo-rc {
  width: 1.9em;
  height: 1.9em;
  margin-left: auto;
  color: #4a78c2;
}
.hx .mp.mq-ct .mo-formcol .mp-void {
  width: auto;
  margin-top: 0.35em;
}
.hx .mp.mq-ct .mq-side {
  display: block;
}
.hx .mp.mq-ct .mo-addr {
  font-size: 0.8em;
  line-height: 1.5;
  color: #3a4440;
}
.hx .mp.mq-ct .mo-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.35em;
  font-size: 0.8em;
  color: #3a4440;
}
.hx .mp.mq-ct .mo-line svg {
  width: 1.15em;
  height: 1.15em;
  color: var(--blue);
}
.hx .mp.mq-ct .mq-map {
  height: 7.6em;
  margin-top: 0.85em;
  aspect-ratio: auto;
  border-radius: 0.25em;
  overflow: hidden;
  background: none;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.hx .mp.mq-ct .mq-map svg {
  width: 100%;
  height: 100%;
}
.hx .mp.mq-ct .mq-side .mp-void {
  width: auto;
  margin-top: 0.4em;
}

/* menu buttons, shown only where the menu itself folds away */
.hx .hp[data-for="other"] .yf-burger,
.hx .mp[data-for="other"] .mo-burger {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.22em;
  width: 2.3em;
  height: 2.3em;
  padding: 0 0.55em;
  border-radius: 0.45em;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.hx .hp[data-for="other"] .yf-burger i,
.hx .mp[data-for="other"] .mo-burger i {
  height: 0.13em;
  border-radius: 1em;
  background: var(--n, #1d2b28);
}
.hx .mp[data-for="other"] .mo-burger {
  border-radius: 0.2em;
}

/* ---------- narrow stages (phones): the rebuilt pages stack like a tablet layout ---------- */
@container (max-width: 480px) {
  .hx .hp[data-for="other"] .yf-nav {
    gap: 1em;
    padding: 0.75em 1.2em;
  }
  .hx .hp[data-for="other"] .yf-links,
  .hx .hp[data-for="other"] .yf-tel {
    display: none;
  }
  .hx .hp[data-for="other"] .yf-nav > .yf-btn {
    margin-left: auto;
  }
  .hx .hp[data-for="other"] .yf-stories {
    gap: 0.6em;
    padding: 0.8em 1.2em 1em;
  }
  .hx .hp[data-for="other"] .yf-stories figure {
    gap: 0.55em 0.55em;
    padding: 0.75em 0.8em 0.7em;
  }
  .hx .hp[data-for="other"] .yf-stories .yf-q {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .hx .hp[data-for="other"] .yf-stories .yf-av {
    grid-row: 2;
    align-self: center;
    width: 2.6em;
    height: 2.6em;
    font-size: 0.72em;
  }
  .hx .hp[data-for="other"] .yf-stories figcaption {
    display: grid;
    gap: 0.05em;
    align-self: center;
  }
  .hx .hp[data-for="other"] .yf-stories .yf-st {
    display: none;
  }
  .hx .hp.hp-of[data-for="other"] {
    font-size: 2.55cqw;
  }
  .hx .hp.hp-of .yf-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1em;
    padding: 1.1em 1.2em 0.9em;
  }
  .hx .hp.hp-of .yf-copy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65em 0.9em;
  }
  .hx .hp.hp-of .yf-eye,
  .hx .hp.hp-of .yf-h1,
  .hx .hp.hp-of .yf-sub {
    flex: 1 1 100%;
  }
  .hx .hp.hp-of .yf-eye {
    flex: none;
  }
  .hx .hp.hp-of .yf-h1 {
    font-size: 2.15em;
  }
  .hx .hp.hp-of .yf-h1 br {
    display: none;
  }
  .hx .hp.hp-of .yf-ctas {
    margin-top: 0.1em;
  }
  .hx .hp.hp-of .yf-reply {
    margin-top: 0.1em;
    white-space: normal;
  }
  .hx .hp.hp-of .yf-art {
    height: 15.6em;
  }
  .hx .hp.hp-of .yf-photo {
    width: 52%;
    height: 100%;
  }
  .hx .hp.hp-of .hp-book {
    width: 58%;
  }
  .hx .hp.hp-of .yf-toast,
  .hx .hp.hp-of .yf-trust {
    display: none;
  }
  .hx .hp[data-for="other"][data-pg="2"],
  .hx .hp[data-for="other"][data-pg="3"] {
    font-size: 2.55cqw;
  }
  .hx .hp[data-for="other"] .yf-sv,
  .hx .hp[data-for="other"] .yf-ct {
    grid-template-columns: minmax(0, 1fr);
    gap: 1em;
    padding: 1.05em 1.2em 1em;
  }
  .hx .hp[data-for="other"] .yf-sv .yf-copy {
    gap: 0.6em;
  }
  .hx .hp[data-for="other"] .yf-sv .yf-h1 {
    font-size: 2.05em;
  }
  .hx .hp[data-for="other"] .yf-sv .yf-report,
  .hx .hp[data-for="other"] .yfp-fine,
  .hx .hp[data-for="other"] .yfp-note {
    display: none;
  }
  .hx .hp[data-for="other"] .yf-sv .yf-art {
    min-height: 0;
  }
  .hx .hp[data-for="other"] .yf-plan {
    position: relative;
    left: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5em 1.2em;
    width: 100%;
    margin-top: 0.4em;
    padding: 0.9em 1em;
  }
  .hx .hp[data-for="other"] .yfp-top {
    grid-column: 1 / -1;
  }
  .hx .hp[data-for="other"] .yf-plan .yf-btn {
    margin-top: 0;
  }
  .hx .hp[data-for="other"] .yf-ct .yf-copy {
    display: contents;
  }
  .hx .hp[data-for="other"] .yf-ct > * {
    order: 5;
  }
  .hx .hp[data-for="other"] .yf-ct {
    gap: 0.9em;
    padding-top: 1.2em;
  }
  .hx .hp[data-for="other"] .yf-ct .yf-eye {
    order: 0;
    justify-self: start;
  }
  .hx .hp[data-for="other"] .yf-ct .yf-h1 {
    order: 1;
    max-width: 8em;
    margin-top: -0.2em;
    font-size: 2.6em;
  }
  .hx .hp[data-for="other"] .yf-ct .yf-reply {
    order: 2;
    margin: 0.2em 0 0.6em;
  }
  .hx .hp[data-for="other"] .yf-ct .yf-form {
    order: 3;
    gap: 0.6em;
    padding: 0.9em 0.95em 0.8em;
  }
  .hx .hp[data-for="other"] .yf-ct .yf-proof {
    order: 4;
    margin-top: 0.2em;
  }
  .hx .hp[data-for="other"] .yf-ct .yf-steps,
  .hx .hp[data-for="other"] .yf-office,
  .hx .hp[data-for="other"] .yf-map {
    display: none;
  }
  .hx .hp[data-for="other"] .yf-burger {
    display: flex;
  }
  .hx .hp[data-for="other"] .yf-nav {
    gap: 0.6em;
  }
  /* today's pages on a narrow stage */
  .hx .mp[data-for="other"] {
    font-size: 2.5cqw;
  }
  .hx .mp[data-for="other"] .mo-top,
  .hx .mp[data-for="other"] .mo-nav .mp-menu,
  .hx .mp[data-for="other"] .mo-arr {
    display: none;
  }
  .hx .mp[data-for="other"] .mo-nav {
    gap: 0.6em;
    padding: 0.7em 1.2em;
  }
  .hx .mp[data-for="other"] .mo-nav .mp-login {
    margin-left: auto;
  }
  .hx .mp[data-for="other"] .mo-burger {
    display: flex;
  }
  .hx .mp[data-for="other"] .mo-banner {
    height: 14.5em;
  }
  .hx .mp[data-for="other"] .mo-banner .mp-hero {
    padding: 0 1.4em;
  }
  .hx .mp[data-for="other"] .mo-banner .mp-h1 {
    font-size: 2.15em;
  }
  .hx .mp[data-for="other"] .mo-banner .mp-ctas {
    padding-top: 0.85em;
  }
  .hx .mp[data-for="other"] .mo-lead {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0.9em;
    padding: 1.1em 1.2em 0;
  }
  .hx .mp[data-for="other"] .mo-lead .mp-fields {
    padding: 0.85em;
  }
  .hx .mp[data-for="other"] .mo-title {
    height: 7.4em;
    padding: 0 1.2em;
  }
  .hx .mp[data-for="other"] .mo-title > svg {
    width: 100%;
  }
  .hx .mp[data-for="other"] .mo-title::after {
    background: rgba(32, 46, 41, 0.72);
  }
  .hx .mp.mq-svc .mq-svcs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7em;
    padding: 1.1em 1.2em 0.2em;
  }
  .hx .mp.mq-svc .mq-svcs span {
    gap: 0.35em;
    padding: 0.8em 0.7em;
  }
  .hx .mp.mq-svc .mo-ico {
    width: 2.6em;
    height: 2.6em;
  }
  .hx .mp.mq-svc .mo-fees {
    margin: 0.8em 1.2em 0;
  }
  .hx .mp.mq-svc .mo-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6em;
    margin: 0.7em 1.2em 0;
    padding: 0.85em 1em;
  }
  .hx .mp.mq-svc .mp-void {
    margin: 0.35em 1.2em 0;
  }
  .hx .mp[data-for="other"] .mo-foot span:not(.mp-logo) {
    display: none;
  }
  .hx .mp[data-for="other"] .mo-title {
    height: 6.6em;
  }
  .hx .mp.mq-svc .mq-svcs em {
    font-size: 0.72em;
  }
  .hx .mp.mq-ct .mq-contact {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1em;
    padding: 1.1em 1.2em 0;
  }
  .hx .mp.mq-ct .mp-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4em;
  }
  .hx .mp.mq-ct .mp-fields i {
    padding: 0.6em 0.7em;
  }
  .hx .mp.mq-ct .mp-fields i.tall {
    height: 3.8em;
  }
  .hx .mp.mq-ct .mo-send {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
  }
  .hx .mp.mq-ct .mq-captcha {
    width: 100%;
  }
  .hx .mp.mq-ct .mq-map {
    height: 6.5em;
  }
  /* on a phone the smallest labels get a floor, and pages with room get larger type */
  .hx .hp[data-for="other"][data-pg="2"] {
    font-size: 2.75cqw;
  }
  .hx .hp[data-for="other"][data-pg="3"] {
    font-size: 2.65cqw;
  }
  .hx .mp[data-for="other"][data-pg="1"] {
    font-size: 2.7cqw;
  }
  .hx .mp[data-for="other"] .mo-nav .mp-logo small {
    display: none;
  }
  .hx .mp[data-for="other"] .mo-nav .mp-login,
  .hx .mp[data-for="other"] .mb {
    font-size: 0.76em;
  }
  .hx .mp[data-for="other"] .mo-crumb,
  .hx .mp.mq-svc .mq-svcs u {
    font-size: 0.74em;
  }
  .hx .mp.mq-svc .mq-svcs em {
    font-size: 0.76em;
  }
  .hx .hp[data-for="other"] .yf-reply {
    font-size: 0.8em;
  }
  .hx .hp[data-for="other"] .yf-faces i {
    font-size: 0.74em;
  }
  .hx .hp[data-for="other"] .yf-eye,
  .hx .hp[data-for="other"] .bk-note,
  .hx .hp[data-for="other"] .yf-kick,
  .hx .hp[data-for="other"] .yf-k2,
  .hx .hp[data-for="other"] .yf-lock,
  .hx .hp[data-for="other"] .yf-incl em,
  .hx .hp[data-for="other"] .yf-proof em,
  .hx .hp[data-for="other"] figcaption em {
    font-size: 0.72em;
  }
  .hx .hp[data-for="other"] figcaption b {
    font-size: 0.76em;
  }
  .hx .hp[data-for="other"] .yf-st {
    font-size: 0.68em;
  }
  .hx .hp[data-for="other"] .yfp-top s {
    font-size: 0.64em;
  }
  .hx .hp[data-for="other"] .yf-proof .yf-faces i {
    font-size: 0.68em;
  }
}
/* === end hero pages: other === */

/* === hero pages: saas upgrade === */
/* The SaaS sample, remade on 30 September: one idea per page, big type, one picture of the result.
   Today's pages are a plain template (`yb-*`); the rebuilt pages (`ys-*`) show a lead reaching
   the right rep, three plans at a glance and the routing rule as one picture. */

/* ---------- today's pages ---------- */
.hx .mp[data-for="saas"] {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: min(1.8cqw, 12px);
  color: #2b2f38;
  background: #ffffff;
}
.hx .mp[data-for="saas"] .yb-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 1em 1.6em;
  border-bottom: 1px solid #e7e9ee;
}
.hx .mp[data-for="saas"] .yb-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.08em;
  font-weight: 700;
  color: #2b2f38;
}
.hx .mp[data-for="saas"] .yb-logo i {
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.25em;
  background: #6d7fb3;
}
.hx .mp[data-for="saas"] .yb-links {
  display: flex;
  gap: 1.3em;
  font-size: 0.86em;
  color: #5b6170;
}
.hx .mp[data-for="saas"] .yb-links .on {
  color: #2b2f38;
  font-weight: 700;
}
.hx .mp[data-for="saas"] .yb-login {
  margin-left: auto;
  padding: 0.45em 0.9em;
  border: 1px solid #cfd3db;
  border-radius: 0.3em;
  font-size: 0.84em;
}
.hx .mp[data-for="saas"] .yb-hero {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.6em;
  padding: 1.8em 1.6em 1.5em;
  background: #f4f5f7;
}
.hx .mp[data-for="saas"] .yb-h1 {
  font-size: 2.05em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1f2430;
}
.hx .mp[data-for="saas"] .yb-sub {
  margin-top: 0.6em;
  font-size: 0.92em;
  line-height: 1.45;
  color: #6b7180;
}
.hx .mp[data-for="saas"] .yb-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1.1em;
}
.hx .mp[data-for="saas"] .yb-b {
  display: inline-block;
  padding: 0.72em 1.05em;
  border-radius: 0.3em;
  font-size: 0.84em;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}
.hx .mp[data-for="saas"] .yb-b.a {
  background: #3e63f5;
}
.hx .mp[data-for="saas"] .yb-b.b {
  background: #1e2a4a;
}
.hx .mp[data-for="saas"] .yb-b.c {
  background: #2c7a68;
}
.hx .mp[data-for="saas"] .yb-void {
  width: 100%;
  height: 2.2em;
  margin: 0.35em 0 0;
  justify-items: start;
}
.hx .mp[data-for="saas"] .yb-void.c {
  width: 70%;
  margin: 0.7em auto 0;
  justify-items: center;
}
.hx .mp[data-for="saas"] .yb-img {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 0.35em;
}
.hx .mp[data-for="saas"] .yb-img svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hx .mp[data-for="saas"] .yb-img > span {
  position: absolute;
  right: 0.6em;
  bottom: 0.6em;
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.7em;
  font-weight: 700;
  color: #6b7180;
}
.hx .mp[data-for="saas"] .yb-img.dash {
  background: #f7f6fc;
}
.hx .mp[data-for="saas"] .yb-feats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em 1.4em;
  padding: 1.2em 1.6em 0.4em;
}
.hx .mp[data-for="saas"] .yb-feats span {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  align-items: center;
  gap: 0.15em 0.65em;
}
.hx .mp[data-for="saas"] .yb-feats i {
  grid-row: span 2;
  width: 2em;
  height: 2em;
  border-radius: 0.4em;
  background: #e9ebf0;
}
.hx .mp[data-for="saas"] .yb-feats b {
  font-size: 0.88em;
  color: #2b2f38;
}
.hx .mp[data-for="saas"] .yb-feats em {
  font-size: 0.76em;
  color: #8a8f9b;
}
.hx .mp[data-for="saas"] .yb-logos {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin: 0.8em 1.6em 0;
  padding: 0.9em 0;
  border-top: 1px solid #eceef2;
}
.hx .mp[data-for="saas"] .yb-logos span {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa0ad;
  white-space: nowrap;
}
.hx .mp[data-for="saas"] .yb-logos i {
  width: 3.6em;
  height: 1.1em;
  border-radius: 0.3em;
  background: #e3e6ec;
}
.hx .mp[data-for="saas"] .yb-center {
  flex: none;
  padding: 1.7em 1.6em 1em;
  text-align: center;
  background: #f4f5f7;
}
.hx .mp[data-for="saas"] .yb-plans {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9em;
  padding: 1.1em 1.6em 0;
}
.hx .mp[data-for="saas"] .yb-plan {
  display: grid;
  gap: 0.5em;
  justify-items: start;
  padding: 1.1em 1em;
  border: 1px solid #e3e6eb;
  border-radius: 0.35em;
}
.hx .mp[data-for="saas"] .yb-plan b {
  font-size: 1.02em;
}
.hx .mp[data-for="saas"] .yb-plan em {
  font-size: 1.65em;
  font-weight: 700;
  color: #1f2430;
}
.hx .mp[data-for="saas"] .yb-plan em small {
  font-size: 0.5em;
  font-weight: 400;
  color: #8a8f9b;
}
.hx .mp[data-for="saas"] .yb-plan em.ask {
  font-size: 1.2em;
  line-height: 1.55;
}
.hx .mp[data-for="saas"] .yb-plan ul {
  display: grid;
  gap: 0.3em;
  font-size: 0.8em;
  color: #6b7180;
}
.hx .mp[data-for="saas"] .yb-plan li::before {
  content: "\2022";
  margin-right: 0.45em;
  color: #b5bac5;
}
.hx .mp[data-for="saas"] .yb-plan .yb-b {
  justify-self: stretch;
  margin-top: 0.3em;
  text-align: center;
}

/* ---------- the rebuilt pages ---------- */
.hx .hp[data-for="saas"] {
  --ys-blue: #3e63f5;
  --ys-violet: #7c5cff;
  --ys-navy: #172042;
  --ys-ink2: #4a5474;
  --ys-mute: #7a83a0;
  --ys-line: #e4e8f2;
  --ys-soft: #f4f6fd;
  --ys-green: #1b9460;
  font-size: min(1.95cqw, 13px);
  color: var(--ys-navy);
  background:
    radial-gradient(55% 70% at 88% 18%, rgba(124, 92, 255, 0.11), transparent 62%),
    radial-gradient(45% 55% at 8% 96%, rgba(62, 99, 245, 0.07), transparent 60%),
    #ffffff;
}
.hx .hp[data-for="saas"] .ys-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.5em;
  padding: 0.95em 1.6em;
  border-bottom: 1px solid var(--ys-line);
  background: rgba(255, 255, 255, 0.75);
}
.hx .hp[data-for="saas"] .ys-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.06em;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hx .hp[data-for="saas"] .ys-logo i {
  width: 1.15em;
  height: 1.15em;
  border-radius: 0.32em;
  background: linear-gradient(135deg, var(--ys-blue), var(--ys-violet));
}
.hx .hp[data-for="saas"] .ys-links {
  display: flex;
  gap: 1.3em;
  font-size: 0.84em;
  color: var(--ys-ink2);
}
.hx .hp[data-for="saas"] .ys-links .on {
  font-weight: 700;
  color: var(--ys-navy);
}
.hx .hp[data-for="saas"] .ys-login {
  margin-left: auto;
  font-size: 0.84em;
  font-weight: 600;
}
.hx .hp[data-for="saas"] .ys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.2em;
  border-radius: 0.65em;
  background: linear-gradient(135deg, var(--ys-blue), #5a4bf0);
  color: #ffffff;
  font-size: 0.92em;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0.7em 1.5em -0.7em rgba(62, 99, 245, 0.85);
}
.hx .hp[data-for="saas"] .ys-btn.sm {
  padding: 0.5em 0.85em;
  border-radius: 0.5em;
  font-size: 0.78em;
  box-shadow: none;
}
.hx .hp[data-for="saas"] .ys-btn.o {
  background: #ffffff;
  color: var(--ys-navy);
  box-shadow: inset 0 0 0 1px #d7dcea;
}
.hx .hp[data-for="saas"] .ys-hero {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 1.9em;
  padding: 1.3em 1.6em 1.1em;
}
.hx .hp[data-for="saas"] .ys-eye {
  justify-self: start;
  display: inline-block;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  background: rgba(62, 99, 245, 0.09);
  color: var(--ys-blue);
  font-size: 0.74em;
  font-weight: 700;
}
.hx .hp[data-for="saas"] .ys-h1 {
  margin-top: 0.55em;
  font-size: 2.35em;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.hx .hp[data-for="saas"] .ys-h1.sm {
  font-size: 2.1em;
}
.hx .hp[data-for="saas"] .ys-h1 u {
  text-decoration: none;
  background: linear-gradient(90deg, var(--ys-blue), var(--ys-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hx .hp[data-for="saas"] .ys-sub {
  margin-top: 0.75em;
  font-size: 0.96em;
  line-height: 1.45;
  color: var(--ys-ink2);
}
.hx .hp[data-for="saas"] .ys-ticks {
  display: grid;
  gap: 0.5em;
  margin-top: 0.9em;
  font-size: 0.9em;
  color: var(--ys-ink2);
}
.hx .hp[data-for="saas"] .ys-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
}
.hx .hp[data-for="saas"] .ys-ticks li::before,
.hx .hp[data-for="saas"] .ys-calm::before,
.hx .hp[data-for="saas"] .ys-plan li::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: rgba(27, 148, 96, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%231b9460' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.hx .hp[data-for="saas"] .ys-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em 0.9em;
  margin-top: 1.15em;
}
.hx .hp[data-for="saas"] .ys-calm {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  font-weight: 700;
  color: var(--ys-green);
}
.hx .hp[data-for="saas"] .ys-calm::before {
  margin-top: 0;
}
.hx .hp[data-for="saas"] .ys-rate {
  margin-top: 0.95em;
  font-size: 0.78em;
  color: var(--ys-mute);
}
.hx .hp[data-for="saas"] .ys-stars {
  color: #f5a524;
  letter-spacing: 0.06em;
}

/* the result, one lead at a time: who came in, what happened, who has them now and how fast */
.hx .hp[data-for="saas"] .ys-moment,
.hx .hp[data-for="saas"] .ys-rule {
  position: relative;
}
.hx .hp[data-for="saas"] .ys-win {
  position: relative;
  padding: 0.95em;
  border-radius: 1em;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--ys-line), 0 1.8em 3.4em -1.5em rgba(23, 32, 66, 0.38);
}
.hx .hp[data-for="saas"] .ys-bar {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.85em;
  font-size: 0.74em;
  color: var(--ys-ink2);
}
.hx .hp[data-for="saas"] .ys-bar i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #e2e6ef;
}
.hx .hp[data-for="saas"] .ys-bar b {
  margin-left: 0.5em;
  font-weight: 700;
}
.hx .hp[data-for="saas"] .ys-bar em {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-left: auto;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: rgba(27, 148, 96, 0.1);
  color: var(--ys-green);
  font-weight: 700;
}
.hx .hp[data-for="saas"] .ys-bar em::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--ys-green);
  box-shadow: 0 0 0 0.2em rgba(27, 148, 96, 0.2);
}
.hx .hp[data-for="saas"] .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--av);
  color: #ffffff;
  font-size: 0.86em;
  font-weight: 800;
}
.hx .hp[data-for="saas"] .av.sq {
  border-radius: 0.55em;
}
.hx .hp[data-for="saas"] .ys-lead,
.hx .hp[data-for="saas"] .ys-out {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65em;
  padding: 0.7em 0.75em;
  border-radius: 0.75em;
}
.hx .hp[data-for="saas"] .ys-lead {
  background: var(--ys-soft);
}
.hx .hp[data-for="saas"] .ys-lead b,
.hx .hp[data-for="saas"] .ys-out b {
  display: block;
  font-size: 0.92em;
  font-weight: 700;
}
.hx .hp[data-for="saas"] .ys-lead em,
.hx .hp[data-for="saas"] .ys-out em {
  display: block;
  margin-top: 0.1em;
  font-size: 0.74em;
  color: var(--ys-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx .hp[data-for="saas"] .ys-src {
  padding: 0.28em 0.6em;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--ys-line);
  font-size: 0.68em;
  font-weight: 600;
  color: var(--ys-ink2);
  white-space: nowrap;
}
.hx .hp[data-for="saas"] .ys-steps {
  position: relative;
  display: grid;
  gap: 0.45em;
  margin: 0.75em 0;
  padding: 0 0.85em;
}
.hx .hp[data-for="saas"] .ys-steps::before {
  content: "";
  position: absolute;
  left: calc(0.85em + 0.52em);
  top: 0.4em;
  bottom: 0.4em;
  width: 1.5px;
  background: var(--ys-line);
}
.hx .hp[data-for="saas"] .ys-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8em;
  color: var(--ys-mute);
  opacity: 0.4;
  transition: opacity 0.45s, color 0.45s;
}
.hx .hp[data-for="saas"] .ys-steps li::before {
  content: "";
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px #cfd5e3;
  transition: background-color 0.45s, box-shadow 0.45s;
}
.hx .hp[data-for="saas"] .ys-steps b {
  font-weight: 600;
}
.hx .hp[data-for="saas"] .ys-steps s {
  margin-left: auto;
  font: 600 0.92em/1 var(--mono);
}
.hx .hp[data-for="saas"] .ys-win.s1 [data-step="0"],
.hx .hp[data-for="saas"] .ys-win.s2 [data-step="1"],
.hx .hp[data-for="saas"] .ys-win.s3 [data-step="2"] {
  opacity: 1;
  color: var(--ys-navy);
}
.hx .hp[data-for="saas"] .ys-win.s1 [data-step="0"]::before,
.hx .hp[data-for="saas"] .ys-win.s2 [data-step="1"]::before,
.hx .hp[data-for="saas"] .ys-win.s3 [data-step="2"]::before {
  background: var(--ys-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: none;
}
.hx .hp[data-for="saas"] .ys-out {
  border: 1.5px solid rgba(27, 148, 96, 0.35);
  background: rgba(27, 148, 96, 0.06);
  opacity: 0.35;
  transform: translateY(0.35em);
  transition: opacity 0.5s, transform 0.5s var(--ease);
}
.hx .hp[data-for="saas"] .ys-win.out .ys-out {
  opacity: 1;
  transform: none;
}
.hx .hp[data-for="saas"] .ys-time {
  padding: 0.3em 0.55em;
  border-radius: 0.5em;
  background: var(--ys-green);
  color: #ffffff;
  font: 800 1.05em/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
/* the day so far, as the card's footer */
.hx .hp[data-for="saas"] .ys-kpi {
  /* it keeps .hx-kpi for the counter script; none of the old floating card applies here */
  position: static;
  z-index: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  margin-top: 0.85em;
  padding: 0.75em 0.2em 0;
  border-top: 1px solid var(--ys-line);
}
.hx .hp[data-for="saas"] .ys-kpi span {
  font-size: 0.64em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ys-mute);
}
.hx .hp[data-for="saas"] .ys-kpi b {
  font-size: 1.02em;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hx .hp[data-for="saas"] .ys-kpi b.bump {
  animation: numBump 0.45s var(--spring);
}
.hx .hp[data-for="saas"] .ys-kpi em {
  margin-left: auto;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--ys-green);
}
.hx .hp[data-for="saas"] .ys-logos {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.7em;
  padding: 0.9em 1.6em 1.1em;
  border-top: 1px solid var(--ys-line);
  color: #8f97b0;
}
.hx .hp[data-for="saas"] .ys-logos span {
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hx .hp[data-for="saas"] .ys-logos b {
  font-size: 0.95em;
  font-weight: 800;
  white-space: nowrap;
}
.hx .hp[data-for="saas"] .ys-logos .l2 {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hx .hp[data-for="saas"] .ys-logos .l3 {
  font-family: Georgia, serif;
  letter-spacing: 0.08em;
}
.hx .hp[data-for="saas"] .ys-logos .l4 {
  font-style: italic;
}
.hx .hp[data-for="saas"] .ys-logos .l5 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8em;
}

/* pricing: the outcome above three plans named by team size, the middle one recommended */
.hx .hp[data-for="saas"] .ys-phead {
  flex: none;
  padding: 1.4em 2em 0.2em;
  text-align: center;
}
.hx .hp[data-for="saas"] .ys-h2 {
  max-width: 20em;
  margin: 0 auto;
  font-size: 1.7em;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.hx .hp[data-for="saas"] .ys-bill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.9em;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--ys-soft);
  font-size: 0.78em;
  font-weight: 600;
  color: var(--ys-ink2);
}
.hx .hp[data-for="saas"] .ys-bill i {
  position: relative;
  width: 2.1em;
  height: 1.15em;
  border-radius: 999px;
  background: var(--ys-blue);
}
.hx .hp[data-for="saas"] .ys-bill i::after {
  content: "";
  position: absolute;
  top: 0.15em;
  right: 0.15em;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: #ffffff;
}
.hx .hp[data-for="saas"] .ys-bill em {
  color: var(--ys-green);
  font-weight: 700;
}
.hx .hp[data-for="saas"] .ys-plans {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 1em;
  padding: 1.5em 1.8em 0.6em;
}
.hx .hp[data-for="saas"] .ys-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 1.15em 1.05em;
  border-radius: 1em;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--ys-line), 0 1.1em 2.2em -1.5em rgba(23, 32, 66, 0.35);
}
.hx .hp[data-for="saas"] .ys-plan.rec {
  padding-top: 1.55em;
  padding-bottom: 1.45em;
  box-shadow: 0 0 0 2px var(--ys-blue), 0 1.6em 3em -1.3em rgba(62, 99, 245, 0.55);
}
.hx .hp[data-for="saas"] .ys-rec {
  position: absolute;
  top: -0.85em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ys-blue), var(--ys-violet));
  color: #ffffff;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hx .hp[data-for="saas"] .ys-plan > b {
  align-self: flex-start;
  font-size: 0.98em;
  font-weight: 800;
}
.hx .hp[data-for="saas"] .ys-plan > small {
  font-size: 0.72em;
  color: var(--ys-mute);
}
.hx .hp[data-for="saas"] .ys-plan > em {
  align-self: flex-start;
  margin: 0.3em 0 0.45em;
  font-size: 2.05em;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.hx .hp[data-for="saas"] .ys-plan > em small {
  font-size: 0.38em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ys-mute);
}
.hx .hp[data-for="saas"] .ys-plan .ys-btn {
  padding: 0.65em 0.8em;
  font-size: 0.82em;
}
.hx .hp[data-for="saas"] .ys-pc {
  align-self: center;
  margin-top: 0.3em;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--ys-green);
}
/* the large plan's next step: the button and when sales replies, one block so the fix outlines both */
.hx .hp[data-for="saas"] .ys-next {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.hx .hp[data-for="saas"] .ys-plan ul {
  display: grid;
  gap: 0.35em;
  margin-top: 0.6em;
  padding-top: 0.65em;
  border-top: 1px solid var(--ys-line);
  font-size: 0.74em;
  color: var(--ys-ink2);
}
.hx .hp[data-for="saas"] .ys-plan li {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
}
.hx .hp[data-for="saas"] .ys-pfoot {
  flex: none;
  padding: 0.5em 2em 0;
  text-align: center;
  font-size: 0.74em;
  color: var(--ys-mute);
}

/* product: the routing rule as one picture, one branch lit at a time */
.hx .hp[data-for="saas"] .ys-if {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.8em;
  font-size: 0.82em;
}
.hx .hp[data-for="saas"] .ys-if s,
.hx .hp[data-for="saas"] .ys-lane > s {
  font: 700 0.78em/1 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ys-mute);
}
.hx .hp[data-for="saas"] .ys-if span,
.hx .hp[data-for="saas"] .ys-if b {
  padding: 0.35em 0.65em;
  border-radius: 0.5em;
  background: var(--ys-soft);
  font-weight: 600;
}
.hx .hp[data-for="saas"] .ys-if b {
  background: rgba(62, 99, 245, 0.1);
  color: var(--ys-blue);
  font-weight: 800;
}
.hx .hp[data-for="saas"] .ys-lanes {
  display: grid;
  gap: 0.55em;
}
.hx .hp[data-for="saas"] .ys-lane {
  display: grid;
  grid-template-columns: 2.9em auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.7em 0.75em;
  border-radius: 0.75em;
  border: 1.5px solid var(--ys-line);
  background: #ffffff;
  transition: border-color 0.45s, background-color 0.45s, box-shadow 0.45s;
}
.hx .hp[data-for="saas"] .ys-lane b {
  display: block;
  font-size: 0.9em;
  font-weight: 700;
}
.hx .hp[data-for="saas"] .ys-lane > span em {
  display: block;
  font-size: 0.72em;
  color: var(--ys-mute);
}
.hx .hp[data-for="saas"] .ys-lane.hit {
  border-color: rgba(27, 148, 96, 0.5);
  background: rgba(27, 148, 96, 0.06);
  box-shadow: 0 0.8em 1.6em -1.1em rgba(27, 148, 96, 0.65);
}
.hx .hp[data-for="saas"] .ys-hit {
  padding: 0.3em 0.6em;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--ys-line);
  font-size: 0.7em;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-0.5em);
  transition: opacity 0.45s, transform 0.45s var(--ease);
}
.hx .hp[data-for="saas"] .ys-lane.hit .ys-hit {
  opacity: 1;
  transform: none;
}
.hx .hp[data-for="saas"] .ys-res {
  margin-top: 0.8em;
  font-size: 0.78em;
  font-weight: 700;
  color: var(--ys-green);
}
.hx .hp[data-for="saas"] .ys-quote {
  margin-top: 0.9em;
  padding: 0.7em 0.85em;
  border-radius: 0.75em;
  background: var(--ys-soft);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.4;
}
.hx .hp[data-for="saas"] .ys-quote span {
  display: block;
  margin-top: 0.25em;
  font-weight: 400;
  color: var(--ys-mute);
}

/* phones: one column, bigger type, only what carries the story */
@container (max-width: 480px) {
  .hx .mp[data-for="saas"] {
    font-size: 3cqw;
  }
  .hx .mp[data-for="saas"] .yb-links,
  .hx .mp[data-for="saas"] .yb-feats.three {
    display: none;
  }
  .hx .mp[data-for="saas"] .yb-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1em;
    padding: 1.3em 1.3em 1.1em;
  }
  /* a wider crop, so the logo strip that fault 5 marks stays on screen */
  .hx .mp[data-for="saas"] .yb-img {
    aspect-ratio: 12 / 5;
  }
  .hx .mp[data-for="saas"] .yb-img.dash {
    aspect-ratio: 3 / 1;
  }
  .hx .mp[data-for="saas"] .yb-feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1em 1.3em 0.2em;
  }
  .hx .mp[data-for="saas"] .yb-feats span:nth-child(n + 5) {
    display: none;
  }
  .hx .mp[data-for="saas"] .yb-logos {
    margin-inline: 1.3em;
  }
  .hx .mp[data-for="saas"] .yb-logos i:nth-of-type(n + 4) {
    display: none;
  }
  .hx .mp[data-for="saas"] .yb-plans {
    gap: 0.5em;
    padding: 1em 1em 0;
    font-size: 0.86em;
  }
  .hx .mp[data-for="saas"] .yb-plan {
    padding: 0.8em 0.7em;
  }
  .hx .hp[data-for="saas"] {
    font-size: 3cqw;
  }
  .hx .hp[data-for="saas"] .ys-links,
  .hx .hp[data-for="saas"] .ys-login,
  .hx .hp[data-for="saas"] .ys-logos .l4,
  .hx .hp[data-for="saas"] .ys-logos .l5,
  .hx .hp[data-for="saas"] .ys-kpi,
  .hx .hp[data-for="saas"] .ys-quote,
  .hx .hp[data-for="saas"] .ys-eye {
    display: none;
  }
  .hx .hp[data-for="saas"] .ys-logos {
    gap: 1.1em;
    padding: 0.7em 1.3em 0.9em;
  }
  /* pricing: the room under the plans holds what each one includes */
  .hx .hp[data-for="saas"] .ys-plan ul {
    margin-top: 0.5em;
    padding-top: 0.55em;
    font-size: 0.7em;
  }
  .hx .hp[data-for="saas"] .ys-pfoot {
    padding: 0.8em 1.3em 0;
    font-size: 0.8em;
  }
  .hx .hp[data-for="saas"] .ys-nav {
    padding: 0.9em 1.3em;
  }
  .hx .hp[data-for="saas"] .ys-btn.sm {
    margin-left: auto;
  }
  .hx .hp[data-for="saas"] .ys-hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 1.2em;
    padding: 1.2em 1.3em;
  }
  .hx .hp[data-for="saas"] .ys-h1 {
    margin-top: 0;
    font-size: 2.1em;
  }
  .hx .hp[data-for="saas"] .ys-h1.sm {
    font-size: 1.9em;
  }
  .hx .hp[data-for="saas"] .ys-ticks {
    font-size: 0.86em;
  }
  .hx .hp[data-for="saas"] .ys-steps li:nth-child(2) {
    display: none;
  }
  .hx .hp[data-for="saas"] .ys-phead {
    padding: 1.3em 1.3em 0;
  }
  .hx .hp[data-for="saas"] .ys-h2 {
    font-size: 1.55em;
  }
  .hx .hp[data-for="saas"] .ys-plans {
    gap: 0.55em;
    padding: 1.6em 1em 0.6em;
    font-size: 0.86em;
  }
  .hx .hp[data-for="saas"] .ys-plan {
    padding: 0.9em 0.7em;
  }
  .hx .hp[data-for="saas"] .ys-plan > em {
    font-size: 1.65em;
  }
  .hx .hp[data-for="saas"] .ys-plan .ys-btn {
    padding: 0.6em 0.4em;
    font-size: 0.74em;
    white-space: normal;
    text-align: center;
  }
}
/* === end hero pages: saas === */

/* === hero pages: shop upgrade === */
/* The shop pages in the hero, drawn to read as real screenshots. Everything is scoped to the hero and
   to the shop audience, so the sprint section's pages and the other audiences are untouched. Today's
   pages are a stock template left half set up; the rebuilt pages are a premium linen store. */

/* ---------- rebuilt pages: type, colour, header ---------- */
.hx .hp[data-for="shop"] {
  --a: #2f4a3a;
  --a-2: #253c2f;
  --n: #1f1d1a;
  --m: #6d655c;
  --bg: #fbf9f5;
  --soft: #f3eee6;
  --edge: #e6dfd3;
  --gold: #c18a2a;
  --r: 0.28em;
  --hf: "Fraunces", "Iowan Old Style", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
.hx .hp[data-for="shop"] svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx .hp[data-for="shop"] .hp-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.62em 1em;
  background: var(--a);
  color: #e9efe6;
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hx .hp[data-for="shop"] .hp-promo svg {
  width: 1.35em;
  height: 1.35em;
  stroke-width: 1.5;
}
.hx .hp[data-for="shop"] .hp-nav {
  gap: 1.7em;
  padding: 0.85em 1.6em;
  background: var(--bg);
  border-bottom-color: var(--edge);
}
.hx .hp[data-for="shop"] .hp-logo {
  gap: 0.35em;
  font: 500 1.3em/1 var(--hf);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 72;
}
.hx .hp[data-for="shop"] .hp-logo i {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50% 0;
  background: var(--a);
  transform: rotate(-8deg) translateY(0.05em);
}
.hx .hp[data-for="shop"] .hp-links {
  display: flex;
  gap: 1.55em;
  font-size: 0.74em;
  font-weight: 500;
  color: var(--n);
  letter-spacing: 0.01em;
}
.hx .hp[data-for="shop"] .hp-links .on {
  font-weight: 600;
  box-shadow: 0 0.35em 0 -0.22em var(--n);
}
.hx .hp[data-for="shop"] .ys-tools {
  display: inline-flex;
  gap: 1em;
  margin-left: auto;
  color: var(--n);
}
.hx .hp[data-for="shop"] .ys-tools + .hp-cart {
  margin-left: 0;
}
.hx .hp[data-for="shop"] .hp-cart {
  gap: 0.4em;
  font-size: 0.74em;
  font-weight: 600;
}
.hx .hp[data-for="shop"] .hp-cart svg {
  width: 1.45em;
  height: 1.45em;
}
.hx .hp[data-for="shop"] .hp-cart b {
  min-width: 1.55em;
  height: 1.55em;
  font-size: 0.78em;
}
.hx .hp[data-for="shop"] .hp-h1 {
  font: 400 2.3em/1.03 var(--hf);
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 120;
  text-wrap: balance;
}
.hx .hp[data-for="shop"] .hp-h2 {
  font: 400 1.6em/1.08 var(--hf);
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 96;
}
.hx .hp[data-for="shop"] .hp-p {
  font-size: 0.84em;
  line-height: 1.45;
  color: var(--m);
}
.hx .hp[data-for="shop"] .hp-btn {
  border-radius: var(--r);
  font-weight: 600;
  letter-spacing: 0.015em;
}
.hx .hp[data-for="shop"] .hp-btn.lg {
  padding: 0.95em 1.55em;
  font-size: 0.78em;
  background: var(--a);
  box-shadow: 0 0.7em 1.2em -0.8em rgba(31, 52, 40, 0.9);
}
.hx .hp[data-for="shop"] .hp-btn.o {
  padding: 0.95em 1.4em;
  font-size: 0.78em;
  color: var(--n);
  box-shadow: inset 0 0 0 1px rgba(31, 29, 26, 0.35);
}
.hx .hp[data-for="shop"] .hp-rate,
.hx .hp[data-for="shop"] .sp-rate {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.7em;
  color: var(--m);
}
.hx .hp[data-for="shop"] .st,
.hx .hp[data-for="shop"] .ys-meta s {
  color: var(--gold);
  letter-spacing: 0.06em;
  text-decoration: none;
}

/* ---------- the live bedroom photo: wall, window light, oak floor, a print, a lamp and the bed ---------- */
/* The bed is sized from the photo's own box (a size container), so it keeps its proportions in a wide
   hero or a tall gallery. site.js only swaps data-tint on .bed, so every colour that follows the set is
   a background-color built from --t, and it fades like the original. */
.hx .hp[data-for="shop"] .hp-shot {
  container-type: size;
  isolation: isolate;
  --bw: min(76cqw, 108cqh);
  --bh: calc(var(--bw) * 0.6);
  border-radius: 0.45em;
  background:
    linear-gradient(101deg, transparent 4%, rgba(255, 246, 226, 0.65) 12%, rgba(255, 246, 226, 0.45) 24%, transparent 31%) 0 0 / 100% 71% no-repeat,
    repeating-linear-gradient(180deg, rgba(90, 64, 38, 0.06) 0 1px, transparent 1px 1.9em) 0 100% / 100% 28% no-repeat,
    linear-gradient(180deg, transparent 70%, #f5f0e8 70%, #e4dbcd 72.2%, #cab596 72.2%, #bea480 86%, #ae936e 100%),
    radial-gradient(140% 110% at 16% 0%, #f7f2ea 0%, #ede5d9 48%, #ddd2c1 100%);
  box-shadow: inset 0 0 4.5em rgba(70, 50, 30, 0.16);
}
/* a framed print over the bed */
.hx .hp[data-for="shop"] .hp-shot::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: calc(7cqh + var(--bh) + 5.5cqh);
  width: calc(var(--bw) * 0.33);
  height: calc(var(--bw) * 0.22);
  transform: translateX(-50%);
  border: 0.2em solid #a4825e;
  background:
    radial-gradient(circle at 66% 40%, #d39873 0 12%, transparent 12.6%),
    radial-gradient(110% 72% at 20% 110%, #8b9c84 0 52%, transparent 52.6%),
    radial-gradient(120% 60% at 90% 114%, #cdbb9e 0 55%, transparent 55.6%),
    linear-gradient(#f3eee4, #ebe3d5);
  box-shadow: inset 0 0 0 0.4em #fbf8f2, inset 0 0 0 0.44em rgba(0, 0, 0, 0.07), 0 0.55em 0.9em -0.4em rgba(50, 34, 18, 0.5);
}
/* a bedside table and a linen lamp, with its glow on the wall */
.hx .hp[data-for="shop"] .hp-shot::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(50cqw + var(--bw) / 2 + 2.5cqw);
  bottom: 6.2cqh;
  width: calc(var(--bw) * 0.2);
  height: calc(var(--bh) * 0.98);
  background:
    linear-gradient(90deg, #e6d9c3, #fcf6ec 36%, #efe4d2 60%, #d9c9ae) 50% 0 / 64% 24% no-repeat,
    radial-gradient(closest-side, #8d9c88, #6e7d6a 80%, transparent 86%) 50% 31% / 34% 20% no-repeat,
    linear-gradient(#9b8466, #9b8466) 50% 22% / 5% 8% no-repeat,
    linear-gradient(180deg, #cfae84, #b8926a) 0 45% / 100% 4.5% no-repeat,
    linear-gradient(180deg, #b58f65 0 36%, #6c4f36 36% 38.5%, #a98359 38.5% 92%, #8a6a48 92%) 0 100% / 100% 52% no-repeat,
    radial-gradient(closest-side, rgba(255, 222, 160, 0.55), transparent) 50% 0 / 190% 42% no-repeat;
}
.hx .hp[data-for="shop"] .bed {
  --throw: #e2d5bf;
  z-index: 1;
  left: calc(50cqw - var(--bw) / 2);
  right: auto;
  bottom: 7cqh;
  width: var(--bw);
  height: var(--bh);
}
.hx .hp[data-for="shop"] .bed[data-tint="0"] {
  --throw: #a55e3e;
}
/* the upholstered base and its legs, under the drape */
.hx .hp[data-for="shop"] .bed::before {
  content: "";
  position: absolute;
  left: 1.5%;
  right: 1.5%;
  bottom: 0;
  height: 13%;
  border-radius: 0.15em;
  background:
    linear-gradient(#4f3a2a, #3f2e21) 3% 100% / 2.6% 34% no-repeat,
    linear-gradient(#4f3a2a, #3f2e21) 97% 100% / 2.6% 34% no-repeat,
    linear-gradient(180deg, #a18c73, #8a765f) 0 0 / 100% 68% no-repeat;
  filter: drop-shadow(0 0.35em 0.35em rgba(40, 26, 12, 0.35));
}
/* an upholstered, channel-tufted headboard */
.hx .hp[data-for="shop"] .bed .hb {
  left: 2.5%;
  right: 2.5%;
  top: 0;
  height: 57%;
  border-radius: 8% 8% 1% 1% / 16% 16% 2% 2%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 16%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.26)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0, rgba(255, 255, 255, 0.1) 1.3%, rgba(255, 255, 255, 0) 5%, rgba(0, 0, 0, 0.05) 10%, rgba(0, 0, 0, 0.13) 11.1%),
    #b09b82;
  box-shadow: 0 0 2.2em 0.4em rgba(90, 64, 40, 0.14), 0 0.4em 0.7em -0.4em rgba(40, 26, 12, 0.45), inset 0 0.1em 0 rgba(255, 255, 255, 0.3);
}
/* two big square shams in front of it, a shade deeper than the pillows */
.hx .hp[data-for="shop"] .bed .hb::before,
.hx .hp[data-for="shop"] .bed .hb::after {
  content: "";
  position: absolute;
  top: 16%;
  width: 44%;
  height: 70%;
  border-radius: 14% / 18%;
  background-color: color-mix(in srgb, var(--t) 55%, #efe9df);
  background-image: radial-gradient(70% 62% at 50% 40%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 74%), linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.14));
  box-shadow: inset 0 0 0 0.26em rgba(255, 255, 255, 0.16), 0 0.3em 0.5em -0.25em rgba(0, 0, 0, 0.3);
  transition: background-color 0.6s;
}
.hx .hp[data-for="shop"] .bed .hb::before {
  left: 5%;
  transform: rotate(-1.5deg);
}
.hx .hp[data-for="shop"] .bed .hb::after {
  right: 5%;
  transform: rotate(1.2deg);
}
/* pillows in the set's colour, plump in the middle */
.hx .hp[data-for="shop"] .bed .pillow {
  top: 29%;
  width: 38%;
  height: 20%;
  border-radius: 22% / 42%;
  background-color: color-mix(in srgb, var(--t) 78%, #ffffff);
  background-image: radial-gradient(62% 72% at 50% 36%, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0) 76%);
  box-shadow: 0 0.3em 0.45em -0.2em rgba(0, 0, 0, 0.32), inset 0 -0.35em 0.45em -0.15em rgba(0, 0, 0, 0.14), inset 0 0.15em 0.2em -0.05em rgba(255, 255, 255, 0.5);
}
.hx .hp[data-for="shop"] .bed .p1 {
  left: 10%;
  transform: rotate(-2.5deg);
}
.hx .hp[data-for="shop"] .bed .p2 {
  right: 10%;
  transform: rotate(2deg);
}
/* the duvet: a lit top, a rolled front edge, then the drape falling into soft folds and shade */
.hx .hp[data-for="shop"] .bed .duvet {
  left: -1.5%;
  right: -1.5%;
  bottom: 9%;
  height: 49%;
  border-radius: 5% 5% 7% 7% / 12% 12% 12% 12%;
  background-color: var(--t);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.2) 34%, rgba(255, 255, 255, 0.46) 39%, rgba(255, 255, 255, 0) 43%, rgba(0, 0, 0, 0.16) 48%, rgba(0, 0, 0, 0.07) 60%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.12) 11%, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, 0.09) 26%, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, 0.11) 46%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.1) 65%, rgba(0, 0, 0, 0) 74%, rgba(255, 255, 255, 0.11) 85%, rgba(0, 0, 0, 0.22) 100%),
    radial-gradient(40% 30% at 30% 22%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(34% 22% at 70% 26%, rgba(0, 0, 0, 0.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.022) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
  background-size: 100% 100%, 100% 57%, 100% 100%, 100% 100%, auto, auto;
  background-position: 0 0, 0 100%, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  box-shadow: 0 0.7em 0.9em -0.6em rgba(50, 32, 14, 0.5);
}
/* the top turned down over the pillows */
.hx .hp[data-for="shop"] .bed .duvet::before {
  content: "";
  position: absolute;
  left: 0.5%;
  right: 0.5%;
  top: 0;
  height: 11%;
  border-radius: 6% 6% 2% 2% / 50% 50% 20% 20%;
  background-color: color-mix(in srgb, var(--t) 70%, #ffffff);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.06));
  box-shadow: 0 0.28em 0.3em -0.18em rgba(0, 0, 0, 0.3);
  transition: background-color 0.6s;
}
/* a woven rug on the oak floor */
.hx .hp[data-for="shop"] .bed .duvet::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -16%;
  right: -16%;
  top: 88%;
  height: 70%;
  background:
    linear-gradient(90deg, rgba(120, 96, 64, 0.22) 0 1.2%, transparent 1.2% 98.8%, rgba(120, 96, 64, 0.22) 98.8%),
    repeating-linear-gradient(90deg, rgba(110, 86, 56, 0.06) 0 1px, transparent 1px 0.3em),
    linear-gradient(180deg, #e3d8c4, #d6c8b0);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
/* a waffle throw across the foot, over the right-hand side */
.hx .hp[data-for="shop"] .bed::after {
  content: "";
  position: absolute;
  left: 50%;
  right: -3%;
  top: 56%;
  height: 31%;
  border-radius: 4% 2% 5% 5% / 10% 6% 12% 12%;
  background-color: var(--throw);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 24%, rgba(255, 255, 255, 0.34) 29%, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.18) 39%, rgba(0, 0, 0, 0.07) 64%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 8%, rgba(255, 255, 255, 0.08) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 0.28em),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 0.28em);
  box-shadow: 0 0.25em 0.4em -0.15em rgba(0, 0, 0, 0.35);
  transition: background-color 0.6s;
}
.hx .hp[data-for="shop"] .swatches {
  z-index: 3;
  left: 0.75em;
  bottom: 0.75em;
  gap: 0.5em;
  padding: 0.42em 0.6em;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.4em 1em -0.5em rgba(40, 30, 20, 0.45);
}
.hx .hp[data-for="shop"] .swatches button {
  width: 1.15em;
  height: 1.15em;
}
.hx .hp[data-for="shop"] .toast {
  z-index: 3;
  top: 0.75em;
  right: 0.75em;
  max-width: 62%;
  padding: 0.55em 0.8em 0.55em 0.55em;
  border-radius: 0.55em;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.8em 1.6em -0.8em rgba(30, 20, 10, 0.5);
  font-size: 0.6em;
  animation: toastIn 7s var(--ease) 1.2s infinite;
}
.hx .hp[data-for="shop"] .toast i {
  background: linear-gradient(135deg, #e3d8c6, #c6b194);
}

/* ---------- rebuilt homepage: a split hero with the photo flush right, then the bestsellers ---------- */
.hx .hp[data-for="shop"][data-pg="1"] .hp-hero {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.hx .hp[data-for="shop"][data-pg="1"] .hp-copy {
  justify-content: center;
  gap: 0.72em;
  padding: 1.2em 1.9em 1.2em 1.6em;
}
.hx .hp[data-for="shop"] .ys-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--a);
}
.hx .hp[data-for="shop"] .ys-kicker i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #c99478;
  box-shadow: 0 0 0 0.24em rgba(201, 148, 120, 0.25);
}
.hx .hp[data-for="shop"][data-pg="1"] .hp-ctas {
  gap: 0.6em;
  margin-top: 0.3em;
}
.hx .hp[data-for="shop"][data-pg="1"] .hp-rate {
  margin-top: 0.45em;
}
.hx .hp[data-for="shop"][data-pg="1"] .hp-shot {
  align-self: stretch;
  border-radius: 0;
}
.hx .hp[data-for="shop"] .hp-best {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5em 0.85em;
  padding: 0.7em 1.6em 0.95em;
  border-top: 0;
  background: #ffffff;
}
.hx .hp[data-for="shop"] .ys-sechead {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.hx .hp[data-for="shop"] .ys-sechead b {
  font: 400 1.05em/1 var(--hf);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 48;
}
.hx .hp[data-for="shop"] .ys-sechead span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.62em;
  font-weight: 600;
  color: var(--n);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.hx .hp[data-for="shop"] .ys-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.2em 0.5em;
  min-width: 0;
}
.hx .hp[data-for="shop"] .ys-card .ys-pic {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
  margin-bottom: 0.3em;
}
.hx .hp[data-for="shop"] .ys-name {
  font-size: 0.66em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx .hp[data-for="shop"] .ys-price {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.62em;
  font-weight: 600;
}
.hx .hp[data-for="shop"] .ys-meta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.54em;
  color: var(--m);
}

/* ---------- product photos: a soft studio backdrop and the linen, shaded and folded ---------- */
.hx .hp[data-for="shop"] .ys-pic {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 0.3em;
  background:
    linear-gradient(180deg, transparent 70%, rgba(80, 60, 40, 0.05) 70%, rgba(80, 60, 40, 0.1)),
    radial-gradient(90% 80% at 50% 30%, #f7f3ec, #ebe3d6);
}
.hx .hp[data-for="shop"] .ys-pic > b {
  position: absolute;
  display: block;
}
.hx .hp[data-for="shop"] .ys-badge {
  position: absolute;
  top: 0.6em;
  left: 0.6em;
  padding: 0.3em 0.6em;
  border-radius: 0.2em;
  background: #ffffff;
  color: var(--n);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0.2em 0.6em -0.3em rgba(0, 0, 0, 0.3);
}
/* folded duvet set with a paper band */
.hx .hp[data-for="shop"] .ys-stack > b {
  left: 50%;
  border-radius: 0.28em / 0.45em;
  background-color: color-mix(in srgb, var(--pc) 88%, #ffffff);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.14)), linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.1));
  box-shadow: 0 0.18em 0.25em -0.1em rgba(40, 28, 15, 0.35);
  transform: translateX(-50%);
}
.hx .hp[data-for="shop"] .ys-stack > b:nth-child(1) {
  bottom: 17%;
  width: 60%;
  height: 21%;
}
.hx .hp[data-for="shop"] .ys-stack > b:nth-child(2) {
  bottom: 37%;
  width: 55%;
  height: 16%;
  background-color: color-mix(in srgb, var(--pc) 60%, #ffffff);
}
.hx .hp[data-for="shop"] .ys-stack > b:nth-child(3) {
  bottom: 52.5%;
  width: 50%;
  height: 14%;
}
.hx .hp[data-for="shop"] .ys-stack::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 57%;
  bottom: 16%;
  width: 9%;
  height: 51.5%;
  border-radius: 0.1em;
  background: radial-gradient(circle at 50% 50%, #3d3a33 0 14%, transparent 15%), linear-gradient(90deg, #c7ad86, #d8c19d 50%, #c2a67f);
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.2);
}
.hx .hp[data-for="shop"] .ys-pic::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 11%;
  height: 10%;
  background: radial-gradient(closest-side, rgba(50, 35, 20, 0.3), transparent);
}
/* two pillows, stacked */
.hx .hp[data-for="shop"] .ys-pillows > b {
  border-radius: 30% / 48%;
  background-color: color-mix(in srgb, var(--pc) 78%, #ffffff);
  background-image: radial-gradient(55% 62% at 50% 40%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.15));
  box-shadow: inset 0 0 0 0.16em rgba(255, 255, 255, 0.3), inset 0 -0.2em 0.3em -0.1em rgba(0, 0, 0, 0.12), 0 0.3em 0.4em -0.2em rgba(40, 28, 15, 0.35);
}
.hx .hp[data-for="shop"] .ys-pillows > b:nth-child(1) {
  left: 17%;
  right: 17%;
  bottom: 15%;
  height: 34%;
}
.hx .hp[data-for="shop"] .ys-pillows > b:nth-child(2) {
  left: 21%;
  right: 14%;
  bottom: 40%;
  height: 33%;
  transform: rotate(-3deg);
}
/* a folded waffle throw with a fringe */
.hx .hp[data-for="shop"] .ys-throw > b {
  left: 50%;
  border-radius: 0.3em / 0.5em;
  background-color: var(--pc);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 0.35em),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 0.35em);
  box-shadow: 0 0.2em 0.3em -0.1em rgba(40, 28, 15, 0.35);
  transform: translateX(-50%);
}
.hx .hp[data-for="shop"] .ys-throw > b:nth-child(1) {
  bottom: 17%;
  width: 62%;
  height: 26%;
}
.hx .hp[data-for="shop"] .ys-throw > b:nth-child(2) {
  bottom: 42%;
  width: 56%;
  height: 22%;
}
.hx .hp[data-for="shop"] .ys-throw::before {
  content: "";
  position: absolute;
  left: 19%;
  bottom: 11%;
  width: 62%;
  height: 7%;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--pc) 80%, #000) 0 1px, transparent 1px 0.25em);
  -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.3));
  mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.3));
}
/* a fitted sheet, folded, tied with a ribbon */
.hx .hp[data-for="shop"] .ys-sheet > b {
  left: 50%;
  border-radius: 0.25em / 0.4em;
  background-color: var(--pc);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.18)), linear-gradient(90deg, transparent 47%, #e9e1d2 47% 53%, transparent 53%);
  box-shadow: 0 0.2em 0.3em -0.1em rgba(40, 28, 15, 0.4);
  transform: translateX(-50%);
}
.hx .hp[data-for="shop"] .ys-sheet > b:nth-child(1) {
  bottom: 17%;
  width: 58%;
  height: 22%;
}
.hx .hp[data-for="shop"] .ys-sheet > b:nth-child(2) {
  bottom: 38%;
  width: 54%;
  height: 20%;
  background-color: color-mix(in srgb, var(--pc) 75%, #ffffff);
}

/* ---------- rebuilt collection: a filter bar around the live chips, six colourways, stars by every price ---------- */
.hx .hp[data-for="shop"][data-pg="2"] .hp-sec {
  justify-items: stretch;
  gap: 0.45em;
  padding: 0.85em 1.6em 0.55em;
}
.hx .hp[data-for="shop"] .ys-crumb {
  font-size: 0.56em;
  color: var(--m);
  letter-spacing: 0.02em;
}
.hx .hp[data-for="shop"] .ys-crumb i {
  margin: 0 0.45em;
  opacity: 0.55;
}
.hx .hp[data-for="shop"] .ys-title {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
}
.hx .hp[data-for="shop"] .ys-sub {
  font-size: 0.66em;
  color: var(--m);
}
.hx .hp[data-for="shop"] .ys-bar {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.55em;
  padding: 0.5em 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.hx .hp[data-for="shop"] .ys-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.42em 0.85em 0.42em 0.7em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(31, 29, 26, 0.3);
  font-size: 0.62em;
  font-weight: 600;
}
.hx .hp[data-for="shop"] .hp-chips {
  flex-wrap: nowrap;
  gap: 0.35em;
}
.hx .hp[data-for="shop"] .hp-chips span {
  padding: 0.42em 0.9em;
  font-size: 0.66em;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: #ffffff;
}
.hx .hp[data-for="shop"] .hp-chips .on {
  background: var(--n);
  color: #ffffff;
  box-shadow: none;
}
.hx .hp[data-for="shop"] .ys-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
  font-size: 0.62em;
  color: var(--m);
  white-space: nowrap;
}
.hx .hp[data-for="shop"] .ys-sort i {
  width: 1px;
  height: 1.1em;
  background: var(--edge);
}
.hx .hp[data-for="shop"] .ys-sort svg {
  margin-left: -0.2em;
  color: var(--n);
}
.hx .hp[data-for="shop"][data-pg="2"] .hp-grid6 {
  gap: 0.85em 0.9em;
  padding: 0.55em 1.6em 1em;
}
.hx .hp[data-for="shop"][data-pg="2"] .hp-grid6 > span {
  display: grid;
  gap: 0.28em;
  font-size: 1em;
  min-width: 0;
}
.hx .hp[data-for="shop"][data-pg="2"] .hp-grid6 .ys-name,
.hx .hp[data-for="shop"][data-pg="2"] .hp-grid6 .ys-row {
  justify-self: start;
  max-width: 100%;
}
.hx .hp[data-for="shop"][data-pg="2"] .hp-grid6 .ys-pic {
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.2em;
}
.hx .hp[data-for="shop"] .ys-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.64em;
  color: var(--m);
}
.hx .hp[data-for="shop"] .ys-row b {
  margin-right: 0.25em;
  font-size: 1.12em;
  font-weight: 600;
  color: var(--n);
}
.hx .hp[data-for="shop"] .ys-row s {
  color: var(--gold);
  font-size: 1em;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.hx .hp[data-for="shop"] .ys-heart {
  position: absolute;
  top: 0.55em;
  right: 0.55em;
  width: 1.7em;
  height: 1.7em;
  padding: 0.38em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--n);
  stroke-width: 1.8;
}
/* a made bed in the set's colour, photographed against a plaster wall */
.hx .hp[data-for="shop"] .ys-room {
  background:
    linear-gradient(180deg, transparent 73%, #f3ede4 73%, #e2d8c9 75.5%, #cbb697 75.5%, #b9a07b),
    linear-gradient(104deg, transparent 8%, rgba(255, 247, 230, 0.55) 16%, transparent 30%) 0 0 / 100% 73% no-repeat,
    radial-gradient(130% 100% at 20% 0%, #f6f1e8, #e6dccd);
}
.hx .hp[data-for="shop"] .ys-room::after {
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 12%;
}
.hx .hp[data-for="shop"] .ys-room .r-hb {
  left: 16%;
  right: 16%;
  top: 19%;
  height: 40%;
  border-radius: 9% 9% 1% 1% / 18% 18% 2% 2%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 20%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0, rgba(255, 255, 255, 0.1) 1.5%, rgba(255, 255, 255, 0) 6%, rgba(0, 0, 0, 0.13) 12.5%),
    #b09b82;
  box-shadow: 0 0 1.4em 0.2em rgba(90, 64, 40, 0.12);
}
.hx .hp[data-for="shop"] .ys-room .r-pl {
  inset: 0;
}
.hx .hp[data-for="shop"] .ys-room .r-pl::before,
.hx .hp[data-for="shop"] .ys-room .r-pl::after {
  content: "";
  position: absolute;
  top: 35%;
  width: 30%;
  height: 16.5%;
  border-radius: 22% / 42%;
  background-color: color-mix(in srgb, var(--pc) 72%, #ffffff);
  background-image: radial-gradient(62% 72% at 50% 36%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 76%);
  box-shadow: 0 0.2em 0.3em -0.15em rgba(0, 0, 0, 0.3), inset 0 -0.25em 0.3em -0.1em rgba(0, 0, 0, 0.13);
}
.hx .hp[data-for="shop"] .ys-room .r-pl::before {
  left: 20%;
  transform: rotate(-2.5deg);
}
.hx .hp[data-for="shop"] .ys-room .r-pl::after {
  right: 20%;
  transform: rotate(2deg);
}
.hx .hp[data-for="shop"] .ys-room .r-dv {
  left: 13%;
  right: 13%;
  top: 48%;
  bottom: 17%;
  border-radius: 5% 5% 7% 7% / 12% 12% 12% 12%;
  background-color: var(--pc);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 34%, rgba(255, 255, 255, 0.3) 39%, rgba(255, 255, 255, 0) 44%, rgba(0, 0, 0, 0.13) 49%, rgba(0, 0, 0, 0.06) 60%, rgba(0, 0, 0, 0.09) 80%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 6%, rgba(255, 255, 255, 0.12) 13%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.09) 30%, rgba(0, 0, 0, 0) 40%, rgba(255, 255, 255, 0.1) 52%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.1) 74%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, 0.22) 100%);
  background-size: 100% 100%, 100% 57%;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  box-shadow: 0 0.5em 0.6em -0.45em rgba(50, 32, 14, 0.5);
}
.hx .hp[data-for="shop"] .ys-room .r-dv::before {
  content: "";
  position: absolute;
  left: 0.5%;
  right: 0.5%;
  top: 0;
  height: 12%;
  border-radius: 6% 6% 2% 2% / 50% 50% 20% 20%;
  background: color-mix(in srgb, var(--pc) 68%, #ffffff);
  box-shadow: 0 0.2em 0.22em -0.14em rgba(0, 0, 0, 0.3);
}
.hx .hp[data-for="shop"] .ys-room .r-dv::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 1.5%;
  right: 1.5%;
  top: 92%;
  height: 22%;
  background:
    linear-gradient(#4f3a2a, #3f2e21) 3% 100% / 3% 40% no-repeat,
    linear-gradient(#4f3a2a, #3f2e21) 97% 100% / 3% 40% no-repeat,
    linear-gradient(180deg, #a18c73, #8a765f) 0 0 / 100% 60% no-repeat;
}
.hx .hp[data-for="shop"] .ys-room.is-stripe .r-dv {
  background-color: #f3efe7;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0.4) 39%, rgba(255, 255, 255, 0) 43%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.06) 60%, rgba(0, 0, 0, 0.09) 80%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(90deg, transparent 0 0.34em, var(--pc) 0.34em 0.46em);
  background-size: 100% 100%;
}
.hx .hp[data-for="shop"] .ys-room.is-stripe .r-pl::before,
.hx .hp[data-for="shop"] .ys-room.is-stripe .r-pl::after,
.hx .hp[data-for="shop"] .ys-room.is-stripe .r-dv::before {
  background-color: #f6f3ec;
}
.hx .hp[data-for="shop"] .ys-room.is-waffle .r-dv {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.18) 34%, rgba(255, 255, 255, 0.4) 39%, rgba(255, 255, 255, 0) 43%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.06) 60%, rgba(0, 0, 0, 0.09) 80%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, 0.18)),
    repeating-linear-gradient(90deg, rgba(120, 100, 70, 0.14) 0 1px, transparent 1px 0.3em),
    repeating-linear-gradient(0deg, rgba(120, 100, 70, 0.14) 0 1px, transparent 1px 0.3em);
  background-size: 100% 100%;
}

/* ---------- rebuilt product page: stars by the price, the benefit first, sizes with measurements ---------- */
.hx .hp[data-for="shop"][data-pg="3"] .sp {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 1.7em;
  padding: 1em 1.6em 1.1em;
}
.hx .hp[data-for="shop"][data-pg="3"] .sp-gal {
  gap: 0.5em;
}
.hx .hp[data-for="shop"][data-pg="3"] .sp-thumbs {
  gap: 0.5em;
}
.hx .hp[data-for="shop"] .sp-thumbs i {
  position: relative;
  width: 3em;
  height: 3em;
  border-radius: 0.3em;
  overflow: hidden;
}
.hx .hp[data-for="shop"] .sp-thumbs i:first-child {
  box-shadow: 0 0 0 0.12em var(--bg), 0 0 0 0.24em var(--n);
}
.hx .hp[data-for="shop"] .ys-th > b {
  position: absolute;
  display: block;
}
.hx .hp[data-for="shop"] .ys-th-stack {
  background:
    linear-gradient(#9fb39a, #8ba287) 50% 74% / 70% 20% no-repeat,
    linear-gradient(#d8e1d5, #c7d3c3) 50% 50% / 64% 16% no-repeat,
    linear-gradient(#a9bca4, #95aa90) 50% 30% / 58% 15% no-repeat,
    radial-gradient(90% 80% at 50% 30%, #f7f3ec, #e6ddd0);
}
.hx .hp[data-for="shop"] .ys-th-weave {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #b2c3ad, #8fa38a);
}
.hx .hp[data-for="shop"] .ys-th-edge {
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(255, 255, 255, 0.4), transparent 70%),
    linear-gradient(#c4d2c0, #b5c5b0) 50% 50% / 70% 64% no-repeat,
    linear-gradient(#dde5da, #d2dccf);
}
.hx .hp[data-for="shop"][data-pg="3"] .sp-info {
  gap: 0.5em;
}
.hx .hp[data-for="shop"] .sp-crumb {
  font-size: 0.56em;
  color: var(--m);
}
.hx .hp[data-for="shop"] .sp-crumb i {
  margin: 0 0.4em;
  opacity: 0.55;
}
.hx .hp[data-for="shop"][data-pg="3"] .hp-h2 {
  margin-top: -0.1em;
  font-size: 1.65em;
}
.hx .hp[data-for="shop"] .sp-rate {
  font-size: 0.68em;
}
.hx .hp[data-for="shop"] .sp-rate u {
  color: var(--n);
}
.hx .hp[data-for="shop"] .ys-pricerow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  width: 100%;
}
.hx .hp[data-for="shop"] .sp-price {
  font: 600 1.22em/1 var(--sans);
}
.hx .hp[data-for="shop"] .sp-ben {
  font: italic 400 0.98em/1.3 var(--hf);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
}
.hx .hp[data-for="shop"] .sp-spec {
  margin-top: -0.2em;
  font-size: 0.58em;
  color: var(--m);
}
.hx .hp[data-for="shop"] .ys-lbl {
  display: flex;
  gap: 1.2em;
  align-items: baseline;
  width: 100%;
  margin-top: 0.2em;
  font-size: 0.6em;
}
.hx .hp[data-for="shop"] .ys-lbl u {
  color: var(--m);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.hx .hp[data-for="shop"] .sp-sizes {
  gap: 0.45em;
  margin-top: -0.1em;
}
.hx .hp[data-for="shop"] .sp-sizes span {
  gap: 0.15em;
  padding: 0.55em 0.3em 0.5em;
  border-radius: var(--r);
  font-size: 0.68em;
}
.hx .hp[data-for="shop"] .sp-sizes small {
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}
.hx .hp[data-for="shop"] .sp-sizes .on {
  box-shadow: inset 0 0 0 1.5px var(--n);
  background: #ffffff;
}
.hx .hp[data-for="shop"] .sp-add {
  margin-top: 0.15em;
}
.hx .hp[data-for="shop"] .sp-calm {
  justify-content: center;
  width: 100%;
  gap: 0.5em;
  font-size: 0.66em;
  font-weight: 600;
  color: var(--a);
}
.hx .hp[data-for="shop"] .ys-acc {
  display: grid;
  width: 100%;
  margin-top: 0.3em;
  border-top: 1px solid var(--edge);
}
.hx .hp[data-for="shop"] .ys-acc span {
  display: flex;
  justify-content: space-between;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--edge);
  font-size: 0.62em;
  font-weight: 600;
}
.hx .hp[data-for="shop"] .ys-acc span::after {
  content: "+";
  font-weight: 400;
  color: var(--m);
}
/* the mini basket drops in from the header's basket */
.hx .hp[data-for="shop"] .sp-mini {
  left: auto;
  right: 1.6em;
  bottom: 1.1em;
  z-index: 4;
  width: min(19em, 43%);
  gap: 0.55em 0.65em;
  padding: 0.8em 0.85em 0.85em;
  border-radius: 0.55em;
  box-shadow: 0 1.4em 2.6em -1em rgba(31, 29, 26, 0.45), 0 0 0 1px rgba(31, 29, 26, 0.06);
}
.hx .hp[data-for="shop"] .sp-tick {
  width: 1.55em;
  height: 1.55em;
  background: var(--a);
}
.hx .hp[data-for="shop"] .sp-mini b {
  font-size: 0.7em;
}
.hx .hp[data-for="shop"] .sp-mini em {
  margin-top: 0.15em;
  font-size: 0.6em;
}
.hx .hp[data-for="shop"] .sp-mini s {
  font-size: 0.7em;
}
.hx .hp[data-for="shop"] .sp-mini .hp-btn {
  padding: 0.75em;
  font-size: 0.62em;
  background: var(--a);
}

/* ---------- today's pages: a stock template, left half set up ---------- */
.hx .mp[data-for="shop"] {
  --navy: #222222;
  --muted: #707070;
  --edge: #e6e6e6;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #222222;
  background: #ffffff;
}
.hx .mp[data-for="shop"] svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx .mp[data-for="shop"] em {
  font-style: normal;
}
.hx .mp[data-for="shop"] .mq-bar {
  background: #f7f7f7;
  border-bottom: 1px solid #ededed;
}
.hx .mp[data-for="shop"] .mp-nav {
  gap: 1.7em;
  padding: 1em 1.5em;
  border-bottom-color: #e8e8e8;
}
.hx .mp[data-for="shop"] .mp-logo {
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0;
  color: #222222;
}
.hx .mp[data-for="shop"] .mp-menu {
  gap: 1.5em;
  font-size: 0.86em;
  color: #555555;
}
.hx .mp[data-for="shop"] .mp-menu .on {
  font-weight: 400;
  color: #222222;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.hx .mp[data-for="shop"] .ys-bicons {
  display: inline-flex;
  gap: 1.1em;
  margin-left: auto;
  color: #333333;
}
.hx .mp[data-for="shop"] .mp-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-left: 0;
  font-size: 0.84em;
  font-weight: 400;
  color: #222222;
}
/* a slideshow with a stock photo, a white box and a welcome */
.hx .mp[data-for="shop"] .mq-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: 14.2em;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: #d8d4cd;
}
.hx .mp[data-for="shop"] .ys-slide {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 0.9em) 0 100% / 100% 21% no-repeat,
    linear-gradient(180deg, transparent 79%, #e9e6e1 79%, #dcd8d2 80.5%, #b5ada2 80.5%, #a79e92),
    radial-gradient(60% 90% at 14% 40%, #f1efeb, rgba(241, 239, 235, 0) 70%),
    linear-gradient(95deg, #d6d2cb, #d0cbc3 55%, #c7c1b8);
  filter: saturate(0.55) contrast(0.95);
}
.hx .mp[data-for="shop"] .ys-slide b {
  position: absolute;
  display: block;
}
/* a window with a sheer curtain */
.hx .mp[data-for="shop"] .s-win {
  left: 7%;
  top: 9%;
  width: 15%;
  height: 64%;
  border: 0.38em solid #e4e1dc;
  background:
    linear-gradient(90deg, transparent 47%, #e4e1dc 47% 53%, transparent 53%),
    linear-gradient(180deg, transparent 47%, #e4e1dc 47% 53%, transparent 53%),
    linear-gradient(160deg, #fbfbfa, #eceeed);
  box-shadow: 0 0 2.4em 0.8em rgba(255, 255, 255, 0.5), 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.1);
}
.hx .mp[data-for="shop"] .s-win::before {
  content: "";
  position: absolute;
  top: -12%;
  bottom: -22%;
  left: 88%;
  width: 36%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 0.6em, rgba(215, 211, 205, 0.55) 1.2em, rgba(255, 255, 255, 0.55) 1.8em);
  box-shadow: 0.3em 0 0.8em rgba(0, 0, 0, 0.06);
}
/* a bed in white and grey */
.hx .mp[data-for="shop"] .s-bed {
  right: 5%;
  bottom: 12%;
  width: 38%;
  height: 30%;
  border-radius: 0.4em 0.4em 0.3em 0.3em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.12)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 12%, rgba(255, 255, 255, 0.1) 30%, transparent 48%, rgba(0, 0, 0, 0.06) 70%, transparent 85%, rgba(0, 0, 0, 0.1)),
    #e3e1dd;
  box-shadow: 0 0.6em 0.8em -0.5em rgba(0, 0, 0, 0.3);
}
.hx .mp[data-for="shop"] .s-bed::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 3%;
  right: 3%;
  bottom: 70%;
  height: 95%;
  border-radius: 0.5em 0.5em 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 30%), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 2.2em), linear-gradient(180deg, #aca69d, #9d978e);
}
.hx .mp[data-for="shop"] .s-bed::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 88%;
  height: 32%;
  border-radius: 0.5em;
  background:
    radial-gradient(50% 60% at 25% 45%, #ffffff, rgba(255, 255, 255, 0) 70%),
    radial-gradient(50% 60% at 75% 45%, #ffffff, rgba(255, 255, 255, 0) 70%),
    linear-gradient(90deg, #efeeeb 0 47.5%, transparent 47.5% 52.5%, #efeeeb 52.5%);
}
.hx .mp[data-for="shop"] .s-bed {
  isolation: isolate;
}
/* a potted plant by the window */
.hx .mp[data-for="shop"] .s-plant {
  left: 22.5%;
  bottom: 12%;
  width: 7%;
  height: 52%;
  background:
    radial-gradient(closest-side, #6f7a66, #5c6755 70%, transparent 74%) 18% 20% / 55% 30% no-repeat,
    radial-gradient(closest-side, #7b866f, #626d5a 70%, transparent 74%) 80% 8% / 50% 28% no-repeat,
    radial-gradient(closest-side, #66715e, #525d4c 70%, transparent 74%) 60% 38% / 60% 30% no-repeat,
    radial-gradient(closest-side, #748069, #5e6957 70%, transparent 74%) 10% 52% / 48% 26% no-repeat,
    linear-gradient(#7d766c, #7d766c) 50% 70% / 6% 30% no-repeat,
    linear-gradient(180deg, #ecebe8, #d8d6d2) 50% 100% / 62% 24% no-repeat;
}
.hx .mp[data-for="shop"] .ys-slidebox {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.75em;
  padding: 1.3em 2.4em 1.4em;
  background: rgba(255, 255, 255, 0.84);
  text-align: center;
}
.hx .mp[data-for="shop"] .mq-banner .mp-h1 {
  font-size: 1.85em;
  font-weight: 700;
  letter-spacing: 0;
  color: #222222;
}
.hx .mp[data-for="shop"] .mq-banner .mp-sub {
  margin-top: 0.45em;
  font-size: 0.9em;
  color: #555555;
}
.hx .mp[data-for="shop"] .mb {
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hx .mp[data-for="shop"] .mb-b {
  padding: 0.75em 1.8em;
  font-size: 0.74em;
  background: #222222;
}
.hx .mp[data-for="shop"] .ys-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 2.3em;
  height: 2.3em;
  margin-top: -1.15em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}
.hx .mp[data-for="shop"] .ys-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55em;
  height: 0.55em;
  border: solid #444444;
  border-width: 0 0 0.12em 0.12em;
  transform: translate(-30%, -50%) rotate(45deg);
}
.hx .mp[data-for="shop"] .ys-prev {
  left: 1.2em;
}
.hx .mp[data-for="shop"] .ys-next {
  right: 1.2em;
}
.hx .mp[data-for="shop"] .ys-next::before {
  transform: translate(-70%, -50%) rotate(-135deg);
}
.hx .mp[data-for="shop"] .ys-dots {
  position: absolute;
  bottom: 0.8em;
  left: 50%;
  z-index: 1;
  display: flex;
  gap: 0.5em;
  transform: translateX(-50%);
}
.hx .mp[data-for="shop"] .ys-dots i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.hx .mp[data-for="shop"] .ys-dots .on {
  background: #333333;
}
.hx .mp.mq-sh[data-for="shop"] .mp-void:not(.mq-bar) {
  height: 2em;
  margin: 0.4em auto 0;
}
.hx .mp[data-for="shop"] .ys-bh {
  padding: 0.75em 1.5em 0.75em;
  text-align: center;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hx .mp[data-for="shop"] .mq-grid {
  gap: 0.9em;
  padding: 0 1.5em;
}
.hx .mp[data-for="shop"] .mq-grid span {
  gap: 0.35em;
}
.hx .mp[data-for="shop"] .mq-grid i {
  border-radius: 0;
}
.hx .mp[data-for="shop"] .mq-grid b {
  margin-top: 0.2em;
  font-size: 0.82em;
  font-weight: 400;
  color: #222222;
}
.hx .mp[data-for="shop"] .mq-grid em {
  font-size: 0.8em;
  color: #555555;
}
/* the theme's own stand-in where a product photo should be */
.hx .mp[data-for="shop"] .ys-noimg {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #f1f1f1;
}
.hx .mp[data-for="shop"] .ys-noimg svg {
  width: 2.8em;
  height: 2.8em;
  stroke: #c3c3c3;
  stroke-width: 1.1;
}
/* one flat, grey photo of a folded set, used for every product */
.hx .mp[data-for="shop"] .ys-dull {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(180deg, #e7e6e3, #dcdbd7);
}
.hx .mp[data-for="shop"] .ys-dull > b {
  position: absolute;
  left: 50%;
  display: block;
  margin: 0;
  border-radius: 0.5em / 0.9em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.08)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent 10%, transparent 90%, rgba(0, 0, 0, 0.07)),
    #bdbab4;
  transform: translateX(-50%);
}
.hx .mp[data-for="shop"] .ys-dull > b:nth-child(1) {
  bottom: 22%;
  width: 60%;
  height: 20%;
}
.hx .mp[data-for="shop"] .ys-dull > b:nth-child(2) {
  bottom: 41%;
  width: 57%;
  height: 16%;
  background-color: #c9c6c0;
}
.hx .mp[data-for="shop"] .ys-dull > b:nth-child(3) {
  bottom: 56%;
  width: 53%;
  height: 14%;
}
.hx .mp[data-for="shop"] .ys-dull::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 18%;
  height: 6%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.2), transparent);
}
/* today's collection: a title, a count and only a sort */
.hx .mp[data-for="shop"] .mp-crumbs {
  padding: 0.9em 1.5em 0.1em;
  font-size: 0.72em;
  color: #777777;
}
.hx .mp[data-for="shop"] .mq-colhead {
  justify-content: flex-start;
  gap: 1em;
  padding: 0.35em 1.5em 0.8em;
}
.hx .mp[data-for="shop"] .mq-h2 {
  font-size: 1.55em;
}
.hx .mp[data-for="shop"] .ys-count {
  font-size: 0.78em;
  color: #777777;
}
.hx .mp[data-for="shop"] .mq-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: auto;
  padding: 0.5em 0.6em 0.5em 0.8em;
  border: 1px solid #cfcfcf;
  border-radius: 0.15em;
  font-size: 0.78em;
  color: #333333;
  white-space: nowrap;
}
.hx .mp[data-for="shop"] .mq-grid.six {
  gap: 1em 0.9em;
}
.hx .mp[data-for="shop"] .mq-grid.six .ys-dull {
  aspect-ratio: 4 / 3;
}
/* today's product page: a select for size, the tax line, a quantity box */
.hx .mp[data-for="shop"] .mp-pdp {
  gap: 1.6em;
  padding: 0.6em 1.5em 0.4em;
}
.hx .mp[data-for="shop"] .mp-img {
  border-radius: 0;
}
.hx .mp[data-for="shop"] .mp-thumbs i {
  border-radius: 0;
}
.hx .mp[data-for="shop"] .mp-title {
  font-size: 1.45em;
  font-weight: 700;
}
.hx .mp[data-for="shop"] .mp-price {
  margin-top: 0.35em;
  font-size: 1.1em;
  font-weight: 400;
}
.hx .mp[data-for="shop"] .ys-tax {
  margin-top: 0.3em;
  font-size: 0.72em;
  color: #6b6b6b;
}
.hx .mp[data-for="shop"] .ys-opt {
  margin-top: 0.85em;
  font-size: 0.78em;
  color: #444444;
}
.hx .mp[data-for="shop"] .mp-swatches {
  margin-top: 0.4em;
}
.hx .mp[data-for="shop"] .mp-size {
  margin-top: 0.4em;
  padding: 0.55em 0.6em 0.55em 0.8em;
  border-color: #bdbdbd;
  border-radius: 0.15em;
  font-size: 0.8em;
}
.hx .mp[data-for="shop"] .mp-size {
  margin-top: 0.9em;
}
.hx .mp[data-for="shop"] .mp-size span {
  color: #444444;
}
.hx .mp[data-for="shop"] .mp-size em {
  font-weight: 400;
  color: #222222;
}
.hx .mp[data-for="shop"] .ys-buy {
  display: flex;
  gap: 0.6em;
  margin-top: 0.8em;
}
.hx .mp[data-for="shop"] .ys-qty {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  padding: 0 0.8em;
  border: 1px solid #bdbdbd;
  font-size: 0.8em;
}
.hx .mp[data-for="shop"] .ys-qty i {
  color: #777777;
}
.hx .mp[data-for="shop"] .ys-buy .mp-add {
  flex: 1;
  margin-top: 0;
  padding: 0.85em 1em;
  font-size: 0.74em;
  background: #222222;
}
.hx .mp[data-for="shop"] .mp-desc {
  margin-top: 0.6em;
  font-size: 0.74em;
}
.hx .mp[data-for="shop"] .mp-desc b {
  display: block;
  margin-bottom: 0.25em;
  color: #333333;
}
.hx .mp[data-for="shop"] .mp-reviews {
  margin: 0.2em 1.5em 0;
  font-size: 0.82em;
}
.hx .mp[data-for="shop"] .ys-write {
  margin-left: auto;
  padding: 0.45em 0.9em;
  border: 1px solid #bdbdbd;
  font-size: 0.9em;
  color: #333333;
}
.hx .mp[data-for="shop"] .mp-more b {
  font-size: 0.9em;
}
.hx .mp[data-for="shop"] .mp-row i {
  height: 3.2em;
  border-radius: 0;
}

/* today's homepage runs on into the theme's newsletter block */
.hx .mp[data-for="shop"] .ys-news {
  display: grid;
  justify-items: center;
  gap: 0.5em;
  margin-top: 1.6em;
  padding: 1.5em 1.5em 1.7em;
  background: #f5f5f5;
  text-align: center;
}
.hx .mp[data-for="shop"] .ys-news b {
  font-size: 1.05em;
}
.hx .mp[data-for="shop"] .ys-news p {
  font-size: 0.76em;
  color: #666666;
}
.hx .mp[data-for="shop"] .ys-email {
  display: flex;
  width: min(24em, 90%);
  margin-top: 0.3em;
  border: 1px solid #bdbdbd;
  background: #ffffff;
  font-size: 0.76em;
}
.hx .mp[data-for="shop"] .ys-email i {
  flex: 1;
  padding: 0.7em 0.8em;
  color: #888888;
}
.hx .mp[data-for="shop"] .ys-email em {
  padding: 0.7em 1em;
  background: #222222;
  color: #ffffff;
}

/* ---------- sizes: in the wide hero the type stops growing at the desktop size, so a wider stage at the
   same 440px height never pushes a marked element off the bottom ---------- */
.hx .hp[data-for="shop"] {
  font-size: min(1.86cqw, 12.3px);
}
.hx .mp[data-for="shop"] {
  font-size: min(1.62cqw, 10.7px);
}

/* ---------- phones: the rebuilt pages stack like a mobile site, today's pages keep their template ---------- */
@container (max-width: 560px) {
  .hx .mp[data-for="shop"] {
    font-size: 2.8cqw;
  }
  .hx .mp[data-for="shop"] .mp-nav {
    gap: 1.1em;
    padding: 0.9em 1.2em;
  }
  .hx .mp[data-for="shop"] .mp-menu {
    gap: 1em;
  }
  .hx .mp[data-for="shop"] .ys-bicons {
    gap: 0.8em;
  }
  .hx .mp[data-for="shop"] .ys-bicons svg:last-child {
    display: none;
  }
  .hx .mp[data-for="shop"] .mq-grid {
    padding: 0 1.2em;
  }
  .hx .mp[data-for="shop"] .mp-pdp {
    gap: 1.1em;
    padding: 0.5em 1.2em 0.4em;
  }
  .hx .mp[data-for="shop"] .mp-reviews {
    margin: 0.2em 1.2em 0;
  }
  .hx .mp[data-for="shop"] .mp-reviews .stars + span {
    display: none;
  }
  .hx .hp[data-for="shop"] {
    font-size: 2.6cqw;
  }
  .hx .hp[data-for="shop"] .hp-promo {
    font-size: 0.7em;
  }
  .hx .hp[data-for="shop"] .hp-nav {
    gap: 1.1em;
    padding: 0.75em 1.1em;
  }
  .hx .hp[data-for="shop"] .hp-links {
    gap: 1em;
    font-size: 0.72em;
  }
  .hx .hp[data-for="shop"] .ys-tools {
    gap: 0.7em;
  }
  .hx .hp[data-for="shop"] .ys-tools svg:last-child {
    display: none;
  }
  /* homepage: the promise, then the photo, then the bestsellers */
  .hx .hp[data-for="shop"][data-pg="1"] .hp-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .hx .hp[data-for="shop"][data-pg="1"] .hp-copy {
    justify-content: flex-start;
    gap: 0.6em;
    padding: 1.1em 1.2em 1em;
  }
  .hx .hp[data-for="shop"][data-pg="1"] .hp-h1 {
    font-size: 2.2em;
  }
  .hx .hp[data-for="shop"][data-pg="1"] .hp-ctas {
    margin-top: 0.15em;
  }
  .hx .hp[data-for="shop"][data-pg="1"] .hp-rate {
    margin-top: 0.7em;
  }
  .hx .hp[data-for="shop"] .hp-best {
    gap: 0.45em 0.5em;
    padding: 0.65em 1.1em 0.85em;
  }
  .hx .hp[data-for="shop"] .ys-name,
  .hx .hp[data-for="shop"] .ys-price {
    font-size: 0.6em;
  }
  .hx .hp[data-for="shop"] .ys-badge {
    top: 0.45em;
    left: 0.45em;
    font-size: 0.44em;
  }
  /* collection: bigger type, the same three columns */
  .hx .hp[data-for="shop"][data-pg="2"] {
    font-size: 2.85cqw;
  }
  .hx .hp[data-for="shop"][data-pg="2"] .hp-sec {
    padding: 0.8em 1.1em 0.5em;
  }
  .hx .hp[data-for="shop"][data-pg="2"] .hp-grid6 {
    gap: 0.8em 0.6em;
    padding: 0.5em 1.1em 1em;
  }
  .hx .hp[data-for="shop"] .ys-sub,
  .hx .hp[data-for="shop"] .ys-sort svg {
    display: none;
  }
  .hx .hp[data-for="shop"] .ys-sort {
    gap: 0.4em;
  }
  .hx .hp[data-for="shop"] .ys-bar {
    gap: 0.5em;
  }
  .hx .hp[data-for="shop"] .ys-filter {
    padding: 0.42em 0.7em;
  }
  .hx .hp[data-for="shop"] .hp-chips span {
    padding: 0.42em 0.7em;
  }
  .hx .hp[data-for="shop"] .ys-row small {
    display: none;
  }
  .hx .hp[data-for="shop"] .ys-heart {
    top: 0.4em;
    right: 0.4em;
    width: 1.5em;
    height: 1.5em;
    padding: 0.33em;
  }
  /* product page: the photo on top, the details under it, the mini basket dropping from the header */
  .hx .hp[data-for="shop"][data-pg="3"] .sp {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.9em;
    padding: 0.9em 1.1em 1em;
  }
  .hx .hp[data-for="shop"][data-pg="3"] .sp-info {
    gap: 0.5em;
  }
  .hx .hp[data-for="shop"][data-pg="3"] .hp-h2 {
    font-size: 1.7em;
  }
  .hx .hp[data-for="shop"] .sp-mini {
    top: 5.2em;
    right: 1.1em;
    bottom: auto;
    left: auto;
    width: 62%;
  }
}
/* === end hero pages: shop === */