/* The generated site. Used by the live preview and inlined into downloaded HTML. */
/* ───────── preview (a generated site; everything scoped under .pv) ───────── */
.pv {
  container-type: inline-size;
  --dark: #0a2a5e; --accent: #2f7fe8; --accent2: #bfe0ff; --paper: #f6f9fd; --ink: #0d1b33;
  color: var(--ink); background: var(--paper);
  font-size: 16px; line-height: 1.5;
}
.pv * { text-shadow: none; }
.pv-empty { display: grid; place-items: center; gap: 12px; min-height: 420px; color: #7b869b; text-align: center; padding: 40px; }
.pv-empty p { font-weight: 500; }
.pv-loading { display: grid; gap: 18px; padding: 40px; }
.pv-loading i { display: block; height: 22px; border-radius: 11px; background: linear-gradient(90deg, #e8edf5 0%, #f6f9fd 50%, #e8edf5 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.pv-loading i:nth-child(1) { height: 56px; width: 70%; } .pv-loading i:nth-child(2) { width: 52%; } .pv-loading i:nth-child(3) { height: 120px; margin-top: 14px; } .pv-loading i:nth-child(4) { width: 80%; }
@keyframes shimmer { to { background-position: -200% 0; } }

.pv { overflow-wrap: anywhere; }
/* ponytail: the standalone export has no site.css reset; mirror its zeroed margins/bullets here (no-op in the editor, which already resets).
   :where keeps this below component rules like .pv-title so intended spacing survives. */
:where(.pv) :is(h1, h2, h3, p, ul, blockquote) { margin: 0; }
:where(.pv) ul { padding: 0; list-style: none; }
.pv h1, .pv h2, .pv h3 { font-weight: 500; letter-spacing: -.04em; line-height: 1.08; }
.pv-sec { padding: clamp(36px, 8cqw, 84px) clamp(22px, 6cqw, 64px); }
.pv-title { font-size: clamp(26px, 5cqw, 44px); margin-bottom: clamp(20px, 3.5cqw, 36px); max-width: 18ch; }

.pv-hero { padding: clamp(22px, 4cqw, 36px) clamp(22px, 6cqw, 64px) clamp(50px, 11cqw, 110px); background: radial-gradient(120% 90% at 85% 0%, var(--accent) 0%, transparent 60%), var(--dark); color: #fff; }
.pv-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(40px, 9cqw, 90px); font-weight: 500; font-size: 15px; }
.pv-nav b { font-size: 20px; letter-spacing: -.04em; font-weight: 700; }
.pv-nav ul { display: flex; gap: clamp(12px, 2.4cqw, 28px); opacity: .85; }
.pv-nav a.pv-btn { padding: 10px 20px; font-size: 14px; }
.pv-nav a.pv-btn { white-space: nowrap; }
@container (max-width: 520px) { .pv-nav ul { display: none; } }
.pv-hero h1, .pv-hero h2 { font-size: clamp(34px, 8.4cqw, 76px); letter-spacing: -.055em; max-width: 14ch; margin: 0; }
.pv-hero p { margin-top: 18px; max-width: 46ch; font-size: clamp(16px, 2.2cqw, 21px); opacity: .9; font-weight: 500; }
.pv-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pv-btn, .pv-btn2 { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
.pv-btn { background: var(--accent2); color: var(--dark); }
.pv-btn2 { border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; }
/* ponytail: own the link defaults site.css used to lend; re-assert button colors after the inherit */
.pv a { color: inherit; text-decoration: none; }
.pv a.pv-btn { color: var(--dark); }
.pv a.pv-btn2 { color: #fff; }
.pv a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.pv a.pv-btn:focus-visible, .pv a.pv-btn2:focus-visible { outline-color: var(--accent2); }

.pv-grid { display: grid; gap: clamp(14px, 2.4cqw, 24px); grid-template-columns: 1fr; }
@container (min-width: 600px) { .pv-grid.n3 { grid-template-columns: repeat(3, 1fr); } .pv-grid.n2 { grid-template-columns: repeat(2, 1fr); } }
.pv-card { background: #fff; border: 1px solid #e3e9f2; border-radius: 22px; padding: clamp(20px, 3cqw, 30px); box-shadow: 0 10px 30px rgba(20, 40, 90, .05); }
.pv-card h3 { font-size: clamp(19px, 2.6cqw, 24px); }
.pv-card p { margin-top: 10px; color: #4b566b; font-size: 16px; }
.pv-num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); font-weight: 700; margin-bottom: 16px; }
.pv-icon { width: 42px; height: 42px; border-radius: 13px; margin-bottom: 16px; background: linear-gradient(135deg, var(--accent), var(--accent2)); }

.pv-alt { background: #fff; }
.pv-quote { text-align: center; background: var(--paper); }
.pv-quote blockquote { font-size: clamp(22px, 4cqw, 36px); letter-spacing: -.035em; line-height: 1.2; max-width: 28ch; margin: 0 auto; font-weight: 500; }
.pv-quote cite { display: block; margin-top: 18px; font-style: normal; color: #5b6578; font-weight: 600; }
.pv-ph { margin-top: 22px; display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1.5px dashed #9aa6bd; color: #5b6578; font-size: 13px; font-weight: 600; }

.pv-price { text-align: left; }
.pv-price .amt { font-size: 34px; font-weight: 600; letter-spacing: -.04em; margin-top: 8px; color: var(--accent); }
.pv-price ul { margin-top: 14px; display: grid; gap: 8px; color: #4b566b; font-size: 15px; }
.pv-price li::before { content: "✓  "; color: var(--accent); font-weight: 700; }

.pv-faq details { background: #fff; border: 1px solid #e3e9f2; border-radius: 18px; padding: 18px 22px; margin-bottom: 12px; }
.pv-faq summary { cursor: pointer; font-weight: 600; font-size: 18px; letter-spacing: -.02em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pv-faq summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; }
.pv-faq details[open] summary::after { content: "–"; }
.pv-faq p { margin-top: 10px; color: #4b566b; }

.pv-cta { background: radial-gradient(100% 120% at 15% 100%, var(--accent) 0%, transparent 65%), var(--dark); color: #fff; text-align: center; padding: clamp(50px, 11cqw, 110px) 24px; }
.pv-cta h2 { font-size: clamp(30px, 6.4cqw, 58px); max-width: 16ch; margin: 0 auto 26px; letter-spacing: -.05em; }
.pv-foot { padding: 26px clamp(22px, 6cqw, 64px); background: var(--dark); color: rgba(255, 255, 255, .7); font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }