/* ==========================================================
   keeplee - each product's own site. --pd is its colour, and
   each layout below gives its first screen a different shape.
   ========================================================== */
.pd-site { --pd: #d97757; --pd-soft: #f7ebe4; --pd-ink: #a94f32; }
.pd-crm { --pd: #9a6f93; --pd-soft: #f2e9f0; --pd-ink: #74506e; }
.pd-inventory { --pd: #788c5d; --pd-soft: #edf0e4; --pd-ink: #56683f; }
.pd-hr-payroll { --pd: #d4a14f; --pd-soft: #f8efdc; --pd-ink: #8a6420; }
.pd-asset-management { --pd: #6a8fb5; --pd-soft: #e6edf4; --pd-ink: #456a90; }
.pd-job-board { --pd: #3f8a8c; --pd-soft: #e2f0ef; --pd-ink: #2b6668; }
.pd-site .eyebrow { color: var(--pd-ink); }
.pd-site .btn-pop, .pd-site .btn-primary:not(.cta-adapt) { background: var(--pd-ink); box-shadow: none; }

.pd-site .site-header { position: relative; }
.pd-nav { position: sticky; top: 0; z-index: 90; background: #141413; color: #faf9f5; }
.pd-nav-in { display: flex; align-items: center; gap: 28px; min-height: 54px; }
.pd-name { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; color: #faf9f5; white-space: nowrap; }
.pd-name:hover { text-decoration: none; }
.pd-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--pd); }
.pd-mark .ico { width: 18px; height: 18px; }
.pd-site .signup-btn { display: none; }
.pd-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.pd-nav li a { color: #cfccc2; }
.pd-nav li a:hover, .pd-nav li a[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.pd-nav .pd-try { margin-left: auto; white-space: nowrap; }

.pd-hero { padding: 56px 0 72px; background: var(--pd-soft); }
.pd-hero-in { display: grid; gap: 36px; align-items: center; }
.pd-hero .eyebrow { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.pd-hero h1 { margin: 10px 0 16px; font-weight: 500; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.06; text-wrap: balance; }
.pd-art svg { width: min(240px, 60%); margin-bottom: 18px; }
.pd-form { box-shadow: none; border-radius: 14px; scroll-margin-top: 80px; }
.pd-form h2 { margin: 0; font-size: 1.6rem; font-weight: 500; scroll-margin-top: 90px; }
.pd-form .btn { width: 100%; justify-content: center; }
.pd-form .field input { background: #faf9f5; }
#free-trial { scroll-margin-top: 90px; }

@media (min-width: 980px) {
  .pd-hero-in { grid-template-columns: 1.05fr .95fr; gap: 64px; }
  /* Books: words left, form right (the default). CRM: the form first. */
  .pd-layout-b .pd-copy { order: 2; }
  /* Inventory: a wide band of words, the form below it on a line. */
  .pd-layout-c .pd-hero-in { grid-template-columns: 1fr; }
  .pd-layout-c .pd-copy { display: grid; grid-template-columns: 1fr 260px; column-gap: 40px; }
  .pd-layout-c .pd-art { grid-column: 2; grid-row: 1 / span 3; }
  .pd-layout-c .pd-art svg { width: 100%; }
  .pd-layout-c .pd-form { grid-template-columns: repeat(4, 1fr); }
  .pd-layout-c .pd-form h2, .pd-layout-c .pd-form .btn, .pd-layout-c .pd-form .fine { grid-column: 1 / -1; }
  /* HR: centred, calm. */
  .pd-layout-d .pd-hero-in { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }
  .pd-layout-d .pd-art svg { margin-inline: auto; }
  .pd-layout-d .pd-form { text-align: left; }
  /* Asset Management: a dark panel for the words. */
  .pd-layout-e .pd-copy { padding: 44px; border-radius: 14px; background: #141413; }
  .pd-layout-e .pd-copy h1, .pd-layout-e .pd-copy .lead { color: #faf9f5; }
  .pd-layout-e .pd-copy .eyebrow { color: #cfccc2; }
  .pd-layout-e .pd-art g { stroke: #faf9f5; }
  /* Shipment 360: the words on top of a wide picture band, with the form overlapping. */
  .pd-layout-f .pd-hero-in { grid-template-columns: .9fr 1.1fr; }
  .pd-layout-f .pd-art svg { width: 320px; }
}

.pd-part-head { padding: 64px 0 48px; background: var(--pd-soft); }
.pd-part-head h1 { font-weight: 500; margin: 8px 0 12px; }
.pd-part-head .lead { max-width: 36em; margin: 0; }
.pd-sec { padding: 64px 0; }
.pd-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.pd-features li { padding: 26px; border-top: 2px solid #141413; }
.pd-features h2 { margin: 10px 0 6px; font-size: 1.4rem; font-weight: 500; }
.pd-features p { margin: 0; color: var(--muted); }
.pd-links a { color: inherit; }
.pd-price-box { max-width: 720px; text-align: center; }
.pd-price-box h2 { font-weight: 500; }
@media (min-width: 760px) { .pd-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pd-features { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) {
  .pd-nav-in { flex-wrap: wrap; gap: 4px 16px; padding-block: 8px; }
  .pd-nav ul { order: 3; width: 100%; gap: 16px; font-size: .95rem; }
  .pd-name { font-size: 1rem; }
  .pd-name span { white-space: normal; line-height: 1.15; }
  /* On a phone the bar is two or three rows: it scrolls away with the page instead of covering it. */
  .pd-nav { position: static; }
}
.pd-nav .cta-adapt { --cta-ink: #faf9f5; }
/* Product bar matches the main menu: 16px, weight 500, same tracking and spacing. */
.pd-nav li a, .pd-nav .pd-name { font-size: 16px; font-weight: 500; letter-spacing: .01em; line-height: 1; }
.pd-nav ul { gap: 20px; }
.pd-nav .pd-try { font-size: 16px; font-weight: 500; letter-spacing: .01em; line-height: 1.25; padding: 8px 16px; }
.pd-nav .pd-name { font-weight: 600; }

/* One eyebrow style on every product hero: small clay capitals, as on Home */
.pd-hero .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
body.pd-site main .pd-hero p.eyebrow { color: var(--brand); }

/* Brand: the product bar is ivory like the site header, not a black slab */
.pd-nav { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); color: var(--ink); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.pd-name { color: var(--ink); }
.pd-nav li a { color: var(--muted); }
.pd-nav li a:hover, .pd-nav li a[aria-current] { color: var(--ink); }
.pd-nav .cta-adapt { --cta-ink: var(--ink); }

/* One h1 on every product hero: the weight and size Home uses */
.pd-hero h1 { font-weight: 600; font-size: clamp(2.3rem, 4.6vw, 3.6rem); letter-spacing: -.03em; }