/* ---- inline block @89511 ---- */
.pms-skip{position:absolute;left:12px;top:-60px;z-index:100000;background:#0f172a;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;line-height:1.2;text-decoration:none;transition:top .15s}.pms-skip:focus{top:12px}
/* ---- inline block @112543 ---- */

  /* Gradient-mesh hero backdrop — sits behind .container (z-index:3) */
  .pms-hero-v2 { padding: clamp(40px, 6vw, 84px) 0 28px; }
  .pms-hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
    background: var(--pms-gradient-mesh); opacity:0.9; }
  .pms-hero-bg::after { content:''; position:absolute; inset:0;
    background: radial-gradient(120% 80% at 50% -10%, transparent 55%, rgba(246,247,243,0.65) 100%); }

  .pms-hero-grid { display:grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px);
    align-items:center; text-align:center; }
  .pms-hero-copy { max-width: 680px; margin: 0 auto; }

  .pms-hero-eyebrow { display:inline-flex; align-items:center; gap:7px; padding:7px 15px;
    border-radius:var(--pms-radius-full); background:var(--pms-surface-1);
    border:1px solid var(--pms-border-glass); box-shadow:var(--pms-shadow-sm);
    color:var(--pms-brand-700); font-size:var(--pms-fs-sm); font-weight:var(--pms-fw-bold);
    letter-spacing:.01em; margin-bottom: var(--pms-space-5); }
  .pms-hero-eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--pms-brand-lime);
    box-shadow:0 0 0 4px rgba(110,231,168,0.18); }

  .pms-hero-h1 { font-family:var(--pms-font-display); font-size:var(--pms-fs-display);
    font-weight:var(--pms-fw-black); line-height:var(--pms-lh-tight);
    letter-spacing:var(--pms-tracking-tight); color:var(--pms-ink-primary);
    margin: 0 0 var(--pms-space-5); }
  .pms-hero-sub { font-size:var(--pms-fs-base); line-height:var(--pms-lh-normal);
    color:var(--pms-ink-muted); font-weight:var(--pms-fw-medium);
    max-width: 60ch; margin: 0 auto var(--pms-space-8); }

  .pms-hero-actions { display:flex; justify-content:center; gap:var(--pms-space-3); flex-wrap:wrap; }
  .pms-hero-cta { padding:15px 28px; font-size:15.5px; font-weight:var(--pms-fw-extrabold);
    border-radius:var(--pms-radius-md); min-width:230px; display:inline-flex; align-items:center;
    justify-content:center; gap:8px; text-decoration:none; cursor:pointer; border:none; }
  .pms-hero-tertiary { display:inline-block; margin-top:var(--pms-space-4); font-size:var(--pms-fs-sm);
    font-weight:var(--pms-fw-bold); color:var(--pms-brand-700); text-decoration:none;
    background-image:linear-gradient(currentColor,currentColor); background-size:0 1.5px;
    background-position:0 100%; background-repeat:no-repeat; transition:background-size .2s var(--pms-ease-out-quart); }
  .pms-hero-tertiary:hover { background-size:100% 1.5px; }

  /* Product mock — browser-framed POS register preview */
  .pms-hero-visual { display:none; }
  .pms-mock { position:relative; width:100%; max-width:540px; margin:0 auto; }
  /* Standalone SVG product mock — carries the same 3D tilt the CSS mock had */
  .pms-mock-img { position:relative; z-index:1; display:block; width:100%; height:auto;
    filter: drop-shadow(0 30px 50px rgba(15,23,42,0.20));
    transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin:center; }
  /* (legacy CSS-composed mock styles below are retained but no longer rendered) */
  .pms-browser { position:relative; z-index:1; background:var(--pms-surface-1); border:1px solid var(--pms-border);
    border-radius:var(--pms-radius-lg); box-shadow:var(--pms-shadow-xl); overflow:hidden;
    transform: perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin:center; }
  .pms-browser-bar { display:flex; align-items:center; gap:7px; padding:11px 14px;
    background:var(--pms-surface-2); border-bottom:1px solid var(--pms-border); }
  .pms-browser-bar .d { width:11px; height:11px; border-radius:50%; }
  .pms-browser-bar .url { margin-left:10px; flex:1; height:22px; border-radius:var(--pms-radius-full);
    background:var(--pms-surface-1); border:1px solid var(--pms-border);
    display:flex; align-items:center; padding:0 12px; font-size:11px; color:var(--pms-ink-muted); font-weight:600; }
  .pms-pos { padding:16px; background:linear-gradient(160deg,#0b543b 0%, #0e6b4b 100%); }
  .pms-pos-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .pms-pos-head .t { color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; gap:7px; }
  .pms-pos-head .live { font-size:11px; font-weight:800; color:#cdeeef; display:flex; align-items:center; gap:5px;
    text-transform:uppercase; letter-spacing:.06em; }
  .pms-pos-head .live i { width:7px; height:7px; border-radius:50%; background:#6ee7a8; box-shadow:0 0 8px #6ee7a8;
    animation: pmsPulse 1.6s ease-in-out infinite; }
  .pms-pos-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
  .pms-pos-tile { background:rgba(255,255,255,0.96); border-radius:10px; padding:10px 8px; text-align:left;
    box-shadow:0 6px 14px rgba(0,0,0,0.18); }
  .pms-pos-tile .em { font-size:18px; }
  .pms-pos-tile .nm { font-size:11px; font-weight:800; color:#0f172a; margin-top:3px; line-height:1.2; }
  .pms-pos-tile .pr { font-size:11px; font-weight:700; color:#334155; }
  .pms-pos-cart { background:rgba(255,255,255,0.96); border-radius:10px; padding:11px 13px;
    box-shadow:0 6px 14px rgba(0,0,0,0.18); }
  .pms-pos-cart .ln { display:flex; justify-content:space-between; font-size:11px; color:#3a4a44; padding:3px 0; }
  .pms-pos-cart .tot { display:flex; justify-content:space-between; font-size:13px; font-weight:900; color:#0f172a;
    border-top:1px solid #e5e7eb; margin-top:5px; padding-top:7px; }
  .pms-pos-pay { margin-top:9px; background:linear-gradient(135deg,#0e6b4b,#6ee7a8); color:#fff; text-align:center;
    font-weight:800; font-size:12px; padding:9px; border-radius:8px; }
  /* Floating accent cards — product UI chrome (no fabricated metrics) */
  .pms-float { position:absolute; z-index:3; background:var(--pms-surface-1); border:1px solid var(--pms-border);
    border-radius:var(--pms-radius-md); box-shadow:var(--pms-shadow-lg); padding:10px 13px;
    display:flex; align-items:center; gap:9px; animation: pmsFloat 6s ease-in-out infinite; }
  .pms-float .fic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; }
  .pms-float .ft { font-size:11px; font-weight:800; color:var(--pms-ink-primary); line-height:1.25; }
  .pms-float .fs { font-size:11px; color:var(--pms-ink-muted); font-weight:600; }
  .pms-float.f-book { top:-18px; left:-26px; animation-delay:-1s; }
  .pms-float.f-book .fic { background:#d1fae5; color:#059669; }
  .pms-float.f-pay { bottom:24px; right:-30px; animation-delay:-3s; }
  .pms-float.f-pay .fic { background:var(--pms-gradient-soft); color:var(--pms-brand-700); }
  @keyframes pmsFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
  @keyframes pmsPulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

  /* Desktop: two columns, left-aligned copy, show the visual */
  @media (min-width: 1024px) {
    .pms-hero-grid { grid-template-columns: 1.05fr 0.95fr; text-align:left; gap: clamp(40px, 4vw, 72px); }
    .pms-hero-copy { margin:0; max-width:none; }
    .pms-hero-sub { margin-left:0; margin-right:0; }
    .pms-hero-actions { justify-content:flex-start; }
    .pms-hero-visual { display:block; }
  }
  /* Override the legacy `.hero h1/p` !important mobile rules (those were tuned for
     the rotating headline). Keep a premium scale for the static hero v2 headline. */
  @media (max-width: 560px) {
    .pms-hero-h1 { font-size: clamp(30px, 8.4vw, 38px) !important; min-height: 0 !important; }
    .pms-hero-sub { font-size: 15px !important; }
  }
  /* "+ More" cat-pill reveal — extra chips flow inline when shown */
  .cat-pills-extra { display: contents; }
  .cat-pills-extra[hidden] { display: none; }
  .cat-pill--toggle { font-family: inherit; cursor: pointer; color: var(--pms-brand-700);
    background: var(--pms-gradient-soft); border-color: var(--pms-border-glass); }
  .cat-pill--toggle:hover { background: var(--pms-gradient-soft); }
  @media (prefers-reduced-motion: reduce) {
    .pms-float, .pms-pos-head .live i { animation:none !important; }
  }

/* ---- inline block @121056 ---- */

  /* Hero shell — taller, layered, clips the drifting mesh */
  .pms-hero-v2 { position: relative; overflow: hidden;
    padding: clamp(6px, 1.4vw, 14px) 0 clamp(30px, 4.5vw, 52px); }

  /* Layered, slowly drifting gradient mesh — 3 blobs + grain-free fade.
     (Scroll parallax is added in the Wave-3 motion pass.) */
  .pms-hero-bg { background: var(--pms-gradient-mesh); opacity: 1; }
  .pms-hero-bg::before { content:''; position:absolute; inset:-15% -10%; z-index:0;
    background:
      radial-gradient(38% 44% at 18% 22%, rgba(110,231,168,0.20) 0%, transparent 62%),
      radial-gradient(34% 40% at 84% 16%, rgba(59,106,160,0.20) 0%, transparent 60%),
      radial-gradient(40% 46% at 70% 88%, rgba(15,23,42,0.12) 0%, transparent 64%);
    filter: blur(8px); animation: pmsMeshDrift 22s ease-in-out infinite alternate; }
  .pms-hero-bg::after { background:
      radial-gradient(120% 80% at 50% -12%, transparent 52%, var(--pms-surface-0) 100%); }
  @keyframes pmsMeshDrift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, -1%, 0) scale(1.03); }
  }

  /* Asymmetric copy — sits LEFT, wide measure, never centered on desktop */
  .pms-hero-copy.v3 { max-width: 880px; margin: 0; text-align: left; }
  .pms-hero-copy.v3 .pms-hero-h1 { margin: 4px 0 18px; }
  .pms-hero-copy.v3 .pms-hero-h1 .gradient-text { display: block; }
  .pms-hero-copy.v3 .pms-hero-sub { margin-left: 0; margin-right: 0; }
  .pms-hero-copy.v3 .pms-hero-actions { justify-content: flex-start; margin-top: 26px; }

  /* CTAs — SVG-iconed, no emoji. Brand primary keeps a quiet shimmer on hover. */
  .pms-hero-cta { gap: 9px; min-width: 0; }
  .pms-hero-cta .ic { width: 18px; height: 18px; flex: 0 0 auto; }
  .pms-hero-cta.pms-cta--brand { position: relative; overflow: hidden; }
  .pms-hero-cta.pms-cta--brand::after { content:''; position:absolute; top:0; left:-130%;
    width:60%; height:100%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); }
  .pms-hero-cta.pms-cta--brand:hover::after { animation: pmsShimmer .9s ease; }
  @keyframes pmsShimmer { to { left: 130%; } }

  /* Rotating example-prompts strip — a mini "prompt bar" under the CTAs */
  .pms-hero-prompts { display: flex; width: fit-content; align-items: center; gap: 9px; margin-top: 20px;
    max-width: 100%; padding: 9px 16px; border-radius: var(--pms-radius-full);
    background: var(--pms-surface-1); border: 1px solid var(--pms-border-glass); box-shadow: var(--pms-shadow-sm); }
  .pms-hero-prompts .php-ic { display: grid; place-items: center; color: var(--pms-brand-700); flex: 0 0 auto; }
  .pms-hero-prompts .php-ic svg { width: 15px; height: 15px; }
  .pms-hero-prompts .php-lead { font-size: 13px; font-weight: 800; color: var(--pms-brand-700); flex: 0 0 auto; }
  .pms-hero-prompts .php-text { font-size: 13.5px; font-weight: 600; color: var(--pms-ink-secondary);
    white-space: nowrap; transition: opacity .4s; }
  .pms-hero-prompts.php-fade .php-text { opacity: 0; }
  .php-cw { display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px; margin-left: 1px;
    background: var(--pms-brand-700); animation: pvCaret .9s step-end infinite; }
  @media (max-width: 560px) {
    .pms-hero-prompts { padding: 8px 13px; gap: 7px; }
    .pms-hero-prompts .php-text { font-size: 12.5px; white-space: normal; }
  }

  /* Trust row — real claims only, quiet */
  .pms-hero-trust { display:flex; flex-wrap:wrap; gap:7px 20px; margin-top: 22px;
    font-size: 13px; font-weight: 600; color: var(--pms-ink-muted); letter-spacing:.005em; }
  .pms-hero-trust span { display:inline-flex; align-items:center; gap:8px; }
  .pms-hero-trust span::before { content:''; width:5px; height:5px; border-radius:50%;
    background: var(--pms-brand-600); box-shadow: 0 0 0 3px rgba(34,182,115,0.14); }

  /* Category tags — left-aligned, refined; SVG glyphs replace the emoji */
  .pms-hero-v2 .cat-pills { justify-content: flex-start; margin-top: 28px; gap: 9px; }
  .pms-hero-v2 .cat-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
    border-radius: var(--pms-radius-full); background: var(--pms-surface-1);
    border: 1px solid var(--pms-border-glass); color: var(--pms-ink-secondary);
    font-weight: 700; font-size: 13.5px; box-shadow: var(--pms-shadow-sm);
    transition: transform .18s var(--pms-ease-out-quart), box-shadow .2s, border-color .2s, color .2s; }
  .pms-hero-v2 .cat-pill svg { width:15px; height:15px; color: var(--pms-brand-600); }
  .pms-hero-v2 .cat-pill:hover { transform: translateY(-2px); color: var(--pms-brand-900);
    border-color: rgba(44,82,130,0.35); box-shadow: var(--pms-shadow-md); }
  .pms-hero-v2 .cat-pill--toggle { background: var(--pms-gradient-soft); color: var(--pms-brand-700); }

  /* ===== Product stage — the cycling live preview ===== */
  .pms-stage { position: relative; z-index: 3; margin: clamp(40px,5vw,68px) auto 0; max-width: 1080px; }
  .pms-stage-tabs { display:inline-flex; gap:4px; padding:5px; border-radius: var(--pms-radius-full);
    background: var(--pms-surface-1); border:1px solid var(--pms-border-glass);
    box-shadow: var(--pms-shadow-sm); margin-bottom: 20px; }
  .pms-tab { border:0; background:none; cursor:pointer; font-family:inherit; font-weight:700;
    font-size:13.5px; color: var(--pms-ink-muted); padding:9px 17px; border-radius: var(--pms-radius-full);
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    transition: color .25s, background .25s, box-shadow .25s; }
  .pms-tab svg { width:16px; height:16px; }
  .pms-tab.on { color: var(--pms-ink-inverse); background: var(--pms-gradient-brand); box-shadow: var(--pms-glow-brand); }

  .pms-stage-frame { position: relative; border-radius: var(--pms-radius-xl); overflow: hidden;
    background: var(--pms-surface-1); border:1px solid var(--pms-border);
    box-shadow: var(--pms-shadow-xl); }

  /* --- "DEMO — sample data" labelling + non-interactive mock controls --- */
  .pms-demo-pill { position:absolute; top:10px; right:12px; z-index:6; cursor:help;
    display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:900;
    text-transform:uppercase; letter-spacing:.07em; color:#fff; background:rgba(15,23,42,0.86);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,0.2); border-radius:999px; padding:5px 11px;
    box-shadow:0 4px 14px rgba(15,23,42,0.28); }
  .pms-demo-pill i { width:6px; height:6px; border-radius:50%; background:var(--pms-brand-lime);
    box-shadow:0 0 8px var(--pms-brand-lime); }
  .pms-demo-tip { position:absolute; top:calc(100% + 9px); right:0; width:212px; text-align:left;
    background:var(--pms-ink-primary,#0f172a); color:#fff; font-weight:600; text-transform:none;
    letter-spacing:0; font-size:11.5px; line-height:1.45; padding:9px 12px; border-radius:10px;
    box-shadow:0 12px 32px rgba(15,23,42,0.32); opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .2s, transform .2s; pointer-events:none; }
  .pms-demo-pill:hover .pms-demo-tip, .pms-demo-pill:focus-visible .pms-demo-tip { opacity:1; visibility:visible; transform:none; }
  [data-demo-noop] { cursor:default; }
  .pms-demo-hint { position:absolute; left:50%; bottom:14px; z-index:7; text-decoration:none; white-space:nowrap;
    transform:translateX(-50%) translateY(8px); display:inline-flex; align-items:center; gap:6px;
    background:var(--pms-ink-primary,#0f172a); color:#fff; font-size:12px; font-weight:800;
    padding:9px 15px; border-radius:999px; box-shadow:0 12px 32px rgba(15,23,42,0.34);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s, transform .22s; }
  .pms-demo-hint.on { opacity:1; visibility:visible; transform:translateX(-50%); pointer-events:auto; }
  .pms-demo-hint svg { width:13px; height:13px; }
  @keyframes pmsDemoPulse { 0%{ transform:scale(1);} 35%{ transform:scale(1.13);} 100%{ transform:scale(1);} }
  .pms-demo-pulse { animation: pmsDemoPulse .5s var(--pms-ease-out-quart, ease); }
  @media (prefers-reduced-motion: reduce) {
    .pms-demo-pulse { animation:none; }
    .pms-demo-hint, .pms-demo-tip { transition:none; }
  }
  .pms-stage-bar { display:flex; align-items:center; gap:7px; padding:12px 16px;
    background: var(--pms-surface-2); border-bottom:1px solid var(--pms-border); }
  .pms-stage-bar .d { width:11px; height:11px; border-radius:50%; }
  .pms-stage-bar .d.r{background:#ff5f57}.pms-stage-bar .d.y{background:#febc2e}.pms-stage-bar .d.g{background:#28c840}
  .pms-stage-bar .url { margin-left:10px; flex:1; max-width:340px; height:24px; border-radius: var(--pms-radius-full);
    background: var(--pms-surface-1); border:1px solid var(--pms-border); display:flex; align-items:center;
    gap:7px; padding:0 13px; font-size:11.5px; color: var(--pms-ink-muted); font-weight:600; }
  .pms-stage-bar .url svg { width:12px; height:12px; opacity:.6; }
  .pms-biz-input { display:none; align-items:center; gap:4px; margin-left:auto; cursor:pointer; }
  .pms-biz-input input { width:100px; border:0; background:transparent; font:inherit; font-size:11px;
    color:var(--pms-ink-muted); outline:none; font-weight:600; text-align:right; }
  .pms-biz-input input::placeholder { color:var(--pms-ink-muted); opacity:.55; }
  .pms-biz-input svg { width:11px; height:11px; opacity:.4; flex-shrink:0; }
  @media (min-width:769px) { .pms-biz-input { display:flex; } }

  /* View area — fixed min-height so panel swaps never jump the layout */
  /* Sized so the POS panel's full story fits — tiles, scan callout, cart, total
     AND the charge bar. At 432px the total/pay rows were clipped by the frame's
     overflow:hidden (pre-existing at 432 even before the scan line was added). */
  .pms-stage-view { position: relative; min-height: 536px; background:
      linear-gradient(180deg, var(--pms-surface-2), var(--pms-surface-1)); }
  @media (max-width:560px){ .pms-stage-view { min-height: 588px; } }
  .pms-pv { position:absolute; inset:0; padding: clamp(16px,2.4vw,26px);
    opacity:0; visibility:hidden; transform: translateY(10px) scale(.992);
    transition: opacity .5s var(--pms-ease-out-quart), transform .5s var(--pms-ease-out-quart); }
  .pms-pv.on { opacity:1; visibility:visible; transform:none; }

  /* Shared panel header */
  .pv-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .pv-title { display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; color: var(--pms-ink-primary); }
  .pv-title .pv-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
    background: var(--pms-gradient-brand); color:#fff; box-shadow: var(--pms-shadow-sm); }
  .pv-title .pv-ic svg { width:18px; height:18px; }
  .pv-live { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
    text-transform:uppercase; letter-spacing:.08em; color: var(--pms-brand-700); }
  .pv-live i { width:7px; height:7px; border-radius:50%; background: var(--pms-brand-lime);
    box-shadow:0 0 8px var(--pms-brand-lime); animation: pmsPulse 1.6s ease-in-out infinite; }

  /* --- POS panel --- */
  .pv-pos-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
  .pv-tile { background: var(--pms-surface-1); border:1px solid var(--pms-border); border-radius:12px;
    padding:12px; box-shadow: var(--pms-shadow-sm); }
  .pv-tile .sw { width:30px; height:30px; border-radius:8px; margin-bottom:8px;
    background: var(--pms-gradient-soft); display:grid; place-items:center; color: var(--pms-brand-700); }
  .pv-tile .sw svg{ width:16px; height:16px; }
  .pv-tile .nm { font-size:12px; font-weight:800; color: var(--pms-ink-primary); }
  .pv-tile .pr { font-size:12px; font-weight:800; color: var(--pms-brand-700); margin-top:2px; }
  .pv-cart { background: var(--pms-surface-1); border:1px solid var(--pms-border); border-radius:12px;
    padding:14px 16px; box-shadow: var(--pms-shadow-sm); }
  .pv-cart .ln { display:flex; justify-content:space-between; font-size:13px; color: var(--pms-ink-secondary); padding:4px 0; }
  /* Barcode-scan callout inside the POS mock — tells the scanning story in the
     first viewport (tap OR scan to ring up). Dashed border reads as "just happened". */
  .pv-scanln { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
    color:#1e293b; background:rgba(59,106,160,0.07); border:1px dashed rgba(59,106,160,0.4);
    border-radius:8px; padding:6px 10px; margin-bottom:8px; }
  .pv-scanln svg { width:15px; height:15px; flex-shrink:0; }
  .pv-scanln .sk { margin-left:auto; font-weight:600; font-size:11px; color: var(--pms-ink-muted); }
  .pv-cart .tot { display:flex; justify-content:space-between; font-size:15px; font-weight:900;
    color: var(--pms-ink-primary); border-top:1px solid var(--pms-border); margin-top:6px; padding-top:9px; }
  .pv-pay { margin-top:12px; background: var(--pms-gradient-brand); color:#fff; border-radius:10px;
    padding:12px; text-align:center; font-weight:800; font-size:13.5px; box-shadow: var(--pms-glow-brand); }

  /* --- Booking panel --- */
  .pv-cal { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
  .pv-day { background: var(--pms-surface-1); border:1px solid var(--pms-border); border-radius:12px;
    padding:11px 9px; box-shadow: var(--pms-shadow-sm); }
  .pv-day .dn { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    color: var(--pms-ink-muted); margin-bottom:9px; }
  .pv-slot { font-size:11.5px; font-weight:700; text-align:center; padding:7px 4px; border-radius:8px;
    margin-bottom:6px; background: var(--pms-surface-2); color: var(--pms-ink-secondary);
    border:1px solid var(--pms-border); }
  .pv-slot.taken { background: var(--pms-gradient-brand); color:#fff; border-color:transparent;
    box-shadow: var(--pms-shadow-sm); }
  .pv-slot.dim { opacity:.45; }
  .pv-confirm { margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background: var(--pms-gradient-soft); border:1px solid rgba(44,82,130,0.16); border-radius:12px; padding:12px 15px; }
  .pv-confirm .t { font-size:13px; font-weight:800; color: var(--pms-brand-900); display:flex; align-items:center; gap:8px; }
  .pv-confirm .t svg { width:16px; height:16px; color: var(--pms-brand-700); }
  .pv-confirm .b { background: var(--pms-gradient-brand); color:#fff; font-size:12px; font-weight:800;
    padding:8px 14px; border-radius: var(--pms-radius-full); }

  /* --- Chat panel --- */
  .pv-chat { display:flex; flex-direction:column; gap:11px; }
  .pv-msg { max-width:78%; padding:11px 14px; border-radius:15px; font-size:13.5px; line-height:1.5; }
  .pv-msg.u { align-self:flex-end; background: var(--pms-gradient-brand); color:#fff; border-bottom-right-radius:5px; }
  .pv-msg.a { align-self:flex-start; background: var(--pms-surface-1); border:1px solid var(--pms-border);
    color: var(--pms-ink-secondary); border-bottom-left-radius:5px; box-shadow: var(--pms-shadow-sm); }
  .pv-typing { align-self:flex-start; display:inline-flex; gap:4px; padding:13px 15px; background: var(--pms-surface-1);
    border:1px solid var(--pms-border); border-radius:15px; border-bottom-left-radius:5px; box-shadow: var(--pms-shadow-sm); }
  .pv-typing i { width:7px; height:7px; border-radius:50%; background: var(--pms-brand-500); opacity:.5;
    animation: pmsType 1.2s ease-in-out infinite; }
  .pv-typing i:nth-child(2){ animation-delay:.18s } .pv-typing i:nth-child(3){ animation-delay:.36s }
  @keyframes pmsType { 0%,100%{opacity:.35; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)} }
  .pv-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
  .pv-chip { font-size:12px; font-weight:700; color: var(--pms-brand-700); background: var(--pms-surface-1);
    border:1px solid var(--pms-border-glass); border-radius: var(--pms-radius-full); padding:7px 13px; box-shadow: var(--pms-shadow-sm); }
  /* AI answer body — intro line + arrow bullets inside the assistant bubble */
  .pv-msg.a { max-width: 86%; }
  .pv-msg.a .pv-line { display:block; font-weight:800; color: var(--pms-ink-primary); margin-bottom:7px; }
  .pv-msg.a .pv-bul { display:block; position:relative; padding-left:19px; margin-top:6px;
    font-size:13px; line-height:1.4; color: var(--pms-ink-secondary); }
  .pv-msg.a .pv-bul::before { content:''; position:absolute; left:0; top:.5em; width:9px; height:9px;
    border-right:2px solid var(--pms-brand-700); border-top:2px solid var(--pms-brand-700);
    transform: translateY(-50%) rotate(45deg); }
  /* CTA chip — filled, links to the real assistant */
  .pv-chip--cta { display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    background: var(--pms-gradient-brand); color:#fff; border-color:transparent; box-shadow: var(--pms-glow-brand); }
  .pv-chip--cta svg { width:13px; height:13px; }
  /* Typewriter caret + per-node reveal used by pmsChatDemo() */
  .pv-cw { display:inline-block; width:2px; height:1.05em; vertical-align:-2px; margin-left:1px;
    background: var(--pms-brand-700); animation: pvCaret .9s step-end infinite; }
  @keyframes pvCaret { 50% { opacity:0 } }
  .pv-show { animation: pvBubIn .42s var(--pms-ease-out-quart) both; }
  @keyframes pvBubIn { from { opacity:0; transform: translateY(9px) } to { opacity:1; transform:none } }

  /* Desktop (≥1024px): TWO-COLUMN hero — editorial copy + CTAs on the LEFT,
     the live product preview on the RIGHT. This fills the formerly-empty right
     half (no more dead space) and keeps the headline, both CTAs AND a glimpse
     of the real product all above the fold. Below 1024px everything reverts to
     the single-column stack (mobile/tablet layout is intentionally untouched). */
  @media (min-width: 1024px) {
    .pms-hero-v2 { padding-top: clamp(6px, 0.8vw, 14px); padding-bottom: clamp(40px, 4vw, 60px); }
    .hero-simple { display: grid; align-items: start;
      grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
      column-gap: clamp(30px, 3.4vw, 56px); }
    .hero-simple > .pms-hero-copy.v3 { grid-column: 1; grid-row: 1; max-width: 560px; }
    .hero-simple > .cat-pills { grid-column: 1; grid-row: 2; margin: 16px auto 0 0; max-width: 560px; }
    /* Top-align the product demo with the copy so they start at the same height
       (a slight nudge drops the browser frame to ~the headline, not the eyebrow). */
    .hero-simple > .pms-stage { grid-column: 2; grid-row: 1 / span 2; margin: 6px 0 0;
      max-width: none; align-self: start; }
    /* Headline: still bold and committed, but no longer a ~96px wall that pushed
       the CTAs below the fold. Scales 38px→54px instead of 48px→96px. */
    .pms-hero-copy.v3 .pms-hero-h1 { font-size: clamp(2.35rem, 3.1vw, 3.35rem) !important;
      line-height: 1.04; margin: 2px 0 16px; }
    .pms-hero-copy.v3 .pms-hero-sub { font-size: 1.0625rem; line-height: 1.55; }
    .pms-hero-copy.v3 .pms-hero-actions { margin-top: 22px; }
    .pms-hero-trust { margin-top: 18px; }
  }
  @media (max-width: 560px) {
    /* Cap the display headline so the long gradient line never forces the page
       wider than the viewport (which would clip the stage). Beats the legacy
       !important rule via equal-importance + higher specificity. */
    .pms-hero-copy.v3 .pms-hero-h1 { font-size: clamp(27px, 7.6vw, 34px) !important;
      line-height: 1.0 !important; overflow-wrap: break-word; }
    .pms-hero-copy.v3 { max-width: 100%; }
    .pms-hero-v2 .cat-pills { gap:7px; }
    .pms-hero-v2 .cat-pill { padding:8px 12px; font-size:12.5px; }
    .pv-pos-tiles { gap:8px; } .pv-tile{ padding:10px; }
    .pms-stage-bar .url { max-width:none; }
    /* Tabs: full-width, shrink-to-fit, horizontally scrollable as a last resort */
    .pms-stage-tabs { display:flex; width:100%; overflow-x:auto; scrollbar-width:none; }
    .pms-stage-tabs::-webkit-scrollbar { display:none; }
    .pms-tab { flex:1 1 0; justify-content:center; padding:9px 10px; font-size:12.5px; }
    .pms-tab .tx { display:none; }   /* hide " register" etc. — keep the icon + short label */
    /* MWEB COGNITIVE LOAD — first screen = one headline, one button, one quiet link.
       The "Book a 15-minute demo" ghost CTA duplicates the sticky header's
       "Book a call" (always one tap away), and the 3-chip trust row repeats
       claims stated in #why-us, so both drop out on phones. Desktop unchanged. */
    .pms-hero-actions .pms-cta--ghost { display:none; }
    .pms-hero-actions .pms-hero-cta { width:100%; justify-content:center; }
    .pms-hero-trust { display:none; }
    button.pms-hero-tertiary { min-height:44px; display:flex !important; align-items:center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pms-hero-bg::before { animation: none !important; }
    .pms-hero-cta.pms-cta--brand:hover::after { animation: none !important; }
    .pv-live i, .pv-typing i { animation: none !important; }
    .pv-show, .pv-cw, .php-cw { animation: none !important; opacity: 1 !important; transform: none !important; }
    .pms-hero-prompts.php-fade .php-text { opacity: 1 !important; }
    .pms-pv { transition: opacity .2s linear !important; transform: none !important; }
  }

/* ---- inline block @142687 ---- */

  #pmsScrollProgress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);
    transform-origin:0 50%;background:linear-gradient(90deg,#0e6b4b,#6ee7a8);z-index:9999;
    pointer-events:none;will-change:transform;box-shadow:0 0 8px rgba(110,231,168,.45);}

/* ---- inline block @147288 ---- */

  /* Fibonacci hero visual. Desktop: sits in the empty right half; phones: a compact card under the copy. The art is a normal link, so on a phone you can tap it, or press and hold for the link menu. */
  /* The ambient glow layer (body::before) is re-sized by pms-design-system.css the moment shared-header.js mounts (body:has(.pmsh-nav)): inset 0 ->
     -10% / -12% / 132vh. That full-viewport geometry change was the last ~0.12 of mobile CLS. Declare the post-mount geometry from the start (same
     values, higher specificity), so mounting only changes paint, never layout. */
  html body.pms-homepage::before{ left:-10%; right:-10%; top:-12%; bottom:auto; height:132vh; }
  .fibh{ display:block; width:100%; max-width:300px; margin:22px 0 4px; }
  /* Phones: the QR card (+ tap pill + caption) is ~340px of the first screen, pushes the first pillar below the fold and is pointless on the device that would scan it; the header "Book a call" and the CTAs stay, and the full QR panel remains lower on the page. */
  @media (max-width:760px){ .fibh{ display:none; } }
  .fibh-cap{ margin:13px 2px 0; font-size:12.5px; line-height:1.45; color:var(--pms-ink-muted,#586578); }
  .fibh-cap .fibh-tap{ display:none; }
  @media (hover:none){ .fibh-cap .fibh-tap{ display:inline; } .fibh-cap .fibh-aim{ display:none; } }
  @media (min-width:1024px){
    .pms-homepage .hero-simple.fibh-on, .hero-simple.fibh-on{ display:grid !important; grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); align-items:center; column-gap:clamp(34px,4vw,55px); }
    .hero-simple.fibh-on > .pms-hero-copy.v3{ grid-column:1; grid-row:1; }
    .hero-simple.fibh-on > .cat-pills{ grid-column:1; grid-row:2; }
    .fibh{ display:block; grid-column:2; grid-row:1; justify-self:end; width:100%; max-width:420px; }
    .fibh-link{ display:block; line-height:0; border-radius:18px; box-shadow:0 22px 60px rgba(11,59,44,.22), 0 3px 10px rgba(15,23,42,.10);
      transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s; animation:fibhIn .55s cubic-bezier(.4,0,.2,1) .1s both; }
    .fibh-link:hover{ transform:translateY(-3px); box-shadow:0 30px 70px rgba(11,59,44,.28), 0 4px 12px rgba(15,23,42,.12); }
    .fibh-link:focus-visible{ outline:3px solid var(--pms-brand-lime,#84cc16); outline-offset:4px; }
    .fibh-svg{ display:block; width:100%; height:auto; }
    .hero-simple .fibh .fibh-cap{ margin:13px 2px 0; font-size:12.5px; line-height:1.45; color:var(--pms-ink-muted,#586578); text-align:center; max-width:none; }
    @keyframes fibhIn{ from{ opacity:0; transform:translateY(13px) scale(.985); } to{ opacity:1; transform:none; } }
  }
  @media (prefers-reduced-motion:reduce){ .fibh-link{ animation:none; transition:none; } .fibh-link:hover{ transform:none; } }

/* ---- inline block @169275 ---- */

  .pms-ind-section{ padding-block:clamp(48px,6vw,92px); }
  .pms-ind-list{ display:flex; flex-direction:column; gap:12px; max-width:900px; margin:0 auto; }
  .pms-ind{ background:var(--pms-surface-1); border:1px solid var(--pms-border); border-radius:var(--pms-radius-lg);
    overflow:hidden; transition:border-color var(--pms-duration-normal), box-shadow var(--pms-duration-normal);
    /* keep the deep-linked panel clear of the fixed header when scrolled into view */
    scroll-margin-top:88px; }
  .pms-ind.open{ border-color:var(--pms-brand-500); box-shadow:var(--pms-shadow-md); }
  .pms-ind-btn{ width:100%; display:flex; align-items:center; gap:16px; padding:18px 20px; cursor:pointer;
    background:none; border:0; text-align:left; font-family:inherit; color:var(--pms-ink-primary); }
  .pms-ind-btn .pi-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
    background:var(--pms-gradient-soft); color:var(--pms-brand-800); }
  .pms-ind-btn .pi-ic svg{ width:24px; height:24px; }
  .pms-ind-btn .pi-t{ flex:1 1 auto; min-width:0; }
  .pms-ind-btn .pi-t b{ font-family:var(--pms-font-display); font-size:17px; font-weight:var(--pms-fw-bold); letter-spacing:var(--pms-tracking-tight); display:block; }
  .pms-ind-btn .pi-t span{ font-size:13.5px; color:var(--pms-ink-muted); }
  .pms-ind-btn .pi-chev{ flex:0 0 auto; color:var(--pms-ink-muted); transition:transform var(--pms-duration-normal); }
  .pms-ind.open .pms-ind-btn .pi-chev{ transform:rotate(180deg); color:var(--pms-brand-700); }
  .pms-ind-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--pms-duration-slow) var(--pms-ease-out-quart); }
  .pms-ind.open .pms-ind-panel{ grid-template-rows:1fr; }
  .pms-ind-panel-inner{ overflow:hidden; }
  .pms-ind-body{ padding:4px 20px 22px; display:grid; grid-template-columns:1.4fr 1fr; gap:22px; }
  .pms-ind-feats{ display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none; }
  .pms-ind-feats li{ position:relative; padding-left:26px; font-size:14px; line-height:1.45; color:var(--pms-ink-secondary); }
  .pms-ind-feats li svg{ position:absolute; left:0; top:1px; width:17px; height:17px; color:var(--pms-brand-600); }
  .pms-ind-quote{ background:var(--pms-surface-2); border:1px solid var(--pms-border); border-radius:var(--pms-radius-md); padding:16px; }
  .pms-ind-quote .q{ font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:15px; line-height:1.5; color:var(--pms-ink-primary); margin:0 0 12px; }
  .pms-ind-quote .who{ font-size:12.5px; color:var(--pms-ink-muted); font-weight:var(--pms-fw-semibold); }
  .pms-ind-quote .ill{ display:inline-block; margin-top:8px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--pms-ink-muted); }
  .pms-ind-cta{ grid-column:1 / -1; display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:4px; }
  .pms-ind-mini{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .pms-ind-mini span{ font-size:11.5px; font-weight:var(--pms-fw-bold); color:var(--pms-brand-700);
    background:var(--pms-surface-2); border:1px solid var(--pms-border); border-radius:var(--pms-radius-full); padding:4px 11px; }
  .pms-ind-btn2{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; text-decoration:none;
    font-weight:var(--pms-fw-extrabold); font-size:14px; padding:11px 20px; border-radius:var(--pms-radius-md); border:1.5px solid transparent; }
  .pms-ind-btn2 svg{ width:16px; height:16px; }
  .pms-ind-btn2--brand{ background:var(--pms-gradient-brand); color:#fff; box-shadow:var(--pms-glow-brand); }
  .pms-ind-btn2--ghost{ background:var(--pms-surface-1); color:var(--pms-ink-primary); border-color:var(--pms-border-strong); }
  @media (max-width:760px){ .pms-ind-body{ grid-template-columns:1fr; } }
  @media (prefers-reduced-motion: reduce){ .pms-ind,.pms-ind-panel{ transition:none !important; } }

/* ---- inline block @173824 ---- */

    /* Flex, not a 3-col grid. 13 product cards in 3 columns leaves the 13th
       ("Accounting") stranded alone in the bottom-left — the grid reads as
       unfinished. Wrapping flex with justify-content:center centres whatever the
       short final row holds, at every column count, with no dependency on the
       item count. Same fix as #why-us. Card proportions are preserved by the
       ~1/3 basis; min-width keeps the 3-up / 2-up / 1-up wrap points. */
    .bapps-grid{ display:flex; flex-wrap:wrap; justify-content:center;
      gap:24px; margin-top:28px; }
    .bapps-grid > .bapps-card{ flex:0 1 calc(33.333% - 16px); min-width:250px; }
    /* The grid is now flex, so grid-template-columns is a no-op here — these
       restate the 2-up / 1-up wrap points as flex-basis. Without this the cards
       stayed pinned at min-width:250px on a 342px mobile container. */
    @media (max-width:820px){
      .bapps-grid{ gap:20px; }
      .bapps-grid > .bapps-card{ flex-basis:calc(50% - 10px); min-width:240px; }
    }
    @media (max-width:560px){
      .bapps-grid{ gap:16px; }
      .bapps-grid > .bapps-card{ flex-basis:100%; min-width:0; }
    }
    .bapps-card{ display:flex; flex-direction:column; gap:10px; background:var(--pms-surface-1,#fff);
      border:1px solid var(--pms-border-inverse,rgba(255,255,255,0.12)); border-radius:var(--pms-radius-xl,16px); padding:24px;
      text-decoration:none; color:inherit; box-shadow:var(--pms-shadow-sm,0 1px 3px rgba(15,23,42,0.06));
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .bapps-card:hover{ transform:translateY(-4px); border-color:rgba(59,106,160,0.45);
      box-shadow:0 14px 34px rgba(15,23,42,0.14); }
    @media (prefers-reduced-motion: reduce){ .bapps-card, .bapps-card:hover{ transition:none; transform:none; } }
    .bapps-ic{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg,rgba(59,106,160,0.12),rgba(34,182,115,0.16)); color:#1e293b; }
    .bapps-ic svg{ width:23px; height:23px; }
    .bapps-card b{ font-size:16px; font-weight:800; color:var(--pms-ink-primary,#0f172a); }
    .bapps-card p{ font-size:13px; line-height:1.5; color:var(--pms-ink-secondary,#475569); margin:0; }
    .bapps-feats{ display:block; margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
    .bapps-feats li{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; line-height:1.45; color:var(--pms-ink-secondary,#475569); }
    .bapps-feats li svg{ width:13px; height:13px; flex-shrink:0; margin-top:2px; color:var(--pms-brand-700,#1a6b49); }
    .bapps-cta{ margin-top:auto; padding-top:12px; font-size:13px; font-weight:800; color:#1e293b;
      display:flex; align-items:center; gap:6px; }
    .bapps-cta svg{ width:15px; height:15px; transition:transform .18s ease; }
    .bapps-card:hover .bapps-cta svg{ transform:translateX(3px); }
    .bapps-demo-tag{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
      color:#1e293b; background:rgba(59,106,160,0.1); border-radius:99px; padding:3px 9px; margin-left:auto; }
    .bapps-hd-row{ display:flex; align-items:center; gap:10px; }
    /* NOTE: an earlier grid-based orphan fix lived here —
         .bapps-card:last-child:nth-child(3n+1){ grid-column:1/-1;
           max-width:calc((100% - 2*24px)/3); justify-self:start; }
       It is removed because the container is now flex. grid-column and
       justify-self silently no-op under flex, but the max-width did NOT: it was
       unscoped by breakpoint, so it capped the last card at one third of the
       container at EVERY width — 106px inside a 366px phone viewport, which
       rendered the Accounting card as a single-word-per-line column. The
       centred flex row below handles the short final row at every breakpoint
       without any item-count or column-count assumption. */
  
/* ---- inline block @192826 ---- */

  /* Opt out of the global `section:not(.hero){content-visibility:auto}` rule:
     the horizontal rail needs its full width laid out at all times so scroll
     measurements (arrows / auto-advance) are correct. Higher specificity than
     the global rule wins. */
  .pms-homepage .story-sec { content-visibility: visible; }
  .story-sec { padding: clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px); overflow: hidden; }
  .story-wrap { position: relative; margin-top: 8px; }
  /* NOTE: no CSS scroll-snap here on purpose — it reverts the JS arrow/auto-
     advance scroll back to the first card once the programmatic scroll settles.
     Native drag/trackpad + the rAF-eased arrows give a clean feel without it. */
  .story-rail { display: flex; gap: 20px; overflow-x: auto;
    padding: 8px 24px 24px; margin: 0 -24px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
  .story-rail::-webkit-scrollbar { display: none; }
  .story-card { flex: 0 0 clamp(280px, 80vw, 366px);
    background: var(--pms-surface-1); border: 1px solid var(--pms-border);
    border-radius: var(--pms-radius-xl); overflow: hidden; box-shadow: var(--pms-shadow-md);
    display: flex; flex-direction: column;
    transition: transform .32s var(--pms-ease-out-quart), box-shadow .32s var(--pms-ease-out-quart), border-color .32s; }
  .story-card:hover { transform: translateY(-5px); box-shadow: var(--pms-shadow-xl); border-color: rgba(44,82,130,0.28); }

  /* Dark mini-UI header — selective dark moment, Vercel/Linear flavour */
  .smini { background: var(--pms-surface-ink); color: #fff; padding: 16px; }
  .smini-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 13px; }
  .smini-bar .d { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); }
  .smini-bar .lbl { margin-left: 7px; font-size:11px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,0.55); }
  .smini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,0.06); margin-bottom: 7px; }
  .smini-row:last-child { margin-bottom: 0; }
  .smini-row .k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.88); }
  .smini-row .k svg { width: 14px; height: 14px; color: var(--pms-brand-lime); flex: 0 0 auto; }
  .smini-row .v { font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap; }
  .smini-row.hot { background: linear-gradient(135deg, rgba(110,231,168,0.20), rgba(44,82,130,0.16));
    border: 1px solid rgba(110,231,168,0.34); }
  .smini-row.hot .v { color: var(--pms-brand-lime); }

  .story-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
  .story-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em; color: var(--pms-brand-700); }
  .story-tag svg { width: 15px; height: 15px; }
  .story-h { font-family: var(--pms-font-display); font-size: 19.5px; font-weight: 800;
    letter-spacing: -.02em; line-height: 1.18; color: var(--pms-ink-primary); margin: 1px 0 0; }
  .story-p { font-size: 14.5px; line-height: 1.56; color: var(--pms-ink-muted); margin: 0; }
  .story-stat { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: var(--pms-radius-full); background: var(--pms-gradient-soft);
    border: 1px solid rgba(44,82,130,0.16); font-size: 12.5px; font-weight: 800; color: var(--pms-brand-900); }
  .story-stat svg { width: 14px; height: 14px; color: var(--pms-brand-700); }

  /* Controls + edge fade */
  .story-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
  .story-hint { font-size: 12.5px; font-weight: 600; color: var(--pms-ink-muted); }
  .story-arrows { display: flex; gap: 8px; }
  .story-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--pms-border-strong);
    background: var(--pms-surface-1); cursor: pointer; display: grid; place-items: center; color: var(--pms-ink-secondary);
    box-shadow: var(--pms-shadow-sm); transition: border-color .18s, color .18s, transform .18s, box-shadow .18s; }
  .story-arrow svg { width: 18px; height: 18px; }
  .story-arrow:hover { border-color: var(--pms-brand-700); color: var(--pms-brand-700); transform: translateY(-1px); box-shadow: var(--pms-shadow-md); }
  @media (max-width: 640px) { .story-arrows { display: none; } }
  @media (prefers-reduced-motion: reduce) { .story-card { transition: none !important; } }

/* ---- inline block @197553 ---- */

  /* Homepage priority glue (4E). Phone: the story rail is desktop-only, so its heading copy and hint go too. */
  [data-plan-gate][hidden] { display: none !important; }
  @media (max-width: 640px) { #how .hx-hide-phone, #start-here .hx-hide-phone, #how .story-controls { display: none !important; } #how.story-sec { padding-top: 28px; padding-bottom: 8px; } #start-here { padding-block: 8px !important; } }
  @media (min-width: 641px) { #start-here { padding-block: 8px !important; } }
  /* The hero already carries "No website yet? Build a starter kit" and pillar 3 links to the templates, so the repeat row is
     hidden at every size (re-lead 2026-10-09). The row stays in the markup and #pmsKit below it still opens from the hero link. */
  #start-here .hx-startrow { display: none; }
  #how .hx-how { margin-bottom: 22px; }
  /* hero form text: beat the homepage's global p sizing */
  .pms-homepage .hx-scan-hint { font-size: 13px; line-height: 1.45; margin: 8px 0 0; }
  .pms-homepage .hx-scan-hint a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
  .pms-homepage .hx-scan-err, .pms-homepage .hx-scan-status { font-size: 14px; line-height: 1.4; margin: 8px 0 0; }
  .pms-homepage .hx-scan-err[hidden] { display: none; }
  /* tabs: full labels on desktop, short on phones */
  /* #business-apps: the 13th card keeps the ordinary card layout (centred in its row); the spanning layout in
     pms-home.css assumed the old bullet list and would orphan the new "Inside" chips. */
  @media (min-width: 1000px) {
    #business-apps .bapps-grid > .bapps-card:last-child:nth-child(3n+1) { flex: 0 1 calc(33.333% - 16px); max-width: none; display: flex; grid-template-columns: none; grid-template-areas: none; }
    #business-apps .bapps-card:last-child:nth-child(3n+1) .bapps-hd-row, #business-apps .bapps-card:last-child:nth-child(3n+1) > b, #business-apps .bapps-card:last-child:nth-child(3n+1) > p { grid-area: auto; }
    #business-apps .bapps-card:last-child:nth-child(3n+1) .bapps-cta { grid-area: auto; margin-top: auto; padding-top: 12px; }
    #business-apps .bapps-card:last-child:nth-child(3n+1) .bapps-demo-tag { display: inline-block; }
  }
  /* four across on wide screens keeps the dashboards block compact */
  @media (min-width: 1200px) {
    #business-apps .bapps-grid { gap: 18px; }
    #business-apps .bapps-grid > .bapps-card { flex: 0 1 calc(25% - 14px); min-width: 240px; padding: 20px; gap: 8px; }
    #business-apps .bapps-grid > .bapps-card:last-child:nth-child(3n+1) { flex: 0 1 calc(25% - 14px); }
    #business-apps .bapps-ic { width: 52px !important; height: 52px !important; }
  }
  .pms-homepage .hx-apps-head p, #plans .section-head p { margin: 0 !important; }
  @media (max-width: 640px) { #plans .hx-plan-body { display: block; -webkit-line-clamp: unset; overflow: visible; } }
  /* vertical rhythm: the new order has more sections, so each one gives back a little padding */
  @media (min-width: 641px) {
    #plans { padding-block: clamp(36px, 4vw, 56px) !important; }
    #how-ai-works.aiw-sec { padding-block: clamp(32px, 4vw, 52px) !important; }
    #how.story-sec { padding-top: clamp(36px, 4vw, 52px); padding-bottom: clamp(28px, 3.5vw, 44px); }
    #business-apps { padding-block: clamp(40px, 4.5vw, 64px) !important; }
  }
  @media (min-width: 641px) {
    #design-studio.ds-section { padding: 44px 0 52px !important; }
    .final-cta { padding-block: clamp(40px, 5vw, 64px) !important; }
    #popular-upgrades { padding-bottom: clamp(32px, 4vw, 48px) !important; }
  }
  #faq.seo-faq { margin-top: 40px !important; }
  /* phone plan cards: name and price share a row so the four cards stay compact */
  @media (max-width: 559px) {
    #plans .hx-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: baseline; }
    #plans .hx-plan-name { grid-column: 1; grid-row: 1; }
    #plans .hx-plan-price { grid-column: 2; grid-row: 1; justify-self: end; }
    #plans .hx-plan-price b { font-size: 26px; }
    #plans .hx-plan-head, #plans .hx-plan-body, #plans .hx-plan-cta { grid-column: 1 / -1; }
    #plans .hx-plan-cta, #plans .hx-plan-body + .hx-plan-cta { margin-top: 8px; min-height: 44px; }
    #plans .hx-plan--feat .hx-plan-name { padding-top: 4px; }
  }
  @media (max-width: 640px) { #business-apps .hx-money-card { min-height: 72px; padding: 10px 14px; } #business-apps .hx-money { gap: 8px; } #business-apps .hx-apps-head p { font-size: 15px; } }
  .hx-tab-short { display: none; }
  @media (max-width: 640px) { .hx-tab-long { display: none; } .hx-tab-short { display: inline; } }
  /* the "Recommended" tag: keep the star at icon size and the word on one line */
  #popular-upgrades .bfeat-tag { white-space: nowrap; }
  #popular-upgrades .bfeat-tag svg { width: 14px; height: 14px; flex: 0 0 auto; }
  /* #why-us: the three cards fill the column on phones (the shared 248px min-width left them narrow) */
  @media (max-width: 560px) { #why-us .why-grid { gap: 12px; margin-top: 22px; } #why-us .why-grid .why-card { flex: 1 1 100%; min-width: 0; padding: 18px 18px; } #why-us .why-grid .why-ic { width: 40px; height: 40px; margin-bottom: 10px; } }
  /* #popular-upgrades on phones: six compact rows (icon left, text right) instead of six tall cards */
  @media (max-width: 640px) {
    #popular-upgrades { padding-bottom: 32px !important; }
    #popular-upgrades .hx-try { display: none; }
    #popular-upgrades .bento { gap: 10px; }
    #popular-upgrades .bento-card:not(.b-feat) { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px; min-height: 0; }
    #popular-upgrades .bento-card:not(.b-feat) .ic { grid-row: 1 / span 3; width: 48px !important; height: 48px !important; margin: 0; }
    #popular-upgrades .bento-card:not(.b-feat) > b, #popular-upgrades .bento-card:not(.b-feat) > .d, #popular-upgrades .bento-card:not(.b-feat) > .more { grid-column: 2; margin: 0; }
    #popular-upgrades .bento-card:not(.b-feat) > b { font-size: 15.5px; }
    #popular-upgrades .bento-card.b-feat { padding: 18px; }
  }

/* ---- inline block @228783 ---- */

  .aiw-sec{ padding:clamp(56px,7vw,90px) 0;
    background:
      radial-gradient(120% 120% at 100% 0%, rgba(110,231,168,0.08), transparent 58%),
      linear-gradient(180deg, var(--pms-surface-0), var(--pms-surface-2));
    border-top:1px solid var(--pms-border); }
  .aiw-head{ max-width:680px; margin-bottom:clamp(28px,4vw,40px); }
  .aiw-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  .aiw-card{ position:relative; display:flex; flex-direction:column; gap:11px;
    background:var(--pms-surface-1); border:1.5px solid var(--pms-border);
    border-radius:var(--pms-radius-xl); padding:24px 22px 22px;
    text-decoration:none; color:var(--pms-ink-primary); overflow:hidden;
    transition:transform var(--pms-duration-normal) var(--pms-ease-out-quart),
               box-shadow var(--pms-duration-normal) var(--pms-ease-out-quart),
               border-color var(--pms-duration-normal) var(--pms-ease-out-quart); }
  .aiw-card:hover{ transform:translateY(-6px); box-shadow:var(--pms-shadow-xl);
    border-color:var(--pms-brand-500); }
  .aiw-step{ position:absolute; top:16px; right:20px; font-family:var(--pms-font-display);
    font-weight:var(--pms-fw-black); font-size:34px; line-height:1;
    color:#cbe0ee; pointer-events:none; }
  .aiw-step::before{ content:attr(data-n); }   /* decorative number lives in CSS so it is not read or contrast-checked as text */
  .aiw-ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
    background:var(--pms-gradient-soft); color:var(--pms-brand-700); flex:0 0 auto; }
  .aiw-ic svg{ width:24px; height:24px; }
  .aiw-card h3{ font-family:var(--pms-font-display); font-size:18px; font-weight:var(--pms-fw-bold);
    margin:5px 0 0; color:var(--pms-ink-primary); letter-spacing:-.01em; }
  .aiw-card p{ margin:0; font-size:14px; line-height:1.55; color:var(--pms-ink-muted); }
  .aiw-res{ margin-top:auto; padding-top:8px; font-size:12.5px; font-weight:var(--pms-fw-bold);
    color:var(--pms-brand-700); display:inline-flex; align-items:center; gap:6px; }
  .aiw-res svg{ width:15px; height:15px; transition:transform .25s var(--pms-ease-out-quart); }
  .aiw-card:hover .aiw-res svg{ transform:translateX(3px); }
  @media (max-width:980px){ .aiw-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .aiw-grid{ grid-template-columns:1fr; } }
  @media (prefers-reduced-motion: reduce){
    .aiw-card{ transition:none !important; }
    .aiw-card:hover{ transform:none !important; }
  }

/* ---- inline block @235489 ---- */

  .pms-entry-section{ padding-block:clamp(48px,6vw,92px); }
  .pms-entry-section .section-head{ margin-bottom:28px; }
  .pe-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto; }
  .pe-card{ position:relative; text-align:left; cursor:pointer; font-family:inherit; text-decoration:none;
    background:var(--pms-surface-1); border:1.5px solid var(--pms-border); border-radius:var(--pms-radius-xl);
    padding:26px 24px 22px; display:flex; flex-direction:column; gap:10px; color:var(--pms-ink-primary);
    transition:transform var(--pms-duration-normal) var(--pms-ease-out-quart),
               box-shadow var(--pms-duration-normal) var(--pms-ease-out-quart),
               border-color var(--pms-duration-normal) var(--pms-ease-out-quart); }
  .pe-card:hover{ transform:translateY(-4px); box-shadow:var(--pms-shadow-lg); border-color:var(--pms-brand-500); }
  .pe-card .pe-ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
    background:var(--pms-gradient-soft); color:var(--pms-brand-800); }
  .pe-card .pe-ic svg{ width:26px; height:26px; }
  .pe-card--new .pe-ic{ background:var(--pms-gradient-glow); color:#07271c; }
  .pe-card b{ font-family:var(--pms-font-display); font-size:20px; font-weight:var(--pms-fw-bold); letter-spacing:var(--pms-tracking-tight); }
  .pe-card .pe-d{ font-size:14.5px; line-height:1.5; color:var(--pms-ink-muted); flex:1 1 auto; }
  .pe-card .pe-who{ font-size:12px; font-weight:var(--pms-fw-bold); letter-spacing:.04em; text-transform:uppercase; color:var(--pms-brand-700); }
  .pe-card .pe-go{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:var(--pms-fw-extrabold); color:var(--pms-brand-700); margin-top:2px; }
  .pe-card .pe-go svg{ width:16px; height:16px; transition:transform var(--pms-duration-fast); }
  .pe-card:hover .pe-go svg{ transform:translateX(4px); }
  .pe-card--new .pe-who, .pe-card--new .pe-go{ color:var(--pms-brand-800); }
  /* Browse path — soft, low-commitment third card. Equal weight, no dominance. */
  .pe-card--browse .pe-ic{ background:var(--pms-gradient-soft); color:var(--pms-brand-800); }
  .pe-card--browse .pe-tag{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:2px;
    font-size:11px; font-weight:var(--pms-fw-bold); letter-spacing:.03em; color:var(--pms-brand-700);
    background:var(--pms-surface-2); border:1px solid var(--pms-border); border-radius:var(--pms-radius-full); padding:3px 10px; }
  /* Tablet & below: stack to a single readable column (browse card lands last). */
  @media (max-width:880px){ .pe-cards{ grid-template-columns:1fr; max-width:480px; } }

  /* ── Starter-kit wizard ── */
  .kit{ max-width:900px; margin:22px auto 0; background:var(--pms-surface-1);
    border:1.5px solid var(--pms-brand-500); border-radius:var(--pms-radius-xl);
    box-shadow:var(--pms-shadow-xl); overflow:hidden; }
  .kit-top{ display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--pms-border);
    background:var(--pms-gradient-brand-deep); color:#fff; }
  .kit-top .kt-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
    background:var(--pms-gradient-glow); color:#07271c; }
  .kit-top .kt-ic svg{ width:22px; height:22px; }
  .kit-top h3{ font-family:var(--pms-font-display); font-size:17px; font-weight:var(--pms-fw-bold); margin:0; color:#fff; letter-spacing:var(--pms-tracking-tight); }
  .kit-top .kt-sub{ font-size:12.5px; color:rgba(255,255,255,0.72); }
  .kit-steps{ display:flex; gap:6px; margin-left:auto; }
  .kit-steps i{ width:22px; height:5px; border-radius:999px; background:rgba(255,255,255,0.24); transition:background var(--pms-duration-normal); }
  .kit-steps i.on{ background:var(--pms-brand-lime); }
  .kit-close{ background:rgba(255,255,255,0.12); border:0; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:18px; line-height:1; flex:0 0 auto; }
  .kit-close:hover{ background:rgba(255,255,255,0.22); }
  .kit-body{ padding:24px 22px; }
  .kit-step{ display:none; }
  .kit-step.on{ display:block; animation:kitIn .35s var(--pms-ease-out-quart); }
  @keyframes kitIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  .kit-q{ font-family:var(--pms-font-display); font-size:19px; font-weight:var(--pms-fw-bold); letter-spacing:var(--pms-tracking-tight); margin:0 0 4px; color:var(--pms-ink-primary); }
  .kit-hint{ font-size:13.5px; color:var(--pms-ink-muted); margin:0 0 16px; }
  .kit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:10px; }
  .kit-opt{ display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; font-family:inherit;
    background:var(--pms-surface-2); border:1.5px solid var(--pms-border); border-radius:var(--pms-radius-md);
    padding:13px 14px; color:var(--pms-ink-primary); transition:border-color var(--pms-duration-fast), background var(--pms-duration-fast), transform var(--pms-duration-fast); }
  .kit-opt:hover{ border-color:var(--pms-brand-500); transform:translateY(-2px); }
  .kit-opt.sel{ border-color:var(--pms-brand-700); background:rgba(44,82,130,0.07); box-shadow:inset 0 0 0 1px var(--pms-brand-700); }
  .kit-opt .o-ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
    background:var(--pms-gradient-soft); color:var(--pms-brand-800); }
  .kit-opt .o-ic svg{ width:19px; height:19px; }
  .kit-opt .o-t{ min-width:0; flex:1 1 auto; }
  .kit-opt .o-t b{ display:block; font-size:14px; font-weight:var(--pms-fw-bold); overflow-wrap:break-word; word-break:break-word; }
  .kit-opt .o-t span{ font-size:12px; color:var(--pms-ink-muted); }
  .kit-opt .o-chk{ margin-left:auto; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--pms-border-strong); display:grid; place-items:center; flex:0 0 auto; color:#fff; }
  .kit-opt.sel .o-chk{ background:var(--pms-brand-700); border-color:var(--pms-brand-700); }
  .kit-opt .o-chk svg{ width:13px; height:13px; opacity:0; }
  .kit-opt.sel .o-chk svg{ opacity:1; }
  .kit-field{ margin-bottom:14px; }
  .kit-field label{ display:block; font-size:13px; font-weight:var(--pms-fw-bold); color:var(--pms-ink-secondary); margin-bottom:6px; }
  .kit-field input{ width:100%; font-family:inherit; font-size:15px; padding:12px 14px; border:1.5px solid var(--pms-border-strong); border-radius:var(--pms-radius-md); outline:none; background:var(--pms-surface-1); color:var(--pms-ink-primary); transition:border-color var(--pms-duration-fast); }
  .kit-field input:focus{ border-color:var(--pms-brand-700); box-shadow:0 0 0 3px rgba(44,82,130,0.12); }
  .kit-foot{ display:flex; align-items:center; gap:10px; margin-top:20px; }
  .kit-foot .kit-back{ background:none; border:0; color:var(--pms-ink-muted); font-weight:var(--pms-fw-bold); font-size:14px; cursor:pointer; font-family:inherit; padding:8px 4px; }
  .kit-foot .kit-back:hover{ color:var(--pms-ink-primary); }
  .kit-foot .kit-next{ margin-left:auto; }
  .kit-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; text-decoration:none;
    font-weight:var(--pms-fw-extrabold); font-size:14.5px; padding:12px 22px; border-radius:var(--pms-radius-md); border:1.5px solid transparent; }
  .kit-btn svg{ width:16px; height:16px; }
  .kit-btn--brand{ background:var(--pms-gradient-brand); color:#fff; box-shadow:var(--pms-glow-brand); }
  .kit-btn--brand:hover{ transform:scale(1.02); }
  .kit-btn--ghost{ background:var(--pms-surface-1); color:var(--pms-ink-primary); border-color:var(--pms-border-strong); }
  .kit-btn--ghost:hover{ border-color:var(--pms-brand-900); }
  .kit-btn[disabled]{ opacity:.45; pointer-events:none; }
  /* result */
  .kit-result{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
  .kit-lines{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
  .kit-lines li{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; padding:10px 0; border-bottom:1px dashed var(--pms-border); }
  .kit-lines li .ln{ display:flex; align-items:center; gap:9px; color:var(--pms-ink-secondary); }
  .kit-lines li .ln svg{ width:16px; height:16px; color:var(--pms-brand-600); flex:0 0 auto; }
  .kit-lines li .pr{ font-weight:var(--pms-fw-bold); color:var(--pms-ink-primary); white-space:nowrap; }
  .kit-lines li .pr.free{ color:var(--pms-brand-700); }
  .kit-side{ background:var(--pms-surface-ink); border-radius:var(--pms-radius-lg); padding:20px; color:#fff; align-self:start; }
  .kit-side .ks-tpl{ font-size:11.5px; font-weight:var(--pms-fw-extrabold); letter-spacing:.08em; text-transform:uppercase; color:var(--pms-brand-lime); }
  .kit-side .ks-name{ font-family:var(--pms-font-display); font-size:20px; font-weight:var(--pms-fw-bold); margin:4px 0 14px; }
  .kit-side .ks-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:rgba(255,255,255,0.7); padding:7px 0; }
  .kit-side .ks-row b{ color:#fff; font-size:15px; }
  .kit-side .ks-total{ margin-top:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.16); display:flex; justify-content:space-between; align-items:baseline; }
  .kit-side .ks-total .lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,0.6); font-weight:var(--pms-fw-bold); }
  .kit-side .ks-total .amt{ font-family:var(--pms-font-display); font-weight:var(--pms-fw-black); font-size:26px; color:#fff; }
  .kit-side .ks-note{ font-size:11px; color:rgba(255,255,255,0.5); margin-top:6px; line-height:1.4; }
  .kit-result-cta{ grid-column:1 / -1; display:flex; gap:11px; flex-wrap:wrap; margin-top:4px; }
  @media (max-width:760px){ .pe-cards{ grid-template-columns:1fr; } .kit-result{ grid-template-columns:1fr; } }
  @media (prefers-reduced-motion: reduce){ .pe-card,.kit-opt,.kit-btn{ transition:none !important; } .pe-card:hover,.kit-opt:hover{ transform:none !important; } .kit-step.on{ animation:none; } }

/* ---- inline block @283693 ---- */

  .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(120px, auto);
    gap: 16px; max-width: 1080px; margin: 0 auto; }
  /* Asymmetric placement — one tall feature, two wide mediums, two small. */
  .bento .b-ai   { grid-column: 1 / 4; grid-row: 1 / 3; }
  .bento .b-pay  { grid-column: 4 / 7; grid-row: 1 / 2; }
  .bento .b-book { grid-column: 4 / 5; grid-row: 2 / 3; }
  .bento .b-seo  { grid-column: 5 / 7; grid-row: 2 / 3; }
  .bento .b-pos  { grid-column: 1 / 4; grid-row: 3 / 4; }
  .bento .b-mkt  { grid-column: 4 / 7; grid-row: 3 / 4; }

  .bento-card { position: relative; display: flex; flex-direction: column; gap: 7px;
    padding: 22px; border-radius: var(--pms-radius-xl); background: var(--pms-surface-1);
    border: 1px solid var(--pms-border); text-decoration: none; color: inherit; overflow: hidden;
    box-shadow: var(--pms-shadow-sm);
    transition: transform .3s var(--pms-ease-out-quart), box-shadow .3s var(--pms-ease-out-quart); }
  /* Gradient border that fades in on hover (mask trick) */
  .bento-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
    background: linear-gradient(135deg, rgba(110,231,168,0.65), rgba(44,82,130,0.35) 45%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
  .bento-card:hover { transform: translateY(-6px); box-shadow: var(--pms-shadow-xl); }
  .bento-card:hover::before { opacity: 1; }
  .bento-card .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--pms-gradient-soft);
    color: var(--pms-brand-700); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.06); }
  .bento-card .ic svg { width: 23px; height: 23px; }
  .bento-card b { font-family: var(--pms-font-display); font-size: 17px; font-weight: 800;
    letter-spacing: -.01em; color: var(--pms-ink-primary); margin-top: 4px; }
  .bento-card .d { font-size: 13.5px; color: var(--pms-ink-muted); line-height: 1.5; }
  .bento-card .more { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 800;
    color: var(--pms-brand-700); display: inline-flex; align-items: center; gap: 6px; }
  .bento-card .more svg { width: 15px; height: 15px; transition: transform .25s var(--pms-ease-out-quart); }
  .bento-card:hover .more svg { transform: translateX(3px); }

  /* Marquee feature card — dark, animated chat */
  .bento-card.b-feat { background: var(--pms-surface-ink); border-color: transparent; padding: 26px; }
  .bento-card.b-feat::after { content: ''; position: absolute; inset: 0;
    background: radial-gradient(70% 60% at 80% 0%, rgba(110,231,168,0.18), transparent 60%); pointer-events: none; }
  .bento-card.b-feat .ic { background: var(--pms-gradient-glow); color: #07271c; }
  .bento-card.b-feat b { color: #fff; font-size: 21px; }
  .bento-card.b-feat .d { color: rgba(255,255,255,0.72); font-size: 14.5px; }
  .bento-card.b-feat .more { color: var(--pms-brand-lime); }
  .bento-card.b-feat:hover { box-shadow: var(--pms-glow-lime), var(--pms-shadow-xl); }
  .bfeat-tag { position: relative; display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; font-size:11px;
    font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--pms-brand-lime);
    background: rgba(110,231,168,0.12); border: 1px solid rgba(110,231,168,0.28); padding: 5px 11px; border-radius: 999px; }
  .bfeat-tag::before { content: ''; position: absolute; inset: -3px; border-radius: 999px;
    background: rgba(110,231,168,0.10); opacity: 0; will-change: transform, opacity;
    animation: bftPulse 3s ease-in-out infinite; pointer-events: none; z-index: -1; }
  .bfeat-tag svg { animation: bftTwinkle 2.6s ease-in-out infinite; transform-origin: center; }
  .bfeat-tag::after { content: ''; position: absolute; top: 2px; right: 9px; width: 4px; height: 4px;
    border-radius: 50%; background: var(--pms-brand-lime); box-shadow: 0 0 6px var(--pms-brand-lime);
    opacity: 0; animation: bftSpark 2.6s ease-in-out infinite; animation-delay: .9s; }
  @keyframes bftPulse { 0%,100% { transform: scale(1); opacity: 0; }
    50% { transform: scale(1.12); opacity: 1; } }
  @keyframes bftTwinkle { 0%,100% { transform: scale(1) rotate(0); }
    45% { transform: scale(1.22) rotate(16deg); } }
  @keyframes bftSpark { 0%,100% { opacity: 0; transform: scale(.4); }
    50% { opacity: 1; transform: scale(1); } }
  .bfeat-demo { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 1; }
  .bd-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
  .bd-msg.a { align-self: flex-end; background: var(--pms-gradient-brand); color: #fff; border-bottom-right-radius: 4px; }
  .bd-msg.b { align-self: flex-start; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.10); border-bottom-left-radius: 4px; }
  .bd-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; border-bottom-left-radius: 4px; }
  .bd-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--pms-brand-lime); opacity: .5;
    animation: pmsType 1.2s ease-in-out infinite; }
  .bd-typing i:nth-child(2){ animation-delay: .18s } .bd-typing i:nth-child(3){ animation-delay: .36s }

  /* ===== Interactive mini-prompt on the AI feature card ===== */
  .bai-prompt { margin-top: 16px; position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 10px;
    max-height: 200px; opacity: 1; overflow: hidden;
    transition: max-height .42s var(--pms-ease-out-quart), opacity .3s, transform .42s var(--pms-ease-out-quart); }
  .b-feat.is-answering .bai-prompt { max-height: 0; opacity: 0; transform: translateY(-8px); margin-top: 0; pointer-events: none; }
  .bai-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .bai-chip { font-family: inherit; cursor: pointer; font-size: 12px; font-weight: 700;
    color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 6px 13px;
    transition: background .2s, border-color .2s, color .2s; }
  .bai-chip:hover { background: rgba(255,255,255,0.13); color: #fff; }
  .bai-chip.on { color: #fff; background: linear-gradient(135deg,#0e6b4b,#0b543b); border-color: transparent; box-shadow: 0 4px 12px rgba(110,231,168,0.28); }
  .bai-input-row { display: flex; gap: 8px; align-items: center; }
  .bai-input { flex: 1; min-width: 0; font-family: inherit; font-size: 13.5px; color: #fff;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
    border-radius: 11px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s; }
  .bai-input::placeholder { color: rgba(255,255,255,0.45); }
  .bai-input:focus { outline: none; border-color: var(--pms-brand-lime); box-shadow: 0 0 0 3px rgba(110,231,168,0.18); }
  .bai-gen { font-family: inherit; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 800; color: #07271c; background: var(--pms-gradient-glow);
    border: 0; border-radius: 11px; padding: 11px 15px; box-shadow: 0 6px 16px rgba(110,231,168,0.30);
    transition: transform .18s var(--pms-ease-out-quart), box-shadow .18s; }
  .bai-gen svg { width: 14px; height: 14px; }
  .bai-gen:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(110,231,168,0.38); }

  /* Answer (typed in by JS) — dark-surface variant of the hero answer */
  .bai-answer { margin-top: 16px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; }
  .bai-answer .bai-q { align-self: flex-end; max-width: 90%; padding: 9px 13px; border-radius: 13px;
    border-bottom-right-radius: 4px; font-size: 12.5px; line-height: 1.4;
    background: var(--pms-gradient-brand); color: #fff; }
  .bai-answer .bai-a { align-self: flex-start; max-width: 96%; padding: 12px 14px; border-radius: 13px;
    border-bottom-left-radius: 4px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); }
  .bai-answer .bai-line { display: block; font-weight: 800; color: #fff; font-size: 13.5px; }
  .bai-answer .bai-bul { display: block; position: relative; padding-left: 19px; margin-top: 7px;
    font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.85); }
  .bai-answer .bai-bul::before { content: ''; position: absolute; left: 0; top: .5em; width: 9px; height: 9px;
    border-right: 2px solid var(--pms-brand-lime); border-top: 2px solid var(--pms-brand-lime);
    transform: translateY(-50%) rotate(45deg); }
  .bai-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    font-size: 12.5px; font-weight: 800; color: #07271c; background: var(--pms-brand-lime);
    border-radius: 999px; padding: 8px 14px; box-shadow: 0 6px 16px rgba(110,231,168,0.30); }
  .bai-cta svg { width: 13px; height: 13px; }
  .bai-cw { display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px; margin-left: 1px;
    background: var(--pms-brand-lime); animation: pvCaret .9s step-end infinite; }
  .bai-show { animation: pvBubIn .42s var(--pms-ease-out-quart) both; }

  /* Tablet: collapse to 2 columns, feature spans full width */
  @media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .bento .b-ai, .bento .b-pay, .bento .b-book, .bento .b-seo, .bento .b-pos, .bento .b-mkt {
      grid-column: auto; grid-row: auto; }
    .bento .b-ai { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .bento .b-ai { grid-column: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bento-card { transition: none !important; }
    .bento-card:hover { transform: none !important; }
    .bd-typing i { animation: none !important; }
    .bai-prompt { transition: none !important; }
    .bai-show, .bai-cw { animation: none !important; opacity: 1 !important; transform: none !important; }
    .bfeat-tag, .bfeat-tag svg, .bfeat-tag::after { animation: none !important; }
    .bfeat-tag::after { opacity: 0 !important; }
  }

/* ---- inline block @304819 ---- */

  /* Reskinned to the forest-green system (was bespoke purple #15803d). */
  .ds-section{padding:64px 0 72px;background:linear-gradient(180deg,#fbfdfb,#f3f7f4);overflow:hidden;}
  .ds-head{text-align:center;max-width:680px;margin:0 auto 30px;}
  .ds-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:#166534;background:rgba(44,82,130,.1);padding:6px 13px;border-radius:999px;margin-bottom:14px;}
  .ds-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--pms-brand-700,#0e6b4b);animation:dsBlink 1.4s ease-in-out infinite;}
  @keyframes dsBlink{0%,100%{opacity:1}50%{opacity:.3}}
  .ds-head h2{font-family:var(--pms-font-display);font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1.12;margin:0 0 10px;color:#0f172a;}
  .ds-head h2 .g{background:linear-gradient(135deg,#0e6b4b,#6ee7a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .ds-head p{font-size:15.5px;color:#5b6478;margin:0;line-height:1.6;}
  .ds-stage-wrap{max-width:1060px;margin:0 auto;}
  .ds-stage{position:relative;height:520px;perspective:1600px;}
  @media(max-width:900px){.ds-stage{height:600px;}}
  @media(max-width:560px){.ds-stage{height:540px;}}
  /* One slide rendered at a time (display:none on inactive) — a fading crossfade
     overlapped two differently-coloured mockups and produced bad ghosting. */
  .ds-slide{position:absolute;inset:0;display:none;pointer-events:none;}
  .ds-slide.on{display:block;pointer-events:auto;animation:dsSlideIn .5s cubic-bezier(.4,0,.2,1);}
  @keyframes dsSlideIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
  /* Browser-framed mockup, fully themed by CSS vars so the customizer is live */
  .ds-mock{height:100%;border-radius:18px;overflow:hidden;background:var(--m-bg);color:var(--m-text);
    font-family:var(--m-font);box-shadow:0 30px 80px rgba(20,24,50,.22),0 6px 18px rgba(20,24,50,.10);
    border:1px solid rgba(20,24,50,.08);display:flex;flex-direction:column;
    transition:background .35s ease,color .35s ease;}
  .ds-chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--m-chrome);flex-shrink:0;border-bottom:1px solid var(--m-line);}
  .ds-chrome .dot{width:11px;height:11px;border-radius:50%;}
  .ds-chrome .dot:nth-child(1){background:#ff5f57}.ds-chrome .dot:nth-child(2){background:#febc2e}.ds-chrome .dot:nth-child(3){background:#28c840}
  .ds-url{margin-left:10px;flex:1;height:22px;border-radius:6px;background:var(--m-url);display:flex;align-items:center;
    padding:0 10px;font-size:11px;color:color-mix(in srgb, var(--m-muted) 74%, var(--m-text));font-family:-apple-system,Segoe UI,Inter,sans-serif;}
  .ds-body{flex:1;display:flex;flex-direction:column;padding:22px 30px;overflow:hidden;}
  .ds-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto;}
  .ds-logo{font-weight:900;font-size:17px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
  .ds-logo .mk{width:24px;height:24px;border-radius:var(--m-logo-radius,7px);background:var(--m-accent);display:grid;place-items:center;color:var(--m-on-accent);font-size:13px;}
  /* Mock muted text mixes 26% of the SAME palette's ink into its muted tone.
     Several previewed designs shipped muted values at 4.37-4.49:1 — just under
     WCAG AA at these 11-12px sizes. Mixing toward --m-text (dark on light
     palettes, light on dark ones) fixes every palette in one place without
     editing the individual design definitions. */
  .ds-links{display:flex;gap:20px;font-size:12.5px;color:color-mix(in srgb, var(--m-muted) 74%, var(--m-text));font-weight:600;}
  @media(max-width:560px){.ds-links{display:none;}}
  .ds-navbtn{padding:8px 15px;border-radius:var(--m-radius);background:var(--m-accent);color:var(--m-on-accent);font-weight:800;font-size:12.5px;}
  .ds-hero{padding:30px 0;}
  .ds-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    /* color-mix darkens whatever accent the previewed design supplies: the raw
       accent on its own soft tint measured 4.49:1 — a hair under WCAG AA at
       this 11px size. Mixing 18% ink keeps the design's hue while clearing 4.5. */
    color:color-mix(in srgb, var(--m-accent) 82%, #0b1f17);background:var(--m-accent-soft);padding:5px 11px;border-radius:999px;margin-bottom:14px;}
  .ds-h1{font-size:clamp(26px,4.4vw,46px);font-weight:var(--m-head-weight,900);line-height:1.05;margin:0 0 14px;letter-spacing:var(--m-head-tracking,-.02em);max-width:11ch;}
  .ds-h1 .hl{color:var(--m-accent);}
  .ds-sub{font-size:14.5px;color:color-mix(in srgb, var(--m-muted) 74%, var(--m-text));line-height:1.55;max-width:46ch;margin:0 0 20px;}
  .ds-cta-row{display:flex;gap:11px;flex-wrap:wrap;}
  .ds-cta{padding:12px 22px;border-radius:var(--m-radius);background:var(--m-accent);color:var(--m-on-accent);font-weight:800;font-size:13.5px;
    box-shadow:0 10px 24px var(--m-accent-glow);}
  .ds-cta.ghost{background:transparent;color:var(--m-text);border:1.5px solid var(--m-line-strong);box-shadow:none;}
  .ds-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:auto;}
  @media(max-width:560px){.ds-cards{grid-template-columns:1fr;gap:9px;}.ds-cards .ds-card:nth-child(3){display:none;}}
  .ds-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:calc(var(--m-radius) * .9);padding:14px;}
  .ds-card .ic{width:30px;height:30px;border-radius:8px;background:var(--m-accent-soft);display:grid;place-items:center;font-size:15px;margin-bottom:9px;color:var(--m-accent);}
  /* These hold inline SVG now, and font-size does not size an <svg>. */
  .ds-card .ic svg{width:15px;height:15px;display:block;}
  .ds-card .t{font-weight:800;font-size:13px;margin-bottom:3px;}
  .ds-card .d{font-size:11.5px;color:color-mix(in srgb, var(--m-muted) 74%, var(--m-text));line-height:1.45;}
  /* Style nameplate floating on each slide */
  .ds-plate{position:absolute;left:18px;bottom:16px;z-index:3;display:flex;align-items:center;gap:10px;
    background:rgba(11,16,32,.82);color:#fff;backdrop-filter:blur(8px);padding:9px 15px;border-radius:13px;box-shadow:0 8px 26px rgba(0,0,0,.3);}
  .ds-plate .nm{font-weight:800;font-size:14px;}
  .ds-plate .ds-tagline{font-size:11.5px;opacity:.7;}
  /* Controls */
  .ds-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px auto 0;}
  .ds-arrow{width:42px;height:42px;border-radius:50%;border:1.5px solid #d8dced;background:#fff;cursor:pointer;
    font-size:18px;color:#3a4157;display:grid;place-items:center;transition:all .15s ease;box-shadow:0 3px 10px rgba(20,24,50,.07);}
  .ds-arrow:hover{border-color:var(--pms-brand-700,#0e6b4b);color:var(--pms-brand-700,#0e6b4b);transform:translateY(-1px);}
  /* L-091 (X5): WCAG 2.2 target size - each dot is a 24x24 hit area (8px padding around a 9px dot, drawn with
     background-clip) instead of a bare 9px circle; the visible dot is unchanged, only the gap between dots grows. */
  .ds-dots{display:flex;gap:0;}
  .ds-dot{position:relative;width:25px;height:25px;box-sizing:border-box;border-radius:99px;background:#cfd5e6;background-clip:content-box;border:none;cursor:pointer;padding:8px;transition:all .2s ease;}
  .ds-dot::after{content:'';position:absolute;inset:-9px -2px;}
  .ds-dot.on{width:42px;background:linear-gradient(90deg,#0e6b4b,#6ee7a8);background-clip:content-box;}
  .ds-play{width:42px;height:42px;border-radius:50%;border:1.5px solid #d8dced;background:#fff;cursor:pointer;font-size:14px;color:#3a4157;display:grid;place-items:center;}
  .ds-play:hover{border-color:var(--pms-brand-700,#0e6b4b);color:var(--pms-brand-700,#0e6b4b);}
  /* Customizer */
  .ds-customizer{max-width:1060px;margin:26px auto 0;background:#fff;border:1px solid #e9ecf5;border-radius:20px;
    padding:20px 22px;box-shadow:0 14px 44px rgba(20,24,50,.08);display:flex;flex-direction:column;align-items:stretch;}
  .ds-ctrl-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9098ad;margin-bottom:9px;}
  .ds-swatches{display:flex;gap:9px;flex-wrap:wrap;}
  .ds-sw{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer;transition:transform .12s ease;position:relative;}
  .ds-sw:hover{transform:scale(1.1);}
  .ds-sw.on{border-color:#0f172a;box-shadow:0 0 0 2px #fff inset;}
  .ds-segs{display:inline-flex;background:#f1f3f9;border-radius:11px;padding:4px;gap:3px;}
  .ds-seg{border:none;background:transparent;cursor:pointer;font-weight:800;font-size:12.5px;color:#6b7385;padding:8px 13px;border-radius:8px;transition:all .15s ease;}
  .ds-seg.on{background:#fff;color:#0f172a;box-shadow:0 2px 6px rgba(20,24,50,.1);}
  .ds-build{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;border-radius:13px;font-weight:900;font-size:14px;
    padding:14px 22px;color:#fff;background:linear-gradient(135deg,#0b543b,#0e6b4b 55%,#15803d);box-shadow:0 10px 26px rgba(21,128,61,.4);
    transition:transform .14s ease,box-shadow .14s ease;white-space:nowrap;}
  .ds-build:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(21,128,61,.52);}
  .ds-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;
    background:#0f172a;color:#fff;padding:13px 20px;border-radius:13px;font-weight:700;font-size:13.5px;z-index:9999;
    box-shadow:0 16px 44px rgba(0,0,0,.3);transition:opacity .3s ease,transform .3s ease;max-width:90vw;}
  .ds-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* ===== Mobile responsiveness pass (phones/tablets — desktop untouched) ===== */
  @media (max-width:768px){
    /* Nothing in the studio may bleed past the viewport */
    .ds-section{padding:44px 0 52px;}
    .ds-stage-wrap,.ds-customizer{max-width:100%;}
    .ds-mock,.ds-slide,.ds-stage{max-width:100%;}
    .ds-mock{border-radius:14px;}
    .ds-body{padding:18px 18px;}
    /* Controls wrap, stay centered, tap-friendly (min 40px) */
    .ds-controls{flex-wrap:wrap;gap:10px;margin-top:18px;}
    .ds-arrow,.ds-play{width:44px;height:44px;}
    /* Customizer: tighter, swatches/segs wrap not overflow */
    .ds-customizer{padding:18px 16px;gap:16px;}
    .ds-segs{flex-wrap:wrap;}
    .ds-swatches{gap:8px;}
  }
  @media (max-width:560px){
    /* Fit the WHOLE mockup on a phone: enough stage height + trimmed content so
       the hero isn't clipped (it was showing only the bottom cards). */
    .ds-stage{height:520px;}
    .ds-body{padding:14px 16px;overflow:hidden;justify-content:flex-start;}
    .ds-mock{border-radius:12px;}
    .ds-h1{font-size:clamp(19px,6vw,24px);line-height:1.1;max-width:100%;margin:0 0 10px;}
    .ds-sub{display:none;}                 /* hide subtext on phones to fit the hero+cards */
    .ds-hero{padding:12px 0;}
    .ds-cta{padding:10px 16px;font-size:12.5px;}
    .ds-card{padding:11px;}
    .ds-card .t{font-size:12px;}
    .ds-card .d{font-size:11px;}
    .ds-tag{margin-bottom:10px;}
    .ds-plate{left:12px;bottom:12px;padding:7px 12px;max-width:calc(100% - 24px);}
    .ds-plate .nm{font-size:13px;}
    /* Customizer tighter on phones; build button full-width */
    .ds-customizer{padding:16px 14px;}
    .ds-segs{width:100%;justify-content:flex-start;}
    .ds-build{width:100%;justify-content:center;white-space:normal;text-align:center;padding:14px 18px;}
    .ds-controls{gap:8px;}
    .ds-dots{gap:0;}
  }
  @media (max-width:380px){
    .ds-stage{height:500px;}
    .ds-h1{font-size:19px;}
  }
  .ds-device-toggle { display:flex; gap:6px; justify-content:center; margin-top:12px; }
  .ds-dev { padding:8px 16px; border-radius:10px; border:1.5px solid var(--border,#e1e6df); background:transparent; color:var(--text-muted,#586578); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; }
  .ds-dev.on { background:var(--accent,#0e6b4b); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(44,82,130,.25); }
  .ds-stage.mobile-preview { max-width:375px; margin:0 auto; border-radius:28px; }
  .ds-stage.mobile-preview .ds-mock { border-radius:20px; }

  .ds-customize-toggle { display:block; width:100%; padding:12px 18px; border-radius:12px; border:1.5px dashed var(--border,#e1e6df); background:transparent; color:var(--text-muted,#6b7488); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; margin-bottom:12px; }
  .ds-customize-toggle:hover { border-color:var(--accent,#0e6b4b); color:var(--accent,#0e6b4b); }
  .ds-customize-body { display:none; gap:18px; margin-bottom:14px; }
  .ds-customizer.expanded .ds-customize-body { display:flex; flex-wrap:wrap; animation:dsFadeIn .3s ease; }
  @keyframes dsFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ---- inline block @339133 ---- */

  #why-us { padding: clamp(40px,5vw,72px) 0; }
  /* Flex, not auto-fit grid. With 5 cards, `repeat(auto-fit, minmax(248px,1fr))`
     fits 4 across at desktop and strands the 5th alone on the left — it reads as
     a layout mistake. Flex with a ~1/3 basis gives a deliberate 3 + 2, and
     justify-content centres the short trailing row. min-width keeps the wrap
     points: 3-up desktop, 2-up tablet, 1-up mobile. */
  #why-us .why-grid { display:flex; flex-wrap:wrap; justify-content:center;
    gap:18px; margin-top:34px; }
  #why-us .why-card { flex:0 1 calc(33.333% - 12px); min-width:248px; }
  /* Glass surface — lets the section-level aurora glow read through the card. */
  #why-us .why-card { background:var(--pms-glass-bg, rgba(255,255,255,0.62));
    -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
    border:1px solid var(--pms-glass-border, rgba(11,59,44,0.10));
    border-radius:var(--pms-radius-lg); padding:24px 22px;
    box-shadow:0 1px 0 var(--pms-glass-highlight, rgba(255,255,255,0.65)) inset, var(--pms-shadow-sm);
    transition:transform .2s var(--pms-ease-out-quart), box-shadow .2s, border-color .2s; }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #why-us .why-card { background:var(--pms-surface-1); }
  }
  #why-us .why-card:hover { transform:translateY(-4px); box-shadow:var(--pms-shadow-md); border-color:var(--pms-brand-400,#34d399); }
  #why-us .why-ic { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px;
    background:var(--pms-gradient-soft); color:var(--pms-brand-700); margin-bottom:14px; }
  #why-us .why-ic svg { width:24px; height:24px; }
  #why-us .why-card h3 { font-family:var(--pms-font-display); font-size:17px; font-weight:var(--pms-fw-extrabold);
    margin:0 0 7px; letter-spacing:-0.01em; color:var(--pms-ink-primary); }
  #why-us .why-card p { font-size:14px; color:var(--pms-ink-secondary); line-height:1.56; margin:0; }
  #why-us .why-card p b { color:var(--pms-brand-800); font-weight:800; }

/* ---- inline block @403814 ---- */

  .final-cta{ position:relative; overflow:hidden; background:var(--pms-gradient-brand-deep);
    color:#fff; padding:clamp(48px,6vw,80px) 0; text-align:center; }
  .final-cta .fcta-bg{ position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(50% 65% at 50% -5%, rgba(110,231,168,0.24), transparent 60%),
    radial-gradient(42% 55% at 88% 110%, rgba(34,182,115,0.20), transparent 60%); }
  .final-cta .container{ position:relative; z-index:1; }
  .fcta-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800;
    letter-spacing:.16em; text-transform:uppercase; color:#d9f99d; margin-bottom:18px; }
  .fcta-eyebrow::before{ content:''; width:22px; height:2px; border-radius:2px; background:#d9f99d; }
  .fcta-h{ font-family:var(--pms-font-display); font-size:clamp(40px,7vw,86px); font-weight:900;
    line-height:.97; letter-spacing:-.04em; margin:0 0 18px; color:#fff; text-wrap:balance; }
  .fcta-sub{ font-size:clamp(16px,1.6vw,19px); color:rgba(255,255,255,0.94); max-width:46ch;
    margin:0 auto 36px; line-height:1.55; }
  .fcta-btn{ display:inline-flex; align-items:center; gap:11px; font-family:var(--pms-font-body);
    font-weight:800; font-size:clamp(16px,1.8vw,19px); padding:18px 40px; border:0;
    border-radius:var(--pms-radius-full); cursor:pointer; color:#07271c;
    background:linear-gradient(135deg,#bbf7d0,#6ee7a8 52%,#34d399);
    box-shadow:0 18px 50px rgba(110,231,168,0.32); position:relative; overflow:hidden;
    transition:transform .22s var(--pms-ease-out-quart), box-shadow .25s; }
  .fcta-btn svg{ width:21px; height:21px; }
  .fcta-btn::after{ content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
    transform:skewX(-20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent); }
  .fcta-btn:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 26px 66px rgba(110,231,168,0.44); }
  .fcta-btn:hover::after{ animation:pmsShimmer .9s ease; }
  .fcta-alt{ margin-top:22px; font-size:14.5px; color:rgba(255,255,255,0.92); }
  .fcta-alt a{ display:inline-block; padding:12px 4px; color:#fff; font-weight:700; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:1px; transition:border-color .15s; }
  .fcta-alt a:hover{ border-color:#fff; }
  @media (prefers-reduced-motion: reduce){ .fcta-btn:hover{ transform:none; } .fcta-btn:hover::after{ animation:none; } }

/* ---- inline block @407818 ---- */

  .fibq{ --fib-8:8px; --fib-13:13px; --fib-21:21px; --fib-34:34px; --fib-55:55px; padding:var(--fib-55) 0; background:var(--pms-surface-2,#f3f5f1); }
  .fibq-card{ display:grid; grid-template-columns:1.618fr 1fr; align-items:center; gap:var(--fib-34); background:#fff; border:1px solid var(--pms-border,rgba(15,23,42,.08));
    border-radius:24px; padding:var(--fib-34); box-shadow:0 18px 50px rgba(11,59,44,.10), 0 2px 6px rgba(15,23,42,.05); }
  .fibq-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pms-primary,#0e6b4b); }
  .fibq-h{ margin:var(--fib-8) 0 var(--fib-13); font-family:Outfit,Inter,sans-serif; font-weight:800; font-size:clamp(24px,3.2vw,38px); line-height:1.1; letter-spacing:-.02em; color:var(--pms-ink-primary,#0f172a); }
  .fibq-sub{ margin:0 0 var(--fib-21); font-size:15px; line-height:1.55; color:var(--pms-ink-muted,#586578); max-width:46ch; }
  .fibq-link{ display:inline-flex; align-items:center; gap:var(--fib-8); min-height:44px; padding:0 var(--fib-21); border-radius:999px; text-decoration:none; font-weight:800; font-size:14px;
    color:#fff; background:var(--pms-primary,#0e6b4b); box-shadow:0 8px 24px rgba(11,59,44,.22); transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s; }
  .fibq-link:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(11,59,44,.28); }
  .fibq-link:focus-visible, .fibq-art-link:focus-visible{ outline:3px solid var(--pms-brand-lime,#84cc16); outline-offset:3px; }
  .fibq-art-link{ display:block; border-radius:16px; overflow:hidden; line-height:0; box-shadow:0 12px 34px rgba(15,23,42,.14); transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .fibq-art-link:hover{ transform:translateY(-2px) scale(1.01); }
  .fibq-art{ display:block; width:100%; height:auto; }
  .fibq-card{ animation:fibqIn .45s cubic-bezier(.4,0,.2,1) both; }
  @keyframes fibqIn{ from{ opacity:0; transform:translateY(13px); } to{ opacity:1; transform:none; } }
  @media (max-width:680px){ .fibq-card{ grid-template-columns:1fr; padding:var(--fib-21); } .fibq-art-link{ max-width:340px; } }
  @media (prefers-reduced-motion:reduce){ .fibq-card{ animation:none; } .fibq-link:hover, .fibq-art-link:hover{ transform:none; } }

/* ---- inline block @414352 ---- */

  .foot-v3{ background:var(--pms-surface-1); border-top:1px solid var(--pms-border); padding:clamp(40px,5vw,64px) 0 26px; }
  .foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid var(--pms-border); }
  .foot-brand{ max-width:430px; }
  .foot-brand .logo{ text-decoration:none; color:inherit; }
  .foot-tag{ margin:14px 0 0; font-size:14.5px; line-height:1.55; color:var(--pms-ink-muted); }
  .foot-signup{ flex:1; min-width:288px; max-width:430px; }
  .foot-signup label{ display:block; font-size:13px; font-weight:800; color:var(--pms-ink-secondary); margin-bottom:11px; letter-spacing:.01em; }
  .foot-field{ display:flex; gap:8px; }
  .foot-field input{ flex:1; min-width:0; padding:13px 15px; border-radius:12px; border:1.5px solid var(--pms-border-strong);
    background:var(--pms-surface-1); color:var(--pms-ink-primary); font-size:14.5px; font-family:inherit; outline:none;
    transition:border-color .15s, box-shadow .15s; }
  .foot-field input:focus{ border-color:var(--pms-brand-700); box-shadow:0 0 0 3px rgba(44,82,130,0.12); }
  .foot-field button{ padding:13px 20px; border-radius:12px; border:0; cursor:pointer; font-family:inherit; font-weight:800;
    font-size:14px; color:#fff; white-space:nowrap; background:var(--pms-gradient-brand); box-shadow:var(--pms-glow-brand);
    transition:transform .15s, box-shadow .2s; }
  .foot-field button:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(15,23,42,0.24); }
  .foot-signup-note{ min-height:17px; margin-top:9px; font-size:12.5px; color:var(--pms-ink-muted); }
  .foot-nav{ display:flex; flex-wrap:wrap; gap:8px 24px; padding:22px 0; }
  .foot-nav a{ font-size:13.5px; font-weight:600; color:var(--pms-ink-secondary); text-decoration:none; cursor:pointer; transition:color .15s; }
  .foot-nav a:hover{ color:var(--pms-brand-700); }
  .foot-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding-top:18px; border-top:1px solid var(--pms-border); font-size:12.5px; color:var(--pms-ink-muted); }
  .foot-bar .logo-word{ font-size:14px; }
  .foot-social{ display:flex; gap:9px; }
  .foot-social a{ width:44px; height:44px; border-radius:9px; border:1px solid var(--pms-border-strong); display:grid; place-items:center;
    color:var(--pms-ink-muted); text-decoration:none; transition:border-color .18s, color .18s, transform .18s; }
  .foot-social a:hover{ border-color:var(--pms-brand-700); color:var(--pms-brand-700); transform:translateY(-1px); }
  .foot-social svg{ width:16px; height:16px; }
  .foot-legal{ margin:16px 0 0; font-size:11px; color:var(--pms-ink-muted); line-height:1.6; }
  @media (max-width:680px){ .foot-top{ flex-direction:column; gap:26px; } .foot-signup{ max-width:none; } }

/* ---- inline block @766298 ---- */
@media (max-width:640px){ #waFab { bottom:96px !important; left:14px !important; width:50px !important; height:50px !important; } #waFab span { display:none !important; } } #waFab span { transition:opacity .2s; opacity:0.85; } #waFab:hover span { opacity:1; }
/* ---- inline block @775208 ---- */

  /* 3D product tiles replace the flat glyph-in-a-box on the product cards. The tile
     carries its own depth/shadow, so the old coloured box behind it is removed. */
  .bapps-ic, .pms-band-ink .bapps-ic, .bento-card .ic, .bento-card.b-feat .ic { background:none !important; box-shadow:none !important; width:60px; height:60px; padding:0; border:0; }
  .bapps-ic img, .bento-card .ic img { width:100%; height:100%; display:block; filter:drop-shadow(0 8px 10px rgba(6,40,30,.22)); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
  .bapps-card:hover .bapps-ic img, .bento-card:hover .ic img { transform:translateY(-3px) scale(1.06) rotate(-2deg); }
  @media (prefers-reduced-motion: reduce){ .bapps-ic img, .bento-card .ic img { transition:none; } }

/* ---- inline block @775981 ---- */

  /* Hero = headline + actions + the free-payments terms, then the four-pillar row and the plan pills (homepage re-lead,
     owner decision 2026-10-09). The animated demo stage stays hidden; the old 10-tile column was replaced by the pillar
     row (see .hx-pillars in /content/css/pms-home.css), so the copy now spans the container. */
  .pms-homepage .hero-simple > .pms-stage { display:none !important; }
  .pms-homepage .hero-simple { display:block !important; }
  .pms-homepage .hero-simple > .pms-hero-copy.v3 { max-width:760px; text-align:left; margin:0; }
  @media (min-width: 761px) {
    .pms-homepage .pms-hero-v2 { padding-bottom:clamp(24px,3vw,44px); }
  }
  /* "See the dashboards" is a required second CTA, so it stays visible on phones (the older phone rule hid it). */
  @media (max-width: 560px) {
    .pms-homepage .pms-hero-actions .pms-cta--ghost { display:inline-flex; }
    .pms-homepage .hero-simple .pms-hero-tertiary { margin-left:0 !important; text-align:left !important; }
  }

/* ---- inline block @777070 ---- */

  /* While the consent bar is up on a phone, the cart / chat / back-to-top
     circles used to stack on top of its buttons (back-to-top covered "Manage").
     They step aside until the visitor answers; nothing is lost. */
  @media (max-width: 640px) {
    body.pms-cookie-open .pmsh-cart-fab,
    body.pms-cookie-open .chat-fab,
    body.pms-cookie-open .pms-totop { display: none !important; }
    #pms-cookie-banner { padding-bottom: max(9px, env(safe-area-inset-bottom)) !important; }
    #pms-cookie-banner button { min-height: 40px; }
    /* Compact consent bar: it was 3 rows (~25% of the first screen) on a phone. One short line, one row of buttons. */
    #pms-cookie-banner { padding:10px 12px max(10px, env(safe-area-inset-bottom)) !important; }
    #pms-cookie-banner > div { gap:8px !important; }
    #pms-cookie-banner p { flex-basis:100% !important; font-size:11.5px !important; line-height:1.35 !important; }
    #pms-cookie-banner p a { white-space:nowrap; }
    #pms-cookie-banner > div > div { width:100%; display:grid !important; grid-template-columns:auto 1fr 1fr; gap:6px !important; }
    #pms-cookie-banner button { padding:8px 10px !important; font-size:12px !important; }
  }

/* ---- inline block @804783 ---- */

/* ══════════════ FABLE REDESIGN — the fundamental UI layer ══════════════
   A real re-skin of the core design system (type, depth, motion, components),
   not a sprinkle. Loaded last so it wins the cascade. PROTECTED nav selectors
   (.nav-inner/.nav-links/#authNav/.nav-burger) are intentionally untouched. */

/* 1 · TYPE — Inter with optical features; heavier, tighter display headings */
html, body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'cv02','cv03','cv04','cv11';}
h1,h2,h3{letter-spacing:-0.035em;}
/* Smaller cap (72px was oversized on big screens) + roomier line-height. The headline
   uses -webkit-background-clip:text (.gradient-text); at line-height 1.02 descenders
   (g, y, p) got clipped differently across Safari/Firefox/Chrome — "text cut out". */
.hero h1{font-size:clamp(32px,5vw,56px);font-weight:900;line-height:1.14;overflow-wrap:break-word;}
.hero p{font-size:clamp(16px,1.6vw,19px);max-width:680px;line-height:1.6;}
.section-head h2,.cta-section h2{font-size:clamp(30px,4.4vw,48px);font-weight:900;line-height:1.06;}
.section-head p{font-size:clamp(14.5px,1.4vw,17px);line-height:1.65;}

/* 2 · AMBIENT DEPTH — layered brand washes behind everything (zero layout cost) */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 540px at 88% -8%, rgba(110,231,168,0.10), transparent 62%),
    radial-gradient(760px 500px at -8% 26%, rgba(15,23,42,0.07), transparent 60%),
    radial-gradient(640px 420px at 60% 108%, rgba(44,82,130,0.06), transparent 64%);}
.hero{position:relative;}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(15,23,42,0.10) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(640px 360px at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(640px 360px at 50% 30%, #000 0%, transparent 75%);}
.hero .container{position:relative;}

/* 3 · BRAND TEXT — gradient headlines (static; animation removed for CLS/perf) */
.gradient-text{background:none;background-size:auto;-webkit-background-clip:initial;background-clip:initial;
  color:#0e6b4b;-webkit-text-fill-color:#0e6b4b;}

/* 4 · BUTTON SYSTEM — pill geometry, sheen sweep, spring hover */
.btn{border-radius:999px;padding:13px 26px;font-weight:750;font-size:14.5px;letter-spacing:-0.01em;
  transition:transform .22s cubic-bezier(.34,1.4,.5,1),box-shadow .25s,border-color .2s,background .2s;}
.btn-primary{position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,0.22);}
.btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.28),transparent);
  transform:skewX(-18deg);transition:left .55s cubic-bezier(.4,0,.2,1);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(15,23,42,0.3);}
.btn-primary:hover::after{left:125%;}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-ghost{border-width:1.5px;background:rgba(255,255,255,0.75);backdrop-filter:saturate(160%) blur(8px);}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,0.10);border-color:var(--accent);}

/* 5 · CARD ELEVATION SYSTEM — one consistent depth language everywhere */
.svc-card,.hero-demo-card,.tier-card,.price-card,.faq-item,.demo-card,.bundle-card,.ds-customizer,.golive-plan{
  border-radius:18px;
  transition:transform .25s cubic-bezier(.34,1.3,.5,1),box-shadow .28s,border-color .2s;}
.svc-card:hover,.tier-card:hover,.price-card:hover,.demo-card:hover,.bundle-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(14,26,20,0.05),0 18px 44px rgba(14,26,20,0.11);
  border-color:rgba(15,23,42,0.28);}

/* 6 · CLOSING CTA — flip from a pale panel to the deep-forest hero moment */
.cta-section{background:linear-gradient(135deg,#0b543b 0%,#0b543b 55%,#0e6b4b 100%);
  border:1px solid rgba(110,231,168,0.25);box-shadow:0 24px 70px rgba(15,23,42,0.28);
  position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(110,231,168,0.22),transparent 70%);pointer-events:none;}
.cta-section{color:#fff;}
.cta-section h2{color:#fff;}
.cta-section p,.cta-section .muted,.cta-section label,.cta-section span{color:rgba(255,255,255,0.92);}
.cta-section a{color:#6ee7a8;}
.cta-section input,.cta-section select,.cta-section textarea{color:#1e293b;}
/* The inline booking calendar (#inlineBookingMount) is designed for a LIGHT
   surface — on the dark-green CTA hero its green selected tiles, dark-green
   "more times" links and grey period headers rendered green-on-green / dark-on-
   dark. Lift the whole widget onto a white card and restore its own palette so
   the dark-section text-color overrides above don't bleed into it. */
.cta-section #inlineBookingMount{background:#fff;color:#0f172a;border-radius:16px;
  padding:20px 22px;margin-top:18px;text-align:left;box-shadow:0 16px 44px rgba(15,23,42,0.22);}
.cta-section #inlineBookingMount p,
.cta-section #inlineBookingMount .muted,
.cta-section #inlineBookingMount label,
.cta-section #inlineBookingMount span{color:#5f6b6a;}
.cta-section #inlineBookingMount a,
.cta-section #inlineBookingMount .slot-more{color:#0f172a;}
.cta-section #inlineBookingMount h2,
.cta-section #inlineBookingMount h3,
.cta-section #inlineBookingMount strong{color:#0f172a;}
.cta-section #inlineBookingMount .tz{color:#0f172a;}

/* 7 · INPUTS + CHROME */
input,select,textarea{transition:border-color .15s,box-shadow .15s;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-2) !important;
  box-shadow:0 0 0 3px rgba(44,82,130,0.14);}
::selection{background:rgba(44,82,130,0.18);}
:focus-visible{outline:3px solid rgba(44,82,130,0.4);outline-offset:2px;border-radius:8px;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:#c9d2c5;border-radius:99px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#9fb09a;}

/* 8 · RHYTHM + SPEED — generous consistent breathing room, lazy below-fold paint */
/* content-visibility:auto was removed: it made every off-screen section a guessed 640px, so page height grew ~30% mid-scroll,
   the scrollbar jumped and anchor/demo scrolls drifted (felt like an endless scroll on phones). Natural layout is stable. */
section:not(.hero){content-visibility:visible;}
.section-head{margin-bottom:clamp(26px,4vw,44px);}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
  /* Wave-3 reveal: longer, expensive ease-out-cubic with a slight blur unfilter
     and a larger rise. Feels deliberate rather than snappy. */
  /* Reveal uses ONLY opacity + translateY — both GPU-composited, so the reveal
     never triggers layout/paint. The old filter:blur(6px) was non-composited
     ("may move pixels"), added to CLS, and left headings looking blurry mid-
     animation. Dropped it for a crisp, shift-free rise. */
  .pms-reveal{opacity:0;transform:translateY(40px);
    transition:opacity .8s cubic-bezier(.215,.61,.355,1),transform .8s cubic-bezier(.215,.61,.355,1);
    will-change:opacity,transform;}
  .pms-reveal.in{opacity:1;transform:none;}
  .pms-reveal[data-rv="1"]{transition-delay:.10s}.pms-reveal[data-rv="2"]{transition-delay:.20s}.pms-reveal[data-rv="3"]{transition-delay:.30s}
  /* Slow light sweep across the gradient dividers — animates transform (composited),
     not `left` (which forced layout each frame). */
  .pms-divider{position:relative;overflow:hidden;}
  .pms-divider::after{content:'';position:absolute;top:0;left:0;width:30%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(110,231,168,0.55),transparent);
    will-change:transform;animation:pmsDividerSweep 7s ease-in-out infinite;}
  @keyframes pmsDividerSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(433%)}}
}

/* ---- inline block @819963 ---- */

/* ============================================================================
   BRAND LAYER: "Ink + Signal" (Fibonacci)
   The site was solid forest green end to end. This layer makes ink (#0f172a) the dominant dark,
   keeps green as the "signal" colour (accents, links, icons), and adds the Fibonacci mosaic
   signature used on the business card. Scoped to .pms-homepage and appended last, so it only
   re-skins; no layout, nav, copy, ids or behaviour changes. Remove this block to revert.
   ============================================================================ */
:root { --pms-ink-900:#0f172a; --pms-ink-950:#0b1220; --pms-signal:#22b673; --pms-lime:#84cc16;
  --fib-8:8px; --fib-13:13px; --fib-21:21px; --fib-34:34px; --fib-55:55px; --fib-89:89px;
  --pms-fib-strip:linear-gradient(90deg,#0e6b4b 0 5%,#0f172a 5% 10%,#22b673 10% 20%,#eef3ee 20% 35%,#84cc16 35% 60%,#0e6b4b 60% 100%); }

/* 1. The big dashboards band: ink, not forest green. Green stays as the signal. */
.pms-homepage .pms-band-ink { background:linear-gradient(180deg,#0b1220 0%,#0f172a 52%,#0b1220 100%); }
.pms-homepage .pms-aurora--ink::before {
  background:radial-gradient(44% 46% at 82% 4%, rgba(34,182,115,.16), transparent 62%),
             radial-gradient(40% 44% at 8% 26%, rgba(132,204,22,.07), transparent 60%); }
.pms-homepage .pms-band-ink :is(p, li, .sub, .desc, .kpi-sub, small, td, th) { color:#cbd5e1 !important; }
.pms-homepage .pms-band-ink :is(h1, h2, h3, h4, b, strong) { color:#f8fafc !important; }
.pms-homepage .pms-band-ink .section-head p { color:#cbd5e1; }

/* 2. Hero: a quiet warm-white field with a hint of ink and signal instead of a mint wash. */
.pms-homepage .pms-hero-v2 .pms-hero-bg {
  background:radial-gradient(60% 50% at 88% 0%, rgba(15,23,42,.07), transparent 62%),
             radial-gradient(48% 56% at 0% 0%, rgba(34,182,115,.11), transparent 62%),
             linear-gradient(180deg,#fbfbf8 0%,#f3f5f1 100%); }
.pms-homepage .pms-hero-v2 .pms-hero-bg::before { opacity:.45; }

/* 3. Primary action: ink with a lime "signal" underline, not another solid green block. */
.pms-homepage .pms-cta--brand {
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.26), inset 0 -3px 0 var(--pms-lime); }
.pms-homepage .pms-cta--brand:hover { box-shadow:0 16px 40px rgba(15,23,42,.34), inset 0 -3px 0 var(--pms-lime); }

/* 4. The lead pillar card: ink with the Fibonacci mosaic in its corner. */
.pms-homepage .hx-pillar--lead {
  background:radial-gradient(120% 140% at 92% -20%, rgba(34,182,115,.22), transparent 55%), linear-gradient(150deg,#17233b 0%,#0f172a 72%);
  box-shadow:0 2px 4px rgba(15,23,42,.25), 0 18px 38px rgba(15,23,42,.30); }
.pms-homepage .hx-pillar--lead::after {
  content:''; position:absolute; right:0; bottom:0; width:76px; height:47px; border-radius:20px 0 20px 0; opacity:.95; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 91 56'%3E%3Crect x='0' y='0' width='56' height='56' fill='%2322b673'/%3E%3Crect x='56' y='0' width='35' height='35' fill='%2384cc16'/%3E%3Crect x='70' y='35' width='21' height='21' fill='%230e6b4b'/%3E%3Crect x='56' y='42' width='14' height='14' fill='%23eef3ee'/%3E%3Crect x='56' y='35' width='7' height='7' fill='%230f172a'/%3E%3Crect x='63' y='35' width='7' height='7' fill='%2322b673'/%3E%3C/svg%3E") no-repeat right bottom/100% 100%; }
.pms-homepage .hx-pillar--lead .hx-pillar-go { position:relative; z-index:1; }

/* 5. Signature: every pillar carries a Fibonacci-proportioned strip (1:1:2:3:5:8) along its top edge. */
.pms-homepage .hx-pillar::before {
  content:''; position:absolute; left:var(--fib-21); right:var(--fib-21); top:0; height:3px; border-radius:0 0 3px 3px;
  background:var(--pms-fib-strip); pointer-events:none; }

/* 6. Divider used between major sections: the same strip, edge to edge. */
.fib-rule { height:8px; width:100%; background:var(--pms-fib-strip); }

/* 7. "Tap the QR code to book": a clear call-out under each booking QR for people on a phone or tablet (touch / narrow screens only;
   with a mouse the caption still says "point your camera"). Ink pill, lime underline, 44px target. */
.tap-pill { display:none; align-items:center; justify-content:center; gap:var(--fib-8); min-height:44px; padding:0 var(--fib-21); margin:var(--fib-13) auto 0; width:max-content; max-width:100%;
  border-radius:13px; background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color:#fff; text-decoration:none; font-weight:800; font-size:14px;
  box-shadow:0 10px 21px rgba(15,23,42,.24), inset 0 -3px 0 var(--pms-lime); -webkit-tap-highlight-color:transparent; }
.tap-pill svg { flex:0 0 auto; animation:tapNudge 1.8s ease-in-out infinite; }
@keyframes tapNudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.tap-pill:focus-visible { outline:3px solid var(--pms-lime); outline-offset:3px; }
@media (hover:none), (max-width:680px) { .tap-pill { display:inline-flex; } }
@media (prefers-reduced-motion:reduce) { .tap-pill svg { animation:none; } }
@media (forced-colors:active) { .tap-pill { border:2px solid ButtonText; } }
@media (forced-colors:active) { .fib-rule, .pms-homepage .hx-pillar::before, .pms-homepage .hx-pillar--lead::after { display:none; } }