/* /pulse (guest/pulse.blade.php) — port of the prototype screen site-pulse (scoped .pl), plus /bot (.pl.bt-page).
   Product-shot internals: site-pulse-shots.css. */

/* site primitives of the prototype shell that the shipped shell sheet does not carry yet (scoped to these pages) */
.pl .sec { border-bottom: 1px solid var(--hair); padding: 72px 20px; position: relative; }
.pl .sec:last-child { border-bottom: 0; }
.pl .sec-head { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: 40px; }
.pl .h-hero { font: 400 clamp(36px, 6vw, 60px)/1.02 var(--f-display); letter-spacing: -0.04em; margin: 0; }
.pl .h-hero .dim, .pl .h-sec .dim { color: var(--ink-4); }
.pl .h-sec { font: 400 clamp(28px, 4vw, 38px)/1.1 var(--f-display); letter-spacing: -0.03em; margin: 0; }
.pl .cta-dark .h-sec .dim { color: #8a8a8a; }
.pl .lead { font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 60ch; margin: 0; }
.pl .feature { background: var(--panel); border-radius: var(--r-xl); padding: 22px; display: grid; gap: 10px; align-content: start; overflow: hidden; min-width: 0; }
.pl .feature p { color: var(--ink-3); font-size: 14px; margin: 0; }
.pl p { margin: 0; }
.pl a:focus-visible, .pl summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* product-shot frames (x-site.shot): desktop clone above 760 px, phone clone below — as the prototype embeds */
.pl .pl-sm { display: none; }
.pl .pl-sm .embed-shot { max-width: 360px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  .pl .pl-dsk { display: none; }
  .pl .pl-sm { display: block; }
  .pl .pl-stage:has(.pl-sm) + .pl-cap { max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ---- page (prototype site-pulse) ---- */
  .pl p { text-wrap: pretty; }
  .pl .lead, .pl .pl-fine { text-wrap: balance; }
  .pl .nb { white-space: nowrap; }
  .pl .sec-head .lead { margin: 0 auto; }
  .pl .sec-head { margin-bottom: 36px; }

  /* hero */
  .pl .sec.pl-hero { padding: 88px 20px 64px; overflow: hidden; }
  .pl-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px; pointer-events: none; background: radial-gradient(52% 62% at 50% 0%, var(--glow), transparent 72%); }
  .pl-hero > * { position: relative; }
  .pl-hero-copy { display: grid; justify-items: center; text-align: center; gap: 20px; max-width: 820px; margin: 0 auto; }
  .pl-hero .lead { max-width: 60ch; }
  .pl-ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .pl-fine { font-size: 12.5px; color: var(--ink-3); }
  .pl-hero .pl-fine > span { display: block; }
  .pl-shot { max-width: 1160px; margin: 52px auto 0; }

  /* split head (H2 left, lead right) */
  .pl-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; margin-bottom: 32px; }
  .pl-split > div { display: grid; gap: 14px; justify-items: start; min-width: 0; }
  .pl-split .lead { font-size: 15px; }
  .pl-eyes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  /* the six main AI */
  .pl-split > .pl-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1 / -1; margin-top: 4px; }
  .pl-ai-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 5px; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 1px var(--ring), var(--shadow-sm); font-size: 13.5px; color: var(--ink); white-space: nowrap; }
  .pl-ai-chip .mono-av { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
  .pl-ai-more { font-size: 13px; color: var(--ink-3); }
  .pl-ai-lbl { flex: 0 0 auto; margin-right: 2px; }

  /* a live crop of the cabinet on a quiet well */
  .pl-stage { background: var(--panel-2); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--ring); padding: 20px; }
  .pl-stage .embed-shot { box-shadow: none; background: transparent; border-radius: 12px; }
  /* a capped crop fades over 56 px (shell default 90): the row above the cut stays readable */
  .pl .embed-shot[data-cut]::after { height: 56px; }
  /* on a well-less phone stage the fade is a mask (only its alpha counts, so any opaque token works), not a --bg overlay: the section’s dots stay visible under it */
  .pl .pl-stage .embed-shot[data-cut] { -webkit-mask-image: linear-gradient(var(--ink) calc(100% - 56px), transparent); mask-image: linear-gradient(var(--ink) calc(100% - 56px), transparent); }
  .pl .pl-stage .embed-shot[data-cut]::after { display: none; }
  /* what the clones change inside (rules of «Головна»: no ⌘K, no active marker, one black button) lives in site-pulse-shots.css */
  .pl-cap { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
  .pl-cap a, .pl-note a, .pl-cov a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--axis); white-space: nowrap; transition: text-decoration-color .15s ease; }
  .pl-cap a:hover, .pl-note a:hover, .pl-cov a:hover { text-decoration-color: var(--ink); }
  .pl-cap a svg.lucide, .pl-note a svg.lucide, .pl-cov a svg.lucide { width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; }
  .pl-cap.pl-cap-c { display: block; text-align: center; max-width: 64ch; margin: 28px auto 0; }
  .pl-cap.pl-cap-top { margin: 0 0 12px; }

  /* «Що заважає ботам»: two notes */
  .pl-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin-top: 28px; }
  .pl-note { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pl-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--wash); color: var(--ink-2); display: grid; place-items: center; flex: none; }
  .pl-ico svg.lucide { width: 16px; height: 16px; }
  .pl-note b { font-weight: 500; color: var(--ink); }
  .pl-note p { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
  .pl-note p + p { margin-top: 8px; font-size: 13.5px; }

  /* «Підключення»: coverage strip + privacy */
  .pl-cov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--hair); }
  .pl-cov > div { padding: 20px 24px 4px 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
  .pl-cov-h { display: grid; gap: 10px; justify-items: start; }
  .pl-cov > div + div { border-left: 1px solid var(--hair); padding-left: 24px; }
  .pl-cov h3.h-card { font-size: 16px; }
  .pl-cov p { font-size: 14px; color: var(--ink-3); display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
  .pl-cov p svg.lucide { width: 14px; height: 14px; margin-top: 3px; color: var(--ink-3); }
  .pl-cov p.pl-yes { color: var(--ink-2); }
  .pl-cov p.pl-go { display: block; padding-left: 24px; }
  .pl .pl-priv { margin-top: 24px; font-size: 13.5px; padding: 12px 14px; align-items: flex-start; }
  .pl-priv svg.lucide { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ink-2); }

  /* «Що на якому тарифі» */
  .pl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pl .pl-plan { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
  .pl-plan-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .pl-plan-h .h-card { font-size: 19px; }
  .pl-plan-h span { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
  .pl .pl-plan .pl-plan-k { font-size: 12.5px; color: var(--ink-3); margin-bottom: -4px; }
  .pl-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .pl-lines li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px; font-size: 14px; line-height: 1.45; color: var(--ink); }
  .pl-lines li svg.lucide { width: 14px; height: 14px; margin-top: 3px; color: var(--ink-3); }
  .pl .pl-plan p.pl-plain { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); border-top: 1px solid var(--hair); padding-top: 12px; margin-top: auto; min-height: calc(2.9em + 13px); }
  .pl-tiles { margin-top: 28px; }
  .pl-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

  /* FAQ: head left, list right */
  .pl-faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 32px 72px; align-items: start; }
  .pl-faq-head { display: grid; gap: 14px; justify-items: start; position: sticky; top: 92px; }
  .pl-faq-head .lead { font-size: 15px; margin: 0; }
  .pl-faq-head .lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--axis); }
  .pl .faq { max-width: none; margin: 0; border-top: 1px solid var(--hair); }
  .pl .faq details { padding: 0; }
  .pl .faq summary { padding: 17px 4px; align-items: center; }
  .pl .faq summary::after { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--wash); color: var(--ink-2); display: grid; place-items: center; font-size: 15px; line-height: 1; transition: background-color .15s ease; }
  .pl .faq summary:hover::after { background: var(--wash-2); }
  .pl .faq details p { margin: -4px 0 0; padding: 0 44px 18px 4px; }

  /* final CTA */
  .pl-cta { display: grid; justify-items: center; text-align: center; }
  .pl-cta > div { position: relative; }
  .pl-cta p { opacity: .7; font-size: 15px; max-width: 46ch; margin: 14px auto 0; text-wrap: balance; }
  .pl-cta .row-wrap { margin-top: 24px; justify-content: center; }
  .pl-star { position: absolute; right: -40px; bottom: -60px; width: 240px; height: 240px; opacity: .06; pointer-events: none; }

  @media (max-width: 900px) {
    .pl-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .pl .pl-plan p.pl-plain { min-height: 0; }
    .pl .pl-tiles { display: none; }
  }
  @media (max-width: 860px) {
    .pl-split, .pl-notes, .pl-cov { grid-template-columns: minmax(0, 1fr); }
    .pl-cov > div, .pl-cov > div + div { border-left: 0; padding: 18px 0 14px; }
    .pl-cov > div + div { border-top: 1px solid var(--hair); }
    .pl-cov-h { display: flex; align-items: center; gap: 12px; }
    .pl-faq-wrap { grid-template-columns: minmax(0, 1fr); }
    .pl-faq-head { position: static; }
    .pl .faq details p { padding-right: 4px; }
  }
  @media (max-width: 760px) {
    .pl .sec { padding: 48px 16px; }
    .pl .sec.pl-hero { padding: 44px 16px 44px; }
    .pl .h-sec { text-wrap: balance; }
    .pl .btn { min-height: 38px; }
    .pl-ctas { flex-direction: column; align-items: stretch; width: 100%; }
    .pl-ctas .btn { justify-content: center; }
    .pl-ctas .btn-primary { order: -1; }
    .pl-more { flex-direction: column; align-items: stretch; }
    .pl-more .btn { justify-content: center; }
    .pl-shot { margin-top: 36px; }
    .pl-stage { padding: 0; background: none; box-shadow: none; }
    .pl-stage .embed-shot { border-radius: 14px; }
    .pl .lead { text-wrap: pretty; }
    .pl-cap { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pl-cap.pl-cap-c { margin-top: 20px; }
    .pl-ai-lbl { flex-basis: 100%; }
    .pl .cta-dark { padding: 36px 22px; }
    .pl-cta .row-wrap { width: 100%; }
    .pl-cta .row-wrap .btn { flex: 1 1 100%; justify-content: center; }
    .pl-star { display: none; }
  }
  /* phone clones (360 px, whatever width the shell switches them at): never blown up past ~1.2× on large phones; the caption lines up with the capped crop */


/* ---- /bot (ChetverBot info): the same section patterns ---- */
.bt-page .pl-hero .pl-stage { max-width: 760px; margin: 44px auto 0; }
.bt-page .bt-id { gap: 14px; box-shadow: 0 0 0 1px var(--ring), var(--shadow-sm); }
.bt-page .bt-id-h { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bt-page .bt-id-h b { font-weight: 500; }
.bt-page .bt-id-rows { display: grid; gap: 0; margin: 0; }
.bt-page .bt-id-rows > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hair); }
.bt-page .bt-id-rows dt { font-size: 12.5px; color: var(--ink-3); }
.bt-page .bt-id-rows dd { margin: 0; min-width: 0; }
.bt-page code { font: 13px/1.6 var(--f-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.bt-page .bt-id-rows code { font-size: 14px; color: var(--ink); }
.bt-page .pl-note p code { font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: var(--wash); color: var(--ink); }
.bt-page .bt-lead { display: grid; gap: 14px; min-width: 0; }
.bt-page .bt-code { margin: 0; padding: 14px 16px; background: var(--panel); border-radius: 10px; box-shadow: 0 0 0 1px var(--ring); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: var(--ink); }
.bt-page .bt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.bt-page .bt-card { padding: 24px; gap: 12px; }
.bt-page .bt-card .h-card { font-size: 17px; margin: 2px 0 0; }
.bt-page .bt-card p { font-size: 14px; line-height: 1.55; }
.bt-page .bt-card p.bt-fine { font-size: 13px; border-top: 1px solid var(--hair); padding-top: 12px; margin-top: auto; }
.bt-page .bt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.bt-page .bt-two .bt-card { display: flex; flex-direction: column; }
.bt-page .bt-sub { margin: 40px 0 0; font-size: 16px; }
.bt-page .bt-sub + .pl-notes { margin-top: 18px; }
.bt-page .pl-notes.bt-notes3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bt-page .pl-note > div > p:first-child { margin-top: 0; }
.bt-page .pl-note b + p { margin-top: 4px; }
.bt-page .pl-priv { margin-top: 24px; }
.bt-page .pl-cta p { overflow-wrap: anywhere; }
.bt-page .pl-note a { white-space: normal; }
@media (max-width: 860px) {
  .bt-page .bt-two, .bt-page .pl-notes.bt-notes3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bt-page .pl-hero .pl-stage { margin-top: 32px; }
  .bt-page .bt-id-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}