/* pPULSE landing page — global styles
Pulls in the design-system tokens from colors_and_type.css and adds
page-level layout, motion, hover, and reveal rules. */
@import url('colors_and_type.css');
html { scroll-behavior: smooth; }
html, body {
margin: 0;
padding: 0;
background: #fff;
color: var(--pp-fg-2);
font-family: var(--pp-font-sans);
-webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
::selection { background: var(--pp-purple-200); }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { text-decoration: none; color: inherit; }
/* ============== Per-section purple glows ============== */
.app > section { position: relative; }
.app > section > * { position: relative; z-index: 1; }
.app > section::before {
content: '';
position: absolute;
pointer-events: none;
z-index: 0;
/* Stop at 100% (not 72%) so the gradient fades fully to zero by the
closest-side edge. A 72% stop leaves a faint alpha cliff at ~5% that
reads as a visible circular arc, which appears as a horizontal line
where two adjacent sections' glow circles meet near a section boundary. */
background: radial-gradient(closest-side, rgba(200,177,228,0.55) 0%, rgba(200,177,228,0) 100%);
animation: pp-glow-pulse 18s ease-in-out infinite;
will-change: opacity, transform;
}
/* Hero already has its own glow */
.app > section:nth-of-type(1)::before { display: none; }
.app > section:nth-of-type(even)::before {
width: 720px; height: 720px; top: -120px; right: -200px;
}
.app > section:nth-of-type(odd)::before {
width: 760px; height: 760px; bottom: -160px; left: -220px;
background: radial-gradient(closest-side, rgba(232,221,246,0.55) 0%, rgba(232,221,246,0) 100%);
animation-delay: -6s;
}
.app > section:nth-of-type(3)::before { animation-delay: -3s; }
.app > section:nth-of-type(5)::before { animation-delay: -9s; }
.app > section:nth-of-type(7)::before { animation-delay: -12s; }
.app > section:nth-of-type(9)::before { animation-delay: -4s; }
.app > section:nth-of-type(11)::before { animation-delay: -7s; }
/* Companion glow on the opposite corner, periwinkle-blue, pulsing in
opposite phase (-9s = half the 18s period) so the pair cross-fades. */
.app > section::after {
content: '';
position: absolute;
pointer-events: none;
z-index: 0;
background: radial-gradient(closest-side, rgba(176,196,232,0.50) 0%, rgba(176,196,232,0) 100%);
animation: pp-glow-pulse 18s ease-in-out infinite;
will-change: opacity, transform;
}
.app > section:nth-of-type(1)::after { display: none; }
/* Even sections: ::before is top-right, so ::after lives bottom-left */
.app > section:nth-of-type(even)::after {
width: 760px; height: 760px; bottom: -160px; left: -220px;
animation-delay: -9s;
}
/* Odd sections: ::before is bottom-left, so ::after lives top-right */
.app > section:nth-of-type(odd)::after {
width: 720px; height: 720px; top: -120px; right: -200px;
animation-delay: -15s;
}
/* Particle-style pulse: a wandering drift + non-uniform breathe so the
glow reads as a slow-moving cloud of motes rather than a uniform pulse.
Five stops with translate() + scale() trace a soft figure-eight path. */
@keyframes pp-glow-pulse {
0%, 100% { opacity: 0.55; transform: translate(0, 0) scale(0.94); }
25% { opacity: 0.80; transform: translate(8px, -10px) scale(1.02); }
50% { opacity: 1.00; transform: translate(-6px, -18px) scale(1.08); }
75% { opacity: 0.80; transform: translate(10px, -8px) scale(1.04); }
}
/* ============== Preloader ============== */
#preloader {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
z-index: 9999;
background: #ffffff;
transition: opacity 600ms ease, visibility 600ms ease;
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* Children use position: fixed themselves with vh/vw so they center against
the viewport directly. Bypasses any containing-block / parent-size quirks
that broke the previous absolute-with-percentage pattern in DevTools mobile
emulation. The negative-margin pattern keeps the rotate keyframe clean. */
#preloader .pl-ring {
position: fixed;
top: 50vh; left: 50vw;
width: 140px; height: 140px;
margin: -70px 0 0 -70px;
border-radius: 50%;
border: 2px solid rgba(108, 59, 170, 0.12);
border-top-color: var(--pp-purple-600);
animation: pl-spin 1.1s linear infinite;
z-index: 10000;
}
#preloader .pl-logo {
position: fixed;
top: 50vh; left: 50vw;
width: 76px; height: 70px;
margin: -35px 0 0 -38px;
display: block;
z-index: 10001;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
.app { opacity: 0; transition: opacity 700ms ease 80ms; }
.app.is-ready { opacity: 1; }
/* ============== Scroll reveal ============== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal [data-stagger] > * {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }
.reveal.is-in [data-stagger] > *:nth-child(1) { transition-delay: 60ms; }
.reveal.is-in [data-stagger] > *:nth-child(2) { transition-delay: 130ms; }
.reveal.is-in [data-stagger] > *:nth-child(3) { transition-delay: 200ms; }
.reveal.is-in [data-stagger] > *:nth-child(4) { transition-delay: 270ms; }
.reveal.is-in [data-stagger] > *:nth-child(5) { transition-delay: 340ms; }
.reveal.is-in [data-stagger] > *:nth-child(6) { transition-delay: 410ms; }
.reveal.is-in [data-stagger] > *:nth-child(7) { transition-delay: 480ms; }
.reveal.is-in [data-stagger] > *:nth-child(8) { transition-delay: 550ms; }
.reveal.is-in [data-stagger] > *:nth-child(9) { transition-delay: 620ms; }
.reveal.is-in [data-stagger] > *:nth-child(10) { transition-delay: 690ms; }
.reveal.is-in [data-stagger] > *:nth-child(11) { transition-delay: 760ms; }
.reveal.is-in [data-stagger] > *:nth-child(12) { transition-delay: 830ms; }
/* ============== Universal interactive transitions ============== */
.app button {
transition: transform 180ms cubic-bezier(.2,.7,.2,1),
box-shadow 180ms cubic-bezier(.2,.7,.2,1),
background 180ms ease,
color 180ms ease,
filter 180ms ease;
}
.app button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.app button:active { transform: translateY(0); filter: brightness(0.97); }
.app button:focus-visible { outline: 2px solid var(--pp-purple-400); outline-offset: 3px; }
.app a {
transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
}
.app a:hover { color: var(--pp-purple-700); }
/* Anchor-styled buttons must keep their resting text color on hover.
The universal `.app a:hover` rule above (specificity 0,0,2,1) would
otherwise repaint button text purple-700 — invisible on the purple
buttons (navbar Book a demo, hero Start free trial) and an unintended
brand-color flicker on the white pill button. We darken the background
for hover affordance, matching the .pricing-cta / .compare-plan-cta
pattern already established elsewhere in this file. */
.app .btn-primary,
.app .btn-primary:hover,
.app .btn-primary:focus,
.app .btn-primary:active { color: #fff; }
.app .btn-primary:hover { background: var(--pp-purple-700); }
.app .btn-pill-primary,
.app .btn-pill-primary:hover,
.app .btn-pill-primary:focus,
.app .btn-pill-primary:active { color: #fff; }
.app .btn-pill-primary:hover { background: var(--pp-purple-700); }
.app .btn-pill-secondary,
.app .btn-pill-secondary:hover,
.app .btn-pill-secondary:focus,
.app .btn-pill-secondary:active { color: var(--pp-fg-1); }
.app .btn-pill-secondary:hover { background: var(--pp-bg-subtle); border-color: var(--pp-purple-300); }
[data-card] {
transition: transform 240ms cubic-bezier(.2,.7,.2,1),
box-shadow 240ms cubic-bezier(.2,.7,.2,1),
border-color 240ms ease;
}
[data-card]:hover {
transform: translateY(-3px);
box-shadow: 0 14px 38px -12px rgba(43, 22, 72, 0.22);
}
[data-int-tile] { transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 200ms ease, border-color 200ms ease; }
[data-int-tile]:hover { transform: translateY(-2px); }
[data-int-tile] svg { transition: transform 240ms cubic-bezier(.2,.7,.2,1); }
[data-int-tile]:hover svg { transform: scale(1.12); }
.pp-anchor-cta { transform: none !important; }
.pp-anchor-cta svg { transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
.pp-anchor-cta:hover svg { transform: translateX(4px); }
/* Hero device traffic-light buttons */
.pp-traffic [data-tl] {
transition: background 180ms ease, color 180ms ease;
display: flex; align-items: center; justify-content: center;
color: transparent;
font: 700 9px/1 -apple-system, "SF Pro Text", system-ui, sans-serif;
user-select: none;
text-align: center;
}
.pp-traffic [data-tl] span {
display: inline-block;
transform: translateY(-0.5px);
}
/* Hovering any dot lights up all three together (macOS Finder feel). */
.pp-traffic:hover [data-tl="close"] { background: #FF5F57 !important; color: #5C0E08; }
.pp-traffic:hover [data-tl="min"] { background: #FFBD2E !important; color: #6B4A00; }
.pp-traffic:hover [data-tl="max"] { background: #28C840 !important; color: #005A18; }
/* Hero floating cards transition */
.float-card {
transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
/* Hero device float */
@keyframes pp-hero-float {
0%, 100% { transform: translateX(40px) scale(1.12) translateY(0); }
50% { transform: translateX(40px) scale(1.12) translateY(-8px); }
}
.hero-device { animation: pp-hero-float 12s ease-in-out infinite; }
/* Mega menu */
.nav-trigger { position: relative; }
.mega {
position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
width: 720px; background: #fff; border-radius: 18px;
box-shadow: var(--pp-shadow-lg); border: 1px solid var(--pp-line);
padding: 18px;
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
z-index: 200;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 160ms ease;
}
.mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mega--narrow { width: 560px; }
.mega-item {
display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
transition: background 120ms;
}
.mega-item:hover { background: var(--pp-bg-subtle); }
.mega-icon {
width: 36px; height: 36px; border-radius: 10px; background: var(--pp-purple-50);
color: var(--pp-purple-600);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mega-title { font-size: 14px; font-weight: 600; color: var(--pp-fg-1); margin: 0; }
.mega-sub { font-size: 12.5px; color: var(--pp-fg-4); margin: 2px 0 0; line-height: 1.4; }
/* FAQ accordion answer transition */
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 280ms cubic-bezier(.2,.7,.2,1);
}
.faq-answer > div { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > div { padding: 0 0 24px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal, #preloader .pl-ring,
.app > section::before,
.app > section::after,
.hero-device,
.app button, .app a, [data-card], [data-int-tile], [data-int-tile] svg,
.reveal [data-stagger] > * { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; }
.reveal [data-stagger] > * { opacity: 1; transform: none; }
}
/* ============== Layout helpers ============== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
/* ============== TopBar ============== */
.topbar {
position: sticky; top: 0; z-index: 100;
/* Near-opaque so content scrolling under the sticky bar is fully hidden,
not ghosted through. The backdrop-filter keeps a subtle frosted feel
without the bleed-through that 0.86 alpha was producing. */
background: rgba(255,255,255,0.98);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--pp-line);
}
.topbar-inner {
display: flex; align-items: center; justify-content: space-between;
height: 68px; padding: 0 32px; max-width: 1280px; margin: 0 auto;
}
.brand-link { display: flex; align-items: center; gap: 8px; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link {
color: var(--pp-fg-2); cursor: pointer; font-size: 14px; font-weight: 500;
padding: 8px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px;
}
.nav-link[aria-expanded="true"] { background: var(--pp-bg-subtle); }
.btn { border: none; cursor: pointer; font-weight: 600; }
.btn-primary {
background: var(--pp-purple-600); color: #fff; border-radius: 999px;
padding: 9px 18px; font-size: 13.5px;
box-shadow: var(--pp-shadow-purple);
}
.btn-ghost {
background: transparent; color: var(--pp-fg-1); border-radius: 999px;
padding: 9px 14px; font-weight: 500; font-size: 13.5px;
}
/* ============== Hero ============== */
.hero {
position: relative; padding-top: 88px; padding-bottom: 50px; overflow: visible;
}
/* Higher specificity than `.app > section > *` so position/z-index stick. */
.hero > .hero-glow {
position: absolute; top: 0; left: 0; right: 0; bottom: -320px;
background:
/* Periwinkle wash anchored to the top-left corner of the hero,
so the page opens with a soft blue cloud above the headline. */
radial-gradient(55% 60% at 8% 10%, rgba(110,150,225,0.85) 0%, rgba(110,150,225,0) 80%),
radial-gradient(50% 60% at 80% 18%, rgba(200,177,228,0.55) 0%, rgba(200,177,228,0) 65%),
radial-gradient(40% 55% at 18% 42%, rgba(232,221,246,0.5) 0%, rgba(232,221,246,0) 70%),
radial-gradient(60% 40% at 50% 100%, rgba(200,177,228,0.35) 0%, rgba(200,177,228,0) 70%);
pointer-events: none; z-index: 0;
}
.hero-inner {
position: relative; z-index: 1;
max-width: 1280px; margin: 0 auto; padding: 0 32px;
display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
}
.hero-title {
font-family: var(--pp-font-display); font-weight: 800;
/* line-height 1.15 keeps headings tight visually but gives selection
rects enough vertical room not to overlap line-to-line. */
font-size: 50px; line-height: 1.15; letter-spacing: -0.04em;
color: var(--pp-fg-1); margin: 0 0 24px; text-wrap: balance;
}
.hero-body {
font-size: 18px; line-height: 1.55; color: var(--pp-fg-3);
max-width: 520px; margin-bottom: 14px;
}
.hero-mark {
background: linear-gradient(180deg, transparent 62%, var(--pp-purple-100) 62%);
padding: 0 2px; font-weight: 700; color: var(--pp-fg-1);
}
.hero-cta-row { display: flex; gap: 10px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.btn-pill-primary {
background: var(--pp-purple-600); color: #fff; border-radius: 999px;
padding: 14px 22px; font-weight: 600; font-size: 15px; border: none; cursor: pointer;
box-shadow: var(--pp-shadow-purple);
}
.btn-pill-secondary {
background: #fff; color: var(--pp-fg-1); border-radius: 999px;
padding: 14px 22px; font-weight: 600; font-size: 15px;
border: 1px solid var(--pp-line-strong); cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
}
.hero-device-wrap { position: relative; }
.hero-device {
background: #fff; border-radius: 22px; border: 1px solid var(--pp-line);
box-shadow: var(--pp-shadow-lg); padding: 10px;
transform: translateX(40px) scale(1.12); transform-origin: left center;
position: relative; z-index: 2;
}
.hero-device-bar { display: inline-flex; gap: 6px; padding: 6px 6px 10px; width: fit-content; }
.hero-device-dot {
width: 10px; height: 10px; border-radius: 999px;
background: var(--pp-line-strong);
}
.hero-device-img-wrap { position: relative; }
.hero-device-img {
width: 100%; height: auto; border-radius: 14px; display: block;
transition: opacity 700ms cubic-bezier(.4,0,.2,1);
}
.hero-device-img.is-secondary {
position: absolute; inset: 0; opacity: 0;
}
/* Floating callout cards */
.float-card {
position: absolute;
background: #fff; border-radius: 14px;
border: 1px solid var(--pp-line); box-shadow: var(--pp-shadow-md);
padding: 14px; display: flex; align-items: center; gap: 12px; z-index: 3;
opacity: 0; transform: translateY(12px) scale(.96);
pointer-events: none;
}
.float-card.is-active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.float-card .fc-icon {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.float-card .fc-text { min-width: 0; }
.float-card .fc-eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--pp-fg-3);
}
.float-card .fc-line {
font-size: 13.5px; font-weight: 600; color: var(--pp-fg-1); margin-top: 2px;
}
/* ============== Pillars ============== */
.pillars { padding: 60px 0 12px; background: transparent; position: relative; }
.section-eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--pp-purple-600); margin-bottom: 14px;
}
.section-h2 {
font-family: var(--pp-font-display); font-weight: 800;
line-height: 1.15; letter-spacing: -.04em; color: var(--pp-fg-1);
margin: 0 0 18px; text-wrap: balance;
}
.pillars-h2 { font-size: 45px; }
.section-lead { font-size: 18px; line-height: 1.55; color: var(--pp-fg-3); max-width: 620px; }
.pillars-head { max-width: 760px; margin-bottom: 64px; }
.pillars-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--pp-line); border: 1px solid var(--pp-line); border-radius: 24px;
overflow: hidden;
}
.pillar-card {
position: relative;
background: #fff; padding: 32px;
display: flex; flex-direction: column; gap: 14px;
transition: background 180ms; cursor: pointer; min-height: 240px;
}
.pillar-card:hover { background: var(--pp-bg-subtle); }
/* Stretched-link pattern: any .pillar-card that contains a .pillar-link
becomes fully clickable. The link's invisible ::before overlay covers
the whole card so a click anywhere on the card triggers the same nav.
The ::before resolves against .pillar-card (the nearest positioned
ancestor), so we explicitly leave .pillar-link as static-positioned. */
.pillar-card:has(.pillar-link) .pillar-link::before {
content: ""; position: absolute; inset: 0;
background: transparent; border-radius: inherit;
}
.pillar-icon {
width: 44px; height: 44px; border-radius: 12px; background: var(--pp-purple-50);
color: var(--pp-purple-600);
display: flex; align-items: center; justify-content: center;
}
.pillar-card h3 {
font-size: 20px; font-weight: 700; color: var(--pp-fg-1);
margin: 0; letter-spacing: -.01em;
}
.pillar-card p {
font-size: 14.5px; line-height: 1.55; color: var(--pp-fg-3);
margin: 0; flex: 1;
}
.pillar-link {
font-size: 13.5px; font-weight: 600; color: var(--pp-purple-600);
display: inline-flex; align-items: center; gap: 6px;
}
/* ============== Connector grid (ATS sourcing channels) ============== */
.pillar-logo {
display: inline-flex; align-items: center;
height: 32px; padding: 0;
}
.pillar-logo img,
.pillar-logo svg { display: block; height: 28px; width: auto; }
.pillar-logo .pp-brand-linkedin { height: 28px; width: 28px; }
.pillars-grid.is-connectors .pillar-card {
position: relative; cursor: default;
transition: transform 240ms var(--pp-ease-out), box-shadow 240ms var(--pp-ease-out), background 240ms;
}
.pillars-grid.is-connectors .pillar-card:hover {
background: #fff;
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(43,22,72,0.10);
z-index: 2;
}
.pillars-grid.is-connectors .pillar-card.is-soon { background: #FBFAFC; }
.pillars-grid.is-connectors .pillar-card.is-soon h3,
.pillars-grid.is-connectors .pillar-card.is-soon p { opacity: .82; }
.pillar-card-top {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
}
.pillar-status {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
padding: 5px 10px 5px 9px; border-radius: 999px;
white-space: nowrap;
}
.pillar-status.is-on {
color: #117a3f; background: rgba(31,174,92,0.12);
}
.pillar-status.is-soon-pill {
color: var(--pp-fg-3); background: var(--pp-bg-subtle);
border: 1px dashed var(--pp-line-strong);
}
.pillar-status .pp-dot {
position: relative; display: inline-block;
width: 7px; height: 7px; border-radius: 50%;
background: #1FAE5C;
}
.pillar-status.is-on .pp-dot::after {
content: ""; position: absolute; inset: -3px; border-radius: 50%;
background: #1FAE5C; opacity: .5;
animation: pp-pulse-ring 1.8s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes pp-pulse-ring {
0% { transform: scale(.6); opacity: .55; }
80% { transform: scale(2.2); opacity: 0; }
100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pillar-status.is-on .pp-dot::after { animation: none; }
.pillars-grid.is-connectors .pillar-card { transition: none; }
.pillars-grid.is-connectors .pillar-card:hover { transform: none; }
}
/* ============== Help center search bar ============== */
.help-search-form {
display: flex; gap: 8px; align-items: center;
max-width: 720px; margin: 28px auto 0;
background: #fff; border: 1px solid var(--pp-line);
border-radius: 999px;
box-shadow: 0 18px 48px -28px rgba(60, 30, 110, 0.22);
padding: 6px 6px 6px 18px;
transition: box-shadow 220ms ease, border-color 220ms ease;
}
.help-search-form:focus-within {
border-color: var(--pp-purple-300);
box-shadow: 0 22px 56px -22px rgba(108, 59, 170, 0.32);
}
.help-search-form > svg { color: var(--pp-fg-4); flex-shrink: 0; }
.help-search-input {
flex: 1; border: none; background: transparent;
font-family: inherit; font-size: 15.5px; color: var(--pp-fg-1);
padding: 12px 8px; outline: none;
}
.help-search-input::placeholder { color: var(--pp-fg-4); }
.help-search-btn {
background: var(--pp-purple-600); color: #fff;
border: none; border-radius: 999px;
padding: 11px 22px; font: 600 14px var(--pp-font-sans);
cursor: pointer; transition: background 180ms ease;
}
.help-search-btn:hover { background: var(--pp-purple-700); }
.help-recent {
max-width: 720px; margin: 14px auto 0;
display: flex; align-items: center; justify-content: space-between;
padding: 0 14px; font-size: 12.5px;
/* fg-3 clears AA on white at 12.5px */
color: var(--pp-fg-3);
}
.help-recent a { color: var(--pp-purple-700); font-weight: 500; }
/* ============== Sign-in stub page ============== */
.signin-section {
display: flex; align-items: center; justify-content: center;
padding: 120px 24px 100px; min-height: calc(100vh - 200px);
background: var(--pp-bg-subtle);
}
.signin-card {
width: 100%; max-width: 520px;
background: #fff; border: 1px solid var(--pp-line); border-radius: 24px;
box-shadow: var(--pp-shadow-md);
padding: 44px 44px 40px; text-align: center;
}
.signin-eyebrow {
font-family: var(--pp-font-mono); font-size: 11px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--pp-purple-700); margin-bottom: 14px;
}
.signin-h1 {
font-family: var(--pp-font-display); font-weight: 800; font-size: 44px;
letter-spacing: -.025em; color: var(--pp-fg-1); margin: 0 0 16px;
}
.signin-lead {
font-size: 16px; line-height: 1.55; color: var(--pp-fg-3);
margin: 0 0 24px;
}
.signin-actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-bottom: 28px;
}
.signin-meta {
border-top: 1px solid var(--pp-line); padding-top: 20px;
font-size: 13.5px; color: var(--pp-fg-3); line-height: 1.55;
}
.signin-meta p { margin: 0 0 8px; }
.signin-meta p:last-child { margin: 0; }
.signin-meta strong { color: var(--pp-fg-1); font-weight: 600; }
.signin-link { color: var(--pp-purple-700); font-weight: 600; }
@media (max-width: 540px) {
.signin-card { padding: 32px 24px 28px; border-radius: 20px; }
.signin-h1 { font-size: 34px; }
}
/* ============== Demo / contact form ============== */
.demo-section { padding: 60px 0 12px; }
.demo-grid {
display: grid; grid-template-columns: 1fr 1.05fr;
gap: 64px; align-items: start; max-width: 1180px;
margin: 0 auto; padding: 0 32px;
}
.demo-eyebrow {
font-family: var(--pp-font-mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--pp-purple-700); margin-bottom: 16px;
display: inline-flex; align-items: center; gap: 8px;
}
.demo-eyebrow::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: var(--pp-purple-500);
}
.demo-h1 {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 50px; line-height: 1.1; letter-spacing: -0.04em;
color: var(--pp-fg-1); margin: 0 0 18px; text-wrap: balance;
}
.demo-lead {
font-size: 18px; line-height: 1.55; color: var(--pp-fg-3);
margin: 0 0 28px; max-width: 480px;
}
.demo-bullets { list-style: none; padding: 0; margin: 0 0 28px;
display: flex; flex-direction: column; gap: 14px; }
.demo-bullets li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 15.5px; line-height: 1.55; color: var(--pp-fg-2);
}
.demo-bullets li::before {
content: ''; width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px;
border-radius: 50%; background: var(--pp-purple-100);
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.demo-bullets li strong { color: var(--pp-fg-1); font-weight: 600; }
.demo-trust {
display: flex; align-items: center; gap: 14px;
margin-top: 8px; padding-top: 24px;
border-top: 1px solid var(--pp-line);
font-size: 14px; color: var(--pp-fg-3);
}
.demo-trust strong { color: var(--pp-fg-1); font-weight: 600; }
.demo-trust .stars { color: var(--pp-purple-600); font-size: 16px; letter-spacing: -1px; }
.demo-form {
background: #fff; border: 1px solid var(--pp-line);
border-radius: 24px; padding: 32px;
box-shadow: 0 28px 70px -32px rgba(60, 30, 110, 0.22);
position: sticky; top: 96px;
}
.demo-form-title {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 22px; line-height: 1.2; letter-spacing: -0.02em;
margin: 0 0 6px; color: var(--pp-fg-1);
}
.demo-form-sub { font-size: 14px; color: var(--pp-fg-3); margin: 0 0 24px; }
.demo-field { margin-bottom: 14px; }
.demo-field label {
display: block; font-size: 12.5px; font-weight: 600;
color: var(--pp-fg-2); margin-bottom: 6px; letter-spacing: 0.01em;
}
.demo-field input, .demo-field select, .demo-field textarea {
width: 100%; box-sizing: border-box;
border: 1px solid var(--pp-line); border-radius: 10px;
padding: 11px 14px; font: 400 14.5px var(--pp-font-sans);
background: #fff; color: var(--pp-fg-1);
transition: border-color 160ms, box-shadow 160ms;
}
.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
outline: none; border-color: var(--pp-purple-400);
box-shadow: 0 0 0 3px rgba(108, 59, 170, 0.13);
}
.demo-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-submit {
width: 100%; background: var(--pp-purple-600); color: #fff;
border: none; border-radius: 999px;
padding: 13px 22px; font: 600 14.5px var(--pp-font-sans);
cursor: pointer; margin-top: 6px;
transition: background 180ms ease, transform 180ms ease;
}
.demo-submit:hover { background: var(--pp-purple-700); transform: translateY(-1px); }
.demo-fineprint {
/* 12px gives AA-clear contrast against white at this rgb. */
font-size: 12px; color: var(--pp-fg-3); margin: 12px 0 0;
text-align: center; line-height: 1.5;
}
.demo-fineprint a {
color: var(--pp-purple-700); text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 880px) {
.demo-grid { grid-template-columns: 1fr; gap: 32px; }
.demo-form { position: static; padding: 24px; }
.demo-h1 { font-size: 36px; }
.help-search-btn { padding: 10px 16px; font-size: 13px; }
}
/* ============== Pricing cards (Apple One pattern) ============== */
/* Product switcher — pill toggle that swaps between HRMS and ATS tiers.
Pattern lifted from Freshservice's product-tab pricing page. The active
pill gets a dark fill so it reads as "selected" without a border halo. */
.pricing-switcher {
display: inline-flex; gap: 4px;
padding: 5px; margin: 12px auto 0;
background: var(--pp-purple-50);
border: 1px solid var(--pp-line);
border-radius: 999px;
}
.pricing-switcher-wrap { display: flex; justify-content: center; }
.pricing-switcher button {
appearance: none; -webkit-appearance: none;
background: transparent; border: 0;
color: var(--pp-fg-2); cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 600;
padding: 9px 20px; border-radius: 999px;
transition: background 180ms ease, color 180ms ease;
}
/* Inactive pill: only shift the text color on hover. No background, no
shadow, no transform, so it doesn't feel like a clickable button until
it's actually selected. */
.pricing-switcher button:hover { color: var(--pp-purple-700); background: transparent; }
.pricing-switcher button.is-active,
.pricing-switcher button.is-active:hover {
background: var(--pp-purple-700); color: #fff;
}
/* Visibility controlled by data-active on the wrapper. Default: HRMS. */
.pricing-cards[data-active="hrms"] .pricing-card[data-product="ats"] { display: none; }
.pricing-cards[data-active="ats"] .pricing-card[data-product="hrms"] { display: none; }
.pricing-cards {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; max-width: 1180px; margin: 32px auto 0;
padding: 0 32px;
}
.pricing-card {
background: #fff; border: 1px solid var(--pp-line);
border-radius: 24px; padding: 36px 32px;
display: flex; flex-direction: column; gap: 14px;
position: relative;
transition: transform 240ms cubic-bezier(.2,.7,.2,1),
box-shadow 240ms cubic-bezier(.2,.7,.2,1);
}
.pricing-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 56px -28px rgba(60, 30, 110, 0.22);
}
.pricing-card.is-popular {
border-color: var(--pp-purple-300);
box-shadow: 0 22px 56px -28px rgba(108, 59, 170, 0.32);
}
.pricing-badge {
position: absolute; top: -12px; left: 24px;
background: var(--pp-purple-600); color: #fff;
font-family: var(--pp-font-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px;
}
.pricing-name {
font-family: var(--pp-font-display); font-weight: 700;
font-size: 22px; line-height: 1.2; letter-spacing: -.01em;
color: var(--pp-fg-1); margin: 0;
}
.pricing-price {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 56px; line-height: 1; letter-spacing: -.04em;
color: var(--pp-fg-1); margin: 6px 0 0;
}
.pricing-cadence {
font-size: 13.5px; color: var(--pp-fg-3); margin-top: 6px;
line-height: 1.4;
}
.pricing-sub {
font-size: 14px; color: var(--pp-fg-3); margin: 0;
padding-bottom: 4px;
line-height: 1.55;
}
.pricing-features {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
flex: 1;
}
.pricing-features li {
display: flex; gap: 10px; align-items: flex-start;
font-size: 14px; line-height: 1.5; color: var(--pp-fg-2);
}
.pricing-features li::before {
content: ''; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px;
border-radius: 50%; background: var(--pp-purple-100);
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.pricing-cta {
display: block; text-align: center;
background: var(--pp-purple-600); color: #fff;
border-radius: 999px; padding: 12px 22px;
font-weight: 600; font-size: 14.5px;
margin-top: 8px; text-decoration: none;
transition: background 180ms ease, transform 180ms ease,
box-shadow 180ms ease;
}
.app .pricing-cta:hover {
background: var(--pp-purple-700); color: #fff;
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(108, 59, 170, 0.45);
}
.pricing-card.is-popular .pricing-cta {
background: linear-gradient(135deg, var(--pp-purple-600), var(--pp-purple-700));
}
.pricing-secondary {
display: block; text-align: center; font-size: 13.5px;
color: var(--pp-purple-700); font-weight: 500;
text-decoration: none;
}
.app .pricing-secondary:hover { color: var(--pp-purple-700); text-decoration: underline; }
@media (max-width: 880px) {
.pricing-cards { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }
.pricing-price { font-size: 42px; }
}
/* ============== Resource hub variants ============== */
/* Type label at the top of a pillar-card on the resources page. Mono +
uppercase to match the .section-eyebrow rhythm of the rest of the site. */
.resource-type {
font-family: var(--pp-font-mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--pp-purple-700);
}
/* Filter strip — a row of pills above the main resource grid. Visual only;
no JS filtering wired up because the static page lists everything. */
.resource-filter {
padding: 24px 0; margin: 32px 0;
border-top: 1px solid var(--pp-line);
border-bottom: 1px solid var(--pp-line);
}
.resource-filter-head {
display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
justify-content: space-between;
}
.resource-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.resource-pill {
font-size: 13.5px; font-weight: 500; color: var(--pp-fg-2);
padding: 8px 16px; border-radius: 999px;
border: 1px solid var(--pp-line); background: #fff;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.app .resource-pill:hover { background: var(--pp-bg-subtle); color: var(--pp-fg-1); }
.resource-pill.is-active,
.app .resource-pill.is-active:hover {
background: var(--pp-purple-600); color: #fff; border-color: var(--pp-purple-600);
}
@media (max-width: 720px) {
.resource-filter-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ============== Feature deep-dives ============== */
.feature-section { padding: 60px 0; background: transparent; }
.feature-section.is-alt { background: var(--pp-bg-subtle); }
/* Tighten the gap between the last feature section (WFH) and the
mi-section that follows: halve the padding on both sides. */
.feature-section:has(+ .mi-section) { padding-bottom: 30px; }
.feature-section + .mi-section { padding-top: 30px; }
.feature-inner {
max-width: 1280px; margin: 0 auto; padding: 0 32px;
display: grid; gap: 80px; align-items: center;
}
.feature-inner.left { grid-template-columns: 1fr 1.1fr; }
.feature-inner.right { grid-template-columns: 1.1fr 1fr; }
.feature-inner.right .feature-text { order: 2; }
.feature-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--pp-purple-700); margin-bottom: 18px;
}
.feature-eyebrow-dot {
width: 6px; height: 6px; border-radius: 999px; background: var(--pp-purple-600);
}
.feature-h2 {
font-family: var(--pp-font-display); font-weight: 800; font-size: 45px;
line-height: 1.15; letter-spacing: -.035em; color: var(--pp-fg-1);
margin: 0 0 22px; text-wrap: balance;
}
.feature-body { font-size: 17px; line-height: 1.6; color: var(--pp-fg-3); margin-bottom: 18px; }
.feature-bullets { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.feature-bullet { display: flex; gap: 12px; align-items: flex-start; }
.feature-bullet-dot {
width: 22px; height: 22px; border-radius: 999px; background: var(--pp-purple-50);
color: var(--pp-purple-600);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
.feature-bullet-text { font-size: 15.5px; color: var(--pp-fg-2); line-height: 1.55; }
.feature-bullet-bold { color: var(--pp-fg-1); font-weight: 600; }
.feature-cta {
background: transparent; color: var(--pp-purple-600); border-radius: 999px;
padding: 12px 0; font-weight: 600; font-size: 15px; border: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; margin-top: 24px;
}
/* ATS Panel */
.mock-card {
background: #fff; border-radius: 20px; border: 1px solid var(--pp-line);
box-shadow: var(--pp-shadow-md); overflow: hidden;
}
.mock-head {
padding: 18px 22px;
display: flex; align-items: center; justify-content: space-between;
gap: 8px 12px; flex-wrap: wrap;
border-bottom: 1px solid var(--pp-line);
}
.mock-eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--pp-fg-4);
}
.mock-title { font-size: 17px; font-weight: 700; color: var(--pp-fg-1); margin-top: 4px; }
.mock-pill {
font-size: 12px; font-weight: 600; color: var(--pp-purple-700);
background: var(--pp-purple-50); padding: 6px 12px; border-radius: 999px;
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--pp-purple-200);
white-space: nowrap; flex-shrink: 0; max-width: 100%;
}
.mock-pill svg { flex-shrink: 0; width: 13px; height: 13px; }
@media (max-width: 540px) {
.mock-head { padding: 14px 16px; }
.mock-pill { font-size: 11px; padding: 5px 10px; }
}
.candidate-row {
display: grid; grid-template-columns: 32px 1fr 110px 90px 80px;
align-items: center; gap: 14px; padding: 16px 22px;
border-bottom: 1px solid var(--pp-line);
}
.candidate-row:last-child { border-bottom: none; }
.candidate-avatar {
width: 32px; height: 32px; border-radius: 999px;
background: var(--pp-purple-100); color: var(--pp-purple-700);
font-weight: 700; font-size: 12px;
display: flex; align-items: center; justify-content: center;
}
.candidate-name { font-size: 14px; font-weight: 600; color: var(--pp-fg-1); }
.candidate-source { font-size: 12.5px; color: var(--pp-fg-4); margin-top: 2px; }
.candidate-bar {
flex: 1; height: 6px; border-radius: 999px;
background: var(--pp-bg-muted); overflow: hidden;
}
/* Candidate progress bar — starts collapsed, scales out from the left when
the row scrolls into view. We scale the inline-width span via transform
so the existing markup (style="width:94%;...") keeps its target width. */
.candidate-bar > span {
display: block; height: 100%;
transform: scaleX(0); transform-origin: left center;
transition: transform 1.6s cubic-bezier(.25,.1,.25,1);
}
.candidate-row.is-bar-animated .candidate-bar > span { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.candidate-bar > span { transform: scaleX(1); transition: none; }
}
.candidate-score {
font-family: var(--pp-font-display); font-weight: 800; font-size: 18px;
color: var(--pp-fg-1);
}
.candidate-score-suffix { font-size: 11px; color: var(--pp-fg-4); font-weight: 500; }
.candidate-tag {
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
text-align: center;
}
.candidate-tag.strong { background: var(--pp-success-bg); color: var(--pp-success); }
.candidate-tag.good { background: var(--pp-purple-100); color: var(--pp-purple-700); }
.candidate-tag.average { background: var(--pp-warning-bg); color: #a06d05; }
/* ATS Profile mock (left side of "Six dimensions" feature section).
Recreates the candidate profile dashboard so the radar chart visually
carries the "six dimensions, reasoning shown" promise. */
.ats-profile-mock { padding: 0; }
.ats-profile-mock .apm-titlebar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--pp-line);
}
.ats-profile-mock .apm-title-left { display: flex; align-items: center; gap: 10px; }
.ats-profile-mock .apm-title {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 18px; letter-spacing: -.02em; color: var(--pp-fg-1);
}
.ats-profile-mock .apm-title-tools { display: flex; gap: 6px; }
.ats-profile-mock .apm-icon-btn {
width: 26px; height: 26px; border-radius: 999px;
background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
color: var(--pp-fg-2);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; cursor: default;
}
.ats-profile-mock .apm-icon-btn-ghost { background: var(--pp-bg-subtle); border-color: var(--pp-line); }
.ats-profile-mock .apm-icon-btn-primary {
background: var(--pp-purple-600); color: #fff; border-color: var(--pp-purple-600);
}
.ats-profile-mock .apm-stats {
display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr;
gap: 8px; padding: 12px;
}
.ats-profile-mock .apm-stat-card {
border: 1px solid var(--pp-line); border-radius: 14px;
padding: 10px 12px; background: #fff;
display: flex; flex-direction: column; gap: 4px;
min-height: 64px; justify-content: center;
}
.ats-profile-mock .apm-stat-profile { gap: 1px; }
.ats-profile-mock .apm-stat-name { font-weight: 700; font-size: 13px; color: var(--pp-fg-1); }
.ats-profile-mock .apm-stat-role { font-size: 11px; color: var(--pp-fg-3); }
.ats-profile-mock .apm-stat-meta {
font-size: 10.5px; font-weight: 600; color: var(--pp-purple-600);
margin-top: 4px; letter-spacing: .02em;
}
.ats-profile-mock .apm-stat-icon-row { display: flex; align-items: center; gap: 8px; }
.ats-profile-mock .apm-stat-icon {
width: 22px; height: 22px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ats-profile-mock .apm-stat-icon-warn { background: var(--pp-warning-bg); color: #A06D05; }
.ats-profile-mock .apm-stat-icon-up { background: var(--pp-success-bg); color: var(--pp-success); }
.ats-profile-mock .apm-stat-icon-thumb { background: var(--pp-success-bg); color: var(--pp-success); }
.ats-profile-mock .apm-stat-value { display: flex; align-items: baseline; gap: 1px; }
.ats-profile-mock .apm-stat-num {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 20px; line-height: 1; letter-spacing: -.02em; color: var(--pp-fg-1);
}
.ats-profile-mock .apm-stat-suffix {
font-family: var(--pp-font-display); font-weight: 700;
font-size: 13px; color: var(--pp-fg-3);
}
.ats-profile-mock .apm-stat-label {
font-size: 9.5px; font-weight: 700; color: var(--pp-fg-4);
letter-spacing: .06em; text-transform: uppercase;
}
.ats-profile-mock .apm-stats:first-child { padding-top: 14px; }
.ats-profile-mock .apm-body {
display: grid; grid-template-columns: 1fr 1.1fr;
gap: 14px; padding: 4px 12px 16px;
}
.ats-profile-mock .apm-section + .apm-section { margin-top: 14px; }
.ats-profile-mock .apm-section-title {
font-size: 10.5px; font-weight: 700; color: var(--pp-fg-4);
text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.ats-profile-mock .apm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ats-profile-mock .apm-tag {
background: var(--pp-purple-50); color: var(--pp-purple-700);
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--pp-purple-200);
}
.ats-profile-mock .apm-edu { font-size: 12.5px; color: var(--pp-fg-1); line-height: 1.45; }
.ats-profile-mock .apm-edu strong { font-weight: 600; }
.ats-profile-mock .apm-edu-meta { font-size: 11.5px; color: var(--pp-fg-4); margin-top: 2px; }
.ats-profile-mock .apm-radar {
background: #fff; border: 1px solid var(--pp-line); border-radius: 14px;
padding: 6px; height: 100%;
display: flex; align-items: center;
}
.ats-profile-mock .apm-radar svg { width: 100%; height: auto; display: block; }
/* Score polygon scales out from the chart center when the card scrolls into
view. Using transform-box: view-box so transform-origin reads in SVG
coordinates (140,110) instead of CSS-pixel space. */
.ats-profile-mock .apm-radar-poly {
transform: scale(0);
transform-origin: 140px 110px;
transform-box: view-box;
opacity: 0;
transition:
transform 1.05s cubic-bezier(.34, 1.4, .64, 1) .15s,
opacity .55s ease-out .15s;
}
.ats-profile-mock.is-radar-in .apm-radar-poly {
transform: scale(1);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.ats-profile-mock .apm-radar-poly {
transition: none;
transform: scale(1);
opacity: 1;
}
}
.ats-profile-mock .apm-footer {
display: grid; grid-template-columns: 1.45fr 1fr;
gap: 12px; padding: 12px 16px 14px;
border-top: 1px solid var(--pp-line);
align-items: center;
}
.ats-profile-mock .apm-pipeline { display: flex; align-items: flex-start; gap: 4px; }
.ats-profile-mock .apm-pipeline-step {
display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0;
}
.ats-profile-mock .apm-pipeline-dot {
width: 24px; height: 24px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--pp-bg-subtle); color: var(--pp-fg-4);
}
.ats-profile-mock .apm-pipeline-step.is-done .apm-pipeline-dot {
background: var(--pp-success-bg); color: var(--pp-success);
}
.ats-profile-mock .apm-pipeline-step.is-current .apm-pipeline-dot {
background: var(--pp-warning-bg); color: #A06D05;
}
.ats-profile-mock .apm-pipeline-line {
flex: 1; min-width: 14px; height: 0;
border-top: 1.5px dashed var(--pp-line); margin-top: 12px;
}
.ats-profile-mock .apm-pipeline-label {
font-size: 9.5px; font-weight: 600; color: var(--pp-fg-3);
text-align: center; line-height: 1.2;
}
.ats-profile-mock .apm-pipeline-step.is-done .apm-pipeline-label { color: var(--pp-success); }
.ats-profile-mock .apm-pipeline-step.is-current .apm-pipeline-label { color: #A06D05; }
.ats-profile-mock .apm-feedback {
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.ats-profile-mock .apm-stars { display: flex; gap: 2px; }
.ats-profile-mock .apm-feedback-label {
font-size: 10.5px; font-weight: 700; color: #B8860B; letter-spacing: .04em;
}
@media (max-width: 720px) {
.ats-profile-mock .apm-stats { grid-template-columns: 1fr 1fr; }
.ats-profile-mock .apm-body { grid-template-columns: 1fr; }
.ats-profile-mock .apm-footer {
grid-template-columns: 1fr; gap: 14px;
}
.ats-profile-mock .apm-feedback { align-items: flex-start; }
}
/* ---- Rich mock cards (DPDP, Interviews, Assessment, Offer) ----
Follows the index design language: bare colored SVG icons (no filled
background chips), neutral stat tiles, and small pill badges that
match the .payroll-row-status pattern. */
.mock-card.is-rich .mock-rich-rows {
padding: 0 22px 18px;
display: flex; flex-direction: column;
}
.mock-rich-row {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; padding: 12px 0;
border-bottom: 1px solid var(--pp-line);
}
.mock-rich-row:last-child { border-bottom: none; }
.mock-rich-row-left {
display: flex; align-items: center; gap: 12px;
min-width: 0; flex: 1;
}
.mock-rich-row-icon {
flex-shrink: 0; display: inline-flex;
align-items: center; justify-content: center;
}
.mock-rich-row-text { min-width: 0; }
.mock-rich-label {
font-size: 14px; font-weight: 600; color: var(--pp-fg-2);
line-height: 1.3;
}
.mock-rich-sub {
font-size: 11.5px; color: var(--pp-fg-4); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-rich-row-right {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.mock-rich-value {
font-size: 14px; font-weight: 600; color: var(--pp-fg-1);
font-variant-numeric: tabular-nums; line-height: 1.3;
}
.mock-rich-status {
font-size: 11px; font-weight: 600;
padding: 3px 9px; border-radius: 999px;
}
.mock-rich-status.is-success { background: var(--pp-success-bg); color: var(--pp-success); }
.mock-rich-status.is-info { background: var(--pp-info-bg); color: var(--pp-info); }
.mock-rich-status.is-warn { background: var(--pp-warning-bg); color: #a06d05; }
.mock-rich-status.is-purple { background: var(--pp-purple-50); color: var(--pp-purple-700); }
/* Top stat strip — mirrors .payroll-stats / .payroll-stat */
.mock-rich-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px; padding: 18px 22px 6px;
}
.mock-rich-stats.is-2col { grid-template-columns: 1fr 1fr; }
.mock-rich-stat {
padding: 12px 14px; border-radius: 12px;
background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
}
.mock-rich-stat-value {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 22px; color: var(--pp-fg-1); letter-spacing: -.02em;
line-height: 1;
}
.mock-rich-stat-suffix {
font-family: var(--pp-font-display); font-weight: 700;
font-size: 13px; color: var(--pp-fg-3);
}
.mock-rich-stat-label {
font-size: 11.5px; color: var(--pp-fg-4); margin-top: 6px;
font-weight: 500;
}
/* DPDP compliance status strip — matches the neutral tile language */
.dpdp-strip {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 10px; padding: 18px 22px 6px;
}
.dpdp-strip-tile {
padding: 10px 12px; border-radius: 12px;
background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
display: flex; align-items: center; gap: 9px;
}
.dpdp-strip-text {
font-size: 12px; font-weight: 600; color: var(--pp-fg-2); line-height: 1.25;
}
/* Interview scheduling: self-vs-manual bar */
.intv-distribution { padding: 4px 22px 14px; }
.intv-distribution-head {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 12px; color: var(--pp-fg-3); margin-bottom: 8px;
}
.intv-distribution-head strong { color: var(--pp-fg-1); font-weight: 700; }
.intv-bar {
height: 10px; border-radius: 999px; overflow: hidden;
display: flex; gap: 2px; background: var(--pp-bg-muted);
}
.intv-bar > span { display: block; height: 100%; }
.intv-bar-self { background: var(--pp-purple-600); }
.intv-bar-manual { background: var(--pp-purple-300); }
.intv-legend {
display: flex; gap: 18px; margin-top: 8px;
font-size: 11.5px; color: var(--pp-fg-3);
}
.intv-legend-swatch {
display: inline-block; width: 10px; height: 10px; border-radius: 3px;
margin-right: 6px; vertical-align: middle;
}
/* Assessment live indicator — neutral tile, pulsing red dot only */
.asmt-live {
margin: 18px 22px 0;
padding: 10px 14px; border-radius: 12px;
background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
display: flex; align-items: center; gap: 12px;
}
.asmt-live-dot {
width: 8px; height: 8px; border-radius: 999px;
background: var(--pp-danger); position: relative; flex-shrink: 0;
}
.asmt-live-dot::after {
content: ''; position: absolute; inset: -3px;
border-radius: inherit; border: 2px solid var(--pp-danger);
opacity: .35; animation: asmt-pulse 1.8s ease-out infinite;
}
@keyframes asmt-pulse {
0% { transform: scale(.7); opacity: .55; }
100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.asmt-live-dot::after { animation: none; }
}
.asmt-live-text {
font-size: 12px; font-weight: 700; color: var(--pp-fg-1);
letter-spacing: .04em;
}
.asmt-live-meta {
font-size: 11.5px; color: var(--pp-fg-4); margin-left: auto;
}
/* Offer CTC: heading bar + stacked composition + swatch rows */
.offer-bar-wrap { padding: 18px 22px 6px; }
.offer-bar-total {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 10px;
}
.offer-bar-total-num {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 26px; color: var(--pp-fg-1); letter-spacing: -.025em; line-height: 1;
}
.offer-bar-total-label {
font-size: 11.5px; color: var(--pp-fg-4); font-weight: 500;
}
.offer-bar {
height: 10px; border-radius: 999px; overflow: hidden;
display: flex; gap: 1px; background: var(--pp-line);
}
.offer-bar > span { display: block; height: 100%; }
.offer-seg-basic { background: var(--pp-purple-700); }
.offer-seg-hra { background: var(--pp-purple-500); }
.offer-seg-special { background: var(--pp-info); }
.offer-seg-pf { background: var(--pp-success); }
.offer-seg-gratuity { background: var(--pp-warning); }
.offer-seg-variable { background: #C2569B; }
.offer-swatch {
display: inline-block; width: 10px; height: 10px; border-radius: 3px;
flex-shrink: 0;
}
@media (max-width: 720px) {
.dpdp-strip { grid-template-columns: 1fr; }
.mock-rich-stats { grid-template-columns: 1fr 1fr; }
.mock-rich-row { gap: 10px; }
.mock-rich-sub { white-space: normal; }
}
/* Payroll Panel */
.payroll-card {
background: #fff; border-radius: 20px; border: 1px solid var(--pp-line);
box-shadow: var(--pp-shadow-md); padding: 26px;
}
.payroll-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.payroll-title {
font-size: 24px; font-weight: 800; color: var(--pp-fg-1); margin-top: 6px;
font-family: var(--pp-font-display); letter-spacing: -.02em;
}
.payroll-cta {
background: var(--pp-purple-600); color: #fff; border: none;
border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 13.5px; cursor: pointer;
box-shadow: var(--pp-shadow-purple);
}
.payroll-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;
}
/* Wide stats row (used on the HRMS landing page above-the-fold metrics).
4 cols on desktop, 2 cols on tablet, 1 col on the smallest phones so labels
like "biometric protocols supported out of the box" never overflow. */
.payroll-stats.stats-4col { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) {
.payroll-stats.stats-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.payroll-stats.stats-4col { grid-template-columns: 1fr; }
}
.payroll-stat {
padding: 16px; border-radius: 14px;
background: var(--pp-bg-subtle); border: 1px solid var(--pp-line);
}
.payroll-stat-label { font-size: 12px; color: var(--pp-fg-4); }
.payroll-stat-value {
font-family: var(--pp-font-display); font-weight: 800; font-size: 26px;
color: var(--pp-fg-1); letter-spacing: -.02em; margin-top: 4px;
}
.payroll-rows { display: flex; flex-direction: column; gap: 0; }
.payroll-row {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0; border-bottom: 1px solid var(--pp-line);
}
.payroll-row:first-child { border-top: 1px solid var(--pp-line); }
.payroll-row-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pp-fg-2); }
.payroll-row-right { display: flex; align-items: center; gap: 14px; }
.payroll-row-amount {
font-size: 14px; font-weight: 600; color: var(--pp-fg-1); font-variant-numeric: tabular-nums;
}
.payroll-row-status {
font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
}
.payroll-row-status.filed { background: var(--pp-success-bg); color: var(--pp-success); }
.payroll-row-status.ready { background: var(--pp-warning-bg); color: #a06d05; }
/* WFH Panel (dark) */
.wfh-card {
background: #0B0B0F; border-radius: 20px; border: 1px solid #26262F;
box-shadow: var(--pp-shadow-lg); padding: 24px; color: #D8D8E0;
}
.wfh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.wfh-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8E8E99; }
.wfh-title { font-size: 18px; font-weight: 700; color: #fff; margin-top: 4px; }
.wfh-pill {
font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
background: rgba(31,174,92,0.14); color: #4DDB89;
display: inline-flex; align-items: center; gap: 6px;
}
.wfh-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: #4DDB89; }
.wfh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wfh-col-label { font-size: 13px; color: #8E8E99; margin-bottom: 10px; }
.wfh-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wfh-heat-day {
font-size: 10.5px; color: #8E8E99; text-align: center; font-weight: 600;
letter-spacing: .05em; text-transform: uppercase;
}
.wfh-heat-cell { aspect-ratio: 1; border-radius: 4px; }
.wfh-legend {
display: flex; gap: 4px; align-items: center;
margin-top: 14px; font-size: 11px; color: #8E8E99;
}
.wfh-legend-cell { width: 12px; height: 12px; border-radius: 3px; }
.wfh-feed { display: flex; flex-direction: column; gap: 12px; }
.wfh-event { display: flex; align-items: center; gap: 12px; }
.wfh-event-icon {
width: 28px; height: 28px; border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
}
.wfh-event-line { flex: 1; font-size: 12.5px; color: #D8D8E0; }
.wfh-event-time { font-size: 11px; color: #8E8E99; font-variant-numeric: tabular-nums; }
/* Quote */
.feature-quote {
margin: 32px 0 0; padding: 18px 20px; border-left: 3px solid var(--pp-purple-300);
background: var(--pp-purple-50); border-radius: 0 12px 12px 0;
font-size: 15px; color: var(--pp-fg-2); line-height: 1.55; font-style: italic;
}
.feature-quote cite {
display: block; font-style: normal; font-size: 12.5px; color: var(--pp-fg-4);
margin-top: 8px; font-weight: 500;
}
/* ============== Mobile + Integrations ============== */
.mi-section { padding: 60px 0; background: transparent; }
.mi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mi-card {
background: var(--pp-bg-subtle); border: 1px solid var(--pp-line); border-radius: 24px;
padding: 40px; position: relative; overflow: hidden;
display: flex; flex-direction: column;
}
.mi-card.is-mobile { padding: 36px; }
.mi-card-eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--pp-purple-600); margin-bottom: 14px;
}
.mi-card h3 {
font-family: var(--pp-font-display); font-weight: 800; font-size: 30px;
letter-spacing: -.025em; line-height: 1.15; margin: 0 0 12px; color: var(--pp-fg-1);
}
.mi-card p { font-size: 15.5px; line-height: 1.55; margin-bottom: 20px; color: var(--pp-fg-3); }
.mobile-row {
display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: stretch;
}
.mobile-text { display: flex; flex-direction: column; min-height: 460px; }
.mobile-badges { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
/* Official App Store / Google Play badges — artwork is brand-locked.
The badge image carries everything (logo + label), so the wrapping
only handles sizing, focus ring, and click target. */
.store-badge {
display: inline-flex; align-items: center;
cursor: pointer; line-height: 0;
border-radius: 8px;
}
.store-badge img {
height: 44px; width: auto; display: block;
}
/* Apple & Google brand guidelines disallow hover/active recolor or transforms.
Scoped under `.app` to beat `.app a:hover { color: var(--pp-purple-700) }`
(specificity gotcha — see CLAUDE.md). */
.app .store-badge,
.app .store-badge:hover,
.app .store-badge:focus,
.app .store-badge:active { transition: none; transform: none; filter: none; }
/* Phone mock */
.phone {
width: 230px; height: 460px; background: #353535; border-radius: 36px;
padding: 4px; box-shadow: 0 24px 60px rgba(43, 22, 72, 0.25);
position: relative;
}
.phone-screen {
background: #fff; border-radius: 32px; height: 100%; overflow: hidden;
display: flex; flex-direction: column;
}
.phone-greet { padding: 20px 18px 14px; }
.phone-greet-small { font-size: 12px; color: var(--pp-fg-4); }
.phone-greet-name {
font-size: 19px; font-weight: 800; color: var(--pp-fg-1);
font-family: var(--pp-font-display); letter-spacing: -.02em;
}
.phone-net {
margin: 0 14px 12px; padding: 16px; border-radius: 14px;
background: linear-gradient(135deg, #6C3BAA 0%, #8757C4 100%);
color: #fff;
}
.phone-net-eyebrow {
font-size: 10px; opacity: .85; letter-spacing: .08em; text-transform: uppercase;
}
.phone-net-amount {
font-size: 24px; font-weight: 800; font-family: var(--pp-font-display);
letter-spacing: -.02em; margin-top: 2px;
}
.phone-net-meta { font-size: 10.5px; opacity: .85; margin-top: 4px; }
.phone-tiles { padding: 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone-tile {
padding: 12px; border-radius: 12px; border: 1px solid var(--pp-line);
display: flex; flex-direction: column; gap: 6px;
}
.phone-tile-icon {
width: 28px; height: 28px; border-radius: 8px; background: var(--pp-purple-50);
color: var(--pp-purple-600); display: flex; align-items: center; justify-content: center;
}
.phone-tile-label { font-size: 12px; font-weight: 600; color: var(--pp-fg-1); }
.phone-today { padding: 14px; margin-top: auto; }
.phone-today-label {
font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--pp-fg-4); margin-bottom: 8px;
}
.phone-today-row {
display: flex; align-items: center; gap: 8px; padding: 6px 0;
font-size: 11.5px; color: var(--pp-fg-2);
}
.phone-today-dot { width: 6px; height: 6px; border-radius: 999px; }
/* Integrations grid. minmax(0, 1fr) lets cells shrink below their intrinsic
content width, which is required for the ellipsis on .int-tile-name to
take effect on narrow viewports. min-width:0 on the tile itself ensures
the flex container doesn't claim more than its grid cell. */
.int-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.int-tile {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
background: #fff; border: 1px solid var(--pp-line); border-radius: 10px;
font-size: 13px; font-weight: 500; color: var(--pp-fg-2);
min-width: 0;
}
.int-tile-fallback {
width: 18px; height: 18px; border-radius: 4px;
background: var(--pp-purple-100); color: var(--pp-purple-700);
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; flex-shrink: 0;
}
/* min-width:0 lets the flex child shrink past the intrinsic text size so
the ellipsis truncation can take effect on narrow tiles. Without it,
names like "Microsoft Teams" or "WhatsApp Business" overflow the tile. */
.int-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
/* ============== Why Switch ============== */
.why-section { padding: 60px 0; background: transparent; }
/* Tighten the gap between the mi-section and the why-section that follows. */
.mi-section:has(+ .why-section) { padding-bottom: 30px; }
.mi-section + .why-section { padding-top: 30px; }
.why-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
.why-head { position: sticky; top: 100px; }
.why-h2 { font-family: var(--pp-font-display); font-weight: 800; font-size: 45px;
line-height: 1.15; letter-spacing: -.035em; color: var(--pp-fg-1); margin: 0 0 18px; }
.why-lead { font-size: 16px; line-height: 1.6; color: var(--pp-fg-3); margin: 0; }
.why-cards {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--pp-line); border: 1px solid var(--pp-line); border-radius: 20px;
overflow: hidden;
}
.why-card {
background: #fff; padding: 28px;
display: flex; flex-direction: column; gap: 12px; min-height: 200px;
}
.why-card-icon {
width: 40px; height: 40px; border-radius: 10px; background: var(--pp-purple-50);
color: var(--pp-purple-600);
display: flex; align-items: center; justify-content: center;
}
.why-card-title {
font-size: 17px; font-weight: 700; color: var(--pp-fg-1); letter-spacing: -.01em;
}
.why-card-body { font-size: 14px; line-height: 1.55; color: var(--pp-fg-3); }
/* ============== FAQ ============== */
.faq-section { padding: 60px 0; background: transparent; }
.faq-inner { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.faq-head { text-align: center; margin-bottom: 56px; }
.faq-h2 {
font-family: var(--pp-font-display); font-weight: 800; font-size: 44px;
letter-spacing: -.04em; color: var(--pp-fg-1); margin: 0; line-height: 1.15;
}
.faq-list { border-top: 1px solid var(--pp-line); }
.faq-item { border-bottom: 1px solid var(--pp-line); }
.faq-q {
width: 100%; text-align: left; background: transparent; border: none;
padding: 24px 0; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.faq-q-text { font-size: 17px; font-weight: 600; color: var(--pp-fg-1); }
.faq-q-icon {
width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
color: var(--pp-purple-600); flex-shrink: 0;
}
.faq-q-icon line { transition: opacity 200ms ease; }
.faq-item.is-open .faq-q-icon .v { opacity: 0; }
.faq-a {
font-size: 15px; line-height: 1.65; color: var(--pp-fg-3); max-width: 720px;
}
/* ============== CTA ============== */
/* Clip the section's ::before/::after glows so they can't bleed past the
section boundary and bleed into the footer. */
.cta-section { padding: 96px 0 80px; background: transparent; overflow: hidden; }
.cta-grid {
display: grid; grid-template-columns: 1.3fr 1fr 1fr;
gap: 64px; align-items: start;
}
.cta-lead { max-width: 460px; }
.cta-h2 {
font-family: var(--pp-font-display); font-weight: 800; font-size: 44px;
letter-spacing: -.03em; line-height: 1.15; margin: 0 0 16px;
color: var(--pp-fg-1); text-wrap: balance;
}
.cta-body {
font-size: 17px; line-height: 1.55; color: var(--pp-fg-3);
margin: 0 0 28px;
}
.cta-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Scoped under .app so we beat the global `.app a:hover { color: purple-700 }` rule.
See CLAUDE.md "Gotchas" — we got bitten by this with the App Store badge. */
.app .cta-primary,
.app .cta-primary:hover,
.app .cta-primary:focus,
.app .cta-primary:active {
display: inline-flex; align-items: center; gap: 4px;
background: var(--pp-purple-600); color: #fff; border-radius: 8px;
padding: 11px 16px 11px 18px; font-weight: 600; font-size: 14.5px;
border: none; cursor: pointer; text-decoration: none;
transition: background .15s ease;
}
.app .cta-primary:hover { background: var(--pp-purple-700); }
.app .cta-secondary,
.app .cta-secondary:hover,
.app .cta-secondary:focus,
.app .cta-secondary:active {
display: inline-flex; align-items: center; gap: 4px;
background: #fff; color: var(--pp-fg-1); border-radius: 8px;
padding: 11px 18px; font-weight: 600; font-size: 14.5px;
border: 1px solid var(--pp-line-strong); cursor: pointer; text-decoration: none;
transition: background .15s ease, border-color .15s ease;
}
.app .cta-secondary:hover { background: var(--pp-bg-subtle); }
.cta-card { display: flex; flex-direction: column; gap: 10px; }
.cta-card-icon {
width: 40px; height: 40px; border-radius: 10px;
background: var(--pp-purple-50);
color: var(--pp-purple-600);
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}
.cta-card-icon svg { width: 20px; height: 20px; }
.cta-card-title {
font-family: var(--pp-font-display); font-weight: 700;
font-size: 18px; color: var(--pp-fg-1); margin: 0;
letter-spacing: -.01em;
}
.cta-card-body {
font-size: 15px; line-height: 1.55; color: var(--pp-fg-3); margin: 0;
}
.app .cta-card-link,
.app .cta-card-link:focus,
.app .cta-card-link:active {
display: inline-flex; align-items: center; gap: 2px;
color: var(--pp-purple-600); font-weight: 600; font-size: 14.5px;
text-decoration: none; margin-top: 2px;
}
.app .cta-card-link:hover { color: var(--pp-purple-700); }
/* HDS-style hover arrow — used on every click anchor with a trailing arrow.
At rest: only the chevron (>) is visible.
On hover: the chevron slides right and the horizontal stem fades in behind it.
Inherits color via currentColor. */
.hds-icon-hover-arrow {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
flex-shrink: 0;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
/* path order in markup: 1 = horizontal stem, 2 = chevron */
.hds-icon-hover-arrow path:nth-child(1) {
opacity: 0;
transition: opacity .18s ease;
}
.hds-icon-hover-arrow path:nth-child(2) {
transition: transform .18s ease;
}
/* Hover trigger lives on the parent anchor/button. */
a:hover > .hds-icon-hover-arrow path:nth-child(1),
button:hover > .hds-icon-hover-arrow path:nth-child(1),
.pp-anchor-cta:hover .hds-icon-hover-arrow path:nth-child(1),
.cta-card-link:hover .hds-icon-hover-arrow path:nth-child(1) { opacity: 1; }
a:hover > .hds-icon-hover-arrow path:nth-child(2),
button:hover > .hds-icon-hover-arrow path:nth-child(2),
.pp-anchor-cta:hover .hds-icon-hover-arrow path:nth-child(2),
.cta-card-link:hover .hds-icon-hover-arrow path:nth-child(2) { transform: translateX(2px); }
/* ============== Subpages ============== */
/* Shared layout for every page below the homepage. The skeleton reuses the
homepage topbar + footer so the only thing each page needs is its own
.subpage-hero (eyebrow + h1 + lead + CTA row) and a .subpage-content
block built from .subpage-card / .subpage-bullets. */
.subpage-hero { padding: 120px 0 64px; position: relative; }
.subpage-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; text-align: center; }
.subpage-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--pp-font-mono); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--pp-purple-700); margin-bottom: 18px;
}
.subpage-eyebrow::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: var(--pp-purple-500);
}
.subpage-h1 {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 56px; line-height: 1.15; letter-spacing: -0.04em;
color: var(--pp-fg-1); margin: 0 auto 22px; max-width: 880px;
text-wrap: balance;
}
.subpage-lead {
font-size: 19px; line-height: 1.55; color: var(--pp-fg-3);
max-width: 720px; margin: 0 auto 28px;
}
.subpage-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.subpage-cta-primary {
background: var(--pp-purple-600); color: #fff; border-radius: 999px;
padding: 12px 22px; font-weight: 600; font-size: 14.5px;
display: inline-flex; align-items: center; gap: 8px;
}
.subpage-cta-primary:hover { background: var(--pp-purple-700); color: #fff; }
.subpage-cta-secondary {
background: #fff; color: var(--pp-fg-1); border: 1px solid var(--pp-line);
border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 14.5px;
display: inline-flex; align-items: center; gap: 8px;
}
.subpage-cta-secondary:hover { background: var(--pp-bg-subtle); color: var(--pp-fg-1); }
.subpage-content { padding: 64px 0 96px; position: relative; }
.subpage-content-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.subpage-section + .subpage-section { margin-top: 64px; }
.subpage-h2 {
font-family: var(--pp-font-display); font-weight: 800; font-size: 36px;
line-height: 1.15; letter-spacing: -0.03em; color: var(--pp-fg-1);
margin: 0 0 16px; text-wrap: balance;
}
.subpage-body { font-size: 17px; line-height: 1.65; color: var(--pp-fg-3); margin: 0 0 18px; }
.subpage-bullets { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.subpage-bullets li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 16px; line-height: 1.55; color: var(--pp-fg-2);
}
.subpage-bullets li::before {
content: ''; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
border-radius: 50%; background: var(--pp-purple-100);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.subpage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.subpage-card {
background: #fff; border: 1px solid var(--pp-line); border-radius: 16px;
padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.subpage-card h3 {
font-family: var(--pp-font-display); font-weight: 700; font-size: 18px;
margin: 0; color: var(--pp-fg-1);
}
.subpage-card p { font-size: 14.5px; line-height: 1.55; color: var(--pp-fg-3); margin: 0; }
.subpage-card a { color: var(--pp-purple-700); font-weight: 600; font-size: 13.5px; margin-top: auto; }
.subpage-related { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--pp-line); }
.subpage-related h2 {
font-family: var(--pp-font-display); font-weight: 700; font-size: 22px;
margin: 0 0 16px; color: var(--pp-fg-1);
}
.subpage-related ul { list-style: none; padding: 0; margin: 0; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 24px; }
.subpage-related li a {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14.5px; color: var(--pp-fg-2); padding: 6px 0;
}
.subpage-related li a:hover { color: var(--pp-purple-700); }
@media (max-width: 720px) {
.subpage-hero { padding: 80px 0 48px; }
.subpage-h1 { font-size: 36px; }
.subpage-lead { font-size: 17px; }
.subpage-h2 { font-size: 28px; }
.subpage-grid { grid-template-columns: 1fr; }
}
/* ============== Subpage rich content blocks ============== */
/* Stats strip: 4 numbers above the fold of the body, each with a label.
Set in display font, with a hairline divider between them. */
.subpage-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; max-width: 1080px; margin: 16px auto 64px;
padding: 32px; background: #fff; border: 1px solid var(--pp-line);
border-radius: 24px; box-shadow: 0 18px 60px -32px rgba(60, 30, 110, .15);
}
.subpage-stat { padding: 8px 24px; border-right: 1px solid var(--pp-line); }
.subpage-stat:last-child { border-right: none; }
.subpage-stat-num {
font-family: var(--pp-font-display); font-weight: 800; font-size: 36px;
line-height: 1.05; letter-spacing: -0.03em; color: var(--pp-fg-1);
margin-bottom: 6px;
}
.subpage-stat-label {
font-size: 13px; line-height: 1.4; color: var(--pp-fg-3); font-weight: 500;
}
/* Two-column block: text on one side, visual placeholder on the other.
Alternates side automatically by giving every other block .is-flipped. */
.subpage-block {
display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: center;
padding: 56px 0; border-top: 1px solid var(--pp-line);
}
.subpage-block:first-of-type { border-top: none; padding-top: 32px; }
.subpage-block.is-flipped .subpage-block-text { order: 2; }
.subpage-block-text h2 {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 36px; line-height: 1.15; letter-spacing: -0.025em;
color: var(--pp-fg-1); margin: 0 0 16px;
}
.subpage-block-text p { font-size: 17px; line-height: 1.65; color: var(--pp-fg-3); margin: 0 0 14px; }
.subpage-block-visual {
background: linear-gradient(135deg, var(--pp-purple-50), var(--pp-purple-100));
border: 1px solid var(--pp-line); border-radius: 20px;
padding: 32px; min-height: 280px;
display: flex; flex-direction: column; gap: 14px;
}
.subpage-block-stat {
font-family: var(--pp-font-display); font-weight: 800;
font-size: 56px; line-height: 1; color: var(--pp-purple-700);
letter-spacing: -0.04em;
}
.subpage-block-stat-label {
font-size: 14px; color: var(--pp-fg-3); margin-top: -6px;
}
.subpage-block-visual code, .subpage-block-visual pre {
font-family: var(--pp-font-mono); font-size: 12.5px;
background: rgba(255,255,255,0.7); padding: 12px;
border-radius: 10px; color: var(--pp-fg-2);
white-space: pre-wrap; line-height: 1.55; margin: 0;
}
.subpage-block-mini {
background: rgba(255,255,255,0.85); border: 1px solid rgba(108,59,170,0.15);
border-radius: 12px; padding: 14px 16px;
display: flex; justify-content: space-between; align-items: center;
}
.subpage-block-mini-label { font-size: 13px; color: var(--pp-fg-3); }
.subpage-block-mini-val { font-family: var(--pp-font-mono); font-size: 13.5px; color: var(--pp-fg-1); font-weight: 600; }
/* Spec / comparison table */
.subpage-table-wrap { margin: 32px 0; overflow-x: auto; border-radius: 16px; border: 1px solid var(--pp-line); }
.subpage-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
.subpage-table th,
.subpage-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--pp-line); }
.subpage-table thead th {
background: var(--pp-purple-50); font-weight: 600; color: var(--pp-fg-1);
font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
}
.subpage-table tbody tr:last-child td { border-bottom: none; }
.subpage-table td.subpage-table-num {
font-family: var(--pp-font-mono); color: var(--pp-purple-700); font-weight: 600;
}
/* FAQ */
.subpage-faq { margin: 56px 0; }
.subpage-faq h2 {
font-family: var(--pp-font-display); font-weight: 800; font-size: 32px;
line-height: 1.15; margin: 0 0 24px; color: var(--pp-fg-1);
}
.subpage-faq details {
padding: 18px 22px; border: 1px solid var(--pp-line); border-radius: 12px;
background: #fff; margin-bottom: 10px; transition: box-shadow .2s ease;
}
.subpage-faq details[open] { box-shadow: 0 8px 28px -16px rgba(60,30,110,.18); }
.subpage-faq summary {
cursor: pointer; font-weight: 600; font-size: 16px; color: var(--pp-fg-1);
list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.subpage-faq summary::-webkit-details-marker { display: none; }
.subpage-faq summary::after {
content: '+'; font-size: 22px; font-weight: 300; color: var(--pp-purple-600);
transition: transform .2s ease;
}
.subpage-faq details[open] summary::after { content: '−'; }
.subpage-faq details p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--pp-fg-3); }
/* Testimonial */
.subpage-testimonial {
margin: 64px auto; max-width: 840px;
background: #fff; border: 1px solid var(--pp-line); border-radius: 20px;
padding: 40px; text-align: center;
box-shadow: 0 24px 60px -32px rgba(60,30,110,.18);
}
.subpage-testimonial blockquote {
margin: 0 0 20px; font-family: var(--pp-font-display); font-weight: 600;
font-size: 22px; line-height: 1.4; color: var(--pp-fg-1); letter-spacing: -0.01em;
}
.subpage-testimonial blockquote::before { content: '“'; font-size: 60px; color: var(--pp-purple-300); line-height: 0; vertical-align: -22px; margin-right: 6px; }
.subpage-testimonial cite {
font-style: normal; font-size: 14px; color: var(--pp-fg-3);
}
.subpage-testimonial cite strong { color: var(--pp-fg-1); font-weight: 600; }
/* Callout — single number with explanation, used for emphasis between blocks */
.subpage-callout {
margin: 56px 0; padding: 48px 40px;
background: var(--pp-purple-50); border-radius: 20px;
display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
}
.subpage-callout-num {
font-family: var(--pp-font-display); font-weight: 800; font-size: 88px;
line-height: 1; color: var(--pp-purple-700); letter-spacing: -0.04em;
}
.subpage-callout-text h3 {
font-family: var(--pp-font-display); font-weight: 700; font-size: 22px;
margin: 0 0 8px; color: var(--pp-fg-1);
}
.subpage-callout-text p { font-size: 15.5px; line-height: 1.6; color: var(--pp-fg-3); margin: 0; }
@media (max-width: 880px) {
.subpage-stats { grid-template-columns: repeat(2, 1fr); padding: 20px; }
.subpage-stat { border-right: none; border-bottom: 1px solid var(--pp-line); padding: 16px; }
.subpage-stat:nth-child(2) { border-right: none; }
.subpage-stat:nth-last-child(-n+2) { border-bottom: none; }
.subpage-block { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
.subpage-block.is-flipped .subpage-block-text { order: 0; }
.subpage-block-text h2 { font-size: 28px; }
.subpage-callout { grid-template-columns: 1fr; gap: 16px; padding: 32px 24px; text-align: center; }
.subpage-callout-num { font-size: 64px; }
.subpage-table { font-size: 13px; }
}
/* ============== Footer ============== */
.footer { background: #101010; color: #D8D8E0; padding: 80px 0 32px; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.footer-grid {
display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 40px;
padding-bottom: 56px; border-bottom: 1px solid #26262F;
}
.footer-brand-col { text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.footer-tagline { color: #8E8E99; font-size: 14px; line-height: 1.6; max-width: 280px; margin: 0 auto; }
.footer-col-title {
font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: #fff; margin-bottom: 18px;
}
.footer-col a {
display: block; color: #8E8E99; font-size: 13.5px; padding: 6px 0;
text-decoration: none; cursor: pointer;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 28px; font-size: 12.5px; color: #8E8E99;
}
.footer-bottom-right { display: flex; gap: 18px; }
/* ============== Responsive (basic, mobile-first refinements) ============== */
@media (max-width: 960px) {
.hero-inner,
.feature-inner.left,
.feature-inner.right,
.mi-grid,
.why-grid,
.footer-grid { grid-template-columns: 1fr; gap: 36px; }
/* On mobile, every feature-section should stack with its text on top
and the mock card below, regardless of which side the card was on
in the desktop layout. .feature-inner.right has the mock-card first
in source order, so we need explicit orders to flip it. */
.feature-inner.left .feature-text,
.feature-inner.right .feature-text { order: 0; }
.feature-inner.left .mock-card,
.feature-inner.right .mock-card { order: 1; }
.pillars-grid { grid-template-columns: repeat(2, 1fr); }
.why-cards { grid-template-columns: 1fr; }
.int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-title { font-size: 40px; }
.pillars-h2, .feature-h2, .why-h2 { font-size: 36px; }
.cta-section { padding: 64px 0 56px; }
.cta-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.cta-lead { grid-column: 1 / -1; max-width: 560px; }
.cta-h2 { font-size: 36px; }
.hero-device { transform: none; }
.why-head { position: static; }
.topbar nav.nav-list { display: none; }
/* !important required because the base .nav-toggle { display:none } rule
sits later in the file and would otherwise win on equal specificity. */
.nav-toggle { display: inline-flex !important; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ========== Phone breakpoint ==========
Below 720px we drop the hero decorations (floating callouts, phone mock)
and tighten typography + spacing. Mobile users don't need the desktop
"marketing illustration" weight — they need quick scrolling content. */
@media (max-width: 720px) {
/* Hide non-essential imagery */
.float-card { display: none !important; }
.phone { display: none !important; }
.mobile-row { grid-template-columns: 1fr !important; }
.mobile-text { min-height: 0 !important; align-items: flex-start; }
/* Tighter hero */
.hero { padding-top: 40px; padding-bottom: 24px; }
.hero-title { font-size: 32px; line-height: 1.05; }
.hero-body { font-size: 16px; max-width: 100%; }
.hero-cta-row { gap: 8px; margin-top: 20px; }
.btn-pill-primary, .btn-pill-secondary { padding: 12px 18px; font-size: 14px; }
/* Section spacing/typography */
.section-h2,
.pillars-h2,
.feature-h2,
.why-h2,
.cta-h2,
.faq-h2 { font-size: 26px !important; }
.section-lead { font-size: 16px; }
.pillars { padding: 36px 0 8px; }
.pillars-head { margin-bottom: 32px; }
.feature-section { padding: 40px 0; }
.feature-inner.left, .feature-inner.right { gap: 28px; }
.why-section { padding: 40px 0; }
.faq-section { padding: 40px 0; }
.cta-section { padding: 40px 0 24px; }
.cta-grid { grid-template-columns: 1fr; gap: 24px; }
.cta-h2 { font-size: 26px; }
/* Container/topbar padding */
.topbar-inner { height: 56px; padding: 0 16px; }
.container { padding: 0 16px; }
.topbar .btn-ghost { display: none; } /* save room */
/* Mock panels — keep but tighten */
.mock-card, .payroll-card, .wfh-card { padding: 16px; }
.candidate-row { grid-template-columns: 32px 1fr 60px; gap: 8px; }
.candidate-row > :nth-child(3),
.candidate-row > :nth-child(5) { display: none; }
.wfh-grid { grid-template-columns: 1fr !important; gap: 16px; }
.payroll-stats { grid-template-columns: 1fr 1fr; }
/* Footer grid 1-up */
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-brand-col { order: -1; }
/* Tap-target safety on phones */
.pillar-card { min-height: 0; padding: 24px; }
/* Narrow phones (Galaxy Z Fold folded ~344px etc.) — pillar grid was
still 2 columns from the 960px breakpoint, leaving 4px of overflow.
Force single column at phone widths. */
.pillars-grid { grid-template-columns: 1fr; }
}
/* Tap-target padding for in-card links — applies at every breakpoint so
tablets and folding devices also clear the 24×24 minimum. */
.app .cta-card-link { padding: 10px 0; min-height: 40px; align-items: center; }
.pillar-link { padding: 8px 0; min-height: 40px; display: inline-flex; align-items: center; }
/* Drop the decorative section-glow pseudo-elements on mobile entirely.
They use right/left: -200px with width: 720px on each section, which works as a
soft bleed on desktop but extends the document beyond the mobile viewport,
causing horizontal scroll. Removing them also frees mainthread and saves paint. */
@media (max-width: 720px) {
.app > section::before,
.app > section::after { display: none !important; }
}
/* Disable the hero-device float animation up to 1440px. Its keyframes always
apply translateX(40px) scale(1.12), which extends the device past the
container's right column on every viewport up through 1440 (clip ~2–82 px
depending on size). overflow-x: clip on body would mask it, but the
dashboard right edge would still be cropped. The floaty flair kicks in only
on extra-wide monitors (1441+) where the hero-inner is centered with
enough horizontal headroom for the 1.12 scale to bleed cleanly. */
@media (max-width: 1440px) {
.hero-device { transform: none !important; animation: none !important; }
}
/* Universal horizontal overflow clip. Catches the hero device's scale(1.12)
transform on tablet sizes (~800–1280 px), the decorative section-glow
pseudos, and any future decorative bleed. overflow-x: clip is preferred
(no scroll container, doesn't break position: sticky); falls back to
hidden on older browsers that don't support clip. */
html, body { overflow-x: hidden; overflow-x: clip; }
/* Tiny phones */
@media (max-width: 380px) {
.hero-title { font-size: 28px; }
.topbar .btn-primary { padding: 8px 14px; font-size: 12.5px; }
.container { padding: 0 14px; }
}
/* ========== Hamburger button ==========
Visible only at <=960px (set in the block above). */
.nav-toggle {
display: none;
align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 8px;
border: 1px solid var(--pp-line);
background: #fff; cursor: pointer;
flex-direction: column; gap: 4px;
margin-left: 4px;
}
.nav-toggle-bar {
display: block; width: 18px; height: 2px;
background: var(--pp-fg-1); border-radius: 2px;
transition: transform .18s ease, opacity .18s ease;
}
.topbar.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.topbar.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
/* ========== Mobile drawer ==========
Collapses to height 0 by default. .topbar.is-open expands it. */
.mobile-nav {
display: none;
flex-direction: column;
padding: 8px 16px 16px;
background: #fff;
border-bottom: 1px solid var(--pp-line);
}
.mobile-nav a {
padding: 14px 12px;
font-size: 16px; font-weight: 500; color: var(--pp-fg-1);
border-bottom: 1px solid var(--pp-line);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav-cta {
margin-top: 12px; background: var(--pp-purple-600); color: #fff !important;
border-radius: 999px; text-align: center; font-weight: 600;
border-bottom: none !important;
}
@media (max-width: 960px) {
.topbar.is-open .mobile-nav { display: flex; }
}
@media (min-width: 961px) {
.mobile-nav { display: none !important; }
.nav-toggle { display: none !important; }
}
/* ========== Mock cards: non-selectable ==========
Mock dashboards and floating callouts are illustrative previews, not
real data. Disable text selection so the cursor reads them as
"screenshot" rather than copy-able content. Links and buttons inside
still receive clicks because we only kill user-select, not pointer-events.
Form inputs (rare inside mocks) re-enable selection so typing works. */
.hero-device,
.mock-card,
.payroll-card,
.wfh-card,
.phone,
.float-card {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hero-device input, .hero-device textarea,
.mock-card input, .mock-card textarea,
.payroll-card input, .payroll-card textarea,
.wfh-card input, .wfh-card textarea,
.phone input, .phone textarea,
.float-card input, .float-card textarea {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* ========== Legal pages ==========
Shared styles for /legal/{privacy,terms,security,dpa} and /trust.
Modeled on Zerodha's terms layout: centered narrow column, numbered
H2 sections, decimal H3 subsections, plain prose, divider per section.
The .app section glow is suppressed inside .legal-page so the long
reading column stays visually quiet. */
.app > section.legal-page::before,
.app > section.legal-page::after { display: none; }
.legal-page {
padding: 56px 0 96px;
background: var(--pp-bg);
}
.legal-container {
max-width: 820px;
margin: 0 auto;
padding: 0 32px;
}
.legal-header { margin-bottom: 40px; }
.legal-eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--pp-purple-600);
margin-bottom: 14px;
}
.legal-h1 {
font-family: var(--pp-font-display);
font-weight: 800;
font-size: 44px;
line-height: 1.05;
letter-spacing: -.03em;
color: var(--pp-fg-1);
margin: 0 0 18px;
text-wrap: balance;
}
.legal-meta {
font-size: 14px; color: var(--pp-fg-3);
display: flex; flex-wrap: wrap; gap: 6px 18px;
padding-bottom: 24px;
border-bottom: 1px solid var(--pp-line);
}
.legal-meta strong { color: var(--pp-fg-2); font-weight: 600; }
.legal-intro {
font-size: 17px; line-height: 1.65; color: var(--pp-fg-3);
margin: 28px 0 0;
}
/* In-page table of contents. Anchor links to numbered sections. */
.legal-toc {
margin: 32px 0 48px;
padding: 22px 26px;
background: var(--pp-bg-subtle);
border: 1px solid var(--pp-line);
border-radius: 14px;
}
.legal-toc-title {
font-size: 12px; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--pp-fg-3);
margin: 0 0 14px;
}
.legal-toc-list {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr 1fr;
gap: 6px 24px;
}
.legal-toc-list a {
display: block;
font-size: 14px; line-height: 1.5;
color: var(--pp-fg-2);
padding: 4px 0;
}
.app .legal-toc-list a:hover { color: var(--pp-purple-700); }
.legal-toc-list .num {
display: inline-block; min-width: 22px;
color: var(--pp-fg-3); font-variant-numeric: tabular-nums;
}
/* Body typography. H2 = numbered section, H3 = decimal subsection. */
.legal-body { font-size: 16px; line-height: 1.7; color: var(--pp-fg-2); }
.legal-body h2.legal-section-h {
font-family: var(--pp-font-display);
font-weight: 700;
font-size: 26px;
letter-spacing: -.02em;
color: var(--pp-fg-1);
margin: 56px 0 18px;
scroll-margin-top: 88px;
}
.legal-body h2.legal-section-h:first-of-type { margin-top: 12px; }
.legal-body h3.legal-sub-h {
font-family: var(--pp-font-display);
font-weight: 600;
font-size: 18px;
color: var(--pp-fg-1);
margin: 32px 0 10px;
scroll-margin-top: 88px;
}
.legal-body p { margin: 0 0 16px; }
.legal-body strong { color: var(--pp-fg-1); font-weight: 600; }
.legal-body ul, .legal-body ol {
margin: 0 0 18px; padding-left: 22px;
}
.legal-body li { margin-bottom: 8px; }
.legal-body ol.legal-alpha { list-style-type: lower-alpha; }
.app .legal-body a {
color: var(--pp-purple-700);
border-bottom: 1px solid var(--pp-purple-200);
}
.app .legal-body a:hover {
color: var(--pp-purple-900);
border-bottom-color: var(--pp-purple-500);
}
.legal-body hr.legal-divider {
border: none; border-top: 1px solid var(--pp-line);
margin: 48px 0 0;
}
.legal-body .legal-callout {
background: var(--pp-purple-50);
border-left: 3px solid var(--pp-purple-500);
padding: 16px 20px;
border-radius: 0 10px 10px 0;
margin: 20px 0;
font-size: 15px;
}
.legal-body .legal-callout p:last-child { margin-bottom: 0; }
/* Footer nav across legal pages. The links sit BETWEEN two horizontal
rules, so we use border-top + border-bottom on the nav itself and the
legal pages no longer need a separate
. */
.legal-footer-nav {
margin-top: 64px;
padding: 24px 0;
border-top: 1px solid var(--pp-line);
border-bottom: 1px solid var(--pp-line);
display: flex; flex-wrap: wrap; gap: 8px 18px;
font-size: 14px;
}
.legal-footer-nav .legal-footer-label {
color: var(--pp-fg-3); margin-right: 4px;
}
.app .legal-footer-nav a {
color: var(--pp-fg-2); font-weight: 500;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
}
.app .legal-footer-nav a:hover {
color: var(--pp-purple-700);
border-bottom-color: var(--pp-purple-300);
}
.legal-footer-nav .is-current {
color: var(--pp-purple-700);
border-bottom-color: var(--pp-purple-300) !important;
}
/* Trust hub: card grid linking out to legal docs and resources. */
.trust-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 40px 0;
}
.trust-hub-card {
display: block;
padding: 22px 24px;
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: 14px;
transition: transform 180ms var(--pp-ease-out), border-color 180ms, box-shadow 180ms;
}
.app .trust-hub-card:hover {
transform: translateY(-2px);
border-color: var(--pp-purple-300);
box-shadow: var(--pp-shadow-md);
color: inherit;
}
.trust-hub-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--pp-purple-50); color: var(--pp-purple-600);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.trust-hub-title {
font-family: var(--pp-font-display);
font-weight: 700; font-size: 17px;
color: var(--pp-fg-1);
margin: 0 0 6px;
}
.trust-hub-desc {
font-size: 14px; line-height: 1.55;
color: var(--pp-fg-3);
margin: 0;
}
@media (max-width: 720px) {
.legal-h1 { font-size: 34px; }
.legal-toc-list { grid-template-columns: 1fr; }
.legal-body h2.legal-section-h { font-size: 22px; margin-top: 44px; }
}
/* ========== What's new (release stream) ==========
Freshworks-style product-updates page. Single column with month
sections, category pills, and entry cards. No JS filtering — readers
scroll or use the in-page anchors to jump between months. */
.app > section.whatsnew-page::before,
.app > section.whatsnew-page::after { display: none; }
.whatsnew-page {
padding: 56px 0 96px;
background: var(--pp-bg);
}
.whatsnew-container {
max-width: 880px;
margin: 0 auto;
padding: 0 32px;
}
.whatsnew-header {
margin-bottom: 48px;
text-align: center;
}
.whatsnew-eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--pp-purple-600);
margin-bottom: 14px;
}
.whatsnew-h1 {
font-family: var(--pp-font-display);
font-weight: 800;
font-size: 44px;
line-height: 1.05;
letter-spacing: -.03em;
color: var(--pp-fg-1);
margin: 0 0 16px;
text-wrap: balance;
}
.whatsnew-lead {
font-size: 18px; line-height: 1.6;
color: var(--pp-fg-3);
margin: 0 auto;
max-width: 620px;
}
/* Quick year/month nav at the top — anchor links only, no JS filter. */
.whatsnew-jump {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
margin: 32px 0 8px;
}
.whatsnew-jump a {
font-size: 13px; font-weight: 500; color: var(--pp-fg-3);
padding: 6px 14px; border: 1px solid var(--pp-line);
border-radius: 999px;
}
.app .whatsnew-jump a:hover {
color: var(--pp-purple-700);
border-color: var(--pp-purple-300);
background: var(--pp-purple-50);
}
.whatsnew-month {
margin-top: 56px;
scroll-margin-top: 88px;
}
.whatsnew-month-h {
font-family: var(--pp-font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -.01em;
color: var(--pp-fg-2);
margin: 0 0 22px;
padding-bottom: 12px;
border-bottom: 1px solid var(--pp-line);
}
.whatsnew-entry {
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: 14px;
padding: 22px 26px;
margin-bottom: 14px;
transition: border-color 200ms var(--pp-ease-out), box-shadow 200ms;
}
.app .whatsnew-entry:hover {
border-color: var(--pp-purple-200);
box-shadow: var(--pp-shadow-md);
}
.whatsnew-pill {
display: inline-block;
font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.whatsnew-pill--new { background: var(--pp-purple-50); color: var(--pp-purple-700); }
.whatsnew-pill--improved { background: #E7EFFA; color: #194B8F; }
.whatsnew-pill--fixed { background: #E0F1E5; color: #14653B; }
.whatsnew-pill--integration { background: #FFF1D6; color: #7A5800; }
.whatsnew-pill--compliance { background: #ECEDF1; color: #2E2E36; }
.whatsnew-entry-h {
font-family: var(--pp-font-display);
font-weight: 700;
font-size: 19px;
color: var(--pp-fg-1);
margin: 0 0 8px;
letter-spacing: -.01em;
}
.whatsnew-entry-body {
font-size: 15px; line-height: 1.6;
color: var(--pp-fg-3);
margin: 0;
}
.app .whatsnew-entry-link {
display: inline-block;
margin-top: 10px;
font-size: 14px; font-weight: 500;
color: var(--pp-purple-700);
border-bottom: 1px solid var(--pp-purple-200);
padding-bottom: 1px;
}
.app .whatsnew-entry-link:hover {
color: var(--pp-purple-900);
border-bottom-color: var(--pp-purple-500);
}
@media (max-width: 720px) {
.whatsnew-h1 { font-size: 34px; }
.whatsnew-entry { padding: 18px 20px; }
}
/* ========== Plan comparison table ==========
Side-by-side feature comparison modeled on Zoho People's pricing-
comparison page. Plan columns sticky on scroll, feature categories
grouped by visible section bands, cells use checkmarks, dashes, or
short text values. Two pages reuse the same styles: HRMS and ATS. */
.app > section.compare-page::before,
.app > section.compare-page::after { display: none; }
.compare-page {
padding: 56px 0 96px;
background: var(--pp-bg);
}
.compare-container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.compare-header {
text-align: center;
margin-bottom: 48px;
}
.compare-eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--pp-purple-600);
margin-bottom: 14px;
}
.compare-h1 {
font-family: var(--pp-font-display);
font-weight: 800;
font-size: 44px;
line-height: 1.05;
letter-spacing: -.03em;
color: var(--pp-fg-1);
margin: 0 0 16px;
text-wrap: balance;
}
.compare-lead {
font-size: 18px; line-height: 1.6;
color: var(--pp-fg-3);
margin: 0 auto;
max-width: 640px;
}
.compare-table-wrap {
border: 1px solid var(--pp-line);
border-radius: 14px;
background: var(--pp-surface);
overflow: hidden;
}
.compare-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 14px;
}
.compare-thead {
position: sticky;
top: 0;
z-index: 5;
background: var(--pp-surface);
box-shadow: 0 2px 6px rgba(20,20,35,0.04);
}
.compare-thead th {
text-align: left;
padding: 22px 20px 18px;
vertical-align: top;
border-bottom: 1px solid var(--pp-line);
background: var(--pp-surface);
}
.compare-feature-col { width: 34%; }
.compare-plan-col { width: 22%; text-align: center; }
.compare-plan-col.is-popular { background: var(--pp-purple-50) !important; }
.compare-plan-name {
font-family: var(--pp-font-display);
font-weight: 700;
font-size: 18px;
color: var(--pp-fg-1);
}
.compare-plan-price {
font-family: var(--pp-font-display);
font-weight: 800;
font-size: 22px;
color: var(--pp-fg-1);
letter-spacing: -.02em;
margin-top: 4px;
}
.compare-plan-cadence {
font-size: 11px;
color: var(--pp-fg-3);
margin-bottom: 14px;
min-height: 14px;
}
.compare-plan-badge {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
color: var(--pp-purple-700);
background: #fff;
padding: 3px 10px;
border-radius: 999px;
display: inline-block;
margin-bottom: 8px;
}
.compare-plan-cta {
display: inline-block;
padding: 8px 18px;
border-radius: 999px;
font-size: 13px; font-weight: 600;
background: var(--pp-purple-600);
color: #fff !important;
border: 1px solid transparent;
}
.app .compare-plan-cta:hover { background: var(--pp-purple-700); color: #fff !important; }
.compare-plan-cta--ghost {
background: #fff;
color: var(--pp-fg-1) !important;
border: 1px solid var(--pp-line-strong);
}
.app .compare-plan-cta--ghost:hover { background: var(--pp-bg-subtle); color: var(--pp-purple-700) !important; }
.compare-plan-cta + .compare-plan-cta { margin-left: 6px; }
/* Category section bands */
.compare-table tr.compare-category th {
background: var(--pp-bg-subtle);
font-size: 11px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--pp-fg-2);
padding: 16px 20px 12px;
text-align: left;
border-top: 1px solid var(--pp-line);
}
/* Body rows */
.compare-table tbody td {
padding: 13px 20px;
vertical-align: top;
border-top: 1px solid var(--pp-line);
}
.compare-table tbody tr.compare-category + tr td { border-top: none; }
.compare-table tbody td.compare-feature-name {
color: var(--pp-fg-2);
font-weight: 500;
}
.compare-table .compare-note {
display: block;
font-size: 12px; font-weight: 400;
color: var(--pp-fg-3);
margin-top: 2px;
}
.compare-table tbody td:not(.compare-feature-name) {
text-align: center;
color: var(--pp-fg-3);
}
.compare-table tbody td.is-popular {
background: rgba(244, 238, 251, 0.55);
}
.compare-table tbody tr:hover td { background: var(--pp-bg-subtle); }
.compare-table tbody tr:hover td.is-popular { background: var(--pp-purple-50); }
/* Cell content variants */
.compare-check {
color: var(--pp-success);
display: inline-block;
vertical-align: middle;
}
.compare-dash {
color: var(--pp-fg-5);
font-size: 16px;
font-weight: 600;
}
.compare-value {
font-weight: 500;
color: var(--pp-fg-2);
}
/* Footer CTA row */
.compare-table tfoot td {
padding: 22px 20px;
vertical-align: top;
border-top: 1px solid var(--pp-line);
background: var(--pp-bg-subtle);
text-align: center;
}
.compare-table tfoot td:first-child { text-align: left; }
/* CTA strip below the table */
.compare-bottom {
margin-top: 56px;
padding: 32px;
border: 1px solid var(--pp-line);
border-radius: 14px;
background: var(--pp-surface);
display: flex; flex-wrap: wrap; gap: 16px;
align-items: center; justify-content: space-between;
}
.compare-bottom-text { font-size: 16px; color: var(--pp-fg-2); max-width: 600px; line-height: 1.55; }
.compare-bottom-text strong { color: var(--pp-fg-1); }
@media (max-width: 880px) {
.compare-h1 { font-size: 34px; }
.compare-table { font-size: 13px; }
.compare-table th, .compare-table td { padding: 10px 12px; }
.compare-plan-name { font-size: 16px; }
.compare-plan-price { font-size: 19px; }
}
@media (max-width: 720px) {
.compare-table-wrap { overflow-x: auto; }
.compare-table { min-width: 720px; }
.compare-thead { position: static; }
}
/* ========== About page (Intercom-style) ==========
Pure-typography hero, narrative paragraph, bootstrapped callout, then
leadership grid. Existing pillar cards (values) and FAQ classes are
reused below the leadership section. */
.app > section.about-hero::before,
.app > section.about-hero::after { display: none; }
.about-hero {
padding: 88px 0 32px;
background: var(--pp-bg);
text-align: center;
}
.about-hero-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 32px;
}
.about-h1 {
font-family: var(--pp-font-display);
font-weight: 800;
font-size: 56px;
line-height: 1.04;
letter-spacing: -.035em;
color: var(--pp-fg-1);
margin: 0;
text-wrap: balance;
}
.app > section.about-narrative::before,
.app > section.about-narrative::after { display: none; }
.about-narrative {
padding: 24px 0 24px;
background: var(--pp-bg);
}
.about-narrative-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 32px;
text-align: center;
}
.about-narrative-inner p {
font-size: 19px;
line-height: 1.6;
color: var(--pp-fg-3);
margin: 0 0 18px;
}
.about-narrative-inner p:last-child { margin-bottom: 0; }
.about-narrative-inner strong { color: var(--pp-fg-2); font-weight: 600; }
.app > section.about-callout-section::before,
.app > section.about-callout-section::after { display: none; }
.about-callout-section {
padding: 32px 0 64px;
background: var(--pp-bg);
}
.about-callout {
max-width: 720px;
margin: 0 auto;
padding: 28px 32px;
background: var(--pp-purple-50);
border: 1px solid var(--pp-purple-200);
border-radius: 14px;
text-align: center;
}
.about-callout-eyebrow {
font-size: 12px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--pp-purple-700);
margin-bottom: 10px;
}
.about-callout-text {
font-family: var(--pp-font-display);
font-weight: 700;
font-size: 22px;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--pp-fg-1);
margin: 0 0 8px;
}
.about-callout-sub {
font-size: 15px;
line-height: 1.55;
color: var(--pp-fg-3);
margin: 0;
}
/* Leadership grid */
.app > section.leadership-section::before,
.app > section.leadership-section::after { display: none; }
.leadership-section {
padding: 48px 0 72px;
background: var(--pp-bg);
}
.leadership-inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 32px;
}
.leadership-head {
text-align: center;
margin-bottom: 48px;
}
.leadership-eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--pp-purple-600);
margin-bottom: 14px;
}
.leadership-h2 {
font-family: var(--pp-font-display);
font-weight: 800;
font-size: 36px;
line-height: 1.1;
letter-spacing: -.02em;
color: var(--pp-fg-1);
margin: 0 0 12px;
}
.leadership-lead {
font-size: 17px;
color: var(--pp-fg-3);
max-width: 560px;
margin: 0 auto;
line-height: 1.55;
}
.leadership-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.leadership-card {
background: var(--pp-surface);
border: 1px solid var(--pp-line);
border-radius: 16px;
padding: 28px 26px;
transition: border-color 200ms var(--pp-ease-out), box-shadow 200ms, transform 200ms;
}
.app .leadership-card:hover {
border-color: var(--pp-purple-200);
box-shadow: var(--pp-shadow-md);
transform: translateY(-2px);
}
.leadership-avatar {
width: 64px; height: 64px;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
font-family: var(--pp-font-display);
font-size: 22px; font-weight: 700;
color: #fff;
margin-bottom: 18px;
letter-spacing: -.01em;
}
.leadership-avatar--purple { background: var(--pp-purple-500); }
.leadership-avatar--blue { background: #2A6BE0; }
.leadership-avatar--green { background: #1A8A4E; }
.leadership-name {
font-family: var(--pp-font-display);
font-weight: 700;
font-size: 19px;
color: var(--pp-fg-1);
margin: 0 0 4px;
letter-spacing: -.01em;
}
.leadership-title {
font-size: 14px;
font-weight: 500;
color: var(--pp-purple-700);
margin: 0 0 14px;
}
.leadership-bio {
font-size: 15px;
line-height: 1.6;
color: var(--pp-fg-3);
margin: 0;
}
@media (max-width: 720px) {
.about-h1 { font-size: 38px; }
.leadership-h2 { font-size: 28px; }
.about-callout-text { font-size: 18px; }
}
/* ========== User-requested global overrides ==========
Per direct request: collapse the entire foreground colour ladder to a
single rgb(29,29,31) and force line-height: 1 on every heading. The
ladder collapse means muted captions and section leads now read at
the same weight as body and headings. */
:root {
--pp-fg-1: #1D1D1F;
--pp-fg-2: #1D1D1F;
--pp-fg-3: #1D1D1F;
--pp-fg-4: #1D1D1F;
--pp-fg-5: #1D1D1F;
}
h1, h2, h3, h4, h5, h6 { line-height: 1 !important; }