/* ==========================================================================
   PestVyapar — landing page
   Light and colourful, solid colours only (no gradients). Sits on top of
   Bootstrap 5.3 (grid, utilities, dropdown, offcanvas, modal, collapse, tab).

   1. Tokens          6. Hero + workflow trail     11. Feature mockups
   2. Base            7. Proof bar                 12. Product tour
   3. Layout          8. Problem                   13. Pricing, FAQ, CTA
   4. Components      9. Platform                  14. Footer, modal, bars
   5. Header         10. Workflow stepper          15. Motion + responsive
   ========================================================================== */

/* Plus Jakarta Sans (SIL Open Font License), self-hosted variable font 400–800 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so the swap to the web font doesn't reflow text */
@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 107.16%;
  ascent-override: 96.87%;
  descent-override: 20.72%;
  line-gap-override: 0%;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --pv-font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --pv-ink: #10241B;        /* headings */
  --pv-text: #2C3D35;       /* body copy */
  --pv-muted: #56675F;      /* secondary copy (AA on white and soft) */
  --pv-subtle: #627269;     /* metadata and mockup labels (4.5:1+ on white and soft tints) */
  --pv-line: #E3EAE5;
  --pv-line-2: #CCD7D0;
  --pv-bg: #FFFFFF;
  --pv-soft: #F6F9F5;
  --pv-cream: #FFFAEE;
  --pv-mint: #E4F5EA;

  --pv-green-50: #EEFAF3;  --pv-green-100: #D9F3E4;  --pv-green-200: #B6E7CB;  --pv-green-500: #18A067;  --pv-green-600: #0B7F53;  --pv-green-700: #086643;
  --pv-amber-50: #FFF8E6;  --pv-amber-100: #FFEFC2;  --pv-amber-200: #FFE08A;  --pv-amber-500: #F2A516;  --pv-amber-700: #8F5300;
  --pv-blue-50: #EEF4FF;   --pv-blue-100: #DCE8FF;   --pv-blue-200: #B9D0FF;   --pv-blue-500: #3D7BF2;   --pv-blue-700: #1E55C1;
  --pv-sky-50: #ECF8FD;    --pv-sky-100: #D4F0FB;    --pv-sky-200: #A9E0F6;    --pv-sky-500: #139FD8;    --pv-sky-700: #0A6893;
  --pv-violet-50: #F5F2FF; --pv-violet-100: #E9E3FF; --pv-violet-200: #D2C6FF; --pv-violet-500: #7A5CF5; --pv-violet-700: #5535C9;
  --pv-teal-50: #EAFAF7;   --pv-teal-100: #CFF3EC;   --pv-teal-200: #9FE5D8;   --pv-teal-500: #12A594;   --pv-teal-700: #0B7469;
  --pv-indigo-50: #EFF1FF; --pv-indigo-100: #DFE3FF; --pv-indigo-200: #C0C8FF; --pv-indigo-500: #5464E8; --pv-indigo-700: #3341B8;
  --pv-coral-50: #FFF2EE;  --pv-coral-100: #FFE1D8;  --pv-coral-200: #FFC2B1;  --pv-coral-500: #F0623F;  --pv-coral-700: #B23A1C;
  --pv-rose-50: #FFF1F6;   --pv-rose-100: #FFDFEB;   --pv-rose-200: #FFBDD5;   --pv-rose-500: #E64C86;   --pv-rose-700: #AE2459;
  --pv-wa: #1DA851;

  /* Active category (overridden by .cat-* classes) */
  --c-50: var(--pv-green-50); --c-100: var(--pv-green-100); --c-200: var(--pv-green-200); --c-500: var(--pv-green-500); --c-700: var(--pv-green-700);

  --pv-radius-sm: 10px;
  --pv-radius: 14px;
  --pv-radius-lg: 20px;
  --pv-radius-xl: 28px;
  --pv-shadow-xs: 0 1px 2px rgba(16, 36, 27, .06);
  --pv-shadow-sm: 0 1px 3px rgba(16, 36, 27, .07), 0 1px 2px rgba(16, 36, 27, .04);
  --pv-shadow-md: 0 12px 32px -14px rgba(16, 36, 27, .22), 0 3px 8px -3px rgba(16, 36, 27, .07);
  --pv-shadow-lg: 0 34px 64px -30px rgba(16, 36, 27, .32), 0 12px 28px -14px rgba(16, 36, 27, .12);
  --pv-focus: #0B7F53;
  --pv-ease: cubic-bezier(.2, .7, .2, 1);
  --pv-header-h: 76px;
  --pv-gutter: clamp(20px, 4vw, 32px);

  /* Bootstrap bridge */
  --bs-body-font-family: var(--pv-font);
  --bs-body-color: var(--pv-text);
  --bs-body-bg: #fff;
  --bs-emphasis-color: var(--pv-ink);
  --bs-heading-color: var(--pv-ink);
  --bs-link-color: var(--pv-green-700);
  --bs-link-color-rgb: 8, 102, 67;
  --bs-link-hover-color: var(--pv-green-600);
  --bs-link-hover-color-rgb: 11, 127, 83;
  --bs-border-color: var(--pv-line);
  --bs-primary-rgb: 11, 127, 83;
}

.cat-green  { --c-50: var(--pv-green-50);  --c-100: var(--pv-green-100);  --c-200: var(--pv-green-200);  --c-500: var(--pv-green-500);  --c-700: var(--pv-green-700); }
.cat-amber  { --c-50: var(--pv-amber-50);  --c-100: var(--pv-amber-100);  --c-200: var(--pv-amber-200);  --c-500: var(--pv-amber-500);  --c-700: var(--pv-amber-700); }
.cat-blue   { --c-50: var(--pv-blue-50);   --c-100: var(--pv-blue-100);   --c-200: var(--pv-blue-200);   --c-500: var(--pv-blue-500);   --c-700: var(--pv-blue-700); }
.cat-sky    { --c-50: var(--pv-sky-50);    --c-100: var(--pv-sky-100);    --c-200: var(--pv-sky-200);    --c-500: var(--pv-sky-500);    --c-700: var(--pv-sky-700); }
.cat-violet { --c-50: var(--pv-violet-50); --c-100: var(--pv-violet-100); --c-200: var(--pv-violet-200); --c-500: var(--pv-violet-500); --c-700: var(--pv-violet-700); }
.cat-teal   { --c-50: var(--pv-teal-50);   --c-100: var(--pv-teal-100);   --c-200: var(--pv-teal-200);   --c-500: var(--pv-teal-500);   --c-700: var(--pv-teal-700); }
.cat-indigo { --c-50: var(--pv-indigo-50); --c-100: var(--pv-indigo-100); --c-200: var(--pv-indigo-200); --c-500: var(--pv-indigo-500); --c-700: var(--pv-indigo-700); }
.cat-coral  { --c-50: var(--pv-coral-50);  --c-100: var(--pv-coral-100);  --c-200: var(--pv-coral-200);  --c-500: var(--pv-coral-500);  --c-700: var(--pv-coral-700); }
.cat-rose   { --c-50: var(--pv-rose-50);   --c-100: var(--pv-rose-100);   --c-200: var(--pv-rose-200);   --c-500: var(--pv-rose-500);   --c-700: var(--pv-rose-700); }
.cat-gray   { --c-50: #F4F7F5; --c-100: #E8EEEA; --c-200: #D3DDD6; --c-500: #7D8C84; --c-700: #4A5A52; }

/* 2. Base ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
/* Keep anchor jumps and keyboard focus clear of the sticky header. This is set on page
   content and footer only: a scroll-padding on <html> also applies to focus inside the header,
   so opening a menu (which focuses its button) made the whole page jump. */
main, main [id], :is(main, footer) :is(a, button, input, select, textarea, [tabindex]) { scroll-margin-top: calc(var(--pv-header-h) + 16px); }
@media (max-width: 991.98px) {
  main :is(a, button, input, select, textarea, [tabindex]) { scroll-margin-bottom: 96px; }
}
body {
  font-family: var(--pv-font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--pv-text);
  background: var(--pv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { color: var(--pv-ink); font-weight: 800; letter-spacing: -.022em; line-height: 1.18; }
p { margin-bottom: 1rem; }
img, svg { max-width: 100%; }
::selection { background: var(--pv-amber-200); color: var(--pv-ink); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pv-focus);
  outline-offset: 3px;
  box-shadow: none;
}
.pv-skip {
  position: absolute; left: 12px; top: -80px; z-index: 2000;
  background: var(--pv-green-600); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.pv-skip:focus { top: 12px; color: #fff; }
.pv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pv-glyph { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; flex: none; }
/* Reserve icon space while the icon font loads, so nothing shifts when it arrives */
.bi { display: inline-block; min-width: 1em; }

/* 3. Layout ---------------------------------------------------------------- */
.pv-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pv-gutter); }
/* Anchors kept from the previous design: they mark the top of their section */
.pv-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.pv-section { position: relative; padding-block: clamp(72px, 9vw, 120px); }
.pv-section--tint { background: var(--c-50); }
/* Sections below the first screen are laid out and painted only when they come near the
   viewport. The page has ~5,400 elements; laying them all out at load blocked the first paint. */
main > .pv-section { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.pv-section--soft { background: var(--pv-soft); }
.pv-section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.pv-section-head.text-center { margin-inline: auto; }
.pv-section-head.text-center .pv-lead { margin-inline: auto; }

.pv-display {
  font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -.036em;
  font-weight: 800;
  margin: 0 0 22px;
}
.pv-h2 { font-size: clamp(1.85rem, 1.2rem + 2.1vw, 2.75rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 18px; }
.pv-h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.25; margin: 0 0 10px; }
/* Feature titles (h3 under the features h2) are longer than section headlines */
.pv-h2--feature { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem); }
.pv-lead { font-size: clamp(1.03rem, .98rem + .3vw, 1.18rem); color: var(--pv-muted); line-height: 1.65; max-width: 62ch; margin-bottom: 0; }
.pv-mark {
  background: transparent;
  color: inherit;
  padding: 0 .04em;
  box-shadow: inset 0 -.34em 0 var(--pv-amber-200);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pv-hl { color: var(--pv-green-600); }

/* 4. Components ------------------------------------------------------------ */
.pv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 6px; margin-bottom: 18px;
  border-radius: 999px; background: var(--c-100); color: var(--c-700);
  font-weight: 700; font-size: .8125rem; letter-spacing: .01em; line-height: 1.4;
}
.pv-eyebrow > i, .pv-eyebrow > svg {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 4px;
  border-radius: 50%; background: var(--c-500); color: #fff; font-size: .78rem;
}
/* Feature number ("01.") beside the eyebrow, as numbered on the previous page */
.pv-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.pv-kicker .pv-eyebrow { margin-bottom: 0; }
.pv-num { color: var(--c-700); font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

.pv-btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 22px;
  border-radius: 12px; border: 1.5px solid transparent;
  font-family: inherit; font-weight: 700; font-size: .96rem; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .18s var(--pv-ease), background-color .18s, border-color .18s, box-shadow .18s, color .18s;
}
.pv-btn:hover { transform: translateY(-1px); }
.pv-btn:active { transform: translateY(0); }
.pv-btn i { font-size: 1.05em; transition: transform .18s var(--pv-ease); }
.pv-btn:hover .bi-arrow-right { transform: translateX(3px); }
.pv-btn--lg { --btn-h: 54px; padding: 0 26px; font-size: 1.02rem; border-radius: 14px; }
.pv-btn--sm { --btn-h: 40px; padding: 0 16px; font-size: .9rem; border-radius: 10px; }
.pv-btn--primary { background: var(--pv-green-600); color: #fff; box-shadow: 0 8px 18px -10px rgba(11, 127, 83, .85); }
.pv-btn--primary:hover, .pv-btn--primary:focus-visible { background: var(--pv-green-700); color: #fff; box-shadow: 0 12px 22px -12px rgba(8, 102, 67, .95); }
.pv-btn--secondary { background: #fff; color: var(--pv-ink); border-color: var(--pv-line-2); }
.pv-btn--secondary:hover { border-color: var(--pv-ink); color: var(--pv-ink); background: #fff; }
.pv-btn--soft { background: var(--pv-green-100); color: var(--pv-green-700); }
.pv-btn--soft:hover { background: var(--pv-green-200); color: var(--pv-green-700); }
.pv-btn .bi-whatsapp { color: var(--pv-wa); }
.pv-btn--block { width: 100%; }
.pv-btn--icon { width: var(--btn-h); padding: 0; }

.pv-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--c-700); text-decoration: none;
}
.pv-link:hover { color: var(--c-700); text-decoration: underline; text-underline-offset: 4px; }
.pv-link i { transition: transform .18s var(--pv-ease); }
.pv-link:hover i { transform: translateX(3px); }

.pv-icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--c-100); color: var(--c-700); font-size: 1.25rem;
}
.pv-icon-tile svg { width: 24px; height: 24px; }
.pv-icon-tile--solid { background: var(--c-500); color: #fff; }
.pv-icon-tile--sm { width: 36px; height: 36px; border-radius: 10px; font-size: 1.05rem; }
.pv-icon-tile--sm svg { width: 20px; height: 20px; }

.pv-checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.pv-checks li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.55; }
.pv-checks li > i {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--c-100); color: var(--c-700); font-size: .8rem; font-weight: 700;
}
.pv-checks--2col { grid-template-columns: 1fr 1fr; column-gap: 24px; }

.pv-card {
  background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius-lg);
  padding: 24px; box-shadow: var(--pv-shadow-xs);
  transition: transform .25s var(--pv-ease), box-shadow .25s var(--pv-ease), border-color .25s;
}
.pv-card--hover:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow-md); border-color: var(--c-200); }

.pv-stage {
  position: relative; border-radius: var(--pv-radius-xl);
  padding: clamp(16px, 3vw, 34px);
  background-color: var(--c-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%2310241B' fill-opacity='.09'/%3E%3C/svg%3E");
}

/* 3D product visuals. main.js adds these classes (not when motion is reduced) and sets --depth
   only while a visual is tilted or hovered, so flat mockups keep crisp text. */
.pv-3d-parent { perspective: 1600px; }
.pv-3d { transform-style: preserve-3d; }
.pv-3d > * { --z: 18px; translate: 0 0 calc(var(--depth) * var(--z)); }
.pv-3d > .pv-hero__stage { --z: 0px; }
/* Depth grows away from the headline, so the lifted phone never covers the copy */
.pv-hero .pv-3d-parent { perspective-origin: 15% 60%; }
.pv-3d > .pv-hero__phone { --z: 30px; }
.pv-3d > :is(.pv-dr__phone, .pv-auto__side),
.pv-techapp__phones.pv-3d > :last-child { --z: 44px; }
.pv-3d > :is(.pv-hero__toast, .pv-auto__toast) { --z: 64px; }

.pv-note { font-size: .875rem; color: var(--pv-muted); }
.pv-note i { color: var(--c-700); }
.pv-soon {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: var(--pv-amber-100); color: var(--pv-amber-700);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}

/* ---- UI mockup primitives (sized in em so whole mockups scale) ---- */
.ui { font-size: 12px; line-height: 1.4; color: var(--pv-text); letter-spacing: 0; text-align: left; }
.ui b, .ui strong { font-weight: 700; }
.ui-window { background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; box-shadow: var(--pv-shadow-lg); overflow: hidden; }
.ui-window__bar { display: flex; align-items: center; gap: 1em; height: 2.9em; padding: 0 1.1em; background: #F5F8F6; border-bottom: 1px solid var(--pv-line); }
.ui-dots { display: flex; gap: .45em; flex: none; }
.ui-dots i { width: .78em; height: .78em; border-radius: 50%; background: #FF8F7A; }
.ui-dots i:nth-child(2) { background: #FFC94D; }
.ui-dots i:nth-child(3) { background: #5DD39E; }
.ui-url {
  flex: 1; max-width: 26em; height: 1.95em; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: .4em;
  background: #fff; border: 1px solid var(--pv-line); border-radius: 999px;
  color: var(--pv-subtle); font-size: .92em; white-space: nowrap; overflow: hidden;
}
.ui-card { background: #fff; border: 1px solid var(--pv-line); border-radius: 1em; padding: 1em; }
.ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-bottom: .8em; }
.ui-title { font-weight: 700; color: var(--pv-ink); font-size: 1.08em; }
.ui-muted { color: var(--pv-subtle); }
.ui-label { display: block; font-size: .8em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pv-subtle); }
.ui-link { color: var(--pv-green-600); font-weight: 700; font-size: .92em; white-space: nowrap; }
.ui-pill {
  display: inline-flex; align-items: center; gap: .38em; flex: none;
  height: 1.95em; padding: 0 .72em; border-radius: 999px;
  background: var(--c-100); color: var(--c-700);
  font-size: .86em; font-weight: 700; white-space: nowrap;
}
.ui-pill::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.ui-pill--plain::before { display: none; }
.ui-pill--done      { --c-100: var(--pv-green-100);  --c-700: var(--pv-green-700); }
.ui-pill--onsite    { --c-100: var(--pv-blue-100);   --c-700: var(--pv-blue-700); }
.ui-pill--enroute   { --c-100: var(--pv-amber-100);  --c-700: var(--pv-amber-700); }
.ui-pill--scheduled { --c-100: #EBF0ED;              --c-700: #4A5A52; }
.ui-pill--overdue   { --c-100: var(--pv-coral-100);  --c-700: var(--pv-coral-700); }
.ui-pill--violet    { --c-100: var(--pv-violet-100); --c-700: var(--pv-violet-700); }
.ui-pill--teal      { --c-100: var(--pv-teal-100);   --c-700: var(--pv-teal-700); }
.ui-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 2.3em; height: 2.3em; border-radius: 50%; border: 2px solid #fff;
  background: var(--c-100); color: var(--c-700); font-weight: 800; font-size: .84em; letter-spacing: .01em;
}
.ui-avatar--lg { width: 3em; height: 3em; font-size: 1em; }
.ui-glyph {
  display: inline-grid; place-items: center; flex: none;
  width: 2.45em; height: 2.45em; border-radius: .75em;
  background: var(--c-100); color: var(--c-700);
}
.ui-glyph svg { width: 1.5em; height: 1.5em; }
.ui-glyph i { font-size: 1.15em; }
.ui-chip {
  display: inline-flex; align-items: center; gap: .35em; flex: none;
  padding: .22em .62em .22em .42em; border-radius: 999px;
  background: var(--c-50); border: 1px solid var(--c-100); color: var(--c-700);
  font-weight: 700; font-size: .9em; white-space: nowrap;
}
.ui-chip svg { width: 1.3em; height: 1.3em; }
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  height: 2.55em; padding: 0 1em; border-radius: .7em;
  background: #fff; border: 1px solid var(--pv-line-2); color: var(--pv-ink);
  font-weight: 700; white-space: nowrap;
}
.ui-btn--primary { background: var(--pv-green-600); border-color: var(--pv-green-600); color: #fff; }
.ui-btn--wa { background: #0F7F43; border-color: #0F7F43; color: #fff; }
.ui-btn--block { width: 100%; }
.ui-btn--sm { height: 2.1em; padding: 0 .75em; font-size: .92em; }
.ui-progress { height: .5em; border-radius: 999px; background: #E9EFEB; overflow: hidden; }
.ui-progress i { display: block; height: 100%; border-radius: inherit; background: var(--c-500); }
.ui-dot { width: .62em; height: .62em; border-radius: 50%; background: var(--c-500); flex: none; }
.ui-tag { font-size: .76em; font-weight: 800; padding: .16em .48em; border-radius: .38em; background: var(--c-100); color: var(--c-700); letter-spacing: .02em; }
.ui-select {
  display: inline-flex; align-items: center; gap: .45em; flex: none;
  padding: .45em .8em; border: 1px solid var(--pv-line); border-radius: .7em;
  background: #fff; font-weight: 700; color: var(--pv-ink); white-space: nowrap;
}
.ui-input {
  flex: 1; display: flex; align-items: center; gap: .5em; min-width: 0;
  height: 2.55em; padding: 0 .8em; border: 1px solid var(--pv-line); border-radius: .7em;
  background: #fff; color: var(--pv-subtle); white-space: nowrap; overflow: hidden;
}
.ui-seg { display: inline-flex; padding: .2em; border-radius: .7em; background: #EEF3F0; flex: none; }
.ui-seg span { padding: .38em .78em; border-radius: .55em; font-weight: 700; color: var(--pv-muted); }
.ui-seg span.is-on { background: #fff; color: var(--pv-ink); box-shadow: var(--pv-shadow-xs); }
.ui-check i { line-height: 1; }
.ui-check {
  display: inline-grid; place-items: center; flex: none;
  width: 1.45em; height: 1.45em; border-radius: .42em;
  border: 1.5px solid var(--pv-line-2); background: #fff; color: #fff; font-size: .9em;
}
.is-done > .ui-check { background: var(--pv-green-500); border-color: var(--pv-green-500); }
.ui-checkrow { display: flex; align-items: center; gap: .6em; padding: .42em 0; color: var(--pv-ink); font-weight: 600; }
.ui-checkrow.is-done { color: var(--pv-muted); }
.ui-live { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: .9em; color: var(--pv-green-600); }
.ui-live i { width: .55em; height: .55em; border-radius: 50%; background: var(--pv-green-500); animation: pv-blink 1.6s ease-in-out infinite; }
.ui-toast {
  display: flex; align-items: center; gap: .8em;
  min-width: 15.5em; padding: .78em 1.1em .78em .78em;
  background: #fff; border: 1px solid var(--pv-line); border-radius: 1.1em; box-shadow: var(--pv-shadow-md);
  font-size: 12px; line-height: 1.35;
}
.ui-toast b { display: block; color: var(--pv-ink); font-size: 1.05em; }
.ui-toast small { display: block; color: var(--pv-muted); font-size: .95em; }

/* Phone frame — a black bezel with a slim metal edge, like a real phone */
.ui-phone {
  position: relative; width: 250px; flex: none;
  background: #fff; border: 7px solid #111614; border-radius: 34px;
  box-shadow: var(--pv-shadow-lg), 0 0 0 1.5px #3D4743;
  overflow: hidden; font-size: 11.5px; line-height: 1.38;
}
/* Front camera: a punch-hole lens centred in the status bar; ::after is the lens glint */
.ui-phone::before {
  content: ""; position: absolute; top: .72em; left: 50%; z-index: 3;
  width: 1em; height: 1em; transform: translateX(-50%);
  border-radius: 50%; background: #1E2B45; box-shadow: inset 0 0 0 .22em #0B0F0D;
}
.ui-phone::after {
  content: ""; position: absolute; top: calc(.72em + .3em); left: calc(50% - .2em); z-index: 4;
  width: .2em; height: .2em; border-radius: 50%; background: rgba(255, 255, 255, .55);
}
.ui-phone__status { display: flex; justify-content: space-between; align-items: center; padding: .7em 1.5em .35em; font-weight: 800; font-size: .9em; color: var(--pv-ink); }
.ui-phone__status span:last-child { display: inline-flex; gap: .3em; }
.ui-app-head { padding: .85em 1.2em 1em; background: var(--c-100); color: var(--c-700); }
.ui-app-head small { display: block; font-weight: 700; font-size: .88em; }
.ui-app-head b { display: block; color: var(--pv-ink); font-size: 1.28em; line-height: 1.2; margin-top: .15em; }
.ui-app-head span { display: block; color: var(--pv-muted); font-weight: 600; }
.ui-phone__body { padding: .9em 1.1em 1.1em; display: grid; gap: .55em; }
.ui-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: .55em .6em .8em; border-top: 1px solid var(--pv-line); color: var(--pv-subtle); text-align: center; font-size: .8em; font-weight: 700; }
.ui-tabbar span { display: grid; justify-items: center; gap: .1em; }
.ui-tabbar i { font-size: 1.45em; }
.ui-tabbar .is-on { color: var(--pv-blue-700); }
.ui-tabbar .ui-tabbar__plus i { display: grid; place-items: center; width: 1.9em; height: 1.9em; margin-top: -.6em; border-radius: 50%; background: var(--pv-green-600); color: #fff; font-size: 1.4em; }
.ui-photo {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
  border-radius: .7em; overflow: hidden; background: var(--c-100); color: var(--c-700);
}
.ui-photo svg { width: 46%; height: 46%; opacity: .9; }
.ui-photo em {
  position: absolute; left: .4em; bottom: .4em; padding: .1em .45em; border-radius: .35em;
  background: #fff; color: var(--pv-ink); font-style: normal; font-weight: 800; font-size: .78em;
}
.ui-photo .ui-photo__bugs { position: absolute; inset: 0; }
.ui-sign { border: 1px dashed var(--pv-line-2); border-radius: .7em; padding: .35em .6em .45em; background: #FBFCFB; }
.ui-sign svg { display: block; width: 100%; height: 2.6em; color: var(--pv-ink); }
.ui-sign small { color: var(--pv-subtle); font-weight: 600; font-size: .85em; }

/* 5. Header ---------------------------------------------------------------- */
.pv-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.pv-header.is-scrolled { border-bottom-color: var(--pv-line); box-shadow: 0 10px 30px -24px rgba(16, 36, 27, .45); }
.pv-nav { display: flex; align-items: center; gap: 18px; height: var(--pv-header-h); transition: height .25s var(--pv-ease); }
.pv-header.is-scrolled .pv-nav { height: 64px; }
.pv-logo { display: inline-flex; flex: none; }
.pv-logo img { display: block; width: auto; height: 38px; transition: height .25s var(--pv-ease); }
.pv-header.is-scrolled .pv-logo img { height: 34px; }
.pv-menu { display: none; list-style: none; margin: 0 0 0 10px; padding: 0; align-items: center; gap: 2px; }
.pv-menu > li { position: relative; }
.pv-menu__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-weight: 600; font-size: .94rem; color: var(--pv-ink); text-decoration: none; white-space: nowrap;
}
.pv-menu__link:hover, .pv-menu__link.show, .pv-menu__link[aria-expanded="true"] { background: var(--pv-soft); color: var(--pv-green-700); }
.pv-menu__link .bi-chevron-down { font-size: .68rem; transition: transform .2s; }
.pv-menu__link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.pv-nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pv-nav__existing { font-weight: 600; font-size: .94rem; color: var(--pv-muted); white-space: nowrap; }
.pv-nav__toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--pv-line-2); border-radius: 12px; background: #fff; color: var(--pv-ink); font-size: 1.35rem;
}
@media (min-width: 1200px) {
  .pv-menu { display: flex; }
  .pv-nav__toggle { display: none; }
}
/* Narrower screens: no room beside the logo, Login button and menu toggle. The demo button stays
   until phones, where the mobile menu and the sticky bottom bar carry it instead. */
@media (max-width: 767.98px) {
  .pv-nav__existing { display: none; }
}
@media (max-width: 575.98px) {
  .pv-nav__demo { display: none; }
}
/* Small laptops: tighter menu, so the full header still fits beside the logo */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .pv-menu__link { padding-inline: 9px; }
}
@media (max-width: 400px) {
  .pv-logo img { height: 32px; }
  .pv-nav__actions .pv-btn { --btn-h: 42px; padding: 0 14px; font-size: .9rem; }
}

.pv-dropdown {
  --bs-dropdown-link-active-bg: var(--pv-green-100);
  --bs-dropdown-link-active-color: var(--pv-green-700);
  border: 1px solid var(--pv-line); border-radius: 18px; box-shadow: var(--pv-shadow-lg);
  padding: 8px; margin-top: 10px !important; min-width: 270px;
}
.pv-dropdown .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--pv-ink); white-space: normal; }
.pv-dropdown .dropdown-item i { color: var(--pv-green-600); font-size: 1rem; width: 18px; text-align: center; }
.pv-dropdown .dropdown-item:hover, .pv-dropdown .dropdown-item:focus { background: var(--pv-soft); color: var(--pv-green-700); }
.pv-dropdown .dropdown-header { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pv-subtle); padding: 10px 12px 4px; }
.pv-dropdown .dropdown-divider { border-color: var(--pv-line); margin: 6px 4px; }
.pv-mega { width: min(900px, calc(100vw - 48px)); padding: 16px; }
.pv-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px; }
.pv-mega__title { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c-700); padding: 6px 10px 4px; margin: 0; }
.pv-mega__item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; color: var(--pv-ink); text-decoration: none; }
.pv-mega__item:hover, .pv-mega__item:focus-visible { background: var(--c-50); color: var(--pv-ink); }
.pv-mega__item strong { display: block; font-size: .88rem; font-weight: 700; line-height: 1.3; }
.pv-mega__desc { display: block; font-size: .78rem; color: var(--pv-muted); line-height: 1.4; margin-top: 2px; }
.pv-mega__item .pv-icon-tile { width: 32px; height: 32px; border-radius: 9px; font-size: .95rem; }
.pv-mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--pv-cream);
  font-size: .88rem; color: var(--pv-text);
}
.pv-mega__foot a { font-weight: 700; text-decoration: none; }

.pv-offcanvas { --bs-offcanvas-width: min(380px, 92vw); border-left: 0 !important; }
.pv-offcanvas .offcanvas-header { border-bottom: 1px solid var(--pv-line); padding: 14px 20px; }
.pv-offcanvas .offcanvas-body { padding: 12px 16px 24px; display: flex; flex-direction: column; }
.pv-mnav { list-style: none; padding: 0; margin: 0; }
.pv-mnav > li { border-bottom: 1px solid var(--pv-line); }
.pv-mnav__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 6px; border: 0; background: none; text-align: left;
  font: inherit; font-weight: 700; font-size: 1rem; color: var(--pv-ink); text-decoration: none;
}
.pv-mnav__link .bi-chevron-down { transition: transform .2s; font-size: .8rem; }
.pv-mnav__link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.pv-mnav__sub { list-style: none; padding: 0 0 12px; margin: 0; display: grid; gap: 2px; }
.pv-mnav__sub a { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; color: var(--pv-text); text-decoration: none; font-weight: 600; font-size: .94rem; }
.pv-mnav__sub a:hover { background: var(--pv-soft); color: var(--pv-green-700); }
.pv-mnav__sub i { color: var(--pv-green-600); width: 18px; text-align: center; }
.pv-mnav__sub .pv-glyph { color: var(--pv-green-600); width: 18px; height: 18px; }
.pv-mnav__ctas { display: grid; gap: 10px; margin-top: auto; padding-top: 20px; }

/* 6. Hero ------------------------------------------------------------------ */
.pv-hero { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 7vw, 88px); background: #fff; }
.pv-hero__glyphs { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pv-green-700); opacity: .07; pointer-events: none; }
.pv-hero .row { position: relative; }
.pv-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--pv-green-50); border: 1px solid var(--pv-green-200);
  color: var(--pv-green-700); font-weight: 700; font-size: .86rem;
}
.pv-badge__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pv-green-600); color: #fff; }
.pv-badge__icon svg { width: 18px; height: 18px; }
/* The headline is the previous page's H1, which is longer than a usual display line */
.pv-hero .pv-display { font-size: clamp(2rem, 1.1rem + 2.2vw, 2.6rem); }
.pv-hero__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--pv-muted); max-width: 54ch; margin-bottom: 30px; }
/* Keep the paragraph clear of the hero phone, which overhangs the column gap */
@media (min-width: 992px) { .pv-hero__lead { max-width: min(54ch, calc(100% - 28px)); } }
.pv-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pv-hero__checks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 22px 0 0; font-size: .9rem; font-weight: 600; color: var(--pv-text); }
.pv-hero__checks li { display: inline-flex; align-items: center; gap: 7px; }
.pv-hero__checks i { color: var(--pv-green-600); font-size: 1.05rem; }
.pv-hero__trial { margin: 14px 0 0; color: var(--pv-muted); font-size: .88rem; font-weight: 600; }
.pv-hero__trial + .pv-rating { margin-top: 10px; }
.pv-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 18px; font-size: .9rem; color: var(--pv-muted); }
.pv-rating__stars { display: inline-flex; gap: 2px; color: var(--pv-amber-500); font-size: .95rem; }
.pv-rating strong { color: var(--pv-ink); }

.pv-hero__visual { position: relative; padding: 34px 0 44px 34px; }
.pv-hero__stage {
  position: absolute; top: 0; bottom: 0; left: 0; right: calc(-1 * var(--pv-gutter) - 40px);
  border-radius: 34px 0 0 34px; background: var(--pv-mint);
}
.pv-hero__stage::before {
  content: ""; position: absolute; width: 132px; height: 132px; right: 9%; top: -46px;
  border-radius: 50%; background: var(--pv-amber-200);
}
.pv-hero__stage::after {
  content: ""; position: absolute; width: 74px; height: 74px; left: -26px; bottom: 34%;
  border-radius: 22px; background: var(--pv-sky-200); transform: rotate(12deg);
}
.pv-dash { position: relative; z-index: 2; font-size: 11.5px; }
.pv-dash__body { display: grid; grid-template-columns: 3.7em 1fr; }
.pv-dash__rail { display: flex; flex-direction: column; align-items: center; gap: .55em; padding: 1em 0; background: var(--pv-green-50); border-right: 1px solid var(--pv-line); }
.pv-dash__rail span { display: grid; place-items: center; width: 2.45em; height: 2.45em; border-radius: .75em; color: var(--pv-muted); font-size: 1.12em; }
.pv-dash__rail span.is-active { background: var(--pv-green-600); color: #fff; }
.pv-dash__main { display: flex; flex-direction: column; gap: 1em; min-width: 0; padding: 1.2em; background: #FBFCFB; }
.pv-dash__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.pv-dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75em; }
.ui-kpi { display: flex; align-items: center; gap: .7em; min-width: 0; padding: .85em; background: #fff; border: 1px solid var(--pv-line); border-radius: 1em; }
.ui-kpi__icon { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: .8em; background: var(--c-100); color: var(--c-700); font-size: 1.15em; }
.ui-kpi b { display: block; color: var(--pv-ink); font-size: 1.5em; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.ui-kpi > div > span { display: block; color: var(--pv-muted); font-size: .9em; white-space: nowrap; }
.pv-dash__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: .8em; }
.pv-dash__side { display: grid; gap: .8em; align-content: start; }
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-visit { display: grid; grid-template-columns: 3em auto minmax(0, 1fr) auto auto; align-items: center; gap: .6em; padding: .62em 0; border-top: 1px solid var(--pv-line); }
.ui-visit:first-child { border-top: 0; padding-top: 0; }
.ui-visit__time { font-weight: 800; color: var(--pv-ink); font-variant-numeric: tabular-nums; }
.ui-visit__info { min-width: 0; }
.ui-visit__info b, .ui-visit__info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-visit__info b { color: var(--pv-ink); }
.ui-visit__info small { color: var(--pv-subtle); font-size: .92em; }
.ui-minimap { display: block; width: 100%; height: auto; border-radius: .75em; }
.pv-dash__renew b { font-size: 1.65em; color: var(--pv-ink); font-weight: 800; letter-spacing: -.02em; }
.pv-dash__renew .ui-progress { margin: .55em 0 .45em; }

.pv-hero__phone { position: absolute; left: -22px; bottom: -52px; z-index: 3; width: 196px; font-size: 9.6px; border-width: 6px; border-radius: 28px; }
.pv-hero__toast { position: absolute; z-index: 4; }
.pv-hero__toast--1 { top: -4px; right: 34px; }
.pv-hero__toast--2 { top: 47%; right: -14px; }
.pv-hero__toast--3 { bottom: 4px; right: 56px; }
.pv-done {
  display: grid; justify-items: center; gap: .35em; padding: 1.1em .8em .4em; text-align: center;
}
.pv-done__icon { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--pv-green-100); color: var(--pv-green-600); font-size: 1.6em; }
.pv-done b { color: var(--pv-ink); font-size: 1.25em; }
.pv-done > span:last-child { color: var(--pv-muted); }

/* Workflow trail with the walking ant */
.pv-trail {
  position: relative; margin-top: clamp(44px, 6vw, 72px);
  padding: 30px clamp(14px, 2vw, 24px) 18px;
  background: #fff; border: 1px solid var(--pv-line); border-radius: 22px; box-shadow: var(--pv-shadow-sm);
}
.pv-trail__label {
  position: absolute; top: -13px; left: 24px; margin: 0;
  padding: 3px 11px; border-radius: 999px;
  background: var(--pv-amber-100); color: var(--pv-amber-700);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
[data-scroll-region]:focus-visible { outline-offset: 4px; border-radius: 12px; }
.pv-trail__steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.pv-trail__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--pv-ink); line-height: 1.25; }
.pv-trail__step:not(:last-child)::after {
  content: ""; position: absolute; z-index: -1; top: 22px; left: calc(50% + 24px); width: calc(100% - 48px);
  border-top: 2px dashed var(--pv-line-2);
}
.pv-trail__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 14px; border: 3px solid #fff;
  background: var(--c-100); color: var(--c-700); font-size: 1.1rem;
  box-shadow: 0 0 0 1px var(--c-200);
  animation: pv-trail-glow 18s linear infinite;
  animation-delay: calc(var(--i) * 1.76s);
}
.pv-trail__track { position: absolute; z-index: 0; top: 30px; left: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); height: 44px; pointer-events: none; }
.pv-trail__walker { position: absolute; top: 0; bottom: 0; left: 5%; width: 90%; animation: pv-ant-walk 18s linear infinite; }
.pv-trail__ant { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--pv-amber-700); transform: rotate(90deg); animation: pv-ant-fade 18s linear infinite; }
.pv-ant { display: block; width: 100%; height: 100%; overflow: visible; }
.pv-ant .legs-a, .pv-ant .legs-b { transform-box: fill-box; transform-origin: center; animation: pv-legs .32s ease-in-out infinite alternate; }
.pv-ant .legs-b { animation-direction: alternate-reverse; }

/* 7. Proof bar ------------------------------------------------------------- */
.pv-proof { position: relative; padding-bottom: clamp(64px, 8vw, 96px); }
.pv-proof__panel { padding: clamp(24px, 4vw, 44px); background: var(--pv-cream); border: 1px solid #F3E6C2; border-radius: var(--pv-radius-xl); }
.pv-proof__title { max-width: 30ch; margin: 0 auto 12px; text-align: center; font-size: clamp(1.45rem, 1.05rem + 1.35vw, 2.05rem); letter-spacing: -.03em; }
.pv-proof__lead { max-width: 62ch; margin: 0 auto 28px; text-align: center; color: var(--pv-muted); font-size: 1.02rem; }
.pv-proof__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pv-proof__item { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; }
.pv-proof__item b { display: block; color: var(--pv-ink); font-size: .95rem; line-height: 1.3; }
.pv-proof__item > div > span { display: block; margin-top: 3px; color: var(--pv-muted); font-size: .85rem; line-height: 1.45; }

/* 8. Problem --------------------------------------------------------------- */
.pv-chaos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 26px; }
.pv-chaos__panel { position: relative; min-height: 440px; padding: 64px 26px 26px; border-radius: var(--pv-radius-xl); }
.pv-chaos__before { background: var(--pv-coral-50); border: 1.5px dashed var(--pv-coral-200); }
.pv-chaos__after { display: flex; align-items: center; justify-content: center; background: var(--pv-green-50); border: 1px solid var(--pv-green-200); }
.pv-chaos__tag { position: absolute; top: 20px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--c-100); color: var(--c-700); font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pv-chaos__arrow { align-self: center; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--pv-green-600); color: #fff; font-size: 1.45rem; box-shadow: var(--pv-shadow-md); }
.pv-scrap {
  position: absolute; width: 214px; padding: 12px;
  background: #fff; border: 1px solid var(--pv-line); border-radius: 12px; box-shadow: var(--pv-shadow-md);
  font-size: 12px; line-height: 1.4; transition: transform .35s var(--pv-ease);
}
.pv-scrap:hover { transform: rotate(0) scale(1.03) !important; z-index: 5; }
.pv-scrap__head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-weight: 800; color: var(--pv-ink); overflow-wrap: anywhere; }
.pv-scrap__badge { margin-left: auto; padding: 0 7px; border-radius: 999px; background: var(--pv-coral-700); color: #fff; font-size: .8em; line-height: 1.7; }
.pv-scrap--wa { top: 66px; left: 22px; transform: rotate(-4deg); }
.pv-scrap--wa .bi-whatsapp { color: var(--pv-wa); font-size: 1.1em; }
.pv-bubble { width: fit-content; max-width: 100%; margin-top: 6px; padding: 6px 9px; border-radius: 10px 10px 10px 3px; background: #F1F4F2; color: var(--pv-text); }
.pv-scrap--sheet { top: 58px; right: 20px; width: 200px; transform: rotate(3deg); }
.pv-scrap--sheet .bi { color: #1F8A4C; }
.pv-sheet { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border: 1px solid var(--pv-line); border-radius: 6px; overflow: hidden; font-size: .88em; }
.pv-sheet span { padding: 3px 5px; border-right: 1px solid var(--pv-line); border-bottom: 1px solid var(--pv-line); white-space: nowrap; overflow: hidden; }
.pv-sheet span:nth-child(3n) { border-right: 0; }
.pv-sheet span:nth-last-child(-n+3) { border-bottom: 0; }
.pv-sheet .is-head { background: #F1F5F2; font-weight: 700; }
.pv-sheet .is-bad { background: var(--pv-coral-100); color: var(--pv-coral-700); font-weight: 700; }
.pv-scrap--paper { bottom: 30px; left: 34px; width: 188px; transform: rotate(3.5deg); background: #FFFDF6; font-style: italic; color: #5B4B2A; }
.pv-scrap--paper p { margin: 0; padding: 4px 0; border-bottom: 1px solid #EFE6CC; }
.pv-scrap--paper::after { content: ""; position: absolute; width: 46px; height: 46px; right: 14px; top: 12px; border: 3px solid rgba(143, 83, 0, .16); border-radius: 50%; }
.pv-scrap--note { bottom: 52px; right: 34px; width: 158px; transform: rotate(-6deg); background: var(--pv-amber-200); border-color: #F3CF63; color: #5A3B00; font-weight: 700; }
.pv-scrap--calls { top: 214px; left: 50%; width: 190px; transform: translateX(-46%) rotate(-2deg); }
.pv-scrap--calls .bi { color: var(--pv-coral-500); }
.pv-after-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55em; }
.pv-after-list li { display: flex; align-items: center; gap: .7em; padding: .55em .65em; border-radius: .8em; background: #fff; border: 1px solid var(--pv-line); }
.pv-after-list b { color: var(--pv-ink); }
.pv-after-list small { display: block; color: var(--pv-subtle); }
.pv-after-list .ui-glyph { width: 2.3em; height: 2.3em; }
.pv-after-list .bi-check2-circle { margin-left: auto; color: var(--pv-green-600); font-size: 1.2em; }
.pv-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.pv-pain { padding: 20px 22px; background: #fff; border: 1px solid var(--pv-line); border-radius: 18px; transition: transform .25s var(--pv-ease), box-shadow .25s; }
.pv-pain:hover { transform: translateY(-3px); box-shadow: var(--pv-shadow-md); }
.pv-pain__problem { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--pv-ink); }
.pv-pain__problem i { margin-top: 1px; color: var(--pv-coral-500); font-size: 1.1rem; }
.pv-pain__fix { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--pv-line-2); color: var(--pv-muted); font-size: .93rem; line-height: 1.55; }
.pv-pain__fix i { margin-top: 1px; color: var(--pv-green-600); font-size: 1.05rem; }

/* 9. Platform -------------------------------------------------------------- */
.pv-hubline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: -12px 0 40px; }
.pv-hubline span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--pv-line); font-weight: 700; font-size: .9rem; color: var(--pv-ink); }
.pv-hubline i { color: var(--pv-green-600); }
.pv-modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pv-module {
  position: relative; display: flex; flex-direction: column; padding: 22px;
  background: var(--c-50); border: 1px solid var(--c-100); border-radius: 22px;
  transition: transform .25s var(--pv-ease), box-shadow .25s, border-color .25s;
}
.pv-module:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow-md); border-color: var(--c-200); }
.pv-module__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pv-module h3 { margin: 0; font-size: 1.15rem; }
.pv-module__head p { margin: 0; font-size: .84rem; color: var(--pv-muted); line-height: 1.35; }
.pv-module__list { list-style: none; display: grid; gap: 7px; margin: 0 0 18px; padding: 0; font-size: .9rem; }
.pv-module__list li { display: flex; align-items: baseline; gap: 9px; }
.pv-module__list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--c-500); transform: translateY(-2px); }
.pv-module__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--c-700); text-decoration: none; }
.pv-module__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pv-module__link:hover { color: var(--c-700); }
.pv-module:hover .pv-module__link i { transform: translateX(3px); }
.pv-module__link i { transition: transform .18s var(--pv-ease); }
.pv-modules__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 36px; text-align: center; }
.pv-modules__foot p { margin: 0; color: var(--pv-ink); font-weight: 700; }

/* 10. Auto-advancing showcases (How it works, Inspections) ------------------ */
.pv-auto { position: relative; }
.pv-auto__stage {
  position: relative; overflow: hidden;
  background-color: var(--c-50); border: 1px solid var(--c-100); border-radius: 32px;
  transition: background-color .6s ease, border-color .6s ease;
}
.pv-auto__stage::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 58%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%2310241B' fill-opacity='.08'/%3E%3C/svg%3E"); pointer-events: none; }
.pv-auto__panel {
  position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 48px;
  min-height: 620px; padding: 56px 56px 104px;
}
.pv-auto__panel[hidden] { display: none; }
/* Every panel shares one grid cell, so the stage keeps the tallest panel's height and autoplay
   never moves the page. Inactive panels stay laid out but invisible. */
.pv-auto__stage { display: grid; }
.pv-auto__panel { grid-area: 1 / 1; }
/* !important: Bootstrap's reboot hides [hidden] with display:none !important */
.pv-auto__panel[hidden] { display: grid !important; visibility: hidden; }
.pv-auto__panel:focus-visible { outline-offset: -8px; border-radius: 32px; }
.pv-auto__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-700); }
.pv-auto__badge { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--c-200); }
.pv-auto__text h3 { font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 14px; }
.pv-auto__text > p:not(.pv-auto__meta):not(.pv-auto__chip) { color: var(--pv-muted); font-size: 1.05rem; margin-bottom: 0; }
.pv-auto__text .pv-checks { margin-top: 20px; gap: 10px; }
.pv-auto__chip { display: inline-flex; align-items: flex-start; gap: 9px; margin: 22px 0 0; padding: 11px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--c-100); box-shadow: var(--pv-shadow-xs); font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--pv-ink); }
.pv-auto__chip i { margin-top: 2px; color: var(--pv-amber-500); }
.pv-auto__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 470px; }
.pv-auto__visual--split { gap: 22px; }
.pv-auto__screen { position: relative; z-index: 1; width: 100%; max-width: 600px; font-size: 13.5px; box-shadow: var(--pv-shadow-lg); }
.pv-auto__body { display: grid; gap: .85em; padding: 1.2em; background: #FBFCFB; }
.pv-auto__body--plain { padding: 0; background: transparent; }
.pv-auto__body .ui-card { box-shadow: var(--pv-shadow-sm); }
.pv-auto__list { display: grid; }
.pv-auto__phone { position: relative; z-index: 1; width: 280px; font-size: 12.5px; }
.pv-auto__phone .pv-auto__body { gap: .55em; padding: .9em 1.1em 1.1em; background: #fff; }
.pv-auto__phone.pv-wa .pv-auto__body { min-height: 25em; background: #EFEAE2; }
.pv-auto__phone.pv-wa { width: 280px; }
.pv-auto__side { position: relative; z-index: 2; display: grid; gap: 14px; width: 260px; font-size: 12.5px; }
.pv-auto__sidecard { box-shadow: var(--pv-shadow-md); }
.pv-auto__toast { position: absolute; z-index: 3; font-size: 12.5px; }
.pv-auto__toast--tr { top: -4%; right: -3%; }
.pv-auto__toast--bl { bottom: -6%; left: -5%; }
.pv-auto__toast--tl { top: 12%; left: 0; }
.pv-auto__toast--br { bottom: 12%; right: 0; }
.pv-auto__toast--side { position: relative; inset: auto; min-width: 0; }
.pv-auto__controls { position: absolute; left: 56px; bottom: 34px; z-index: 4; display: flex; align-items: center; gap: 8px; }
.pv-auto__btn {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--c-200); background: #fff; color: var(--c-700); font-size: 1.05rem; cursor: pointer;
  transition: transform .18s var(--pv-ease), background-color .2s, border-color .2s, color .2s;
}
.pv-auto__btn:hover { transform: translateY(-1px); border-color: var(--c-700); }
.pv-auto__btn--play { background: var(--c-700); border-color: var(--c-700); color: #fff; }
.pv-auto__count { margin-left: 8px; font-size: .9rem; font-weight: 700; color: var(--pv-muted); font-variant-numeric: tabular-nums; }
.pv-auto__count b { font-size: 1.15rem; color: var(--c-700); }

/* Entrance choreography each time a panel becomes active */
.pv-auto__panel.is-entering .pv-auto__text > * { animation: pv-fade-up .55s var(--pv-ease) both; }
.pv-auto__panel.is-entering .pv-auto__text > :nth-child(2) { animation-delay: 0.06s; }
.pv-auto__panel.is-entering .pv-auto__text > :nth-child(3) { animation-delay: 0.12s; }
.pv-auto__panel.is-entering .pv-auto__text > :nth-child(4) { animation-delay: 0.18s; }
.pv-auto__panel.is-entering .pv-auto__text > :nth-child(5) { animation-delay: 0.24s; }
.pv-auto__panel.is-entering .pv-auto__text > :nth-child(6) { animation-delay: 0.30s; }
.pv-auto__panel.is-entering :is(.pv-auto__screen, .pv-auto__phone) { animation: pv-screen-in .65s var(--pv-ease) both .08s; }
.pv-auto__panel.is-entering :is(.pv-auto__body, .pv-auto__list, .pv-auto__side) > * { animation: pv-fade-up .5s var(--pv-ease) both; animation-delay: calc(.3s + var(--k, 0) * 90ms); }
.pv-auto__body > :nth-child(2), .pv-auto__list > :nth-child(2), .pv-auto__side > :nth-child(2) { --k: 1; }
.pv-auto__body > :nth-child(3), .pv-auto__list > :nth-child(3), .pv-auto__side > :nth-child(3) { --k: 2; }
.pv-auto__body > :nth-child(4), .pv-auto__list > :nth-child(4), .pv-auto__side > :nth-child(4) { --k: 3; }
.pv-auto__body > :nth-child(5), .pv-auto__list > :nth-child(5), .pv-auto__side > :nth-child(5) { --k: 4; }
.pv-auto__body > :nth-child(6), .pv-auto__list > :nth-child(6), .pv-auto__side > :nth-child(6) { --k: 5; }
.pv-auto__body > :nth-child(7), .pv-auto__list > :nth-child(7), .pv-auto__side > :nth-child(7) { --k: 6; }
.pv-auto__body > :nth-child(8), .pv-auto__list > :nth-child(8), .pv-auto__side > :nth-child(8) { --k: 7; }
.pv-auto__body > :nth-child(9), .pv-auto__list > :nth-child(9), .pv-auto__side > :nth-child(9) { --k: 8; }
.pv-auto__body > :nth-child(10), .pv-auto__list > :nth-child(10), .pv-auto__side > :nth-child(10) { --k: 9; }
.pv-auto__panel.is-entering .pv-auto__toast { animation: pv-toast-in .6s var(--pv-ease) both .9s, pv-float 6s ease-in-out 1.6s infinite; }
.pv-auto__panel.is-entering .pv-auto__toast--2 { animation-delay: 1.25s, 1.95s; }
.pv-auto__panel.is-entering .pv-auto__side > .pv-auto__toast { animation: pv-toast-in .55s var(--pv-ease) both; animation-delay: calc(.5s + var(--k, 0) * 140ms); }
.pv-auto__panel.is-entering .vg-line { animation: pv-draw 1.6s ease both .5s; }
.pv-auto__panel.is-entering :is(.vg-seg i, .vg-aging i, .vg-sev i, .ui-progress i) { transform-origin: left; animation: pv-grow 1s var(--pv-ease) both .55s; }
@keyframes pv-screen-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pv-toast-in { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pv-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes pv-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pv-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Workflow timeline: phases, steps and the walking ant */
.pv-tl { position: relative; margin: 0 0 26px; }
.pv-tl__inner { position: relative; }
.pv-tl__phases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 12px; }
.pv-tl__phase { position: relative; margin: 0 10px; padding-bottom: 12px; text-align: center; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-700); }
.pv-tl__phase::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border: 2px solid var(--c-200); border-bottom: 0; border-radius: 8px 8px 0 0; }
.pv-tl__steps { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pv-tl__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 4px; border: 0; border-radius: 16px; background: none; font: inherit; color: var(--pv-text); cursor: pointer; }
.pv-tl__step:not(:first-child)::before { content: ""; position: absolute; top: 34px; right: calc(50% + 30px); width: calc(100% - 60px); border-top: 3px dashed var(--pv-line-2); }
.pv-tl__step.is-done::before, .pv-tl__step.is-active::before { border-top-style: solid; border-color: var(--c-500); }
.pv-tl__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; border: 2px solid var(--c-200); background: #fff; color: var(--c-700); font-size: 1.2rem;
  transition: background-color .3s, border-color .3s, color .3s, transform .35s var(--pv-ease), box-shadow .3s;
}
.pv-tl__dot .pv-glyph { width: 1.3rem; height: 1.3rem; }
.pv-tl__step:hover .pv-tl__dot { border-color: var(--c-500); transform: translateY(-2px); }
.pv-tl__step.is-done .pv-tl__dot { background: var(--c-100); border-color: var(--c-200); }
.pv-tl__step.is-active .pv-tl__dot { background: var(--c-500); border-color: var(--c-500); color: #fff; transform: scale(1.12); box-shadow: 0 10px 22px -10px var(--c-500), 0 0 0 6px var(--c-100); }
/* Progress ring: an exact 64px square centred on the 52px step circle. max-width must be
   cleared, or the base `svg { max-width: 100% }` squeezes it and the ring drifts off-centre. */
.pv-tl__ring { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; max-width: none; overflow: visible; transform: translate(-50%, -50%) rotate(-90deg); opacity: 0; pointer-events: none; }
.pv-tl__ring circle { fill: none; stroke: var(--c-700); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
[data-playing="true"] .pv-tl__step.is-active .pv-tl__ring { opacity: 1; }
[data-playing="true"] .pv-tl__step.is-active .pv-tl__ring circle { animation: pv-ring var(--tab-ms, 5500ms) linear forwards; }
.pv-tl__num { margin-top: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--pv-subtle); }
.pv-tl__label { font-size: .86rem; font-weight: 700; line-height: 1.2; text-align: center; color: var(--pv-ink); }
.pv-tl__step.is-active :is(.pv-tl__num, .pv-tl__label) { color: var(--c-700); }
.pv-tl__ant { position: absolute; z-index: 2; top: 0; left: 0; width: 22px; height: 22px; color: var(--pv-amber-700); pointer-events: none; transition: transform .9s var(--pv-ease); }
.pv-tl__ant .pv-ant { transform: rotate(90deg); transition: transform .35s; }
.pv-tl__ant.is-back .pv-ant { transform: rotate(-90deg); }

/* Inspection / report tabs */
.pv-itabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.pv-itab {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 16px 22px; border: 1px solid var(--pv-line); border-radius: 20px; background: #fff;
  font: inherit; text-align: left; color: var(--pv-ink); cursor: pointer;
  transition: transform .2s var(--pv-ease), border-color .2s, background-color .2s, box-shadow .2s;
}
.pv-itab:hover { transform: translateY(-2px); border-color: var(--c-200); }
.pv-itab .pv-icon-tile { margin-bottom: 8px; }
.pv-itab b { font-size: 1rem; line-height: 1.25; }
.pv-itab > span:not(.pv-icon-tile):not(.pv-itab__bar) { font-size: .84rem; line-height: 1.35; color: var(--pv-muted); }
.pv-itab.is-active { background: var(--c-50); border-color: var(--c-200); box-shadow: var(--pv-shadow-md); }
.pv-itab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.pv-itab.is-active .pv-itab__bar { background: var(--c-100); }
.pv-itab__bar i { display: block; width: 0; height: 100%; background: var(--c-500); }
.pv-itab.is-active .pv-itab__bar i { width: 100%; }
[data-playing="true"] .pv-itab.is-active .pv-itab__bar i { animation: pv-progress var(--tab-ms, 6500ms) linear both; }

.vg { display: grid; gap: .7em; font-size: 12px; }
.vg .ui-card { box-shadow: var(--pv-shadow-md); }
.vg-row { display: flex; align-items: center; gap: .6em; }
.vg-row--between { justify-content: space-between; }
.vg-row--wrap { flex-wrap: wrap; }
.vg > .ui-toast, .vg > .ui-seg, .vg > .vg-bubble { justify-self: start; }
.vg-pdf { color: var(--pv-coral-500); font-size: 1.7em; line-height: 1; }
.vg-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55em .9em; margin-top: .7em; }
.vg-kv div { min-width: 0; }
.vg-kv span { display: block; color: var(--pv-subtle); font-size: .88em; }
.vg-kv b { display: block; color: var(--pv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-item { display: flex; align-items: center; gap: .65em; padding: .6em 0; border-top: 1px solid var(--pv-line); }
.vg-item:first-of-type { border-top: 0; }
.vg-item__main { min-width: 0; flex: 1; }
.vg-item__main b, .vg-item__main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-item__main b { color: var(--pv-ink); }
.vg-item__main small { color: var(--pv-subtle); }
.vg-time { width: 3.4em; flex: none; font-weight: 800; color: var(--pv-ink); font-variant-numeric: tabular-nums; }
.vg-doc-table { width: 100%; border-collapse: collapse; margin-top: .6em; }
.vg-doc-table th, .vg-doc-table td { padding: .45em .2em; border-bottom: 1px solid var(--pv-line); text-align: left; font-size: .95em; }
.vg-doc-table th { color: var(--pv-subtle); font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.vg-doc-table td:last-child, .vg-doc-table th:last-child { text-align: right; }
.vg-total { display: flex; justify-content: space-between; padding-top: .55em; font-weight: 800; color: var(--pv-ink); }
.vg-visits { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3em; margin-top: .5em; }
.vg-visits i { height: .7em; border-radius: .25em; background: var(--pv-green-200); }
.vg-visits i:first-child { background: var(--pv-green-500); }
.vg-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4em; }
.vg-week > div { display: grid; gap: .35em; align-content: start; }
.vg-week__day { text-align: center; font-weight: 800; color: var(--pv-muted); font-size: .9em; }
.vg-week__day.is-today { color: var(--pv-green-600); }
.vg-block { padding: .35em .4em; border-radius: .45em; background: var(--c-100); border-left: 3px solid var(--c-500); color: var(--pv-ink); font-weight: 700; font-size: .84em; line-height: 1.25; }
.vg-flag { display: inline-flex; align-items: center; gap: .3em; font-weight: 800; font-size: .88em; padding: .2em .55em; border-radius: .45em; background: var(--c-100); color: var(--c-700); }
.vg-bubble { padding: .6em .75em; border-radius: .9em .9em .9em .25em; background: #fff; border: 1px solid var(--pv-line); box-shadow: var(--pv-shadow-xs); max-width: 92%; }
.vg-bubble small { display: block; text-align: right; color: var(--pv-subtle); font-size: .8em; margin-top: .2em; }
.vg-bubble .bi-check2-all { color: #34B7F1; }
.vg-doc { display: inline-flex; align-items: center; gap: .45em; margin-top: .4em; padding: .4em .6em; border-radius: .6em; background: var(--pv-coral-50); border: 1px solid var(--pv-coral-100); color: var(--pv-coral-700); font-weight: 700; font-size: .92em; }
.vg-amount { font-size: 1.9em; font-weight: 800; color: var(--pv-ink); letter-spacing: -.02em; line-height: 1.1; }
.vg-block b { display: block; font-size: .92em; color: var(--c-700); }
.vg-sources { display: flex; flex-wrap: wrap; gap: .45em; }
.vg-sources span { display: inline-flex; align-items: center; gap: .4em; padding: .42em .75em; border-radius: 999px; background: var(--c-100); color: var(--c-700); font-weight: 700; }
.vg-sources b { color: var(--pv-ink); }
.vg-seg { display: flex; gap: .25em; height: .9em; }
.vg-seg i { display: block; flex: none; width: var(--w); border-radius: 999px; background: var(--c-500); }
.vg-seg-legend { display: flex; flex-wrap: wrap; gap: .3em 1em; margin-top: .65em; font-size: .92em; font-weight: 700; }
.vg-seg-legend span { display: inline-flex; align-items: center; gap: .4em; color: var(--pv-text); }
.vg-seg-legend span::before { content: ""; width: .65em; height: .65em; border-radius: 50%; background: var(--c-500); }
.vg-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3em; }
.vg-months span { display: grid; place-items: center; padding: .5em 0; border-radius: .5em; background: var(--pv-green-100); color: var(--pv-green-700); font-size: .8em; font-weight: 700; }
.vg-months .is-next { background: var(--pv-green-600); color: #fff; }
.vg-lines div { display: flex; justify-content: space-between; gap: 1em; padding: .5em 0; border-bottom: 1px dashed var(--pv-line); font-variant-numeric: tabular-nums; }
.vg-lines .is-total { border-bottom: 0; font-size: 1.25em; font-weight: 800; color: var(--pv-ink); }
.vg-aging, .vg-sev { display: grid; gap: .55em; }
.vg-aging div, .vg-sev div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; align-items: center; gap: .7em; font-weight: 600; }
.vg-aging i, .vg-sev i { display: block; width: var(--w); height: .7em; border-radius: 999px; background: var(--c-500); }
.vg-aging b, .vg-sev b { color: var(--pv-ink); font-variant-numeric: tabular-nums; }
.vg-photos3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.vg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.vg-kpis div { padding: .7em .8em; background: #fff; border: 1px solid var(--pv-line); border-radius: .9em; }
.vg-kpis span { display: block; color: var(--pv-muted); font-size: .86em; font-weight: 600; }
.vg-kpis b { display: block; color: var(--pv-ink); font-size: 1.3em; font-weight: 800; letter-spacing: -.02em; }
.vg-legend { display: flex; flex-wrap: wrap; gap: .3em .8em; font-size: .86em; font-weight: 700; }
.vg-legend span { display: inline-flex; align-items: center; gap: .35em; color: var(--pv-text); }
.vg-legend span::before { content: ""; width: .9em; height: .28em; border-radius: 9px; background: var(--c-500); }
.vg-chart { display: block; width: 100%; height: auto; }
.vg-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; }
.pv-out--ai, .pv-out--violet { --c-100: var(--pv-violet-100); --c-200: var(--pv-violet-200); --c-700: var(--pv-violet-700); background: var(--pv-violet-50); }
.pv-insp-area { display: grid; gap: .5em; padding: .7em; background: #fff; border: 1px solid var(--pv-line); border-radius: .9em; }
.pv-insp-area b { color: var(--pv-ink); }
.pv-insp-photo { aspect-ratio: 16 / 9; }

/* Certificate mockup */
.pv-certdoc { max-width: 380px; padding: .7em; font-size: 12.5px; background: #FFFDF6; border: 1px solid var(--pv-amber-200); border-radius: 16px; }
.pv-certdoc__inner { padding: 1.3em; text-align: center; border: 2px solid var(--pv-indigo-200); border-radius: 12px; outline: 1px solid var(--pv-amber-200); outline-offset: -7px; }
.pv-certdoc__seal { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--pv-amber-100); color: var(--pv-amber-700); font-size: 1.3em; }
.pv-certdoc__kicker { margin: .6em 0 0; font-size: .82em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pv-muted); }
.pv-certdoc__title { display: block; margin: .1em 0 .5em; font-size: 1.45em; letter-spacing: -.01em; color: var(--pv-indigo-700); }
.pv-certdoc__text { margin: 0 0 .9em; font-size: .95em; line-height: 1.5; color: var(--pv-text); }
.pv-certdoc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: .6em; text-align: left; background: #fff; border: 1px solid var(--pv-line); border-radius: .7em; }
.pv-certdoc__grid span { display: block; font-size: .82em; color: var(--pv-subtle); }
.pv-certdoc__grid b { color: var(--pv-ink); }
.pv-certdoc__foot { align-items: flex-end; margin-top: .9em; }
.pv-certdoc__foot .ui-sign { flex: 1; text-align: left; }
.pv-certdoc__qr { width: 4.6em; height: 4.6em; border: 1px solid var(--pv-line); }
.pv-verify { display: grid; justify-items: center; gap: .3em; text-align: center; }
.pv-verify__icon { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--pv-green-100); color: var(--pv-green-600); font-size: 1.4em; }

/* Technician app: colourful home screen and feature cards */
.pv-tfeat { background: var(--c-50); border-color: var(--c-100); }
.pv-tfeat:hover { border-color: var(--c-200); }
.pv-tapp__head { padding: .85em 1.2em 1.9em; background: var(--pv-green-600); color: #fff; }
.pv-tapp__brand { display: inline-flex; align-items: center; gap: .35em; font-weight: 800; font-size: 1.05em; }
.pv-tapp__brand .pv-glyph { width: 1.25em; height: 1.25em; }
.pv-tapp__bell { position: relative; font-size: 1.1em; }
.pv-tapp__bell::after { content: ""; position: absolute; top: .1em; right: -.15em; width: .5em; height: .5em; border-radius: 50%; background: #FFC94D; }
.pv-tapp__head small { display: block; margin-top: .7em; font-weight: 600; }
.pv-tapp__head b { display: block; font-size: 1.35em; line-height: 1.2; }
.pv-tapp__today { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin: -1.2em .9em 0; padding: .6em; background: #fff; border-radius: 1em; box-shadow: var(--pv-shadow-md); }
.pv-tapp__today div { text-align: center; }
.pv-tapp__today b { display: block; font-size: 1.4em; line-height: 1.1; color: var(--c-700); }
.pv-tapp__today span { font-size: .82em; font-weight: 600; color: var(--pv-muted); }
.pv-tapp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; padding: .9em; }
.pv-tapp__tile { display: flex; flex-direction: column; align-items: flex-start; gap: .55em; padding: .75em; border-radius: 1em; background: var(--c-100); color: var(--c-700); font-size: .95em; font-weight: 800; line-height: 1.2; }
.pv-tapp__ico { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .75em; background: var(--c-500); color: #fff; font-size: 1.05em; }
.pv-tapp__ico .pv-glyph { width: 1.2em; height: 1.2em; }

/* Phones drawn at a real phone's shape (9:19.5). Screens fill it; tab bars and closing buttons sit at the bottom. */
.ui-phone--tall { aspect-ratio: 9 / 19.5; display: flex; flex-direction: column; }
.ui-phone--tall > .ui-tabbar { margin-top: auto; }
.ui-phone--tall .ui-phone__body { flex: 1; display: flex; flex-direction: column; }
.ui-phone--tall .ui-phone__body > .ui-btn--block:last-child { margin-top: auto; }
.ui-phone--tall :is(.pv-tapp__grid, .pv-sapp__tiles) { flex: 1; }
/* WhatsApp chats: messages sit at the bottom above the message bar, as in the real app */
.ui-phone--tall .pv-wa__body { flex: 1; justify-content: flex-end; }
.pv-wa__input { display: flex; align-items: center; gap: .5em; padding: .45em .6em .75em; background: #EFEAE2; }
.pv-wa__field { flex: 1; display: flex; align-items: center; gap: .5em; padding: .6em .85em; border-radius: 999px; background: #fff; color: var(--pv-subtle); }
.pv-wa__field .bi-camera { margin-left: auto; }
.pv-wa__send { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; background: #0F7F43; color: #fff; }

/* Sales app phones: auto-reply activity and the home screen */
.ui-tabbar--4 { grid-template-columns: repeat(4, 1fr); }
.pv-sapp__bar { display: flex; align-items: center; gap: .7em; padding: .45em 1.1em .7em; color: var(--pv-ink); font-size: 1.05em; }
.pv-sapp__bar b { flex: 1; }
.pv-sapp__bar i { color: var(--pv-muted); }
.pv-sapp__me { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.pv-sapp__punch { position: relative; display: flex; align-items: center; gap: .6em; margin: -1.2em .9em 0; padding: .6em .7em; background: #fff; border-radius: 1em; box-shadow: var(--pv-shadow-md); }
.pv-sapp__punch b, .pv-sapp__step b { display: block; color: var(--pv-ink); }
.pv-sapp__punch small, .pv-sapp__step small { display: block; color: var(--pv-muted); font-size: .85em; }
.pv-sapp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; padding: .8em .9em 0; }
.pv-sapp__actions span { display: flex; align-items: center; justify-content: center; gap: .4em; padding: .65em .4em; border-radius: .8em; background: var(--c-500); color: #fff; font-size: .92em; font-weight: 800; white-space: nowrap; }
.pv-sapp__auto { margin: .6em .9em 0; padding: .6em .7em .65em; border: 1px solid var(--c-100); border-radius: .9em; background: var(--c-50); }
.pv-sapp__auto-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; color: var(--pv-ink); }
.pv-sapp__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: .5em; text-align: center; }
.pv-sapp__metrics b { display: block; color: var(--c-700); font-size: 1.3em; line-height: 1.15; }
.pv-sapp__metrics span { display: block; color: var(--pv-muted); font-size: .78em; line-height: 1.25; }
.pv-sapp__title { display: block; padding: .85em .9em 0; color: var(--pv-ink); font-weight: 800; }
.pv-sapp__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; padding: .55em .9em .9em; }
.pv-sapp__tiles div { display: flex; flex-direction: column; gap: .15em; padding: .6em .55em; border-radius: .8em; background: var(--c-100); }
.pv-sapp__tiles i { color: var(--c-700); font-size: 1.05em; }
.pv-sapp__tiles b { display: block; color: var(--c-700); font-size: 1.35em; line-height: 1.1; }
.pv-sapp__tiles span { display: block; color: var(--pv-ink); font-size: .78em; font-weight: 700; line-height: 1.2; }
.pv-sapp__sent { margin-left: auto; font-style: normal; font-weight: 800; color: var(--pv-green-600); }
.pv-sapp__sent::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .3em; border-radius: 50%; background: currentColor; }
.pv-sapp__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.pv-sapp__btns .bi-whatsapp { color: var(--pv-wa); }
.pv-sapp__call { display: flex; align-items: flex-start; gap: .6em; padding: .55em 0; border-top: 1px solid var(--pv-line); }
.pv-sapp__call:first-child { padding-top: .15em; border-top: 0; }
.pv-sapp__call > span:nth-child(2) { flex: 1; min-width: 0; }
.pv-sapp__call-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.pv-sapp__call b { overflow: hidden; color: var(--pv-ink); white-space: nowrap; text-overflow: ellipsis; }
.pv-sapp__call time { flex: none; color: var(--pv-subtle); font-size: .82em; font-weight: 700; }
.pv-sapp__call small { display: block; color: var(--pv-muted); font-size: .85em; }
.pv-sapp__call small em { font-style: normal; font-weight: 800; color: var(--pv-green-600); }
.pv-sapp__dots i { display: inline-block; width: .5em; height: .5em; margin-right: .3em; border-radius: 50%; background: var(--pv-green-500); }
.pv-sapp__dots i:not(:first-child) { margin-left: .7em; }
.pv-sapp__step { display: flex; align-items: center; gap: .6em; padding: .55em .6em; border: 1px solid var(--c-100); border-radius: .85em; background: var(--c-50); }
.pv-sapp__sms { padding: .55em .65em; border-radius: .85em .85em .85em .25em; background: #F1F4F2; }
.pv-sapp__sms p { margin: .3em 0 0; color: var(--pv-text); line-height: 1.4; }
.pv-sapp__via { display: flex; align-items: center; gap: .4em; color: var(--pv-muted); font-size: .85em; font-weight: 700; }
.pv-sapp__via--wa { padding: .5em .65em; border-radius: .85em; background: var(--pv-teal-50); color: var(--pv-teal-700); }
.pv-sapp__via--wa .bi-whatsapp { color: var(--pv-wa); }
.pv-sapp__via--wa .bi-check2-all { margin-left: auto; color: var(--pv-sky-500); }

/* Customer logos and testimonials (hidden until real content exists) */
.pv-logos { padding: 8px 0 56px; }
.pv-logos__head { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: 0 0 22px; }
.pv-logos__head .pv-logos__title { margin: 0; }
.pv-logos__head .pv-sample-tag { margin-left: 0; }
.pv-logos__title { margin: 0 0 22px; text-align: center; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pv-muted); }
.pv-logos__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 20px; margin: 0; padding: 0; }
.pv-logos__list li { display: grid; place-items: center; width: 168px; height: 66px; padding: 8px 14px; background: #fff; border: 1px solid var(--pv-line); border-radius: 14px; }
.pv-logos__list img { max-width: 100%; max-height: 44px; width: auto; height: auto; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.pv-logos__list li:hover img { filter: none; opacity: 1; }
.pv-sample-tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--pv-amber-100); color: var(--pv-amber-700); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.pv-testimonials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pv-quote { position: relative; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 28px; background: #fff; border: 1px solid var(--pv-line); border-top: 4px solid var(--c-500); border-radius: 22px; box-shadow: var(--pv-shadow-sm); }
.pv-quote__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--c-100); color: var(--c-700); font-size: 1.4rem; }
.pv-quote blockquote { margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--pv-text); }
.pv-quote blockquote p { margin: 0; }
.pv-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--pv-line-2); }
.pv-quote figcaption b { display: block; color: var(--pv-ink); }
.pv-quote figcaption small { display: block; color: var(--pv-muted); }
.pv-quote .ui-avatar { font-size: 14px; }
.pv-quote--sample::after { content: "Sample"; position: absolute; top: 18px; right: 18px; padding: 2px 10px; border-radius: 999px; background: var(--pv-amber-100); color: var(--pv-amber-700); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pv-segments { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.pv-segments__label { width: 100%; margin: 0 0 6px; text-align: center; font-weight: 600; color: var(--pv-muted); }

/* 11. Feature sections + mockups ------------------------------------------ */
.pv-feature__copy .pv-lead { margin-bottom: 0; }
.pv-feature__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.pv-minicard { padding: 14px; background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; }
.pv-minicard b { display: block; margin-top: 10px; color: var(--pv-ink); font-size: .95rem; line-height: 1.3; }
.pv-minicard > span:not(.pv-icon-tile) { display: block; margin-top: 4px; color: var(--pv-muted); font-size: .84rem; line-height: 1.45; }
.pv-float-toast { position: absolute; z-index: 3; }

/* CRM pipeline */
.pv-pipeline { font-size: 11px; }
.pv-pipeline__toolbar { display: flex; align-items: center; gap: .6em; padding: .9em 1em; border-bottom: 1px solid var(--pv-line); }
.pv-pipeline__cols { display: grid; grid-template-columns: repeat(4, minmax(11em, 1fr)); gap: .7em; padding: 1em; background: #FAFBFA; overflow: hidden; }
.pv-pipe-col { display: flex; flex-direction: column; gap: .6em; padding: .6em; border-radius: .9em; background: #F1F5F2; }
.pv-pipe-col__head { display: flex; align-items: center; gap: .45em; padding: .2em .3em; font-weight: 800; color: var(--pv-ink); }
.pv-pipe-col__head b { margin-left: auto; padding: .05em .55em; border-radius: 999px; background: #fff; color: var(--pv-muted); font-size: .9em; }
.pv-lead-card { display: grid; gap: .45em; min-width: 0; padding: .7em; background: #fff; border: 1px solid var(--pv-line); border-radius: .8em; box-shadow: var(--pv-shadow-xs); }
.pv-lead-card__top { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.pv-lead-card__top b { color: var(--pv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-lead-card__meta { color: var(--pv-subtle); font-size: .92em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-lead-card__name { color: var(--pv-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-lead-card__tags { display: flex; flex-wrap: wrap; gap: .3em; }
.pv-lead-card .ui-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pv-lead-card__foot .bi-check2-circle { color: var(--pv-green-600); font-size: 1.15em; }
.pv-lead-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .4em; padding-top: .45em; border-top: 1px dashed var(--pv-line); color: var(--pv-muted); font-size: .9em; }
.pv-lead-card__foot .ui-avatar { width: 2em; height: 2em; font-size: .78em; }
.pv-lead-card__amount { font-weight: 800; color: var(--pv-ink); }
.pv-lead-card.is-won { background: var(--pv-green-50); border-color: var(--pv-green-200); }
.pv-pipeline__toast { right: -14px; bottom: -22px; }
/* AMC contract (02) */
.pv-contract { font-size: 13px; }
.pv-contract .ui-seg { justify-self: start; }
.pv-contract__toast { right: -14px; bottom: -22px; }

/* Service calendar */
.pv-cal { font-size: 11.5px; }
.pv-cal__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .7em; padding: .9em 1em; border-bottom: 1px solid var(--pv-line); }
.pv-cal__month { font-weight: 800; color: var(--pv-ink); font-size: 1.15em; margin-right: auto; }
.pv-cal__grid { display: grid; grid-template-columns: repeat(6, minmax(8.6em, 1fr)); }
.pv-cal__day { display: flex; flex-direction: column; gap: .5em; min-height: 23em; padding: .7em .55em; border-right: 1px solid var(--pv-line); }
.pv-cal__day:last-child { border-right: 0; }
.pv-cal__day.is-today { background: var(--pv-green-50); }
.pv-cal__date { display: flex; align-items: baseline; gap: .4em; margin-bottom: .2em; font-weight: 700; color: var(--pv-muted); }
.pv-cal__date b { font-size: 1.4em; color: var(--pv-ink); }
.is-today .pv-cal__date b { color: var(--pv-green-600); }
.pv-job { display: grid; gap: .22em; padding: .5em .55em; border-radius: .65em; background: var(--c-50); border: 1px solid var(--c-100); border-left: 3px solid var(--c-500); }
.pv-job__time { display: flex; align-items: center; gap: .35em; font-size: .88em; font-weight: 800; color: var(--c-700); }
.pv-job__time svg { width: 1.3em; height: 1.3em; }
.pv-job__title { font-weight: 700; color: var(--pv-ink); line-height: 1.25; }
.pv-job__site { color: var(--pv-muted); font-size: .9em; line-height: 1.25; }
.pv-job__foot { display: flex; align-items: center; justify-content: space-between; margin-top: .15em; }
.pv-job .ui-avatar { width: 1.95em; height: 1.95em; font-size: .78em; border-width: 1.5px; }
.pv-job__flag { padding: .1em .45em; border-radius: .4em; font-size: .8em; font-weight: 800; background: var(--pv-coral-100); color: var(--pv-coral-700); }
.pv-job__flag--amber { background: var(--pv-amber-100); color: var(--pv-amber-700); }
.pv-job .bi-check-circle-fill { color: var(--pv-green-500); }
.pv-contracts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }

/* Technician app */
.pv-techapp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.pv-techapp__phones { display: flex; align-items: flex-end; gap: 22px; }
.pv-techapp__phones .ui-phone:last-child { margin-bottom: 44px; }
.pv-tfeats { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.pv-tfeat { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; transition: transform .25s var(--pv-ease), box-shadow .25s; }
.pv-tfeat:hover { transform: translateY(-3px); box-shadow: var(--pv-shadow-md); }
.pv-tfeat b { display: block; color: var(--pv-ink); font-size: .95rem; line-height: 1.3; }
.pv-tfeat > div > span { display: block; margin-top: 2px; color: var(--pv-muted); font-size: .84rem; line-height: 1.4; }
.pv-jobrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6em; padding: .65em; border: 1px solid var(--pv-line); border-radius: .85em; background: #fff; }
.pv-jobrow.is-next { border-color: var(--pv-blue-200); background: var(--pv-blue-50); }
.pv-jobrow__time { display: grid; place-items: center; width: 3.3em; padding: .3em 0; border-radius: .6em; background: #F1F5F2; font-weight: 800; color: var(--pv-ink); font-size: .92em; line-height: 1.2; text-align: center; }
.pv-jobrow b, .pv-jobrow small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-jobrow b { color: var(--pv-ink); }
.pv-jobrow small { color: var(--pv-subtle); }
.pv-jobrow__foot { display: flex; align-items: center; justify-content: space-between; gap: .4em; margin-top: .35em; }
.pv-app-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.pv-app-stats div { padding: .5em; border-radius: .7em; background: #F4F7F5; text-align: center; }
.pv-app-stats b { display: block; font-size: 1.35em; color: var(--pv-ink); line-height: 1.1; }
.pv-app-stats span { font-size: .85em; color: var(--pv-muted); font-weight: 600; }
.ui-app-head .pv-punch { display: inline-flex; align-items: center; gap: .45em; margin-top: .55em; padding: .35em .6em; border-radius: 999px; background: #fff; color: var(--pv-green-700); font-weight: 700; width: fit-content; font-size: .9em; }
.pv-chem-line { display: flex; align-items: center; gap: .5em; padding: .5em .6em; border-radius: .7em; background: var(--pv-coral-50); border: 1px solid var(--pv-coral-100); color: var(--pv-ink); font-weight: 600; }
.pv-chem-line svg { width: 1.4em; height: 1.4em; color: var(--pv-coral-700); }
.pv-chem-line b { margin-left: auto; }
.pv-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }

/* GPS map */
.pv-map { display: grid; grid-template-columns: 15.5em minmax(0, 1fr); font-size: 11.5px; }
.pv-map__side { display: flex; flex-direction: column; gap: .7em; padding: 1em; border-right: 1px solid var(--pv-line); background: #fff; }
.pv-map__counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.pv-map__counts div { padding: .45em; border-radius: .7em; background: var(--c-50); text-align: center; }
.pv-map__counts b { display: block; font-size: 1.3em; color: var(--c-700); line-height: 1.15; }
.pv-map__counts span { font-size: .84em; color: var(--pv-muted); font-weight: 600; }
.pv-tech { display: flex; align-items: center; gap: .6em; padding: .5em; border-radius: .8em; border: 1px solid var(--pv-line); }
.pv-tech.is-selected { border-color: var(--pv-sky-200); background: var(--pv-sky-50); }
.pv-tech .ui-avatar { position: relative; }
.pv-tech .ui-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: .8em; height: .8em; border-radius: 50%; border: 2px solid #fff; background: var(--dot, var(--pv-green-500)); }
.pv-tech .is-onsite { --dot: var(--pv-blue-500); }
.pv-tech .is-enroute { --dot: var(--pv-amber-500); }
.pv-tech .is-offline { --dot: #AAB7B0; }
.pv-tech__main { min-width: 0; flex: 1; }
.pv-tech__main b, .pv-tech__main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-tech__main b { color: var(--pv-ink); }
.pv-tech__main small { color: var(--pv-subtle); }
.pv-map__canvas { position: relative; min-height: 26em; background: #EEF6F0; overflow: hidden; }
.pv-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-map__pin-pulse { transform-box: fill-box; transform-origin: center; animation: pv-ping 2.4s var(--pv-ease) infinite; }
.pv-map__info { position: absolute; left: 4%; bottom: 5%; width: 16.5em; }
.pv-map__info .ui-card { box-shadow: var(--pv-shadow-md); }
.pv-stops { list-style: none; margin: .6em 0 0; padding: 0; display: grid; gap: .35em; }
.pv-stops li { display: flex; align-items: center; gap: .5em; font-size: .95em; }
.pv-stops li b { color: var(--pv-ink); }
.pv-stops li span:last-child { margin-left: auto; color: var(--pv-muted); font-weight: 600; white-space: nowrap; }
.pv-stopnum { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--pv-sky-700); color: #fff; font-weight: 800; font-size: .82em; }

/* Service report */
.pv-report { position: relative; z-index: 2; padding: 1.7em; font-size: 11.5px; background: #fff; border: 1px solid var(--pv-line); border-radius: 18px; box-shadow: var(--pv-shadow-lg); }
.pv-report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding-bottom: 1em; border-bottom: 2px solid var(--pv-violet-500); }
.pv-report__brand { display: flex; align-items: center; gap: .7em; }
.pv-report__logo { display: grid; place-items: center; width: 3.4em; height: 3.4em; border: 1.5px dashed var(--pv-line-2); border-radius: .8em; color: var(--pv-subtle); font-size: .78em; font-weight: 700; line-height: 1.1; text-align: center; }
.pv-report__brand b { display: block; color: var(--pv-ink); font-size: 1.15em; }
.pv-report__brand small { color: var(--pv-muted); }
.pv-report__title { text-align: right; }
.pv-report__title b { display: block; color: var(--pv-violet-700); font-size: 1.15em; letter-spacing: .06em; }
.pv-report__title small { color: var(--pv-muted); font-weight: 600; }
.pv-report__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em 1em; padding: 1em 0; border-bottom: 1px solid var(--pv-line); }
.pv-report__meta span { display: block; color: var(--pv-subtle); font-size: .88em; }
.pv-report__meta b { display: block; color: var(--pv-ink); }
.pv-report__sec { padding: .85em 0; border-bottom: 1px solid var(--pv-line); }
.pv-report__sec:last-child { border-bottom: 0; padding-bottom: 0; }
.pv-report__sec > .ui-label { margin-bottom: .5em; }
.pv-report__chips { display: flex; flex-wrap: wrap; gap: .4em; }
.pv-report__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2em; }
.pv-report__signs { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.pv-qr { width: 4em; height: 4em; flex: none; color: var(--pv-ink); background: #fff; border-radius: .4em; padding: .25em; }

/* Automation builder */
.pv-builder { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1em; font-size: 11.5px; }
.pv-canvas {
  position: relative; padding: 1.4em; border-radius: 18px; border: 1px solid var(--pv-line);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%2310241B' fill-opacity='.10'/%3E%3C/svg%3E");
  box-shadow: var(--pv-shadow-lg);
}
.pv-canvas__head { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-bottom: 1.1em; }
.pv-switch { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--pv-green-700); }
.pv-switch i { position: relative; width: 2.6em; height: 1.5em; border-radius: 999px; background: var(--pv-green-500); }
.pv-switch i::after { content: ""; position: absolute; top: .2em; right: .2em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; }
.pv-node { position: relative; display: flex; align-items: flex-start; gap: .75em; padding: .8em .9em; background: #fff; border: 1px solid var(--pv-line); border-radius: 1em; box-shadow: var(--pv-shadow-sm); }
.pv-node + .pv-node { margin-top: 1.7em; }
.pv-node + .pv-node::before { content: ""; position: absolute; left: 2.1em; top: calc(-1.7em - 1px); height: 1.7em; border-left: 2px dashed var(--pv-line-2); }
.pv-node + .pv-node::after { content: ""; position: absolute; left: calc(2.1em - 4px); top: -7px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--pv-line-2); }
.pv-node__body { min-width: 0; flex: 1; }
.pv-node__kind { display: block; font-size: .78em; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c-700); }
.pv-node__title { display: block; color: var(--pv-ink); font-weight: 700; font-size: 1.06em; }
.pv-node__sub { display: block; color: var(--pv-muted); }
.pv-node__msg { display: block; margin-top: .6em; padding: .65em .75em; border-radius: .2em .9em .9em .9em; background: #E7F8EE; color: var(--pv-text); }
.pv-var { padding: 0 .3em; border-radius: .3em; background: var(--pv-amber-100); color: var(--pv-amber-700); font-weight: 700; white-space: nowrap; }
.pv-preview { display: grid; gap: .8em; align-content: start; }
.pv-preview .ui-card { box-shadow: var(--pv-shadow-md); }
.pv-preview__big { font-size: 2.2em; font-weight: 800; color: var(--pv-ink); line-height: 1; letter-spacing: -.02em; }
.pv-sched { list-style: none; margin: .6em 0 0; padding: 0; display: grid; gap: .45em; }
.pv-sched li { display: grid; grid-template-columns: 3.8em minmax(0, 1fr); align-items: center; gap: .5em; }
.pv-sched span:first-child { padding: .2em .4em; border-radius: .4em; background: var(--pv-teal-50); color: var(--pv-teal-700); font-weight: 800; text-align: center; font-size: .9em; }
.pv-recipes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.pv-recipe { display: grid; gap: 8px; padding: 16px; background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; transition: transform .25s var(--pv-ease), box-shadow .25s; }
.pv-recipe:hover { transform: translateY(-3px); box-shadow: var(--pv-shadow-md); }
.pv-recipe__when { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; color: var(--pv-muted); letter-spacing: .02em; }
.pv-recipe__when i { color: var(--pv-amber-500); }
.pv-recipe b { color: var(--pv-ink); font-size: .95rem; line-height: 1.3; }
.pv-recipe b i { color: var(--pv-wa); }
.pv-recipe small { color: var(--pv-muted); font-size: .8rem; }
.pv-alerts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.pv-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--pv-line); border-radius: 14px; font-size: .9rem; }
.pv-alert b { display: block; color: var(--pv-ink); line-height: 1.3; }
.pv-alert > div > span { display: block; color: var(--pv-muted); font-size: .82rem; }
.pv-subhead { display: flex; align-items: center; gap: 10px; margin: 48px 0 0; font-size: 1.15rem; }

/* Accounting & GST */
.pv-inv { font-size: 11.5px; }
.pv-inv__switch { display: inline-flex; flex-wrap: wrap; gap: .3em; padding: .3em; margin-bottom: 1em; border-radius: 1em; background: #fff; border: 1px solid var(--pv-line); box-shadow: var(--pv-shadow-sm); }
.pv-inv__switch button {
  display: inline-flex; align-items: center; gap: .45em; padding: .6em 1em; border: 0; border-radius: .75em;
  background: transparent; font: inherit; font-size: 1.05em; font-weight: 700; color: var(--pv-muted); cursor: pointer;
}
.pv-inv__switch button[aria-pressed="true"] { background: var(--pv-indigo-100); color: var(--pv-indigo-700); }
.pv-inv__switch button:focus-visible { outline-offset: 1px; }
.pv-inv__doc { padding: 1.6em; background: #fff; border: 1px solid var(--pv-line); border-radius: 18px; box-shadow: var(--pv-shadow-lg); }
.pv-inv__doc[hidden] { display: none; }
.pv-inv__head { display: flex; justify-content: space-between; gap: 1em; padding-bottom: 1em; border-bottom: 2px solid var(--pv-indigo-500); }
.pv-inv__head b { display: block; color: var(--pv-ink); font-size: 1.15em; }
.pv-inv__head small { display: block; color: var(--pv-muted); }
.pv-inv__type { text-align: right; }
.pv-inv__type b { color: var(--pv-indigo-700); letter-spacing: .06em; }
.pv-inv__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; padding: 1em 0; }
.pv-inv__parties span { display: block; color: var(--pv-subtle); font-size: .88em; }
.pv-inv__parties b { color: var(--pv-ink); }
.pv-inv__table { width: 100%; border-collapse: collapse; }
.pv-inv__table th, .pv-inv__table td { padding: .55em .3em; border-bottom: 1px solid var(--pv-line); text-align: left; }
.pv-inv__table th { color: var(--pv-subtle); font-size: .82em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pv-inv__table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-inv__totals { display: grid; gap: .3em; margin: .9em 0 0 auto; max-width: 17em; }
.pv-inv__totals div { display: flex; justify-content: space-between; gap: 1em; font-variant-numeric: tabular-nums; }
.pv-inv__totals .is-total { padding-top: .45em; margin-top: .2em; border-top: 1px solid var(--pv-line); font-size: 1.2em; font-weight: 800; color: var(--pv-ink); }
.pv-inv__foot { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: 1em; padding-top: 1em; border-top: 1px dashed var(--pv-line-2); }
.pv-reportchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pv-reportchips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--pv-line); font-size: .84rem; font-weight: 700; color: var(--pv-ink); }
.pv-reportchips i { color: var(--pv-indigo-500); }
.pv-acc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.pv-acc-col :is(h3, h4) { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin-bottom: 4px; }
.pv-acc-col .pv-checks { margin-top: 12px; gap: 8px; font-size: .92rem; }

/* Inventory */
.pv-stock { font-size: 11.5px; }
.pv-stock__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.pv-chem { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8em; align-items: center; padding: .9em; background: #fff; border: 1px solid var(--pv-line); border-radius: 1em; box-shadow: var(--pv-shadow-sm); }
.pv-chem.is-low { border-color: var(--pv-coral-200); background: var(--pv-coral-50); }
.pv-chem.is-exp { border-color: var(--pv-amber-200); background: var(--pv-amber-50); }
.pv-bottle { position: relative; width: 2.5em; height: 3.6em; margin-top: .7em; border: 2px solid var(--c-500); border-radius: .55em .55em .75em .75em; background: #fff; overflow: hidden; }
.pv-bottle::before { content: ""; position: absolute; top: -.1em; left: 50%; width: 1.1em; height: .4em; transform: translateX(-50%); background: var(--c-500); border-radius: 0 0 .2em .2em; }
.pv-bottle i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 50%); background: var(--c-200); }
.pv-chem__name { display: block; color: var(--pv-ink); font-weight: 700; line-height: 1.25; }
.pv-chem__type { display: block; color: var(--pv-subtle); font-size: .9em; }
.pv-chem__qty { display: flex; align-items: baseline; gap: .3em; margin-top: .35em; }
.pv-chem__qty b { font-size: 1.55em; font-weight: 800; color: var(--pv-ink); letter-spacing: -.02em; }
.pv-chem__qty span { color: var(--pv-muted); font-weight: 600; }
.pv-chem__flag { display: inline-flex; margin-top: .3em; padding: .12em .5em; border-radius: .4em; font-size: .82em; font-weight: 800; background: var(--c-100); color: var(--c-700); }
.pv-stock__row { display: grid; grid-template-columns: 1.15fr 1fr; gap: .8em; margin-top: .8em; }
.pv-stock__row .ui-card { box-shadow: var(--pv-shadow-sm); }
.pv-bal { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; margin-top: .6em; }
.pv-bal div { padding: .45em; border-radius: .7em; background: var(--c-50); text-align: center; }
.pv-bal b { display: block; font-size: 1.3em; color: var(--c-700); }
.pv-bal span { font-size: .84em; color: var(--pv-muted); font-weight: 600; }

/* HR & payroll */
.pv-hr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .9em; font-size: 12.5px; }
.pv-hr__team { grid-column: 1 / -1; }
.pv-hr .ui-card { box-shadow: var(--pv-shadow-md); }
.pv-att { display: grid; grid-template-columns: repeat(16, 1fr); gap: .3em; margin-top: .7em; }
.pv-att i { aspect-ratio: 1; border-radius: .35em; background: var(--pv-green-200); }
.pv-att i.a { background: var(--pv-coral-200); }
.pv-att i.h { background: var(--pv-amber-200); }
.pv-att i.l { background: var(--pv-sky-200); }
.pv-att i.w { background: #E6ECE8; }
.pv-legend { display: flex; flex-wrap: wrap; gap: .4em 1em; margin-top: .7em; color: var(--pv-muted); font-size: .92em; }
.pv-legend span { display: inline-flex; align-items: center; gap: .35em; }
.pv-legend i { width: .8em; height: .8em; border-radius: .2em; background: var(--pv-green-200); }
.pv-legend i.h { background: var(--pv-amber-200); }
.pv-legend i.l { background: var(--pv-sky-200); }
.pv-legend i.a { background: var(--pv-coral-200); }
.pv-legend i.w { background: #E6ECE8; }
.pv-payslip div { display: flex; justify-content: space-between; gap: 1em; padding: .38em 0; border-bottom: 1px dashed var(--pv-line); font-variant-numeric: tabular-nums; }
.pv-payslip div:last-child { border-bottom: 0; }
.pv-payslip .is-net { font-size: 1.2em; font-weight: 800; color: var(--pv-ink); border-top: 1px solid var(--pv-line); border-bottom: 0; margin-top: .3em; padding-top: .55em; }
.pv-payslip .is-cut { color: var(--pv-coral-700); }

/* Analytics */
.pv-analytics { font-size: 11.5px; }
.pv-analytics__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; }
.pv-akpi { padding: .85em; background: #fff; border: 1px solid var(--pv-line); border-radius: 1em; }
.pv-akpi span { display: block; color: var(--pv-muted); font-weight: 600; }
.pv-akpi b { display: block; margin-top: .15em; color: var(--pv-ink); font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pv-akpi small { display: inline-flex; align-items: center; gap: .2em; margin-top: .25em; padding: .05em .45em; border-radius: .4em; background: var(--pv-green-100); color: var(--pv-green-700); font-weight: 800; }
.pv-analytics__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .7em; margin-top: .7em; }
.pv-bars { display: flex; align-items: flex-end; gap: .8em; height: 11em; padding: .6em .4em 0; border-bottom: 1px solid var(--pv-line); }
.pv-bars div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3em; height: 100%; }
.pv-bars i { display: block; width: 100%; max-width: 2.6em; border-radius: .45em .45em .15em .15em; background: var(--pv-violet-200); transform-origin: bottom; }
.pv-bars div:last-child i { background: var(--pv-violet-500); }
.pv-bars b { font-size: .86em; color: var(--pv-muted); font-weight: 700; }
.pv-bars-x { display: flex; gap: .8em; padding: .35em .4em 0; }
.pv-bars-x span { flex: 1; text-align: center; color: var(--pv-subtle); font-weight: 700; font-size: .88em; }
.js .pv-analytics .pv-bars i { transform: scaleY(.05); transition: transform .9s var(--pv-ease); }
.js .pv-analytics.is-in .pv-bars i { transform: scaleY(1); }
.pv-leader { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.pv-leader li { display: grid; grid-template-columns: 1.9em auto minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .5em .55em; border-radius: .8em; border: 1px solid var(--pv-line); }
.pv-leader li:first-child { background: var(--pv-amber-50); border-color: var(--pv-amber-200); }
.pv-rank { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: #EEF3F0; font-weight: 800; color: var(--pv-ink); }
li:first-child > .pv-rank { background: var(--pv-amber-500); color: var(--pv-ink); }
.pv-leader__main b, .pv-leader__main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-leader__main b { color: var(--pv-ink); }
.pv-leader__main small { color: var(--pv-subtle); }
.pv-leader__rate { font-weight: 800; color: var(--pv-green-700); }

/* AI */
.pv-ai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pv-ai__card { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius-xl); }
.pv-ai__card h3 { margin: 14px 0 8px; font-size: 1.3rem; }
.pv-ai__card > p { color: var(--pv-muted); }
.pv-ai__ui { flex: 1; align-content: start; margin-top: 22px; padding: 1.1em; font-size: 11.5px; background: var(--c-50); border: 1px solid var(--c-100); border-radius: 18px; display: grid; gap: .7em; }
.pv-field { padding: .6em .75em; background: #fff; border: 1px solid var(--pv-line); border-radius: .7em; }
.pv-field .ui-label { margin-bottom: .2em; }
.pv-field p { margin: 0; color: var(--pv-ink); font-weight: 600; }
.pv-airow { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.pv-out { padding: .75em .85em; background: #fff; border: 1px solid var(--c-200); border-radius: .8em; }
.pv-out .ui-label { color: var(--c-700); margin-bottom: .3em; }
.pv-out p { margin: 0; color: var(--pv-text); line-height: 1.5; }
.pv-langs { display: flex; flex-wrap: wrap; gap: .35em; }
.pv-lang { display: inline-flex; align-items: center; padding: .3em .65em; border-radius: 999px; background: #fff; border: 1px solid var(--pv-line); font-weight: 700; color: var(--pv-ink); font-size: 1.02em; }
.pv-lang.is-on { background: var(--c-700); border-color: var(--c-700); color: #fff; }
.pv-sits { display: flex; flex-wrap: wrap; gap: .35em; }
.pv-sit { padding: .3em .65em; border-radius: 999px; background: #fff; border: 1px solid var(--pv-line); font-weight: 600; color: var(--pv-muted); }
.pv-sit.is-on { border-color: var(--c-500); color: var(--c-700); background: var(--c-100); font-weight: 700; }
.pv-ai__review { display: flex; align-items: center; gap: .5em; color: var(--pv-muted); font-weight: 600; }
.pv-ai__review i { color: var(--pv-green-600); }

/* 12. Product tour -------------------------------------------------------- */
.pv-tour__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.pv-tour__tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid var(--pv-line); border-radius: 999px; background: #fff;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--pv-text); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.pv-tour__tab i { color: var(--c-700); }
.pv-tour__tab:hover { border-color: var(--c-200); background: var(--c-50); }
.pv-tour__tab.active { background: var(--c-100); border-color: var(--c-200); color: var(--c-700); }
.pv-tour__frame { max-width: 1040px; margin: 0 auto; }
.pv-tour__frame + .pv-tour__caption, .pv-tour__frame figcaption { margin-bottom: 0; }
.pv-tour__frame img { display: block; width: 100%; height: auto; background: #F5F8F6; }
.pv-tour__caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; max-width: 1040px; margin: 16px auto 0; color: var(--pv-muted); font-size: .9rem; }
.pv-tour__caption strong { color: var(--pv-ink); }
.pv-tour__links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.pv-tour__links > a:not(.pv-link) { color: var(--pv-muted); font-weight: 600; text-decoration: none; }
.pv-tour__links > a:not(.pv-link):hover { color: var(--pv-green-700); text-decoration: underline; }
.pv-tour__hint { display: none; align-items: center; gap: 6px; color: var(--pv-muted); font-weight: 600; }
.pv-tour__scroll { display: block; }

/* Customer experience */
.pv-cx { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.pv-cx__list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.pv-touch { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; }
.pv-touch b { display: block; color: var(--pv-ink); font-size: .95rem; line-height: 1.3; }
.pv-touch > div > span { display: block; margin-top: 2px; color: var(--pv-muted); font-size: .84rem; line-height: 1.4; }
.pv-wa { width: 300px; font-size: 11.5px; }
.pv-wa__head { display: flex; align-items: center; gap: .6em; padding: .7em 1em; background: #fff; border-bottom: 1px solid var(--pv-line); }
.pv-wa__head b { display: flex; align-items: center; gap: .3em; color: var(--pv-ink); }
.pv-wa__head b i { color: var(--pv-wa); }
.pv-wa__head small { display: block; color: var(--pv-subtle); }
.pv-wa__body { display: flex; flex-direction: column; gap: .55em; min-height: 33em; padding: .9em .8em 1.1em; background: #EFEAE2; }
.pv-wa__day { align-self: center; padding: .2em .7em; border-radius: .5em; background: #fff; color: var(--pv-muted); font-size: .85em; font-weight: 700; box-shadow: var(--pv-shadow-xs); }
.pv-wa__msg { position: relative; max-width: 86%; padding: .5em .65em .35em; border-radius: .2em .85em .85em .85em; background: #fff; box-shadow: 0 1px 1px rgba(16, 36, 27, .08); color: var(--pv-ink); line-height: 1.42; }
.pv-wa__msg--out { align-self: flex-end; border-radius: .85em .2em .85em .85em; background: #D9FDD3; }
.pv-wa__msg small { display: block; margin-top: .1em; text-align: right; color: #5F6E67; font-size: .82em; }
.pv-wa__msg small .bi-check2-all { color: #34B7F1; }
.pv-wa__file { display: flex; align-items: center; gap: .5em; margin-bottom: .35em; padding: .55em .6em; border-radius: .6em; background: #F2F5F3; font-weight: 700; }
.pv-wa__file i { color: var(--pv-coral-500); font-size: 1.4em; }
.pv-wa__file span { display: block; color: var(--pv-subtle); font-weight: 600; font-size: .88em; }

/* Daily report */
.pv-dr__label { margin: 28px 0 10px; color: var(--pv-subtle); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pv-dr__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pv-dr__chips li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; background: #fff; border: 1px solid var(--c-200); border-radius: 999px; color: var(--pv-ink); font-size: .86rem; font-weight: 700; line-height: 1.2; transition: transform .2s var(--pv-ease), border-color .2s; }
.pv-dr__chips li:hover { transform: translateY(-2px); border-color: var(--c-500); }
.pv-dr__chips li > i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-100); color: var(--c-700); font-size: .75rem; }
.pv-dr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
/* A PDF page, with a second sheet peeking out behind it */
.pv-dr__pdf { padding: 1.3em 1.2em 1.1em; font-size: 10.5px; background: #fff; border: 1px solid var(--pv-line); border-radius: .9em; box-shadow: .55em .55em 0 -1px #fff, .55em .55em 0 0 var(--pv-line), var(--pv-shadow-md); }
.pv-dr__pdfhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding-bottom: .8em; border-bottom: 2px solid var(--pv-teal-500); }
.pv-dr__pdfhead b { display: block; color: var(--pv-ink); font-size: 1.35em; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.pv-dr__pdfhead small { display: block; margin-top: .2em; color: var(--pv-subtle); font-weight: 600; }
.pv-dr__pdftag { display: inline-flex; align-items: center; gap: .3em; flex: none; padding: .2em .55em; border-radius: .45em; background: var(--pv-coral-100); color: var(--pv-coral-700); font-size: .9em; font-weight: 800; }
.pv-dr__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; margin-top: .9em; }
.pv-dr__kpi { padding: .65em .75em; background: var(--c-50); border: 1px solid var(--c-100); border-radius: .75em; }
.pv-dr__kpi span, .pv-dr__kpi small { display: block; color: var(--pv-muted); font-weight: 600; }
.pv-dr__kpi span { font-weight: 700; }
.pv-dr__kpi b { display: block; margin-top: .1em; color: var(--c-700); font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pv-dr__sched { margin-top: 1em; }
.pv-dr__schedhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .3em; }
.pv-dr__schedhead b { color: var(--pv-ink); font-size: 1.08em; }
.pv-dr__schedhead span, .pv-dr__more { color: var(--pv-subtle); font-weight: 600; }
.pv-dr__row { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .5em 0; border-top: 1px solid var(--pv-line); }
.pv-dr__row > span:first-child { min-width: 0; }
.pv-dr__row b { display: block; color: var(--pv-ink); }
.pv-dr__row small { display: block; overflow: hidden; color: var(--pv-subtle); white-space: nowrap; text-overflow: ellipsis; }
.pv-dr__tech { flex: none; color: var(--pv-text); font-weight: 700; }
.pv-dr__more { padding-top: .5em; border-top: 1px solid var(--pv-line); }
.pv-dr__phone { width: 26em; max-width: 100%; font-size: 10.5px; }
.pv-dr__chat { min-height: 0; }
.pv-dr__msg { max-width: 92%; }
.pv-dr__msg p { margin: 0 0 .65em; }
.pv-dr__msg p:last-of-type { margin-bottom: 0; }
.pv-dr__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.pv-dr-ops { margin-top: clamp(56px, 7vw, 88px); }
.pv-dr-ops__head { margin-bottom: 20px; }
.pv-dr-ops__head h3 { margin: 0; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); }
.pv-dr-ops__head p { margin: 6px 0 0; color: var(--pv-muted); }

/* More tools */
.pv-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pv-tool { padding: 20px; background: #fff; border: 1px solid var(--pv-line); border-radius: 18px; transition: transform .25s var(--pv-ease), box-shadow .25s, border-color .25s; }
.pv-tool:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow-md); border-color: var(--c-200); }
.pv-tool :is(h3, h4) { margin: 14px 0 6px; font-size: 1.02rem; }
.pv-tool p { margin: 0; color: var(--pv-muted); font-size: .9rem; line-height: 1.55; }

/* Solutions: one card per workflow, each linking to its own page */
.pv-solutions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pv-solution {
  display: flex; flex-direction: column; padding: 24px;
  background: #fff; border: 1px solid var(--pv-line); border-top: 4px solid var(--c-500); border-radius: 22px;
  transition: transform .25s var(--pv-ease), box-shadow .25s;
}
.pv-solution:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow-md); }
.pv-solution h3 { margin: 16px 0 8px; font-size: 1.15rem; }
.pv-solution p { margin: 0 0 18px; color: var(--pv-muted); font-size: .94rem; line-height: 1.6; }
.pv-solution .pv-link { margin-top: auto; }

/* Built with the industry */
.pv-trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.pv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv-stat { padding: 22px; background: var(--c-50); border: 1px solid var(--c-100); border-radius: 22px; }
.pv-stat b { display: block; color: var(--c-700); font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.pv-stat span { display: block; margin-top: 6px; color: var(--pv-text); font-size: .92rem; line-height: 1.45; }
.pv-services { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 56px; justify-content: center; }
.pv-service { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 9px; border-radius: 999px; background: var(--c-50); border: 1px solid var(--c-100); color: var(--pv-ink); font-weight: 700; font-size: .9rem; }
.pv-service svg, .pv-service i { width: 22px; height: 22px; color: var(--c-700); font-size: 1rem; display: grid; place-items: center; }
.pv-services__label { width: 100%; text-align: center; margin: 0 0 6px; color: var(--pv-muted); font-weight: 600; }
.pv-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }

/* 13. Pricing ------------------------------------------------------------- */
.pv-pricing { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 24px; align-items: start; }
.pv-plan { position: relative; }
@media (min-width: 992px) { .pv-plan { position: sticky; top: calc(var(--pv-header-h) + 28px); } }
.pv-plan { padding: clamp(26px, 3.5vw, 42px); background: #fff; border: 2px solid var(--pv-green-600); border-radius: var(--pv-radius-xl); box-shadow: var(--pv-shadow-lg); }
.pv-plan__badge { position: absolute; top: -15px; left: clamp(22px, 3vw, 38px); display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--pv-amber-200); color: #5A3B00; font-size: .78rem; font-weight: 800; letter-spacing: .03em; }
.pv-plan__name { margin: 4px 0 2px; font-size: 1.25rem; }
.pv-plan__desc { margin: 0; color: var(--pv-muted); }
.pv-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 22px 0 6px; }
.pv-price__amount { color: var(--pv-ink); font-size: clamp(2.7rem, 2rem + 2.6vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.pv-price__term { color: var(--pv-muted); font-weight: 700; }
.pv-price__day { margin: 0; color: var(--pv-green-700); font-weight: 700; font-size: .92rem; }
.pv-timeline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 24px 0; }
.pv-timeline__box { padding: 14px 16px; border-radius: 16px; background: var(--pv-soft); border: 1px solid var(--pv-line); }
.pv-timeline__box--next { background: var(--pv-green-50); border-color: var(--pv-green-200); }
.pv-timeline__box small { display: block; color: var(--pv-muted); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pv-timeline__box b { display: block; margin-top: 2px; color: var(--pv-ink); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.pv-timeline__box span { display: block; color: var(--pv-muted); font-size: .84rem; line-height: 1.4; }
.pv-timeline > i { color: var(--pv-green-600); font-size: 1.3rem; }
.pv-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 0 0 26px; padding: 18px 0; border-block: 1px solid var(--pv-line); }
.pv-glance div { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.pv-glance dt { color: var(--pv-muted); font-weight: 500; }
.pv-glance dd { margin: 0; color: var(--pv-ink); font-weight: 700; text-align: right; }
.pv-plan__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-plan__fine { margin: 16px 0 0; color: var(--pv-muted); font-size: .84rem; line-height: 1.55; }
.pv-plan__fine + .pv-plan__fine { margin-top: 6px; }
.pv-validity {
  display: inline-flex; align-items: flex-start; gap: 8px; margin: 18px auto 0; padding: 8px 14px;
  border-radius: 14px; background: var(--pv-amber-100); color: var(--pv-amber-700);
  font-size: .9rem; font-weight: 700; line-height: 1.45; text-align: left;
}
.pv-validity i { margin-top: 1px; }
.pv-price__label { margin: 22px 0 2px; color: var(--pv-muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pv-price__label + .pv-price { margin-top: 0; }
.pv-price__renew {
  display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 14px; background: var(--pv-green-50); border: 1px solid var(--pv-green-200);
  color: var(--pv-text); font-size: .94rem; line-height: 1.5;
}
.pv-price__renew i { margin-top: 2px; color: var(--pv-green-600); }
.pv-price__renew b { color: var(--pv-ink); font-weight: 800; }
.pv-price__users { margin: 14px 0 0; color: var(--pv-ink); font-weight: 700; }
.pv-plan__perk { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 24px; color: var(--pv-muted); font-size: .92rem; }
.pv-plan__perk i { margin-top: 2px; color: var(--pv-amber-500); }
.pv-included__title { margin: 0 0 14px; color: var(--pv-ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.pv-included__key { list-style: none; display: grid; gap: 8px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px dashed var(--pv-line-2); }
.pv-included__key li { display: flex; align-items: center; gap: 9px; color: var(--pv-ink); }
.pv-included__key i { color: var(--pv-green-600); font-size: 1.05rem; }
.pv-included__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0; padding: 0; font-size: .89rem; line-height: 1.4; }
.pv-included__list li { display: flex; gap: 7px; }
.pv-included__list li i { color: var(--pv-green-600); }
/* Optional add-on (#additional_plans) */
.pv-extra {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  margin-top: 24px; padding: clamp(24px, 3.5vw, 40px);
  background: var(--c-50); border: 1px solid var(--c-100); border-radius: var(--pv-radius-xl);
}
.pv-extra__title { margin: 16px 0 8px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.03em; }
.pv-extra__intro p { margin: 0; color: var(--pv-muted); }
.pv-extra__card { padding: 24px; background: #fff; border: 1px solid var(--pv-line); border-radius: 22px; box-shadow: var(--pv-shadow-sm); }
.pv-extra__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.pv-extra__head h3 { margin: 0; font-size: 1.15rem; }
.pv-extra__price { margin: 0; color: var(--pv-ink); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.pv-extra__price span { color: var(--pv-muted); font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.pv-extra .pv-checks { margin-top: 16px; gap: 9px; font-size: .94rem; }
.pv-included { padding: clamp(22px, 3vw, 30px); background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius-xl); }
.pv-included__group + .pv-included__group { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--pv-line-2); }
.pv-included__group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c-700); }
.pv-included__group ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; padding: 0; font-size: .89rem; line-height: 1.4; }
.pv-included__group li { display: flex; gap: 7px; }
.pv-included__group li i { color: var(--pv-green-600); }
.pv-included__more { display: none; }
.pv-addon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 18px; padding: 20px 22px; background: var(--pv-teal-50); border: 1px solid var(--pv-teal-100); border-radius: 22px; }
.pv-addon h3 { margin: 0; font-size: 1.05rem; }
.pv-addon p { margin: 2px 0 0; color: var(--pv-muted); font-size: .88rem; line-height: 1.5; }
.pv-addon__price { text-align: right; white-space: nowrap; }
.pv-addon__price b { display: block; color: var(--pv-ink); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.pv-addon__price span { color: var(--pv-muted); font-size: .84rem; font-weight: 600; }
.pv-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.pv-promise div { display: flex; align-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--pv-line); border-radius: 16px; font-weight: 700; font-size: .9rem; color: var(--pv-ink); line-height: 1.35; }

/* Contact (#contact_us) */
.pv-contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.pv-contact__form { padding: clamp(22px, 3.5vw, 36px); background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-radius-xl); box-shadow: var(--pv-shadow-md); }
.pv-contact__intro { margin: 0 0 18px; color: var(--pv-ink); font-weight: 700; }
.pv-contact__call { margin: 14px 0 0; text-align: center; color: var(--pv-muted); font-size: .92rem; }
.pv-contact__call a { color: var(--pv-green-700); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pv-contact__call a:hover { text-decoration: underline; }
.pv-contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv-reach { display: flex; flex-direction: column; padding: 20px; background: var(--c-50); border: 1px solid var(--c-100); border-radius: 20px; }
.pv-reach h3 { margin: 14px 0 4px; font-size: 1.02rem; }
.pv-reach p { margin: 0 0 14px; color: var(--pv-muted); font-size: .9rem; }
.pv-reach .pv-link { margin-top: auto; font-size: .92rem; }

/* FAQ */
.pv-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.pv-faq__side { position: sticky; top: calc(var(--pv-header-h) + 24px); }
.pv-help { margin-top: 28px; padding: 22px; background: var(--pv-cream); border: 1px solid #F3E6C2; border-radius: 22px; }
.pv-help .pv-help__title { margin: 0 0 4px; color: var(--pv-ink); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.pv-help p { color: var(--pv-muted); font-size: .9rem; margin-bottom: 14px; }
.pv-help ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.pv-help a { display: flex; align-items: center; gap: 10px; color: var(--pv-ink); font-weight: 700; text-decoration: none; font-size: .94rem; }
.pv-help a:hover { color: var(--pv-green-700); }
.pv-help a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--pv-line); color: var(--pv-green-600); }
.pv-help a .bi-whatsapp { color: var(--pv-wa); }
.pv-accordion {
  --bs-accordion-border-color: var(--pv-line);
  --bs-accordion-border-radius: 18px;
  --bs-accordion-inner-border-radius: 17px;
  --bs-accordion-btn-padding-x: 22px;
  --bs-accordion-btn-padding-y: 19px;
  --bs-accordion-body-padding-x: 22px;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-bg: #fff;
  --bs-accordion-active-color: var(--pv-green-700);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-color: var(--pv-ink);
}
.pv-accordion .accordion-item { margin-bottom: 10px; border: 1px solid var(--pv-line); border-radius: 18px !important; overflow: hidden; }
.pv-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--pv-green-200); box-shadow: var(--pv-shadow-sm); }
.pv-accordion .accordion-header { margin: 0; }
.pv-accordion .accordion-button { font-weight: 700; font-size: 1.01rem; line-height: 1.4; gap: 12px; }
.pv-accordion .accordion-button:not(.collapsed) { box-shadow: none; }
.pv-accordion .accordion-button:focus-visible { outline: 3px solid var(--pv-focus); outline-offset: -3px; }
.pv-accordion .accordion-body { padding-bottom: 20px; color: var(--pv-muted); line-height: 1.7; }
.pv-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* Final CTA */
.pv-final {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 32px;
  padding: clamp(32px, 6vw, 72px); background: var(--pv-amber-100); border: 1px solid var(--pv-amber-200); border-radius: 34px;
}
.pv-final h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -.035em; margin-bottom: 16px; }
.pv-final p { color: #4B4026; font-size: 1.08rem; max-width: 52ch; }
.pv-final__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pv-final__checks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; font-weight: 700; font-size: .9rem; color: var(--pv-ink); }
.pv-final__checks i { color: var(--pv-green-600); margin-right: 6px; }
.pv-final .pv-final__note { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; color: var(--pv-ink); font-size: .92rem; font-weight: 700; }
.pv-final__note i { color: var(--pv-green-600); }
.pv-final__art { position: relative; display: flex; justify-content: center; }
.pv-final__glyphs { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pv-amber-700); opacity: .12; pointer-events: none; }
.pv-final .ui-phone { transform: rotate(4deg); }
.pv-final .bi-file-earmark-pdf-fill { color: var(--pv-coral-500); }

/* 14. Footer --------------------------------------------------------------- */
.pv-footer { position: relative; margin-top: 0; padding: 72px 0 28px; background: var(--pv-soft); border-top: 1px solid var(--pv-line); }
.pv-footer__trail { position: absolute; top: -12px; left: 0; right: 0; height: 24px; color: var(--pv-amber-700); opacity: .55; pointer-events: none; }
.pv-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
.pv-footer__brand img { height: 38px; width: auto; }
.pv-footer__brand p { margin: 16px 0 18px; color: var(--pv-muted); font-size: .92rem; max-width: 40ch; }
.pv-footer__brand strong { color: var(--pv-ink); }
.pv-footer__title { margin: 6px 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pv-ink); }
.pv-footer ul { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
.pv-footer a { color: var(--pv-muted); text-decoration: none; font-size: .92rem; font-weight: 500; }
.pv-footer a:hover { color: var(--pv-green-700); text-decoration: underline; text-underline-offset: 3px; }
.pv-contact-list a { display: inline-flex; align-items: center; gap: 9px; color: var(--pv-ink); font-weight: 700; }
.pv-contact-list i { color: var(--pv-green-600); }
.pv-contact-list .bi-whatsapp { color: var(--pv-wa); }
.pv-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--pv-line); color: var(--pv-muted); font-size: .86rem; }
.pv-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pv-footer__bottom a { font-size: .86rem; }

/* Demo modal */
.pv-modal .modal-content { border: 0; border-radius: 26px; box-shadow: var(--pv-shadow-lg); overflow: hidden; }
.pv-modal .modal-body { padding: 0; }
.pv-modal__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.pv-modal__side { padding: 32px 28px; background: var(--pv-green-50); border-right: 1px solid var(--pv-green-100); }
.pv-modal__side .pv-modal__title { margin-bottom: 8px; color: var(--pv-ink); font-size: 1.45rem; font-weight: 800; letter-spacing: -.022em; line-height: 1.18; }
.pv-modal__side p { color: var(--pv-muted); font-size: .92rem; }
.pv-modal__side .pv-checks { margin-top: 18px; font-size: .92rem; gap: 10px; }
.pv-modal__alt { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--pv-green-200); display: grid; gap: 10px; font-size: .92rem; }
.pv-modal__alt a { display: inline-flex; align-items: center; gap: 9px; color: var(--pv-ink); font-weight: 700; text-decoration: none; }
.pv-modal__alt a:hover { color: var(--pv-green-700); }
.pv-modal__alt .bi-whatsapp { color: var(--pv-wa); }
.pv-modal__form { position: relative; padding: 32px 28px 28px; }
.pv-modal__close { position: absolute; top: 14px; right: 14px; }
/* Form fields: the demo modal and the contact section share these */
.pv-form .form-label { font-weight: 700; font-size: .86rem; color: var(--pv-ink); margin-bottom: 6px; }
.pv-form .form-control, .pv-form .form-select { min-height: 48px; border-radius: 12px; border-color: var(--pv-line-2); font-size: .95rem; color: var(--pv-ink); }
.pv-form textarea.form-control { min-height: 92px; }
.pv-form .form-control:focus, .pv-form .form-select:focus { border-color: var(--pv-green-500); box-shadow: 0 0 0 3px rgba(24, 160, 103, .2); }
.pv-form .form-control.is-invalid, .pv-form .form-select.is-invalid { border-color: var(--pv-coral-500); }
.pv-form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: .92rem; font-weight: 600; }
.pv-form-status.is-ok { display: block; background: var(--pv-green-50); color: var(--pv-green-700); border: 1px solid var(--pv-green-200); }
.pv-form-status.is-err { display: block; background: var(--pv-coral-50); color: var(--pv-coral-700); border: 1px solid var(--pv-coral-200); }
.pv-form-status a { font-weight: 800; }
.pv-modal__note { margin: 14px 0 0; color: var(--pv-text); font-size: .88rem; text-align: center; }
.pv-modal__privacy { margin: 12px 0 0; color: var(--pv-muted); font-size: .8rem; }

/* Cookie notice (wording carried over from the previous page) */
.pv-cookie {
  position: fixed; left: 16px; bottom: 16px; z-index: 1035;
  width: min(420px, calc(100vw - 32px)); padding: 18px 20px; margin-bottom: env(safe-area-inset-bottom);
  background: #fff; border: 1px solid var(--pv-line); border-radius: 18px; box-shadow: var(--pv-shadow-lg);
}
.pv-cookie[hidden] { display: none; }
.pv-cookie__title { margin: 0 0 6px; font-size: 1rem; }
.pv-cookie p { margin: 0 0 12px; color: var(--pv-muted); font-size: .86rem; line-height: 1.55; }
.pv-cookie a { color: var(--pv-green-700); font-weight: 700; }
/* On phones the notice sits where the sticky CTA bar would; the bar waits until it is accepted */
.has-cookie .pv-mbar { display: none; }
/* On desktop it sits bottom right, over the product visual instead of the hero buttons */
@media (min-width: 992px) {
  .pv-cookie { left: auto; right: 22px; bottom: 22px; width: 400px; }
  .has-cookie .pv-wafloat { display: none; }
}

/* Sticky mobile CTA + floating WhatsApp */
.pv-mbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1040;
  display: flex; gap: 8px; padding: 8px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--pv-line); border-radius: 18px; box-shadow: var(--pv-shadow-lg);
  transform: translateY(150%); transition: transform .35s var(--pv-ease);
  margin-bottom: env(safe-area-inset-bottom);
}
.pv-mbar.is-visible { transform: none; }
.pv-mbar .pv-btn { --btn-h: 46px; flex: 1; padding: 0 12px; font-size: .94rem; }
.pv-mbar .pv-btn--icon { flex: none; width: 46px; padding: 0; font-size: 1.2rem; }
.pv-wafloat {
  position: fixed; right: 22px; bottom: 22px; z-index: 1040;
  display: none; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
  background: #fff; border: 1px solid var(--pv-line); border-radius: 999px; box-shadow: var(--pv-shadow-lg);
  color: var(--pv-ink); font-weight: 700; font-size: .92rem; text-decoration: none;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s var(--pv-ease);
}
.pv-wafloat i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pv-wa); color: #fff; font-size: 1.15rem; }
.pv-wafloat.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.pv-wafloat:hover { color: var(--pv-green-700); }
@media (min-width: 992px) {
  .pv-mbar { display: none; }
  .pv-wafloat { display: inline-flex; }
}

/* 15. Motion --------------------------------------------------------------- */
@keyframes pv-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pv-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pv-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pv-progress { from { width: 0; } to { width: 100%; } }
@keyframes pv-ping { 0% { transform: scale(.6); opacity: .55; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes pv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pv-legs { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes pv-ant-walk { 0% { transform: translateX(0); } 88%, 100% { transform: translateX(100%); } }
@keyframes pv-ant-fade { 0% { opacity: 0; } 3%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes pv-trail-glow {
  0%, 6% { background: var(--c-500); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 5px var(--c-100); }
  13%, 100% { background: var(--c-100); color: var(--c-700); transform: none; box-shadow: 0 0 0 1px var(--c-200); }
}
.pv-in { animation: pv-pop .7s var(--pv-ease) both; animation-delay: var(--d, 0s); }
.pv-bob { animation: pv-float 6s ease-in-out infinite; animation-delay: var(--b, 0s); }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--pv-ease), transform .7s var(--pv-ease); transition-delay: var(--rd, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Motion extras ----------------------------------------------------------------- */
/* Header line: how far down the page you are, in the colour of the section on screen.
   main.js sets --pv-spy; the progress itself is a scroll-driven animation where supported. */
.pv-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--pv-spy, var(--pv-green-500)); transform-origin: 0 50%; transition: background-color .5s var(--pv-ease); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .pv-header::after { animation: pv-scroll-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes pv-scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* GPS map: the info card's geofence line lights up when the replayed route arrives */
.pv-map__arrive { border-radius: .45em; }
.pv-map__arrive.is-flash { animation: pv-arrive 1.8s var(--pv-ease); }
@keyframes pv-arrive {
  0%, 35% { background: var(--pv-sky-100); box-shadow: 0 0 0 .35em var(--pv-sky-100); color: var(--pv-sky-700); }
  100% { background: transparent; box-shadow: 0 0 0 .35em transparent; }
}

/* AI cards: answers stream in like a live reply. The unwritten words stay in place
   (hidden), so the box never changes size while it fills. */
.pv-type__todo { visibility: hidden; }
.pv-out p.is-thinking { position: relative; }
.pv-type__dots { position: absolute; top: .4em; left: 0; display: inline-flex; gap: 4px; }
.pv-type__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-500); animation: pv-think 1s ease-in-out infinite; }
.pv-type__dots i:nth-child(2) { animation-delay: .15s; }
.pv-type__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pv-think { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.pv-out p.is-streaming .pv-type__done::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin: 0 -2px -.18em 0; background: var(--c-500); animation: pv-caret .8s steps(1) infinite; }
@keyframes pv-caret { 50% { opacity: 0; } }
.pv-ai__review { transition: opacity .5s var(--pv-ease); }
.pv-ai__ui:is(.is-waiting, .is-typing) .pv-ai__review { opacity: 0; }

/* Logo strip: an endless slow scroll (main.js). It stops on hover, off screen and with the
   pause button, since it would otherwise move for more than five seconds. */
.pv-marquee-row { display: flex; align-items: center; gap: 12px; }
.pv-marquee { flex: 1; min-width: 0; overflow: hidden; }
.pv-marquee .pv-logos__list { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: pv-marquee var(--marquee-dur, 30s) linear infinite; }
.pv-marquee .pv-logos__list li { flex: none; width: 168px; margin-right: 20px; }
.pv-marquee:hover .pv-logos__list, .pv-logos.is-paused .pv-logos__list, .pv-logos:not(.is-onscreen) .pv-marquee .pv-logos__list { animation-play-state: paused; }
@keyframes pv-marquee { to { transform: translateX(var(--marquee-shift, -50%)); } }
.pv-marquee__toggle { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--pv-line); border-radius: 50%; background: #fff; color: var(--pv-text); font-size: 1.1rem; cursor: pointer; transition: border-color .2s, background-color .2s; }
.pv-marquee__toggle:hover { border-color: var(--pv-green-500); background: var(--pv-green-50); }
@media (max-width: 575.98px) { .pv-marquee .pv-logos__list li { width: 140px; margin-right: 12px; } }

/* Product tour on desktop: the tabs and screen stay pinned and change as you scroll.
   main.js adds .pv-tour--pinned and sets --tour-p (progress) and --tour-c (tab colour). */
.pv-tour__meter, .pv-tour__spacer { display: none; }
.pv-tour--pinned .pv-tour__pin { position: sticky; top: calc(var(--pv-header-h) + 20px); display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: center; gap: 36px; }
.pv-tour--pinned .pv-tour__spacer { display: block; height: calc((var(--tour-steps, 7) - 1) * 50vh); }
.pv-tour--pinned .pv-tour__tabs { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; margin: 0; }
.pv-tour--pinned .pv-tour__tab { width: 100%; }
.pv-tour--pinned .pv-tour__meter { display: grid; gap: 8px; margin-top: 20px; padding-left: 4px; color: var(--pv-muted); font-size: .84rem; font-weight: 600; }
.pv-tour__count b { color: var(--pv-ink); font-size: 1.05rem; }
.pv-tour__bar { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--pv-line); }
.pv-tour__bar i { display: block; height: 100%; background: var(--tour-c, var(--pv-green-500)); transform: scaleX(var(--tour-p, 0)); transform-origin: 0 50%; transition: background-color .3s; }
.pv-tour__hint2 { display: inline-flex; align-items: center; gap: 6px; }
.pv-tour--pinned .pv-tour__frame { width: min(100%, calc((100vh - 220px) * 1600 / 1227)); max-width: none; }
.pv-tour--pinned .pv-tour__scroll { aspect-ratio: 1600 / 1227; background: #F5F8F6; }
.pv-tour--pinned .pv-tour__scroll img { height: 100%; object-fit: contain; object-position: top center; }
.pv-tour--pinned .pv-tour__caption { margin-top: 12px; }
.pv-tour--pinned .tab-pane.fade { transform: translateY(16px) scale(.985); transition: opacity .3s linear, transform .5s var(--pv-ease); }
.pv-tour--pinned .tab-pane.fade.show { transform: none; }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .pv-auto__panel { gap: 32px; padding: 44px 40px 100px; }
  .pv-auto__controls { left: 40px; }
  .pv-auto__side { width: 220px; }
  .pv-modules { grid-template-columns: repeat(2, 1fr); }
  .pv-techapp { grid-template-columns: 1fr 1fr; }
  .pv-techapp__phones { grid-column: 1 / -1; order: -1; justify-content: center; }
  .pv-cx { grid-template-columns: 1fr 1fr; }
  .pv-cx__phone { grid-column: 1 / -1; order: -1; display: flex; justify-content: center; }
  .pv-recipes { grid-template-columns: repeat(2, 1fr); }
  .pv-tools { grid-template-columns: repeat(3, 1fr); }
  .pv-tools.pv-tools--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-dr-copy { max-width: 720px; }
  .pv-dr, .pv-dr__facts { max-width: 760px; margin-inline: auto; }
  .pv-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-footer__brand { grid-column: 1 / -1; }
  .pv-hero__toast--2 { right: -6px; }
}

/* Small laptops: the hero and pipeline mockups get less room */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pv-dash { font-size: 10.5px; }
  .pv-dash__grid { grid-template-columns: 1fr; }
  .pv-dash__side { display: none; }
  .pv-pipe-col:nth-child(2) { display: none; }
  .pv-pipeline__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tablets and small laptops: the hero phone moves right so it never covers job names */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .pv-hero__phone { left: auto; right: -8px; bottom: -40px; }
  .pv-hero__toast--2 { display: none; }
  .pv-hero__toast--3 { right: auto; left: 24px; bottom: -6px; }
}
@media (max-width: 991.98px) {
  :root { --pv-header-h: 68px; }
  .pv-hero__visual { padding: 26px 0 36px 18px; margin-top: 8px; }
  .pv-hero__stage { border-radius: 28px 0 0 28px; }
  .pv-proof__grid { grid-template-columns: repeat(2, 1fr); }
  .pv-chaos { grid-template-columns: 1fr; }
  .pv-chaos__arrow { justify-self: center; transform: rotate(90deg); }
  .pv-pains { grid-template-columns: repeat(2, 1fr); }
  .pv-tl { margin-inline: calc(-1 * var(--pv-gutter)); }
  .pv-tl__scroll { overflow-x: auto; padding: 0 var(--pv-gutter) 6px; scrollbar-width: none; }
  .pv-tl__scroll::-webkit-scrollbar { display: none; }
  .pv-tl__inner { width: 1040px; }
  /* Illustration on top takes any spare height (its mockup stays centred); the text sits below it */
  .pv-auto__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 32px; min-height: 0; padding: 34px 28px 96px; }
  .pv-auto__visual { min-height: 0; order: -1; }
  .pv-auto__stage::before { top: auto; width: 100%; height: 55%; }
  .pv-auto__controls { left: 28px; bottom: 28px; }
  .pv-itabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 210px; overflow-x: auto; margin-inline: calc(-1 * var(--pv-gutter)); padding: 4px var(--pv-gutter) 10px; scrollbar-width: none; }
  .pv-itabs::-webkit-scrollbar { display: none; }
  .pv-testimonials { grid-template-columns: 1fr; }
  .pv-ai { grid-template-columns: 1fr; }
  .pv-pricing { grid-template-columns: 1fr; }
  .pv-faq { grid-template-columns: 1fr; }
  .pv-faq__side { position: static; }
  .pv-final { grid-template-columns: 1fr; }
  .pv-final__art { display: none; }
  .pv-trust { grid-template-columns: 1fr; }
  .pv-acc-cols { grid-template-columns: 1fr; }
  .pv-alerts { grid-template-columns: repeat(2, 1fr); }
  .pv-builder { grid-template-columns: 1fr; }
  .pv-modal__grid { grid-template-columns: 1fr; }
  .pv-modal__side { display: none; }
  .pv-promise { grid-template-columns: repeat(2, 1fr); }
  .pv-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-contact { grid-template-columns: 1fr; }
  .pv-extra { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .pv-trail { padding: 26px 0 14px; }
  .pv-trail__label { left: 16px; }
  .pv-trail__steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84px; overflow-x: auto; padding: 0 12px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pv-trail__steps::-webkit-scrollbar { display: none; }
  .pv-trail__step { scroll-snap-align: start; }
  .pv-trail__track { display: none; }
  .pv-modules, .pv-tools { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(270px, 82%); overflow-x: auto; margin-inline: calc(-1 * var(--pv-gutter)); padding: 4px var(--pv-gutter) 14px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pv-gutter); }
  .pv-module, .pv-tool { scroll-snap-align: start; }
  .pv-tools.pv-tools--quad { grid-template-columns: none; }
  /* Phones show the WhatsApp message; the PDF is its attachment */
  .pv-dr { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pv-dr__pdf { display: none; }
  .pv-checks--2col { grid-template-columns: 1fr; }
  .pv-contracts { grid-template-columns: 1fr; }
  .pv-techapp { grid-template-columns: 1fr; }
  .pv-techapp__phones .ui-phone:last-child { display: none; }
  .pv-cx { grid-template-columns: 1fr; }
  .pv-recipes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pv-alerts { grid-template-columns: 1fr; }
  .pv-stats { grid-template-columns: 1fr 1fr; }
  .pv-glance { grid-template-columns: 1fr; }
  .pv-plan__ctas { grid-template-columns: 1fr; }
  .pv-timeline { grid-template-columns: 1fr; }
  .pv-timeline > i { justify-self: center; transform: rotate(90deg); }
  .pv-addon { grid-template-columns: auto minmax(0, 1fr); }
  .pv-addon__price { grid-column: 1 / -1; text-align: left; }
  .pv-included__more { display: inline-flex; margin-top: 16px; }
  .pv-included.is-collapsed .pv-included__list li:nth-child(n+11) { display: none; }
  .pv-solutions { grid-template-columns: 1fr; }
  .pv-footer__grid { grid-template-columns: 1fr 1fr; }
  .pv-footer { padding-bottom: 96px; }
  .pv-chaos__panel { min-height: 0; padding: 60px 16px 18px; }
  .pv-chaos__before { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .pv-scrap { position: relative; inset: auto !important; width: calc(50% - 6px) !important; transform: rotate(var(--r, 0deg)) !important; }
  .pv-scrap--wa { --r: -2deg; } .pv-scrap--sheet { --r: 2deg; } .pv-scrap--paper { --r: 1.5deg; } .pv-scrap--note { --r: -3deg; } .pv-scrap--calls { --r: 1deg; }
  .pv-scrap--paper::after { display: none; }
  .pv-map { grid-template-columns: 1fr; }
  .pv-map__side { order: 2; border-right: 0; border-top: 1px solid var(--pv-line); }
  .pv-map__canvas { min-height: 21em; }
  .pv-cal__grid { grid-template-columns: repeat(6, 10.5em); overflow: hidden; }
  .pv-pipeline__cols { grid-template-columns: repeat(4, 12.5em); overflow: hidden; }
  .pv-stock__grid { grid-template-columns: 1fr 1fr; }
  .pv-stock__row { grid-template-columns: 1fr; }
  .pv-hr { grid-template-columns: 1fr; }
  .pv-analytics__kpis { grid-template-columns: 1fr 1fr; }
  .pv-analytics__grid { grid-template-columns: 1fr; }
  .pv-report__meta { grid-template-columns: 1fr 1fr; }
  .pv-report__grid { grid-template-columns: 1fr; }
  .pv-float-toast { display: none; }
  .pv-tour__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--pv-gutter)); padding: 2px var(--pv-gutter) 8px; scrollbar-width: none; }
  .pv-tour__tabs::-webkit-scrollbar { display: none; }
  .pv-tour__tab { flex: none; }
  .pv-auto__screen { font-size: 12px; }
  .pv-auto__visual--split { flex-direction: column; }
  /* The cards beside a phone would stack under it here and make that panel far taller than the rest */
  .pv-auto__visual--split .pv-auto__side { display: none; }
  .pv-auto__toast--tr { top: -16px; right: -6px; }
  .pv-auto__toast--bl { bottom: -16px; left: -6px; }
  .pv-auto__toast--tl { top: -12px; left: -6px; }
  .pv-auto__toast--br { bottom: -12px; right: -6px; }
  .pv-tour__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .pv-tour__scroll img { width: 210%; max-width: none; }
  .pv-tour__hint { display: inline-flex; }
  .pv-pains { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 80%); overflow-x: auto; margin-inline: calc(-1 * var(--pv-gutter)); padding: 4px var(--pv-gutter) 14px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pv-gutter); }
  .pv-pain { scroll-snap-align: start; }
  .pv-map__canvas { min-height: 0; display: flex; flex-direction: column; }
  .pv-map__svg { position: relative; inset: auto; height: 17em; flex: none; }
  .pv-map__info { position: static; width: auto; padding: .8em; }
  .pv-map__info .ui-card { box-shadow: none; }
}

@media (max-width: 575.98px) {
  .pv-hero__ctas .pv-btn { flex: 1 1 100%; }
  .pv-hero__visual { padding: 18px 0 26px 12px; }
  .pv-dash { font-size: 10px; }
  .pv-dash__body { grid-template-columns: 1fr; }
  .pv-dash__rail { display: none; }
  .pv-dash__main { padding: 1em; }
  .pv-dash__kpis { grid-template-columns: 1fr 1fr; }
  .pv-dash__grid { grid-template-columns: 1fr; }
  .pv-dash__side { display: none; }
  .ui-visit:nth-child(n+5) { display: none; }
  .pv-dash .ui-select { display: none; }
  .pv-hero__phone, .pv-hero__toast--2, .pv-hero__toast--3 { display: none; }
  .pv-hero__toast--1 { right: 8px; top: -14px; font-size: 10.5px; min-width: 0; }
  .pv-proof__grid { grid-template-columns: 1fr; }
  .pv-proof__item { padding: 14px; }
  .pv-scrap { width: 100% !important; }
  .pv-recipes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pv-recipe { padding: 12px; }
  .pv-recipe b { font-size: .88rem; }
  .pv-tfeats, .pv-cx__list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pv-tfeat, .pv-touch { flex-direction: column; gap: 8px; padding: 12px; }
  .pv-tfeat b, .pv-touch b { font-size: .88rem; }
  .pv-tfeat > div > span, .pv-touch > div > span { font-size: .78rem; }
  .pv-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pv-stat { padding: 16px; }
  .pv-stock { font-size: 10px; }
  .pv-stock__grid { grid-template-columns: 1fr 1fr; gap: .6em; }
  .pv-chem { grid-template-columns: 1fr; gap: .4em; }
  .pv-bottle { margin-top: 0; width: 2em; height: 2.8em; }
  .pv-included__list { grid-template-columns: 1fr; }
  .pv-promise { grid-template-columns: 1fr; }
  .pv-inv__parties { grid-template-columns: 1fr; }
  .pv-airow { grid-template-columns: 1fr; }
  .pv-builder { font-size: 10.5px; }
  .pv-wa { width: 100%; max-width: 300px; }
  .pv-auto__panel { padding: 24px 18px 90px; }
  .pv-auto__screen { font-size: 10.5px; }
  .pv-auto__phone, .pv-auto__phone.pv-wa { width: 250px; font-size: 11px; }
  .pv-auto__toast { font-size: 10.5px; min-width: 0; }
  .pv-auto__toast--2 { display: none; }
  .pv-auto__controls { left: 18px; bottom: 24px; }
  .pv-logos__list { gap: 12px; }
  .pv-logos__list li { width: calc(50% - 6px); height: 58px; }
  .vg-kpis { grid-template-columns: 1fr 1fr; }
  .vg { font-size: 11px; }
  .pv-contract { font-size: 11.5px; }
}
@media (max-width: 575.98px) {
  .pv-cookie { padding: 14px 16px; }
  .pv-cookie__title { font-size: .95rem; margin-bottom: 4px; }
  .pv-cookie p { font-size: .8rem; line-height: 1.5; margin-bottom: 10px; }
}
@media (max-width: 399.98px) {
  .pv-contact__cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .pv-trail__track { display: none; }
  .js .pv-analytics .pv-bars i { transform: none; }
  /* the header line only follows the scroll position, so it stays */
  .pv-header::after { animation-duration: auto !important; }
}

@media print {
  .pv-header, .pv-mbar, .pv-wafloat, .pv-trail__track { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}