:root {
  --pc-ink: #171412;
  --pc-paper: #f6f2e9;
  --pc-paper-strong: #fffaf0;
  --pc-muted: #70685d;
  --pc-line: rgba(23, 20, 18, 0.14);
  --pc-deep: #201d1a;
  --pc-deep-2: #2b2722;
  --pc-gold: #c99543;
  --pc-blue: #d8e8ef;
  --pc-green: #bcd8c8;
  --pc-red: #d36b55;
  --pc-shadow: 0 24px 70px rgba(24, 18, 10, 0.15);
  --sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  /* Strong, intentional curves (Emil): out for entrances, drawer for morphs. */
  --pc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@property --button-hover-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --button-hover-z {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --button-shadow-hover-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --button-shadow-hover-blur {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --button-side {
  syntax: "<length>";
  inherits: true;
  initial-value: 40px;
}

@property --face-hover-z {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --label-hover-z {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.pi-clarity-site {
  background: var(--pc-paper);
  color: var(--pc-ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.pi-clarity-site * {
  box-sizing: border-box;
}

.pi-clarity-site a {
  color: inherit;
}

.pc-page {
  min-height: 100vh;
  overflow-x: clip;
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 240, 0.88),
      rgba(246, 242, 233, 0.98)
    ),
    radial-gradient(
      circle at 20% 0%,
      rgba(216, 232, 239, 0.42),
      transparent 28rem
    );
}

.pc-skip-link {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  left: 1rem;
  transform: translateY(-160%);
  border-radius: 6px;
  background: var(--pc-ink);
  color: #fff;
  padding: 0.65rem 0.9rem;
  text-decoration: none;
}

.pc-skip-link:focus {
  transform: translateY(0);
}

.pc-topbar,
.pc-footer {
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pc-topbar {
  position: sticky;
  top: 0.75rem;
  z-index: 200;
  margin-top: 0.75rem;
  padding: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(246, 242, 233, 0.84);
  box-shadow: 0 16px 40px rgba(23, 20, 18, 0.1);
  backdrop-filter: blur(18px);
}

.pc-brand,
.pc-footer .pc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: var(--pc-ink);
  font-weight: 760;
  text-decoration: none;
}

.pc-brand__mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--pc-ink);
  color: var(--pc-paper-strong);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}

.pc-brand__logo {
  display: block;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border: 1px solid rgba(23, 20, 18, 0.12);
  border-radius: 6px;
  object-fit: cover;
}

.pc-brand__name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-topbar__links,
.pc-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.pc-topbar__links a,
.pc-footer__links a {
  border-radius: 999px;
  padding: 0.62rem 0.82rem;
  color: rgba(23, 20, 18, 0.78);
  font-size: 0.9rem;
  font-weight: 680;
  line-height: 1;
  text-decoration: none;
}

.pc-topbar__links a:hover,
.pc-topbar__links a[aria-current="page"] {
  background: var(--pc-ink);
  color: var(--pc-paper-strong);
}

/* Footer trust cluster: official "Powered by Stripe" badge + auto-year copyright,
   right-aligned opposite the brand mark. */
.pc-footer__trust {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}

.pc-footer__stripe {
  display: inline-flex;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.pc-footer__stripe:hover,
.pc-footer__stripe:focus-visible {
  opacity: 1;
}

.pc-footer__stripe img {
  display: block;
  width: auto;
  height: 28px;
}

.pc-footer__copyright {
  margin: 0;
  color: var(--pc-muted);
  font-size: 0.85rem;
}

.pc-hero,
.pc-section,
.pc-cta {
  width: min(1160px, calc(100% - 2rem));
  margin-inline: auto;
  scroll-margin-top: 6rem;
}

.pc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: clamp(1.5rem, 4.5vw, 4rem);
  align-items: center;
  min-height: calc(100vh - 4.5rem);
  padding: clamp(2.5rem, 5.5vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.pc-hero__copy {
  max-width: 44rem;
}

.pc-eyebrow {
  margin: 0 0 0.85rem;
  color: #8a5f21;
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pc-hero h1,
.pc-section h2,
.pc-cta h2 {
  margin: 0;
  color: var(--pc-ink);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 740;
  letter-spacing: 0;
}

.pc-hero h1 {
  max-width: 14ch;
  font-size: clamp(3rem, 5.45vw, 5.45rem);
  line-height: 0.95;
}

.pc-lede,
.pc-section__header p,
.pc-section__copy > p,
.pc-cta p {
  color: var(--pc-muted);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.7;
}

.pc-lede {
  max-width: 44rem;
  margin: 1.35rem 0 0;
}

/* Breathing room between a heading and the paragraph directly under it, so the
   big serif descenders don't crowd the body copy. */
.pc-section__header h2 + p,
.pc-section__copy h2 + p,
.pc-cta h2 + p {
  margin-top: 1.75rem;
}

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.pc-button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.9rem 1.25rem;
  font-weight: 790;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.pc-button:hover {
  transform: translateY(-1px);
}

.pc-button--primary {
  background: var(--pc-ink);
  color: var(--pc-paper-strong);
  box-shadow: 0 14px 30px rgba(23, 20, 18, 0.18);
}

.pi-clarity-site a.pc-button--primary,
.pi-clarity-site a.pc-button--primary:visited {
  color: var(--pc-paper-strong);
}

.pc-button--secondary {
  border: 1px solid var(--pc-line);
  background: rgba(255, 250, 240, 0.62);
  color: var(--pc-ink);
}

.cp-button {
  --button-side: 40px;
  --button-rx: 8deg;
  --button-ry: -9deg;
  --button-shadow-x: 0px;
  --button-shadow-y: 20px;
  --button-shadow-blur: 34px;
  --button-shadow-alpha: 0.38;
  --button-hover-y: 0px;
  --button-hover-z: 0px;
  --button-shadow-hover-y: 0px;
  --button-shadow-hover-blur: 0px;
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: clamp(4.1rem, 8vw, 5.4rem);
  height: clamp(3.4rem, 7vw, 4.4rem);
  place-items: center;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(145deg, #31ace4, #405af0);
  color: white;
  cursor: pointer;
  font: 800 0.86rem / 1 var(--sans);
  text-decoration: none;
  transform: rotateX(var(--button-rx)) rotateY(var(--button-ry))
    translate3d(0, var(--button-hover-y), calc(18px + var(--button-hover-z)));
  transform-style: preserve-3d;
  transition:
    --button-hover-y 420ms var(--ease-in-out-quint),
    --button-hover-z 420ms var(--ease-in-out-quint),
    --button-shadow-hover-blur 420ms var(--ease-in-out-quint),
    --button-shadow-hover-y 420ms var(--ease-in-out-quint),
    --button-side 420ms var(--ease-in-out-quint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    var(--button-shadow-x)
    calc(var(--button-shadow-y) + var(--button-shadow-hover-y))
    calc(var(--button-shadow-blur) + var(--button-shadow-hover-blur))
    rgba(21, 20, 15, var(--button-shadow-alpha));
}

.cp-button__label {
  position: relative;
  z-index: 2;
  max-width: calc(100% - 1rem);
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: center;
  transform: translateZ(48px);
}

.cp-button__face {
  display: none;
}

.cp-button--wide {
  width: clamp(6.5rem, 11vw, 8.2rem);
}

.cp-button::before,
.cp-button::after {
  position: absolute;
  content: "";
  background: linear-gradient(145deg, #176a9c, #152381);
  transform-style: preserve-3d;
}

.cp-button::before {
  top: 100%;
  right: 0;
  left: 0;
  height: var(--button-side);
  transform: rotateX(-90deg);
  transform-origin: top;
}

.cp-button::after {
  top: 0;
  bottom: 0;
  left: 100%;
  width: var(--button-side);
  transform: rotateY(90deg);
  transform-origin: left;
}

.cp-button.show-top-face::before {
  top: auto;
  bottom: 100%;
  transform: rotateX(90deg);
  transform-origin: bottom;
}

.cp-button.show-left-face::after {
  right: 100%;
  left: auto;
  transform: rotateY(-90deg);
  transform-origin: right;
}

.cp-button:hover {
  --button-hover-y: -3px;
  --button-hover-z: 16px;
  --button-shadow-hover-blur: 10px;
  --button-shadow-hover-y: 8px;
}

.cp-button:active {
  --button-side: 22px;
  --button-hover-y: 2px;
  --button-hover-z: -8px;
  --button-shadow-hover-blur: -6px;
  --button-shadow-hover-y: -6px;
}

.fisheye-action.cp-button {
  --fisheye-face-bg: linear-gradient(145deg, #15140f, #3a352b);
  --fisheye-face-glint: rgba(255, 253, 246, 0.26);
  --fisheye-face-shadow: rgba(21, 20, 15, 0.34);
  --fisheye-inset-shadow: rgba(0, 0, 0, 0.2);
  --fisheye-label-color: #fffaf0;
  --fisheye-side-bg: linear-gradient(145deg, #302c22, #11100d);
  --fisheye-side-border: rgba(21, 20, 15, 0.46);
  --button-side: 22px;
  --face-base-x: 1px;
  --face-base-y: 0px;
  --front-mid-x: 0px;
  --front-mid-y: 0px;
  --front-near-x: 0px;
  --front-near-y: 0px;
  --front-x: 0px;
  --front-y: 0px;
  --face-hover-z: 0px;
  --label-hover-z: 0px;
  --label-z: 52px;
  --mid-base-x: -2px;
  --mid-base-y: 0px;
  --mid-hover-z: 0px;
  --mid-z: -22px;
  --near-base-x: -1px;
  --near-base-y: 0px;
  --near-hover-z: 0px;
  --near-z: -10px;
  --rear-x: -4px;
  --rear-y: 0px;
  --rear-z: -34px;
  --rd-shadow-x: -4px;
  --rd-shadow-y: 18px;
  --rd-shadow-blur: 32px;
  --face-z: 18px;
  --stack-tilt-rx: 0deg;
  --stack-tilt-ry: 0deg;
  isolation: isolate;
  width: clamp(8.2rem, 12vw, 9.8rem);
  height: 3.05rem;
  flex: 0 0 auto;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.fisheye-action--content.cp-button {
  width: clamp(9.4rem, 13vw, 11.2rem);
}

.fisheye-action.cp-button::before,
.fisheye-action.cp-button::after {
  border: 1px solid var(--fisheye-side-border);
  background: var(--fisheye-side-bg);
}

.fisheye-action .cp-button__layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border: 1px solid var(--fisheye-side-border);
  border-radius: inherit;
  background: var(--fisheye-side-bg);
  pointer-events: none;
  transform-style: preserve-3d;
}

.fisheye-action .cp-button__layer--near {
  transform: rotateX(var(--stack-tilt-rx)) rotateY(var(--stack-tilt-ry))
    translate3d(
      calc(var(--near-base-x) + var(--front-near-x)),
      calc(var(--near-base-y) + var(--front-near-y)),
      calc(var(--near-z) + var(--near-hover-z))
    )
    scale(1.002);
}

.fisheye-action .cp-button__layer--mid {
  transform: rotateX(var(--stack-tilt-rx)) rotateY(var(--stack-tilt-ry))
    translate3d(
      calc(var(--mid-base-x) + var(--front-mid-x)),
      calc(var(--mid-base-y) + var(--front-mid-y)),
      calc(var(--mid-z) + var(--mid-hover-z))
    )
    scale(1.004);
}

.fisheye-action .cp-button__layer--far {
  box-shadow: 0 10px 24px rgba(21, 20, 15, 0.16);
  transform: rotateX(var(--stack-tilt-rx)) rotateY(var(--stack-tilt-ry))
    translate3d(var(--rear-x), var(--rear-y), var(--rear-z)) scale(1.006);
}

.fisheye-action .cp-button__face {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 24% 0%,
      var(--fisheye-face-glint),
      transparent 44%
    ),
    var(--fisheye-face-bg);
  box-shadow:
    inset 0 -14px 24px var(--fisheye-inset-shadow),
    var(--rd-shadow-x) var(--rd-shadow-y) var(--rd-shadow-blur)
    var(--fisheye-face-shadow);
  pointer-events: none;
  transform: translate3d(
    calc(var(--face-base-x) + var(--front-x)),
    calc(var(--face-base-y) + var(--front-y)),
    calc(var(--face-z) + var(--face-hover-z))
  );
  transition: --face-hover-z 420ms var(--ease-in-out-quint);
}

.fisheye-action .cp-button__label {
  z-index: 6;
  color: var(--fisheye-label-color);
  font-size: 0.78rem;
  line-height: 1.05;
  transform: translate3d(
    calc(var(--face-base-x) + var(--front-x)),
    calc(var(--face-base-y) + var(--front-y)),
    calc(var(--label-z) + var(--label-hover-z))
  );
  transition: --label-hover-z 420ms var(--ease-in-out-quint);
}

.fisheye-action:hover {
  --face-hover-z: 14px;
  --label-hover-z: 18px;
}

.fisheye-action:active {
  --face-hover-z: -7px;
  --label-hover-z: -8px;
  transform: rotateX(var(--button-rx)) rotateY(var(--button-ry))
    translate3d(0, 2px, 8px) scale(0.98);
}

.pc-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 2rem;
}

.pc-proof span {
  display: block;
  min-height: 4rem;
  border: 1px solid rgba(23, 20, 18, 0.1);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.72);
  padding: 0.85rem;
  color: var(--pc-muted);
  line-height: 1.3;
}

.pc-proof strong {
  display: block;
  color: var(--pc-ink);
  font-size: 0.94rem;
}

.pc-hero__media {
  position: relative;
  min-height: 36rem;
}

.pc-video-card,
.pc-visual-board,
.pc-split-visual {
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: linear-gradient(
    145deg,
    rgba(43, 39, 34, 0.96),
    rgba(32, 29, 26, 0.98)
  );
  box-shadow: var(--pc-shadow);
  color: var(--pc-paper-strong);
}

.pc-video-card {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
}

.pc-video,
.pc-video__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc-video__fallback {
  z-index: 0;
}

.pc-video {
  z-index: 1;
}

.pc-video-card::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(32, 29, 26, 0.1),
    rgba(32, 29, 26, 0.8)
  );
}

.pc-video-card__caption {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.88);
  color: var(--pc-ink);
  padding: 1rem;
}

.pc-video-card__caption span,
.pc-card span,
.pc-split-visual span {
  display: block;
  margin-bottom: 0.42rem;
  color: #9f7028;
  font-size: 0.74rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pc-video-card__caption strong {
  font-size: 1.15rem;
}

.pc-visual-board {
  min-height: 32rem;
  padding: 1rem;
}

.pc-logo-tile {
  display: grid;
  min-height: 13rem;
  margin: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--pc-paper-strong);
}

.pc-logo-tile img {
  width: min(15rem, 70%);
  height: auto;
}

.pc-decision-card {
  margin-top: 1rem;
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.1);
  padding: 1.15rem;
}

.pc-decision-card strong {
  display: block;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1;
}

.pc-decision-card p {
  color: rgba(255, 250, 240, 0.72);
}

.pc-signal {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.88);
  padding: 0.68rem 0.9rem;
  color: var(--pc-ink);
  font-size: 0.86rem;
  font-weight: 760;
  box-shadow: 0 12px 30px rgba(23, 20, 18, 0.18);
}

.pc-signal--1 {
  top: 12%;
  left: -1rem;
}

.pc-signal--2 {
  right: -0.7rem;
  bottom: 18%;
}

.pc-section {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.pc-section__header {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.pc-section__header h2,
.pc-section__copy h2,
.pc-cta h2 {
  font-size: clamp(2.1rem, 5vw, 4.6rem);
  line-height: 0.96;
}

.pc-card-grid,
.pc-faq__grid {
  display: grid;
  gap: 1rem;
}

.pc-card-section--cols-3 .pc-card-grid,
.pc-faq__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pc-card-section--cols-2 .pc-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-card-section--cols-4 .pc-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pc-card-section--cols-5 .pc-card-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pc-card {
  min-height: 13rem;
  border: 1px solid var(--pc-line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.62);
  padding: 1rem;
  box-shadow: 0 18px 45px rgba(23, 20, 18, 0.06);
}

.pc-card h3,
.pc-faq h3 {
  margin: 0;
  color: var(--pc-ink);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.1;
}

.pc-card p,
.pc-faq p,
.pc-split-visual p {
  color: var(--pc-muted);
  line-height: 1.6;
}

.pc-outcomes-section {
  width: min(1420px, calc(100% - 2rem));
}

.pc-outcomes-section .pc-section__header {
  width: min(1160px, 100%);
  max-width: none;
  margin-inline: auto;
  margin-bottom: 2.4rem;
}

.pc-outcomes-section .pc-section__header h2 {
  max-width: 13ch;
}

.pc-outcomes-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(13rem, auto));
  gap: 1rem;
}

/* Card 01 is the featured tile: it occupies the left column across both rows so
   the remaining four read 02-03 (top) then 04-05 (bottom), left-to-right. */
.pc-outcomes-grid > .pc-outcome-card:first-child {
  grid-row: 1 / span 2;
}

.pc-outcomes-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}

.pc-outcome-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  color: var(--pc-ink);
  box-shadow: var(--pc-shadow);
}

.pc-outcome-stat-card {
  display: grid;
  min-height: 16.5rem;
  align-content: center;
  gap: 1.3rem;
  padding: 2.2rem;
  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(255, 255, 255, 0.5),
      transparent 36%
    ),
    linear-gradient(145deg, #f4ed5a, #ffd58c 94%);
}

.pc-outcome-stat-value {
  margin: 0;
  color: var(--pc-ink);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 7rem;
  font-weight: 740;
  line-height: 0.84;
}

.pc-outcome-stat-label {
  max-width: 20rem;
  margin: 0;
  color: rgba(23, 20, 18, 0.82);
  font-size: 1.55rem;
  line-height: 1.15;
}

.pc-outcome-card--media {
  isolation: isolate;
  min-height: 25rem;
  background: #14140f;
}

.pc-outcome-card--tall {
  min-height: 42rem;
}

.pc-outcome-card--feature {
  min-height: 32rem;
}

.pc-outcome-card--medium {
  min-height: 27rem;
}

.pc-outcome-media-clip {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
}

.pc-outcome-media-layer {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0.88;
  transform: scale(1.07);
  transform-origin: 50% 50%;
  transition:
    opacity 280ms var(--ease-in-out-quint),
    transform 360ms var(--ease-in-out-quint);
}

.pc-outcome-card--media:hover .pc-outcome-media-layer {
  transform: scale(1.13);
}

.pc-outcome-card--media::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(
      circle at 26% 5%,
      rgba(255, 213, 140, 0.28),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(10, 11, 10, 0.08) 0%,
      rgba(10, 11, 10, 0.2) 36%,
      rgba(10, 11, 10, 0.86) 100%
    );
  pointer-events: none;
}

.pc-outcome-card__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.65rem;
}

.pc-outcome-card--media .pc-outcome-card__copy {
  position: absolute;
  right: 2.2rem;
  bottom: 2rem;
  left: 2.2rem;
  color: var(--pc-paper-strong);
}

.pc-outcome-number {
  display: block;
  color: var(--pc-gold);
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 4.9rem;
  font-weight: 740;
  line-height: 0.88;
}

.pc-outcome-card--media .pc-outcome-number {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  left: 1.35rem;
  color: rgba(255, 250, 240, 0.9);
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.46);
}

.pc-outcome-kicker {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 820;
  text-transform: uppercase;
}

.pc-outcome-card--media .pc-outcome-kicker {
  color: rgba(255, 250, 240, 0.74);
}

.pc-outcome-card h3 {
  max-width: 12ch;
  margin: 0;
  color: inherit;
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 3.5rem;
  font-weight: 650;
  line-height: 0.95;
}

.pc-outcome-card p {
  margin: 0;
}

.pc-outcome-card--media p {
  max-width: 28rem;
  color: rgba(255, 250, 240, 0.84);
  font-size: 1.05rem;
  line-height: 1.45;
}

.pc-outcome-card--text,
.pc-outcome-card--titles {
  border: 1px solid rgba(23, 20, 18, 0.6);
  background: rgba(255, 253, 246, 0.88);
}

.pc-outcome-card--text {
  display: grid;
  min-height: 28rem;
  align-content: space-between;
  padding: 2.2rem;
}

.pc-outcome-card--text h3 {
  color: var(--pc-ink);
  font-size: 3rem;
}

.pc-outcome-card--text p {
  max-width: 34rem;
  color: rgba(23, 20, 18, 0.68);
  font-size: 1.15rem;
  line-height: 1.45;
}

.pc-outcome-card--titles {
  min-height: 16.5rem;
  padding: 2.2rem;
}

.pc-outcome-card--titles .pc-outcome-kicker {
  color: var(--pc-ink);
}

.pc-outcome-marquee-stack {
  display: grid;
  gap: 0.8rem;
  margin-top: 3rem;
}

.pc-outcome-marquee-row {
  overflow: clip;
}

.pc-outcome-marquee-track {
  display: flex;
  width: max-content;
  gap: 1.6rem;
  color: rgba(23, 20, 18, 0.78);
  font-size: 1.6rem;
  line-height: 1.2;
  animation: pc-outcome-marquee 18s linear infinite;
}

.pc-outcome-marquee-row--reverse .pc-outcome-marquee-track {
  animation-direction: reverse;
  animation-duration: 21s;
}

.pc-outcome-card--titles:hover .pc-outcome-marquee-track {
  animation-play-state: paused;
}

@keyframes pc-outcome-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-outcome-media-layer,
  .pc-outcome-marquee-track {
    transition-duration: 1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

.pc-section--split {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 1.12fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.pc-section--reverse .pc-section__copy {
  order: 2;
}

.pc-section--reverse .pc-split-visual {
  order: 1;
}

.pc-split-visual {
  display: grid;
  gap: 0.8rem;
  min-height: 26rem;
  padding: 1rem;
  color: var(--pc-paper-strong);
}

.pc-split-visual article {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.08);
  padding: 1rem;
}

.pc-split-visual strong {
  display: block;
  color: var(--pc-paper-strong);
  font-size: 1.16rem;
}

.pc-split-visual p {
  color: rgba(255, 250, 240, 0.68);
}

.pc-split-visual--decision-table {
  place-items: center;
  background: linear-gradient(145deg, #e6efe9, #fffaf0);
  color: var(--pc-ink);
}

.pc-split-visual--decision-table img {
  display: block;
  width: min(100%, 31rem);
  height: auto;
}

.pc-checklist {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.pc-checklist span {
  border-left: 3px solid var(--pc-gold);
  border-radius: 4px;
  background: rgba(255, 250, 240, 0.72);
  padding: 0.7rem 0.85rem;
  color: var(--pc-ink);
  font-weight: 690;
}

.pc-faq__grid article {
  border: 1px solid var(--pc-line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.62);
  padding: 1rem;
}

.pc-cta {
  margin-top: clamp(2rem, 5vw, 4rem);
  margin-bottom: 2rem;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(188, 216, 200, 0.42), rgba(216, 232, 239, 0.5)),
    var(--pc-paper-strong);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
  box-shadow: var(--pc-shadow);
}

.pc-cta p {
  max-width: 42rem;
  margin-inline: auto;
}

/* Booking buttons in a CTA band sit centered under the heading. */
.pc-actions--cta {
  justify-content: center;
}

/* Licensing/credential band — warm gold tint to read as trust, not a booking CTA. */
.pc-cta--licensed {
  background:
    linear-gradient(135deg, rgba(201, 149, 67, 0.18), rgba(255, 213, 140, 0.24)),
    var(--pc-paper-strong);
}

/* ============================================================
   Reviews carousel
   ============================================================ */
.pc-reviews__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin-top: 1.1rem;
}

.pc-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--pc-gold);
}

.pc-star {
  fill: currentColor;
}

.pc-star--empty {
  opacity: 0.26;
}

.pc-reviews__score {
  color: var(--pc-ink);
  font-weight: 820;
}

.pc-reviews__count {
  color: var(--pc-muted);
  font-size: 0.95rem;
}

.pc-reviews__viewport {
  margin-top: 2rem;
}

.pc-reviews__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.25rem 0 1.1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 20, 18, 0.3) transparent;
}

.pc-review-card {
  display: flex;
  flex: 0 0 min(420px, 84%);
  flex-direction: column;
  gap: 1rem;
  scroll-snap-align: start;
  border: 1px solid var(--pc-line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.62);
  padding: 1.6rem;
  box-shadow: 0 18px 45px rgba(23, 20, 18, 0.06);
}

.pc-review-card__text {
  margin: 0;
  color: var(--pc-ink);
  font-size: 1.1rem;
  line-height: 1.62;
}

.pc-review-card__byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
}

.pc-review-card__author {
  color: var(--pc-ink);
  font-weight: 780;
}

.pc-review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--pc-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.pc-review-card__source svg {
  color: #1a73e8;
}

.pc-reviews__controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.pc-reviews__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--pc-line);
  border-radius: 999px;
  background: var(--pc-paper-strong);
  color: var(--pc-ink);
  cursor: pointer;
  transition:
    transform 160ms var(--pc-ease-out),
    background 180ms ease,
    opacity 180ms ease;
}

.pc-reviews__nav:hover {
  background: var(--pc-ink);
  color: var(--pc-paper-strong);
}

.pc-reviews__nav:active {
  transform: scale(0.92);
}

.pc-reviews__nav:focus-visible {
  outline: 2px solid var(--pc-gold);
  outline-offset: 2px;
}

.pc-reviews__nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

.pc-reviews__nav[disabled]:hover {
  background: var(--pc-paper-strong);
  color: var(--pc-ink);
}

.pc-reviews__link {
  margin-left: auto;
  color: var(--pc-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pc-footer {
  padding: 2rem 0 3rem;
}

@media (max-width: 920px) {
  .pc-hero,
  .pc-section--split {
    grid-template-columns: 1fr;
  }

  .pc-hero {
    min-height: auto;
  }

  .pc-hero h1 {
    max-width: 12ch;
  }

  .pc-hero__media {
    min-height: 29rem;
  }

  .pc-outcomes-section {
    width: min(1160px, calc(100% - 2rem));
  }

  .pc-outcomes-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .pc-outcomes-grid > .pc-outcome-card:first-child {
    grid-row: auto;
  }

  .pc-outcome-card--tall,
  .pc-outcome-card--feature,
  .pc-outcome-card--medium {
    min-height: 29rem;
  }

  .pc-outcome-card--text {
    min-height: 24rem;
  }

  .pc-card-section--cols-5 .pc-card-grid,
  .pc-card-section--cols-4 .pc-card-grid,
  .pc-card-section--cols-3 .pc-card-grid,
  .pc-card-section--cols-2 .pc-card-grid,
  .pc-faq__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pc-section--reverse .pc-section__copy,
  .pc-section--reverse .pc-split-visual {
    order: initial;
  }
}

@media (max-width: 680px) {
  .pc-topbar,
  .pc-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .pc-footer__trust {
    align-items: flex-start;
  }

  .pc-topbar__links,
  .pc-footer__links {
    justify-content: flex-start;
  }

  .pc-topbar__links a,
  .pc-footer__links a {
    padding: 0.58rem 0.66rem;
  }

  .pc-hero {
    padding-top: 3rem;
  }

  .pc-hero,
  .pc-section,
  .pc-cta {
    scroll-margin-top: 13rem;
  }

  .pc-hero h1 {
    font-size: clamp(3rem, 17vw, 4.6rem);
  }

  .pc-outcomes-section .pc-section__header {
    margin-bottom: 1.4rem;
  }

  .pc-outcome-stat-card,
  .pc-outcome-card--text,
  .pc-outcome-card--titles {
    padding: 1.15rem;
  }

  .pc-outcome-stat-card,
  .pc-outcome-card--titles {
    min-height: 13rem;
  }

  .pc-outcome-stat-value {
    font-size: 4.5rem;
  }

  .pc-outcome-stat-label {
    font-size: 1.2rem;
  }

  .pc-outcome-card--tall,
  .pc-outcome-card--feature,
  .pc-outcome-card--medium {
    min-height: 24rem;
  }

  .pc-outcome-card--media .pc-outcome-card__copy {
    right: 1.1rem;
    bottom: 1.1rem;
    left: 1.1rem;
  }

  .pc-outcome-number {
    font-size: 3.7rem;
  }

  .pc-outcome-card h3,
  .pc-outcome-card--text h3 {
    font-size: 2.35rem;
  }

  .pc-outcome-card--media p,
  .pc-outcome-card--text p {
    font-size: 0.98rem;
  }

  .pc-outcome-marquee-stack {
    margin-top: 2rem;
  }

  .pc-outcome-marquee-track {
    font-size: 1.28rem;
  }

  .pc-proof,
  .pc-card-section--cols-5 .pc-card-grid,
  .pc-card-section--cols-4 .pc-card-grid,
  .pc-card-section--cols-3 .pc-card-grid,
  .pc-card-section--cols-2 .pc-card-grid,
  .pc-faq__grid {
    grid-template-columns: 1fr;
  }

  .pc-actions .pc-button,
  .pc-actions .fisheye-action.cp-button {
    width: 100%;
  }

  .pc-hero__media,
  .pc-video-card,
  .pc-visual-board,
  .pc-split-visual {
    min-height: 24rem;
  }

  .pc-signal {
    position: static;
    display: inline-flex;
    margin: 0.7rem 0.4rem 0 0;
  }
}

/* ============================================================
   Hero video — custom Vidstack player
   Skewed "fisheye" preview that morphs to a full-bleed stage.
   ============================================================ */

.pc-hero-video {
  position: relative;
  min-height: 34rem;
  height: 100%;
}

/* The morphing surface. In-flow inside the hero while previewing; becomes a
   fixed, centered, full-bleed stage when expanded. The View Transitions API
   animates the morph between the two via the shared transition name. */
.pc-hero-video__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--pc-deep) var(--pc-poster, none) center / cover no-repeat;
  box-shadow: var(--pc-shadow);
  cursor: pointer;
  /* Fisheye lean: perspective skew via custom props so the resting tilt and any
     hover response interpolate cleanly (identical transform function list). */
  transform: perspective(1500px) rotateY(var(--pc-ry, -9deg))
    rotateX(var(--pc-rx, 3.4deg)) scale(var(--pc-scale, 0.965));
  transform-origin: 62% 50%;
  transition:
    transform 600ms var(--pc-ease-out),
    box-shadow 600ms var(--pc-ease-out);
  will-change: transform;
  view-transition-name: pc-hero-video;
}

@media (hover: hover) and (pointer: fine) {
  .pc-hero-video[data-pc-state="preview"] .pc-hero-video__stage:hover {
    --pc-scale: 0.985;
    --pc-ry: -6deg;
    --pc-rx: 2.4deg;
    box-shadow: 0 34px 92px rgba(24, 18, 10, 0.28);
  }
}

/* Expanded: grow to fill the hero (desktop) or its own media slot (mobile),
   contained and still in the page flow — NOT a fixed viewport overlay.

   On desktop, :has() lets the stage escape the media column and fill the whole
   hero band, fading the copy out of the way. That escape is DESKTOP-ONLY: the
   stacked mobile hero copy is very tall, and removing/hiding it reflows the
   page and yanks the scroll position (the video jumps out from under you). On
   mobile the video simply expands in place inside its slot — no reflow. */
@media (min-width: 721px) {
  .pc-hero:has(.pc-hero-video[data-pc-state="expanded"]) {
    position: relative;
    z-index: 4;
  }

  .pc-hero__media:has(.pc-hero-video[data-pc-state="expanded"]) {
    position: static;
  }

  .pc-hero-video[data-pc-state="expanded"] {
    position: static;
  }

  /* opacity (not display) keeps the copy's layout box, so nothing reflows. */
  .pc-hero:has(.pc-hero-video[data-pc-state="expanded"]) .pc-hero__copy {
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms var(--pc-ease-out);
  }

  .pc-hero:has(.pc-hero-video[data-pc-state="expanded"]) .pc-signal {
    opacity: 0;
  }
}

.pc-hero-video[data-pc-state="expanded"] .pc-hero-video__stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  /* Never taller than the viewport, so the bottom control bar stays reachable
     without scrolling (which would collapse it). Top-anchored when capped. */
  max-height: 86vh;
  border-radius: 16px;
  cursor: default;
  --pc-ry: 0deg;
  --pc-rx: 0deg;
  --pc-scale: 1;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}

/* On desktop the expanded stage fills the hero band, whose top sits flush under
   the sticky nav. Inset the top by the same 0.75rem gap the nav has above it so
   the video doesn't snap against the navbar. */
@media (min-width: 721px) {
  .pc-hero-video[data-pc-state="expanded"] .pc-hero-video__stage {
    top: 0.75rem;
  }
}

/* The Vidstack player + its <video> fill the stage in both states. */
.pc-hero-video__player {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: inherit;
  --media-brand: var(--pc-gold);
  --media-focus-ring-color: var(--pc-gold);
}

/* Round the media layers themselves. The card's 3D perspective transform means
   the stage's overflow:hidden + border-radius does NOT reliably clip composited
   children (the <video> especially), so square corners leak through at rest. */
.pc-hero-video media-provider,
.pc-hero-video media-provider video,
.pc-hero-video__player::part(video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  border-radius: inherit;
  overflow: hidden;
}

/* Poster overlay — covers the (initially frameless, black) media element until
   the video actually starts playing, then fades to reveal live frames. Also the
   LCP candidate (fetchpriority high on the img). */
.pc-hero-video__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  transition: opacity 420ms var(--pc-ease-out);
}

.pc-hero-video__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.pc-hero-video.is-playing .pc-hero-video__poster {
  opacity: 0;
}

/* Lens vignette + sheen sell the fisheye read; they fade out on expand. */
.pc-hero-video__lens,
.pc-hero-video__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 320ms var(--pc-ease-out);
}

.pc-hero-video__lens {
  background: radial-gradient(
    125% 100% at 50% 42%,
    transparent 58%,
    rgba(23, 20, 18, 0.1) 82%,
    rgba(23, 20, 18, 0.34) 100%
  );
  box-shadow: inset 0 0 44px rgba(23, 20, 18, 0.2);
  mix-blend-mode: multiply;
}

.pc-hero-video__sheen {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    transparent 38%
  );
  opacity: 0.85;
}

.pc-hero-video[data-pc-state="expanded"] .pc-hero-video__lens,
.pc-hero-video[data-pc-state="expanded"] .pc-hero-video__sheen {
  opacity: 0;
}

/* Preview play affordance — the whole card is the open target. */
.pc-hero-video__open {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--pc-paper-strong);
  font: inherit;
  cursor: pointer;
  transition: opacity 240ms var(--pc-ease-out);
}

.pc-hero-video__play {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  padding-left: 4px; /* optically center the play triangle */
  border: 1px solid rgba(255, 250, 240, 0.5);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.16);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
  color: var(--pc-paper-strong);
  transition:
    transform 160ms var(--pc-ease-out),
    background 200ms ease;
}

.pc-hero-video__open:hover .pc-hero-video__play {
  transform: scale(1.06);
  background: rgba(255, 250, 240, 0.28);
}

.pc-hero-video__open:active .pc-hero-video__play {
  transform: scale(0.96);
}

.pc-hero-video__open:focus-visible {
  outline: none;
}

.pc-hero-video__open:focus-visible .pc-hero-video__play {
  outline: 3px solid var(--pc-gold);
  outline-offset: 4px;
}

.pc-hero-video__open-label {
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.pc-hero-video[data-pc-state="expanded"] .pc-hero-video__open {
  opacity: 0;
  pointer-events: none;
}

/* Preview caption */
.pc-hero-video__caption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.9);
  color: var(--pc-ink);
  text-align: left;
  transition:
    opacity 220ms var(--pc-ease-out),
    transform 220ms var(--pc-ease-out);
}

.pc-hero-video__caption span {
  display: block;
  color: #9f7028;
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pc-hero-video__caption strong {
  font-size: 1.05rem;
}

.pc-hero-video[data-pc-state="expanded"] .pc-hero-video__caption {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* Expanded custom control bar */
.pc-hero-video__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 2.4rem 1rem 0.95rem;
  background: linear-gradient(180deg, transparent, rgba(8, 6, 4, 0.78));
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 240ms var(--pc-ease-out) 80ms,
    transform 240ms var(--pc-ease-out) 80ms;
}

.pc-hero-video[data-pc-state="expanded"] .pc-hero-video__controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pc-vctl {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pc-paper-strong);
  cursor: pointer;
  transition:
    transform 160ms var(--pc-ease-out),
    background 180ms ease;
}

.pc-vctl:hover {
  background: rgba(255, 250, 240, 0.16);
}

.pc-vctl:active {
  transform: scale(0.92);
}

.pc-vctl:focus-visible {
  outline: 2px solid var(--pc-gold);
  outline-offset: 2px;
}

.pc-vctl__icon {
  grid-area: 1 / 1;
}

.pc-vctl--toggle .pc-vctl__icon--play,
.pc-vctl--mute .pc-vctl__icon--muted {
  display: none;
}

.pc-hero-video[data-pc-paused] .pc-vctl--toggle .pc-vctl__icon--play {
  display: block;
}

.pc-hero-video[data-pc-paused] .pc-vctl--toggle .pc-vctl__icon--pause {
  display: none;
}

.pc-hero-video[data-pc-muted] .pc-vctl--mute .pc-vctl__icon--muted {
  display: block;
}

.pc-hero-video[data-pc-muted] .pc-vctl--mute .pc-vctl__icon--unmuted {
  display: none;
}

.pc-hero-video__scrub {
  position: relative;
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.24);
  cursor: pointer;
}

.pc-hero-video__buffered,
.pc-hero-video__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
}

.pc-hero-video__buffered {
  background: rgba(255, 250, 240, 0.22);
}

.pc-hero-video__progress {
  background: var(--pc-gold);
}

.pc-hero-video__progress::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--pc-paper-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-50%) scale(0);
  transition: transform 140ms var(--pc-ease-out);
}

.pc-hero-video__scrub:hover .pc-hero-video__progress::after,
.pc-hero-video__scrub:focus-visible .pc-hero-video__progress::after {
  transform: translateY(-50%) scale(1);
}

.pc-hero-video__scrub:focus-visible {
  outline: 2px solid var(--pc-gold);
  outline-offset: 3px;
}

.pc-hero-video__time {
  flex: none;
  min-width: 5.6rem;
  color: var(--pc-paper);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Close lives at the stage's top-right corner (a direct child of the stage so
   `absolute` resolves to the stage, not the bottom control bar). Hidden in the
   preview, revealed when expanded. */
.pc-vctl--close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.7rem;
  height: 2.7rem;
  background: rgba(12, 9, 7, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition:
    opacity 200ms var(--pc-ease-out),
    transform 200ms var(--pc-ease-out),
    background 180ms ease;
}

.pc-hero-video[data-pc-state="expanded"] .pc-vctl--close {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pc-vctl--close:hover {
  background: rgba(12, 9, 7, 0.78);
}

.pc-vctl--close svg {
  display: block;
  margin: 0;
}

/* View Transition morph timing (Emil drawer curve), shared by player + root. */
::view-transition-group(pc-hero-video) {
  animation-duration: 460ms;
  animation-timing-function: var(--pc-ease-drawer);
}

::view-transition-old(pc-hero-video),
::view-transition-new(pc-hero-video) {
  height: 100%;
  overflow: clip;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms;
  animation-timing-function: var(--pc-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  .pc-hero-video__stage {
    --pc-ry: 0deg;
    --pc-rx: 0deg;
    --pc-scale: 1;
    transition: none;
  }

  .pc-hero-video__lens,
  .pc-hero-video__sheen {
    display: none;
  }

  .pc-hero-video__open,
  .pc-hero-video__caption,
  .pc-hero-video__controls,
  .pc-hero-video__backdrop {
    transition-duration: 1ms;
  }
}

@media (max-width: 720px) {
  .pc-hero-video__stage {
    --pc-ry: -6deg;
    --pc-rx: 2.6deg;
    --pc-scale: 0.98;
  }

  .pc-hero-video__time {
    display: none;
  }

  /* On mobile the video expands in place to fill its own slot (the base
     expanded rule), leaving the page flow untouched — no copy removal, no
     reflow, no scroll jump. */
}