/* =====================================================================================================================
   owns.ai  -  THE PREVIEW PAGE  (/preview/<key>)

   A visitor's own website in a browser mockup - live in a frame when it can be, else its screenshot - with their real
   assistant running on it and the demo's arrow pointing at its button. Builds on app.css tokens only, so it is right in
   both themes.

   Coded By Darko G.
   ===================================================================================================================== */

.pv { padding-top: 40px; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr); gap: 48px; align-items: start; }
.pv-skel-stage { height: 620px; border-radius: var(--r-xl); }

.pv-copy { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--nav-h) + 24px); }
.pv-copy .eyebrow { margin-bottom: 0; }
.pv-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; margin: 0; letter-spacing: -0.035em; }
.pv-copy .lead { margin: 0; }

.pv-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.pv-stat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--border); font-size: .88rem; color: var(--text-2); }
.pv-stat i { color: var(--brand); }
.pv-stat b { color: var(--text); font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.pv-customize h4 i { color: var(--brand); margin-right: 6px; }
.pv-accent { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.pv-accent .input-color { width: 44px; min-width: 44px; height: 36px; }
.pv-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv-theme { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
            font: 600 .88rem var(--font-display); cursor: pointer; transition: all .2s var(--ease); text-align: left; }
.pv-theme:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.pv-theme.is-active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--grad-soft); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.pv-sw { width: 20px; height: 20px; border-radius: var(--r-sm); flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 1px 3px rgba(0, 0, 0, .25); }
.pv-sw-aurora { background: linear-gradient(135deg, #6D5BFF, #B44CFF 55%, #FF5C8A); }
.pv-sw-minimal { background: linear-gradient(135deg, #FFFFFF 50%, #111113 50%); }
.pv-sw-midnight { background: #0B0D12; box-shadow: inset 0 0 0 2px #7C6BFF, 0 0 10px rgba(124, 107, 255, .6); }
.pv-sw-bubble { background: linear-gradient(135deg, #FFD6EC, #D9D2FF); border-radius: 50%; }
.pv-sw-executive { background: linear-gradient(180deg, #0E1B33 70%, #C9A227 70%); border-radius: var(--r-xs); }
.pv-sw-sunset { background: linear-gradient(135deg, #FF5C8A, #FF6B6B 50%, #FFB347); }
.pv-sw-forest { background: linear-gradient(135deg, #1D4A31 55%, #F5F4EC 55%); }
.pv-sw-graphite { background: linear-gradient(135deg, #1D1D21 55%, #EDEDEF 55%); }
.pv-sw-latte { background: linear-gradient(135deg, #6F4E37 50%, #F1E8DC 50%); border-radius: 50%; }
.pv-sw-lagoon { background: linear-gradient(135deg, #00A6A6, var(--accent)); border-radius: 50%; }

/* ---- the template (design) switcher, above the colours ---------------------------------------------------------- */
.pv-label { margin: 14px 2px 8px; font: 600 13px var(--font-display); letter-spacing: -.005em; color: var(--muted); }
.pv-customize > .row-between + .pv-label { margin-top: 4px; }
.pv-templates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pv-tpl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2);
          color: var(--text-2); font: 600 .78rem var(--font-display); cursor: pointer; transition: all .2s var(--ease); text-align: center; min-width: 0; }
.pv-tpl i { font-size: 1.05rem; color: var(--muted); transition: color .2s; }
.pv-tpl:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.pv-tpl.is-active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--grad-soft); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.pv-tpl.is-active i { color: var(--brand); }
.pv-tpl-brand { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 13px; text-align: left;
                background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; border-color: transparent; }
.pv-tpl-ai { width: 34px; height: 34px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--grad); }
.pv-tpl-ai i, .pv-tpl-brand.is-active .pv-tpl-ai i { color: #fff; font-size: 1rem; }
.pv-tpl-brand.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
@media (max-width: 600px) { .pv-templates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pv-cta h3 { margin-bottom: 14px; }
.pv-stage > .pv-cta { margin-top: 22px; }      /* under the preview, and under the offer when there is one */
.pv-perks { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.pv-perks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.pv-perks i { color: var(--success); margin-top: 4px; }

/* ---- the browser mockup ---- */
.pv-stage { position: relative; }
.pv-stage::before { content: ""; position: absolute; inset: 8% -6% -6% 6%; background: var(--grad); filter: blur(80px); opacity: .28; border-radius: var(--r); z-index: -1; }
.pv-browser { border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .03); }
.pv-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pv-lights { display: flex; gap: 7px; flex: none; }
.pv-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.pv-lights i:nth-child(2) { background: #FEBC2E; }
.pv-lights i:nth-child(3) { background: #28C840; }
.pv-url { flex: 1; min-width: 0; max-width: 460px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-sm);
          background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-url i { color: var(--success); font-size: .78rem; }
.pv-url span { overflow: hidden; text-overflow: ellipsis; }
.pv-bar-spacer { width: 50px; flex: none; }

.pv-viewport { position: relative; height: 680px; overflow: hidden; background: #FFFFFF; }
.pv-shot { position: absolute; inset: 0; background-size: cover; background-position: top center; background-repeat: no-repeat; transition: opacity .6s var(--ease-fade); }
.pv-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .18)); pointer-events: none; }
.pv-widget { position: absolute; inset: 0; pointer-events: none; }     /* the website under it stays clickable; the widget's own parts take clicks */

/* The website itself, live (js/preview.js showSite): over its screenshot, which stays until the page has drawn. */
.pv-site { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #fff; opacity: 0; transition: opacity .5s var(--ease-fade); }
.pv-site.is-in { opacity: 1; }

/* ---- what points at the assistant's button, as on a demo (content/demo/page.inc) ------------------------------------
   A floating gradient label and a drawn arrow over the button, a turning halo and two sonar rings round it - until the
   visitor opens the assistant. js/preview.js places them from the button's own box, inside the viewport. */
@property --pv-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pv-arrow { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; opacity: 0; transition: opacity .35s ease; }
.pv-arrow.is-on { opacity: 1; }
.pv-arrow span { position: relative; overflow: hidden; padding: 9px 15px 9px 13px; border-radius: 999px; background: linear-gradient(135deg, #00B894 0%, var(--accent) 50%, #0063D2 100%);
                 color: #fff; white-space: nowrap; font: 800 14.5px/1 var(--font-display); letter-spacing: .01em;
                 box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 12px 30px -6px rgba(0, 0, 0, .45), 0 0 28px 4px rgba(255, 255, 255, .85); animation: pv-float 2.2s ease-in-out infinite; }
.pv-arrow span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
                        transform: translateX(-120%); animation: pv-shine 2.4s ease-in-out infinite; }
.pv-arrow span i { margin-right: 6px; display: inline-block; animation: pv-wave 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
.pv-arrow svg { width: 86px; height: 86px; margin: -4px 4px 0 0; overflow: visible; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px rgba(255, 255, 255, .95)) drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
                animation: pv-nudge 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
.pv-arrow .pv-shaft, .pv-arrow .pv-head { fill: none; stroke: url(#pv-g); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pv-arrow .pv-shaft { stroke-dasharray: 110; stroke-dashoffset: 110; animation: pv-draw 2.2s cubic-bezier(.6, 0, .2, 1) infinite; }
.pv-arrow .pv-head { stroke-dasharray: 44; stroke-dashoffset: 44; animation: pv-draw-h 2.2s cubic-bezier(.6, 0, .2, 1) infinite; }
.pv-arrow.is-left { align-items: flex-start; }
.pv-arrow.is-left svg { transform: scaleX(-1); animation-name: pv-nudge-l; margin: -4px 0 0 4px; }
@keyframes pv-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes pv-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes pv-wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-16deg); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-8deg); } }
@keyframes pv-draw { 0% { stroke-dashoffset: 110; opacity: 1; } 45%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pv-draw-h { 0%, 38% { stroke-dashoffset: 44; opacity: 1; } 55%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pv-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 7px 7px; } }
@keyframes pv-nudge-l { 0%, 100% { translate: 0 0; } 50% { translate: -7px 7px; } }

.pv-halo, .pv-sonar { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .35s ease; box-sizing: border-box; }
.pv-halo { padding: 3px; background: conic-gradient(from var(--pv-a), #2EE6C0, #38BDF8, #0063D2, transparent 70%, #2EE6C0);
           -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
           filter: drop-shadow(0 0 8px rgba(46, 230, 192, .9)); animation: pv-spin 1.6s linear infinite; }
.pv-sonar { border: 2px solid #2EE6C0; box-shadow: 0 0 18px rgba(46, 230, 192, .6); }
.pv-halo.is-on { opacity: 1; }
.pv-sonar.is-on { animation: pv-sonar 2s cubic-bezier(.2, .6, .3, 1) infinite; }
.pv-sonar.is-2.is-on { animation-delay: 1s; }
@keyframes pv-spin { to { --pv-a: 360deg; } }
@keyframes pv-sonar { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) {
    .pv-arrow span, .pv-arrow span::after, .pv-arrow span i, .pv-arrow svg, .pv-arrow .pv-shaft, .pv-arrow .pv-head, .pv-halo, .pv-sonar.is-on { animation: none; }
    .pv-arrow .pv-shaft, .pv-arrow .pv-head { stroke-dashoffset: 0; }
}

/* a tasteful stand-in site when no screenshot could be taken */
.pv-placeholder { position: absolute; inset: 0; background: linear-gradient(180deg, #F4FBFD 0%, #FFFFFF 60%); color: #0F172A; padding: 22px 30px; display: flex; flex-direction: column; gap: 34px; }
.pv-ph-nav { display: flex; align-items: center; gap: 18px; }
.pv-ph-nav span { height: 10px; width: 60px; border-radius: var(--r-sm); background: #E2E8F0; }
.pv-ph-nav .pv-ph-logo { width: 110px; height: 22px; border-radius: var(--r-sm); background: linear-gradient(135deg, #99F6E4, #BAE6FD); margin-right: auto; }
.pv-ph-nav .pv-ph-btn { width: 90px; height: 30px; border-radius: var(--r-sm); background: #0F172A; opacity: .85; }
.pv-ph-hero { display: flex; flex-direction: column; gap: 14px; padding: 40px 0 10px; max-width: 560px; }
.pv-ph-domain { font: 800 clamp(1.8rem, 3vw, 2.6rem) var(--font-display); letter-spacing: -0.04em; color: #0F172A; word-break: break-all; }
.pv-ph-line { height: 12px; border-radius: var(--r-sm); background: #E5EBF2; }
.pv-ph-cta { width: 150px; height: 42px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--accent), #00D4AA); margin-top: 8px; }
.pv-ph-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pv-ph-cards span { height: 130px; border-radius: var(--r); background: #FFFFFF; box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .18); border: 1px solid #E8EEF5; }

.pv-empty-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: var(--r); display: grid; place-items: center; background: var(--grad-soft); color: var(--brand); font-size: 1.8rem; }
.pv-expired { max-width: 640px; margin: 40px auto; }

@media (max-width: 1080px) {
    .pv-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .pv-copy { position: static; }
    .pv-stage { order: -1; }
    .pv-stage::before { inset: 8% 0 -6% 0; }     /* the glow stays inside the screen once the stage is full width */
}
/* PORTRAIT PHONES AND TABLETS: what the page is about first, then the thing itself, then what to do with it. Both
   columns step aside (display: contents) so every block can take its own place:
       eyebrow + heading  ->  the live preview  ->  template & theme  ->  the return offer  ->  the free claim
       ->  the story and the numbers */
@media (max-width: 1080px) and (orientation: portrait) {
    .pv-grid[data-pv-ready] { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
    .pv-grid[data-pv-ready][hidden] { display: none; }
    .pv-copy, .pv-stage { display: contents; }
    .pv-stage::before { display: none; }
    .pv-eyebrow { order: 1; margin: 0; }
    .pv-title { order: 2; font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
    .pv-building { order: 3; }
    .pv-browser { order: 4; margin-top: 6px; box-shadow: var(--shadow-lg), 0 24px 70px -30px color-mix(in srgb, var(--accent) 55%, transparent); }
    .pv-stage > p.small { order: 5; margin-top: -8px !important; }
    .pv-customize { order: 6; }
    .pv-offer { order: 7; margin-top: 0; }
    .pv-cta, .pv-stage > .pv-cta { order: 8; margin-top: 0; }
    .pv-copy > .lead { order: 9; }
    .pv-stats { order: 10; }
}
@media (max-width: 600px) {
    /* A phone: the live website nearly fills the screen, as it would on the phone itself. */
    .pv-viewport { height: 600px; height: clamp(480px, calc(100svh - 120px), 680px); }
    .pv-arrow span { font-size: 13px; padding: 8px 12px 8px 11px; }
    .pv-arrow svg { width: 66px; height: 66px; }
    .pv-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-bar-spacer, .pv-lights { display: none; }
    .pv-ph-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}


/* ---- the AI-matched brand theme, first in the switcher ---------------------------------------------------------- */
.pv-theme-brand { grid-column: 1 / -1; padding: 11px 13px; gap: 12px; text-align: left; }
.pv-brand-sw { display: grid; grid-template-columns: repeat(2, 14px); grid-template-rows: repeat(2, 14px); gap: 2px; padding: 3px; border-radius: var(--r-sm);
               background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); flex: none; }
.pv-brand-sw i { display: block; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pv-brand-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-brand-txt b { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; flex-wrap: wrap; }
.pv-brand-txt small { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-ai { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: -.005em; padding: 2px 8px; border-radius: var(--r-xs);
         background: var(--grad); color: #fff; display: inline-flex; align-items: center; gap: 5px; }
.pv-theme-brand.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 10px 30px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
@media (max-width: 680px) { .pv-brand-txt small { white-space: normal; } }



/* ---- THE RETURN OFFER, under the browser (js/preview.js renderOffer) ---------------------------------------------------
   A gradient-rimmed glass panel: a ticket-style 10% tag, a live countdown, the interval switch and one tile per plan with
   the struck list price. It rises in when it appears and the tag breathes a little. */
.pv-offer { position: relative; margin-top: 22px; padding: 22px; border-radius: var(--r-xl); isolation: isolate; overflow: hidden;
            background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent;
            box-shadow: var(--shadow-lg), 0 0 80px -30px color-mix(in srgb, var(--accent) 55%, transparent); }
.pv-offer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                    background: radial-gradient(520px 220px at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(420px 220px at 100% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.pv-offer.is-in { animation: pv-offer-in .7s var(--ease) both; }
@keyframes pv-offer-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }

.pv-offer-head { display: flex; align-items: center; gap: 18px; }
.pv-offer-tag { position: relative; flex: none; width: 92px; height: 92px; border-radius: var(--r); display: grid; place-content: center; text-align: center; color: #fff;
                background: var(--grad); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); animation: pv-tag 3.2s ease-in-out infinite; }
.pv-offer-tag::before, .pv-offer-tag::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--surface); }
.pv-offer-tag::before { left: -7px; } .pv-offer-tag::after { right: -7px; }
.pv-offer-tag b { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.pv-offer-tag span { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: -.005em; opacity: .92; margin-top: 3px; }
@keyframes pv-tag { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-1deg) scale(1.03); } }

.pv-offer-copy { min-width: 0; }
.pv-offer-kicker { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: .74rem; font-weight: 800; letter-spacing: .14em;
 color: var(--eyebrow-ink); }
.pv-offer-copy h3 { margin: 4px 0 4px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.pv-offer-copy p { margin: 0; color: var(--text-2); font-size: .94rem; }

.pv-offer-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 18px 0 14px; }
.pv-offer-timer { display: flex; align-items: center; gap: 12px; }
.pv-offer-ends { font-size: .85rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pv-offer-ends i { color: var(--warning); }
.pv-offer-clock { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.pv-offer-clock b { min-width: 42px; padding: 6px 0; border-radius: var(--r-sm); text-align: center; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 500; color: var(--text);
                    background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: inset 0 -10px 16px -14px color-mix(in srgb, var(--accent) 60%, transparent); }
.pv-offer-clock i { font-style: normal; font-weight: 700; color: var(--faint); animation: pulse 1s steps(2, start) infinite; }

.pv-offer-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pv-offer-plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border);
                 transition: transform .35s var(--ease), border-color .4s var(--ease-fade), box-shadow .4s var(--ease-fade); }
.pv-offer-plan:hover { transform: translateY(-3px); border-color: var(--line-accent); box-shadow: var(--shadow); }
.pv-offer-plan.is-lead { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box; border-color: transparent; }
.pv-offer-pop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: var(--r-xs); background: var(--grad); color: #fff; white-space: nowrap;
                font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.pv-offer-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; }
.pv-offer-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pv-offer-price s { color: var(--faint); font-size: .9rem; }
.pv-offer-price b { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pv-offer-price span { color: var(--muted); font-size: .85rem; font-weight: 600; }
.pv-offer-sub { color: var(--success); font-size: .78rem; font-weight: 600; min-height: 2.4em; line-height: 1.3; }
.pv-offer-plan .btn { margin-top: 8px; }
.pv-offer-fine { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.pv-offer-fine i { color: var(--success); margin-top: 3px; }

@media (max-width: 760px) {
    .pv-offer { padding: 18px 16px; }
    .pv-offer-head { align-items: flex-start; gap: 14px; }
    .pv-offer-tag { width: 72px; height: 72px; border-radius: var(--r); }
    .pv-offer-tag b { font-size: 1.55rem; }
    .pv-offer-plans { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pv-offer-tag, .pv-offer-clock i { animation: none; } }


/* =====================================================================================================================
   UNFOLD  -  the preview in the site's language: the visitor's website sits on a soft stage in a clean browser,
   the switchers are tiles and pills, the pointer is one cobalt pill, and the offer is a quiet tile with its lead plan
   ringed in cobalt. No glows, no turning gradients.
   ===================================================================================================================== */

.pv-title { font-size: clamp(36px, 4vw, 60px); line-height: 1.02; letter-spacing: -.038em; }
.pv-title .gradient-text { color: var(--accent-text); }
.pv-stat { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--tile); font-size: 14.5px; }
.pv-stat i, .pv-customize h4 i { color: var(--accent-text); }
.pv-customize.card { border-radius: var(--r-xl); padding: 28px; }
.pv-label { font-family: var(--font-sans); font-size: 14px; }
.pv-tpl, .pv-theme { border: 0; border-radius: var(--r); background: var(--bg); font-family: var(--font-sans); font-weight: 500; box-shadow: var(--shadow-sm); transition: box-shadow .4s var(--ease-fade), background-color .4s var(--ease-fade); }
.pv-tpl:hover, .pv-theme:hover { border: 0; transform: none; box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--border-strong); }
.pv-tpl.is-active, .pv-theme.is-active, .pv-tpl-brand.is-active, .pv-theme-brand.is-active { background: var(--bg); border: 0; box-shadow: inset 0 0 0 2px var(--accent); color: var(--text); }
.pv-tpl.is-active i { color: var(--accent-text); }
.pv-tpl-brand { background: var(--bg); border: 0; }
.pv-tpl-ai { border-radius: 50%; background: var(--accent); }
.pv-ai { border-radius: var(--r-pill); background: var(--accent); }
.pv-sw { border-radius: 50%; }
.pv-brand-sw { border-radius: var(--r-xs); }
.pv-perks i { color: var(--accent-text); }

.pv-stage::before { content: none; display: none; }
.pv-browser { border: 0; border-radius: 18px; box-shadow: var(--shadow-lg), var(--ring); }
.pv-bar { background: var(--surface); }
.pv-url { border: 0; border-radius: var(--r-pill); background: var(--tile); }
.pv-ph-nav .pv-ph-logo { background: #DCE4FF; }
.pv-ph-cta { border-radius: var(--r-pill); background: #1A4BFF; }
.pv-placeholder { background: #FFFFFF; }

/* the pointer at the assistant's button: one cobalt pill and a white arrow */
.pv-arrow span { background: #1A4BFF; font: 700 14.5px/1 var(--font-sans); letter-spacing: -.005em; box-shadow: 0 0 0 3px #fff, 0 14px 30px -8px rgba(0, 0, 0, .45); }
.pv-arrow span::after { content: none; }
.pv-halo { background: conic-gradient(from var(--pv-a), #1A4BFF, #7598FF, transparent 70%, #1A4BFF); filter: none; }
.pv-sonar { border-color: #1A4BFF; box-shadow: none; }

.pv-empty-icon { border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.pv-expired.card { border-radius: var(--r-xl); }

/* the return offer */
.pv-offer { padding: 28px; border: 0; border-radius: var(--r-xl); background: var(--tile); box-shadow: none; }
.pv-offer::before { content: none; }
.pv-offer-tag { border-radius: 50%; background: var(--accent); box-shadow: none; }
.pv-offer-tag::before, .pv-offer-tag::after { content: none; }
.pv-offer-kicker { font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--accent-text); }
.pv-offer-copy h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.025em; }
.pv-offer-clock b { border: 0; border-radius: var(--r-sm); background: var(--bg); box-shadow: none; }
.pv-offer-plan { padding: 20px 18px 18px; border: 0; border-radius: var(--r-lg); background: var(--bg); transition: box-shadow .4s var(--ease-fade); }
.pv-offer-plan:hover { transform: none; border: 0; box-shadow: var(--shadow); }
.pv-offer-plan.is-lead { background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.pv-offer-pop { border-radius: var(--r-pill); background: var(--accent); font-family: var(--font-sans); }
.pv-offer-name { font-family: var(--font-sans); font-weight: 700; font-size: 17px; }
.pv-offer-price b { font-size: 30px; letter-spacing: -.045em; }
.pv-offer-sub { color: var(--accent-text); }
.pv-offer-fine i { color: var(--accent-text); }
@media (max-width: 1080px) and (orientation: portrait) { .pv-browser { box-shadow: var(--shadow-lg), var(--ring); } }