/* Moonstruck Digital: Psychology and therapy practices page (/psychology-websites). Classes prefixed ps- and scoped to .ps-root. Generated by tools/webflow_build.py, do not edit by hand. */ .ps-root { --bg: #FAFAFA; --dark: #282828; --surface: #F7F7F6; --surface-alt: #F2F2F1; --text: #282828; --on-dark: #FAFAFA; --muted-on-dark: #ECECEC; --text-2: #969696; --caption: rgba(146, 145, 145, .56); --black: #131313; --brand-hover: #3D3D3D; --border: #ECECEC; --grey: #E5E5E5; --green: #A1FF62; --purple: #6840FF; --coral: #F84131; --line-dark: rgba(250, 250, 250, .1); --fs-h1: clamp(48px, 36.73px + 3.005vw, 80px); --fs-display: clamp(44px, 34.14px + 2.629vw, 72px); --fs-h2: clamp(36px, 27.55px + 2.254vw, 60px); --fs-h3: clamp(28px, 23.77px + 1.127vw, 40px); --fs-h4: clamp(20px, 17.18px + .751vw, 28px); --fs-body-lg: clamp(18px, 17.3px + .188vw, 20px); --fs-body: 16px; --fs-sm: 14px; --fs-eyebrow: 14px; --fs-eyebrow-sm: 10px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s14: 56px; --s16: 64px; --s24: 96px; --s32: 128px; --section-pad: clamp(48px, 30.4px + 4.69vw, 128px); --gutter: clamp(24px, 13.4px + 2.82vw, 64px); --nav-h: 72px; --r-sm: 4px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --ease: cubic-bezier(.16, 1, .3, 1) } :where(.ps-root), :where(.ps-root) *, :where(.ps-root) ::before, :where(.ps-root) ::after { box-sizing: border-box } .ps-root { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.55"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip } :where(.ps-root) img, :where(.ps-root) svg, :where(.ps-root) canvas, :where(.ps-root) video { display: block; max-width: 100% } :where(.ps-root) img { height: auto } :where(.ps-root) a { color: inherit; text-decoration: none } :where(.ps-root) button { font: inherit; color: inherit; cursor: pointer } :where(.ps-root) p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; font-family: inherit } :where(.ps-root) h1, :where(.ps-root) h2, :where(.ps-root) h3, :where(.ps-root) h4 { margin: 0; color: inherit; font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; letter-spacing: -.03em; line-height: 1.04; text-transform: none } :where(.ps-root) ul, :where(.ps-root) ol { margin: 0; padding: 0; list-style: none } :where(.ps-root) dl, :where(.ps-root) dd { margin: 0 } :where(.ps-root) ::selection { background: var(--green); color: var(--black) } [hidden] { display: none !important } .ps-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 } :where(.ps-root) :focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px } .ps-section-dark :focus-visible, .ps-hero :focus-visible { outline-color: var(--green) } .ps-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter) } .ps-section-pad { padding-block: var(--section-pad) } .ps-section-light { background: var(--bg); color: var(--text) } .ps-section-dark { background: var(--dark); color: var(--on-dark) } .ps-h1 { font-size: var(--fs-h1); letter-spacing: -.035em; line-height: 1 } .ps-display { font-size: var(--fs-display); letter-spacing: -.035em; line-height: 1 } .ps-h2 { font-size: var(--fs-h2); letter-spacing: -.032em; line-height: 1.04 } .ps-h3 { font-size: var(--fs-h3); letter-spacing: -.03em; line-height: 1.06 } .ps-h4 { font-size: var(--fs-h4); letter-spacing: -.028em; line-height: 1.1; font-family: "Inter Tight", sans-serif; font-weight: 600 } .ps-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; max-width: 34em } .ps-eyebrow { font: 500 var(--fs-eyebrow)/1.2"Inter", sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--text-2); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap } .ps-eyebrow-sm { font-size: var(--fs-eyebrow-sm); letter-spacing: .16em; gap: var(--s2) } .ps-eyebrow .ps-num { color: var(--purple) } .ps-section-dark .ps-eyebrow .ps-num, .ps-hero .ps-eyebrow .ps-num { color: var(--green) } .ps-tnum { font-variant-numeric: tabular-nums } :where(.ps-root) em { font-style: normal } .ps-accent-green { color: var(--green) } .ps-accent-purple { color: var(--purple) } .ps-section-dark .ps-body-lg, .ps-hero .ps-body-lg { color: var(--muted-on-dark) } .ps-split-line { display: block } [data-split]>div, [data-split] .ps-split-line-mask { padding-bottom: .14em; margin-bottom: -.14em } .ps-hc-mask { padding-bottom: .12em; margin-bottom: -.12em } .ps-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; text-transform: uppercase; letter-spacing: .14em; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap } .ps-chip-dark { border-color: rgba(250, 250, 250, .16); color: var(--muted-on-dark); background: rgba(250, 250, 250, .06) } .ps-chip-green { border-color: rgba(161, 255, 98, .4); color: var(--green); background: rgba(161, 255, 98, .08) } .ps-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none } .ps-sw-green { background: var(--green) } .ps-sw-purple { background: var(--purple) } .ps-sw-grey { background: var(--text-2) } .ps-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; position: relative } .ps-dot-green { background: var(--green) } .ps-dot-green::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--green); animation: ping 2.4s var(--ease) infinite } @keyframes ping { 0% { transform: scale(.4); opacity: 1 } 80%, to { transform: scale(1.6); opacity: 0 } } .ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 400 .65rem/1.4rem"Inconsolata", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; padding: .5625rem .9375rem; border-radius: .25rem; border: 1px solid transparent; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; will-change: transform; min-height: 2.625rem } .ps-btn-primary { background: var(--dark); color: var(--on-dark) } .ps-btn-primary:hover { background: var(--brand-hover) } .ps-btn-green { background: var(--green); color: var(--black) } .ps-btn-green:hover { background: var(--bg) } .ps-btn-ghost-dark { background: rgba(250, 250, 250, .1); border-color: rgba(250, 250, 250, .1); color: var(--on-dark) } .ps-btn-ghost-dark:hover { background: rgba(250, 250, 250, .16) } .ps-btn-ghost-light { background: 0 0; border-color: var(--border); color: var(--text) } .ps-btn-ghost-light:hover { background: var(--surface-alt) } .ps-btn-block { width: 100% } .ps-btn:active { transform: translateY(1px) } .ps-btn-arrow { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease) } .ps-btn:hover .ps-btn-arrow { transform: translateX(3px) } .ps-btn-icon { width: 2.625rem; height: 2.625rem; display: inline-grid; place-items: center; border-radius: .25rem; border: 1px solid rgba(250, 250, 250, .12); background: rgba(250, 250, 250, .06); transition: background-color .2s ease } .ps-btn-icon:hover { background: rgba(250, 250, 250, .14) } .ps-btn-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round } .ps-btn-text { background: 0 0; border: 0; padding: 12px 8px; color: var(--muted-on-dark); text-decoration: underline; text-underline-offset: 4px; min-height: 44px } .ps-link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px } .ps-link-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .2s var(--ease) } .ps-link-arrow:hover svg { transform: translateX(3px) } .ps-link-arrow-dark { color: var(--on-dark) } .ps-root { --lilac: #A994FF; --ease-calm: cubic-bezier(.16, 1, .3, 1) } .ps-accent-lilac { color: var(--lilac) } .ps-section-dark .ps-eyebrow .ps-num, .ps-hero .ps-eyebrow .ps-num { color: var(--lilac) } .ps-sw-soft { background: var(--lilac) } .ps-section-dark :focus-visible, .ps-hero :focus-visible { outline-color: var(--lilac) } .ps-av { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; font: 600 11px/1"Inter", sans-serif; letter-spacing: .04em; color: var(--black); background: #d9cbb5; font-style: normal } .ps-av-lg { width: 52px; height: 52px; font-size: 15px } .ps-av-1 { background: #d9cbb5 } .ps-av-2 { background: #b8c4ae } .ps-av-3 { background: #c9bfdc } .ps-av-4 { background: #e3d6c4 } .ps-av-5 { background: #a9b9b7 } .ps-av-6 { background: #d6c3b0 } .ps-av-7 { background: #bdb3e6 } .ps-proto-flag { position: fixed; left: 14px; bottom: 14px; z-index: 70; pointer-events: none; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(19, 19, 19, .86); color: var(--muted-on-dark); border: 1px solid rgba(169, 148, 255, .45); font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap } @media (max-width:479px) { .ps-proto-flag { font-size: 8px; letter-spacing: .08em; bottom: 8px; left: 8px; padding: 6px 9px } } .ps-hero { position: relative; min-height: max(100svh, 720px); background: var(--black); color: var(--on-dark); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate } .ps-hx-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden } .ps-hx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform-origin: 64% 50%; filter: brightness(.82) saturate(.92) contrast(1.02) } .ps-hx-pixels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; image-rendering: pixelated } .ps-hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(19, 19, 19, .55)0, rgba(19, 19, 19, .1) 45%, rgba(19, 19, 19, 0) 60%), linear-gradient(0deg, rgba(19, 19, 19, .92)0, rgba(19, 19, 19, 0) 30%), linear-gradient(180deg, rgba(19, 19, 19, .6)0, rgba(19, 19, 19, 0) 16%) } html:not(.hx-live) .ps-hero-shade { background: linear-gradient(90deg, #131313 0, rgba(19, 19, 19, .92) 32%, rgba(19, 19, 19, .25) 58%, rgba(19, 19, 19, 0) 72%), linear-gradient(0deg, rgba(19, 19, 19, .92)0, rgba(19, 19, 19, 0) 30%), linear-gradient(180deg, rgba(19, 19, 19, .6)0, rgba(19, 19, 19, 0) 16%) } .ps-hero-inner { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) 296px; align-items: end; gap: var(--s12); padding-top: calc(var(--nav-h) + var(--s24)); padding-bottom: var(--s10); pointer-events: none } .ps-hero-inner a, .ps-hero-panel { pointer-events: auto } .ps-hero-copy { max-width: 760px; display: grid; gap: var(--s6) } .ps-hero-eyebrow { color: var(--muted-on-dark) } .ps-hero-title { font-size: var(--fs-h1); letter-spacing: -.032em; line-height: 1 } .ps-hero-title .ps-line { display: block } .ps-hero-lede { max-width: 30em } .ps-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2) } .ps-btn-arrow-ne { width: 12px; height: 12px } .ps-btn:hover .ps-btn-arrow-ne { transform: translate(2px, -2px) } .ps-hx-textlink { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 400 .65rem/1.4rem"Inconsolata", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--on-dark); padding: .5625rem .9375rem; min-height: 2.625rem; border: 1px solid rgba(250, 250, 250, .5); border-radius: .25rem; transition: color .2s ease, border-color .2s ease; white-space: nowrap } .ps-hx-textlink svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease) } .ps-hx-textlink:hover { color: var(--lilac); border-color: var(--lilac) } .ps-hx-textlink:hover svg { transform: translate(2px, 2px) } .ps-hero-panel { background: rgba(19, 19, 19, .76); border: 1px solid rgba(250, 250, 250, .12); border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s4); color: var(--on-dark) } .ps-hp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) } .ps-hp-head .ps-eyebrow { color: var(--on-dark); font-size: 12px; letter-spacing: .14em } .ps-hp-main { display: grid; grid-template-columns: 84px 1fr; gap: var(--s4); align-items: center } .ps-hp-donut { position: relative; width: 84px; height: 84px } .ps-hp-donut svg { width: 100%; height: 100%; transform: rotate(-90deg) } .ps-hp-donut circle { fill: none; stroke-width: 7 } .ps-hp-donut-bg { stroke: rgba(250, 250, 250, .1) } .ps-hp-donut-fg { stroke: var(--lilac); stroke-dasharray: var(--p)100 } .ps-hp-donut span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 20px/1"Inter Tight", sans-serif; letter-spacing: -.02em } .ps-hp-list>div { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 6px 0; border-bottom: 1px solid var(--line-dark) } .ps-hp-list>div:last-child { border-bottom: 0 } .ps-hp-list dt { display: flex; align-items: center; gap: 6px; font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-dark) } .ps-hp-list dd { font: 600 15px/1"Inter", sans-serif } .ps-hp-chart { border-top: 1px solid var(--line-dark); padding-top: var(--s3) } .ps-hp-chart-head { display: flex; justify-content: space-between; align-items: center } .ps-hp-chart-val { font: 500 11px/1"Inter", sans-serif; color: var(--muted-on-dark) } .ps-hp-bars { width: 100%; height: 48px; margin-top: var(--s2); overflow: visible } .ps-hp-bars rect { fill: rgba(169, 148, 255, .32) } .ps-hp-bars rect.ps-is-peak { fill: var(--lilac) } .ps-hp-days { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 4px; font: 500 9px/1"Inter", sans-serif; color: var(--text-2); text-align: center; letter-spacing: .1em } .ps-hp-lot { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--s3); border-top: 1px solid var(--line-dark); padding-top: var(--s3) } .ps-hp-lot strong { display: block; margin-top: 6px; font: 500 var(--fs-sm)/1.2"Inter", sans-serif; transition: opacity .3s ease } .ps-hp-status { color: var(--lilac) } .ps-hx-services { position: relative; z-index: 4; display: flex; flex-wrap: wrap; border-top: 1px solid var(--line-dark); padding-block: var(--s5) var(--s6) } .ps-hx-services a { display: inline-flex; align-items: center; gap: 14px; padding-right: var(--s6); margin-right: var(--s6); border-right: 1px solid var(--line-dark); text-decoration: none; font: 500 var(--fs-eyebrow-sm)/1.5"Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-on-dark); transition: color .25s ease; min-height: 44px } .ps-hx-services a:last-child { border-right: 0; margin-right: 0 } .ps-hx-services svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; transition: transform .4s var(--ease); flex: none } .ps-hx-services a:hover { color: var(--lilac) } .ps-hx-services a:hover svg { transform: translateY(-2px) } html.ps-js:not(.ms-fallback):not(.ps-reduced-motion) [data-hero-in], html.ps-js:not(.ms-fallback):not(.ps-reduced-motion) [data-hero-panel], html.ps-js:not(.ms-fallback):not(.ps-reduced-motion) .ps-hx-services { opacity: 0 } html.ps-js:not(.ms-fallback):not(.ps-reduced-motion) [data-hero-title] { visibility: hidden } @media (max-width:1279px) { .ps-hero-inner { grid-template-columns: minmax(0, 1fr) 296px } .ps-hx-services a { padding-right: var(--s4); margin-right: var(--s4); gap: 10px } } @media (max-width:1023px) { .ps-hero-inner { grid-template-columns: 1fr; gap: var(--s8); padding-top: 50svh } .ps-hero-panel { max-width: 420px } .ps-hx-photo { bottom: 38%; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%) } .ps-hx-img { object-position: 58% 88%; transform-origin: 62% 60% } .ps-hx-services { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s4) } .ps-hx-services a { border-right: 0; margin-right: 0; padding-right: 0 } } @media (max-width:767px) { .ps-hero { min-height: max(100svh, 680px) } .ps-hero-inner { padding-top: 48svh; padding-bottom: var(--s10) } .ps-hero-panel, .ps-hx-services { display: none } .ps-hx-photo { bottom: 42% } .ps-hero-ctas .ps-btn, .ps-hero-ctas .ps-hx-textlink { flex: 1 1 100% } .ps-hero-eyebrow { font-size: var(--fs-eyebrow-sm); letter-spacing: .14em } .ps-cta-contact li { grid-template-columns: 56px 1fr; font-size: var(--fs-sm) } } .ps-tf { background: var(--surface-alt); position: relative } .ps-tf-pin { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + var(--s8)) var(--s12) } .ps-tf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); align-items: center } .ps-tf-copy { display: grid; gap: var(--s6); align-content: center } .ps-tf-steps { display: grid; margin-top: var(--s4); border-top: 1px solid var(--grey) } .ps-tf-steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s4)0; border-bottom: 1px solid var(--grey); color: var(--text-2); transition: color .6s var(--ease) } .ps-tf-steps li span { font: 500 var(--fs-sm)/1.5"Inter", sans-serif } .ps-tf-steps li strong { font-weight: 500; color: inherit; display: block } .ps-tf-steps li p { font-size: var(--fs-sm); margin-top: 2px; color: var(--text) } .ps-tf-live .ps-tf-steps li p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--ease), opacity .6s ease } .ps-tf-live .ps-tf-steps li.ps-is-active p { max-height: 4.5em; opacity: 1 } .ps-tf-steps li.ps-is-active, html:not(.ps-tf-live) .ps-tf-steps li { color: var(--text) } .ps-tf-steps li.ps-is-active span, html:not(.ps-tf-live) .ps-tf-steps li span { color: var(--purple) } .ps-tf-stage { position: relative } .ps-tf-frame { position: relative; width: min(100%, calc(72svh*1.3333)); aspect-ratio: 4/3; margin-left: auto; perspective: 2000px; perspective-origin: 50% 40%; container-type: inline-size } .ps-tf-world { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50% } .ps-tf-page { position: absolute; left: 12%; right: 12%; top: 14%; bottom: 12%; border-radius: 2.4cqw; overflow: hidden; background: #fff; border: 1px solid var(--grey); display: grid; grid-template-rows: auto 1fr } .ps-tf-page .ps-browser-bar { display: flex; align-items: center; gap: .8cqw; padding: 1.3cqw 1.8cqw; border-bottom: 1px solid var(--border); font-size: 1.5cqw; color: var(--text-2); background: var(--surface) } .ps-tf-page .ps-browser-bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--grey) } .ps-tf-page .ps-browser-bar span { margin-left: 1.2cqw } .ps-tf-page-body { position: relative } .ps-tf-plain { position: absolute; inset: 0; padding: 4cqw 5cqw; display: grid; align-content: start; gap: 1.4cqw } .ps-tf-plain-h { font: 600 3.2cqw/1.1"Inter Tight", sans-serif; letter-spacing: -.02em; color: var(--text); margin-bottom: 1cqw } .ps-tf-line { display: block; height: 1.1cqw; border-radius: 1cqw; background: var(--surface-alt); width: 80% } .ps-tf-line-s { width: 52% } .ps-tf-plain-form { display: grid; gap: 1.2cqw; margin-top: 2cqw; max-width: 60% } .ps-tf-plain-form i { height: 3.6cqw; border: 1px solid var(--grey); border-radius: .8cqw } .ps-tf-plain-form i.ps-tall { height: 8cqw } .ps-tf-plain-form b { justify-self: start; font: 400 1.5cqw/1"Inconsolata", monospace; text-transform: uppercase; letter-spacing: .08em; padding: 1.2cqw 2cqw; border-radius: .5cqw; background: var(--grey); color: var(--text-2) } .ps-tf-full { position: absolute; inset: 0; color: var(--on-dark); display: grid; grid-template-rows: auto 1fr auto } .ps-tf-full-img, .ps-tf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover } .ps-tf-full-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 19, 19, .78)0, rgba(19, 19, 19, .38) 55%, rgba(19, 19, 19, .1) 100%) } .ps-tf-full-nav { position: relative; display: flex; align-items: center; gap: 2.4cqw; padding: 2.4cqw 3.6cqw; font-size: 1.5cqw; color: var(--muted-on-dark) } .ps-tf-full-nav b { font: 600 2.2cqw/1"Inter Tight", sans-serif; color: var(--on-dark); margin-right: auto; letter-spacing: -.02em } .ps-tf-full-nav em { font-style: normal; color: var(--black); background: var(--green); padding: .7cqw 1.4cqw; border-radius: .5cqw } .ps-tf-full-copy { position: relative; align-self: center; padding: 0 3.6cqw; display: grid; gap: 1.6cqw; max-width: 64% } .ps-tf-eyebrow { font: 500 1.3cqw/1"Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-on-dark) } .ps-tf-full-h { font: 600 5cqw/1.02"Inter Tight", sans-serif; letter-spacing: -.03em } .ps-tf-full-btn { justify-self: start; font: 400 1.4cqw/1"Inconsolata", monospace; letter-spacing: .08em; text-transform: uppercase; padding: 1.2cqw 1.8cqw; border-radius: .5cqw; background: var(--green); color: var(--black) } .ps-tf-crisis { position: relative; margin: 0; padding: 1.2cqw 3.6cqw; background: rgba(19, 19, 19, .82); font-size: 1.4cqw; color: var(--on-dark); border-top: 1px solid rgba(250, 250, 250, .12) } .ps-tf-layer { position: absolute; z-index: 2; background: #fff; border: 1px solid var(--grey); border-radius: 1.8cqw; padding: 2cqw; display: grid; gap: 1cqw; font-size: 1.5cqw; line-height: 1.3; color: var(--text) } .ps-tfl-label { font: 500 1.2cqw/1"Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--purple) } .ps-tf-l-search { left: 2%; top: 3%; width: 46% } .ps-tf-l-clin { right: 1%; top: 22%; width: 31% } .ps-tf-l-book { left: 0; bottom: 4%; width: 33% } .ps-tf-l-intake { right: 3%; bottom: 0; width: 34% } .ps-tfl-searchbar { display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.6cqw; border: 1px solid var(--grey); border-radius: 4cqw; color: var(--text) } .ps-tfl-searchbar svg, .ps-mod-q svg, .ps-sj-q svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none } .ps-tfl-url { color: var(--text-2); font-size: 1.25cqw } .ps-tfl-title { font: 600 1.9cqw/1.15"Inter Tight", sans-serif; letter-spacing: -.01em; color: var(--purple) } .ps-tf-l-intake .ps-tfl-title { color: var(--text) } .ps-tfl-snip { color: var(--text-2) } .ps-tfl-chips { display: flex; gap: .8cqw; flex-wrap: wrap } .ps-tfl-chips i { font-style: normal; padding: .6cqw 1.2cqw; border-radius: 4cqw; background: rgba(104, 64, 255, .1); color: var(--purple); font-size: 1.3cqw } .ps-tfl-person { display: flex; align-items: center; gap: 1.2cqw; padding-top: .8cqw; border-top: 1px solid var(--border) } .ps-tfl-person .ps-av { width: 3.8cqw; height: 3.8cqw; font-size: 1.3cqw } .ps-tfl-person b { display: block; font-weight: 600; font-size: 1.5cqw } .ps-tfl-person small { color: var(--text-2); font-size: 1.25cqw } .ps-tfl-days, .ps-tfl-slots { display: flex; gap: .8cqw } .ps-tfl-days span { flex: 1; text-align: center; padding: .8cqw 0; border-radius: .8cqw; background: var(--surface-alt); font-size: 1.3cqw; color: var(--text-2) } .ps-tfl-days span.ps-is-on { background: var(--dark); color: var(--on-dark) } .ps-tfl-slots i { flex: 1; text-align: center; font-style: normal; padding: .8cqw 0; border-radius: .8cqw; border: 1px solid var(--grey); font-size: 1.3cqw; font-variant-numeric: tabular-nums } .ps-tfl-slots i.ps-is-on { border-color: var(--purple); background: rgba(104, 64, 255, .1); color: var(--purple) } .ps-tfl-sync, .ps-tfl-lock { display: flex; align-items: center; gap: .8cqw; color: var(--text-2); font-size: 1.3cqw } .ps-tfl-lock svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.4 } .ps-tfl-fields { display: grid; gap: .8cqw } .ps-tfl-fields i { display: block; height: 2.4cqw; border: 1px solid var(--grey); border-radius: .6cqw } .ps-tfl-fields i.ps-short { width: 60% } .ps-tfl-bar { height: .9cqw; border-radius: 1cqw; background: var(--surface-alt); overflow: hidden } .ps-tfl-bar i { display: block; height: 100%; width: 72%; background: var(--purple); border-radius: inherit } .ps-tf-caption { position: absolute; right: 2%; top: 5%; z-index: 1; color: var(--text-2); margin: 0 } .ps-tf-live .ps-tf-full { opacity: 0 } .ps-tf-live .ps-tf-layer { opacity: 0 } html:not(.ps-tf-live) .ps-tf-plain { display: none } html:not(.ps-tf-live) .ps-tf-canvas { display: none } @media (max-width:1023px) { .ps-tf-pin { padding-block: calc(var(--nav-h) + var(--s4)) var(--s6); align-items: flex-start } .ps-tf-grid { grid-template-columns: 1fr; gap: var(--s5) } .ps-tf-copy { gap: var(--s3) } .ps-tf-lede { font-size: var(--fs-body) } .ps-tf-live .ps-tf-steps { position: relative; height: 92px; border: 0; margin-top: 0 } .ps-tf-live .ps-tf-steps li { position: absolute; inset: 0; border: 0; border-top: 1px solid var(--grey); opacity: 0; transition: opacity .6s ease } .ps-tf-live .ps-tf-steps li.ps-is-active { opacity: 1 } .ps-tf-live .ps-tf-frame { width: min(100%, calc((100svh - 380px)*1.3333), 640px); margin-inline: auto; min-width: 280px } .ps-tf-frame { margin-inline: auto } } @media (max-width:1023px) and (max-height:700px) { .ps-tf-live .ps-tf-lede { display: none } } @container (max-width: 560px) { .ps-tf-page { left: 6%; right: 6%; top: 18%; bottom: 14% } .ps-tf-layer { font-size: 2.5cqw; padding: 2.6cqw; gap: 1.4cqw; border-radius: 2.4cqw } .ps-tfl-label { font-size: 2cqw } .ps-tfl-title { font-size: 2.9cqw } .ps-tfl-url, .ps-tfl-sync, .ps-tfl-lock, .ps-tfl-chips i, .ps-tfl-days span, .ps-tfl-slots i, .ps-tfl-person small { font-size: 2.1cqw } .ps-tfl-person b { font-size: 2.4cqw } .ps-tfl-person .ps-av { width: 5.4cqw; height: 5.4cqw; font-size: 1.9cqw } .ps-tfl-person:nth-of-type(n+3), .ps-tfl-snip, .ps-tfl-url, .ps-tfl-fields i.ps-short { display: none } .ps-tf-l-search { left: 0; top: 0; width: 60% } .ps-tf-l-clin { right: 0; top: 22%; width: 44% } .ps-tf-l-book { left: 0; bottom: 2%; width: 46% } .ps-tf-l-intake { right: 0; bottom: 0; width: 46% } .ps-tf-caption { display: none } .ps-tf-full-h { font-size: 6.4cqw } .ps-tf-full-nav span { display: none } } .ps-tf-live .ps-tf-full-img { visibility: hidden } .ps-cap-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6) var(--s16); align-items: end } .ps-cap-head .ps-eyebrow { grid-column: 1/-1 } .ps-cap-lede { color: #5c5c5c; color: var(--text); opacity: .72 } .ps-cap-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s16); margin-top: var(--s16); align-items: start } .ps-cap-tabs { display: grid; border-top: 1px solid var(--border) } .ps-cap-tab { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); text-align: left; padding: var(--s5)0; background: 0 0; border: 0; border-bottom: 1px solid var(--border); color: var(--text-2); transition: color .25s ease; min-height: 48px } .ps-cap-tab .ps-num { font: 500 var(--fs-sm)/1.4"Inter", sans-serif } .ps-cap-tab-title { font: 600 var(--fs-h4)/1.1"Inter Tight", sans-serif; letter-spacing: -.028em } .ps-cap-tab:hover { color: var(--text) } .ps-cap-tab.ps-is-active { color: var(--text) } .ps-cap-tab.ps-is-active .ps-num { color: var(--purple) } .ps-cap-tab-bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) } .ps-cap-tab.ps-is-active .ps-cap-tab-bar { transform: scaleX(1) } .ps-cap-panels { padding-top: var(--s6) } .ps-cap-panel { display: grid; gap: var(--s4) } .ps-cap-panel p { max-width: 34em } html.ps-js .ps-cap-panel:not(.ps-is-active) { display: none } .ps-ticks { display: grid; gap: var(--s2); font-size: var(--fs-sm) } .ps-ticks li { display: flex; gap: var(--s3); align-items: baseline } .ps-ticks li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--purple); flex: none; transform: translateY(-1px) } .ps-cap-panel .ps-link-arrow { justify-self: start; margin-top: var(--s2) } .ps-cap-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s12) var(--s4) } .ps-cap-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0 } .ps-cap-links path { fill: none; stroke: var(--grey); stroke-width: 1 } .ps-cap-links path.ps-flow { stroke: var(--purple); stroke-width: 1.2; stroke-dasharray: 3 7; animation: flow 1.2s linear infinite } @keyframes flow { to { stroke-dashoffset: -20 } } .ps-cap-hub { position: absolute; z-index: 2; left: 50%; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; background: var(--dark); color: var(--on-dark); padding: 7px 10px; border-radius: var(--r-pill); white-space: nowrap } .ps-cap-hub i { width: 6px; height: 6px; border-radius: 50%; background: var(--green) } .ps-cap-mod { position: relative; z-index: 1; grid-column: span 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s4); display: grid; grid-template-rows: auto 1fr; gap: var(--s3); min-height: 168px; overflow: hidden; cursor: pointer; transition: border-color .25s ease, background-color .25s ease } .ps-cap-mod:hover { border-color: var(--grey); background: #fff } .ps-cap-mod.ps-is-active { grid-column: 1/-1; order: -1; min-height: 360px; background: #fff; border-color: var(--grey); cursor: default; padding: var(--s5); gap: var(--s4) } .ps-cap-mod header { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-width: 0 } .ps-cap-mod header .ps-eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ps-cap-mod:not(.ps-is-active) .ps-live { display: none } .ps-live { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; flex: none } .ps-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple) } .ps-cap-mod.ps-is-active .ps-live i { animation: blink 1.6s ease-in-out infinite } @keyframes blink { 50% { opacity: .25 } } .ps-mod-body { display: grid; gap: var(--s4); min-width: 0; align-content: start } .ps-cap-mod:not(.ps-is-active) .ps-mod-body { gap: var(--s2) } .ps-mod-tile-label, .ps-mod-facts span, .ps-mod-kpis span { font: 500 var(--fs-eyebrow-sm)/1.2"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2) } .ps-mod-web { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-md); overflow: hidden; background: var(--black); min-width: 0 } .ps-mod-chrome { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #1f1f1f; color: var(--muted-on-dark); font-size: 10px; line-height: 1.2; min-width: 0 } .ps-mod-dots { display: flex; gap: 4px; flex: none } .ps-mod-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(250, 250, 250, .25) } .ps-mod-url { flex: 0 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(250, 250, 250, .08); border-radius: var(--r-pill); padding: 3px 10px } .ps-mod-nav { display: flex; gap: 14px; margin-left: auto; flex: none } .ps-mod-nav b { font-weight: 500 } .ps-mod-web-stage { position: relative; min-height: 104px; min-width: 0 } .ps-cap-mod.ps-is-active .ps-mod-web-stage { min-height: 250px } .ps-mod-web-img { position: absolute; inset: 0 } .ps-mod-web-img img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transform: scale(1.04); transition: transform 1.2s var(--ease) } .ps-cap-mod.ps-is-active .ps-mod-web-img img { transform: scale(1) } .ps-mod-web-copy { position: relative; display: grid; gap: var(--s2); align-content: end; height: 100%; padding: var(--s4); color: var(--on-dark); background: linear-gradient(90deg, rgba(19, 19, 19, .9), rgba(19, 19, 19, .1)); min-width: 0 } .ps-cap-mod.ps-is-active .ps-mod-web-copy { padding: var(--s6); gap: var(--s3) } .ps-mod-web-copy .ps-eyebrow { color: var(--muted-on-dark) } .ps-mod-web-copy strong { font: 600 16px/1.15"Inter Tight", sans-serif; letter-spacing: -.02em; max-width: 14em } .ps-cap-mod.ps-is-active .ps-mod-web-copy strong { font-size: var(--fs-h3); letter-spacing: -.028em } .ps-mod-web-btns { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 11px } .ps-mod-web-btns b { background: var(--green); color: var(--black); padding: 6px 10px; border-radius: .25rem; font-weight: 500 } .ps-mod-web-btns i { font-style: normal; border: 1px solid rgba(250, 250, 250, .3); padding: 6px 10px; border-radius: .25rem } .ps-mod-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) } .ps-mod-facts li { display: grid; gap: 6px; align-content: start; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0 } .ps-mod-facts b { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere } .ps-mod-map-wrap { display: grid; gap: var(--s4) } .ps-cap-mod.ps-is-active .ps-mod-map-wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center } .ps-mod-map, .ps-sj-map { width: 100%; height: 100%; min-height: 96px; max-height: 300px } .ps-mod-map-side { display: grid; gap: var(--s4); align-content: center; min-width: 0 } .ps-mod-legend { display: grid; gap: var(--s2) } .ps-mod-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-sm); padding-bottom: var(--s2); border-bottom: 1px solid var(--border) } .ps-mod-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--dark) } .ps-mod-legend .ps-lg-available { background: rgba(104, 64, 255, .16) } .ps-mod-legend .ps-lg-hold { background: rgba(104, 64, 255, .5) } .ps-mod-legend .ps-lg-sold { background: var(--grey) } .ps-mod-legend b { font-weight: 500 } .ps-mod-lot { display: grid; gap: 6px; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); min-width: 0 } .ps-mod-lot strong { font: 600 var(--fs-h4)/1"Inter Tight", sans-serif; letter-spacing: -.028em } .ps-mod-lot>span:not(.ps-eyebrow) { font-size: var(--fs-sm); color: var(--text-2) } .ps-mod-lot-cta { justify-self: start; margin-top: var(--s2); background: var(--purple); color: #fff; font: 400 .65rem/1.4"Inconsolata", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: .25rem } .ps-ml { stroke: var(--dark); stroke-width: .5; vector-effect: non-scaling-stroke; fill: var(--bg); transition: fill .3s ease } .ps-ml-available { fill: rgba(104, 64, 255, .16) } .ps-ml-hold { fill: rgba(104, 64, 255, .5) } .ps-ml-sold { fill: var(--grey) } .ps-ml.ps-is-picked { fill: var(--purple) } .ps-mod-crm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); align-content: start } .ps-mod-crm-col { display: grid; gap: 6px; align-content: start; background: var(--surface-alt); border-radius: var(--r-md); padding: var(--s2); min-height: 140px; min-width: 0 } .ps-mod-crm-col>span { font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); padding: 4px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ps-crm-card { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; font-size: 12px; font-weight: 500; min-width: 0; overflow: hidden } .ps-crm-card i { font-style: normal; width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--dark); color: var(--on-dark); font-size: 9px } .ps-crm-card em { font-style: normal; display: grid; min-width: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ps-crm-card small { font-size: 10px; font-weight: 400; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ps-crm-card.ps-is-moving { border-color: var(--purple) } .ps-crm-card.ps-is-moving i { background: var(--purple) } .ps-mod-crm-log { display: flex; flex-wrap: wrap; gap: var(--s2) } .ps-mod-crm-log li { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--text-2); max-width: 100% } .ps-mod-crm-log i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); flex: none } .ps-mod-crm-sum { display: grid; gap: 6px } .ps-mod-crm-sum li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; padding: 7px 10px; background: var(--surface-alt); border-radius: var(--r-sm); min-width: 0 } .ps-mod-crm-sum span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2) } .ps-mod-crm-sum b { font-weight: 600 } .ps-mod-crm-sum li:first-child { background: rgba(104, 64, 255, .1) } .ps-mod-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) } .ps-mod-kpis li { display: grid; gap: 6px; align-content: start; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0 } .ps-mod-kpis b { font: 600 var(--fs-h4)/1"Inter Tight", sans-serif; letter-spacing: -.028em; overflow-wrap: anywhere } .ps-mod-kpis small { font-size: 12px; color: var(--purple) } .ps-mod-mkt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); align-items: end } .ps-mod-line { display: block; width: 100%; height: 80px; overflow: visible } .ps-cap-mod.ps-is-active .ps-mod-line { height: 130px } .ps-mod-line-area { fill: rgba(104, 64, 255, .08) } .ps-mod-line-path { fill: none; stroke: var(--purple); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round } .ps-mod-bars { display: grid; gap: var(--s2); font-size: 12px } .ps-mod-bars li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--s2); color: var(--text-2) } .ps-mod-bars i { display: block; height: 8px; border-radius: 2px; background: var(--dark); transform-origin: left; transform: scaleX(var(--v)) } .ps-mod-bars li:first-child i { background: var(--purple) } .ps-cap-mod:not(.ps-is-active) .ps-mod-mkt { grid-template-columns: 1fr } .ps-cap-mod:not(.ps-is-active) :is(.ps-mod-facts, .ps-mod-nav, .ps-mod-map-side, .ps-mod-crm, .ps-mod-crm-log, .ps-mod-kpis, .ps-mod-bars, .ps-mod-web-btns, .ps-mod-web-copy .ps-eyebrow) { display: none } .ps-cap-mod.ps-is-active .ps-mod-crm-sum { display: none } .ps-cap-mod:not(.ps-is-active) .ps-mod-map { max-height: 200px } @media (max-width:1023px) { .ps-cap-head { grid-template-columns: 1fr } .ps-cap-grid { grid-template-columns: 1fr; gap: var(--s10); margin-top: var(--s10) } .ps-cap-tabs { grid-template-columns: 1fr 1fr; border-top: 0; gap: var(--s2) } .ps-cap-tab { border: 1px solid var(--border); border-radius: .25rem; padding: var(--s3); grid-template-columns: 1fr; gap: var(--s2); align-content: start } .ps-cap-tab-title { font-size: var(--fs-body); font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: 0; line-height: 1.3 } .ps-cap-tab.ps-is-active { border-color: var(--purple) } .ps-cap-tab-bar { display: none } .ps-cap-panels { grid-column: 1/-1; padding-top: var(--s4) } .ps-cap-board { gap: var(--s10) var(--s2) } .ps-cap-mod { min-height: 120px; padding: var(--s3); border-radius: var(--r-lg) } .ps-cap-mod.ps-is-active { min-height: 300px; padding: var(--s4) } .ps-mod-mkt { grid-template-columns: 1fr } .ps-cap-mod.ps-is-active .ps-mod-map-wrap { grid-template-columns: 1fr } .ps-mod-map-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start } .ps-cap-mod.ps-is-active .ps-mod-crm { grid-template-columns: 1fr 1fr } .ps-mod-crm-col { min-height: 0 } .ps-cap-mod.ps-is-active .ps-mod-web-copy { padding: var(--s4) } } @media (max-width:520px) { .ps-cap-mod:not(.ps-is-active) .ps-eyebrow { font-size: 9px; letter-spacing: .1em } .ps-cap-mod:not(.ps-is-active) :is(.ps-mod-url, .ps-mod-web-copy) { display: none } .ps-cap-mod:not(.ps-is-active) .ps-mod-web-stage { min-height: 96px } .ps-cap-mod:not(.ps-is-active) .ps-mod-crm-sum li { font-size: 10px; padding: 5px 6px; gap: 4px } .ps-mod-facts, .ps-mod-kpis { gap: 6px } .ps-mod-facts li, .ps-mod-kpis li { padding: var(--s2) } .ps-mod-facts b { font-size: 12px } .ps-mod-kpis b { font-size: 20px } .ps-mod-kpis small { font-size: 11px } .ps-mod-map-side { grid-template-columns: 1fr } .ps-mod-nav b:nth-child(n+3) { display: none } } .ps-cap-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s12) var(--s3) } .ps-cap-mod { min-height: 156px } .ps-cap-price { font-size: var(--fs-sm); color: var(--purple); font-weight: 500 } .ps-mod-crisis { margin: 0; padding: 7px 12px; background: #1f1f1f; color: var(--muted-on-dark); font-size: 11px; border-top: 1px solid rgba(250, 250, 250, .08) } .ps-cap-mod:not(.ps-is-active) .ps-mod-crisis { display: none } .ps-mod-sub { font-size: 12px; color: var(--text-2) } .ps-mod-web-btns b { background: var(--green) } .ps-mod-match { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch } .ps-mod-profile { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface) } .ps-mod-profile strong { display: block; font: 600 var(--fs-h4)/1.1"Inter Tight", sans-serif; letter-spacing: -.02em } .ps-mod-profile .ps-mod-sub { display: block; margin-top: 4px } .ps-mod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3) } .ps-mod-tags li { font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(104, 64, 255, .08); color: var(--purple) } .ps-mod-filter { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-md) } .ps-mod-checks { display: grid; gap: 8px; font-size: var(--fs-sm) } .ps-mod-checks li { display: flex; align-items: center; gap: 10px } .ps-mod-checks li::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--purple)url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E")center/12px no-repeat } .ps-mod-matchcount { font-size: var(--fs-sm); color: var(--text-2); border-top: 1px solid var(--border); padding-top: var(--s3) } .ps-mod-matchcount b { color: var(--text); font: 600 20px/1"Inter Tight", sans-serif; margin-right: 4px } .ps-mod-avrow { grid-column: 1/-1; display: flex; gap: 6px } .ps-cap-mod.ps-is-active .ps-mod-avrow { display: none } .ps-cap-mod:not(.ps-is-active) .ps-mod-match { grid-template-columns: 1fr } .ps-cap-mod:not(.ps-is-active) :is(.ps-mod-profile, .ps-mod-filter) { display: none } .ps-mod-book { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start } .ps-mod-cal { display: grid; gap: var(--s3); padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-md) } .ps-mod-cal-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px } .ps-mod-cal-days span { text-align: center; padding: 8px 0; font-size: 12px; border-radius: var(--r-sm); background: var(--surface-alt); color: var(--text-2) } .ps-mod-cal-days span.ps-is-on { background: var(--dark); color: var(--on-dark) } .ps-mod-cal-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px } .ps-mod-cal-slots i { font-style: normal; text-align: center; padding: 9px 0; font-size: 12px; border: 1px solid var(--grey); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; transition: background-color .5s ease, border-color .5s ease, color .5s ease } .ps-mod-cal-slots i.ps-is-on { border-color: var(--purple); background: rgba(104, 64, 255, .1); color: var(--purple) } .ps-mod-intake { display: grid; gap: var(--s2); padding: var(--s5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface) } .ps-mod-intake-bar { height: 8px; border-radius: 4px; background: var(--grey); overflow: hidden } .ps-mod-intake-bar i { display: block; height: 100%; width: 100%; background: var(--purple); transform-origin: left; transform: scaleX(var(--v)) } .ps-mod-lock { font-size: 12px; color: var(--text); display: flex; gap: 8px; align-items: center; margin-top: var(--s2) } .ps-mod-lock::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--purple) } .ps-mod-soft { grid-column: 1/-1; font-size: 12px; color: var(--text-2); letter-spacing: .04em } .ps-cap-mod:not(.ps-is-active) .ps-mod-book { grid-template-columns: 1fr } .ps-cap-mod:not(.ps-is-active) :is(.ps-mod-intake, .ps-mod-soft, .ps-mod-cal-days) { display: none } .ps-cap-mod:not(.ps-is-active) .ps-mod-cal { padding: 0; border: 0 } .ps-mod-search { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start } .ps-mod-q { grid-column: 1/-1; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--grey); border-radius: var(--r-pill); font-size: var(--fs-sm) } .ps-mod-result { display: grid; gap: 4px; padding: var(--s4) var(--s5); border: 1px solid var(--border); border-radius: var(--r-md) } .ps-mod-result strong { font: 600 18px/1.2"Inter Tight", sans-serif; color: var(--purple); letter-spacing: -.01em } .ps-mod-result p { font-size: 13px; color: var(--text-2) } .ps-mod-ai { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); border-radius: var(--r-md); background: rgba(104, 64, 255, .06); border: 1px solid rgba(104, 64, 255, .2); font-size: 13px } .ps-mod-ai i { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--purple); color: #fff; font-size: 10px; margin-left: 4px; vertical-align: 1px } .ps-cap-mod:not(.ps-is-active) .ps-mod-search { grid-template-columns: 1fr } .ps-cap-mod:not(.ps-is-active) :is(.ps-mod-q, .ps-mod-ai, .ps-mod-result p) { display: none } .ps-cap-mod:not(.ps-is-active) .ps-mod-result { padding: var(--s3) } .ps-cap-mod:not(.ps-is-active) .ps-mod-result strong { font-size: 14px } .ps-mod-log { display: grid; gap: 8px } .ps-mod-log li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s3); row-gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; transition: border-color .5s ease, background-color .5s ease } .ps-mod-log li span { grid-row: span 2; color: var(--purple); font-weight: 500 } .ps-mod-log li b { font-weight: 600 } .ps-mod-log li em { font-style: normal; color: var(--text-2); font-size: 12px } .ps-mod-log li.ps-is-new { border-color: rgba(104, 64, 255, .45); background: rgba(104, 64, 255, .04) } .ps-mod-auto-sum { display: grid; gap: 6px } .ps-mod-auto-sum li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 7px 10px; background: var(--surface-alt); border-radius: var(--r-sm) } .ps-mod-auto-sum span { color: var(--text-2) } .ps-cap-mod.ps-is-active .ps-mod-auto-sum { display: none } .ps-cap-mod:not(.ps-is-active) .ps-mod-log { display: none } @media (max-width:1023px) { .ps-cap-board { grid-template-columns: 1fr 1fr } .ps-cap-tabs { grid-template-columns: 1fr 1fr 1fr } .ps-mod-match, .ps-mod-book, .ps-mod-search { grid-template-columns: 1fr } } @media (max-width:599px) { .ps-cap-tabs { grid-template-columns: 1fr 1fr } .ps-cap-tab:last-of-type { grid-column: 1/-1 } .ps-mod-profile, .ps-mod-filter, .ps-mod-cal, .ps-mod-intake { padding: var(--s4) } .ps-mod-log li { grid-template-columns: 56px minmax(0, 1fr); padding: 8px 10px } } .ps-dialog { border: 0; padding: 0; border-radius: var(--r-xl); max-width: min(520px, calc(100vw - 32px)); background: var(--bg); color: var(--text) } .ps-dialog::backdrop { background: rgba(19, 19, 19, .7) } .ps-dialog-inner { padding: var(--s8); display: grid; gap: var(--s4) } .ps-dialog-flow { display: grid; gap: var(--s2); border-top: 1px solid var(--border); padding-top: var(--s4); font-size: var(--fs-sm) } .ps-dialog-flow li { display: flex; gap: var(--s3); align-items: center } .ps-dialog-flow .ps-sw { background: var(--purple) } .ps-dialog-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2) } .ps-fd-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6) var(--s16); align-items: end } .ps-fd-head>div { display: grid; gap: var(--s6) } .ps-fd-app { margin-top: var(--s12); display: grid; gap: var(--s5) } .ps-fd-toolbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--s5) var(--s10); padding: var(--s6); border: 1px solid var(--line-dark); border-radius: var(--r-xl); background: rgba(250, 250, 250, .03) } .ps-fd-toolbar .ps-fd-group:first-child { grid-column: 1/-1; padding-bottom: var(--s5); border-bottom: 1px solid var(--line-dark) } .ps-fd-group { display: grid; gap: var(--s3); align-content: start; min-width: 0 } .ps-fd-group-toggle { justify-self: end; align-self: end } .ps-fd-glabel { font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2) } .ps-fd-chips { display: flex; gap: var(--s2); flex-wrap: wrap } .ps-filter { display: inline-flex; align-items: center; gap: var(--s2); padding: .5rem .875rem; min-height: 2.625rem; border-radius: .25rem; border: 1px solid rgba(250, 250, 250, .14); background: 0 0; color: var(--muted-on-dark); font-size: var(--fs-sm); font-weight: 500; transition: background-color .3s ease, border-color .3s ease, color .3s ease } .ps-filter:hover { border-color: rgba(250, 250, 250, .32) } .ps-filter.ps-is-active { background: var(--on-dark); color: var(--black); border-color: var(--on-dark) } .ps-fd-toggle { display: inline-flex; align-items: center; gap: var(--s3); min-height: 2.625rem; padding: 0; background: 0 0; border: 0; color: var(--muted-on-dark); font-size: var(--fs-sm); font-weight: 500; text-align: left } .ps-fd-toggle i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 22px; background: rgba(250, 250, 250, .14); border: 1px solid rgba(250, 250, 250, .2); transition: background-color .3s ease, border-color .3s ease } .ps-fd-toggle i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-dark); transition: transform .4s var(--ease) } .ps-fd-toggle[aria-checked=true] { color: var(--on-dark) } .ps-fd-toggle[aria-checked=true] i { background: var(--purple); border-color: var(--purple) } .ps-fd-toggle[aria-checked=true] i::after { transform: translateX(18px) } .ps-fd-status { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap } .ps-fd-count { font-size: var(--fs-sm); color: var(--muted-on-dark); margin-right: auto } .ps-fd-count b { font: 600 22px/1"Inter Tight", sans-serif; color: var(--on-dark); margin-right: 4px } .ps-fd-clear { background: 0 0; border: 0; padding: 10px 4px; min-height: 44px; color: var(--lilac); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 4px } .ps-fd-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--s4); align-items: start } .ps-fd-results { min-width: 0 } .ps-fd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) } .ps-fc { min-width: 0 } .ps-fc[hidden] { display: none } .ps-fc-btn { width: 100%; height: 100%; display: grid; gap: var(--s4); align-content: start; text-align: left; padding: var(--s5); border-radius: var(--r-xl); border: 1px solid var(--line-dark); background: rgba(250, 250, 250, .03); color: var(--on-dark); transition: border-color .35s ease, background-color .35s ease } .ps-fc-btn:hover { border-color: rgba(250, 250, 250, .26); background: rgba(250, 250, 250, .05) } .ps-fc-btn.ps-is-selected { border-color: var(--lilac); background: rgba(104, 64, 255, .12) } .ps-fc-top { display: flex; gap: var(--s3); align-items: center; min-width: 0 } .ps-fc-top .ps-av { width: 44px; height: 44px; font-size: 13px } .ps-fc-who { display: grid; gap: 3px; min-width: 0 } .ps-fc-name { font: 600 18px/1.15"Inter Tight", sans-serif; letter-spacing: -.015em } .ps-fc-title { font-size: 13px; color: var(--muted-on-dark); overflow-wrap: anywhere } .ps-fc-tags { display: flex; flex-wrap: wrap; gap: 6px } .ps-fc-tags i { font-style: normal; font-size: 12px; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid rgba(169, 148, 255, .35); color: #d9d0ff } .ps-fc-meta { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--line-dark); padding-top: var(--s3) } .ps-fc-next { color: var(--on-dark) } .ps-fd-empty { display: grid; gap: var(--s3); justify-items: start; padding: var(--s8); border: 1px dashed rgba(250, 250, 250, .2); border-radius: var(--r-xl); color: var(--muted-on-dark) } .ps-fd-empty .ps-h4 { color: var(--on-dark) } .ps-fd-panel { position: sticky; top: calc(var(--nav-h) + var(--s4)); display: grid; gap: var(--s4); align-content: start; padding: var(--s6); border-radius: var(--r-xl); border: 1px solid var(--line-dark); background: rgba(250, 250, 250, .05); min-width: 0 } .ps-fd-p-head { display: flex; gap: var(--s4); align-items: center } .ps-fd-p-head .ps-eyebrow { color: var(--text-2) } .ps-fd-p-name { margin-top: 6px } .ps-fd-p-title { font-size: var(--fs-sm); color: var(--muted-on-dark); margin-top: 4px } .ps-fd-p-about { font-size: var(--fs-sm); color: var(--muted-on-dark) } .ps-fd-p-dl { display: grid; border-top: 1px solid var(--line-dark) } .ps-fd-p-dl>div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); padding: var(--s3)0; border-bottom: 1px solid var(--line-dark); font-size: var(--fs-sm) } .ps-fd-p-dl dt { font: 500 var(--fs-eyebrow-sm)/1.6"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2) } .ps-fd-tags { display: flex; flex-wrap: wrap; gap: 6px } .ps-fd-tags li { font-size: 12px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(169, 148, 255, .16); color: #e4ddff } .ps-fd-slots { display: grid; gap: var(--s3) } .ps-fd-slots .ps-eyebrow { color: var(--text-2) } .ps-fd-slot-row { display: flex; flex-wrap: wrap; gap: var(--s2) } .ps-fd-slot { min-height: 2.625rem; padding: .5rem .875rem; border-radius: .25rem; border: 1px solid rgba(250, 250, 250, .16); background: 0 0; color: var(--on-dark); font-size: var(--fs-sm); transition: border-color .3s ease, background-color .3s ease } .ps-fd-slot:hover { border-color: rgba(250, 250, 250, .32) } .ps-fd-slot.ps-is-on { border-color: var(--lilac); background: rgba(104, 64, 255, .3) } .ps-fd-note { font-size: 12px; color: var(--text-2) } .ps-fd-panel.ps-is-dim>* { opacity: .35 } .ps-dialog-flow { gap: var(--s3) } .ps-dialog-flow li { align-items: flex-start } .ps-dialog-flow li>span { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(104, 64, 255, .12); color: var(--purple); font-size: 12px; font-weight: 600 } .ps-dialog-flow li b { display: block; font-weight: 600; margin-bottom: 2px } .ps-im-cta { margin-top: var(--s10) } @media (max-width:1279px) { .ps-fd-toolbar { grid-template-columns: auto minmax(0, 1fr) } .ps-fd-group-toggle { grid-column: 1/-1; justify-self: start } } @media (max-width:1023px) { .ps-fd-head { grid-template-columns: 1fr } .ps-fd-stage { grid-template-columns: 1fr } .ps-fd-panel { position: static } } @media (max-width:767px) { .ps-fd-toolbar { grid-template-columns: 1fr; padding: var(--s4); gap: var(--s4) } .ps-fd-grid { grid-template-columns: 1fr } .ps-filter { padding: .5rem .75rem } .ps-fd-status .ps-chip { white-space: normal } .ps-fd-p-dl>div { grid-template-columns: 1fr; gap: 4px } .ps-fd-panel { padding: var(--s5) } } .ps-fd-wait { font-size: var(--fs-sm); color: var(--muted-on-dark) } .ps-sj-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6) var(--s16); align-items: end } .ps-sj-head .ps-eyebrow { grid-column: 1/-1 } .ps-sj-lede { opacity: .72 } .ps-sj-app { margin-top: var(--s12) } @media (min-width:1024px) { .ps-sj-sticky { position: sticky; top: 72px; z-index: 5; background: var(--bg); padding-bottom: var(--s2) } } .ps-sj-controls { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: var(--s3) } .ps-sj-stages { display: flex; gap: var(--s1); flex-wrap: wrap } .ps-sj-stages button { display: inline-flex; gap: var(--s2); align-items: baseline; padding: .5625rem .9375rem; min-height: 2.625rem; border-radius: .25rem; border: 1px solid transparent; background: 0 0; font: 500 var(--fs-sm)/1.2"Inter", sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); transition: color .2s ease, background-color .2s ease, border-color .2s ease } .ps-sj-stages button span { font-size: var(--fs-eyebrow-sm) } .ps-sj-stages button:hover { color: var(--text) } .ps-sj-stages button.ps-is-done { color: var(--text) } .ps-sj-stages button.ps-is-active { background: var(--dark); color: var(--on-dark) } .ps-sj-stages button.ps-is-active span { color: var(--green) } .ps-sj-replay { display: inline-flex; gap: .5rem; align-items: center; padding: .5625rem .9375rem; min-height: 2.625rem; border: 1px solid var(--border); border-radius: .25rem; background: 0 0; font: 400 .65rem/1.4rem"Inconsolata", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase } .ps-sj-replay:hover { background: var(--surface-alt) } .ps-sj-replay svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round } .ps-sj-caption { margin-top: var(--s5); max-width: 46em; min-height: 3.2em } .ps-sj-caption b { font-weight: 600 } .ps-sj-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--s16) var(--s12); margin-top: var(--s8); padding: var(--s4)0 } .ps-sj-board>[data-sj-card]:nth-of-type(4) { grid-column: 3; grid-row: 2 } .ps-sj-board>[data-sj-card]:nth-of-type(5) { grid-column: 2; grid-row: 2 } .ps-sj-board>[data-sj-card]:nth-of-type(6) { grid-column: 1; grid-row: 2 } .ps-sj-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0 } .ps-sj-path-bg { fill: none; stroke: var(--grey); stroke-width: 1.5; stroke-dasharray: 4 6 } .ps-sj-path-fg { fill: none; stroke: var(--purple); stroke-width: 1.5 } .ps-sj-signal { position: absolute; z-index: 3; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0-7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px rgba(104, 64, 255, .18); pointer-events: none; opacity: 0 } .ps-sj-packet { position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none; font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; background: var(--dark); color: var(--on-dark); padding: 8px 10px; border-radius: var(--r-pill); white-space: nowrap; opacity: 0; border: 1px solid var(--purple) } .ps-sj-card { position: relative; z-index: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s4); display: grid; gap: var(--s3); align-content: start; transition: border-color .3s ease, opacity .4s ease; min-height: 210px } .ps-sj-card header { display: flex; justify-content: space-between; align-items: center; gap: var(--s2) } .ps-sj-card .ps-tag { font: 500 var(--fs-eyebrow-sm)/1"Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2) } .ps-sj-card.ps-is-on { border-color: var(--purple) } .ps-sj-card.ps-is-on .ps-tag { color: var(--purple) } .ps-sj-board.ps-is-running .ps-sj-card:not(.ps-is-on):not(.ps-is-done) { opacity: .45 } .ps-sj-ad { display: grid; gap: 6px; font-size: 12px } .ps-sj-ad img { border-radius: var(--r-md); aspect-ratio: 16/7; object-fit: cover; width: 100% } .ps-sj-ad b { font-weight: 600 } .ps-sj-ad-btn { justify-self: start; padding: 6px 10px; border-radius: var(--r-md); background: var(--dark); color: var(--on-dark); font-weight: 500; font-size: 11px } .ps-sj-web { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border) } .ps-sj-web-hero { position: relative; aspect-ratio: 16/8 } .ps-sj-web-hero img { width: 100%; height: 100%; object-fit: cover } .ps-sj-web-hero b { position: absolute; left: 10px; bottom: 10px; background: var(--green); color: var(--black); font-size: 11px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-md) } .ps-sj-web-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px } .ps-sj-web-row i { height: 24px; background: var(--surface-alt); border-radius: var(--r-sm) } .ps-sj-map { max-height: 150px } .ps-sj-rec { display: grid; gap: 0; font-size: 12px } .ps-sj-rec div { display: flex; justify-content: space-between; gap: var(--s3); padding: 7px 0; border-bottom: 1px solid var(--border) } .ps-sj-rec dt { color: var(--text-2) } .ps-sj-rec dd { font-weight: 500; text-align: right } .ps-sj-seq { display: grid; gap: 8px; font-size: 12px } .ps-sj-seq li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 8px; border-radius: var(--r-md); background: var(--surface-alt); align-items: center } .ps-sj-seq li span { color: var(--purple); font-weight: 500 } .ps-sj-dash { display: grid; gap: 8px; font-size: 12px } .ps-sj-dash-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 6px } .ps-sj-dash-row b { font: 600 18px/1"Inter Tight", sans-serif; letter-spacing: -.02em } .ps-sj-dash-bar { height: 8px; border-radius: 2px; background: var(--surface-alt); overflow: hidden } .ps-sj-dash-bar i { display: block; height: 100%; width: 100%; background: var(--purple); transform-origin: left; transform: scaleX(.62) } .ps-sj-dash-status { display: flex; gap: 8px; align-items: center; font-weight: 500 } .ps-sj-dash-status .ps-sw { background: var(--purple) } .ps-sj-note { margin-top: var(--s6); font-size: 12px; color: var(--text-2) } @media (max-width:1023px) { .ps-sj-head { grid-template-columns: 1fr } .ps-sj-board { grid-template-columns: 1fr 1fr; gap: var(--s10) var(--s6) } .ps-sj-board>[data-sj-card]:nth-of-type(n) { grid-column: auto; grid-row: auto } } @media (max-width:767px) { .ps-sj-controls { border: 0; padding: 0 } .ps-sj-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 4px } .ps-sj-stages button { flex-direction: column; align-items: center; padding: 8px 2px; font-size: 10px; letter-spacing: .06em; border-radius: .25rem; border-color: var(--border) } .ps-sj-replay { width: 100%; justify-content: center } .ps-sj-board { grid-template-columns: 1fr; gap: var(--s8); padding-left: var(--s8) } .ps-sj-card { min-height: 0 } } .ps-sj-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s14) var(--s8) } .ps-sj-board>[data-sj-card]:nth-of-type(n) { grid-column: auto; grid-row: auto } .ps-sj-board>[data-sj-card]:nth-of-type(5) { grid-column: 4; grid-row: 2 } .ps-sj-board>[data-sj-card]:nth-of-type(6) { grid-column: 3; grid-row: 2 } .ps-sj-board>[data-sj-card]:nth-of-type(7) { grid-column: 2; grid-row: 2 } .ps-sj-board>[data-sj-card]:nth-of-type(8) { grid-column: 1; grid-row: 2 } .ps-sj-stages button { padding: .5rem .7rem; font-size: 13px; letter-spacing: .08em } .ps-sj-card { min-height: 220px; transition: border-color .5s ease, opacity .6s ease } .ps-sj-board.ps-is-running .ps-sj-card:not(.ps-is-on):not(.ps-is-done) { opacity: .5 } .ps-sj-card .ps-tag-auto { color: var(--purple); background: rgba(104, 64, 255, .08); padding: 4px 7px; border-radius: var(--r-pill) } .ps-sj-packet { border-color: var(--purple) } .ps-sj-q { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--grey); border-radius: var(--r-pill); font-size: 12px } .ps-sj-res { display: grid; gap: 3px; font-size: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-alt) } .ps-sj-res small { color: var(--text-2); font-size: 11px } .ps-sj-res b { color: var(--purple); font-weight: 600; font-size: 13px } .ps-sj-res span { color: var(--text-2) } .ps-sj-web-hero b { background: var(--green); border-radius: .25rem } .ps-sj-crisis { margin: 0; padding: 7px 10px; font-size: 11px; background: var(--dark); color: var(--on-dark) } .ps-sj-chips { display: flex; gap: 6px; flex-wrap: wrap } .ps-sj-chips i { font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--dark); color: var(--on-dark) } .ps-sj-people { display: grid; gap: 6px } .ps-sj-person { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--border); font-size: 12px; transition: border-color .5s ease, background-color .5s ease } .ps-sj-person b { display: block; font-weight: 600 } .ps-sj-person small { color: var(--text-2) } .ps-sj-person.ps-is-pick { border-color: var(--purple); background: rgba(104, 64, 255, .05) } .ps-sj-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px } .ps-sj-slots i { font-style: normal; text-align: center; padding: 7px 0; border: 1px solid var(--grey); border-radius: var(--r-sm); font-size: 12px; font-variant-numeric: tabular-nums } .ps-sj-slots i.ps-is-on { border-color: var(--purple); color: var(--purple); background: rgba(104, 64, 255, .08) } .ps-sj-form { display: grid; gap: 6px; font-size: 12px; counter-reset: f } .ps-sj-form li { display: flex; align-items: center; gap: 8px; color: var(--text-2) } .ps-sj-form li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--grey); flex: none } .ps-sj-form li.ps-is-done { color: var(--text) } .ps-sj-form li.ps-is-done::before { background: var(--purple); border-color: var(--purple) } .ps-sj-lock { font-size: 11px; color: var(--text-2); border-top: 1px solid var(--border); padding-top: 8px } .ps-sj-sms { display: grid; gap: 8px; font-size: 12px; line-height: 1.4 } .ps-sj-sms p { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-alt); max-width: 94% } .ps-sj-sms .ps-sj-sms-me { justify-self: end; padding: 6px 14px; border-radius: 14px 14px 4px 14px; background: var(--purple); color: #fff } .ps-sj-photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/9 } .ps-sj-photo img { width: 100%; height: 100%; object-fit: cover } .ps-sj-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500 } .ps-sj-seq li span { color: var(--purple) } @media (max-width:1279px) { .ps-sj-stages button { padding: .5rem .5rem; font-size: 12px; letter-spacing: .06em } } @media (max-width:1023px) { .ps-sj-board { grid-template-columns: 1fr 1fr; gap: var(--s10) var(--s6) } .ps-sj-board>[data-sj-card]:nth-of-type(n) { grid-column: auto; grid-row: auto } } @media (max-width:767px) { .ps-sj-stages { grid-template-columns: repeat(4, minmax(0, 1fr)) } .ps-sj-board { grid-template-columns: 1fr; gap: var(--s8); padding-left: var(--s8) } } .ps-sc { background: var(--black); padding-top: var(--section-pad); overflow: hidden } .ps-sc-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s6) var(--s16); align-items: end; margin-bottom: var(--s12) } .ps-sc-head>div { display: grid; gap: var(--s6) } .ps-sc-lede { color: var(--muted-on-dark); max-width: 30em } .ps-sc-stage { position: relative } .ps-sc-media { position: absolute; inset: 0 0 auto 0; height: clamp(560px, 88svh, 920px); z-index: 2; pointer-events: none } .ps-sc-canvas { width: 100%; height: 100%; opacity: 0 } .ps-sc-slides { position: relative } .ps-sc-slide { position: relative; min-height: clamp(560px, 88svh, 920px); display: flex; align-items: flex-end; overflow: hidden } .ps-sc-img { position: absolute; inset: 0; z-index: 0; overflow: hidden } .ps-sc-img img { width: 100%; height: 115%; object-fit: cover } .ps-sc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19, 19, 19, .92)0, rgba(19, 19, 19, .55) 38%, rgba(19, 19, 19, .15) 70%), linear-gradient(0deg, rgba(19, 19, 19, .85)0, rgba(19, 19, 19, 0) 45%) } .ps-sc-slide-inner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s12); align-items: end; padding-bottom: calc(var(--s24) + 24px); width: 100% } .ps-sc-text { display: grid; gap: var(--s5) } .ps-sc-text .ps-eyebrow { color: var(--muted-on-dark) } .ps-sc-title { overflow: hidden } .ps-sc-title-inner { display: block } .ps-sc-sum { color: var(--muted-on-dark); max-width: 30em } .ps-sc-tags { display: flex; flex-wrap: wrap; gap: var(--s2) } .ps-sc-tags li { font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid rgba(250, 250, 250, .18); color: var(--muted-on-dark) } .ps-sc-device { position: relative; justify-self: end; width: min(100%, 720px); padding-left: 17%; padding-bottom: 5% } .ps-laptop-screen { position: relative; aspect-ratio: 16/10; border: 10px solid #131313; border-bottom-width: 14px; border-radius: 14px 14px 4px 4px; overflow: hidden; background: #131313; container-type: inline-size; box-shadow: 0 0 0 1px rgba(250, 250, 250, .12) } .ps-laptop-base { height: 12px; margin: 0-6%; background: linear-gradient(#3d3d3d, #282828); border-radius: 0 0 12px 12px; box-shadow: 0 0 0 1px rgba(250, 250, 250, .08) } .ps-phone { position: absolute; left: 0; bottom: 0; width: 19%; aspect-ratio: 9/19; border: 5px solid #131313; border-radius: 18px; overflow: hidden; background: #131313; box-shadow: 0 0 0 1px rgba(250, 250, 250, .16) } .ps-phone-screen { height: 100%; container-type: inline-size } .ps-mini-site { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; background-color: var(--black); background-position: center; background-size: cover; color: var(--on-dark); padding: 4cqw 5cqw; gap: 3cqw } .ps-ms-nav { display: flex; align-items: center; gap: 3cqw; font-size: 2.2cqw } .ps-ms-nav b { font: 600 3cqw/1"Inter Tight", sans-serif; margin-right: auto; letter-spacing: -.02em } .ps-ms-nav span { width: 6cqw; height: .6cqw; background: rgba(250, 250, 250, .4); border-radius: 1px } .ps-ms-nav em { background: var(--green); color: var(--black); padding: 1cqw 2cqw; border-radius: 99px } .ps-ms-hero { align-self: center; display: grid; gap: 2.4cqw; max-width: 64% } .ps-ms-eyebrow { font: 500 2cqw/1"Inter", sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-on-dark) } .ps-ms-h { font: 600 8cqw/1"Inter Tight", sans-serif; letter-spacing: -.035em } .ps-ms-btn { justify-self: start; background: var(--on-dark); color: var(--black); font-size: 2.2cqw; padding: 1.6cqw 2.8cqw; border-radius: 1.6cqw; font-weight: 500 } .ps-ms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw } .ps-ms-cards i { height: 9cqw; border-radius: 1.6cqw; background: rgba(250, 250, 250, .12); border: 1px solid rgba(250, 250, 250, .14) } .ps-ms-map { position: absolute; right: 4cqw; top: 14cqw; width: 34cqw; height: auto; background: rgba(19, 19, 19, .7); border-radius: 2cqw; padding: 1.5cqw } .ps-ms-map .ps-ml { stroke: rgba(250, 250, 250, .35) } .ps-ms-map .ps-ml-available { fill: rgba(161, 255, 98, .5) } .ps-ms-map .ps-ml-hold { fill: rgba(104, 64, 255, .7) } .ps-ms-map .ps-ml-sold { fill: rgba(250, 250, 250, .12) } .ps-ms-count { display: flex; gap: 2cqw } .ps-ms-count span { display: grid; gap: .6cqw; padding: 2cqw; border-radius: 1.6cqw; background: rgba(19, 19, 19, .7); border: 1px solid rgba(250, 250, 250, .14); font-size: 1.8cqw; text-transform: uppercase; letter-spacing: .12em; color: var(--text-2) } .ps-ms-count b { font: 600 5cqw/1"Inter Tight", sans-serif; color: var(--green); letter-spacing: -.03em } .ps-phone .ps-mini-site { padding: 8cqw 7cqw } .ps-phone .ps-ms-nav span { display: none } .ps-phone .ps-ms-nav b { font-size: 9cqw } .ps-phone .ps-ms-nav em { font-size: 6cqw; padding: 2cqw 4cqw } .ps-phone .ps-ms-hero { max-width: 100%; gap: 5cqw } .ps-phone .ps-ms-eyebrow { font-size: 5.5cqw } .ps-phone .ps-ms-h { font-size: 15cqw } .ps-phone .ps-ms-btn { font-size: 6cqw; padding: 4cqw 6cqw; border-radius: 4cqw } .ps-phone .ps-ms-map { position: static; width: 100% } .ps-phone .ps-ms-cards i { height: 14cqw } .ps-phone .ps-ms-count span { font-size: 4cqw; padding: 3cqw } .ps-phone .ps-ms-count b { font-size: 9cqw } .ps-sc-controls { position: absolute; left: 0; right: 0; bottom: var(--s8); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: var(--s4) } .ps-sc-index { display: flex; gap: var(--s2) } .ps-sc-index button { position: relative; display: inline-flex; gap: var(--s2); align-items: center; padding: 10px 0; min-height: 44px; background: 0 0; border: 0; color: var(--text-2); font: 500 var(--fs-sm)/1"Inter", sans-serif; min-width: 96px; text-align: left } .ps-sc-index button::after { content: ""; position: absolute; left: 0; right: 12px; bottom: 6px; height: 1px; background: rgba(250, 250, 250, .16) } .ps-sc-index button i { position: absolute; left: 0; bottom: 6px; height: 1px; width: calc(100% - 12px); background: var(--green); transform: scaleX(0); transform-origin: left; z-index: 1 } .ps-sc-index button.ps-is-active { color: var(--on-dark) } .ps-sc-arrows { display: flex; gap: var(--s2) } html.ps-js .ps-sc-slides { display: grid } html.ps-js .ps-sc-slide { grid-area: 1/1; visibility: hidden } html.ps-js .ps-sc-slide.ps-is-active { visibility: visible } .ps-no-js .ps-sc-controls, html:not(.ps-js) .ps-sc-controls { display: none } @media (max-width:1023px) { .ps-sc-head { grid-template-columns: 1fr } .ps-sc-media { height: 56svh } .ps-sc-slide { min-height: 0; display: block } .ps-sc-img { position: relative; height: 56svh } .ps-sc-slide-inner { grid-template-columns: 1fr; padding-top: 0; padding-bottom: calc(var(--s24) + var(--s4)); margin-top: -26svh; gap: var(--s8) } .ps-sc-device { order: -1; justify-self: center; width: min(92%, 520px); padding-left: 14% } .ps-sc-text { gap: var(--s4) } .ps-sc-controls { bottom: var(--s6) } .ps-sc-index button { min-width: 64px } } @media (max-width:767px) { .ps-sc-img { height: 48svh } .ps-sc-media { height: 48svh } .ps-sc-slide-inner { margin-top: -22svh } .ps-sc-index button span.ps-t { display: none } } .ps-sc-index button i { background: var(--lilac) } .ps-sc-tags li { border-color: rgba(169, 148, 255, .3) } .ps-mini-site { grid-template-rows: auto 1fr auto auto } .ps-ms-nav em { background: var(--green); border-radius: .6cqw } .ps-ms-btn { background: var(--green); border-radius: .6cqw } .ps-ms-crisis { margin: 0-5cqw -4cqw; padding: 1.4cqw 5cqw; background: rgba(19, 19, 19, .88); font-size: 1.8cqw; color: var(--on-dark); border-top: 1px solid rgba(250, 250, 250, .12) } .ps-ms-slots, .ps-ms-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw } .ps-ms-slots span, .ps-ms-paths span { padding: 2cqw; border-radius: 1.4cqw; background: rgba(19, 19, 19, .7); border: 1px solid rgba(250, 250, 250, .16); font-size: 2cqw; color: var(--muted-on-dark) } .ps-ms-slots span.ps-is-on { border-color: var(--lilac); background: rgba(104, 64, 255, .45); color: var(--on-dark) } .ps-ms-paths span { font: 600 2.4cqw/1.1"Inter Tight", sans-serif; color: var(--on-dark); padding-block: 3cqw } .ps-ms-finder { display: flex; align-items: center; gap: 1.6cqw; flex-wrap: wrap } .ps-ms-chip { padding: 1.2cqw 2.4cqw; border-radius: 4cqw; background: rgba(250, 250, 250, .9); color: var(--black); font-size: 2cqw } .ps-ms-avs { display: flex; margin-left: 1cqw } .ps-ms-avs i { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; margin-left: -1.4cqw; border-radius: 50%; font: 600 2cqw/1"Inter", sans-serif; font-style: normal; color: var(--black); border: .4cqw solid rgba(19, 19, 19, .8) } .ps-ms-avs .ps-av-1 { background: #d9cbb5 } .ps-ms-avs .ps-av-2 { background: #b8c4ae } .ps-ms-avs .ps-av-5 { background: #a9b9b7 } .ps-phone .ps-ms-crisis { margin: 0-7cqw -8cqw; padding: 3cqw 7cqw; font-size: 4.4cqw } .ps-phone .ps-ms-slots, .ps-phone .ps-ms-paths { grid-template-columns: 1fr; gap: 3cqw } .ps-phone .ps-ms-slots span:nth-child(n+3), .ps-phone .ps-ms-paths span:nth-child(n+3) { display: none } .ps-phone .ps-ms-slots span, .ps-phone .ps-ms-paths span { font-size: 5cqw; padding: 3.4cqw } .ps-phone .ps-ms-chip { font-size: 5cqw; padding: 2.4cqw 4cqw } .ps-phone .ps-ms-avs i { width: 14cqw; height: 14cqw; font-size: 4.6cqw } .ps-phone .ps-ms-h { font-size: 13cqw } .ps-why-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s16); align-items: center } .ps-why-copy { display: grid; gap: var(--s6) } .ps-why-p { max-width: 34em; color: var(--text); opacity: .72 } .ps-why-figure { position: relative; margin: 0; aspect-ratio: 5/6 } .ps-why-img { position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-alt) } .ps-why-img img { width: 100%; height: 118%; object-fit: cover; object-position: 62% 50% } .ps-why-img::after { content: ""; position: absolute; inset: 0; background: rgba(19, 19, 19, .42) } .ps-why-diagram { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible } .ps-why-lines path { fill: none; stroke: rgba(250, 250, 250, .7); stroke-width: 1; vector-effect: non-scaling-stroke } .ps-why-nodes g { cursor: default } .ps-why-nodes rect { fill: rgba(19, 19, 19, .82); stroke: rgba(250, 250, 250, .3); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .25s ease, stroke .25s ease } .ps-why-nodes text { font: 500 8px/1"Inter", sans-serif; letter-spacing: .14em; fill: var(--on-dark); text-anchor: middle; text-transform: uppercase } .ps-why-nodes g.ps-is-hot rect { fill: var(--green); stroke: var(--green) } .ps-why-nodes g.ps-is-hot text { fill: var(--black) } .ps-why-hub { fill: var(--on-dark) } .ps-why-hub-t { font: 600 10px/1"Inter Tight", sans-serif; letter-spacing: .1em; text-anchor: middle; fill: var(--black) } .ps-why-figure figcaption { position: absolute; left: var(--s5); bottom: var(--s5); color: var(--muted-on-dark) } .ps-why-list { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); margin-top: var(--s8) } .ps-why-list li { display: grid; gap: var(--s3); align-content: start; padding: var(--s8) var(--s8) var(--s8)0; border-bottom: 1px solid var(--border); transition: background-color .25s ease } .ps-why-list li:not(:nth-child(3n+1)) { padding-left: var(--s8); border-left: 1px solid var(--border) } .ps-why-list .ps-num { font: 500 var(--fs-sm)/1"Inter", sans-serif; color: var(--purple) } .ps-why-list p { color: var(--text); opacity: .72; font-size: var(--fs-body) } .ps-why-list li.ps-is-hot { background: var(--surface-alt) } @media (max-width:1023px) { .ps-why-grid { grid-template-columns: 1fr; gap: var(--s10) } .ps-why-figure { aspect-ratio: 4/4.2 } .ps-why-list { grid-template-columns: 1fr 1fr; margin-top: 0 } .ps-why-list li, .ps-why-list li:not(:nth-child(3n+1)) { padding: var(--s6) var(--s6) var(--s6)0; border-left: 0 } .ps-why-list li:nth-child(2n) { padding-left: var(--s6); border-left: 1px solid var(--border) } } @media (max-width:600px) { .ps-why-list { grid-template-columns: 1fr } .ps-why-list li, .ps-why-list li:nth-child(2n) { padding: var(--s5)0; border-left: 0 } } .ps-faq { background: var(--surface-alt); color: var(--text) } .ps-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); align-items: start } .ps-faq-head { display: grid; gap: var(--s6); position: sticky; top: calc(var(--nav-h) + var(--s8)) } .ps-faq-lede { opacity: .72 } .ps-faq-list { border-top: 1px solid var(--grey) } .ps-faq-item { border-bottom: 1px solid var(--grey) } .ps-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); padding: var(--s6)0; cursor: pointer; list-style: none; min-height: 48px } .ps-faq-item summary::-webkit-details-marker { display: none } .ps-faq-q { font: 600 var(--fs-h4)/1.15"Inter Tight", sans-serif; letter-spacing: -.028em; margin: 0; transition: color .2s ease } .ps-faq-item summary:hover .ps-faq-q { color: var(--purple) } .ps-faq-icon { position: relative; flex: none; width: 2.625rem; height: 2.625rem; border-radius: .25rem; border: 1px solid var(--grey); background: #fff; transition: background-color .2s ease, border-color .2s ease } .ps-faq-icon::before, .ps-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0-6px; background: var(--text); transition: transform .3s var(--ease), background-color .2s ease } .ps-faq-icon::after { transform: rotate(90deg) } .ps-faq-item[open] .ps-faq-icon { background: var(--dark); border-color: var(--dark) } .ps-faq-item[open] .ps-faq-icon::before, .ps-faq-item[open] .ps-faq-icon::after { background: var(--green) } .ps-faq-item[open] .ps-faq-icon::after { transform: rotate(0deg) } .ps-faq-a { max-width: 40em; padding: 0 calc(2.625rem + var(--s6)) var(--s6)0; color: var(--text); opacity: .72 } @media (max-width:1023px) { .ps-faq-grid { grid-template-columns: 1fr; gap: var(--s10) } .ps-faq-head { position: static } .ps-faq-a { padding-right: 0 } } .ps-cta { position: relative; overflow: hidden; isolation: isolate } .ps-cta-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; z-index: 0; opacity: .85 } .ps-cta-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(19, 19, 19, .9)0, rgba(19, 19, 19, .55) 45%, rgba(19, 19, 19, .7) 100%), linear-gradient(0deg, rgba(19, 19, 19, .6), rgba(19, 19, 19, 0) 40%) } .ps-cta-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s16); align-items: start } .ps-cta-copy { display: grid; gap: var(--s6); align-content: start; position: sticky; top: calc(var(--nav-h) + var(--s8)) } .ps-cta-title { font-size: var(--fs-h1) } .ps-cta-contact { display: grid; gap: var(--s4); margin-top: var(--s4); border-top: 1px solid var(--line-dark); padding-top: var(--s6) } .ps-cta-contact li { display: grid; grid-template-columns: 80px 1fr; align-items: baseline; gap: var(--s4) } .ps-cta-contact a { text-decoration: none; border-bottom: 1px solid rgba(250, 250, 250, .2); justify-self: start; overflow-wrap: anywhere } .ps-cta-contact a:hover { border-color: var(--green) } .ps-cta-form-wrap { background: rgba(19, 19, 19, .78); border: 1px solid var(--line-dark); border-radius: var(--r-xl); padding: var(--s8) } .ps-form-block { margin: 0 } .ps-form { display: grid; gap: var(--s5); margin: 0 } .ps-form-title { margin: 0 } .ps-field { display: grid; gap: var(--s2) } .ps-field label { display: block; margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--muted-on-dark) } .ps-field input, .ps-field textarea, .ps-field select { display: block; width: 100%; height: auto; margin: 0; font: 400 16px/1.4"Inter", sans-serif; color: var(--on-dark); background: rgba(250, 250, 250, .06); border: 1px solid rgba(250, 250, 250, .14); border-radius: var(--r-md); padding: 13px 16px; box-shadow: none; transition: border-color .2s ease, background-color .2s ease; appearance: none; -webkit-appearance: none } .ps-field textarea { resize: vertical; min-height: 112px } .ps-field input:hover, .ps-field textarea:hover, .ps-field select:hover { border-color: rgba(250, 250, 250, .28) } .ps-field input:focus, .ps-field textarea:focus, .ps-field select:focus { outline: 0; border-color: var(--green); background: rgba(250, 250, 250, .09) } .ps-field input:user-invalid, .ps-field textarea:user-invalid, .ps-field select:user-invalid { border-color: var(--coral) } .ps-field select option { color: var(--text); background: var(--bg) } .ps-select { position: relative } .ps-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--muted-on-dark); border-bottom: 1.5px solid var(--muted-on-dark); transform: translateY(-70%) rotate(45deg); pointer-events: none } .ps-form input.ps-btn { width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: .25rem; border: 1px solid transparent; line-height: 1.4rem } .ps-form input.ps-btn-green { background: var(--green); color: var(--black) } .ps-form input.ps-btn-green:hover { background: var(--bg) } .ps-cta .ps-form-success, .ps-cta .ps-form-error { text-align: left; background: 0 0; padding: 0; margin: 0 } .ps-cta .ps-form-success>div { display: grid; gap: var(--s3) } .ps-cta .ps-form-success .ps-h4 { color: var(--on-dark); margin: 0 } .ps-cta .ps-form-success p { color: var(--muted-on-dark); margin: 0 } .ps-cta .ps-form-error { margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--coral); border-radius: var(--r-md); background: rgba(250, 250, 250, .04); color: var(--on-dark); font-size: var(--fs-sm) } .ps-cta .ps-form-error p { margin: 0 } .ps-cta-grid>.w-embed { align-self: stretch } @media (max-width:1023px) { .ps-cta-grid { grid-template-columns: 1fr; gap: var(--s10) } .ps-cta-copy { position: static } .ps-cta-form-wrap { padding: var(--s5) } } [data-magnetic] { will-change: transform } .ps-why-nodes g.ps-is-hot rect { fill: var(--purple); stroke: var(--purple) } .ps-why-nodes g.ps-is-hot text { fill: #fff } .ps-why-img::after { background: rgba(19, 19, 19, .32) } .ps-faq-reviewed { color: var(--text-2) } .ps-faq-item[open] .ps-faq-icon::before, .ps-faq-item[open] .ps-faq-icon::after { background: var(--on-dark) } .ps-cta-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9 } .ps-cta-lines path { fill: none; stroke: rgba(169, 148, 255, .22); stroke-width: 1; vector-effect: non-scaling-stroke } @keyframes breathe-soft { 0%, to { opacity: .35 } 50% { opacity: 1 } } .hx-live .ps-cta-lines g { animation: breathe-soft 12s ease-in-out infinite; animation-delay: calc(var(--i)*-1.2s) } .ps-cta-photo { opacity: .7 } .ps-form-note { font-size: 12px; color: var(--muted-on-dark); margin-top: calc(var(--s2)*-1) } .ps-cta-contact a:hover { border-color: var(--lilac) } .ps-field input:focus, .ps-field textarea:focus, .ps-field select:focus { border-color: var(--lilac) } .ps-sj-photo-wide { aspect-ratio: 16/6 } @media (prefers-reduced-motion:reduce) { :where(.ps-root), :where(.ps-root) *, :where(.ps-root) ::before, :where(.ps-root) ::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; transition-duration: .2s !important; transition-timing-function: ease !important } .ps-cta-lines g { animation: none !important } .ps-dot-green::after { display: none } .ps-btn:hover .ps-btn-arrow, .ps-btn:hover .ps-btn-arrow-ne, .ps-link-arrow:hover svg, .ps-hx-textlink:hover svg, .ps-hx-services a:hover svg { transform: none } .ps-btn:active { transform: none } .ps-fd-toggle i::after { transition: none !important } } .ps-root { overflow-x: clip } .ps-root.ps-hero { margin-top: 0 }