:root {
  --ink: #181818;
  --ink-soft: #666666;
  --ink-faint: #747680;
  --paper: #ffffff;
  --canvas: #f7f7f8;
  --canvas-pink: #fff4f6;
  --line: #e6e6e9;
  --brand: #0060ff;
  --brand-dark: #004bce;
  --brand-soft: #e8f1ff;
  --green: #178c5b;
  --green-soft: #e8f6ef;
  --shell: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: 16px;
  transform: translateY(-150%);
  padding: 9px 14px;
  border-radius: 7px;
  color: white;
  background: var(--ink);
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 76px;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(24, 24, 29, .04);
}
.header-inner { width: min(calc(100% - 48px), 1200px); height: 76px; display: flex; align-items: center; gap: 42px; }
.purethemes-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.purethemes-brand img { width: 170px; height: auto; }
.navigation { display: flex; align-items: center; margin-left: auto; }
.nav-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; }
.nav-link-row { display: flex; align-items: center; }
.nav-link, .submenu a {
  color: #2f3037;
  font-weight: 400;
  text-decoration: none;
  transition: color .15s ease;
}
.nav-link { display: block; padding: 7px 18px; border-radius: 999px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.nav-link-row { border-radius: 999px; }
.nav-link-row .nav-link { padding-right: 5px; border-radius: 999px 0 0 999px; }
.nav-item > .nav-link:hover, .nav-link-row:hover, .nav-link-row:focus-within, .nav-item.is-open > .nav-link-row { background: #deebff; }
.nav-item > .nav-link:hover, .nav-link-row:hover .nav-link, .nav-link-row:hover .submenu-toggle, .nav-link-row:focus-within .nav-link, .nav-link-row:focus-within .submenu-toggle, .nav-item.is-open > .nav-link-row .nav-link, .nav-item.is-open > .nav-link-row .submenu-toggle { color: #0060ff; }
.submenu-toggle, .language-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: #767780;
  background: transparent;
  cursor: pointer;
}
.submenu-toggle { width: 29px; height: 38px; padding: 0 12px 0 2px; }
.nav-chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.submenu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 0;
  min-width: 180px;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 6px;
  background: white;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
.submenu::before { content: ""; position: absolute; inset: -11px 0 auto; height: 11px; }
.submenu a { display: block; padding: 5px 0; color: #666; font-size: 16px; line-height: 21px; white-space: nowrap; }
.submenu a:hover { color: #232323; }
.nav-item.is-open > .submenu, .nav-item:focus-within > .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.nav-item.is-open > .nav-link-row .nav-chevron, .nav-item.is-open > .language-current .nav-chevron { transform: rotate(180deg); }
.nav-item-knowledge > .submenu { right: 0; left: auto; }
.language-menu { margin-left: 10px; }
.language-current {
  gap: 6px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #38383e;
  font-size: 13px;
}
.language-current > span:first-child { font-size: 13px; line-height: 1; }
.language-submenu { right: 0; left: auto; min-width: 92px; }
.language-submenu a { text-align: center; }
.menu-toggle { position: relative; z-index: 103; display: none; width: 42px; height: 42px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.menu-toggle > span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 3px; background: var(--ink); transition: opacity .16s ease, transform .16s ease; }
.menu-toggle.is-active > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active > span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-overlay { position: fixed; z-index: 100; inset: 0; display: none; padding: 0; border: 0; background: rgba(20, 20, 24, .42); opacity: 0; cursor: default; }

@media (min-width: 1025px) {
  .nav-item-has-children:hover > .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav-item-has-children:hover > .nav-link-row .nav-chevron, .language-menu:hover > .language-current .nav-chevron { transform: rotate(180deg); }
}

/* Listeo PWA, September 2026. */
:root { --shell:1160px; --ink:#181818; --ink-soft:#646464; --line:#e7e7e7; --brand:#0060ff; --brand-dark:#004bce; }
html { scroll-padding-top:100px; }
body { font-size:16px; line-height:1.65; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:500; letter-spacing:-.045em; color:var(--ink); }
h1 { font-size:clamp(48px,4.7vw,68px); line-height:1.08; }
h2 { font-size:clamp(32px,3.1vw,44px); line-height:1.2; }
h3 { font-size:22px; line-height:1.3; letter-spacing:-.035em; }
p { color:var(--ink-soft); }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
a,button,summary { touch-action:manipulation; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--brand); outline-offset:5px; }
.hero a:focus-visible,.closing-cta a:focus-visible { outline-color:white; }
.button { display:inline-flex; gap:18px; justify-content:center; align-items:center; min-height:48px; padding:13px 25px; border:0; border-radius:100px; font:500 15px/1.4 Inter,Arial,sans-serif; text-decoration:none; cursor:pointer; transition:background .18s,transform .18s; }
.button .icon { width:20px; height:20px; }
.button:hover { transform:translateY(-2px); }
.button-white { color:var(--brand); background:white; }
.button-white:hover { background:#f0f0f0; }
.button-primary { background:var(--brand); color:white; }
.button-primary:hover { background:var(--brand-dark); }
.button-full { width:100%; }
.text-link { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--brand); font-size:15px; font-weight:500; }
.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.text-link .icon { width:19px; }
.eyebrow { color:var(--brand); font-size:13px; font-weight:500; margin-bottom:24px; letter-spacing:.015em; }
.blue { color:var(--brand); }
.section { padding:110px 0; }
.hero { margin-top:76px; background:var(--brand); color:white; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:35px; min-height:650px; }
.hero-copy { position:relative; z-index:2; padding:64px 0 72px; }
.hero h1 { color:white; }
.hero-eyebrow { display:flex; align-items:center; gap:10px; color:white; margin-bottom:34px; }
.hero-eyebrow img { border-radius:8px; border:1px solid #ffffff60; }
.hero-eyebrow>span { border-left:1px solid #ffffff65; padding-left:13px; margin-left:3px; font-weight:400; }
.hero-lead { font-size:17px; line-height:1.8; color:white; max-width:465px; margin-top:26px; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:32px; }
.hero-text-link { display:inline-flex; gap:12px; align-items:center; color:white; text-decoration:none; font-size:14px; }
.hero-text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.hero-note { color:#fff; opacity:.85; font-size:12px; margin-top:22px; }
.hero-note span { padding:0 7px; }
.hero-visual { position:relative; height:610px; min-width:0; }



.phone { position:absolute; width:250px; background:#191919; border-radius:39px; padding:7px; border:1px solid #737373; box-shadow:0 24px 45px #001b7145,inset 0 0 0 2px #303030; }
.phone::before { content:""; position:absolute; width:3px; height:48px; background:#454545; right:-3px; top:120px; border-radius:0 2px 2px 0; }
.phone-shell { border-radius:31px; background:white; position:relative; overflow:hidden; height:505px; }
.phone-status { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 12px; color:#171717; font-size:9px; font-weight:600; line-height:1; height:36px; position:relative; }
.phone-status i { display:block; position:absolute; left:50%; transform:translateX(-50%); top:8px; width:66px; height:19px; border-radius:30px; background:#171717; }
.phone-home { display:block; position:absolute; width:80px; height:4px; bottom:7px; left:50%; transform:translateX(-50%); border-radius:10px; background:#1a1a1a; z-index:3; }
.phone-bookings { top:77px; left:0; transform:rotate(-7deg); z-index:1; }
.phone-ticket { top:53px; left:238px; transform:rotate(8deg); z-index:2; }
.visual-caption { position:absolute; color:white; font-size:13px; }
.caption-top { top:13px; left:45px; transform:rotate(-5deg); }
.caption-top svg { width:68px; height:40px; position:absolute; top:0; left:143px; fill:none; stroke:white; stroke-width:1.4; }
.offline-stamp { position:absolute; z-index:4; left:155px; bottom:32px; display:flex; align-items:center; gap:9px; padding:10px 16px; background:white; color:#181818; border-radius:6px; font-size:12px; box-shadow:0 8px 24px #001b7130; transform:rotate(-4deg); }
.offline-stamp .icon { color:var(--brand); width:17px; }
.hero-bottom { border-top:1px solid #ffffff40; padding:20px 0; display:flex; align-items:center; gap:42px; font-size:13px; }
.hero-bottom>span { margin-right:auto; }
.hero-bottom a { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.hero-bottom .icon { width:17px; height:17px; }
.install-grid { display:grid; grid-template-columns:.95fr 1fr; gap:110px; align-items:center; }
.install-copy>p:not(.eyebrow),.offline-copy>p:not(.eyebrow):not(.scope-note):not(.offline-explainer) { margin-top:22px; max-width:440px; }
.install-copy .text-link { margin-top:28px; }
.install-strip { padding:0 0 28px; }
.browser-address { border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:12px 0; color:#777; font-size:12px; }
.browser-address .icon { width:15px; height:15px; }
.address-dots { letter-spacing:3px; color:#999; }
.install-prompt { display:flex; align-items:center; gap:15px; padding:26px 0 5px; }
.install-prompt img { border-radius:15px; }
.install-prompt strong { display:block; font-weight:500; font-size:16px; }
.install-prompt span:not(.install-badge) { color:#777; font-size:12px; }
.install-badge { display:flex; gap:6px; align-items:center; color:var(--brand); border:1px solid var(--line); border-radius:100px; font-size:12px; font-weight:500; padding:7px 12px; margin-left:auto; }
.install-badge .icon { width:14px; height:14px; }
.install-steps { list-style:none; margin:0; padding:0; }
.install-steps li { display:flex; gap:20px; padding:17px 0; }
.install-steps li>span { display:flex; align-items:center; justify-content:center; width:29px; height:29px; border:1px solid #d7d7d7; border-radius:50%; flex-shrink:0; color:var(--brand); font-size:12px; margin-top:3px; }
.install-steps h3 { font-size:17px; letter-spacing:-.02em; }
.install-steps p { font-size:14px; margin-top:3px; }
.small-note { font-size:12px; color:#717171; line-height:1.7; }
.install-story>.small-note { border-top:1px solid var(--line); padding-top:19px; margin-top:13px; }
.offline-section { background:#f6f5f2; padding:85px 0; }
.offline-grid { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; }
.connection-control { margin-top:32px; border-top:1px solid #ddd; padding-top:23px; }
.connection-control>span { display:block; font-size:12px; color:#666; margin-bottom:13px; }
.connection-control button { display:flex; align-items:center; gap:12px; border:0; background:transparent; padding:0; cursor:pointer; color:#191919; font-size:14px; }
.connection-control button>.icon { width:17px; height:17px; }
.switch-track { width:45px; height:25px; background:#fff; border:1px solid #bfbfbf; border-radius:99px; position:relative; }
.switch-track i { display:block; width:17px; height:17px; position:absolute; left:3px; top:3px; background:#555; border-radius:50%; transition:transform .2s,background .2s; }
[aria-checked="true"] .switch-track { background:var(--brand); border-color:var(--brand); }
[aria-checked="true"] .switch-track i { background:#fff; transform:translateX(20px); }
.offline-explainer { font-size:14px; color:#454545; margin-top:18px; min-height:48px; }
.scope-note { margin-top:24px; font-size:12px; line-height:1.75; color:#717171; max-width:400px; }
.offline-stage { position:relative; height:570px; background:#ebeae6; border-radius:6px; overflow:hidden; }
.offline-stage-label { position:relative; display:flex; align-items:center; gap:8px; z-index:5; padding:22px; font-size:12px; color:#494949; }
.connection-dot { width:6px; height:6px; border-radius:50%; background:#207846; }
.is-offline .connection-dot { background:var(--brand); }
.demo-label { margin-left:auto; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.detail-phone { top:86px; left:50%; transform:translateX(-42%) rotate(7deg); width:255px; box-shadow:0 15px 35px #00000024; }
.detail-phone .phone-shell { height:509px; }
.saved-note { position:absolute; top:190px; left:26px; z-index:4; display:flex; gap:10px; background:#fff; padding:14px 17px; border:1px solid #ddd; border-radius:5px; transform:rotate(-7deg); color:#222; font-size:12px; line-height:1.5; box-shadow:0 9px 22px #00000009; transition:transform .3s; }
.saved-note small { color:#777; font-size:10px; }
.is-offline .saved-note { transform:rotate(-3deg) translateY(-7px); }
.ticket-footnote { position:absolute; left:22px; bottom:20px; z-index:5; writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; color:#777; }
.everyday-heading { display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:flex-start; }
.everyday-heading .eyebrow { padding-top:8px; }
.everyday-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:48px; gap:42px; }
.everyday-grid article { border-top:1px solid var(--line); padding:28px 0 30px; }
.everyday-grid .icon { color:var(--brand); width:27px; height:27px; margin-bottom:18px; }
.everyday-grid h3 { font-size:21px; }
.everyday-grid p { font-size:14px; margin-top:12px; }
.brand-row { display:flex; align-items:center; gap:34px; padding:32px 0; margin-top:18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-sample { flex-shrink:0; text-align:center; padding:0 14px; }
.brand-sample img { border-radius:17px; margin:auto; }
.brand-sample span { display:block; font-size:10px; margin-top:8px; color:#555; }
.brand-row h3 { font-size:22px; }
.brand-row p { font-size:14px; margin-top:7px; max-width:530px; }
.brand-row .text-link { margin-left:auto; white-space:nowrap; }
.pricing { border-top:1px solid var(--line); padding:90px 0; }
.section-heading { text-align:center; margin-bottom:35px; }
.section-heading .eyebrow { margin-bottom:13px; }
.section-heading h2 { font-size:34px; }
.section-heading>p:last-child { font-size:16px; margin-top:13px; }
.pricing-card { width:100%; max-width:400px; padding:6px; border:1px solid #ebebeb; border-radius:12px; box-shadow:0 3px 25px #0000000c; background:#fff; margin:auto; }
.pricing-card-top { padding:25px 25px 20px; border-radius:8px; background:linear-gradient(#e8f1ff 0%,#fff 100%); }
.license-amount-swap { display:inline-flex; align-items:center; margin-bottom:25px; background:#fff; border-radius:100px; }
.license-amount-swap button { margin:2px; border:0; border-radius:100px; background:none; color:#666; padding:7px 15px; font:500 14px/1.2 Inter,Arial,sans-serif; cursor:pointer; }
.license-amount-swap button.active { color:var(--brand); background:#0060ff20; }
.license-price-block { min-height:76px; }
.license-price { color:#111; font-size:40px; font-weight:500; line-height:.95; letter-spacing:-3px; font-variant-numeric:tabular-nums; }
.license-price-label { color:#737373; margin-top:0; font-size:16px; }
.pricing-card-top .button { font-weight:400; margin-top:15px; min-height:46px; padding-block:12px; box-shadow:0 3px 9px #0060ff20; }
.pts-features-checklist { margin:0; padding:3px 25px 26px; list-style:none; }
.pts-features-checklist>li { display:flex; align-items:center; gap:8px; padding:3px 0; color:#5d5d5d; font-size:15px; line-height:1.55; }
.check-dot { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:16px; height:16px; background:#181818; color:#fff; border-radius:50%; font-size:11px; line-height:1; }
.feature-tip { position:relative; flex-shrink:0; }
.feature-tip summary { display:flex; align-items:center; justify-content:center; list-style:none; width:16px; height:16px; border-radius:50%; background:#0060ff14; color:var(--brand); font-size:10px; font-weight:600; cursor:pointer; }
.feature-tip summary::-webkit-details-marker { display:none; }
.feature-tip p { position:absolute; z-index:10; bottom:25px; right:-20px; padding:13px 15px; width:240px; max-width:70vw; background:#181818; color:white; border-radius:5px; box-shadow:0 5px 20px #0002; font-size:12px; line-height:1.65; }
.pricing-after { text-align:center; max-width:440px; margin:16px auto 0; }
.renewal-note { font-size:12px; margin-bottom:17px; }
.renewal-note summary { display:inline; cursor:pointer; color:#333; border-bottom:1px dashed #bbb; }
.renewal-note p { margin-top:12px; font-size:12px; }
.checkout-status { margin-top:16px; font-size:13px; }
.faq-section { border-top:1px solid var(--line); }
.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.faq-intro>p:not(.eyebrow) { margin-top:20px; font-size:15px; }
.faq-intro .text-link { margin-top:23px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list details:first-child { border-top:1px solid var(--line); }
.faq-list summary { list-style:none; display:flex; justify-content:space-between; gap:20px; padding:20px 0; font-size:15px; font-weight:500; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary>span { color:var(--brand); font-size:23px; font-weight:400; line-height:1; }
.faq-list details[open] summary>span { transform:rotate(45deg); }
.faq-list details>p { padding:0 25px 23px 0; font-size:14px; }
.closing-cta { padding:65px 0; background:var(--brand); }
.closing-inner { display:flex; align-items:center; justify-content:space-between; gap:35px; }
.closing-inner h2 { color:white; font-size:38px; }
.closing-inner .eyebrow { color:white; margin-bottom:15px; }
.closing-inner .button { flex-shrink:0; }
.site-footer { padding:36px 0; font-size:12px; }
.footer-inner { display:flex; align-items:center; gap:28px; }
.footer-brand img { width:135px; }
.footer-inner>div { display:flex; gap:22px; margin-left:auto; }
.footer-inner a { text-decoration:none; }
.footer-inner a:hover { color:var(--brand); }
@media(min-width:1600px) { .hero-grid { min-height:700px; } }
@media(max-width:1150px) and (min-width:901px) { .hero-visual { transform:scale(.86); transform-origin:center left; } .hero-actions { gap:16px; } .install-grid,.offline-grid,.faq-grid { gap:55px; } h1 { font-size:54px; } }
@media(max-width:1024px) {
 .site-header,.header-inner { height:70px; } .hero { margin-top:70px; }
 .menu-toggle { display:block; margin-left:auto; }
 .navigation { position:fixed; z-index:102; top:70px; right:0; bottom:0; width:min(85vw,360px); background:white; padding:20px; overflow:auto; transform:translateX(105%); transition:transform .2s; display:block; }
 .navigation.is-open { transform:none; }
 .nav-menu { flex-direction:column; align-items:stretch; gap:4px; }
 .nav-link { padding:12px 14px; } .nav-link-row .nav-link { flex:1; }
 .submenu-toggle { width:44px; height:44px; }
 .submenu { position:static; box-shadow:none; padding:0 20px; opacity:1; visibility:visible; transform:none; display:none; pointer-events:auto; }
 .nav-item.is-open>.submenu { display:block; }
 .submenu a { padding:9px 0; font-size:14px; white-space:normal; }
 .language-menu { margin:15px 0 0; } .language-submenu a { text-align:left; }
 .menu-open .menu-overlay { display:block; opacity:1; top:70px; }
 .hero-eyebrow>span { font-size:11px; }
}
@media(max-width:900px) {
 .hero-grid { grid-template-columns:1fr; gap:0; text-align:center; min-height:0; }
 .hero-copy { padding:52px 0 10px; } .hero-eyebrow { justify-content:center; margin-bottom:24px; }
 h1 { font-size:58px; } .hero-lead { margin:22px auto 0; max-width:490px; }
 .hero-actions { justify-content:center; } .hero-visual { height:590px; width:515px; max-width:100%; margin:25px auto 0; }
 .hero-note { margin-top:18px; } .hero-bottom { gap:25px; } .hero-bottom>span { font-size:11px; }
  .caption-top { top:0; }
 .section { padding:75px 0; } .install-grid,.offline-grid { gap:45px; } .install-grid { grid-template-columns:1fr 1fr; }
 .install-prompt { gap:8px; } .install-prompt img { width:44px; height:44px; border-radius:12px; } .install-prompt span:not(.install-badge) { font-size:10px; } .install-badge { padding:6px; } .install-badge .icon { display:none; }
 .offline-grid { grid-template-columns:1fr 1fr; gap:30px; } .offline-stage { height:540px; } .saved-note { left:15px; top:210px; }
 .offline-copy h2 { font-size:34px; } .offline-stage-label { padding:18px 14px; font-size:11px; }
 .detail-phone { width:240px; top:85px; }
 .everyday-grid { gap:25px; } .everyday-heading .eyebrow { max-width:180px; } .brand-row { gap:20px; }
 .faq-grid { gap:45px; } .footer-inner { flex-wrap:wrap; gap:20px; } .footer-inner>div { gap:18px; }
}
@media(max-width:640px) {
 .shell,.header-inner { width:calc(100% - 40px); } .purethemes-brand img { width:146px; }
 h1 { font-size:48px; } h2 { font-size:34px; } .eyebrow { font-size:11px; margin-bottom:20px; }
 .hero-copy { padding-top:37px; } .hero-eyebrow { margin-bottom:27px; font-size:12px; gap:8px; } .hero-eyebrow img { width:28px; height:28px; } .hero-eyebrow>span { font-size:10px; padding-left:10px; margin-left:1px; }
 .hero-lead { font-size:15px; max-width:340px; line-height:1.75; } .desktop-break { display:none; }
 .hero-actions { gap:17px; margin-top:25px; } .button { padding:12px 19px; min-height:46px; font-size:13px; gap:10px; } .hero-text-link { font-size:12px; gap:7px; }
 .hero-note { font-size:10px; } .hero-note span { padding:0 3px; }
 .hero-visual { width:350px; height:455px; margin-top:30px; }
 .phone { width:190px; padding:5px; border-radius:31px; } .phone-shell { border-radius:25px; height:391px; }
 .phone-bookings { top:35px; left:0; } .phone-ticket { top:20px; left:162px; } .phone-status { padding:12px 12px 10px; height:32px; font-size:8px; } .phone-status i { width:52px; height:15px; }
 .phone-home { width:62px; height:3px; bottom:6px; }
 .caption-top { top:0; left:20px; font-size:10px; } .caption-top svg { display:none; }
 
 .offline-stamp { left:84px; bottom:20px; font-size:10px; padding:7px 12px; }
 .hero-bottom { padding:17px 0; justify-content:space-between; gap:12px; font-size:12px; } .hero-bottom>span { display:none; }
 .section { padding:60px 0; } .install-grid,.offline-grid,.faq-grid { grid-template-columns:1fr; gap:40px; }
 .install-copy>p:not(.eyebrow),.offline-copy>p:not(.eyebrow):not(.scope-note):not(.offline-explainer) { font-size:15px; margin-top:18px; }
 .install-prompt { gap:13px; } .install-prompt img { width:52px; height:52px; } .install-prompt span:not(.install-badge) { font-size:11px; } .install-badge { padding:7px 12px; }
 .install-strip { padding-bottom:17px; } .install-steps li { padding:14px 0; }
 .offline-grid { gap:32px; } .offline-stage { height:520px; max-width:440px; width:100%; margin:auto; }
 .detail-phone { width:248px; left:50%; top:68px; padding:7px; border-radius:39px; } .detail-phone .phone-shell { height:500px; border-radius:31px; }
 .detail-phone .phone-status { height:36px; } .detail-phone .phone-status i { height:19px; width:66px; }
 .saved-note { top:192px; font-size:11px; padding:12px 14px; } .ticket-footnote { left:15px; bottom:18px; }
 .scope-note { margin-top:17px; } .offline-explainer { min-height:0; }
 .everyday-heading { display:block; } .everyday-heading .eyebrow { max-width:none; padding:0; }
 .everyday-grid { grid-template-columns:1fr; gap:0; margin-top:30px; } .everyday-grid article { padding:23px 0; display:grid; grid-template-columns:30px 1fr; gap:8px 16px; }
 .everyday-grid .icon { margin:0; grid-row:span 2; width:23px; height:23px; } .everyday-grid h3 { font-size:20px; } .everyday-grid p { margin:0; }
 .brand-row { flex-wrap:wrap; gap:22px; padding:25px 0; } .brand-sample { padding:0; } .brand-sample img { width:59px; height:59px; }
 .brand-row>div:nth-child(2) { flex:1; } .brand-row h3 { font-size:20px; } .brand-row p { font-size:13px; } .brand-row .text-link { margin-left:81px; }
 .pricing-card-top { padding:24px 20px 18px; } .pts-features-checklist { padding:3px 20px 22px; }
 .license-amount-swap button { min-height:36px; } .license-price { font-size:48px; } .license-price-block { min-height:82px; }
 .faq-list summary { font-size:14px; padding:18px 0; } .faq-list details>p { font-size:13px; }
 .closing-cta { padding:45px 0; } .closing-inner { display:block; } .closing-inner h2 { font-size:32px; } .closing-inner .button { margin-top:25px; }
 .footer-inner { flex-direction:column; align-items:flex-start; gap:20px; } .footer-inner>div { margin:0; } .footer-inner p { font-size:11px; }
}
@media(max-width:370px) {
 .shell,.header-inner { width:calc(100% - 32px); } h1 { font-size:43px; } .hero-actions { gap:12px; } .hero-actions .button { padding-inline:16px; } .hero-text-link { font-size:11px; }
 .hero-visual { transform:scale(.88); transform-origin:top center; width:330px; margin-left:calc((100% - 330px)/2); height:405px; }
 .phone-ticket { left:145px; } .hero-eyebrow>span { font-size:9px; }
 .pts-features-checklist { padding-inline:15px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
/* Phone UI is HTML, sized as a single responsive product illustration. */
.phone { container-type:inline-size; }
.app-screen { color:#202020; font-size:11px; font-size:4.65cqw; line-height:1.5; }
.app-heading { display:flex; gap:5px; align-items:center; padding:3px 14px 10px; padding:1.2cqw 6cqw 4cqw; }
.app-heading img { width:22px; width:9.3cqw; height:auto; border-radius:6px; }
.app-heading strong { font-size:17px; font-size:7.2cqw; font-weight:600; letter-spacing:-.05em; }
.app-avatar { width:22px; width:9.3cqw; height:22px; height:9.3cqw; border-radius:50%; background:#f1ede6; display:grid; place-items:center; margin-left:auto; font-size:8px; font-size:3.4cqw; }
.app-greeting { padding:0 14px; padding:0 6cqw; }
.app-greeting>span { font-size:9px; font-size:3.8cqw; color:#777; }
.app-greeting h3 { font-size:23px; font-size:9.7cqw; margin:2px 0 11px; margin:.8cqw 0 4.65cqw; letter-spacing:-.05em; }
.app-search { display:flex; align-items:center; gap:7px; margin:0 14px 14px; margin:0 6cqw 6cqw; border:1px solid #e7e7e7; border-radius:6px; padding:6px 9px; padding:2.5cqw 3.8cqw; font-size:15px; font-size:6.35cqw; }
.app-search span { font-size:8px; font-size:3.4cqw; color:#777; }
.app-section-title { display:flex; justify-content:space-between; align-items:center; margin:0 14px 9px; margin:0 6cqw 3.8cqw; font-weight:500; font-size:12px; font-size:5.1cqw; }
.app-section-title>span { font-size:8px; font-size:3.4cqw; color:var(--brand); }
.app-booking-card { margin:0 14px; margin:0 6cqw; border:1px solid #e7e7e7; border-radius:8px; overflow:hidden; background:#fff; }
.event-art { height:92px; height:39cqw; background:#f2e4c8; position:relative; overflow:hidden; color:#111; }


.art-word { position:absolute; left:12px; left:5cqw; top:9px; top:3.8cqw; font-size:25px; font-size:10.6cqw; font-weight:600; letter-spacing:-.07em; line-height:.95; z-index:1; }
.event-art>small { position:absolute; bottom:8px; left:12px; font-size:5px; font-size:2.1cqw; letter-spacing:.1em; }
.app-card-body { padding:10px; padding:4.2cqw; }
.app-card-top { display:flex; justify-content:space-between; align-items:center; color:#777; font-size:7px; font-size:3cqw; }
.app-status { color:#287542; background:#ecf6eb; padding:2px 4px; border-radius:3px; }
.app-card-body h4 { font-size:12px; font-size:5.1cqw; line-height:1.4; font-weight:500; margin:7px 0 3px; margin:3cqw 0 1.3cqw; letter-spacing:-.025em; }
.app-card-body p { font-size:8px; font-size:3.4cqw; }
.app-card-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:11px; padding-top:4.65cqw; }
.app-card-bottom>span:first-child { color:#777; font-size:7px; font-size:3cqw; }
.app-card-bottom strong { display:block; font-size:11px; font-size:4.65cqw; font-weight:500; color:#222; }
.app-tiny-button { padding:5px 7px; padding:2.1cqw 3cqw; background:var(--brand); color:white; border-radius:4px; font-size:8px; font-size:3.4cqw; }
.app-compact-booking { display:flex; align-items:center; gap:8px; padding:10px; margin:10px 14px; margin:4.2cqw 6cqw; padding:4.2cqw; border:1px solid #e7e7e7; border-radius:7px; }
.apartment-icon { background:#f1ede6; padding:6px; display:block; border-radius:4px; }
.apartment-icon .icon { width:18px; width:7.6cqw; height:18px; height:7.6cqw; }
.app-compact-booking>div { flex:1; }
.app-compact-booking strong { display:block; font-size:9px; font-size:3.8cqw; font-weight:500; }
.app-compact-booking>div>span { display:block; font-size:7px; font-size:3cqw; color:#777; margin-top:3px; }
.app-nav { position:absolute; bottom:12px; left:0; right:0; padding:9px 5px 5px; padding:3.8cqw 2.1cqw 2.1cqw; background:white; border-top:1px solid #eee; display:flex; justify-content:space-around; }
.app-nav>span { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:6px; font-size:2.5cqw; color:#888; }
.app-nav .icon { width:16px; width:6.8cqw; height:16px; height:6.8cqw; }
.app-nav .current { color:var(--brand); }
.ticket-app { background:#faf9f6; min-height:100%; padding:0 12px; padding:0 5cqw; }
.ticket-nav { display:flex; align-items:center; justify-content:space-between; height:34px; height:14.4cqw; }
.ticket-nav strong { font-size:10px; font-size:4.2cqw; font-weight:500; }
.ticket-nav>span:first-child { font-size:24px; font-size:10.2cqw; }
.ticket-sheet { background:white; padding:17px 15px 12px; padding:7.2cqw 6.4cqw 5cqw; text-align:center; border:1px solid #e9e7e0; border-radius:8px; }
.ticket-tag { font-size:6px; font-size:2.5cqw; letter-spacing:.15em; color:var(--brand); font-weight:600; }
.ticket-sheet h3 { font-size:23px; font-size:9.7cqw; line-height:1.1; margin:9px 0 8px; margin:3.8cqw 0 3.4cqw; }
.ticket-sheet>p { font-size:7px; font-size:3cqw; }
.ticket-date { display:flex; justify-content:space-between; text-align:left; padding:12px 4px; padding:5cqw 1.7cqw; color:#222; font-size:9px; font-size:3.8cqw; font-weight:500; }
.ticket-date small { display:block; color:#777; font-size:6px; font-size:2.5cqw; font-weight:400; letter-spacing:.05em; margin-bottom:3px; }
.ticket-perforation { position:relative; border-top:1px dashed #d8d5cb; margin:0 -15px 12px; margin:0 -6.4cqw 5cqw; }
.ticket-perforation::before,.ticket-perforation::after { content:""; position:absolute; width:12px; width:5cqw; height:12px; height:5cqw; top:-6px; top:-2.5cqw; background:#faf9f6; border:1px solid #e9e7e0; border-radius:50%; }
.ticket-perforation::before { left:-7px; left:-3cqw; border-left-color:transparent; border-top-color:transparent; transform:rotate(-45deg); }
.ticket-perforation::after { right:-7px; right:-3cqw; border-right-color:transparent; border-bottom-color:transparent; transform:rotate(-45deg); }
.ticket-qr { width:132px; width:56cqw; height:auto; margin:auto; }
.ticket-sheet .ticket-code { margin-top:5px; color:#777; letter-spacing:.08em; font-size:6px; font-size:2.5cqw; }
.ticket-saved { display:flex; align-items:center; justify-content:center; gap:4px; font-size:7px; font-size:3cqw; color:var(--brand); margin:10px 0 6px; margin:4.2cqw 0 2.5cqw; }
.ticket-saved .icon { width:12px; width:5cqw; height:12px; height:5cqw; }
.ticket-sheet .ticket-disclaimer { font-size:6px; font-size:2.5cqw; color:#777; line-height:1.6; }
.ticket-share { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:10px; margin-top:4.2cqw; padding:8px 0; padding:3.4cqw 0; background:var(--brand); color:white; font-size:9px; font-size:3.8cqw; border-radius:5px; }
.ticket-share .icon { width:12px; width:5cqw; height:12px; height:5cqw; }
/* Reduced page: product, three benefits, offline ticket, pricing, FAQ. */
.hero-grid { min-height:660px; grid-template-columns:1.15fr 1fr; gap:25px; }
.hero-copy { padding:65px 0; }
.hero h1 { font-size:clamp(44px,4.4vw,62px); letter-spacing:-.045em; }
.hero-lead { max-width:430px; font-size:18px; line-height:1.75; margin-top:26px; }
.hero-visual { height:590px; }
.hero .phone-bookings { top:57px; left:-8px; }
.hero .phone-ticket { top:40px; left:224px; }
.hero-actions { margin-top:32px; }
.essentials { padding:80px 0; }
.essentials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:55px; }
.essentials .icon { width:28px; height:28px; color:var(--brand); margin-bottom:20px; }
.essentials h2 { font-size:23px; line-height:1.3; letter-spacing:-.03em; }
.essentials p { margin-top:14px; font-size:16px; line-height:1.75; }
.offline-section { background:white; padding:30px 0 90px; }
.offline-grid { gap:100px; }
.offline-copy h2 { font-size:44px; }
.offline-copy>p { max-width:415px!important; font-size:17px; line-height:1.8; }
.ticket-display { display:flex; justify-content:center; align-items:center; min-height:455px; position:relative; }


.standalone-ticket { position:relative; z-index:1; width:280px; border:1px solid #e3e3e3; border-radius:10px; padding:26px; background:white; transform:rotate(6deg); box-shadow:0 14px 35px #0000000e; }
.standalone-ticket-title { display:flex; align-items:center; gap:16px; font-size:25px; letter-spacing:-.035em; line-height:1.15; font-weight:500; }
.standalone-ticket-title img { border-radius:9px; }
.standalone-ticket-date { display:flex; justify-content:space-between; font-size:13px; color:#656565; padding:24px 0; }
.standalone-perforation { border-top:1px dashed #ccc; margin:0 -26px 23px; position:relative; }
.standalone-perforation::before,.standalone-perforation::after { content:""; position:absolute; width:17px; height:17px; top:-9px; border:1px solid #ddd; border-radius:50%; background:#fff; }
.standalone-perforation::before { left:-9px; border-left-color:transparent; border-top-color:transparent; transform:rotate(-45deg); }
.standalone-perforation::after { right:-9px; border-right-color:transparent; border-bottom-color:transparent; transform:rotate(-45deg); }
.standalone-qr { margin:auto; width:174px; height:174px; }
.standalone-ticket-saved { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:23px; font-size:13px; color:var(--brand); }
.standalone-ticket-saved .icon { width:17px; height:17px; }
.faq-grid { grid-template-columns:.7fr 1.3fr; }
.faq-intro .text-link { margin-top:20px; }
.site-footer { border-top:1px solid var(--line); }
@media(max-width:1150px) and (min-width:901px) { .hero h1 { font-size:52px; } .hero-grid { min-height:610px; } .hero-visual { transform:scale(.82); } .hero-lead { font-size:17px; } }
@media(max-width:1024px) { .navigation { visibility:hidden; } .navigation.is-open { visibility:visible; } }
@media(max-width:900px) {
 .hero-grid { grid-template-columns:1fr; gap:0; min-height:0; } .hero h1 { font-size:56px; }
 .hero-copy { padding:55px 0 0; } .hero-lead { margin-top:22px; } .hero-visual { height:570px; }
 .hero .phone-bookings { top:42px; left:0; } .hero .phone-ticket { top:24px; left:238px; }
 .essentials-grid { gap:30px; } .essentials h2 { font-size:21px; } .essentials p { font-size:15px; }
 .offline-grid { gap:30px; } .offline-copy h2 { font-size:36px; } .offline-copy>p { font-size:16px; }
 .ticket-display { min-height:430px; } .standalone-ticket { width:250px; padding:22px; } .standalone-ticket-title { font-size:22px; } .standalone-perforation { margin-inline:-22px; }
}
@media(max-width:640px) {
 .hero h1 { font-size:42px; line-height:1.15; } .hero-copy { padding:40px 0 0; } .hero-lead { font-size:16px; max-width:345px; margin-top:20px; }
 .hero-actions { margin-top:25px; } .hero-visual { height:445px; margin-top:25px; }
 .hero .phone-bookings { top:26px; left:0; } .hero .phone-ticket { top:13px; left:162px; }
 .essentials { padding:45px 0 10px; } .essentials-grid { grid-template-columns:1fr; gap:0; }
 .essentials article { display:grid; grid-template-columns:27px 1fr; column-gap:18px; padding:23px 0; border-bottom:1px solid var(--line); }
 .essentials .icon { width:25px; height:25px; grid-row:span 2; margin:0; }
 .essentials h2 { font-size:22px; } .essentials p { margin-top:10px; font-size:15px; }
 .offline-section { padding:55px 0 45px; } .offline-grid { gap:10px; } .offline-copy h2 { font-size:34px; } .offline-copy>p { margin-top:20px; }
 .ticket-display { min-height:450px; } .standalone-ticket { width:265px; }
 .faq-grid { grid-template-columns:1fr; gap:30px; } .faq-intro h2 { font-size:34px; }
}
@media(max-width:370px) { .hero h1 { font-size:36px; } .hero-visual { height:390px; } .hero .phone-ticket { left:145px; } }
.hero-lead strong { font-weight:500; }
.hero-lead { max-width:475px; }
.essentials h2 { font-size:22px; }
/* PureThemes boxed hero and shared heading treatment. */
main { overflow-x:clip; }
.hero { width:calc(100% - 100px); max-width:1600px; margin:94px auto 0; border-radius:12px; }
.hero-grid { min-height:620px; gap:35px; }
.hero h1 { font-size:44px; font-weight:300; line-height:1.2; letter-spacing:-.027em; }
.hero h1 strong { font-weight:600; text-decoration:underline; text-decoration-color:#ffffff50; text-underline-offset:7px; text-decoration-thickness:5px; }
.hero-lead { font-size:16px; line-height:1.8; max-width:450px; }
.hero-visual { height:580px; }
.hero .phone-bookings { top:42px; } .hero .phone-ticket { top:24px; }
.section-kicker { display:inline-block; margin-bottom:20px; padding:4px 12px; border-radius:100px; font-size:16px; line-height:1.44; font-weight:400; color:#3879e5; background:#e1ecff; letter-spacing:normal; }
.hero .section-kicker { color:white; background:#ffffff12; font-size:15px; padding:5px 12px; }
.section-heading h2,.offline-copy h2,.faq-intro h2 { font-size:44px; font-weight:500; line-height:1.2; letter-spacing:-.027em; }
.essentials .section-heading { margin-bottom:50px; }
.section-heading .section-kicker { margin-bottom:20px; }
.section-heading>p:last-child { margin-top:18px; }
.event-art { background:#f2e4c8; }
.event-art .art-word { font-weight:500; }
@media(max-width:1250px) and (min-width:901px) {
 .hero { width:calc(100% - 48px); } .hero-grid { gap:20px; }
 .hero .shell { width:calc(100% - 70px); } .hero-visual { transform:scale(.82); transform-origin:center left; }
 .hero h1 { font-size:40px; }
}
@media(max-width:900px) {
 .hero { width:calc(100% - 40px); margin-top:84px; } .hero-grid { min-height:0; gap:0; }
 .hero .phone-bookings { top:42px; } .hero .phone-ticket { top:24px; }
 .hero .phone-ticket { left:224px; } .hero-visual { width:495px; height:570px; }
 .hero .section-kicker { margin-bottom:22px; } .hero-lead { margin-inline:auto; }
 .section-heading h2,.offline-copy h2,.faq-intro h2 { font-size:36px; }
}
@media(max-width:640px) {
 .hero { width:calc(100% - 24px); margin-top:80px; border-radius:10px; }
 .hero .shell { width:calc(100% - 30px); } .hero h1 { font-size:33px; }
 .hero h1 strong { text-decoration-thickness:3px; text-underline-offset:5px; }
 .hero-copy { padding-top:32px; } .hero-lead { font-size:15px; line-height:1.75; }
 .hero-visual { width:330px; max-width:none; height:445px; margin-left:calc((100% - 330px)/2); margin-top:28px; }
 .hero .phone-bookings { top:26px; left:0; } .hero .phone-ticket { top:13px; left:150px; }
 .section-kicker { font-size:14px; } .hero .section-kicker { font-size:14px; }
 .section-heading h2,.offline-copy h2,.faq-intro h2 { font-size:32px; }
 .essentials .section-heading { margin-bottom:20px; } .essentials { padding-top:55px; }
 .feature-tip p { position:fixed; left:24px; right:24px; bottom:28px; width:auto; max-width:none; }
}
@media(max-width:370px) {
 .hero h1 { font-size:29px; } .hero .phone-ticket { left:150px; }
 .hero-visual { height:390px; transform:scale(.88); }
 .hero-actions { gap:12px; } .hero-actions .button { padding-inline:12px; }
}

/* Simple header, listing photo, animated steps and hover tooltips. */
.back-to-landing { display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:7px 0; color:#333; font-size:16px; text-decoration:none; white-space:nowrap; transition:color .18s; }
.back-to-landing svg { width:18px; height:18px; transition:transform .2s; }
.back-to-landing:hover { color:var(--brand); }
.back-to-landing:hover svg { transform:translateX(-3px); }
.back-to-landing:focus-visible,.feature-tip button:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.listing-photo { width:100%; height:39cqw; object-fit:cover; object-position:50% 48%; }
.essentials { padding:80px 0 90px; }
.essentials-grid { gap:24px; }
.essentials article.step-card { display:block; padding:30px 28px 32px; border:1px solid #e5e5e5; border-radius:12px; background:#fff; box-shadow:0 3px 8px #00000002,0 10px 26px #00000005; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.step-icon { display:block; width:48px; height:48px; margin:0 0 25px; color:var(--brand); overflow:visible; }
.step-card h3 { font-size:21px; font-weight:500; line-height:1.35; letter-spacing:-.025em; }
.essentials .step-card p { margin-top:13px; font-size:15px; line-height:1.75; }
.install-progress { stroke-dasharray:1; stroke-dashoffset:1; }
.phone-app { transform-origin:28px 27px; }
.booking-check { stroke-dasharray:1; }
@media(hover:hover) {
 .essentials article.step-card:hover { transform:translateY(-4px); border-color:#b4cbf0; box-shadow:0 4px 12px #00000003,0 14px 32px #00000009; }
 .step-install:hover .install-arrow { animation:install-drop .7s ease both; }
 .step-install:hover .install-progress { animation:step-draw .5s .25s ease both; }
 .step-phone:hover .phone-app { animation:app-install .65s ease both; }
 .step-booking:hover .booking-check { animation:step-draw .65s ease both; }
}
@keyframes install-drop { 0%,100% { transform:translateY(0); } 40% { transform:translateY(5px); } 70% { transform:translateY(-2px); } }
@keyframes step-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes app-install { 0% { transform:translateY(-7px) scale(.7); opacity:0; } 65% { transform:translateY(1px) scale(1.05); opacity:1; } 100% { transform:translateY(0) scale(1); opacity:1; } }
.feature-check { display:block; flex:0 0 18px; width:18px; height:18px; color:var(--brand); }
.feature-tip { display:inline-flex; align-items:center; padding:4px; margin:-4px; }
.feature-tip button { display:flex; align-items:center; justify-content:center; width:17px; height:17px; padding:0; border:0; border-radius:50%; background:#0060ff14; color:var(--brand); font:500 11px/1 Inter,Arial,sans-serif; cursor:help; }
.feature-tooltip { position:absolute; z-index:10; bottom:100%; right:-14px; width:250px; padding:13px 15px; border-radius:6px; background:#181818; color:white; box-shadow:0 5px 20px #0002; font-size:12px; font-weight:400; line-height:1.65; text-align:left; visibility:hidden; opacity:0; transform:translateY(3px); transition:opacity .15s,transform .15s,visibility .15s; }
.feature-tip.is-open .feature-tooltip { visibility:visible; opacity:1; transform:translateY(0); }
@media(max-width:1050px) {
 .essentials-grid { gap:18px; }
 .essentials article.step-card { padding:26px 22px 28px; }
 .step-card h3 { font-size:20px; }
}
@media(max-width:760px) {
 .essentials-grid { grid-template-columns:1fr; gap:16px; }
 .essentials article.step-card { padding:26px; }
 .step-icon { margin-bottom:20px; width:44px; height:44px; }
 .step-card h3 { font-size:22px; }
 .essentials .step-card p { font-size:16px; }
}
@media(max-width:640px) {
 .header-inner { gap:12px; }
 .back-to-landing { gap:5px; font-size:12px; }
 .back-to-landing svg { width:16px; height:16px; }
 .purethemes-brand img { width:128px; }
 .essentials { padding:55px 0; }
 .essentials .section-heading { margin-bottom:30px; }
 .feature-tooltip { position:fixed; left:24px; right:24px; bottom:24px; width:auto; padding:16px 18px; font-size:14px; }
}
@media(max-width:370px) {
 .header-inner { width:calc(100% - 24px); gap:8px; }
 .purethemes-brand img { width:110px; }
 .back-to-landing { font-size:11px; gap:3px; }
 .step-card h3 { font-size:21px; }
 .essentials .step-card p { font-size:15px; }
}

.pricing-after .app-store-note { margin:22px 0 0; font-size:14px; line-height:1.75; color:#666; }

.listing-photo { height:53cqw; }
.app-card-body p+p { margin-top:3px; }

/* Match header height to the space before the boxed hero. */
:root { --header-height:94px; }
.site-header,.header-inner { height:var(--header-height); }
.hero { margin-top:var(--header-height); }
.app-store-note strong { display:block; color:#333; font-weight:600; }
.pricing-after { margin:0 auto; }
@media(max-width:900px) { :root { --header-height:84px; } }
@media(max-width:640px) {
 :root { --header-height:80px; }
 .app-store-note strong { margin-top:5px; }
}
/* Soft light behind the phones, with more room around the illustration. */
.hero { background:radial-gradient(ellipse at 77% 52%,#438aff 0%,#1970ff 30%,#0060ff 64%); }
.hero-visual { transform:scale(.9); transform-origin:center center; }
@media(max-width:1250px) and (min-width:901px) { .hero-visual { transform:scale(.74); transform-origin:center left; } }
@media(max-width:900px) { .hero { background:radial-gradient(ellipse at 50% 76%,#438aff 0%,#1970ff 26%,#0060ff 62%); } }
@media(max-width:640px) { .hero-visual { transform:scale(.8); } }
@media(max-width:370px) { .hero-visual { transform:scale(.68); } }

/* Footer matches the restrained boxed style used across PureThemes. */
.site-footer { width:calc(100% - 100px); max-width:1600px; margin:0 auto 30px; padding:0; border:0; border-radius:12px; background:#f7f7f7; }
.site-footer .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; min-height:82px; padding:24px 36px; }
.footer-made { margin:0; color:#888; font-size:16px; }
.footer-made a { text-decoration:none; }
.footer-links { display:flex; align-items:center; gap:7px; font-size:14px; color:#888; }
.footer-links a { font-size:inherit; color:inherit; text-decoration:none; }
.footer-made a:hover,.footer-links a:hover { color:var(--brand); }
@media(max-width:1250px) { .site-footer { width:calc(100% - 48px); } }
@media(max-width:900px) { .site-footer { width:calc(100% - 40px); } }
@media(max-width:640px) {
 .site-footer { width:calc(100% - 24px); margin-bottom:12px; border-radius:10px; }
 .site-footer .footer-inner { flex-direction:column; gap:10px; padding:24px 16px; }
 .footer-made { font-size:14px; }
 .footer-links { gap:5px; font-size:12px; }
}

.site-header,.site-header.is-scrolled { border:0; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.headline-listeo { white-space:nowrap; }
.headline-listeo img { display:inline-block; width:auto; height:.8em; max-width:none; margin-right:.15em; vertical-align:-.055em; }

:root { --header-height:84px; }
.site-footer { width:min(calc(100% - 48px),var(--shell)); max-width:var(--shell); }
@media(max-width:900px) { :root { --header-height:76px; } }
@media(max-width:640px) {
 :root { --header-height:72px; }
 .site-footer { width:calc(100% - 40px); }
}
@media(max-width:370px) { .site-footer { width:calc(100% - 32px); } }
.footer-inner>.footer-links { gap:7px; }
.site-footer .footer-made { font-size:16px; }
@media(max-width:640px) {
 .footer-inner>.footer-links { gap:5px; margin-left:0; }
 .site-footer .footer-made { font-size:14px; }
}

/* Anchor each tooltip to its question mark, with edge correction on small screens. */
.feature-tip .feature-tooltip { position:absolute; left:50%; right:auto; top:auto; bottom:calc(100% + 8px); width:min(250px,calc(100vw - 32px)); max-width:none; padding:13px 15px; font-size:12px; transform:translateX(calc(-50% + var(--tooltip-shift,0px))) translateY(3px); }
.feature-tip.is-open .feature-tooltip { transform:translateX(calc(-50% + var(--tooltip-shift,0px))) translateY(0); }
.feature-tooltip::before { content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.feature-tooltip::after { content:""; position:absolute; top:100%; left:calc(50% - var(--tooltip-shift,0px)); transform:translateX(-50%); border:6px solid transparent; border-top-color:#181818; }

/* Section headings: four pixels smaller at every breakpoint. */
.section-heading h2,.faq-intro h2 { font-size:40px; }
@media(max-width:900px) { .section-heading h2,.faq-intro h2 { font-size:32px; } }
@media(max-width:640px) { .section-heading h2,.faq-intro h2 { font-size:28px; } }

.hero-v2 {
  container-type:inline-size;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  width:calc(100% - 48px);
  max-width:1600px;
  margin:var(--header-height) auto 0;
}
.v2-copy,.v2-stage { min-width:0; min-height:630px; border-radius:16px; }
.header-inner { max-width:var(--shell); }
.v2-copy { display:flex; align-items:center; padding:42px 40px 42px max(0px,calc((100cqw - var(--shell))/2)); background:#f7f7f7; }
.v2-copy h1 { color:#181818; font-size:50px; font-weight:400; line-height:1.14; letter-spacing:-.045em; }
.v2-copy h1 strong { color:var(--brand); font-weight:500; }
.v2-copy .headline-listeo img { height:.88em; vertical-align:-.055em; margin-right:.12em; }
.v2-lead { max-width:440px; margin-top:27px; font-size:18px; line-height:1.8; color:#666; }
.v2-lead strong { font-weight:500; color:#333; }
.v2-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:34px; }
.v2-actions .button { min-height:50px; padding:12px 27px; font-size:15px; }
.v2-actions .button,.pricing-card-top .button {
  background-color:transparent;
  background-image:linear-gradient(180deg,#1b71ff 0%,#0060ff 100%);
  border-style:none;
  box-shadow:0 6px 10px rgba(0,96,255,.2);
  transform:none;
  transition:box-shadow .2s ease;
}
.v2-actions .button:hover,.pricing-card-top .button:hover {
  box-shadow:0 8px 14px rgba(0,96,255,.28);
  transform:none;
}
.v2-secondary { display:inline-flex; align-items:center; gap:9px; font-size:15px; color:#333; text-decoration:none; }
.v2-secondary .icon { width:18px; height:18px; transform:rotate(90deg); }
.v2-secondary:hover { color:var(--brand); }
.v2-stage { display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; position:relative; overflow:hidden; isolation:isolate; background:#edf6ff; border:1px solid #dce7f4; padding:36px 20px; }
.v2-dither { position:absolute; z-index:-1; inset:0; width:100%; height:100%; }
.v2-phone { touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; cursor:grab; flex-shrink:0; width:280px; aspect-ratio:355/640; container-type:inline-size; padding:7px; border-radius:44px; background:rgba(232,232,232,.62); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.68); box-shadow:0 0 0 1px #b4c4d024,0 24px 50px #1743750a; }
.v2-device { height:100%; position:relative; overflow:hidden; border-radius:37px; background:#fff; }
.v2-island { position:absolute; z-index:3; top:4.3cqw; left:50%; transform:translateX(-50%); width:28cqw; height:7cqw; border-radius:20px; background:#121212; }
.v2-app { padding:18cqw 6.2cqw 0; }
.v2-app-logo { display:flex; align-items:center; gap:1.8cqw; color:#191919; font-size:6.6cqw; font-weight:500; letter-spacing:-.04em; line-height:1.1; }
.v2-app-logo img { width:5.8cqw; height:auto; }
.v2-avatar { display:grid; place-items:center; margin-left:auto; width:8cqw; height:8cqw; border:1px solid #e5e8eb; border-radius:50%; font-size:2.7cqw; font-weight:400; letter-spacing:0; }
.v2-app-heading { display:flex; align-items:center; justify-content:space-between; margin:6cqw 0 4cqw; }
.v2-app-heading h3 { font-size:6.5cqw; line-height:1.2; font-weight:500; letter-spacing:-.035em; }
.v2-app-heading .icon { width:6cqw; height:6cqw; color:#666; }
.v2-booking { border:1px solid #e2e6eb; border-radius:6cqw; overflow:hidden; background:#fff; }
.v2-listing-photo { width:100%; height:48cqw; object-fit:cover; object-position:center 45%; }
.v2-booking-body { padding:4.8cqw; }
.v2-booking-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.v2-booking-title h4 { margin:0; font-size:5.4cqw; font-weight:500; line-height:1.3; letter-spacing:-.02em; }
.v2-booking-title .icon { width:4.5cqw; height:4.5cqw; color:#2a845b; }
.v2-location { margin-top:1cqw; font-size:3.2cqw; line-height:1.5; color:#777; }
.v2-booking-date { display:flex; align-items:center; gap:2cqw; margin-top:4cqw; padding-top:3.6cqw; border-top:1px solid #eceef1; }
.v2-booking-date .icon { width:4.4cqw; height:4.4cqw; color:#777; }
.v2-booking-date>span { display:flex; flex:1; justify-content:space-between; font-size:3.2cqw; }
.v2-booking-date>span>span { color:#777; }
.v2-booking-total { display:flex; justify-content:space-between; margin-top:2.7cqw; font-size:3.3cqw; color:#777; }
.v2-booking-total strong { font-weight:500; color:#222; }
.v2-ticket-link { display:flex; align-items:center; justify-content:center; gap:2cqw; margin-top:4cqw; padding:3cqw 0; border-radius:3cqw; color:white; background:#0060ff; font-size:3.6cqw; line-height:1.3; }
.v2-ticket-link .icon { width:4.6cqw; height:4.6cqw; }
.v2-pages { position:absolute; inset:0; overflow:hidden; }
.v2-page { position:absolute; inset:0; transform:translateX(110%); transition:transform .36s cubic-bezier(.22,.7,.25,1); pointer-events:none; }
.v2-page:first-child { transform:translateX(-110%); }
.v2-page.is-active { transform:translateX(0); }
.v2-home-menu { width:5.3cqw; height:5.3cqw; margin-left:auto; color:#333; }
.v2-home-hero { margin-top:6cqw; padding:6cqw 4.5cqw; border-radius:4cqw; color:#fff; background:linear-gradient(#1119,#111a),url("https://listeo.pro/wp-content/uploads/2025/06/listeo_background-1-1.jpg") center/cover; }
.v2-home-hero h3 { color:#fff; font-size:7cqw; font-weight:500; line-height:1.15; letter-spacing:-.035em; margin:0; }
.v2-home-hero>p { font-size:3cqw; line-height:1.5; margin:2cqw 0 4cqw; color:#ffffffd9; }
.v2-home-search { display:grid; gap:2cqw; }
.v2-home-search>div { display:flex; align-items:center; justify-content:space-between; min-height:9cqw; padding:0 3cqw; border-radius:2cqw; background:#fff; color:#777; font-size:3cqw; }
.v2-home-search .icon { width:3.8cqw; height:3.8cqw; color:#999; }
.v2-home-search>span { display:block; padding:2.8cqw; background:#0060ff; border-radius:2cqw; text-align:center; font-size:3.5cqw; line-height:1.3; font-weight:500; }
.v2-home-categories { margin-top:5cqw; }
.v2-home-categories h4 { margin:0 0 3cqw; text-align:center; font-size:4cqw; font-weight:500; letter-spacing:-.025em; line-height:1.2; }
.v2-home-categories>div { display:grid; grid-template-columns:repeat(3,1fr); gap:2cqw; }
.v2-home-categories>div>span { display:flex; flex-direction:column; align-items:center; gap:1.5cqw; padding:3cqw 1cqw; border-radius:2cqw; background:#f6f6f6; color:#666; font-size:2.6cqw; line-height:1.2; }
.v2-home-categories .icon { width:6cqw; height:6cqw; color:#0060ff; stroke-width:1.3; }
.v2-install-prompt { position:absolute; bottom:9cqw; left:4cqw; right:4cqw; padding:4.5cqw; border:1px solid #e2e6eb; border-radius:5cqw; background:#fff; }
.v2-install-title { display:flex; gap:3cqw; align-items:center; }
.v2-app-icon { display:grid; place-items:center; flex-shrink:0; width:11cqw; height:11cqw; border-radius:2.6cqw; background:#0060ff; }
.v2-app-icon img { width:6cqw; height:auto; }
.v2-install-title h4 { margin:0; font-size:4.7cqw; font-weight:500; line-height:1.4; letter-spacing:-.02em; }
.v2-install-title p { margin:0; color:#777; font-size:3.2cqw; line-height:1.5; }
.v2-prompt-close { margin-left:auto; align-self:flex-start; color:#999; font-size:5cqw; line-height:1; }
.v2-install-button { display:flex; align-items:center; justify-content:center; gap:2cqw; padding:3cqw; margin-top:4cqw; border-radius:3cqw; background:#0060ff; color:#fff; font-size:4cqw; font-weight:500; line-height:1.3; }
.v2-install-button .icon { width:4.5cqw; height:4.5cqw; }
.v2-notifications { background:linear-gradient(150deg,#2e4aa3 0%,#161616 55%,#080808 100%); }
.v2-lock-clock { padding:23cqw 0 0; text-align:center; color:#fff; }
.v2-lock-clock p { color:#ffffffb3; margin:0; font-size:4.4cqw; line-height:1.5; font-weight:500; }
.v2-lock-clock strong { display:block; font-size:22cqw; font-weight:500; letter-spacing:-.045em; line-height:1.2; }
.v2-notice-stack { margin:13cqw 4cqw 0; display:grid; gap:3cqw; }
.v2-notice { padding:4cqw; border:1px solid #ffffff8c; border-radius:5cqw; background:#ffffffdf; box-shadow:0 2cqw 5cqw #17437508; color:#222; }
.v2-notice-source { display:flex; align-items:center; gap:2cqw; margin-bottom:2cqw; font-size:2.6cqw; color:#666; }
.v2-notice-source .v2-app-icon { width:5.5cqw; height:5.5cqw; border-radius:1.4cqw; }
.v2-notice-source .v2-app-icon img { width:3cqw; }
.v2-notice-source time { margin-left:auto; }
.v2-notice h4 { margin:0 0 1cqw; font-size:3.8cqw; font-weight:500; letter-spacing:-.025em; line-height:1.35; }
.v2-notice p { margin:0; font-size:3.35cqw; color:#666; line-height:1.5; }
.v2-notice-small { display:flex; align-items:center; gap:2cqw; font-size:3.3cqw; padding:3.3cqw 4cqw; background:#ffffffa6; }
.v2-notice-small .icon { width:4cqw; height:4cqw; }
.v2-slider-dots { position:relative; flex-shrink:0; display:flex; gap:0; padding:0 5px; border:1px solid #fff; border-radius:30px; background:#fff; }
.v2-slider-dots button { display:grid; place-items:center; width:20px; height:24px; padding:0; border:0; background:transparent; cursor:pointer; border-radius:50%; }
.v2-slider-dots button::after { content:""; width:8px; height:8px; border-radius:50%; background:#0060ff; opacity:.35; transition:opacity .15s; }
.v2-slider-dots button.is-active::after,.v2-slider-dots button:hover::after { opacity:1; }
.v2-slider-dots button:focus,.v2-slider-dots button:focus-visible,.v2-slider-dots button:active { outline:none; border:0; box-shadow:none; }
.v2-slider-dots button:focus-visible::after { opacity:1; }
.v2-app-nav { position:absolute; bottom:7cqw; left:5cqw; right:5cqw; display:flex; justify-content:space-around; border-top:1px solid #e5e8ec; padding-top:3.6cqw; }
.v2-app-nav>span { display:flex; align-items:center; flex-direction:column; gap:1.3cqw; font-size:2.7cqw; color:#8b9097; line-height:1.2; }
.v2-app-nav .icon { width:5.3cqw; height:5.3cqw; stroke-width:1.5; }
.v2-app-nav .current { color:#0060ff; }
@media(min-width:1600px) { .v2-copy,.v2-stage { min-height:640px; } }
@media(max-width:1250px) {
 .hero-v2 { width:calc(100% - 48px); gap:18px; }
 .v2-copy,.v2-stage { min-height:620px; border-radius:16px; }
 .v2-copy { padding:44px 38px; }
 .v2-stage { padding:36px 20px; }
 .v2-copy h1 { font-size:46px; }
 .v2-lead { font-size:18px; margin-top:26px; }
 .v2-actions { gap:17px; }
 .v2-secondary { font-size:14px; }
 .v2-phone { width:275px; }
}
@media(max-width:1000px) {
 .v2-copy { padding:36px 28px; }
 .v2-copy h1 { font-size:40px; }
 .v2-stage { padding:36px 16px; }
 .v2-phone { width:260px; padding:7px; border-radius:44px; }
 .v2-device { border-radius:37px; }
 .v2-copy,.v2-stage { min-height:590px; }
}
@media(max-width:800px) {
 .hero-v2 { width:calc(100% - 40px); grid-template-columns:1fr; gap:16px; }
 .v2-copy { min-height:0; padding:42px; }
 .v2-copy h1 { font-size:48px; }
 .v2-lead { max-width:520px; }
 .v2-stage { min-height:640px; }
 .v2-phone { width:285px; }
}
@media(prefers-reduced-motion:reduce) { .v2-page { transition:none; } }
@media(max-width:640px) {
 .hero-v2 { width:calc(100% - 24px); gap:12px; }
 .v2-copy,.v2-stage { border-radius:16px; }
 .v2-copy { padding:34px 28px 36px; }
 .v2-copy h1 { font-size:38px; }
 .v2-lead { font-size:18px; line-height:1.65; margin-top:24px; }
 .v2-actions { gap:12px; margin-top:26px; }
 .v2-actions .button { padding:12px 18px; font-size:14px; min-height:46px; gap:10px; }
 .v2-secondary { font-size:13px; gap:5px; }
 .v2-secondary .icon { width:15px; height:15px; }
 .v2-stage { min-height:0; padding:36px 20px; }
 .v2-phone { width:min(100%,295px); border-radius:44px; padding:7px; }
 .v2-device { border-radius:37px; }
}
@media(max-width:370px) {
 .v2-copy { padding:30px 23px; }
 .v2-copy h1 { font-size:33px; }
 .v2-actions { gap:14px; }
 .v2-stage { padding:36px 18px; }
 .v2-phone { border-radius:39px; padding:6px; }
 .v2-device { border-radius:33px; }
}

.v2-phone.is-dragging { cursor:grabbing; }
.v2-phone img { -webkit-user-drag:none; pointer-events:none; }

/* Static blue glow using the Listeo Monetization pricing palette. */
.pricing {
  position: relative;
  isolation: isolate;
  background: #fff;
}

.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 300px 260px at calc(50% - 155px) 65%,
      rgb(0 96 255 / 12%) 0%, rgb(0 96 255 / 6%) 42%, transparent 100%),
    radial-gradient(ellipse 310px 290px at calc(50% + 165px) 71%,
      rgb(58 132 255 / 14%) 0%, rgb(58 132 255 / 7%) 42%, transparent 100%),
    radial-gradient(ellipse 340px 250px at 50% 80%,
      rgb(150 197 255 / 16%) 0%, rgb(150 197 255 / 8%) 42%, transparent 100%);
}

.pricing > .shell {
  position: relative;
  z-index: 1;
}

#ptlp-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
#ptlp-success-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.12);
    padding: 36px 32px;
    max-width: 620px;
    width: 90%;
    text-align: center;
    font-family: system-ui, sans-serif;
    position: relative;
    overflow: hidden;
}
#ptlp-confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
#ptlp-success-modal > *:not(#ptlp-confetti-canvas) {
    position: relative;
    z-index: 2;
}
#ptlp-success-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
#ptlp-success-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
#ptlp-success-header-left h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}
#ptlp-check-icon {
    width: 36px;
    height: 36px;
    background: #d4f2de;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#ptlp-success-close {
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    background: #f0f0f0;
    transition: all 0.15s ease;
}
#ptlp-success-close:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}
#ptlp-license-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    overflow: hidden;
}
#ptlp-license-input .ptlp-key-value {
    flex: 1;
    font-size: 15px;
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
  monospace;
    word-break: break-all;
    color: #1a1a1a;
    padding: 10px 14px;
    text-align: left;
}
#ptlp-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid #dcdcdc;
    padding: 10px 12px;
    color: #999;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
#ptlp-copy-btn:hover {
    background: #f5f5f5;
    color: #333;
}
          

/* Fit the copied popup on short/mobile screens without changing its desktop layout. */
#ptlp-success-overlay { padding: 24px 0; overflow-y: auto; }
#ptlp-success-modal { box-sizing: border-box; max-height: calc(100dvh - 48px); overflow-y: auto; }
#ptlp-success-close { border: 0; padding: 0; font-family: inherit; }
#ptlp-success-header-left { text-align: left; }
#ptlp-success-modal ol li { font-size: 14px; color: #555; line-height: 1.7; }
#ptlp-success-modal a:focus-visible,
#ptlp-success-modal button:focus-visible { outline: 2px solid #0060ff; outline-offset: 3px; }
@media (max-width: 480px) {
  #ptlp-success-modal { padding: 24px 18px; width: calc(100% - 24px); }
  #ptlp-success-header { gap: 8px; }
  #ptlp-success-header-left { gap: 9px; }
  #ptlp-success-header-left h2 { font-size: 19px; line-height: 1.3; }
  #ptlp-check-icon { width: 30px; height: 30px; }
  #ptlp-success-close { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  #ptlp-confetti-canvas { display: none; }
}

.checkout-spinner { width:16px; height:16px; flex-shrink:0; display:inline-block; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:checkout-spin .65s linear infinite; }
[data-checkout].is-opening { cursor:progress; gap:8px; }
@keyframes checkout-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .checkout-spinner { animation:none; } }

/* Local proposal: a visual explanation of installation and daily use. */
.pwa-journey { padding:80px 0 90px; }
.pwa-journey .section-heading { margin-bottom:44px; }
.journey-note { margin:26px 0 0; padding:24px 32px; border-radius:16px; background:#f7f7f7; color:#666; text-align:center; font-size:16px; line-height:1.75; }
.journey-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.journey-card { position:relative; min-width:0; border:1px solid #e6e6e6; border-radius:16px; background:#fff; box-shadow:0 5px 18px #00000004; }
.journey-scene { display:flex; align-items:center; justify-content:center; height:362px; overflow:hidden; border-radius:15px 15px 0 0; background:#f7f7f7; padding:20px 12px; }
.journey-phone { position:relative; flex-shrink:0; width:234px; height:320px; overflow:hidden; border:6px solid #ececec; border-radius:28px; background:#fff; box-shadow:0 0 0 1px #dcdcdc,0 12px 24px #00000008; font-size:12px; line-height:1.4; }
.journey-phone .icon { width:18px; height:18px; margin:0; color:inherit; }
.journey-browser { display:flex; align-items:center; justify-content:center; gap:5px; height:29px; margin:7px 9px 0; border-radius:8px; background:#f3f3f3; font-size:10px; color:#666; }
.journey-browser>svg { width:11px; height:11px; }
.journey-browser>span { position:absolute; right:20px; font-size:9px; letter-spacing:1px; }
.journey-site { padding:12px; filter:blur(4px); opacity:.7; }
.journey-logo { display:flex; align-items:center; gap:5px; color:#191919; font-size:18px; font-weight:500; letter-spacing:-.05em; }
.journey-logo>img { width:16px; height:19px; }
.journey-logo>.icon { width:15px; height:15px; margin-left:auto; color:#777; }
.journey-site-hero { margin-top:10px; padding:12px; border-radius:9px; background:linear-gradient(#1118,#111a),url("https://listeo.pro/wp-content/uploads/2025/06/listeo_background-1-1.jpg") center/cover; color:#fff; }
.journey-site-hero>strong { display:block; font-size:18px; font-weight:500; line-height:1.2; letter-spacing:-.04em; }
.journey-site-hero>div { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:7px; background:#fff; border-radius:5px; color:#777; font-size:8px; }
.journey-site-hero>div .icon { width:12px; height:12px; }
.journey-mini-categories { display:flex; gap:6px; margin-top:10px; }
.journey-mini-categories>span { display:grid; place-items:center; flex:1; height:35px; background:#f5f5f5; color:#0060ff; border-radius:7px; }
.journey-prompt { position:absolute; left:8px; right:8px; bottom:13px; padding:12px; border:1px solid #dedede; border-radius:15px; background:#fff; }
.journey-prompt-title { display:flex; align-items:center; gap:8px; }
.journey-prompt-title>img { width:32px; height:32px; border-radius:9px; }
.journey-prompt-title strong { display:block; font-size:12px; font-weight:500; letter-spacing:-.025em; }
.journey-prompt-title div>span { display:block; font-size:8px; color:#777; margin-top:2px; }
.journey-close { margin-left:auto; align-self:flex-start; color:#999; font-size:14px; }
.journey-install-cta { display:flex; align-items:center; justify-content:center; gap:6px; background:#0060ff; color:#fff; padding:9px 5px; margin-top:11px; border-radius:8px; font-size:11px; font-weight:500; }
.journey-install-cta .icon { width:14px; height:14px; }
.journey-home { background:linear-gradient(150deg,#e9e5df,#deddda 55%,#c9cecd); }
.journey-status { display:flex; align-items:center; justify-content:space-between; margin:12px 15px 0; height:14px; font-size:9px; font-weight:500; color:#333; }
.journey-status>svg { width:24px; height:10px; }
.journey-home-date { margin-top:13px; text-align:center; color:#4b4b4b; font-size:10px; }
.journey-home-date strong { display:block; color:#282828; font-size:39px; line-height:1.2; font-weight:400; letter-spacing:-.045em; }
.journey-app-grid { display:grid; grid-template-columns:repeat(3,1fr); row-gap:15px; margin:20px 15px 0; }
.journey-app-grid>div { display:flex; align-items:center; flex-direction:column; gap:5px; color:#535353; font-size:9px; }
.journey-generic-app { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; background:#ffffff80; color:#888; }
.journey-generic-app .icon { width:23px; height:23px; stroke-width:1.3; }
.journey-app-grid>.journey-listeo-app { color:#202020; font-weight:500; }
.journey-listeo-app>img { width:43px; height:43px; border-radius:12px; box-shadow:0 4px 9px #0060ff26; transition:transform .25s ease,box-shadow .25s ease; }
.journey-running .journey-status { position:relative; z-index:2; margin-top:11px; }
.journey-running-content { padding:13px 12px 0; }
.journey-dashboard-heading { margin:11px 0 10px; font-size:18px; line-height:1.2; font-weight:500; letter-spacing:-.04em; }
.journey-dashboard-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.journey-stat { min-width:0; padding:9px 8px; border-radius:7px; }
.journey-stat>span { display:flex; align-items:center; gap:3px; font-size:7px; font-weight:500; line-height:12px; white-space:nowrap; }
.journey-stat .icon { width:11px; height:11px; stroke-width:1.6; }
.journey-stat>strong { display:block; margin-top:6px; font-size:20px; line-height:1.1; font-weight:500; letter-spacing:-.055em; }
.journey-stat-listings { background:#f1f9ef; color:#48ad28; }
.journey-stat-views { background:#f2f3fc; color:#3e59cc; }
.journey-stat-reviews { background:#fdf7ed; color:#dd9605; }
.journey-stat-bookmarks { background:#fff0f3; color:#fa2854; }
.journey-dashboard-activity { margin-top:10px; border:1px solid #e8e8e8; border-radius:7px; color:#444; }
.journey-dashboard-activity>strong { display:block; padding:7px 9px; border-bottom:1px solid #eee; font-size:10px; font-weight:500; }
.journey-dashboard-activity>div { display:flex; align-items:center; gap:6px; padding:7px 9px; font-size:8px; }
.journey-dashboard-activity .icon { width:12px; height:12px; color:#48ad28; }
.journey-message-content { display:none; position:absolute; inset:38px 0 13px; padding:0 12px; flex-direction:column; background:#fff; }
.journey-message-heading { margin-top:10px; font-size:18px; font-weight:500; letter-spacing:-.04em; }
.journey-conversation-header { display:flex; align-items:center; gap:7px; margin-top:10px; padding-bottom:9px; border-bottom:1px solid #ededed; }
.journey-conversation-header>.icon { width:13px; height:13px; color:#777; transform:rotate(180deg); }
.journey-message-avatar { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#ededed; color:#666; font-size:10px; }
.journey-conversation-header>strong { font-size:11px; font-weight:500; }
.journey-conversation { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.journey-message-bubble { align-self:flex-start; max-width:88%; padding:8px 9px; border-radius:9px 9px 9px 2px; background:#f1f1f1; color:#333; font-size:10px; line-height:1.5; }
.journey-message-reply { align-self:flex-end; border-radius:9px 9px 2px 9px; background:#0060ff; color:#fff; }
.journey-message-composer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding:8px 9px; border:1px solid #e6e6e6; border-radius:8px; color:#999; font-size:9px; }
.journey-message-composer>.icon { width:13px; height:13px; color:#0060ff; }
.journey-push-overlay { display:none; position:absolute; z-index:3; inset:0; pointer-events:none; }
.journey-push-notice { position:absolute; top:38px; left:9px; right:9px; padding:11px; border:1px solid transparent; border-radius:13px; background:#ffffff85; -webkit-backdrop-filter:blur(12px) saturate(1.35); backdrop-filter:blur(12px) saturate(1.35); box-shadow:0 5px 18px #00000012; color:#1b1b1b; text-align:left; }
.journey-push-notice::before { content:""; position:absolute; inset:-1px; padding:1px; border-radius:inherit; background:linear-gradient(145deg,#ffffffeb,#ffffff1a 45%,#ffffff70); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.journey-push-source { display:flex; align-items:center; gap:5px; margin-bottom:7px; color:#5b5b60; font-size:9px; }
.journey-push-source>img { width:19px; height:19px; border-radius:5px; }
.journey-push-source>span:last-child { margin-left:auto; font-size:8px; color:#777; }
.journey-push-notice>strong { display:block; font-size:11px; font-weight:600; line-height:1.35; }
.journey-push-notice>p { margin-top:4px; font-size:10px; line-height:1.45; color:#555; }
.journey-push-cursor { position:absolute; left:146px; top:104px; width:25px; height:31px; transform-origin:39% 14%; filter:drop-shadow(0 2px 2px #0003); }
@media(prefers-reduced-motion:no-preference) {
 .has-push-demo .journey-push-overlay { display:block; }
 .has-push-demo .journey-message-content { display:flex; animation:journey-messages-open 8s ease infinite; }
 .has-push-demo .journey-running-content { animation:journey-dashboard-switch 8s ease infinite; }
 .has-push-demo .journey-push-notice { animation:journey-notification 8s ease infinite; }
 .has-push-demo .journey-push-cursor { animation:journey-notification-tap 8s ease infinite; }
 .has-push-demo:not(.is-demo-playing) .journey-message-content,
 .has-push-demo:not(.is-demo-playing) .journey-running-content,
 .has-push-demo:not(.is-demo-playing) .journey-push-notice,
 .has-push-demo:not(.is-demo-playing) .journey-push-cursor { animation-play-state:paused; }
}
@keyframes journey-dashboard-switch {
 0%,45.375%,95.875%,100% { opacity:1; transform:translateX(0); }
 50.875%,90.375% { opacity:0; transform:translateX(-8px); }
}
@keyframes journey-messages-open {
 0%,45.375%,100% { opacity:0; transform:translateX(8px); }
 50.875%,90.375% { opacity:1; transform:translateX(0); }
 95.875% { opacity:0; transform:translateX(0); }
}
@keyframes journey-notification {
 0%,13.75%,95.875%,100% { opacity:0; transform:translateY(-14px) scale(1); }
 17.875%,39.875%,45.375% { opacity:1; transform:translateY(0) scale(1); }
 42.625% { opacity:1; transform:translateY(0) scale(.975); }
 49.5%,90.375% { opacity:0; transform:translateY(0) scale(1); }
}
@keyframes journey-notification-tap {
 0%,31.625%,95.875%,100% { opacity:0; transform:translate(17px,27px) scale(1); }
 38.5%,39.875%,45.375% { opacity:1; transform:translate(0,0) scale(1); }
 42.625% { opacity:1; transform:translate(0,0) scale(.86); }
 49.5%,90.375% { opacity:0; transform:translate(0,0) scale(1); }
}
.journey-caption { padding:24px 25px 27px; }
.journey-caption h3 { font-size:20px; line-height:1.35; font-weight:500; letter-spacing:-.035em; }
.journey-caption p { margin-top:10px; font-size:15px; line-height:1.65; color:#666; }
.journey-caption p strong { font-weight:600; color:#333; }
.journey-connector { position:absolute; z-index:1; top:159px; right:-53px; width:80px; height:44px; stroke:#0060ff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.journey-connector path { vector-effect:non-scaling-stroke; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .journey-homescreen:hover .journey-listeo-app>img { transform:translateY(-3px); box-shadow:0 7px 13px #0060ff35; }
}
@media(max-width:1100px) and (min-width:761px) {
 .journey-grid { gap:20px; }
 .journey-caption { padding:22px 20px 24px; }
 .journey-caption h3 { font-size:19px; }
 .journey-scene { height:320px; padding:10px 0; }
 .journey-phone { transform:scale(.92); }
 .journey-connector { right:-33px; top:145px; width:46px; height:30px; }
}
@media(max-width:850px) and (min-width:761px) {
 .journey-scene { height:285px; }
 .journey-phone { transform:scale(.82); }
 .journey-connector { top:127px; }
}
@media(max-width:760px) {
 .pwa-journey { padding:60px 0; }
 .pwa-journey .section-heading { margin-bottom:32px; }
 .journey-note { max-width:430px; margin:24px auto 0; padding:22px 24px; font-size:15px; }
 .journey-grid { grid-template-columns:1fr; gap:34px; max-width:430px; margin-inline:auto; }
 .journey-scene { height:360px; }
 .journey-caption { padding:21px 24px 25px; }
 .journey-connector { top:auto; bottom:-28px; right:calc(50% - 17px); width:34px; height:22px; transform:rotate(90deg); stroke-width:1.5; }
}