/* ==========================================================================
   PRICING HERO — copy column, floating Quorel People dashboard + plan estimate
   card, and the benefits strip. Loaded by pricing.html only.

   The visual is drawn in em: .ph-stage sets font-size from the column's width
   (cqi), so the dashboard and the plan card scale as one composition at every
   viewport instead of reflowing. Motion wrappers are split so transforms never
   collide: *-pos (entrance) › .ph-float (idle bob) › .ph-par (pointer
   parallax) › .ph-dash / .ph-plan (static tilt).
   ========================================================================== */

.ph-hero {
  --ph-ease: cubic-bezier(.22, 1, .36, 1);
  --ph-blue: #146bff; --ph-blue-2: #1677ff;
  --ph-navy: #071333; --ph-muted: #596b91;
  --ph-purple: #6d28ff; --ph-green: #15b86a; --ph-yellow: #f4b72a;
  position: relative; isolation: isolate;
  overflow-x: clip;
  padding: clamp(28px, 5.2vh, 76px) 0 clamp(36px, 5vh, 64px);
}
.ph-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ph-glow { position: absolute; border-radius: 50%; }
.ph-glow--a { width: 60vw; height: 50vw; left: -22vw; top: -24vw; background: radial-gradient(closest-side, rgb(20 107 255 / 7%), transparent); }
.ph-glow--b { width: 40vw; height: 34vw; left: -12vw; bottom: -14vw; background: radial-gradient(closest-side, rgb(21 184 106 / 6%), transparent); }

/* Pricing gets its active underline here, scoped to this page's sheet. */
@media (min-width: 901px) {
  .nav-links a[aria-current='page'] { position: relative; }
  .nav-links a[aria-current='page']::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -12px; height: 2px; border-radius: 2px; background: var(--accent); }
}
.ph-nav-cta { gap: 8px; }
.ph-nav-cta svg { width: 16px; height: 16px; transition: transform 300ms var(--ph-ease, ease); }
.ph-nav-cta:hover svg { transform: translateX(3px); }

/* --- Layout -------------------------------------------------------------- */
.ph-grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); align-items: center; gap: clamp(16px, 1.6vw, 36px); }

/* --- Copy ---------------------------------------------------------------- */
.ph-copy { position: relative; z-index: 2; }
.ph-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ph-blue); }
.ph-eyebrow::after { content: ''; width: 44px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, var(--ph-blue), rgb(20 107 255 / 25%)); }
.ph-title {
  margin: clamp(18px, 2.2vh, 28px) 0 0;
  font-size: clamp(40px, 3.85vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -.05em;
  color: var(--ph-navy);
}
:root[data-theme='dark'] .ph-title { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ph-title { color: var(--ink); } }
.ph-line { display: block; white-space: nowrap; }
.ph-grad { background: linear-gradient(95deg, #146bff 0%, #2f5bff 55%, #6d3aff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.ph-lede { margin: clamp(18px, 2.4vh, 28px) 0 0; max-width: 620px; font-size: clamp(16px, 1.08vw, 20px); line-height: 1.6; color: var(--ph-muted); }
:root[data-theme='dark'] .ph-lede { color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ph-lede { color: var(--ink-2); } }

.ph-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(24px, 3.4vh, 38px); }
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 0 28px; border-radius: 14px;
  font-size: clamp(16px, 1.05vw, 19px); font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: transform 300ms var(--ph-ease), box-shadow 300ms var(--ph-ease), border-color 300ms ease, background-color 300ms ease;
}
.ph-btn svg { width: 22px; height: 22px; flex-shrink: 0; transition: transform 300ms var(--ph-ease); }
.ph-btn--primary { color: #fff; background: linear-gradient(180deg, #1f74ff 0%, #0f62f5 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 10px 22px -10px rgb(20 107 255 / 70%); }
.ph-btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 16px 30px -12px rgb(20 107 255 / 75%); }
.ph-btn--primary:hover svg { transform: translateX(5px); }
.ph-btn--ghost { color: var(--ph-navy); background: #fff; border: 1px solid #dbe3f1; box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
.ph-btn--ghost svg { width: 24px; height: 24px; }
.ph-btn--ghost:hover { color: var(--ph-navy); transform: translateY(-2px); border-color: #b9c8e4; box-shadow: 0 10px 22px -14px rgb(15 35 80 / 35%); }
.ph-btn:focus-visible { outline: 2px solid var(--ph-blue); outline-offset: 3px; }

.ph-trust { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: clamp(22px, 3vh, 32px) 0 0; padding: 0; list-style: none; }
.ph-trust li { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(14px, .92vw, 16.5px); font-weight: 500; color: #33405e; }
:root[data-theme='dark'] .ph-trust li { color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ph-trust li { color: var(--ink-2); } }
.ph-trust svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ph-blue); }

/* --- Visual -------------------------------------------------------------- */
/* Bleeds past the content column toward the viewport edge, as in the comp;
   the section's overflow-x: clip keeps that from ever scrolling sideways. */
.ph-visual {
  position: relative; container-type: inline-size; min-width: 0;
  margin-right: min(0px, calc(28px - var(--gutter) - (100vw - var(--shell)) / 2));
}
.ph-stage { position: relative; font-size: calc(100cqi / 95); height: 57em; color: #17203c; }

.ph-art { position: absolute; inset: 0; pointer-events: none; }
.ph-shape { position: absolute; border-radius: 50%; will-change: transform; }
.ph-shape--blue { left: 6em; top: -3em; width: 76em; height: 62em; background: radial-gradient(closest-side, rgb(20 107 255 / 20%), rgb(20 107 255 / 7%) 58%, transparent); animation: ph-drift 16s ease-in-out infinite alternate; }
.ph-shape--green { left: 26em; top: -6.5em; width: 26em; height: 15em; background: radial-gradient(closest-side, rgb(21 184 106 / 34%), rgb(21 184 106 / 10%) 60%, transparent); animation: ph-drift-2 14s ease-in-out infinite alternate; }
.ph-shape--yellow { left: -5em; top: 22em; width: 17em; height: 26em; background: radial-gradient(closest-side, rgb(244 183 42 / 34%), rgb(21 184 106 / 12%) 60%, transparent); animation: ph-drift-2 13s ease-in-out -4s infinite alternate; }
.ph-shape--sun { left: 60em; top: -5em; width: 22em; height: 18em; background: radial-gradient(closest-side, rgb(244 183 42 / 34%), rgb(244 183 42 / 8%) 60%, transparent); animation: ph-drift 15s ease-in-out -6s infinite alternate; }
.ph-shape--violet { left: 78em; top: 6em; width: 24em; height: 46em; background: radial-gradient(closest-side, rgb(109 40 255 / 16%), transparent); animation: ph-drift-2 18s ease-in-out -2s infinite alternate; }
.ph-rings { position: absolute; left: -3em; top: -3em; width: 100em; height: 60em; opacity: .9; animation: ph-drift 18s ease-in-out infinite alternate; }
.ph-floor { position: absolute; left: 2em; top: 44em; width: 84em; height: 12em; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 95%), rgb(255 255 255 / 0%)); }
@keyframes ph-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-1.6em, 1.2em, 0) scale(1.04); } }
@keyframes ph-drift-2 { from { transform: translate3d(0, 0, 0) scale(1); opacity: .9; } to { transform: translate3d(1.4em, -1em, 0) scale(1.06); opacity: 1; } }

.ph-dash-pos { position: absolute; left: 0; top: 3em; width: 65em; z-index: 1; }
.ph-plan-pos { position: absolute; left: 63.6em; top: 4.2em; width: 30.6em; z-index: 2; }
.ph-float--dash { animation: ph-float-dash 6s ease-in-out infinite; }
.ph-float--plan { animation: ph-float-plan 5s ease-in-out -2.2s infinite; }
@keyframes ph-float-dash { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } }
@keyframes ph-float-plan { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } }
.ph-par { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px; transform: perspective(1600px) translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 700ms var(--ph-ease); }
.ph-visual.is-tracking .ph-par { transition-duration: 300ms; }

/* Shared glass surface */
.ph-dash, .ph-plan {
  background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(255 255 255 / 88%));
  border: 1px solid rgb(255 255 255 / 95%);
  box-shadow: 0 0 0 1px rgb(20 40 90 / 5%), 0 3em 6em -2.4em rgb(30 50 110 / 28%), 0 1em 2em -1em rgb(30 50 110 / 12%), inset 0 1px 0 #fff;
}

/* Main dashboard */
.ph-dash { border-radius: 2em; overflow: hidden; transform: perspective(220em) rotateY(-8deg) rotateX(3deg) rotate(-2deg); transform-origin: 60% 50%; }
.pd-top { display: flex; align-items: center; gap: 1.4em; height: 6.6em; padding: 0 2.2em; border-bottom: 1px solid #eef1f8; }
.pd-logo { display: inline-flex; align-items: center; gap: .45em; font-size: 1.9em; font-weight: 700; letter-spacing: -.04em; color: #0b1736; }
.pd-logo img { width: 1.15em; height: 1.15em; }
.pd-search { display: flex; align-items: center; gap: .7em; width: 23em; height: 3.5em; margin-left: auto; padding: 0 1em; border: 1px solid #e5eaf4; border-radius: 1em; background: #f8faff; font-size: 1em; color: #8590a9; }
.pd-search svg { width: 1.3em; height: 1.3em; flex-shrink: 0; }
.pd-search .pd-kbd { margin-left: auto; }
.pd-avatar { width: 3.8em; height: 3.8em; border-radius: 50%; box-shadow: 0 0 0 .2em #fff, 0 .3em .8em rgb(15 23 42 / 18%); }
.pd-body { display: grid; grid-template-columns: 12.4em minmax(0, 1fr); padding: 1.6em 2em 2em 1.2em; }
.pd-nav { margin: 0; padding: 0 1em 0 0; list-style: none; display: grid; gap: .3em; align-content: start; border-right: 1px solid #eef1f8; }
.pd-nav li { display: flex; align-items: center; gap: .8em; padding: .85em .9em; border-radius: .8em; font-size: 1.05em; color: #3d4a68; white-space: nowrap; }
.pd-nav li svg { width: 1.35em; height: 1.35em; flex-shrink: 0; color: #66728c; }
.pd-nav li.is-active { color: var(--ph-blue); font-weight: 600; background: #e9f1ff; }
.pd-nav li.is-active svg { color: var(--ph-blue); }
.pd-main { padding-left: 1.8em; min-width: 0; }
.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.pd-head b { display: block; font-size: 1.95em; font-weight: 700; letter-spacing: -.035em; color: #0b1736; }
.pd-head small { display: block; margin-top: .25em; font-size: 1.02em; color: #66728c; }
.pd-range { display: inline-flex; align-items: center; gap: .6em; padding: .65em 1em; border: 1px solid #e5eaf4; border-radius: .8em; font-size: 1em; color: #33405e; white-space: nowrap; }
.pd-range svg { width: 1.2em; height: 1.2em; }
.pd-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin-top: 1.6em; }
.pd-metric { display: flex; gap: .8em; align-items: flex-start; padding: 1.1em 1em; border: 1px solid #edf0f7; border-radius: 1.2em; background: #fff; box-shadow: 0 .4em 1em -.6em rgb(15 30 70 / 14%); }
.pd-ico { display: grid; place-items: center; width: 3.2em; height: 3.2em; flex-shrink: 0; border-radius: .9em; color: var(--c); background: var(--t); }
.pd-ico svg { width: 1.7em; height: 1.7em; }
.pd-metric b { display: block; font-size: 2em; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: #0b1736; }
.pd-metric small { display: block; font-size: .82em; line-height: 1.25; color: #66728c; }
.pd-up, .pd-down { display: inline-block; margin-top: .45em; padding: .2em .5em; border-radius: .5em; font-style: normal; font-size: .8em; font-weight: 700; }
.pd-up { color: #12924f; background: #e3f7ea; }
.pd-down { color: #c2410c; background: #fff1e0; }
.pd-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2em; margin-top: 1.4em; }
.pd-card { padding: 1.4em 1.4em 1.2em; border: 1px solid #edf0f7; border-radius: 1.3em; background: #fff; box-shadow: 0 .4em 1em -.6em rgb(15 30 70 / 14%); }
.pd-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.pd-card-head b { font-size: 1.15em; font-weight: 700; color: #0b1736; }
.pd-up--pill { margin: 0; }
.pd-plot { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); height: 14.4em; }
.pd-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 2.1em; font-size: .78em; color: #98a2b8; }
.pd-bars { position: relative; display: flex; align-items: flex-end; justify-content: space-around; gap: .8em; padding-bottom: 0; background: repeating-linear-gradient(180deg, #f0f3f9 0 1px, transparent 1px 3.9em); background-size: 100% calc(100% - 1.9em); background-repeat: no-repeat; }
.pd-bars > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .7em; height: 100%; }
.pd-bars i { display: block; width: 2.6em; height: calc(var(--h) * 11.4em); border-radius: .55em .55em .15em .15em; background: linear-gradient(180deg, #2f7bff 0%, #8db7ff 100%); box-shadow: 0 .4em .9em -.3em rgb(20 107 255 / 40%); transform-origin: bottom; }
.pd-bars > div:last-of-type i { background: linear-gradient(180deg, #1466ff 0%, #6d9dff 100%); }
.pd-bars small { font-size: .8em; color: #7c87a0; }
.pd-trend { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 1.9em); overflow: visible; pointer-events: none; }
.pd-trend path { fill: none; stroke: #7c5cff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; opacity: .75; }
.pd-mod { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; align-items: center; gap: .9em; padding: .8em 0; font-size: 1em; color: #1f2a47; white-space: nowrap; }
.pd-mod + .pd-mod { border-top: 1px solid #f0f2f8; }
.pd-mod em { font-style: normal; font-size: .78em; font-weight: 600; color: #12924f; background: #e3f7ea; padding: .3em .7em; border-radius: .5em; }
.pd-mod-ico, .pp-mod-ico { position: relative; display: block; width: 2.3em; height: 2.3em; border-radius: .6em; background: var(--c); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 .3em .6em -.3em var(--c); }
.pd-mod-ico::after, .pp-mod-ico::after { content: ''; position: absolute; inset: 30% 30%; border: .16em solid #fff; border-radius: .2em; }

/* Plan estimate card */
.ph-plan { border-radius: 2em; padding: 2.3em 2.3em 2.1em; transform: perspective(180em) rotateY(-7deg) rotate(-1.6deg); transform-origin: 30% 50%; }
.pp-title { display: block; font-size: 1.95em; font-weight: 700; letter-spacing: -.035em; color: #0b1736; }
.pp-label { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.1em; font-size: 1.1em; color: #4b587a; }
.pp-label i { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border: 1.5px solid currentColor; border-radius: 50%; font-size: .75em; font-style: normal; font-weight: 700; opacity: .7; }
.pp-size { display: flex; align-items: center; gap: 1.6em; margin-top: .7em; padding-bottom: 1.2em; border-bottom: 1px solid #edf0f7; }
.pp-stepper { display: grid; grid-template-columns: 3.6em 1fr 3.6em; align-items: center; width: 16.5em; height: 4.4em; border: 1px solid #dfe6f3; border-radius: 1em; background: #fff; }
.pp-stepper span { display: grid; place-items: center; height: 100%; font-size: 2em; font-weight: 500; color: var(--ph-blue); line-height: 1; }
.pp-stepper span:first-child { border-right: 1px solid #edf0f7; }
.pp-stepper span:last-child { border-left: 1px solid #edf0f7; }
.pp-stepper b { text-align: center; font-size: 1.85em; font-weight: 700; color: #0b1736; }
.pp-size small { font-size: 1.1em; color: #4b587a; }
.pp-sel { display: flex; align-items: center; justify-content: space-between; margin-top: .4em; }
.pp-sel small { display: inline-flex; align-items: center; gap: .3em; margin-top: 1.1em; font-size: 1em; color: #4b587a; }
.pp-sel small svg { width: 1.2em; height: 1.2em; }
.pp-mods { margin: .7em 0 0; padding: 0; list-style: none; }
.pp-mods li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: .55em 0; font-size: 1.15em; font-weight: 500; color: #1f2a47; white-space: nowrap; }
.pp-mods .pp-mod-ico { width: 2.1em; height: 2.1em; }
.pp-check { position: relative; width: 1.6em; height: 1.6em; border: 1.5px solid #cbd4e4; border-radius: .4em; background: #fff; }
.pp-check.is-on { border-color: var(--ph-blue); background: var(--ph-blue); }
.pp-check.is-on::after { content: ''; position: absolute; left: 32%; top: 14%; width: 30%; height: 52%; border: solid #fff; border-width: 0 .16em .16em 0; transform: rotate(45deg); }
.pp-cost { margin-top: 1.1em; padding: 1.3em 1.5em; border-radius: 1.2em; background: linear-gradient(180deg, #eef4ff, #e8f0ff); }
.pp-cost-label { display: inline-flex; align-items: center; gap: .5em; font-size: 1.1em; font-weight: 600; color: var(--ph-blue); }
.pp-cost-label i { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border: 1.5px solid currentColor; border-radius: 50%; font-size: .72em; font-style: normal; }
.pp-cost > div { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: .4em; }
.pp-cost b { font-size: 2.9em; font-weight: 700; letter-spacing: -.04em; color: #0b1736; }
.pp-cost small { font-size: 1em; line-height: 1.4; color: #4b587a; text-align: right; }
.pp-cta {
  display: flex; align-items: center; justify-content: center; gap: .6em; height: 3.6em; margin-top: 1.2em;
  border-radius: .85em; font-size: 1.3em; font-weight: 600; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #1f74ff, #0f62f5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 .8em 1.6em -.8em rgb(20 107 255 / 70%);
  transition: box-shadow 300ms var(--ph-ease), filter 300ms ease;
}
.pp-cta svg { width: 1.1em; height: 1.1em; transition: transform 300ms var(--ph-ease); }
.pp-cta:hover { color: #fff; filter: brightness(1.06); }
.pp-cta:hover svg { transform: translateX(4px); }
.pp-cta:focus-visible { outline: 2px solid var(--ph-blue); outline-offset: 3px; }

/* --- Benefits strip ------------------------------------------------------ */
.ph-benefits {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(28px, 4.2vh, 52px) 0 0; padding: clamp(22px, 2.6vh, 32px) 0; list-style: none;
  border-radius: 24px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 1px 2px rgb(15 23 42 / 3%), 0 18px 40px -26px rgb(20 40 90 / 22%);
  position: relative; z-index: 3;
}
.ph-benefits li { display: flex; align-items: center; gap: 22px; padding: 4px clamp(18px, 2.2vw, 44px); min-width: 0; }
.ph-benefits li + li { border-left: 1px solid var(--line); }
.ph-b-ico { display: grid; place-items: center; width: clamp(52px, 3.6vw, 66px); aspect-ratio: 1; flex-shrink: 0; border-radius: 16px; color: var(--c); background: var(--t); }
.ph-b-ico svg { width: 52%; height: 52%; }
.ph-benefits h2 { margin: 0; font-size: clamp(15px, 1.02vw, 19px); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
.ph-benefits p { margin: 4px 0 0; font-size: clamp(13px, .86vw, 15.5px); line-height: 1.5; color: var(--ink-2); }

/* --- Entrance ------------------------------------------------------------ */
.ph-in { animation: ph-up 760ms var(--ph-ease) backwards; animation-delay: calc(80ms + var(--i) * 90ms); }
.ph-eyebrow.ph-in { --y: 15px; } .ph-title.ph-in { --y: 25px; } .ph-lede.ph-in { --y: 20px; } .ph-actions.ph-in { --y: 15px; } .ph-trust.ph-in { --y: 10px; }
@keyframes ph-up { from { opacity: 0; transform: translateY(var(--y, 16px)); } }
.ph-dash-pos { animation: ph-dash-in 900ms var(--ph-ease) 260ms backwards; }
.ph-plan-pos { animation: ph-plan-in 860ms var(--ph-ease) 560ms backwards; }
.ph-art { animation: ph-fade 1400ms ease 100ms backwards; }
@keyframes ph-dash-in { from { opacity: 0; transform: translateY(25px) scale(.96); } }
@keyframes ph-plan-in { from { opacity: 0; transform: translateY(30px); } }
@keyframes ph-fade { from { opacity: 0; } }
.pd-metric { animation: ph-up 640ms var(--ph-ease) backwards; animation-delay: calc(700ms + var(--d) * 80ms); --y: 12px; }
.pd-bars i { animation: ph-bar 900ms var(--ph-ease) backwards; animation-delay: calc(900ms + var(--d) * 70ms); }
.pd-trend path { animation: ph-draw 1400ms var(--ph-ease) 1250ms backwards; }
.pd-up, .pd-down, .pd-mod em { animation: ph-fade 600ms ease 1300ms backwards; }
.pd-mod { animation: ph-up 600ms var(--ph-ease) backwards; animation-delay: calc(1000ms + var(--d) * 80ms); --y: 8px; }
.ph-benefits { animation: ph-up 800ms var(--ph-ease) 620ms backwards; --y: 18px; }
@keyframes ph-bar { from { transform: scaleY(0); } }
@keyframes ph-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pd-trend path { stroke-dashoffset: 0; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1600px) {
  .ph-trust { gap: 10px 24px; }
  .ph-benefits li { gap: 16px; padding-inline: clamp(16px, 1.6vw, 28px); }
  .ph-benefits p { font-size: clamp(12.5px, .84vw, 14px); }
}
@media (max-width: 1100px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 48px); }
  .ph-copy { max-width: 720px; }
  .ph-title { font-size: clamp(40px, 6.4vw, 60px); }
  .ph-visual { margin-right: 0; width: 100%; max-width: 920px; margin-inline: auto; }
  .ph-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .ph-benefits li:nth-child(3) { border-left: 0; }
}
@media (max-width: 700px) {
  .ph-title { font-size: clamp(36px, 10.6vw, 48px); }
  .ph-line { white-space: normal; }
  .ph-actions { flex-direction: column; }
  .ph-btn { width: 100%; }
  .ph-trust { flex-direction: column; gap: 10px; }
  /* The dashboard alone fills the width; the plan card drops into the flow under it. */
  .ph-stage { height: auto; font-size: calc(100cqi / 67); display: flex; flex-direction: column; align-items: center; }
  .ph-dash-pos { position: relative; left: auto; top: auto; margin-top: 1em; }
  .ph-dash { transform: perspective(220em) rotateY(-5deg) rotate(-1deg); }
  .ph-plan-pos { position: relative; left: auto; top: auto; width: 100%; max-width: 380px; margin-top: 3.5em; font-size: min(12px, calc(100cqi / 31.5)); }
  .ph-plan { transform: none; }
  .ph-shape--violet, .ph-shape--sun { display: none; }
  .ph-benefits { grid-template-columns: minmax(0, 1fr); padding: 8px 0; row-gap: 0; }
  .ph-benefits li { padding: 18px 20px; }
  .ph-benefits li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ph-hero *, .ph-hero *::before, .ph-hero *::after { animation: none !important; }
  .ph-par { transform: none !important; transition: none; }
  .ph-btn:hover, .ph-btn:hover svg, .pp-cta:hover svg, .ph-nav-cta:hover svg { transform: none; }
}