/* perfexcrm.app — Perfex Brain Pro landing. Evergreen palette, same as the module. */
:root {
  --forest: #1a6b45;
  --pine: #0f3f29;
  --mint: #5fbf8f;
  --teal: #1f8a7a;
  --sage: #a8d5b9;
  --amber: #d99a2b;
  --coral: #cf4b33;
  --ink: #13241b;
  --text: #2c3a32;
  --muted: #5b6b63;
  --bg: #f1f4f0;
  --tint: #e7efe9;
  --surface: #fff;
  --border: #dbe4dd;
  --radius: 22px;
  --shadow: 0 30px 80px -40px rgba(15, 63, 41, .45), 0 2px 6px rgba(15, 63, 41, .06);
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--forest); }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 .5em; }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
code { font: 600 .92em ui-monospace, Menlo, monospace; background: var(--tint); color: var(--pine); padding: 1px 6px; border-radius: 6px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 32px); }
.center { text-align: center; }
.sub { color: var(--muted); font-size: 18px; max-width: 64ch; }
.sub.center { margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 8px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font: 700 15px var(--font); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--forest); color: #fff; box-shadow: 0 10px 24px -12px rgba(26, 107, 69, .8); }
.btn--primary:hover { background: var(--pine); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--forest); color: var(--forest); }
.btn--light { background: #fff; color: var(--pine); }

/* Header, footer and back-to-top: "Site chrome" at the end of this file (markup from dev/landing_chrome.py) */

/* Hero */
.hero { padding: 64px 0 40px; background: radial-gradient(900px 480px at 85% -10%, rgba(95, 191, 143, .22), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(31, 138, 122, .12), transparent 70%); }
.hero__inner { text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 22px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--pine); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(95, 191, 143, .25); }
.hero h1 { font-size: clamp(44px, 7.4vw, 86px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.hl { background: linear-gradient(90deg, var(--forest), var(--teal) 60%, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 760px; margin: 18px auto 30px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__facts { list-style: none; padding: 0; margin: 40px auto 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 860px; }
.hero__facts li { padding: 14px 10px; background: var(--surface); border-radius: 18px; border: 1px solid var(--border); }
.hero__facts strong { display: block; font-size: 30px; font-weight: 800; color: var(--pine); letter-spacing: -0.03em; line-height: 1.1; }
.hero__facts span { font-size: 13.5px; color: var(--muted); }

/* Browser frame */
.frame { margin: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: #f8faf8; }
.frame__bar i { width: 11px; height: 11px; border-radius: 50%; background: #dbe2dc; }
.frame__bar i:first-child { background: #f0a597; } .frame__bar i:nth-child(2) { background: #f1d08d; } .frame__bar i:nth-child(3) { background: #9fd7b5; }
.frame__bar span { margin-left: 12px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame figcaption { padding: 12px 18px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--border); }
.frame--hero { transform: perspective(1800px) rotateX(4deg); transform-origin: top center; }
.frame--wide { margin-top: 34px; }

/* Strip */
.strip { padding: 34px 0 10px; text-align: center; }
.strip p { font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.strip__row span { padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--pine); }

/* Sections */
.section { padding: 96px 0; }
.section--tint { background: var(--tint); }
.section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(95, 191, 143, .22), transparent 70%), linear-gradient(160deg, #0f3f29, #0a2c1d); color: #d5eadd; }
.section--dark h2, .section--dark h3 { color: #fff; }
.kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); margin-bottom: 10px; }
.kicker--light { color: var(--mint); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split--rev > :first-child { order: 2; }
.split > div > p { color: var(--muted); font-size: 18px; }
.section--dark .split > div > p { color: #bfe0cb; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 32px; font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.ticks--light li { color: #e7f5ec; }
.ticks--light li::before { background-color: var(--mint); }

/* Feature cards */
.grid { display: grid; gap: 18px; margin-top: 44px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card { padding: 26px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(26, 107, 69, .14), rgba(95, 191, 143, .22)); color: var(--forest); font-size: 22px; font-weight: 800; }
.card p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* Chat */
.chat { display: grid; gap: 12px; padding: 24px; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.chat__q { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--mint); color: var(--pine); font-weight: 600; }
.chat__a { max-width: 92%; padding: 16px 18px; border-radius: 18px 18px 18px 4px; background: #fff; color: var(--text); font-size: 15.5px; }
.chat__a p { margin: 0 0 8px; } .chat__a p:last-child { margin: 0; }
.chat__a b { color: var(--pine); }

/* Add-ons */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px 0 26px; }
.filters button { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font: 600 14px var(--font); color: var(--muted); cursor: pointer; }
.filters button[aria-selected="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.addon { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--surface); border-radius: 18px; border: 1px solid var(--border); }
.addon__top { display: flex; align-items: center; gap: 10px; }
.addon__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--tint); font-size: 18px; }
.addon h3 { font-size: 16px; margin: 0; }
.addon p { margin: 0; font-size: 14px; color: var(--muted); }
.addon__meta { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.addon__meta b { color: var(--forest); }
.addon[hidden] { display: none; }
.note { margin-top: 22px; font-size: 14px; color: var(--muted); }

/* Compare */
.table-wrap { margin-top: 36px; overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: 15.5px; }
.compare tr:last-child td { border-bottom: 0; }
.compare th { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.compare td:first-child { font-weight: 600; color: var(--ink); }
.compare td:nth-child(2) { color: var(--muted); }
.compare .us { background: rgba(26, 107, 69, .06); color: var(--pine); font-weight: 600; }
.compare th.us { color: var(--forest); }

/* Steps */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.steps li { padding: 28px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); }
.steps span { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: var(--forest); color: #fff; font-weight: 800; }
.steps p { color: var(--muted); margin: 0; }
.roadmap__lead { color: var(--muted); max-width: 720px; }
.roadmap { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.roadmap__item { padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; min-width: 0; }
.roadmap__item h3 { margin: 12px 0 6px; font-size: 17px; }
.roadmap__item p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.roadmap__tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--pine); border: 1px solid var(--border); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.roadmap__tag--next { background: var(--forest); border-color: var(--forest); color: #fff; }
.section--tint .roadmap__tag { background: var(--surface); }
.section--tint .roadmap__tag--next { background: var(--forest); }

/* Pricing */
.price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; margin-top: 40px; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.price__main { padding: 40px; background: linear-gradient(160deg, var(--forest), var(--pine)); color: #d5eadd; display: grid; gap: 12px; align-content: start; }
.price__name { margin: 0; font-weight: 700; color: #fff; font-size: 20px; }
.price__amount { margin: 0; color: #fff; font-size: 76px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.price__amount .cur { font-size: 36px; vertical-align: super; margin-right: 2px; }
.price__amount small { font-size: 16px; font-weight: 600; letter-spacing: 0; margin-left: 8px; color: var(--sage); }
.price__desc { margin: 4px 0 12px; }
.price__main .btn--primary { background: #fff; color: var(--pine); box-shadow: none; }
.price__main .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.price__list { list-style: none; margin: 0; padding: 40px; background: var(--surface); display: grid; gap: 12px; align-content: center; }
.price__list li { position: relative; padding-left: 32px; font-weight: 500; }
.price__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }

/* Demo */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.demo p { color: #bfe0cb; font-size: 18px; }
.demo__card { padding: 30px; border-radius: var(--radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.demo__url { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.demo__card dl { display: grid; gap: 10px; margin: 0 0 22px; }
.demo__card dl div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 15px; }
.demo__card dt { color: var(--sage); }
.demo__card dd { margin: 0; text-align: right; color: #fff; }
.demo__card dd a { color: #fff; }

/* FAQ */
.faq { margin-top: 30px; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 0 22px; }
.faq summary { cursor: pointer; padding: 18px 28px 18px 0; font-weight: 700; color: var(--ink); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--forest); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 18px; margin: 0; }

.cta-final { padding-top: 40px; }
.cta-final h2 { font-size: clamp(34px, 5vw, 58px); }


/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .frame--hero { transform: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* Responsive */
@media (max-width: 1060px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .addons { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .split, .demo, .price { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split--rev > :first-child { order: 0; }
  .price { gap: 0; }
  .steps { grid-template-columns: 1fr; }
  .addons { grid-template-columns: repeat(2, 1fr); }
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
  .frame--hero { transform: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid--3, .addons { grid-template-columns: 1fr; }
  .price__main, .price__list { padding: 28px; }
  .price__amount { font-size: 60px; }
  .hero { padding-top: 40px; }
}
.value { margin-top: 48px; }
.value__title { margin: 0; text-align: center; font-size: 22px; letter-spacing: -0.02em; }
.value__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.value__card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.value__card--us { background: linear-gradient(160deg, var(--forest), var(--pine)); border-color: transparent; color: #d5eadd; box-shadow: var(--shadow); }
.value__label { margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.value__card--us .value__label { color: var(--sage); }
.value__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.value__rows li, .value__total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.value__card--us .value__rows li { border-color: rgba(255, 255, 255, .14); }
.value__rows b { white-space: nowrap; color: var(--ink); }
.value__card--us .value__rows b { color: #fff; }
.value__total { margin: auto 0 0; padding-top: 18px; border-bottom: 0; font-weight: 700; }
.value__total b { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.value__card--us .value__total { color: #fff; }
.value__card--us .value__total b { color: #fff; }
.value__note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .value__grid { grid-template-columns: minmax(0, 1fr); } .value__card { padding: 22px; } }
.table-wrap { max-width: 100%; }
@media (max-width: 640px) {
  .compare { min-width: 0; table-layout: fixed; }
  .compare th, .compare td { padding: 12px 10px; font-size: 13.5px; overflow-wrap: anywhere; }
  .compare th { font-size: 11px; letter-spacing: .04em; }
}
.demo__url, .demo__card dd { overflow-wrap: anywhere; }

/* ===== Two-product site (2026-10): shared header, product switcher, hub, Cash & Capacity theme ===== */
.pmark { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--forest), var(--pine)); color: #fff; }
.pmark svg { width: 24px; height: 24px; }
.pmark--pcc { background: linear-gradient(135deg, #1f7a52, #0e3d2a); }
.pmark--pcc svg { width: 28px; height: 28px; }
.pmark--lg { width: 64px; height: 64px; border-radius: 18px; }
.pmark--lg svg { width: 40px; height: 40px; }
.pmark--lg.pmark--pcc svg { width: 46px; height: 46px; }


/* Hub */
.hero--hub { padding-bottom: 56px; }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.product { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.product__shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); border-bottom: 1px solid var(--border); }
.product__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.product__body { padding: 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.product__head { display: flex; align-items: center; gap: 16px; }
.product__head h3 { margin: 0; font-size: 26px; letter-spacing: -0.03em; }
.product__head p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.product__one { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.product .ticks { margin-top: 0; }
.product__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); display: grid; gap: 14px; }
.product__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.product__price b { font-size: 40px; font-weight: 800; color: var(--ink); letter-spacing: -0.04em; line-height: 1; }
.product__price span { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.product__price s { color: var(--muted); font-weight: 600; }
.product__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.product__btns .btn { flex: 1 1 auto; }
.product--pcc .ticks li::before { background-color: #c98a12; }
.product--pcc .btn--primary { background: #17603f; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #fdf1d6; color: #7a4e00; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.together { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.together__visual { display: grid; gap: 14px; }
.together__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.stat strong { display: block; font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.stat span { display: block; margin-top: 6px; font-size: 14px; color: #bfe0cb; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: rgba(255, 255, 255, .1); color: #e7f5ec; border: 1px solid rgba(255, 255, 255, .14); }
.chips--light span { background: var(--surface); color: var(--pine); border-color: var(--border); }
.bridge { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .25); color: #e7f5ec; font-weight: 600; }
.bridge i { font-style: normal; font-size: 22px; color: #f2c14e; }
.trust { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trust li { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.trust b { display: block; font-size: 17px; color: var(--ink); margin: 12px 0 4px; }
.trust p { margin: 0; color: var(--muted); font-size: 15px; }

/* Cash & Capacity page */
.problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.problem { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.problem__q { padding: 24px 24px 18px; }
.problem__q h3 { margin-bottom: 8px; }
.problem__q p { margin: 0; color: var(--muted); font-size: 15.5px; }
.problem__a { margin-top: auto; padding: 18px 24px 22px; background: var(--tint); border-top: 1px solid var(--border); font-size: 15.5px; font-weight: 600; color: var(--pine); }
.problem__a span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink, #8a5a00); margin-bottom: 4px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.gallery .frame figcaption b { color: var(--ink); }
.pic { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 40px -26px rgba(15, 63, 41, .45); }
.stack { display: grid; gap: 18px; }
.phone { position: relative; width: min(320px, 100%); margin-inline: auto; padding: 12px; border-radius: 46px; background: #0b1f16; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #0b1f16; z-index: 2; }
.phone img { border-radius: 36px; width: 100%; }
.respond { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.choices { display: grid; gap: 10px; margin-top: 22px; }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.choice b { display: block; color: #fff; }
.choice span { color: #bfe0cb; font-size: 15px; }
.choice i { font-style: normal; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f2c14e; color: #3d2700; font-weight: 800; }
.seq { margin-top: 36px; }
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.quad div { padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--c, var(--forest)); }
.quad b { display: block; color: var(--ink); font-size: 16px; }
.quad small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.quad span { display: block; color: var(--text); font-size: 14.5px; }
.weights { display: grid; gap: 8px; margin: 18px 0 0; }
.weights div { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.weights i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #1a6b45, #5fbf8f); }
.weights em { font-style: normal; color: var(--muted); text-align: right; }
.widget-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.widget-groups div { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.widget-groups h3 { font-size: 16px; margin-bottom: 8px; }
.widget-groups p { margin: 0; color: #bfe0cb; font-size: 14px; }
.price__was { margin: -4px 0 0; color: var(--sage); font-weight: 600; }
.price__was s { color: #fff; opacity: .75; }

/* Cash & Capacity theme: same greens, gold coin accent */
.pcc { --gold: #d99a2b; --gold-ink: #8a5a00; }
.pcc .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(242, 193, 78, .22), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(31, 138, 122, .12), transparent 70%); }
.pcc .hl { background-image: linear-gradient(90deg, #17603f, #1f8a5b 45%, #c98a12); }
.pcc .eyebrow .dot { background: #f2c14e; box-shadow: 0 0 0 4px rgba(242, 193, 78, .3); }
.pcc .kicker { color: #9a6408; }
.pcc .kicker--light { color: #f2c14e; }
.pcc .ticks li::before, .pcc .price__list li::before { background-color: #c98a12; }
.pcc .ticks--light li::before { background-color: #d99a2b; }
.pcc .card__icon { background: linear-gradient(135deg, rgba(217, 154, 43, .16), rgba(95, 191, 143, .2)); color: #8a5a00; }
.pcc .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(242, 193, 78, .16), transparent 70%), linear-gradient(160deg, #0f3f29, #0a2c1d); }
.pcc .steps span { background: #c98a12; }
.pcc .compare .us { background: rgba(217, 154, 43, .1); }

/* Responsive for the new blocks */
@media (max-width: 1060px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .products, .together, .respond, .problems { grid-template-columns: minmax(0, 1fr); }
  .together, .respond { gap: 32px; }
  .widget-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .product__body { padding: 22px; }
  .product__head h3 { font-size: 22px; }
  .together__row { grid-template-columns: minmax(0, 1fr); }
  .trust, .gallery, .quad { grid-template-columns: minmax(0, 1fr); }
  .product__btns .btn { flex: 1 1 100%; }
}
picture { display: block; }
.split > div > p.kicker { font-size: 13px; color: var(--forest); }
.pcc .split > div > p.kicker { color: #9a6408; }
.section--dark .split > div > p.kicker--light { color: var(--mint); }
.pcc .section--dark .split > div > p.kicker--light { color: #f2c14e; }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pcc .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.phone { padding: 40px 12px 14px; }
.phone::before { top: 12px; width: 84px; height: 18px; background: #1d3328; }
@media (max-width: 860px) { .split--rev { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .seq { overflow-x: auto; }
  .seq picture, .seq img { min-width: 760px; }
}

/* ===== Perfex AI Staff (2026-10): third product, teal accent with a gold spark ===== */
.pmark--pas { background: linear-gradient(135deg, #1f8a7a, #0b3d3a); }
.pmark--pas svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pas svg { width: 44px; height: 44px; }
.pas .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(31, 138, 122, .24), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(242, 193, 78, .13), transparent 70%); }
.pas .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pas .hl { background-image: linear-gradient(90deg, #0f6b5f, #1f8a7a 50%, #36b39b); }
.pas .eyebrow .dot { background: #2bb39a; box-shadow: 0 0 0 4px rgba(43, 179, 154, .25); }
.pas .kicker, .pas .split > div > p.kicker { color: #0f6b5f; }
.pas .kicker--light, .pas .section--dark .split > div > p.kicker--light { color: #7fe0cc; }
.pas .ticks li::before, .pas .price__list li::before { background-color: #1f8a7a; }
.pas .ticks--light li::before { background-color: #2bb39a; }
.pas .card__icon { background: linear-gradient(135deg, rgba(31, 138, 122, .16), rgba(242, 193, 78, .2)); color: #0f6b5f; }
.pas .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(43, 179, 154, .22), transparent 70%), linear-gradient(160deg, #0c3b37, #082623); }
.pas .section--dark .split > div > p, .pas .section--dark .sub { color: #bfe3da; }
.pas .steps span { background: #1f8a7a; }
.pas .btn--primary { background: #12796b; box-shadow: 0 10px 24px -12px rgba(18, 121, 107, .8); }
.pas .btn--primary:hover { background: #0b4f46; }
.pas .price__main { background: linear-gradient(160deg, #12796b, #0b3d3a); }
.pas .price__main .btn--primary { background: #fff; color: #0b3d3a; }
.pas .compare .us { background: rgba(31, 138, 122, .08); }
.product--pas .ticks li::before { background-color: #1f8a7a; }
.product--pas .btn--primary { background: #12796b; }
.products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.products--3 .product__body { padding: 26px; }
.products--3 .product__head h3 { font-size: 23px; }
@media (max-width: 1180px) { .products--3 { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; } }
.btn[data-demo][aria-disabled="true"] { opacity: .75; cursor: default; }
.btn[data-demo][aria-disabled="true"]:hover { transform: none; }
/* Approval flow */
.flow { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: f; }
.flow li { position: relative; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); }
.flow li b { display: block; color: #fff; margin: 10px 0 4px; font-size: 16.5px; }
.flow li span { color: #bfe3da; font-size: 14.5px; }
.flow li i { font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f2c14e; color: #3d2700; font-weight: 800; }
/* Mock card (HTML, not a screenshot) */
.mock { padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 50px -30px rgba(11, 61, 58, .5); color: var(--text); font-size: 14.5px; }
.mock__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-weight: 700; color: var(--ink); }
.mock__tag { padding: 2px 10px; border-radius: 999px; background: #fdf1d6; color: #7a4e00; font-size: 12px; font-weight: 700; }
.mock dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 12px 0 14px; }
.mock dt { color: var(--muted); } .mock dd { margin: 0; overflow-wrap: anywhere; }
.mock__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mock__btns span { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); font-weight: 700; font-size: 13.5px; }
.mock__btns span:first-child { background: #12796b; border-color: #12796b; color: #fff; }
/* Models */
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.models div { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); }
.models b { display: block; color: #fff; font-size: 16px; }
.models span { color: #bfe3da; font-size: 14px; }
.codebox { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: #062220; color: #c9efe6; font: 500 13px/1.55 ui-monospace, Menlo, monospace; overflow-x: auto; white-space: pre; border: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 1060px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow, .models { grid-template-columns: minmax(0, 1fr); } .mock dl { grid-template-columns: minmax(0, 1fr); } }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .gallery--2 { grid-template-columns: minmax(0, 1fr); } }
.product__price b span { font: inherit; color: inherit; letter-spacing: inherit; }

/* ===== Perfex Sentinel (2026-10): fourth product, steel blue with a gold watch light ===== */
.pmark--psn { background: linear-gradient(135deg, #2a7aa3, #0c2a3b); }
.pmark--psn svg { width: 27px; height: 27px; }
.pmark--lg.pmark--psn svg { width: 44px; height: 44px; }
.psn .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(42, 122, 163, .22), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(242, 193, 78, .12), transparent 70%); }
.psn .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.psn .hl { background-image: linear-gradient(90deg, #17506d, #2477a0 50%, #4aa8d1); }
.psn .eyebrow .dot { background: #3a9cc9; box-shadow: 0 0 0 4px rgba(58, 156, 201, .25); }
.psn .kicker, .psn .split > div > p.kicker { color: #1d5f80; }
.psn .kicker--light, .psn .section--dark .split > div > p.kicker--light { color: #8fd3ee; }
.psn .ticks li::before, .psn .price__list li::before { background-color: #2477a0; }
.psn .ticks--light li::before { background-color: #3a9cc9; }
.psn .card__icon { background: linear-gradient(135deg, rgba(36, 119, 160, .15), rgba(242, 193, 78, .2)); color: #1d5f80; }
.psn .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(58, 156, 201, .2), transparent 70%), linear-gradient(160deg, #0f3346, #081c27); }
.psn .section--dark .split > div > p, .psn .section--dark .sub, .psn .flow li span, .psn .widget-groups p, .psn .choice span, .psn .demo p { color: #c3dbe7; }
.psn .steps span { background: #2477a0; }
.psn .btn--primary { background: #1d5f80; box-shadow: 0 10px 24px -12px rgba(29, 95, 128, .8); }
.psn .btn--primary:hover { background: #123f57; }
.psn .price__main { background: linear-gradient(160deg, #1d5f80, #0c2a3b); }
.psn .price__main .btn--primary { background: #fff; color: #0c2a3b; }
.psn .faq summary::after { color: #1d5f80; }
.psn .problem__a span { color: #1d5f80; }
.psn :focus-visible { outline-color: #4aa8d1; }
.product--psn .ticks li::before { background-color: #2477a0; }
.product--psn .btn--primary { background: #1d5f80; }
.products--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .products--4 { grid-template-columns: minmax(0, 1fr); } }
/* Sentinel mock screens (HTML, not screenshots) */
.mk { padding: 20px; display: grid; gap: 12px; background: #f6f8fa; color: var(--text); font-size: 14.5px; }
.mk__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mk__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk__stat { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--border); min-width: 0; }
.mk__stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.15; }
.mk__stat span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.mk__card { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--border); min-width: 0; }
.mk__card h4 { margin: 0 0 8px; font-size: 14px; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mk__card p { margin: 0; font-size: 13.5px; color: var(--muted); }
.mk__list { list-style: none; margin: 0; padding: 0; display: grid; }
.mk__list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; min-width: 0; }
.mk__list li:first-child { border-top: 0; padding-top: 2px; }
.mk__list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.mk__list small { display: block; color: var(--muted); font-size: 12px; }
.mk__split { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.mk__mono { font: 500 12.5px/1.55 ui-monospace, Menlo, monospace; color: #234; overflow-wrap: anywhere; }
.mk__code { display: block; padding: 6px 10px; border-radius: 8px; background: #eef3f6; font: 600 18px ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--ink); text-align: center; }
.pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #e3eef5; color: #1d5f80; }
.pill--ok { background: #e3f4ea; color: #17603f; }
.pill--warn { background: #fdf1d6; color: #7a4e00; }
.pill--bad { background: #fbe3de; color: #a2321f; }
.ring { --v: 80; width: 92px; height: 92px; flex: none; border-radius: 50%; background: conic-gradient(#2477a0 calc(var(--v) * 1%), #e1e9ee 0); display: grid; place-items: center; }
.ring b { width: 70px; height: 70px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.mk__msg { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--border); border-left: 4px solid #cf4b33; font-size: 13.5px; }
.mk__msg b { display: block; color: var(--ink); margin-bottom: 4px; }
.mk__msg p { margin: 0 0 4px; color: var(--text); }
.mk__msg small { color: var(--muted); }
.adv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.adv article { padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); }
.adv b { display: block; color: #fff; font-size: 16px; margin: 8px 0 6px; }
.adv p { margin: 0; color: #c3dbe7; font-size: 14.5px; }
.adv .pill { background: #f2c14e; color: #3d2700; }
@media (max-width: 1060px) { .adv { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .mk { padding: 14px; } .mk__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk__split { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* Four-module hub */
.products--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .products--4 { grid-template-columns: 1fr; } }


/* ===== Perfex Deliverables (2026-10): fifth product, forest green with the violet "waiting for client" accent ===== */
.pmark--pdv { background: linear-gradient(135deg, #248d74, #143e32); }
.pmark--pdv svg { width: 26px; height: 26px; }
.pmark--lg.pmark--pdv svg { width: 42px; height: 42px; }
.pdv .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(106, 79, 179, .16), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(36, 141, 116, .16), transparent 70%); }
.pdv .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pdv .hl { background-image: linear-gradient(90deg, #14634f, #1f8a6b 50%, #6a4fb3); }
.pdv .eyebrow .dot { background: #7c62c9; box-shadow: 0 0 0 4px rgba(124, 98, 201, .22); }
.pdv .kicker, .pdv .split > div > p.kicker { color: #14634f; }
.pdv .kicker--light, .pdv .section--dark .split > div > p.kicker--light { color: #c7b8f2; }
.pdv .ticks li::before, .pdv .price__list li::before { background-color: #1f8a6b; }
.pdv .ticks--light li::before { background-color: #9b85e0; }
.pdv .card__icon { background: linear-gradient(135deg, rgba(31, 138, 107, .16), rgba(106, 79, 179, .16)); color: #14634f; }
.pdv .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(106, 79, 179, .22), transparent 70%), linear-gradient(160deg, #123d31, #0a241d); }
.pdv .section--dark .split > div > p, .pdv .section--dark .sub, .pdv .choice span { color: #c9e2d8; }
.pdv .steps span { background: #1f8a6b; }
.pdv .btn--primary { background: #176a52; box-shadow: 0 10px 24px -12px rgba(23, 106, 82, .8); }
.pdv .btn--primary:hover { background: #0f4a39; }
.pdv .price__main { background: linear-gradient(160deg, #176a52, #143e32); }
.pdv .price__main .btn--primary { background: #fff; color: #143e32; }
.pdv .faq summary::after { color: #14634f; }
.pdv .problem__a span { color: #14634f; }
.pdv :focus-visible { outline-color: #7c62c9; }
.product--pdv .ticks li::before { background-color: #1f8a6b; }
.product--pdv .btn--primary { background: #176a52; }
/* Five products on the hub: the fifth card sits centred under the 2 × 2 grid */
@media (min-width: 861px) { .products--4 > .product--pdv:last-child { grid-column: 1 / -1; width: 100%; max-width: calc(50% - 12px); justify-self: center; } }
/* Phone screenshot overlapping a desktop one */
.pdv-pair { position: relative; padding: 0 72px 72px 0; }
.pdv-pair .frame { margin: 0; }
.pdv-pair .frame--phone { position: absolute; right: 0; bottom: 0; width: 34%; border-radius: 26px; border: 6px solid #0b1f19; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.pdv-pair .frame--phone img { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .pdv-pair { padding: 0 36px 60px 0; } .pdv-pair .frame--phone { width: 40%; border-width: 4px; border-radius: 18px; } }
/* Words we use, as a small glossary */
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.terms div { padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.terms b { display: block; color: var(--ink); margin-bottom: 4px; }
.terms p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .terms { grid-template-columns: minmax(0, 1fr); } }

/* ===== Site chrome (2026-10): header, product switcher, phone sheet, footer, back-to-top =====
   Markup is generated by dev/landing_chrome.py; edit the products there, not in the pages. */
body { --acc: #1a6b45; --acc-soft: rgba(26, 107, 69, .1); --hdr-h: 68px; }
.pcc { --acc: #1f7a52; --acc-soft: rgba(31, 122, 82, .1); }
.pas { --acc: #12796b; --acc-soft: rgba(18, 121, 107, .11); }
.psn { --acc: #1d5f80; --acc-soft: rgba(29, 95, 128, .1); }
.pdv { --acc: #176a52; --acc-soft: rgba(23, 106, 82, .1); }
html { scroll-padding-top: calc(var(--hdr-h, 68px) + 16px); }
html.is-locked { overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i-ext { width: 12px; height: 12px; flex: none; opacity: .7; }
.i-chev { width: 14px; height: 14px; flex: none; opacity: .6; transition: transform .2s ease; }
.i-arrow { width: 14px; height: 14px; flex: none; transition: transform .2s ease; }
.btn--sm { padding: 8px 16px; font-size: 14px; gap: 6px; }
.btn--sm:hover { transform: none; }
.btn__price { margin-left: 2px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .35); font-weight: 700; opacity: .92; }

/* Product marks in three chrome sizes; the SVGs keep the proportions of the 38px original */
.pmark.pm-md { width: 36px; height: 36px; border-radius: 11px; }
.pmark.pm-sm { width: 28px; height: 28px; border-radius: 9px; }
.pmark.pm-xs { width: 22px; height: 22px; border-radius: 7px; }
.pmark.pm-md svg, .pmark.pm-sm svg, .pmark.pm-xs svg { width: 64%; height: 64%; }
.pmark--pcc.pm-md svg, .pmark--pcc.pm-sm svg, .pmark--pcc.pm-xs svg { width: 74%; height: 74%; }
.pmark--pas.pm-md svg, .pmark--pas.pm-sm svg, .pmark--pas.pm-xs svg, .pmark--psn.pm-md svg, .pmark--psn.pm-sm svg, .pmark--psn.pm-xs svg { width: 71%; height: 71%; }
.pmark--pdv.pm-md svg, .pmark--pdv.pm-sm svg, .pmark--pdv.pm-xs svg { width: 68%; height: 68%; }

/* Header bar */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(241, 244, 240, .74); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid transparent; transition: background-color .25s, border-color .25s, box-shadow .25s; }
.hdr.is-scrolled, .hdr.is-open { background: rgba(249, 251, 248, .88); border-bottom-color: rgba(19, 36, 27, .08); box-shadow: 0 10px 30px -22px rgba(15, 63, 41, .45); }
.hdr__bar { display: flex; align-items: center; gap: 12px; height: var(--hdr-h); }
.hdr__crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hdr__home { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px 4px 2px; border-radius: 12px; color: var(--ink); text-decoration: none; flex: none; }
.hdr__home .pmark { box-shadow: 0 6px 14px -8px rgba(15, 63, 41, .7); transition: transform .2s ease; }
.hdr__home:hover .pmark { transform: rotate(-6deg) scale(1.04); }
.hdr__brand { display: grid; line-height: 1.12; font-weight: 700; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.hdr__brand b { color: var(--forest); }
.hdr__brand small { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.hdr__sep { color: #b3c2b8; font-size: 22px; font-weight: 300; line-height: 1; margin: 0 2px; user-select: none; }
.hdr__crumb { padding: 6px 8px; border-radius: 10px; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.hdr__crumb:hover { background: rgba(19, 36, 27, .05); }

/* Dropdowns (details/summary: keyboard and no-JS friendly) */
.hdr .dd { position: relative; }
.hdr .dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; user-select: none; }
.hdr .dd > summary::-webkit-details-marker { display: none; }
.hdr .dd[open] > summary .i-chev { transform: rotate(180deg); }
.hdr__switch > summary { padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: -.01em; box-shadow: 0 1px 2px rgba(15, 63, 41, .06); transition: border-color .15s, box-shadow .15s; }
.hdr__switch > summary:hover, .hdr__switch[open] > summary { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.hdr__product { white-space: nowrap; }
.dd__panel { position: absolute; top: calc(100% + 12px); left: -6px; z-index: 70; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(15, 63, 41, .5), 0 4px 14px rgba(15, 63, 41, .07); animation: dd-in .16s ease-out; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Main links */
.hdr__nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.hdr__nav > a, .hdr__nav > .dd > summary { padding: 8px 12px; border-radius: 999px; color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.hdr__nav > a:hover, .hdr__nav > .dd > summary:hover, .hdr__nav > .dd[open] > summary { background: rgba(19, 36, 27, .055); color: var(--ink); }
.hdr__nav > a.is-active, .hdr__nav > a[aria-current="page"] { color: var(--acc); background: var(--acc-soft); }
.dd--toc > summary { position: relative; }
.dd--toc.has-active > summary::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.hdr__cta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

/* Products mega menu */
.mega { width: min(1080px, calc(100vw - 32px)); padding: 10px 10px 6px; }
.mega__head { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.mega__head span + span { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.mega__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__group { margin: 4px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.mega__row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.mega__row:hover { background: #f4f7f4; }
.mega__row.is-current { background: var(--tint); box-shadow: inset 0 0 0 1px rgba(26, 107, 69, .14); }
.mega__text { display: grid; gap: 1px; min-width: 0; }
.mega__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; }
.mega__row:hover .mega__name { color: var(--forest); }
.mega__price { padding: 0 6px; border-radius: 999px; background: rgba(26, 107, 69, .09); color: var(--forest); font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1.6; }
.mega__desc { color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__foot { display: flex; justify-content: flex-start; flex-wrap: wrap; column-gap: 24px; gap: 12px; margin-top: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.mega__foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--forest); text-decoration: none; }
.mega__foot a:hover .i-arrow { transform: translateX(3px); }

/* "On this page" and Docs lists */
.toc { width: 260px; }
.toc--2 { width: 430px; }
.toc__head { margin: 0; padding: 6px 10px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.toc__list { display: grid; gap: 2px; }
.toc--2 .toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toc__list a { position: relative; padding: 8px 10px 8px 22px; border-radius: 10px; color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.toc__list a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #c4d0c8; transition: background-color .15s, transform .15s; }
.toc__list a:hover { background: #f4f7f4; color: var(--ink); }
.toc__list a.is-active { background: var(--acc-soft); color: var(--acc); }
.toc__list a.is-active::before { background: var(--acc); transform: scale(1.3); }
.dlist { width: min(600px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 4px; }
.dlist .toc__head { grid-column: 1 / -1; }
.dlist__item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 11px; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; min-width: 0; }
.dlist__item span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .dlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dlist__item:hover { background: #f4f7f4; color: var(--forest); }

/* Menu button */
.hdr__toggle { display: none; position: relative; width: 42px; height: 42px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); cursor: pointer; color: var(--ink); }
.hdr__toggle span { position: absolute; left: 13px; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.hdr__toggle span:nth-child(1) { top: 14px; }
.hdr__toggle span:nth-child(2) { top: 20px; }
.hdr__toggle span:nth-child(3) { top: 26px; }
.hdr__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hdr__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Phone sheet */
.hdr__sheet { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--hdr-h)); max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(15, 63, 41, .5); animation: sheet-in .22s ease-out; }
.hdr__sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.sheet { display: grid; gap: 10px; padding: 18px 0 26px; }
.sheet__current { display: flex; align-items: center; gap: 12px; }
.sheet__current b { display: block; color: var(--ink); font-size: 16px; letter-spacing: -.01em; }
.sheet__current small { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.sheet__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.sheet__cta .btn { padding: 11px 12px; font-size: 15px; }
.sheet__h { margin: 12px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sheet__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sheet__chips a, .sheet__links a { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.sheet__chips a.is-active, .sheet__links a[aria-current="page"] { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); }
.sheet__links { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet__prods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sheet__prods li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); }
.sheet__prods li.is-current { background: var(--tint); border-color: rgba(26, 107, 69, .2); }
.sheet__prod { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.sheet__prod b { display: block; font-size: 15px; letter-spacing: -.01em; }
.sheet__prod small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.sheet__plinks { display: flex; flex-wrap: wrap; gap: 2px 16px; padding-left: 38px; font-size: 13.5px; font-weight: 600; }
.sheet__plinks a { display: inline-flex; align-items: center; gap: 3px; padding: 3px 0; color: var(--forest); text-decoration: none; }
.sheet__plinks .i-ext { width: 10px; height: 10px; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 700; }
.sheet__foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }

@media (max-width: 1023px) {
  .hdr__nav { display: none; }
  .hdr__toggle { display: inline-block; }
  .hdr .dd--mega .mega { position: fixed; top: calc(var(--hdr-h) + 8px); left: 16px; right: 16px; width: auto; max-height: calc(100dvh - var(--hdr-h) - 24px); overflow-y: auto; }
}
@media (max-width: 720px) {
  .mega__cols { grid-template-columns: minmax(0, 1fr); }
  .mega__desc { white-space: normal; }
  .mega__head span + span { display: none; }
}
@media (max-width: 640px) {
  body { --hdr-h: 62px; }
  .hdr__demo { display: none; }
  .hdr__crumbs:has(.hdr__switch) .hdr__brand { display: none; }
  .hdr__home { padding-right: 2px; }
}
@media (max-width: 560px) { .hdr__hubcta { display: none; } }
@media (max-width: 440px) {
  .hdr__buy { display: none; }
  .hdr__product { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
}

/* Footer */
.ftr { position: relative; overflow: hidden; color: #a9c2b5; background: radial-gradient(800px 380px at 92% 0%, rgba(95, 191, 143, .16), transparent 70%), radial-gradient(600px 300px at 0% 100%, rgba(242, 193, 78, .07), transparent 70%), linear-gradient(170deg, #10301f, #0a1f15); }
.ftr::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 213, 185, .45), transparent); }
.ftr a { text-decoration: none; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, .62fr); gap: 48px; padding: 56px 0 40px; }
.ftr__home { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.ftr__home .hdr__brand b { color: #8fdcb3; }
.ftr__home .hdr__brand small { color: #86a395; }
.ftr__home .pmark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.ftr__brand p { max-width: 40ch; margin: 18px 0 0; font-size: 14.5px; line-height: 1.6; }
.ftr__shop { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 14px; font-weight: 700; transition: background-color .15s, border-color .15s; }
.ftr__shop:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .32); }
.ftr__brand .ftr__note { margin-top: 22px; font-size: 12.5px; line-height: 1.55; color: #7c978a; }
.ftr__h { margin: 6px 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7fa592; }
.ftr__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ftr__list a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; color: #cfe0d6; font-size: 15px; font-weight: 600; }
.ftr__list a:hover { color: #fff; }
.ftr__mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; }
.ftr__mod { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 8px; border-top: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.ftr__modname { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; color: #e2eee7; font-size: 15px; font-weight: 600; transition: color .15s; }
.ftr__modname .pmark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .2s ease; }
.ftr__modname:hover { color: #fff; }
.ftr__modname:hover .pmark { transform: translateX(2px) scale(1.06); }
.ftr__modname[aria-current="page"] span { box-shadow: inset 0 -2px 0 rgba(143, 220, 179, .7); }
.ftr__modlinks { display: flex; flex-wrap: wrap; gap: 2px 14px; padding-left: 34px; font-size: 13px; }
.ftr__modlinks a { color: #8fbfa6; font-weight: 600; transition: color .15s; }
.ftr__modlinks a:hover { color: #fff; }
.ftr__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #7c978a; }
.ftr :focus-visible { outline-color: #8fdcb3; }
@media (max-width: 1060px) {
  .ftr__top { grid-template-columns: minmax(0, 1fr) minmax(0, .3fr); gap: 36px 32px; }
  .ftr__brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .ftr__brand > .ftr__home, .ftr__brand > p:first-of-type { grid-column: 1; }
  .ftr__brand > .ftr__shop { grid-column: 1; justify-self: start; }
  .ftr__brand .ftr__note { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: end; }
}
@media (max-width: 860px) {
  .ftr__top { grid-template-columns: minmax(0, 1fr); padding-top: 44px; }
  .ftr__brand { display: block; }
  .ftr__brand .ftr__note { margin-top: 22px; }
  .ftr__mods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .ftr__list { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 28px; }
  .ftr__bar { flex-direction: column; }
}
@media (max-width: 400px) { .ftr__modlinks { padding-left: 0; gap: 2px 12px; } }

@media (max-width: 1400px) { .ftr__bar { padding-right: 64px; } }

/* Back to top, with a scroll-progress ring */
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; box-shadow: 0 12px 30px -12px rgba(15, 63, 41, .55), 0 0 0 1px rgba(19, 36, 27, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background-color .15s, color .15s; }
.totop[hidden] { display: none; }
.totop::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--acc) calc(var(--p, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
.totop svg { width: 20px; height: 20px; transition: transform .2s ease; }
.totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--acc); color: #fff; }
.totop:hover svg { transform: translateY(-2px); }
html.is-locked .totop { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .totop { right: 14px; bottom: 14px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .dd__panel, .hdr__sheet { animation: none; }
  .totop, .totop svg, .i-chev, .i-arrow, .hdr__home .pmark, .ftr__modname .pmark, .hdr__toggle span { transition: none; }
  .totop { transform: none; }
}
@media print { .hdr, .totop { display: none; } }
.toc--2 .toc__list { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 7), auto); }
@media (max-width: 720px) { .mega__foot { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* The tilted hero screenshot widens slightly at the bottom; keep it from causing sideways scroll. */
.hero { overflow-x: clip; }

/* ===== Perfex Design Studio (body.pds, cards .product--pds, mark .pmark--pds) ===== */
.pmark--pds { background: linear-gradient(135deg, #7a6cf2, #b864cf 55%, #4f7fe8); }
.pmark--pds svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pds svg { width: 44px; height: 44px; }
.pmark--pds.pm-md svg, .pmark--pds.pm-sm svg, .pmark--pds.pm-xs svg { width: 72%; height: 72%; }
.pds { --acc: #5a48d8; --acc-soft: rgba(90, 72, 216, .1); }
.pds .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(120, 176, 255, .26), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(239, 140, 207, .2), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(139, 124, 246, .22), transparent 70%); }
.pds .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pds .hl { background-image: linear-gradient(100deg, #6a5cf0 0%, #b95ccf 48%, #4a7ff0 100%); }
.pds .eyebrow .dot { background: #e27bc8; box-shadow: 0 0 0 4px rgba(226, 123, 200, .24); }
.pds .kicker, .pds .split > div > p.kicker { color: #5a48d8; }
.pds .kicker--light, .pds .section--dark .split > div > p.kicker--light { color: #c9bffd; }
.pds .ticks li::before, .pds .price__list li::before { background-color: #6c5ce7; }
.pds .ticks--light li::before { background-color: #ef8ccf; }
.pds .card__icon { background: linear-gradient(135deg, rgba(139, 124, 246, .18), rgba(239, 140, 207, .18)); color: #5a48d8; }
.pds .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(239, 140, 207, .18), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(120, 176, 255, .16), transparent 70%), linear-gradient(160deg, #221b45, #110d25); }
.pds .section--dark .split > div > p, .pds .section--dark .sub, .pds .choice span { color: #d6d0f4; }
.pds .steps span { background: #6c5ce7; }
.pds .btn--primary { background: #5a48d8; box-shadow: 0 10px 24px -12px rgba(90, 72, 216, .8); }
.pds .btn--primary:hover { background: #4535b8; }
.pds .price__main { background: linear-gradient(160deg, #5a48d8, #2a2163); }
.pds .price__main .btn--primary { background: #fff; color: #2a2163; }
.pds .faq summary::after { color: #5a48d8; }
.pds .problem__a span { color: #5a48d8; }
.pds :focus-visible { outline-color: #b95ccf; }
.product--pds .ticks li::before { background-color: #6c5ce7; }
.product--pds .btn--primary { background: #5a48d8; }
/* Preset strip: four looks of the same dashboard */
.pds-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.pds-presets figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 40px -28px rgba(42, 31, 110, .45); }
.pds-presets img { display: block; width: 100%; height: auto; }
.pds-presets figcaption { padding: 12px 14px 14px; font-size: 14px; color: var(--muted); }
.pds-presets figcaption b { display: block; color: var(--ink); font-size: 15.5px; }
.pds-presets .swatches { display: flex; gap: 5px; margin-top: 8px; }
.pds-presets .swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
@media (max-width: 1024px) { .pds-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pds-presets { grid-template-columns: minmax(0, 1fr); } }
/* Light and dark side by side, the dark copy offset over the light one */
.pds-duo { position: relative; padding: 0 0 64px 64px; }
.pds-duo .frame { margin: 0; }
.pds-duo .frame + .frame { position: absolute; left: 0; bottom: 0; width: 58%; box-shadow: 0 30px 60px -24px rgba(17, 13, 37, .6); }
@media (max-width: 560px) { .pds-duo { padding: 0 0 40px 28px; } }
/* Template gallery */
.pds-tpls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.pds-tpls figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.pds-tpls img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pds-tpls figcaption { padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 1024px) { .pds-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pds-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Screenshot lightbox ===== */
.lb-zoom { cursor: zoom-in; }
main a[href$=".jpg"], main a[href$=".png"], main a[href$=".webp"] { cursor: zoom-in; }
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 20, 16, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; animation: lb-in .18s ease-out; }
.lb[hidden] { display: none; }
.lb__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 56px 72px 12px; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); background: #fff; }
.lb__bar { display: flex; align-items: center; gap: 16px; padding: 12px 24px 20px; color: rgba(255, 255, 255, .86); font-size: 14px; }
.lb__cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__count { font-variant-numeric: tabular-nums; opacity: .7; }
.lb__open { color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: .85; white-space: nowrap; }
.lb__open:hover { opacity: 1; }
.lb__btn { position: absolute; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.lb__btn:hover { background: rgba(255, 255, 255, .22); }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__btn[hidden] { display: none; }
.lb__close { top: 12px; right: 16px; font-size: 28px; }
.lb__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 16px; top: 50%; transform: translateY(-50%); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
  .lb__stage { padding: 56px 8px 8px; }
  .lb__prev, .lb__next { top: auto; bottom: 64px; transform: none; }
  .lb__bar { padding: 10px 16px 18px; font-size: 13px; }
  .lb__open { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lb { animation: none; } }

/* ===== Hub: six modules, three per row on wide screens ===== */
.products--4 > .product--pdv:last-child { grid-column: auto; max-width: none; justify-self: stretch; }
@media (min-width: 1100px) {
  .products--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .products--4 .product__body { padding: 24px; }
  .products--4 .product__head h3 { font-size: 21px; }
  .products--4 .product__price b, .products--4 .price__amount { font-size: 32px; }
  .products--4 .btn { padding-inline: 14px; }
}
@media (min-width: 700px) and (max-width: 1099px) { .products--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Perfex Document Studio (body.pdoc, cards .product--pdoc, mark .pmark--pdoc) ===== */
.pmark--pdoc { background: linear-gradient(135deg, #ee7d4f, #c2472f 55%, #8a2d55); }
.pmark--pdoc svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pdoc svg { width: 44px; height: 44px; }
.pmark--pdoc.pm-md svg, .pmark--pdoc.pm-sm svg, .pmark--pdoc.pm-xs svg { width: 72%; height: 72%; }
.pdoc { --acc: #a63d28; --acc-soft: rgba(166, 61, 40, .1); }
.pdoc .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(238, 125, 79, .22), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .16), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(138, 45, 85, .14), transparent 70%); }
.pdoc .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pdoc .hl { background-image: linear-gradient(100deg, #d4562f 0%, #b23d38 50%, #8a2d55 100%); }
.pdoc .eyebrow .dot { background: #ee7d4f; box-shadow: 0 0 0 4px rgba(238, 125, 79, .24); }
.pdoc .kicker, .pdoc .split > div > p.kicker { color: #a63d28; }
.pdoc .kicker--light, .pdoc .section--dark .split > div > p.kicker--light, .pdoc .section--dark .respond > div > p.kicker--light { color: #ffc2a8; }
.pdoc .ticks li::before, .pdoc .price__list li::before { background-color: #c2472f; }
.pdoc .ticks--light li::before { background-color: #f2a07c; }
.pdoc .card__icon { background: linear-gradient(135deg, rgba(238, 125, 79, .18), rgba(138, 45, 85, .14)); color: #a63d28; }
.pdoc .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(238, 125, 79, .2), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .1), transparent 70%), linear-gradient(160deg, #3a1c25, #1d0f14); }
.pdoc .section--dark .split > div > p, .pdoc .section--dark .respond > div > p, .pdoc .section--dark .sub { color: #f1d9cf; }
.pdoc .steps span { background: #c2472f; }
.pdoc .btn--primary { background: #a63d28; box-shadow: 0 10px 24px -12px rgba(166, 61, 40, .8); }
.pdoc .btn--primary:hover { background: #8a3020; }
.pdoc .price__main { background: linear-gradient(160deg, #a63d28, #4a1c2c); }
.pdoc .price__main .btn--primary { background: #fff; color: #4a1c2c; }
.pdoc .faq summary::after { color: #a63d28; }
.pdoc .problem__a span { color: #a63d28; }
.pdoc :focus-visible { outline-color: #ee7d4f; }
.product--pdoc .ticks li::before { background-color: #c2472f; }
.product--pdoc .btn--primary { background: #a63d28; }
/* Paper sheets: real PDF pages side by side */
.pdoc-sheets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.pdoc-sheets figure { margin: 0; }
.pdoc-sheets a { display: block; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 18px 40px -26px rgba(74, 28, 44, .5); transition: transform .18s ease, box-shadow .18s ease; }
.pdoc-sheets a:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -26px rgba(74, 28, 44, .6); }
.pdoc-sheets img { display: block; width: 100%; height: auto; aspect-ratio: 791 / 1120; object-fit: cover; object-position: top; }
.pdoc-sheets figcaption { padding: 10px 2px 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.pdoc-sheets figcaption b { display: block; color: var(--ink); font-size: 15px; }
.pdoc-sheets .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
@media (min-width: 1025px) { .pdoc-sheets--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; } }
@media (max-width: 1024px) { .pdoc-sheets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pdoc-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* Block catalogue */
.pdoc-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.pdoc-blocks section { padding: 18px 18px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.pdoc-blocks h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pdoc-blocks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pdoc-blocks li { padding: 4px 10px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
@media (max-width: 1024px) { .pdoc-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pdoc-blocks { grid-template-columns: minmax(0, 1fr); } }
/* Document types */
.pdoc-types { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pdoc-types li { padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.pdoc-types b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 4px; }
.pdoc-types span { color: var(--muted); font-size: 14.5px; line-height: 1.5; display: block; }
@media (max-width: 860px) { .pdoc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pdoc-types { grid-template-columns: minmax(0, 1fr); } }
/* Screenshot next to a PDF page */
.pdoc-duo { position: relative; padding: 0 0 56px 0; }
.pdoc-duo .frame { margin: 0; }
.pdoc-duo .pdoc-page { position: absolute; right: -10px; bottom: 0; width: 34%; margin: 0; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -22px rgba(29, 15, 20, .55); }
.pdoc-duo .pdoc-page img { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .pdoc-duo { padding-bottom: 40px; } .pdoc-duo .pdoc-page { right: 0; width: 38%; } }

.pdoc .price__amount small { color: #ffc2a8; }

/* ===== Perfex Client Hub (body.pch, mark .pmark--pch) ===== */
.pmark--pch { background: linear-gradient(135deg, #4f8df5, #2350a8 55%, #1b2f6e); }
.pmark--pch svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pch svg { width: 44px; height: 44px; }
.pmark--pch.pm-md svg, .pmark--pch.pm-sm svg, .pmark--pch.pm-xs svg { width: 72%; height: 72%; }
.pch { --acc: #2350a8; --acc-soft: rgba(35, 80, 168, .1); }
.pch .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(79, 141, 245, .24), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .16), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .14), transparent 70%); }
.pch .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pch .hl { background-image: linear-gradient(100deg, #2f6fe0 0%, #2350a8 50%, #1b8a6b 100%); }
.pch .eyebrow .dot { background: #4f8df5; box-shadow: 0 0 0 4px rgba(79, 141, 245, .24); }
.pch .kicker, .pch .split > div > p.kicker { color: #2350a8; }
.pch .kicker--light, .pch .section--dark .split > div > p.kicker--light, .pch .section--dark .respond > div > p.kicker--light { color: #a9cbff; }
.pch .ticks li::before, .pch .price__list li::before { background-color: #2f6fe0; }
.pch .ticks--light li::before { background-color: #8ec5ff; }
.pch .card__icon { background: linear-gradient(135deg, rgba(79, 141, 245, .18), rgba(242, 193, 78, .16)); color: #2350a8; }
.pch .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(79, 141, 245, .22), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .1), transparent 70%), linear-gradient(160deg, #15244f, #0b1430); }
.pch .section--dark .split > div > p, .pch .section--dark .respond > div > p, .pch .section--dark .sub { color: #d3def5; }
.pch .steps span { background: #2f6fe0; }
.pch .btn--primary { background: #2350a8; box-shadow: 0 10px 24px -12px rgba(35, 80, 168, .8); }
.pch .btn--primary:hover { background: #1b3f86; }
.pch .price__main { background: linear-gradient(160deg, #2350a8, #14234d); }
.pch .price__main .btn--primary { background: #fff; color: #14234d; }
.pch .price__amount small { color: #a9cbff; }
.pch .faq summary::after { color: #2350a8; }
.pch .problem__a span { color: #2350a8; }
.pch :focus-visible { outline-color: #4f8df5; }
/* The two halves of the module, side by side */
.pch-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.pch-parts article { padding: 24px 24px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.pch-parts h3 { margin: 0 0 6px; font-size: 21px; }
.pch-parts p { margin: 0 0 14px; color: var(--muted); }
.pch-parts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pch-parts li { padding: 4px 11px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
@media (max-width: 860px) { .pch-parts { grid-template-columns: minmax(0, 1fr); } }
/* Feature tiles */
.pch-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pch-list li { padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.pch-list b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 4px; }
.pch-list span { color: var(--muted); font-size: 14.5px; line-height: 1.5; display: block; }
@media (max-width: 860px) { .pch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pch-list { grid-template-columns: minmax(0, 1fr); } }
/* Screenshot with a small overlay (widget, dialog) */
.pch-duo { position: relative; padding: 0 0 56px 0; }
.pch-duo .frame { margin: 0; }
.pch-duo .pch-pop { position: absolute; right: -10px; bottom: 0; width: 30%; margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -22px rgba(11, 20, 48, .55); }
.pch-duo .pch-pop img { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .pch-duo { padding-bottom: 40px; } .pch-duo .pch-pop { right: 0; width: 38%; } }

/* ===== Perfex Inbox All-in-One (body.pinb, mark .pmark--pinb) ===== */
.pmark--pinb { background: linear-gradient(135deg, #ef5a8a, #b8285f 55%, #6e1745); }
.pmark--pinb svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pinb svg { width: 44px; height: 44px; }
.pmark--pinb.pm-md svg, .pmark--pinb.pm-sm svg, .pmark--pinb.pm-xs svg { width: 72%; height: 72%; }
.pinb { --acc: #a82358; --acc-soft: rgba(168, 35, 88, .09); }
.pinb .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(239, 90, 138, .2), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .16), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .14), transparent 70%); }
.pinb .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pinb .hl { background-image: linear-gradient(100deg, #e0457b 0%, #a82358 50%, #6e1745 100%); }
.pinb .eyebrow .dot { background: #ef5a8a; box-shadow: 0 0 0 4px rgba(239, 90, 138, .24); }
.pinb .kicker, .pinb .split > div > p.kicker { color: #a82358; }
.pinb .kicker--light, .pinb .section--dark .split > div > p.kicker--light, .pinb .section--dark .respond > div > p.kicker--light { color: #ffb3cd; }
.pinb .ticks li::before, .pinb .price__list li::before { background-color: #c42d66; }
.pinb .ticks--light li::before { background-color: #ff9cbf; }
.pinb .card__icon { background: linear-gradient(135deg, rgba(239, 90, 138, .16), rgba(242, 193, 78, .16)); color: #a82358; }
.pinb .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(239, 90, 138, .2), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .1), transparent 70%), linear-gradient(160deg, #3d1430, #1c0a17); }
.pinb .section--dark .split > div > p, .pinb .section--dark .respond > div > p, .pinb .section--dark .sub { color: #f3d6e2; }
.pinb .steps span { background: #c42d66; }
.pinb .btn--primary { background: #a82358; box-shadow: 0 10px 24px -12px rgba(168, 35, 88, .8); }
.pinb .btn--primary:hover { background: #8a1c48; }
.pinb .price__main { background: linear-gradient(160deg, #a82358, #4a1233); }
.pinb .price__main .btn--primary { background: #fff; color: #4a1233; }
.pinb .price__amount small { color: #ffb3cd; }
.pinb .faq summary::after { color: #a82358; }
.pinb .problem__a span { color: #a82358; }
.pinb :focus-visible { outline-color: #ef5a8a; }
/* Channel strip under the hero / in "Why" */
.pinb-chans { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pinb-chans li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pinb-chans .ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--acc-soft); color: #a82358; font-size: 18px; line-height: 1; }
.pinb-chans b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 2px; }
.pinb-chans span.t { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 1024px) { .pinb-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pinb-chans { grid-template-columns: minmax(0, 1fr); } }

/* ===== Hub module grid (2026-10-11): compact cards + category chips. Markup is generated by dev/landing_chrome.py
   (PRODUCTS, CATEGORIES) between <!-- hub:grid --> markers; filtering lives in site.js ("Hub module grid"). ===== */
.lead--hub { max-width: 700px; margin-bottom: 22px; text-wrap: balance; }
.hubstats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; padding: 0; margin: 0 auto 30px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.hubstats li { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.hubstats li + li::before { content: ""; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%; background: var(--sage); align-self: center; }
.hubstats b { color: var(--pine); font-weight: 800; font-size: 15.5px; }

.section--hubgrid { padding: 16px 0 96px; }
.hubbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.hubcats { display: flex; flex-wrap: wrap; gap: 8px; }
.hubcat { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 14px/1 var(--font); cursor: pointer; transition: background .18s, border-color .18s, color .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.hubcat:hover { border-color: #b9cdbf; color: var(--ink); }
.hubcat__n { min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: inherit; }
.hubcat[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; box-shadow: 0 10px 22px -14px rgba(15, 63, 41, .9); }
.hubcat[aria-pressed="true"] .hubcat__n { background: rgba(255, 255, 255, .16); color: #fff; }
.hubcount { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.hubcount b { color: var(--ink); }
@media (max-width: 899px) { .hubcount { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; }
.pgrid.is-filtered { grid-auto-rows: auto; }
@media (max-width: 1199px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 599px) { .pgrid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }

.pcard { --pc: var(--forest); --pc2: var(--mint); position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 63, 41, .05), 0 12px 32px -26px rgba(15, 63, 41, .35); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .2s ease; }
.pcard[hidden] { display: none; }
.pcard:hover, .pcard:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pc) 28%, var(--border)); box-shadow: 0 1px 2px rgba(15, 63, 41, .05), 0 30px 60px -34px color-mix(in srgb, var(--pc) 70%, transparent); }
.pcard.is-leaving { opacity: 0; transform: scale(.97); }
.pcard.is-entering { animation: pcard-in .32s ease both; }
@keyframes pcard-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* Screenshot band in the product's own colour */
.pcard__band { position: relative; height: 136px; flex: none; overflow: hidden; overflow: clip; background: var(--tint);
  background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--pc) 24%, transparent), transparent 62%),
              radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--pc2) 36%, transparent), transparent 66%),
              color-mix(in srgb, var(--pc) 7%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--pc) 14%, var(--border)); }
.pcard__shot { position: absolute; top: 20px; left: 72px; right: -40px; bottom: -10px; display: block; border-radius: 10px 0 0 0; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(19, 36, 27, .07), 0 16px 34px -18px color-mix(in srgb, var(--pc) 80%, #000); cursor: zoom-in; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.pcard__shot picture, .pcard__shot img { display: block; width: 100%; height: 100%; }
.pcard__shot img { object-fit: cover; object-position: top left; }
.pcard:hover .pcard__shot { transform: translateY(-5px); }
.pcard__shot:focus-visible { outline-offset: -3px; }
.pcard__zoom { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .94); color: var(--pc); box-shadow: 0 4px 12px -4px rgba(19, 36, 27, .35); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s; }
.pcard__zoom svg { width: 16px; height: 16px; }
.pcard__shot:hover .pcard__zoom, .pcard__shot:focus-visible .pcard__zoom { opacity: 1; transform: none; }
.pcard__mark.pmark { position: absolute; left: 18px; top: 20px; width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 20px -10px color-mix(in srgb, var(--pc) 90%, #000); }
.pcard__mark.pmark svg { width: 70%; height: 70%; }
.pcard__mark.pmark:not([class*="pmark--"]) svg { width: 62%; height: 62%; }

/* Live demo / Buy: revealed on hover or keyboard focus, always shown on touch screens */
.pcard__acts { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: flex-end; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.pcard:hover .pcard__acts, .pcard:focus-within .pcard__acts { opacity: 1; transform: none; pointer-events: auto; }
.pcard__act { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 1px rgba(19, 36, 27, .08), 0 8px 18px -10px rgba(19, 36, 27, .5); transition: background .15s, color .15s; }
.pcard__act .i-ext { width: 12px; height: 12px; }
.pcard__act:hover { color: var(--pc); }
.pcard__act--buy { background: var(--pc); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--pc) 90%, #000); }
.pcard__act--buy:hover { color: #fff; background: color-mix(in srgb, var(--pc) 82%, #000); }
@media (hover: none) {
  .pcard__acts { opacity: 1; transform: none; pointer-events: auto; }
  .pcard__act { height: 28px; padding: 0 10px; font-size: 12.5px; }
  .pcard:hover { transform: none; }
  .pcard:hover .pcard__shot { transform: none; }
}

.pcard__body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 16px 20px 16px; min-width: 0; }
.pcard__name { margin: 0; font-size: 17.5px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 800; }
.pcard__name a { color: var(--ink); text-decoration: none; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; border-radius: 0 0 22px 22px; }
.pcard__name a:focus-visible { outline: none; }
.pcard__name a:focus-visible::after { outline: 3px solid var(--mint); outline-offset: -3px; }
.pcard__pre { color: var(--muted); font-weight: 600; }
.pcard__tag { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pcard__points li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 13%, #fff); }
.pcard__points li::after { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--pc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.1 2 4.4-4.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.1 2 4.4-4.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.pcard__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard__foot { border-top: 1px solid var(--border); }
.pcard__points { margin-bottom: 18px; }
.pcard__price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.pcard__price b { font-size: 23px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.pcard__price b span { font: inherit; color: inherit; letter-spacing: inherit; }
.pcard__price > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pcard__more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 4px 7px 10px; margin-right: -4px; border-radius: 999px; color: var(--pc); font-size: 14px; font-weight: 700; text-decoration: none; }
.pcard__more .i-arrow { width: 15px; height: 15px; transition: transform .2s ease; }
.pcard:hover .pcard__more .i-arrow, .pcard__more:focus-visible .i-arrow { transform: translateX(3px); }
/* "Coming soon" cards (dev/landing_chrome.py COMING): no screenshot, no links, no price */
.pcard--soon .pcard__band { height: 96px; }
.pcard--soon:hover, .pcard--soon:focus-within { transform: none; }
.pcard__mark--soon.pmark { background: var(--pc); }
.pcard__soon { position: absolute; right: 16px; top: 20px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 22%, transparent); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pcard__desc { margin: 6px 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
/* "Better together" tile in the empty cells of the last row (spans from the generator: --s4 / --s3 / --s2) */
.pfill { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px; border-radius: 22px; overflow: hidden; color: #d5eadd; grid-column: span var(--s4);
  background: radial-gradient(120% 90% at 100% 0%, rgba(95, 191, 143, .3), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(242, 193, 78, .14), transparent 60%), linear-gradient(160deg, #0f3f29, #0a2c1d);
  box-shadow: 0 30px 60px -40px rgba(15, 63, 41, .8); transition: opacity .2s ease, transform .25s ease; }
.pfill:hover { transform: translateY(-4px); }
.pfill.pfill--no4 { display: none; }
.pfill.is-leaving { opacity: 0; }
.pfill__marks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: auto; padding-bottom: 18px; }
.pfill__marks .pmark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.pfill__kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.pfill__title { margin: 0; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; max-width: 30ch; }
.pfill__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 2px; }
.pfill__link::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.pfill__link .i-arrow { width: 15px; height: 15px; transition: transform .2s ease; }
.pfill:hover .pfill__link .i-arrow { transform: translateX(3px); }
.pfill__link:focus-visible { outline: none; }
.pfill__link:focus-visible::after { outline: 3px solid var(--mint); outline-offset: -3px; }
@media (max-width: 1199px) { .pfill { grid-column: span var(--s3); } .pfill.pfill--no4 { display: flex; } .pfill.pfill--no3 { display: none; } }
@media (max-width: 899px) { .pfill { grid-column: span var(--s2); } .pfill.pfill--no3 { display: flex; } .pfill.pfill--no2 { display: none; } }
@media (max-width: 599px) { .pfill, .pfill.pfill--no2, .pfill.pfill--no3, .pfill.pfill--no4 { display: none; } }
.pfill[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .pfill, .pfill:hover { transition: none; transform: none; } }

@media (max-width: 599px) {
  .hubstats { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 8px; margin-bottom: 26px; font-size: 13.5px; }
  .hubstats li { justify-content: center; }
  .hubstats li { padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
  .hubstats li + li::before { display: none; }
  .hubstats b { font-size: 14px; }
  .hubbar { margin-bottom: 16px; }
  .hubcats { flex-wrap: nowrap; width: calc(100% + 32px); margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hubcats::-webkit-scrollbar { display: none; }
  .hubcat { flex: none; scroll-snap-align: start; height: 36px; }
  .pcard__band { height: 148px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__shot, .pcard__acts, .pcard__zoom, .pcard__more .i-arrow { transition: none; }
  .pcard.is-entering { animation: none; }
  .pcard:hover, .pcard:focus-within, .pcard:hover .pcard__shot { transform: none; }
}

/* ===== Hub "Better together" (2026-10-11): cards generated from PRODUCTS[*].integrations by dev/landing_chrome.py ===== */
.btog__head { max-width: 900px; margin: 0 auto 36px; text-align: center; }
.btog__head h2 { margin-bottom: 12px; text-wrap: balance; }
.btog__lead { margin: 0 auto; color: #bfe0cb; font-size: 18px; max-width: 58ch; text-wrap: balance; }
.btog__grid { columns: 3; column-gap: 16px; }
.btog__grid > * { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 16px; }
@media (max-width: 1023px) { .btog__grid { columns: 2; } }
@media (max-width: 599px) { .btog__grid { columns: 1; } .btog__grid > * { margin-bottom: 12px; } }
.btog__card { position: relative; display: inline-block; width: 100%; vertical-align: top; min-width: 0; padding: 18px 20px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; transition: border-color .2s, transform .2s; }
.btog__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--pc2), color-mix(in srgb, var(--pc2) 20%, transparent)); opacity: .9; }
.btog__card:hover { border-color: rgba(255, 255, 255, .24); transform: translateY(-2px); }
.btog__from { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; font-size: 16.5px; letter-spacing: -0.01em; }
.btog__from a { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; }
.btog__from a:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }
.btog__from .pmark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.btog__from small { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); opacity: .85; }
.btog__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.btog__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; color: #d5eadd; }
.btog__list .pmark { margin-top: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.btog__list b { color: #fff; font-weight: 700; }
.btog__list b::after { content: " · "; color: rgba(255, 255, 255, .4); font-weight: 400; }
.btog__shared { display: flex; clear: both; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 18px; }
.btog__sharedh { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.btog__shared .chips { justify-content: center; }
@media (max-width: 599px) { .btog__head { margin-bottom: 24px; } .btog__lead { font-size: 16.5px; } .btog__card { padding: 16px 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .btog__card, .btog__card:hover { transition: none; transform: none; } }

/* ===== Perfex Flow Studio (body.pfs, mark .pmark--pfs) ===== */
.pmark--pfs { background: linear-gradient(135deg, #2cc6d8, #0f8fb0 55%, #164e7a); }
.pmark--pfs svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pfs svg { width: 44px; height: 44px; }
.pmark--pfs.pm-md svg, .pmark--pfs.pm-sm svg, .pmark--pfs.pm-xs svg { width: 72%; height: 72%; }
.pfs { --acc: #0b6f8a; --acc-soft: rgba(11, 111, 138, .09); }
.pfs .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(44, 198, 216, .22), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .16), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .14), transparent 70%); }
.pfs .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pfs .hl { background-image: linear-gradient(100deg, #17a9c4 0%, #0b6f8a 50%, #164e7a 100%); }
.pfs .eyebrow .dot { background: #2cc6d8; box-shadow: 0 0 0 4px rgba(44, 198, 216, .24); }
.pfs .kicker, .pfs .split > div > p.kicker { color: #0b6f8a; }
.pfs .kicker--light, .pfs .section--dark .split > div > p.kicker--light, .pfs .section--dark .respond > div > p.kicker--light { color: #8fe3f0; }
.pfs .ticks li::before, .pfs .price__list li::before { background-color: #0f8fb0; }
.pfs .ticks--light li::before { background-color: #7fdcec; }
.pfs .card__icon { background: linear-gradient(135deg, rgba(44, 198, 216, .16), rgba(242, 193, 78, .16)); color: #0b6f8a; }
.pfs .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(44, 198, 216, .2), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .1), transparent 70%), linear-gradient(160deg, #0f2f45, #081a28); }
.pfs .section--dark .split > div > p, .pfs .section--dark .respond > div > p, .pfs .section--dark .sub { color: #d2edf3; }
.pfs .steps span { background: #0f8fb0; }
.pfs .btn--primary { background: #0b6f8a; box-shadow: 0 10px 24px -12px rgba(11, 111, 138, .8); }
.pfs .btn--primary:hover { background: #095a70; }
.pfs .price__main { background: linear-gradient(160deg, #0b6f8a, #12304a); }
.pfs .price__main .btn--primary { background: #fff; color: #12304a; }
.pfs .price__amount small { color: #a6ecf6; }
.pfs .faq summary::after { color: #0b6f8a; }
.pfs .problem__a span { color: #0b6f8a; }
.pfs :focus-visible { outline-color: #2cc6d8; }
.pfs .docs__toc a:hover { color: #095a70; }
.pfs .docs pre { background: #0f2f45; color: #d9f4f8; }
/* How a workflow reads: trigger → steps → branches */
.pfs-flow { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: pfs; }
.pfs-flow li { position: relative; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pfs-flow li b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 4px; }
.pfs-flow li span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.pfs-flow li em { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--acc-soft); color: #0b6f8a; font: 700 12px/1.6 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 1024px) { .pfs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pfs-flow { grid-template-columns: minmax(0, 1fr); } }
/* Trigger and action catalogue chips */
.pfs-cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.pfs-cat article { padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pfs-cat h3 { margin: 0 0 4px; font-size: 18px; }
.pfs-cat p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; }
.pfs-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pfs-cat li { padding: 3px 10px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.55; }
@media (max-width: 1024px) { .pfs-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pfs-cat { grid-template-columns: minmax(0, 1fr); } }

/* ===== Perfex Connect (body.pcx, mark .pmark--pcx) ===== */
.pmark--pcx { background: linear-gradient(135deg, #8b7cf6, #5a46d6 55%, #2c2380); }
.pmark--pcx svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pcx svg { width: 44px; height: 44px; }
.pmark--pcx.pm-md svg, .pmark--pcx.pm-sm svg, .pmark--pcx.pm-xs svg { width: 72%; height: 72%; }
.pcx { --acc: #4b3bc4; --acc-soft: rgba(75, 59, 196, .09); }
.pcx .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(139, 124, 246, .24), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .15), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .12), transparent 70%); }
.pcx .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pcx .hl { background-image: linear-gradient(100deg, #7a6af0 0%, #4b3bc4 50%, #2c2380 100%); }
.pcx .eyebrow .dot { background: #8b7cf6; box-shadow: 0 0 0 4px rgba(139, 124, 246, .24); }
.pcx .kicker, .pcx .split > div > p.kicker { color: #4b3bc4; }
.pcx .kicker--light, .pcx .section--dark .split > div > p.kicker--light, .pcx .section--dark .respond > div > p.kicker--light { color: #c4bcff; }
.pcx .ticks li::before, .pcx .price__list li::before { background-color: #5a46d6; }
.pcx .ticks--light li::before { background-color: #b3a8ff; }
.pcx .card__icon { background: linear-gradient(135deg, rgba(139, 124, 246, .16), rgba(242, 193, 78, .16)); color: #4b3bc4; }
.pcx .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(139, 124, 246, .22), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .1), transparent 70%), linear-gradient(160deg, #221d58, #120f33); }
.pcx .section--dark .split > div > p, .pcx .section--dark .respond > div > p, .pcx .section--dark .sub { color: #dcd8fb; }
.pcx .steps span { background: #5a46d6; }
.pcx .btn--primary { background: #4b3bc4; box-shadow: 0 10px 24px -12px rgba(75, 59, 196, .8); }
.pcx .btn--primary:hover { background: #3c2ea6; }
.pcx .price__main { background: linear-gradient(160deg, #4b3bc4, #1e1a4d); }
.pcx .price__main .btn--primary { background: #fff; color: #1e1a4d; }
.pcx .price__amount small { color: #d2ccff; }
.pcx .faq summary::after { color: #4b3bc4; }
.pcx .problem__a span { color: #4b3bc4; }
.pcx :focus-visible { outline-color: #8b7cf6; }
.pcx .docs__toc a:hover { color: #3c2ea6; }
.pcx .docs pre { background: #1e1a4d; color: #e6e3ff; }

/* Connect: the four parts as a strip, and chips of resources / events */
.pcx-parts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pcx-parts li { padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pcx-parts li b { display: block; color: var(--ink); font-size: 16.5px; margin-bottom: 4px; }
.pcx-parts li span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.pcx-parts li em { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--acc-soft); color: #4b3bc4; font: 700 12px/1.6 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 1024px) { .pcx-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pcx-parts { grid-template-columns: minmax(0, 1fr); } }
.pcx-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pcx-chips li { padding: 3px 11px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.pcx-chips--center { justify-content: center; }
.pcx-code { margin: 18px 0 0; padding: 16px 18px; border-radius: 16px; background: #1e1a4d; color: #e6e3ff; font: 500 13px/1.6 ui-monospace, Menlo, monospace; overflow-x: auto; white-space: pre; }

/* ===== Perfex TeamPulse (body.ptp, mark .pmark--ptp) ===== */
.pmark--ptp { background: linear-gradient(135deg, #f2b43c, #d07b14 55%, #6b3a0e); }
.pmark--ptp svg { width: 27px; height: 27px; }
.pmark--lg.pmark--ptp svg { width: 44px; height: 44px; }
.pmark--ptp.pm-md svg, .pmark--ptp.pm-sm svg, .pmark--ptp.pm-xs svg { width: 72%; height: 72%; }
.ptp { --acc: #a85a0a; --acc-soft: rgba(208, 123, 20, .1); }
.ptp .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(242, 180, 60, .24), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(239, 125, 79, .12), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .14), transparent 70%); }
.ptp .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.ptp .hl { background-image: linear-gradient(100deg, #e0901c 0%, #b0600d 50%, #6b3a0e 100%); }
.ptp .eyebrow .dot { background: #f2b43c; box-shadow: 0 0 0 4px rgba(242, 180, 60, .26); }
.ptp .kicker, .ptp .split > div > p.kicker { color: #a85a0a; }
.ptp .kicker--light, .ptp .section--dark .split > div > p.kicker--light, .ptp .section--dark .respond > div > p.kicker--light { color: #ffd48a; }
.ptp .ticks li::before, .ptp .price__list li::before { background-color: #c06d10; }
.ptp .ticks--light li::before { background-color: #ffc861; }
.ptp .card__icon { background: linear-gradient(135deg, rgba(242, 180, 60, .2), rgba(95, 191, 143, .14)); color: #a85a0a; }
.ptp .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(242, 180, 60, .18), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(95, 191, 143, .1), transparent 70%), linear-gradient(160deg, #3d2408, #1d1104); }
.ptp .section--dark .split > div > p, .ptp .section--dark .respond > div > p, .ptp .section--dark .sub { color: #f4e2c6; }
.ptp .steps span { background: #c06d10; }
.ptp .btn--primary { background: #a85a0a; box-shadow: 0 10px 24px -12px rgba(168, 90, 10, .8); }
.ptp .btn--primary:hover { background: #8c4a07; }
.ptp .price__main { background: linear-gradient(160deg, #a85a0a, #3d2408); }
.ptp .price__main .btn--primary { background: #fff; color: #3d2408; }
.ptp .price__amount small { color: #ffd48a; }
.ptp .faq summary::after { color: #a85a0a; }
.ptp .problem__a span { color: #a85a0a; }
.ptp :focus-visible { outline-color: #e0901c; }
.ptp .docs__toc a:hover { color: #8c4a07; }
.ptp .docs pre { background: #3d2408; color: #fbead0; }
/* TeamPulse: the three parts as a strip, the weekly flow, and chips */
.ptp-parts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ptp-parts li { padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.ptp-parts li b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.ptp-parts li span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.ptp-parts li em { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--acc-soft); color: #a85a0a; font: 700 12px/1.6 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.ptp-flow { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ptp-flow li { position: relative; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.ptp-flow li b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.ptp-flow li span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ptp-flow li i { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 9px; background: var(--acc-soft); color: #a85a0a; font: 800 13px/1 var(--font); font-style: normal; }
@media (max-width: 1024px) { .ptp-parts { grid-template-columns: minmax(0, 1fr); } .ptp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ptp-flow { grid-template-columns: minmax(0, 1fr); } }
.ptp-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ptp-chips li { padding: 3px 11px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.ptp-chips--center { justify-content: center; }
.ptp-never { margin: 26px auto 0; max-width: 880px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px dashed rgba(168, 90, 10, .45); color: var(--text); font-size: 15px; line-height: 1.55; text-align: center; }
.ptp-never b { color: var(--ink); }

/* ===== Perfex Sales Growth (body.psg, mark .pmark--psg) ===== */
.pmark--psg { background: linear-gradient(135deg, #f06a94, #b02a5b 55%, #4a0f26); }
.pmark--psg svg { width: 27px; height: 27px; }
.pmark--lg.pmark--psg svg { width: 44px; height: 44px; }
.pmark--psg.pm-md svg, .pmark--psg.pm-sm svg, .pmark--psg.pm-xs svg { width: 72%; height: 72%; }
.psg { --acc: #b02a5b; --acc-soft: rgba(176, 42, 91, .09); }
.psg .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(240, 106, 148, .22), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .14), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .12), transparent 70%); }
.psg .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.psg .hl { background-image: linear-gradient(100deg, #e0527f 0%, #b02a5b 50%, #4a0f26 100%); }
.psg .eyebrow .dot { background: #f06a94; box-shadow: 0 0 0 4px rgba(240, 106, 148, .24); }
.psg .kicker, .psg .split > div > p.kicker { color: #b02a5b; }
.psg .kicker--light, .psg .section--dark .split > div > p.kicker--light { color: #ffb3c9; }
.psg .ticks li::before, .psg .price__list li::before { background-color: #c23a6b; }
.psg .ticks--light li::before { background-color: #ff9bbb; }
.psg .card__icon { background: linear-gradient(135deg, rgba(240, 106, 148, .18), rgba(242, 193, 78, .16)); color: #b02a5b; }
.psg .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(240, 106, 148, .2), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .1), transparent 70%), linear-gradient(160deg, #4a0f26, #220610); }
.psg .section--dark .split > div > p, .psg .section--dark .sub { color: #f7dbe5; }
.psg .steps span { background: #c23a6b; }
.psg .btn--primary { background: #b02a5b; box-shadow: 0 10px 24px -12px rgba(176, 42, 91, .8); }
.psg .btn--primary:hover { background: #911f4a; }
.psg .price__main { background: linear-gradient(160deg, #b02a5b, #4a0f26); }
.psg .price__main .btn--primary { background: #fff; color: #4a0f26; }
.psg .price__amount small { color: #ffc2d4; }
.psg .faq summary::after { color: #b02a5b; }
.psg .problem__a span { color: #b02a5b; }
.psg :focus-visible { outline-color: #e0527f; }
.psg .docs__toc a:hover { color: #911f4a; }
.psg .docs pre { background: #4a0f26; color: #fbe2ea; }
.psg-parts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.psg-parts li { padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.psg-parts li b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.psg-parts li span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.psg-parts li em { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--acc-soft); color: #b02a5b; font: 700 12px/1.6 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.psg-flow { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.psg-flow li { padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.psg-flow li b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.psg-flow li span { display: block; color: var(--muted); font-size: 14px; line-height: 1.5; }
.psg-flow li i { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 9px; background: var(--acc-soft); color: #b02a5b; font: 800 13px/1 var(--font); font-style: normal; }
.psg-rule { margin: 26px auto 0; max-width: 880px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px dashed rgba(176, 42, 91, .45); color: var(--text); font-size: 15px; line-height: 1.55; text-align: center; }
.psg-rule b { color: var(--ink); }
@media (max-width: 1024px) { .psg-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .psg-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .psg-parts, .psg-flow { grid-template-columns: minmax(0, 1fr); } }

/* ===== Perfex Product Hub (body.pph, mark .pmark--pph) ===== */
.pmark--pph { background: linear-gradient(135deg, #4cc3df, #0e7490 55%, #083344); }
.pmark--pph svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pph svg { width: 44px; height: 44px; }
.pmark--pph.pm-md svg, .pmark--pph.pm-sm svg, .pmark--pph.pm-xs svg { width: 72%; height: 72%; }
.pph { --acc: #0e7490; --acc-soft: rgba(14, 116, 144, .09); }
.pph .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(76, 195, 223, .22), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .12), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .12), transparent 70%); }
.pph .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pph .hl { background-image: linear-gradient(100deg, #22a6c4 0%, #0e7490 50%, #083344 100%); }
.pph .eyebrow .dot { background: #4cc3df; box-shadow: 0 0 0 4px rgba(76, 195, 223, .24); }
.pph .kicker, .pph .split > div > p.kicker { color: #0e7490; }
.pph .kicker--light, .pph .section--dark .split > div > p.kicker--light { color: #9be3f3; }
.pph .ticks li::before, .pph .price__list li::before { background-color: #13809e; }
.pph .ticks--light li::before { background-color: #7fdcf0; }
.pph .card__icon { background: linear-gradient(135deg, rgba(76, 195, 223, .18), rgba(242, 193, 78, .14)); color: #0e7490; }
.pph .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(76, 195, 223, .18), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .08), transparent 70%), linear-gradient(160deg, #083344, #03161d); }
.pph .section--dark .split > div > p, .pph .section--dark .sub { color: #d3eff6; }
.pph .steps span { background: #13809e; }
.pph .btn--primary { background: #0e7490; box-shadow: 0 10px 24px -12px rgba(14, 116, 144, .8); }
.pph .btn--primary:hover { background: #0b5d73; }
.pph .price__main { background: linear-gradient(160deg, #0e7490, #083344); }
.pph .price__main .btn--primary { background: #fff; color: #083344; }
.pph .price__amount small { color: #a8e6f4; }
.pph .faq summary::after { color: #0e7490; }
.pph .problem__a span { color: #0e7490; }
.pph :focus-visible { outline-color: #22a6c4; }
.pph .docs__toc a:hover { color: #0b5d73; }
.pph .docs pre { background: #083344; color: #dff5fa; }
.pph-parts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pph-parts li { padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pph-parts li b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.pph-parts li span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.pph-parts li em { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--acc-soft); color: #0e7490; font: 700 12px/1.6 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 1100px) { .pph-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pph-parts { grid-template-columns: minmax(0, 1fr); } }

/* ===== Perfex SaaS Studio (body.pss, mark .pmark--pss) ===== */
.pmark--pss { background: linear-gradient(135deg, #60a5fa, #2563eb 55%, #172554); }
.pmark--pss svg { width: 27px; height: 27px; }
.pmark--lg.pmark--pss svg { width: 44px; height: 44px; }
.pmark--pss.pm-md svg, .pmark--pss.pm-sm svg, .pmark--pss.pm-xs svg { width: 72%; height: 72%; }
.pss { --acc: #2563eb; --acc-soft: rgba(37, 99, 235, .09); }
.pss .hero { background: radial-gradient(900px 480px at 85% -10%, rgba(96, 165, 250, .22), transparent 70%), radial-gradient(760px 440px at 45% -20%, rgba(242, 193, 78, .12), transparent 70%), radial-gradient(700px 420px at 0% 0%, rgba(95, 191, 143, .12), transparent 70%); }
.pss .hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.pss .hl { background-image: linear-gradient(100deg, #3b82f6 0%, #2563eb 50%, #172554 100%); }
.pss .eyebrow .dot { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96, 165, 250, .24); }
.pss .kicker, .pss .split > div > p.kicker { color: #2563eb; }
.pss .kicker--light, .pss .section--dark .split > div > p.kicker--light { color: #bfd6ff; }
.pss .ticks li::before, .pss .price__list li::before { background-color: #2f6fe0; }
.pss .ticks--light li::before { background-color: #93c5fd; }
.pss .card__icon { background: linear-gradient(135deg, rgba(96, 165, 250, .18), rgba(242, 193, 78, .14)); color: #2563eb; }
.pss .section--dark { background: radial-gradient(900px 500px at 100% 0%, rgba(96, 165, 250, .18), transparent 70%), radial-gradient(800px 480px at 0% 100%, rgba(242, 193, 78, .08), transparent 70%), linear-gradient(160deg, #172554, #0b1033); }
.pss .section--dark .split > div > p, .pss .section--dark .sub { color: #dbe7ff; }
.pss .steps span { background: #2f6fe0; }
.pss .btn--primary { background: #2563eb; box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .8); }
.pss .btn--primary:hover { background: #1d4ed8; }
.pss .price__main { background: linear-gradient(160deg, #2563eb, #172554); }
.pss .price__main .btn--primary { background: #fff; color: #172554; }
.pss .price__amount small { color: #bfd6ff; }
.pss .faq summary::after { color: #2563eb; }
.pss .problem__a span { color: #2563eb; }
.pss :focus-visible { outline-color: #3b82f6; }
.pss .docs__toc a:hover { color: #1d4ed8; }
.pss .docs pre { background: #172554; color: #e1ebff; }
.pss-parts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pss-parts li { padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.pss-parts li b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.pss-parts li span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.pss-parts li em { display: inline-block; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: var(--acc-soft); color: #2563eb; font: 700 12px/1.6 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 1100px) { .pss-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pss-parts { grid-template-columns: minmax(0, 1fr); } }
.pss .psg-rule { border-color: rgba(37, 99, 235, .45); }

/* ===== Changelog pages (2026-10-24): /<slug>/changelog/. Markup is generated by dev/landing_chrome.py
   from dev/release/<prefix>/changelog.txt; copy-link and expand live in site.js ("Changelog pages"). ===== */
.clmain { --pc: var(--forest); --pc2: var(--mint); }
.clhero { padding: 56px 0 34px; background: radial-gradient(900px 440px at 90% -20%, color-mix(in srgb, var(--pc2) 26%, transparent), transparent 70%), radial-gradient(700px 400px at 0% 0%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 70%); }
.clhero__in { display: grid; gap: 18px; }
.clhero__id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.clhero__id .pmark { box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--pc) 80%, transparent); }
.clhero__id > div { min-width: 0; }
.clhero__kicker { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pc); }
.clhero h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; overflow-wrap: anywhere; }
.clhero h1 > span:not(.hl) { color: var(--muted); font-weight: 700; }
.clhero__lead { margin: 0; max-width: 680px; color: var(--muted); font-size: clamp(16px, 1.5vw, 18.5px); }
.clhero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.clhero__facts > div { padding: 10px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.clhero__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.clhero__facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.clhero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.clhero__cta .btn { white-space: normal; text-align: center; }
.clbadge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 12%, #fff); color: color-mix(in srgb, var(--pc) 88%, #000); font: 800 15px/1.5 var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.clbadge--sm { padding: 0 8px; font-size: 12.5px; }

.clbody { padding: 18px 0 96px; }
.cllayout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.clindex { position: sticky; top: calc(var(--hdr-h) + 20px); display: grid; gap: 4px; max-height: calc(100vh - var(--hdr-h) - 40px); overflow-y: auto; font-size: 14px; }
.clindex__h { margin: 0 0 4px; padding: 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.clindex ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.clindex ol a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.clindex ol a b { font-weight: 700; color: var(--ink); }
.clindex ol a span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.clindex ol a:hover, .clindex ol a.is-active { background: color-mix(in srgb, var(--pc) 9%, transparent); }
.clindex__all { margin: 8px 0 0; justify-self: start; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 700 13px var(--font); cursor: pointer; }
.clindex__all:hover { border-color: var(--pc); color: var(--pc); }
.clindex__other { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px; color: var(--forest); font-weight: 700; text-decoration: none; }
.clindex__other:hover .i-arrow { transform: translateX(3px); }

/* Version timeline */
.cltl { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
.cltl::before { content: ""; position: absolute; left: 11px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: linear-gradient(var(--border), var(--border) 80%, transparent); }
.clv { position: relative; padding-left: 40px; min-width: 0; scroll-margin-top: calc(var(--hdr-h) + 16px); }
.clv__dot { position: absolute; left: 4px; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid color-mix(in srgb, var(--pc) 55%, var(--border)); }
.clv:first-child .clv__dot { background: var(--pc); border-color: color-mix(in srgb, var(--pc) 30%, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc2) 30%, transparent); }
.clv__card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 2px rgba(15, 63, 41, .05), 0 14px 34px -28px rgba(15, 63, 41, .35); min-width: 0; transition: border-color .2s, box-shadow .2s; }
.clv:target .clv__card, .clv.is-target .clv__card { border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc2) 22%, transparent); }
.clv__sum { list-style: none; display: grid; gap: 8px; padding: 18px 64px 16px 22px; cursor: pointer; border-radius: 20px; }
.clv__sum::-webkit-details-marker { display: none; }
.clv__sum:hover .clv__title { color: color-mix(in srgb, var(--pc) 85%, #000); }
.clv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.clv__ver { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--pc); color: #fff; font: 800 14px/1.5 var(--font); font-variant-numeric: tabular-nums; text-decoration: none; }
.clv__date { color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.clv__date--none { font-style: italic; font-weight: 500; }
.clpill { display: inline-flex; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.6; }
.clpill--latest { border-color: color-mix(in srgb, var(--pc) 35%, transparent); background: color-mix(in srgb, var(--pc2) 16%, #fff); color: color-mix(in srgb, var(--pc) 90%, #000); }
.clpill--breaking { border-color: #f1b7a9; background: #fdeee9; color: #9a2c17; }
.clv__title { margin: 0; font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; transition: color .15s; }
.clv__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.clv__counts { display: flex; flex-wrap: wrap; gap: 6px; }
.clv__toggle { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--muted); }
.clv__toggle .i-chev { opacity: 1; }
.clv__card[open] .clv__toggle .i-chev { transform: rotate(180deg); }
.clv__body { padding: 4px 22px 22px; border-top: 1px dashed var(--border); margin: 0 0 0; display: grid; gap: 16px; padding-top: 18px; min-width: 0; }
.clv__copy { position: absolute; top: 14px; right: 14px; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.clv__copy svg { width: 16px; height: 16px; }
.clv__copy:hover { color: var(--pc); border-color: var(--pc); }
.clv__copied { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 3px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.clv__copy.is-copied .clv__copied { opacity: 1; }

/* Tags: New / Improved / Fixed / Security / Breaking */
.cltag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; flex: none; }
.cltag--new { background: #e1f3e8; color: #135c39; }
.cltag--improved { background: #e3ecfb; color: #1f4b9c; }
.cltag--fixed { background: #fbefd6; color: #7d4f00; }
.cltag--security { background: #ece7fb; color: #4532b0; }
.cltag--breaking { background: #fde3dc; color: #9a2c17; }

.clg { min-width: 0; }
.clg__h { margin: 0 0 8px; font-size: 15px; font-weight: 800; letter-spacing: -.005em; color: var(--ink); }
.cllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cllist li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.cllist li .cltag { margin-top: 1px; min-width: 70px; justify-content: center; }
.cllist li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cllist--plain li { position: relative; padding-left: 16px; }
.cllist--plain li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 60%, #fff); }
.cllist code, .clpara code { font-size: .86em; overflow-wrap: anywhere; }
.clpara { margin: 0; font-size: 15.5px; color: var(--text); }
.clcallout { padding: 16px 18px; border-radius: 16px; background: #fff6f2; border: 1px solid #f4c5b8; border-left: 5px solid #c8472c; }
.clcallout__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; color: #8a2a15; }
.clcallout__h svg { width: 20px; height: 20px; flex: none; }
.clcallout__h b { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.clcallout__h span { color: #6e3424; font-size: 14.5px; font-weight: 600; }
.clupg { padding: 14px 18px; border-radius: 16px; background: var(--tint); border: 1px solid var(--border); }
.clupg__h { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--pc) 85%, #000); }

@media (max-width: 900px) {
  .cllayout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .clindex { display: none; }
}
@media (max-width: 640px) {
  .clhero { padding: 36px 0 22px; }
  .clhero__id { gap: 14px; }
  .clhero__id .pmark--lg { width: 52px; height: 52px; border-radius: 15px; }
  .clhero__id .pmark--lg svg { width: 32px; height: 32px; }
  .clhero__cta .btn { flex: 1 1 100%; }
  .clv { padding-left: 28px; }
  .cltl::before { left: 7px; }
  .clv__dot { left: 0; width: 16px; height: 16px; }
  .clv__sum { padding: 16px 56px 14px 16px; }
  .clv__body { padding: 16px 16px 18px; }
  .clv__copy { top: 12px; right: 12px; }
  .cllist li { flex-direction: column; gap: 4px; }
  .cllist li .cltag { min-width: 0; }
  .cllist--plain li { flex-direction: row; }
  .clhero__facts { gap: 8px; }
  .clhero__facts > div { padding: 8px 12px; border-radius: 14px; }
  .clhero__facts dt { font-size: 11px; }
  .clhero__facts dd { font-size: 16px; }
}
/* Product pages carry one more header link (Changelog) since 2026-10-24: drop the "Perfex Modules" wordmark next to the
   product pill until the bar is wide enough for both */
@media (min-width: 1024px) and (max-width: 1279px) { .hdr__crumbs:has(.hdr__switch) .hdr__brand { display: none; } }

/* Product header with the Roadmap link (six nav items, dev/landing_chrome.py): a little less padding per item; between 1024 and
   1279 px tighter still, and the Live demo button in the bar gives way (Buy stays; the hero and the menu keep Live demo). */
.hdr__nav:has(> a[href="#whats-next"]) > a, .hdr__nav:has(> a[href="#whats-next"]) > .dd > summary { padding-left: 10px; padding-right: 10px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .hdr__nav:has(> a[href="#whats-next"]) { margin-left: 4px; }
  .hdr__nav:has(> a[href="#whats-next"]) > a, .hdr__nav:has(> a[href="#whats-next"]) > .dd > summary { padding-left: 8px; padding-right: 8px; }
  .hdr__bar:has(.hdr__nav > a[href="#whats-next"]) .hdr__demo { display: none; }
}