/* ==========================================================================
   PRICING TRIAL BAND — "Forty-five days…" panel: copy, four trial points and a
   floating payroll-timeline visual. Loaded by pricing.html only.

   Same em-scaling approach as the pricing hero: .pt-stage's font-size follows
   its column width, so the visual scales as one composition. The entrance
   waits for .is-in, set once by pricing-hero.js when the band is first seen.
   ========================================================================== */
.pt-band {
  --pt-ease: cubic-bezier(.22, 1, .36, 1);
  --pt-blue: #146bff; --pt-green: #12b76a; --pt-yellow: #f5b72b; --pt-purple: #7c3aed;
  --pt-navy: #0b1533; --pt-muted: #596b91;
  position: relative; overflow-x: clip;
  padding: clamp(12px, 2vh, 28px) 0 clamp(40px, 6vh, 80px);
}
.pt-shell {
  position: relative; isolation: isolate;
  width: min(100% - 2 * clamp(12px, 1.8vw, 32px), 1760px); margin-inline: auto;
  padding: clamp(28px, 2.6vw, 48px);
  border-radius: clamp(24px, 2vw, 34px);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgb(100 140 220 / 10%);
  box-shadow: 0 20px 80px rgb(30 70 150 / 8%), inset 0 1px 0 #fff;
}
.pt-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pt-blob { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.pt-blob--blue { width: 34%; height: 70%; left: -8%; top: -30%; background: rgb(20 107 255 / 10%); animation: pt-blob 16s ease-in-out infinite alternate; }
.pt-blob--mint { width: 26%; height: 60%; left: 30%; bottom: -40%; background: rgb(18 183 106 / 9%); animation: pt-blob 14s ease-in-out -5s infinite alternate; }
@keyframes pt-blob { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18px, 12px, 0) scale(1.05); } }

.pt-grid { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 27fr) minmax(0, 39fr); align-items: center; gap: clamp(20px, 2.4vw, 48px); }

/* --- Copy ---------------------------------------------------------------- */
.pt-copy { position: relative; z-index: 2; }
.pt-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #eaf3ff; border: 1px solid rgb(20 107 255 / 8%); color: var(--pt-blue); font-size: clamp(14px, .9vw, 16px); font-weight: 600; transition: background-color 250ms ease; }
.pt-badge:hover { background: #e0edff; }
.pt-badge::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px rgb(18 183 106 / 18%); animation: pt-dot 2.5s ease-in-out infinite; }
@keyframes pt-dot { 50% { transform: scale(1.15); opacity: .65; } }
.pt-title { margin: clamp(20px, 2.6vh, 32px) 0 0; font-size: clamp(32px, 3.15vw, 74px); font-weight: 700; line-height: 1.02; letter-spacing: -.05em; color: var(--pt-navy); }
.pt-title > span { display: block; white-space: nowrap; }
.pt-grad { background: linear-gradient(90deg, #0878ff 0%, #1265ff 55%, #4a35e8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.pt-lede { margin: clamp(18px, 2.6vh, 30px) 0 0; max-width: 600px; font-size: clamp(15.5px, 1.06vw, 20px); line-height: 1.6; color: var(--pt-muted); }
.pt-cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: clamp(54px, 3.4vw, 64px); margin-top: clamp(24px, 3.4vh, 38px); padding: 0 clamp(24px, 1.7vw, 32px);
  border-radius: 14px; color: #fff; font-size: clamp(16px, 1.04vw, 19px); font-weight: 600; text-decoration: none; white-space: nowrap;
  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%);
  transition: transform 260ms var(--pt-ease), box-shadow 260ms var(--pt-ease), filter 260ms ease;
}
.pt-cta svg { width: 22px; height: 22px; transition: transform 260ms var(--pt-ease); }
.pt-cta:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 16px 30px -12px rgb(20 107 255 / 75%); }
.pt-cta:hover svg { transform: translateX(5px); }
.pt-cta:active { transform: translateY(0) scale(.98); transition-duration: 120ms; }
.pt-cta:focus-visible { outline: 2px solid var(--pt-blue); outline-offset: 3px; }

/* --- Trial points -------------------------------------------------------- */
.pt-points { position: relative; z-index: 2; display: grid; gap: clamp(22px, 3.6vh, 40px); margin: 0; padding: 0; list-style: none; }
.pt-point { display: flex; align-items: center; gap: clamp(16px, 1.3vw, 26px); }
.pt-ico { display: grid; place-items: center; width: clamp(52px, 3.9vw, 76px); aspect-ratio: 1; flex-shrink: 0; border-radius: clamp(14px, 1vw, 18px); color: var(--c); background: var(--t); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%); transition: transform 260ms var(--pt-ease), box-shadow 260ms ease; }
.pt-ico svg { width: 48%; height: 48%; transition: transform 260ms var(--pt-ease); }
.pt-point--people { --c: #146bff; --t: #e8f0ff; }
.pt-point--card { --c: #12a660; --t: #e4f8ee; }
.pt-point--shield { --c: #e6a100; --t: #fff4d9; }
.pt-point--lock { --c: #7c3aed; --t: #f1eaff; }
.pt-point b { display: block; font-size: clamp(15px, 1.04vw, 20px); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--pt-navy); }
.pt-point small { display: block; margin-top: 5px; font-size: clamp(13.5px, .94vw, 17.5px); line-height: 1.4; color: var(--pt-muted); }
.pt-point:hover .pt-ico { transform: translateY(-2px); }
.pt-point--people:hover .pt-ico svg { transform: translateY(-1.5px); }
.pt-point--card:hover .pt-ico svg { transform: translateX(2px); }
.pt-point--shield:hover .pt-ico svg { transform: scale(1.06); }
.pt-point--lock:hover .pt-ico { box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 0 0 5px rgb(124 58 237 / 9%), 0 8px 18px -8px rgb(124 58 237 / 45%); }

/* --- Visual -------------------------------------------------------------- */
.pt-visual { position: relative; container-type: inline-size; min-width: 0; margin-right: calc(-1 * clamp(10px, 1.6vw, 40px)); }
.pt-stage { position: relative; height: 62em; font-size: calc(100cqi / 72); color: #17203c; }
.pt-art { position: absolute; inset: 0; pointer-events: none; }
.pt-shape { position: absolute; border-radius: 50%; will-change: transform; }
.pt-shape--green { left: 62em; top: 7em; width: 15em; height: 27em; background: radial-gradient(closest-side, rgb(18 183 106 / 50%), rgb(52 211 153 / 18%) 62%, transparent); animation: pt-drift 15s ease-in-out infinite alternate; }
.pt-shape--mint { left: 11em; top: 0; width: 15em; height: 11em; background: radial-gradient(closest-side, rgb(110 231 183 / 50%), transparent); animation: pt-drift 13s ease-in-out -4s infinite alternate; }
.pt-shape--violet { left: 1em; top: 30em; width: 10em; height: 15em; background: radial-gradient(closest-side, rgb(167 139 250 / 42%), transparent); animation: pt-drift 17s ease-in-out -7s infinite alternate; }
.pt-shape--lilac { left: 60em; top: 36em; width: 15em; height: 13em; background: radial-gradient(closest-side, rgb(167 139 250 / 40%), transparent); animation: pt-drift 14s ease-in-out -2s infinite alternate; }
.pt-shape--yellow { left: -1em; top: 41em; width: 22em; height: 22em; background: radial-gradient(closest-side, rgb(245 183 43 / 42%), rgb(163 230 53 / 16%) 60%, transparent); animation: pt-drift 16s ease-in-out -9s infinite alternate; }
@keyframes pt-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(1.2em, -1em, 0) scale(1.05); } }
.pt-rings { position: absolute; inset: 0; transition: transform 900ms var(--pt-ease); }
.pt-ring { position: absolute; overflow: visible; }
.pt-ring--blue { left: 1em; top: 2.5em; width: 66em; height: 50em; animation: pt-spin 28s linear infinite; }
.pt-ring--green { left: 3em; top: 5em; width: 62em; height: 50em; transform: rotate(14deg); animation: pt-spin-2 32s linear infinite; }
.pt-ring--yellow { left: 42em; top: 0; width: 26em; height: 16em; animation: pt-sway 22s ease-in-out infinite alternate; }
@keyframes pt-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pt-spin-2 { from { transform: rotate(14deg); } to { transform: rotate(-346deg); } }
@keyframes pt-sway { from { transform: rotate(0); } to { transform: rotate(6deg) translate3d(-.6em, .4em, 0); } }

.pt-dash-pos { position: absolute; left: 4em; top: 9em; width: 65em; z-index: 1; }
.pt-float { animation: pt-float 7s ease-in-out infinite; }
@keyframes pt-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(0, -8px, 0) rotate(.5deg); } }
.pt-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(--pt-ease); }
.pt-visual.is-tracking .pt-par, .pt-visual.is-tracking .pt-rings { transition-duration: 300ms; }
.pt-dash {
  padding: 3em 3em 3.2em; border-radius: 2.4em;
  background: rgb(255 255 255 / 86%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgb(255 255 255 / 85%);
  box-shadow: 0 0 0 1px rgb(20 40 90 / 5%), 0 2.6em 7em -1.6em rgb(30 70 150 / 22%), inset 0 1px 0 rgb(255 255 255 / 90%);
  transform: perspective(200em) rotateY(-9deg) rotateX(3deg) rotate(-3.6deg); transform-origin: 40% 50%;
}
.pt-span { display: inline-flex; align-items: center; gap: 1.1em; padding: 1em 1.8em 1em 1em; border-radius: 1.5em; background: #fff; border: 1px solid #edf1f8; box-shadow: 0 .8em 2em -1em rgb(30 60 130 / 22%); }
.pt-cal { display: grid; place-items: center; width: 3.9em; height: 3.9em; border-radius: 1.1em; color: var(--pt-blue); background: #e8f0ff; }
.pt-cal svg { width: 2.1em; height: 2.1em; }
.pt-span b { font-size: 2.1em; font-weight: 700; letter-spacing: -.03em; color: var(--pt-navy); }
.pt-span .pt-span-hi { color: var(--pt-blue); }
.pt-arrow { display: grid; place-items: center; width: 3.2em; height: 2.6em; border-radius: .9em; color: var(--pt-blue); background: #eef4ff; }
.pt-arrow svg { width: 1.7em; height: 1.7em; }
.pt-timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.4em; }
.pt-track { position: absolute; left: -1.5em; right: -2.5em; top: 1.6em; height: .45em; border-radius: 1em; overflow: hidden; }
.pt-track i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(20 107 255 / 0%) 0%, #146bff 14%, #22c4d8 40%, #12b76a 56%, #a3d93a 72%, #f5b72b 88%, rgb(245 183 43 / 0%) 100%); transform-origin: left; }
.pt-stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pt-node { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--c); color: #fff; font-size: 1.55em; font-weight: 700; box-shadow: 0 0 0 .35em #fff, 0 0 0 .6em color-mix(in srgb, var(--c) 16%, transparent), 0 .4em .9em -.2em color-mix(in srgb, var(--c) 60%, transparent); }
.pt-stop b { margin-top: 1.1em; font-size: 1.75em; font-weight: 650; letter-spacing: -.02em; color: var(--pt-navy); }
.pt-stop small { margin-top: .3em; font-size: 1.45em; color: var(--pt-muted); }
.pt-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6em; margin-top: 3.2em; }
.pt-metric { display: flex; align-items: center; gap: 1.2em; padding: 1.6em; border-radius: 1.8em; background: #fff; border: 1px solid #edf1f8; box-shadow: 0 1em 2.4em -1.2em rgb(30 60 130 / 24%), inset 0 1px 0 #fff; }
.pt-m-ico { display: grid; place-items: center; width: 4.4em; height: 4.4em; flex-shrink: 0; border-radius: 1.2em; color: var(--c); background: var(--t); }
.pt-m-ico svg { width: 2.2em; height: 2.2em; }
.pt-m-ico--solid svg { width: 2.6em; height: 2.6em; }
.pt-metric b { display: block; font-size: 2.5em; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: var(--pt-navy); white-space: nowrap; }
.pt-metric small { display: block; margin-top: .2em; font-size: 1.4em; color: var(--pt-muted); white-space: nowrap; }

.pt-done-pos { position: absolute; left: 37.5em; top: 47.5em; width: 29em; z-index: 2; }
.pt-done-float { animation: pt-float-done 5s ease-in-out -1.6s infinite; }
@keyframes pt-float-done { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
.pt-done {
  display: flex; align-items: center; gap: 1.5em; padding: 1.8em 2.2em; border-radius: 1.8em;
  background: rgb(255 255 255 / 92%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 90%);
  box-shadow: 0 0 0 1px rgb(20 40 90 / 5%), 0 1.8em 4em -1.6em rgb(30 70 150 / 28%), inset 0 1px 0 #fff;
  transform: rotate(-3.5deg); transition: transform 300ms var(--pt-ease), box-shadow 300ms var(--pt-ease);
}
.pt-done:hover { transform: rotate(-3.5deg) translateY(-4px); box-shadow: 0 0 0 1px rgb(20 40 90 / 5%), 0 2.4em 5em -1.6em rgb(30 70 150 / 34%), inset 0 1px 0 #fff; }
.pt-done-ico { display: grid; place-items: center; width: 4.4em; height: 4.4em; flex-shrink: 0; border-radius: 50%; background: linear-gradient(150deg, #34d399, #12b76a); box-shadow: 0 .6em 1.4em -.4em rgb(18 183 106 / 60%); }
.pt-done-ico svg { width: 2.3em; height: 2.3em; }
.pt-done b { display: block; font-size: 2em; font-weight: 700; letter-spacing: -.03em; color: var(--pt-navy); white-space: nowrap; }
.pt-done small { display: block; margin-top: .2em; font-size: 1.45em; color: var(--pt-muted); white-space: nowrap; }

/* --- Entrance (once, on first view) -------------------------------------- */
.js .pt-band:not(.is-in) :is(.pt-a, .pt-dash-pos, .pt-done-pos, .pt-art) { opacity: 0; }
.pt-band.is-in .pt-a { animation: pt-up 820ms var(--pt-ease) var(--d, 0ms) backwards; }
.pt-band.is-in .pt-title > .pt-a { --y: 35px; }
.pt-band.is-in .pt-point { animation-name: pt-left; animation-duration: 660ms; }
@keyframes pt-up { from { opacity: 0; transform: translateY(var(--y, 20px)); } }
@keyframes pt-left { from { opacity: 0; transform: translateX(-20px); } }
.pt-band.is-in .pt-art { animation: pt-fade 1200ms ease backwards; }
.pt-band.is-in .pt-dash-pos { animation: pt-dash-in 900ms var(--pt-ease) 700ms backwards; }
.pt-band.is-in .pt-span { animation: pt-fade 600ms ease 950ms backwards; }
.pt-band.is-in .pt-track i { animation: pt-line 1200ms var(--pt-ease) 1000ms backwards; }
.pt-band.is-in .pt-node { animation: pt-node 600ms var(--pt-ease) backwards; animation-delay: calc(1200ms + var(--n) * 150ms); }
.pt-band.is-in .pt-stop b, .pt-band.is-in .pt-stop small { animation: pt-fade 600ms ease backwards; animation-delay: calc(1300ms + var(--n) * 150ms); }
.pt-band.is-in .pt-metric { animation: pt-up 650ms var(--pt-ease) backwards; animation-delay: calc(1550ms + var(--n) * 150ms); }
.pt-band.is-in .pt-done-pos { animation: pt-up 750ms var(--pt-ease) 1750ms backwards; --y: 24px; }
@keyframes pt-fade { from { opacity: 0; } }
@keyframes pt-dash-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes pt-line { from { transform: scaleX(0); } }
@keyframes pt-node { from { opacity: 0; transform: scale(.6); } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .pt-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); row-gap: clamp(28px, 4vw, 44px); }
  .pt-title { font-size: clamp(36px, 4.6vw, 60px); }
  .pt-visual { grid-column: 1 / -1; width: 100%; max-width: 760px; margin: 0 auto; }
  .pt-stage { height: 58em; }
  .pt-dash-pos { top: 6em; }
  .pt-done-pos { top: 44.5em; }
}
@media (max-width: 760px) {
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-title { font-size: clamp(34px, 9.6vw, 46px); }
  .pt-title > span { white-space: normal; }
  .pt-cta { width: 100%; justify-content: center; }
  .pt-points { gap: 20px; }
  .pt-visual { margin-right: 0; }
  .pt-stage { font-size: calc(100cqi / 66.5); height: 55em; }
  .pt-dash-pos { left: .8em; top: 4.5em; }
  .pt-dash { transform: rotate(-1.5deg); }
  .pt-done-pos { left: 32em; top: 42em; }
  .pt-done, .pt-done:hover { transform: rotate(-1.5deg); }
}

/* --- Reduced motion: everything visible in place, nothing moves. --------- */
@media (prefers-reduced-motion: reduce) {
  .pt-band *, .pt-band *::before, .pt-band *::after { animation: none !important; }
  .js .pt-band:not(.is-in) :is(.pt-a, .pt-dash-pos, .pt-done-pos, .pt-art) { opacity: 1; }
  .pt-par, .pt-rings { transform: none !important; transition: none; }
  .pt-cta:hover, .pt-cta:hover svg, .pt-point:hover .pt-ico, .pt-point:hover .pt-ico svg { transform: none; }
  .pt-done:hover { transform: rotate(-3.5deg); }
}