/* PropertyMe and AiMe Connect. PropertyMe's gradient and night tones inside The Gallery AI's editorial frame.
   Static is the baseline: every hidden or moving state below only applies once propertyme.js adds .pm-js. */
.pm-page {
  --pm-grad: linear-gradient(90deg, #14cdeb 0%, #3994fc 22%, #4268fc 36%, #b24ccb 58%, #e64687 72%, #ff685d 86%, #ff913b 100%);
  --pm-grad-warm: linear-gradient(90deg, #b24ccb -32%, #e64687 7%, #ff685d 53%, #ff913b 104%);
  --pm-grad-cool: linear-gradient(90deg, #14cdeb, #3994fc 45%, #b24ccb);
  --pm-night: linear-gradient(180deg, #223249 0%, #07080f 70%);
  /* Deeper stops for anything carrying text: every stop holds 4.5:1 against white. */
  --pm-grad-deep: linear-gradient(90deg, #2563d9 0%, #4268fc 28%, #8f3fc0 58%, #c93a7c 82%, #c94a2e 100%);
  --pm-ease: cubic-bezier(.2, .7, .1, 1);
  /* Every section starts on the same edge as the header logo, at any width (the header caps at 1600px). */
  --e-gutter: calc(max(0px, (100vw - 1600px) / 2) + clamp(24px, 5vw, 80px));
  overflow-x: clip;
}
@media (max-width: 600px) { .pm-page { --e-gutter: 20px; } }

.editorial .pm-page h2 {
  margin: 0;
  font-size: clamp(45px, 6vw, 94px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.pm-kicker {
  display: inline-block;
  margin-bottom: 32px;
  background: var(--pm-grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pm-gradient-text {
  background: var(--pm-grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reveal on scroll */
.pm-js .pm-reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--pm-ease), transform .9s var(--pm-ease); transition-delay: calc(var(--d, 0) * 110ms); }
.pm-js .pm-reveal.is-in { opacity: 1; transform: none; }

/* ───────────── Hero ───────────── */
.pm-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  min-height: calc(100svh - 104px);
  overflow: hidden;
  background: var(--pm-night);
  color: #fff;
}

.pm-aurora {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 80% 20%, rgb(57 148 252 / .5), transparent 70%),
    radial-gradient(32% 42% at 96% 72%, rgb(230 70 135 / .38), transparent 70%),
    radial-gradient(44% 54% at 8% 104%, rgb(178 76 203 / .38), transparent 70%),
    radial-gradient(30% 40% at 52% 102%, rgb(20 205 235 / .26), transparent 70%);
  filter: blur(12px);
  animation: pm-drift 16s ease-in-out infinite alternate;
}

@keyframes pm-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}

.pm-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 8vw, 130px) var(--e-gutter, 5.3vw);
}

.pm-lockup {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 28px);
  margin-bottom: clamp(44px, 7vh, 84px);
  color: rgb(255 255 255 / .6);
  font-size: clamp(20px, 1.8vw, 28px);
}

.pm-lockup img { width: auto; height: clamp(30px, 3vw, 44px); }
.pm-lockup img.pm-lockup-tgai { height: clamp(22px, 2.2vw, 32px); }

.editorial .pm-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 5.4vw, 98px);
  line-height: 1;
  letter-spacing: -.06em;
}

.pm-line { display: block; padding-bottom: .06em; overflow: hidden; }
.pm-line > span { display: inline-block; }
.pm-line > span { animation: pm-rise 1.15s var(--pm-ease) .15s both; }
.pm-line:nth-child(2) > span { animation-delay: .3s; }
.pm-in { animation: pm-fade-up .95s var(--pm-ease) both; animation-delay: calc(var(--d, 0) * 90ms + .1s); }
@keyframes pm-rise { from { transform: translateY(108%); } }
@keyframes pm-fade-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes pm-fade { from { opacity: 0; } }
@keyframes pm-in-left { from { opacity: 0; translate: -70px 0; } }
@keyframes pm-in-right { from { opacity: 0; translate: 70px 0; } }
@keyframes pm-card-in { from { opacity: 0; transform: translateY(34px) scale(.96); } }

.pm-hero-copy > p {
  max-width: 600px;
  margin: 34px 0 0;
  color: rgb(255 255 255 / .82);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
}

.pm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 38px; }

.pm-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  isolation: isolate;
  transition: transform .25s var(--pm-ease), box-shadow .25s ease, background-position .6s ease;
}
.pm-pill:hover { transform: translateY(-2px); }
.pm-pill:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pm-pill-fill { background: var(--pm-grad-deep); background-size: 170% 100%; background-position: 15% 0; box-shadow: 0 12px 34px rgb(178 76 203 / .38); }
.pm-pill-fill:hover { background-position: 85% 0; box-shadow: 0 16px 44px rgb(230 70 135 / .5); }
.pm-pill-ring { background: rgb(7 8 15 / .55); }
.pm-pill-ring::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 2px;
  border-radius: inherit;
  background: var(--pm-grad);
  content: '';
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.pm-hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 4vw, 52px);
  padding: clamp(40px, 5vw, 80px);
}

.pm-icons { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); }
.pm-icons img { display: block; height: auto; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .45)); }
.pm-icon-pme { width: clamp(96px, 9vw, 150px); animation: pm-in-left 1.2s var(--pm-ease) .35s both, pm-float 7s ease-in-out 1.6s infinite; }
.pm-icons-ai { display: flex; align-items: center; animation: pm-in-right 1.2s var(--pm-ease) .45s both, pm-float 7s ease-in-out 2.4s infinite; }
.pm-icon-claude { position: relative; z-index: 1; width: clamp(100px, 9.5vw, 156px); }
.pm-icon-chatgpt { width: clamp(92px, 8.8vw, 145px); margin-left: clamp(-46px, -3vw, -28px); }

@keyframes pm-float { 50% { transform: translateY(-10px); } }


.pm-link { animation: pm-fade .8s ease 1.1s both; width: clamp(70px, 7vw, 120px); height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pm-link-base { stroke: rgb(255 255 255 / .16); stroke-width: 3; }
.pm-link-flow { stroke: url(#pm-link-grad); stroke-width: 3.5; stroke-dasharray: 26 18; animation: pm-flow 1.6s linear infinite; }
.pm-link-head { stroke: url(#pm-link-grad); stroke-width: 3.5; }
@keyframes pm-flow { to { stroke-dashoffset: -44; } }

.pm-chat-card {
  width: min(100%, 460px);
  min-height: 330px;
  padding: 26px;
  border: 1px solid rgb(255 255 255 / .5);
  border-radius: 24px;
  background: rgb(255 255 255 / .95);
  color: #111;
  box-shadow: 0 30px 80px rgb(0 0 0 / .38), 0 0 0 8px rgb(255 255 255 / .05);
  font-size: 15px;
  line-height: 1.55;
}
.pm-chat-card { animation: pm-card-in 1.1s var(--pm-ease) .6s both; }

.pm-chat-ask { min-height: 3.1em; margin: 0 0 18px auto; max-width: 88%; padding: 13px 17px; border-radius: 16px 16px 4px 16px; background: #f1efe9; }
.pm-caret { display: none; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #4268fc; animation: pm-blink 1s steps(1) infinite; }
.pm-typing .pm-caret { display: inline-block; }
@keyframes pm-blink { 50% { opacity: 0; } }

.pm-chat-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; background: #eef3ff; color: #2f4fd8; font-size: 12px; font-weight: 600; }
.pm-dot { width: 7px; height: 7px; border-radius: 50%; background: #4268fc; }
.pm-reading .pm-dot { animation: pm-pulse 1s ease-in-out infinite; }
@keyframes pm-pulse { 50% { transform: scale(1.7); opacity: .4; } }

.pm-chat-answer p { margin: 0 0 10px; }
.pm-chat-answer ul { margin: 0; padding-left: 18px; color: #444; }
.pm-chat-answer li { margin-bottom: 6px; }
.pm-chat-note { margin-top: 16px; color: #8a8a8a; font-size: 12px; }

.pm-js .pm-chat-status, .pm-js .pm-chat-line { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s var(--pm-ease); }
.pm-js .pm-chat-status.is-on, .pm-js .pm-chat-line.is-on { opacity: 1; transform: none; }

/* ───────────── How it works: a pinned scene built by the reader's scroll ───────────── */
.pm-connect { --scene-bg: #f4f2fb; --travel: 0; --input: 1; --output: 1; --line-progress: 1; position: relative; isolation: isolate; background: var(--scene-bg); color: #171816; }
.pm-connect-frame { position: relative; display: flex; flex-direction: column; min-height: 680px; padding: 40px var(--e-gutter, 5.3vw) 30px; overflow: hidden; background: var(--scene-bg); }
.pm-connect-frame::before { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(50% 60% at 50% 55%, rgb(255 255 255 / .75), transparent 70%); content: ''; }
.pm-connect-copy { position: relative; z-index: 3; margin: clamp(30px, 5vh, 70px) 0 10px; pointer-events: none; }
.pm-connect-copy .pm-kicker { margin-bottom: 18px; }
.editorial .pm-connect-headline { margin: 0; color: inherit; font-family: Aventa, Arial, sans-serif; font-size: clamp(52px, 6.2vw, 108px); font-weight: 500; line-height: 1.02; letter-spacing: -.05em; }
.editorial .pm-connect-caption { max-width: 520px; margin: 16px 0 0; color: #3c3c3c; font-size: 17px; }

.pm-connect-map { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 11%; width: 100%; height: 360px; min-height: 260px; margin: auto 0; }
.pm-connect-inputs, .pm-connect-outputs { position: relative; z-index: 2; display: grid; gap: 16px; }
.pm-node { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 14px 20px; border: 1px solid rgb(255 255 255 / .9); border-radius: 18px; background: rgb(255 255 255 / .82); color: #171816; font-size: 18px; box-shadow: 0 1px 2px rgb(15 20 40 / .06), 0 14px 34px rgb(66 104 252 / .1); backdrop-filter: blur(8px); }
.pm-node-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pm-grad-cool); color: #fff; font-size: 17px; flex: none; }
.pm-node-in { transform: translateX(calc(var(--travel) * 54px)) scale(calc(1 - var(--travel) * .1)); opacity: var(--input); }
.pm-node-in:nth-child(1) { transform: translate(calc(var(--travel) * 54px), calc(var(--travel) * 40px)) scale(calc(1 - var(--travel) * .1)); }
.pm-node-in:nth-child(2) { transform: translate(calc(var(--travel) * 54px), calc(var(--travel) * 13px)) scale(calc(1 - var(--travel) * .1)); }
.pm-node-in:nth-child(3) { transform: translate(calc(var(--travel) * 54px), calc(var(--travel) * -13px)) scale(calc(1 - var(--travel) * .1)); }
.pm-node-in:nth-child(4) { transform: translate(calc(var(--travel) * 54px), calc(var(--travel) * -40px)) scale(calc(1 - var(--travel) * .1)); }
.pm-node-out { justify-content: space-between; transform: translateX(calc((1 - var(--output)) * -50px)); opacity: var(--output); }
.pm-node-out i { font-style: normal; background: var(--pm-grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 20px; font-weight: 700; }

.pm-connect-hub { position: relative; z-index: 3; justify-self: center; width: 100%; max-width: 250px; aspect-ratio: 1; transform: scale(calc(.9 + var(--travel) * .12)); }
.pm-hub-layer, .pm-hub-face { position: absolute; inset: 0; border-radius: 34px; }
.pm-hub-back { background: linear-gradient(135deg, #e64687, #ff913b); transform: translate(calc(var(--travel) * 24px), calc(var(--travel) * -24px)); opacity: .75; }
.pm-hub-mid { background: linear-gradient(135deg, #4268fc, #b24ccb); transform: translate(calc(var(--travel) * 12px), calc(var(--travel) * -12px)); opacity: .9; }
.pm-hub-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; overflow: hidden; background: var(--pm-night); color: #fff; box-shadow: 0 24px 60px rgb(34 50 73 / .35); }
.pm-hub-face::before { position: absolute; inset: -20%; background: radial-gradient(45% 45% at 30% 20%, rgb(57 148 252 / .55), transparent 70%), radial-gradient(40% 40% at 85% 90%, rgb(230 70 135 / .45), transparent 70%); content: ''; animation: pm-drift 12s ease-in-out infinite alternate; }
.pm-hub-icons { position: relative; display: flex; align-items: center; }
.pm-hub-icons img { width: clamp(42px, 4.2vw, 66px); height: auto; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .4)); }
.pm-hub-icons img + img { margin-left: -10px; }
.pm-hub-icons img:first-child { margin-right: 12px; }
.pm-hub-face span { position: relative; font-size: 15px; font-weight: 600; letter-spacing: .01em; }

.pm-connect-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; fill: none; pointer-events: none; }
.pm-connection-base { stroke: #4268fc; stroke-width: 1.5; opacity: .18; }
.pm-connection-fill { stroke: url(#pm-connect-grad); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--line-progress, 1)); opacity: .85; }
.pm-connection-signal { display: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .05 .95; filter: drop-shadow(0 0 4px #3994fc) drop-shadow(0 0 8px #e64687); }

.pm-connect-bottom { position: relative; z-index: 4; display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 22px; }
/* The site's legacy mobile menu styles every nav as a dropdown panel: reset it here. */
.pm-connect-bottom nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 26px; padding: 0; border: 0; background: none; }
.pm-connect-bottom button { min-height: 44px; padding: 14px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font-size: 13px; cursor: pointer; }
.pm-connect-bottom button[aria-current] { border-image: var(--pm-grad) 1; border-bottom-width: 2px; border-bottom-style: solid; }
.pm-connect-bottom button:focus-visible { outline: 2px solid #4268fc; outline-offset: 3px; }
.editorial .pm-connect-bottom p { margin: 0 0 15px; color: inherit; font-size: 13px; }
.pm-connect-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.pm-connect.is-enhanced { height: 290svh; }
.pm-connect.is-enhanced .pm-connect-frame { position: sticky; top: 0; height: 100svh; min-height: 620px; max-height: 1100px; padding-top: calc(var(--pm-header, 0px) + 6px); }
.pm-connect.is-enhanced .pm-connect-copy { margin-top: clamp(18px, 3.5vh, 54px); }
.pm-connect.is-enhanced .pm-connection-signal { display: block; }
.pm-connect.is-static .pm-connect-map { --output: 1 !important; --input: 1 !important; --travel: .5 !important; --line-progress: 1 !important; }
.pm-connect.is-static .pm-connect-bottom button { cursor: default; }

/* ───────────── What it is ───────────── */
.pm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: clamp(55px, 11vw, 180px); padding: clamp(90px, 11vw, 165px) var(--e-gutter, 5.3vw); background: #fff; color: #111; }
.pm-points { display: grid; gap: 38px; padding-top: 43px; }
.pm-points > div { padding-left: 24px; border-left: 2px solid; border-image: var(--pm-grad-cool) 1; }
.pm-points h3 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.02em; }
.pm-points p { margin: 0; color: #545454; font-size: 18px; line-height: 1.7; }

/* ───────────── What you can do: a sideways rail on wide screens ───────────── */
.pm-rail { position: relative; background: #f7f6fb; color: #111; }
.pm-rail-frame { position: relative; overflow: hidden; overflow: clip; padding: clamp(90px, 10vw, 150px) 0; background: #f7f6fb; }
.pm-rail .pm-aurora-soft { opacity: .3; }
.pm-rail-head { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 40px; align-items: end; padding: 0 var(--e-gutter, 5.3vw); }
.editorial .pm-rail-head p { max-width: 380px; margin: 0 0 10px; color: #545454; font-size: 17px; line-height: 1.6; }
.pm-rail-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(50px, 7vw, 90px); padding: 0 var(--e-gutter, 5.3vw); }
.pm-use { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 30px 30px 26px; border: 1px solid rgb(255 255 255 / .95); border-radius: 26px; background: linear-gradient(160deg, #fff 45%, #f2f0ff 80%, #ffeef3 100%); box-shadow: 0 1px 2px rgb(15 20 40 / .06), 0 22px 50px rgb(66 104 252 / .1); transition: transform .4s var(--pm-ease), box-shadow .4s ease; }
.pm-use:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgb(15 20 40 / .06), 0 30px 60px rgb(178 76 203 / .16); }
.pm-use-num { margin-bottom: 34px; background: var(--pm-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.pm-use h3 { margin: 0 0 10px; font-size: 26px; letter-spacing: -.03em; }
.pm-use p { margin: 0; color: #545454; font-size: 16px; line-height: 1.6; }
.pm-try { margin-top: auto; padding-top: 20px; border-top: 1px solid #ebe9f2; }
.pm-use .pm-try { margin-top: 26px; }
.pm-try b { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.pm-try em { background: linear-gradient(90deg, #8f3fc0, #c93a7c 50%, #2563d9); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 16px; line-height: 1.55; }
.pm-copy { display: none; align-self: flex-start; min-height: 40px; margin-top: 18px; padding: 8px 16px; border: 1px solid #dcd8ea; border-radius: 999px; background: #fff; color: #222; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.pm-copy:hover { border-color: #b24ccb; }
.pm-copy:focus-visible { outline: 2px solid #4268fc; outline-offset: 2px; }
.pm-js .pm-copy { display: inline-flex; align-items: center; }
.pm-copy.is-copied { border-color: transparent; background: var(--pm-grad-deep); color: #fff; }
.pm-rail-progress { display: none; }

.pm-rail.is-enhanced { height: var(--rail-height, 300svh); }
.pm-rail.is-enhanced .pm-rail-frame { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100svh; min-height: 640px; padding: var(--pm-header, 0px) 0 0; }
.pm-rail.is-enhanced .pm-rail-track { display: flex; width: max-content; margin-top: clamp(36px, 5vh, 64px); transform: translate3d(calc(var(--rail-shift, 0) * -1px), 0, 0); will-change: transform; }
.pm-rail.is-enhanced .pm-use { flex: none; width: clamp(330px, 30vw, 430px); min-height: clamp(360px, 46vh, 420px); }
.pm-rail.is-enhanced .pm-rail-progress { position: relative; display: block; width: calc(100% - 2 * var(--e-gutter, 5.3vw)); height: 3px; margin: clamp(34px, 5vh, 56px) var(--e-gutter, 5.3vw) 0; border-radius: 3px; background: rgb(66 104 252 / .14); }
.pm-rail.is-enhanced .pm-rail-progress span { position: absolute; inset: 0 auto 0 0; width: calc(var(--rail-progress, 0) * 100%); border-radius: inherit; background: var(--pm-grad); }

@media (max-height: 920px) {
  .pm-rail.is-enhanced .pm-rail-head h2 { font-size: clamp(40px, 7.6vh, 80px); }
  .pm-rail.is-enhanced .pm-rail-head .pm-kicker { margin-bottom: 16px; }
  .pm-rail.is-enhanced .pm-rail-track { margin-top: clamp(20px, 3.4vh, 36px); }
  .pm-rail.is-enhanced .pm-use { min-height: 0; padding: clamp(18px, 2.8vh, 28px) 26px clamp(16px, 2.4vh, 24px); }
  .pm-rail.is-enhanced .pm-use-num { margin-bottom: clamp(10px, 2vh, 24px); }
  .pm-rail.is-enhanced .pm-use h3 { font-size: 23px; }
  .pm-rail.is-enhanced .pm-use .pm-try { margin-top: clamp(12px, 2vh, 22px); padding-top: clamp(10px, 1.8vh, 18px); }
  .pm-rail.is-enhanced .pm-copy { margin-top: 12px; }
  .pm-rail.is-enhanced .pm-rail-progress { margin-top: clamp(18px, 3vh, 34px); }
}

/* ───────────── Before you start ───────────── */
.pm-ready { padding: clamp(90px, 10vw, 150px) var(--e-gutter, 5.3vw); background: #eef3ff; color: #111; }
.pm-ready-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: clamp(50px, 9vw, 150px); }
.pm-checklist { display: grid; margin: 0; padding: 0; list-style: none; }
.pm-checklist li { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding: 28px 0; border-bottom: 1px solid rgb(66 104 252 / .18); }
.pm-checklist li::before { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pm-grad); color: #fff; content: '✓'; font-size: 16px; box-shadow: 0 8px 20px rgb(178 76 203 / .25); }
.pm-js .pm-checklist li::before { transform: scale(0) rotate(-90deg); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--d, 0) * 110ms + .25s); }
.pm-js .pm-checklist li.is-in::before { transform: none; }
.pm-checklist strong { display: block; margin-bottom: 4px; font-size: 20px; }
.pm-checklist span { color: #545454; font-size: 16px; line-height: 1.6; }

/* ───────────── How we help ───────────── */
.pm-steps { --steps-progress: 1; padding: clamp(90px, 11vw, 165px) var(--e-gutter, 5.3vw); background: #fff; color: #111; }
.pm-steps-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); margin-top: clamp(60px, 8vw, 100px); padding-top: 30px; }
.pm-steps-line { position: absolute; top: 0; right: 0; left: 0; height: 3px; border-radius: 3px; background: #ecebf3; }
.pm-steps-line span { position: absolute; inset: 0 auto 0 0; width: calc(var(--steps-progress) * 100%); border-radius: inherit; background: var(--pm-grad); }
.pm-steps-list article span { background: var(--pm-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.pm-steps-list h3 { margin: 18px 0 12px; font-size: 28px; letter-spacing: -.03em; }
.pm-steps-list p { margin: 0; color: #545454; font-size: 17px; line-height: 1.65; }

/* ───────────── Once you're connected ───────────── */
.pm-more { padding: clamp(90px, 10vw, 150px) var(--e-gutter, 5.3vw) clamp(40px, 5vw, 70px); background: linear-gradient(180deg, #fff 0%, #f1eeea 100%); color: #111; }
.pm-more-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: 40px; align-items: end; }
.editorial .pm-more-head p { max-width: 400px; margin: 0 0 10px; color: #545454; font-size: 17px; line-height: 1.6; }
.pm-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(50px, 6vw, 80px); }
.pm-more-grid article { padding: 28px 26px 30px; border: 1px solid #ece9f5; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgb(15 20 40 / .04), 0 16px 40px rgb(66 104 252 / .07); transition: transform .4s var(--pm-ease), box-shadow .4s ease, opacity .9s var(--pm-ease); }
.pm-js .pm-more-grid article.pm-reveal.is-in:hover, .pm-more-grid article:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgb(15 20 40 / .04), 0 24px 50px rgb(178 76 203 / .12); }
.pm-more-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 26px; border-radius: 14px; background: var(--pm-grad-deep); color: #fff; font-size: 20px; box-shadow: 0 10px 22px rgb(66 104 252 / .25); }
.pm-more-grid h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }
.pm-more-grid p { margin: 0; color: #545454; font-size: 16px; line-height: 1.6; }
.pm-more-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; margin-top: 34px; }
.editorial .pm-more-note p { margin: 0; color: #5f5f66; font-size: 14px; }

/* The homepage's five-stage section, reused as is. It sits on the homepage stone. */
.pm-process { background: #f1eeea; color: #171816; }
/* The stages sit on this page's edge rather than the homepage's centred 1300px frame. */
.pm-page .pm-process { --e-gutter: inherit; }
.pm-page .pm-process #our-process .process-heading { max-width: none; padding: 0 var(--e-gutter); }
.pm-page .pm-process #our-process .process-scene { padding-inline: var(--e-gutter); }
/* Tab numbers and spacing as on the homepage, where these rules are scoped to the homepage's body classes. */
.pm-page .pm-process #our-process .process-tabs { gap: 30px; padding-bottom: 0; margin-bottom: 32px; }
.pm-page .pm-process #our-process .process-tabs button { padding-block: 14px 20px; min-height: 76px; white-space: normal; text-align: left; line-height: 1.35; }
.pm-page .pm-process #our-process .process-tabs button > span { display: block; margin: 0 0 12px; font-size: 11px; line-height: 1; opacity: 1; color: inherit; }
.pm-page .pm-process #our-process .process-tabs button { opacity: 1; color: #3f3a38; }
.pm-page .pm-process #our-process .process-tabs button[aria-selected="true"] { color: #171816; }
.pm-page .pm-process #our-process .process-scene[data-stage="4"] .process-tabs button { color: rgb(255 255 255 / .78); }
.pm-page .pm-process #our-process .process-scene[data-stage="4"] .process-tabs button[aria-selected="true"] { color: #fff; }
@media (max-width: 700px) {
  .pm-page .pm-process #our-process .process-tabs { gap: 8px; margin-bottom: 16px; }
  .pm-page .pm-process #our-process .process-tabs button { flex: 0 0 auto; padding: 12px 14px 14px; min-height: 68px; white-space: nowrap; font-size: 13px; }
  .pm-page .pm-process #our-process .process-tabs button > span { margin-bottom: 9px; }
}
@media (max-width: 1100px) { .pm-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pm-more-head { grid-template-columns: 1fr; } }

/* ───────────── What it costs: the services ladder ───────────── */
.pm-ladder { padding: clamp(90px, 10vw, 150px) var(--e-gutter, 5.3vw); background: #f6f5fb; color: #111; }
.pm-ladder-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 60px; align-items: end; }
.pm-ladder-head .pm-kicker { grid-column: 1 / -1; }
.pm-ladder-head p { max-width: 520px; margin: 0 0 10px; color: #545454; font-size: 18px; line-height: 1.7; }
.pm-ladder-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: clamp(50px, 7vw, 90px) 0 0; padding: 0; list-style: none; }
.pm-ladder-list li { display: flex; flex-direction: column; min-width: 0; padding: 30px; border: 1px solid #e6e4de; border-radius: 26px; background: #fff; }
.pm-ladder-list li > span { align-self: flex-start; background: var(--pm-grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.pm-ladder-list h3 { margin: 18px 0 14px; font-size: 24px; line-height: 1.15; letter-spacing: -.03em; }
.pm-ladder-list strong { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.pm-ladder-list strong small { color: #545454; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.pm-ladder-list p { margin: 16px 0 0; color: #545454; font-size: 16px; line-height: 1.6; }
.pm-ladder-list a { margin-top: auto; padding-top: 24px; color: #111; font-size: 15px; font-weight: 600; text-decoration: none; }
.pm-ladder-list a:hover { text-decoration: underline; }
.pm-ladder-list a:focus-visible { outline: 3px solid #4268fc; outline-offset: 3px; }
.pm-ladder-list .pm-ladder-lead { border-color: transparent; background: var(--pm-grad-deep); color: #fff; box-shadow: 0 20px 48px rgb(178 76 203 / .28); }
.pm-ladder-list .pm-ladder-lead > span { background: none; color: #fff; }
.pm-ladder-list .pm-ladder-lead :is(p, strong small) { color: rgb(255 255 255 / .86); }
.pm-ladder-list .pm-ladder-lead a { color: #fff; }
.pm-ladder-list .pm-ladder-lead a:focus-visible { outline-color: #fff; }
.pm-starter { display: flex; gap: 28px; align-items: baseline; margin-top: 18px; padding: 24px 30px; border: 1px solid #e6e4de; border-radius: 26px; background: #fff; color: #111; text-decoration: none; transition: border-color .3s, box-shadow .4s ease; }
.pm-starter:hover { border-color: #b24ccb; box-shadow: 0 20px 44px rgb(66 104 252 / .1); }
.pm-starter:focus-visible { outline: 3px solid #4268fc; outline-offset: 3px; }
.pm-starter .pm-kicker { flex: none; margin: 0; }
.pm-starter h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.pm-starter p { margin: 0; color: #545454; font-size: 16px; line-height: 1.6; }
.pm-starter > div { flex: 1; }
.pm-starter-go { flex: none; font-size: 15px; font-weight: 600; }
@media (max-width: 1100px) { .pm-ladder-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .pm-ladder { padding-block: 64px; }
  .pm-ladder-head, .pm-ladder-list { grid-template-columns: 1fr; }
  .pm-ladder-head p { margin-top: 16px; font-size: 16px; }
  .pm-ladder-list { gap: 10px; margin-top: 28px; }
  .pm-ladder-list li { padding: 22px; border-radius: 20px; }
  .pm-ladder-list h3 { margin: 10px 0 8px; font-size: 22px; }
  .pm-ladder-list strong { font-size: 28px; }
  .pm-ladder-list p { font-size: 15px; }
  .pm-ladder-list a { padding-top: 16px; }
  .pm-starter { display: block; margin-top: 10px; padding: 20px 22px; border-radius: 20px; }
  .pm-starter .pm-kicker { margin-bottom: 8px; }
  .pm-starter-go { display: inline-block; margin-top: 12px; }
}

/* ───────────── Thomas ───────────── */
.pm-thomas { --thomas-scale: 1; --thomas-lift: 0px; position: relative; display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: clamp(45px, 8vw, 130px); align-items: center; overflow: hidden; padding: clamp(90px, 10vw, 150px) var(--e-gutter, 5.3vw); background: var(--pm-night); color: #fff; }
.pm-thomas::before { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 90% 10%, rgb(57 148 252 / .3), transparent 70%), radial-gradient(35% 45% at 10% 100%, rgb(178 76 203 / .3), transparent 70%); content: ''; }
.pm-thomas figure { position: relative; max-height: 640px; margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 5; }
.pm-thomas figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(7 8 15 / .55)); content: ''; }
.pm-thomas img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transform: scale(var(--thomas-scale)); transform-origin: center 24%; }
.pm-thomas figcaption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; color: #fff; font-size: 15px; }
.pm-thomas figcaption span { display: block; font-size: 12px; opacity: .78; }
.pm-thomas-copy { position: relative; transform: translateY(var(--thomas-lift)); }
.pm-thomas .pm-kicker { background: linear-gradient(90deg, #6fc6f5, #9fb4ff 45%, #f08bbd); -webkit-background-clip: text; background-clip: text; }
.editorial .pm-page .pm-thomas h2 { color: #fff; font-size: clamp(40px, 4.6vw, 74px); }
.pm-thomas p { max-width: 640px; margin: 26px 0 0; color: rgb(255 255 255 / .82); font-size: 18px; line-height: 1.7; }
.pm-thomas-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pm-thomas-roles span { position: relative; padding: 8px 15px; border-radius: 999px; background: rgb(255 255 255 / .06); font-size: 13px; isolation: isolate; }
.pm-thomas-roles span::before { position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; background: var(--pm-grad); content: ''; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .8; }

/* ───────────── Sidekick: one calm block on a soft pink that deepens as you scroll through (propertyme.js).
   One headline, one paragraph, Thomas's words about Hermione and one button. Her portrait sits beside it. ───────────── */
.pm-sidekick { --sk-bg: #f5e4ec; --sk-ink: #171816; --sk-body: #3a3536; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 120px); align-items: center; padding: clamp(96px, 10vw, 150px) var(--e-gutter, 5.3vw); background: var(--sk-bg); color: var(--sk-ink); }
.pm-sidekick-logo img { display: block; width: clamp(150px, 13vw, 200px); height: auto; transform: translateX(-4.9%); }
.editorial .pm-page .pm-sidekick h2 { margin-top: clamp(32px, 3.4vw, 48px); color: var(--sk-ink); font-size: clamp(38px, 4.4vw, 68px); text-wrap: balance; }
.pm-sidekick-copy > p { max-width: 34em; margin: 24px 0 0; color: var(--sk-body); font-size: 18px; line-height: 1.65; }
.pm-sidekick-quote { margin-top: 32px; padding: 2px 0 2px 22px; border-left: 2px solid var(--sk-ink); }
.pm-sidekick-quote blockquote { margin: 0; padding: 0; border: 0; }
.editorial .pm-page .pm-sidekick-quote blockquote p { max-width: 24em; margin: 0; color: var(--sk-ink); font-family: Aventa, Arial, sans-serif; font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.pm-sidekick-quote .pm-sidekick-cite { margin: 10px 0 0; color: var(--sk-body); font-size: 14px; }
.pm-sidekick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
.pm-sidekick-button { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; background: #000; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .25s ease, transform .3s var(--pm-ease); }
.pm-sidekick-button:hover { background: #7c28e0; color: #fff; transform: translateY(-2px); }
.pm-sidekick-button:focus-visible { outline: 3px solid var(--sk-ink); outline-offset: 3px; }
.pm-sidekick .text-link { color: var(--sk-ink); }
.pm-sidekick-portrait { justify-self: end; width: min(100%, 440px); margin: 0; }
.pm-sidekick-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 28px; object-fit: cover; }
.pm-sidekick-portrait figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--sk-ink); font-size: 14px; font-weight: 600; }
.pm-sidekick-portrait figcaption span { color: var(--sk-body); font-weight: 400; }

/* ───────────── Ways in ───────────── */
.pm-paths { padding: clamp(90px, 11vw, 165px) var(--e-gutter, 5.3vw); background: #fff; color: #111; }
.pm-paths-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 60px; align-items: end; }
.pm-paths-head .pm-kicker { grid-column: 1 / -1; }
.pm-paths-head p { max-width: 520px; margin: 0 0 10px; color: #545454; font-size: 18px; line-height: 1.7; }
.pm-paths-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(50px, 7vw, 90px); }
.pm-path { display: flex; flex-direction: column; min-height: 300px; padding: 32px; border: 1px solid #e6e4de; border-radius: 26px; color: #111; text-decoration: none; transition: border-color .3s, transform .4s var(--pm-ease), box-shadow .4s ease, opacity .9s var(--pm-ease), background-position .6s ease; }
.pm-path:hover { border-color: #b24ccb; transform: translateY(-6px); box-shadow: 0 26px 50px rgb(66 104 252 / .12); }
.pm-path:focus-visible { outline: 3px solid #4268fc; outline-offset: 3px; }
.pm-path-lead { border-color: transparent; background: var(--pm-grad-deep); background-size: 160% 100%; background-position: 10% 0; color: #fff; box-shadow: 0 20px 48px rgb(178 76 203 / .32); }
.pm-path-lead:hover { background-position: 90% 0; }
.pm-path small { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.pm-path strong { margin: 22px 0 10px; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; }
.pm-path p { margin: 0; color: inherit; font-size: 16px; line-height: 1.6; opacity: .8; }
.pm-path > span { margin-top: auto; padding-top: 24px; font-size: 15px; font-weight: 600; }
.pm-js .pm-path.pm-reveal { transition-delay: calc(var(--d, 0) * 110ms); }
.pm-js .pm-path.pm-reveal.is-in:hover { transform: translateY(-6px); transition-delay: 0s; }

/* ───────────── Register interest: full width on the page's grid, the copy beside a short form ───────────── */
.pm-register { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; margin-top: clamp(60px, 8vw, 110px); padding: clamp(28px, 4.5vw, 64px); border-radius: 32px; background: linear-gradient(160deg, #f4f7ff 0%, #fbf8fe 60%, #fff7f4 100%); scroll-margin-top: calc(var(--pm-header, 0px) + 24px); isolation: isolate; }
.pm-register::before { position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; background: var(--pm-grad); content: ''; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; }
.pm-register-copy .pm-kicker { margin-bottom: 18px; }
.editorial .pm-page .pm-register-copy h3 { margin: 0; color: #111; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -.045em; }
.pm-register-copy p { max-width: 520px; margin: 14px 0 0; color: #545454; font-size: 17px; line-height: 1.65; }
.pm-register .interest { --in-line: #dcdae6; --in-focus: #4268fc; }
.editorial .pm-register .interest .button { border: 0; border-radius: 999px; background: var(--pm-grad-deep); background-size: 170% 100%; background-position: 15% 0; color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 12px 34px rgb(178 76 203 / .3); transition: background-position .6s ease, transform .3s var(--pm-ease), box-shadow .3s ease; }
.editorial .pm-register .interest .button:hover { background-position: 85% 0; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 44px rgb(230 70 135 / .4); }
.editorial .pm-register .interest .button:focus-visible { outline: 3px solid #4268fc; outline-offset: 3px; }
.pm-register .interest-choice input:checked + span { border-color: transparent; background: var(--pm-grad-deep); color: #fff; box-shadow: 0 8px 20px rgb(178 76 203 / .25); }
.pm-fineprint { max-width: 760px; margin: 44px 0 0; color: #767676; font-size: 13px; line-height: 1.6; }

/* ───────────── Smaller screens ───────────── */
@media (max-width: 1100px) {
  .pm-rail-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pm-hero, .pm-split, .pm-ready-inner, .pm-thomas, .pm-rail-head { grid-template-columns: 1fr; }
  .pm-hero { min-height: 0; }
  .pm-hero-visual { padding-top: 0; }
  .pm-steps-list, .pm-paths-grid, .pm-paths-head, .pm-register { grid-template-columns: 1fr; }
  .pm-steps-line { display: none; }
  .pm-steps-list article { padding-top: 22px; border-top: 3px solid; border-image: var(--pm-grad) 1; }
  .pm-thomas figure { max-width: 420px; }
  .pm-path { min-height: 0; padding: 26px 24px; }
  .pm-path strong { margin: 16px 0 8px; font-size: 26px; }
  .pm-path > span { padding-top: 18px; }
  .pm-paths-grid { gap: 12px; }
  /* The prompts become a swipeable row instead of six stacked cards. */
  .pm-rail-frame { padding-block: clamp(76px, 12vw, 110px); }
  .pm-rail-track { display: flex; gap: 12px; margin-top: 36px; padding: 6px 0 26px var(--e-gutter, 5.3vw); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--e-gutter, 5.3vw); scrollbar-width: none; }
  .pm-rail-track::-webkit-scrollbar { display: none; }
  .pm-rail-track::after { flex: 0 0 calc(var(--e-gutter, 5.3vw) - 12px); content: ''; }
  .pm-use { flex: 0 0 min(82%, 380px); min-height: 0; padding: 24px 22px 22px; scroll-snap-align: start; }
  .pm-use:hover { transform: none; }
  .pm-use-num { margin-bottom: 16px; }
  .pm-use h3 { font-size: 22px; }
  .pm-use p, .pm-try em { font-size: 15px; }
  .pm-use .pm-try { margin-top: 18px; padding-top: 16px; }
  .pm-js .pm-rail-progress { position: relative; display: block; height: 3px; margin: 2px var(--e-gutter, 5.3vw) 0; border-radius: 3px; background: rgb(66 104 252 / .14); }
  .pm-js .pm-rail-progress span { position: absolute; inset: 0 auto 0 0; width: calc(100% / 6 + var(--rail-progress, 0) * 100% * 5 / 6); border-radius: inherit; background: var(--pm-grad); }
  .pm-paths-head p { margin-top: 24px; }
  .pm-connect-frame { padding: 30px; }
  .pm-connect-map { gap: 7%; height: 330px; }
  .pm-node { gap: 10px; padding: 12px; font-size: 14px; }
  .pm-node-icon { width: 28px; height: 28px; font-size: 14px; }
  .pm-connect-bottom nav { gap: 16px; }
  .pm-connect-bottom button { font-size: 12px; }
  .editorial .pm-connect-bottom p { max-width: 160px; font-size: 11px; }
}

/* Phones: the easy wins become a compact list. */
@media (max-width: 700px) {
  .pm-more { padding: 76px var(--e-gutter, 5.3vw) 36px; }
  .pm-more-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid #e6e2ee; }
  .pm-more-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border: 0; border-bottom: 1px solid #e6e2ee; border-radius: 0; background: none; box-shadow: none; }
  .pm-js .pm-more-grid article.pm-reveal.is-in:hover, .pm-more-grid article:hover { transform: none; box-shadow: none; }
  .pm-more-icon { grid-row: span 2; width: 42px; height: 42px; margin: 2px 0 0; border-radius: 13px; font-size: 18px; }
  .pm-more-grid h3 { margin: 0; font-size: 19px; }
  .pm-more-grid p { font-size: 15px; line-height: 1.55; }
  .pm-more-note { margin-top: 26px; }
}

@media (max-width: 600px) {
  .pm-chat-card { min-height: 0; padding: 20px; font-size: 14px; }
  .pm-connect.is-enhanced { height: 150svh; }
  .pm-connect.is-enhanced .pm-connect-frame { min-height: 590px; max-height: 950px; }
  .pm-connect-frame { min-height: 650px; padding: 25px var(--e-gutter, 20px); }
  .pm-connect-copy { margin: 30px 0 16px; }
  .editorial .pm-connect-headline { min-height: 2.04em; font-size: clamp(42px, 11vw, 64px); }
  .editorial .pm-connect-caption { max-width: 300px; margin-top: 10px; font-size: 14px; }
  .pm-connect-map { gap: 12px; height: 290px; min-height: 230px; }
  .pm-connect-inputs, .pm-connect-outputs { gap: 12px; }
  .pm-node { min-height: 44px; padding: 8px 7px; border-radius: 12px; font-size: 11px; line-height: 1.25; gap: 0; }
  .pm-node-icon { display: none; }
  .pm-node-out i { margin-left: 4px; font-size: 13px; }
  .pm-connect-hub { min-width: 92px; aspect-ratio: .85; }
  .pm-hub-layer, .pm-hub-face { border-radius: 20px; }
  .pm-hub-face { gap: 12px; padding: 10px 6px; }
  .pm-hub-icons img { width: 30px; }
  .pm-hub-icons img:first-child { margin-right: 4px; }
  .pm-hub-face span { font-size: 10px; text-align: center; }
  .pm-hub-back { transform: translate(calc(var(--travel) * 10px), calc(var(--travel) * -10px)); }
  .pm-hub-mid { transform: translate(calc(var(--travel) * 5px), calc(var(--travel) * -5px)); }
  .pm-node-in, .pm-node-in:nth-child(n) { transform: translateX(calc(var(--travel) * 12px)); }
  .pm-connect-bottom { display: block; margin-top: 16px; }
  .pm-connect-bottom nav { justify-content: space-between; gap: 10px; }
  .pm-connect-bottom button { max-width: 100px; font-size: 11px; text-align: left; }
  .editorial .pm-connect-bottom p { max-width: none; margin: 12px 0 0; }
}

/* ───────────── Phones: one tighter rhythm for the whole page ─────────────
   Sections breathe at 64px instead of 90px, headings step down and every list loses its spare padding. */
@media (max-width: 700px) {
  .pm-kicker { margin-bottom: 16px; }
  .editorial .pm-page h2 { font-size: 40px; }
  .pm-split, .pm-ready, .pm-steps, .pm-thomas, .pm-paths { padding-block: 64px; }

  .pm-hero-copy { padding: 40px var(--e-gutter, 5.3vw) 8px; }
  .pm-lockup { margin-bottom: 32px; }
  .editorial .pm-hero h1 { font-size: 46px; }
  .pm-hero-copy > p { margin-top: 20px; font-size: 16px; }
  .pm-actions { gap: 10px; margin-top: 26px; }
  .pm-pill { min-height: 48px; padding: 12px 20px; font-size: 15px; }
  .pm-hero-visual { gap: 24px; padding: 28px var(--e-gutter, 5.3vw) 44px; }
  .pm-icon-pme { width: 80px; }
  .pm-icon-claude { width: 84px; }
  .pm-icon-chatgpt { width: 78px; margin-left: -24px; }

  .pm-split { gap: 28px; }
  .pm-points { gap: 22px; padding-top: 0; }
  .pm-points h3 { font-size: 21px; }
  .pm-points p { font-size: 16px; line-height: 1.6; }

  .pm-rail-frame { padding-block: 64px; }
  .pm-rail-head { gap: 16px; }
  .pm-rail-track { margin-top: 24px; }

  .pm-ready-inner { gap: 20px; }
  .pm-checklist li { padding: 18px 0; }
  .pm-checklist strong { font-size: 18px; }
  .pm-checklist span { font-size: 15px; }

  .pm-steps-list { gap: 22px; margin-top: 28px; padding-top: 0; }
  .pm-steps-list article { padding-top: 16px; }
  .pm-steps-list h3 { margin: 10px 0 6px; font-size: 23px; }
  .pm-steps-list p { font-size: 16px; }

  .pm-more { padding: 64px var(--e-gutter, 5.3vw) 24px; }
  .pm-more-head { gap: 16px; }
  .editorial .pm-more-head p { display: none; }
  .pm-more-grid { margin-top: 24px; }
  .pm-more-grid article { padding: 16px 0; }

  .pm-page .pm-process #our-process { padding: 56px 0 24px; }
  .pm-page .pm-process #our-process .process-heading { margin-bottom: 24px; }
  /* The homepage indents the stage copy by 4px on small screens; here it sits on the page edge. */
  .pm-page .pm-process #our-process .process-copy { padding-inline: 0; }
  .pm-page .pm-process #our-process .process-copy .text-link { padding-inline: 0; }

  .pm-thomas { gap: 28px; }
  .pm-thomas figure { max-width: none; aspect-ratio: 4 / 3; }
  .pm-thomas p { margin-top: 18px; font-size: 16px; }
  .pm-thomas-roles { margin-top: 20px; }

  /* Sidekick: the same block in one column, with one spacing pattern: 16px inside a group, 32px between groups.
     Hermione's photo runs full width between the paragraph and the quote about her. */
  .pm-sidekick { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 64px var(--e-gutter, 5.3vw); }
  .pm-sidekick-copy { display: contents; }
  .pm-sidekick-logo { order: 1; }
  .pm-sidekick-logo img { width: 140px; }
  .editorial .pm-page .pm-sidekick h2 { order: 2; margin-top: 24px; font-size: 38px; }
  .pm-sidekick-copy > p { order: 3; margin-top: 16px; font-size: 16px; line-height: 1.6; }
  .pm-sidekick-portrait { order: 4; justify-self: auto; width: 100%; margin-top: 32px; }
  .pm-sidekick-portrait img { aspect-ratio: 4 / 3; border-radius: 20px; object-position: 50% 22%; }
  .pm-sidekick-portrait figcaption { margin-top: 12px; }
  .pm-sidekick-quote { order: 5; margin-top: 32px; padding: 0; border: 0; }
  .editorial .pm-page .pm-sidekick-quote blockquote p { font-size: 22px; }
  .pm-sidekick-quote .pm-sidekick-cite { margin-top: 12px; }
  .pm-sidekick-actions { order: 6; gap: 16px 24px; margin-top: 32px; }

  .pm-paths-head p { margin-top: 16px; font-size: 16px; }
  .pm-paths-grid { gap: 10px; margin-top: 28px; }
  .pm-path { padding: 20px; border-radius: 20px; }
  .pm-path small { font-size: 12px; }
  .pm-path strong { margin: 10px 0 6px; font-size: 22px; }
  .pm-path p { font-size: 15px; }
  /* The whole card is the link, so phones show an arrow instead of repeating the link text. */
  .pm-path { position: relative; padding-right: 48px; }
  .pm-path > span { display: none; }
  .pm-path::after { position: absolute; top: 20px; right: 20px; content: '↗'; font-size: 16px; font-weight: 600; }
  .pm-register { gap: 24px; margin-top: 36px; padding: 26px 20px; border-radius: 24px; }
  .editorial .pm-page .pm-register-copy h3 { font-size: 30px; }
  .pm-register-copy p { margin-top: 10px; font-size: 16px; }
  .pm-fineprint { margin-top: 28px; }
}

/* Laptop heights: keep the pinned scene, just tighter. */
@media (max-height: 820px) and (min-width: 601px) {
  .editorial .pm-connect-headline { font-size: clamp(46px, 5.2vw, 88px); }
  .pm-connect-copy .pm-kicker { margin-bottom: 10px; }
  .pm-connect-map { height: clamp(250px, 44vh, 340px); }
  .pm-connect-inputs, .pm-connect-outputs { gap: 10px; }
  .pm-node { min-height: 48px; padding: 10px 16px; font-size: 16px; }
  .pm-node-icon { width: 28px; height: 28px; font-size: 14px; }
  .pm-connect-hub { max-width: 210px; }
  .pm-connect-bottom { margin-top: 12px; }
}

@media (max-height: 720px) and (min-width: 601px) {
  .pm-connect.is-enhanced .pm-connect-frame { min-height: 500px; }
  .editorial .pm-connect-headline { font-size: 52px; }
  .pm-connect-map { min-height: 210px; }
  .pm-connect-hub { max-width: 160px; }
  .pm-node { min-height: 44px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-aurora, .pm-hub-face::before, .pm-icon-pme, .pm-icons-ai, .pm-link, .pm-link-flow, .pm-caret, .pm-dot, .pm-line > span, .pm-in, .pm-chat-card { animation: none !important; }
  .pm-connect.is-enhanced, .pm-rail.is-enhanced { height: auto; }
  .pm-connect.is-enhanced .pm-connect-frame, .pm-rail.is-enhanced .pm-rail-frame { position: relative; height: auto; }
  .pm-connection-signal { display: none !important; }
}