/* Readable typography and tactile interaction pass. */
:root { --muted: #706477; }
body { font-size: 16px; }

.button { font-size: 15px; min-height: 54px; }
.button-small { font-size: 14px; min-height: 46px; }
.eyebrow { font-size: 12px; color: #7d5a99; letter-spacing: 1.5px; line-height: 1.6; }

.hero-detail { font-size: 16px; line-height: 1.75; max-width: 420px; }
.text-button { font-size: 14px; }
.fine-print { font-size: 13px; color: #74657f; line-height: 1.7; }
.hero-actions { gap: 22px; }
.reassurance > div { font-size: 14px; color: #6e5c79; }
.section-top > p { font-size: 16px; }
.section-top h2 span, .center-heading h2 span, .learn-section h2 span { color: #85738f; }
.browser-bar { font-size: 12px; color: #7d6d88; height: 44px; }
.window-right { font-size: 10px; }
.play-caption { font-size: 24px; }
.play-caption small { font-size: 14px; }
.video-length { font-size: 11px; }
.media-caption { font-size: 14px; color: #74627e; line-height: 1.6; }
.screen-tabs button { font-size: 15px; padding: 13px 12px; color: #786283; }
.screen-tabs button span { font-size: 12px; opacity: .85; }
.gallery-layout { grid-template-columns: 200px minmax(0, 1fr); }
.gallery-tip { font-size: 13px; color: #796785; padding-inline: 10px; }
.gallery-controls p { font-size: 14px; line-height: 1.65; color: #786382; }
.gallery-controls span { font-size: 12px; }
.icon-button { width: 40px; height: 40px; font-size: 18px; }
.feature-number { font-size: 13px; color: #846499; }
.feature-card h3 { font-size: 25px; }
.feature-card > p { font-size: 16px; color: #716179; line-height: 1.75; min-height: 140px; }
.feature-card > a { font-size: 14px; line-height: 1.6; color: #75518f; }
.tiny-label { font-size: 11px; color: #7e658e; }
.center-heading > p:not(.eyebrow) { font-size: 16px; color: #776582; }
.migration-banner .eyebrow { font-size: 11px; }
.migration-banner h3 { font-size: 28px; }
.migration-banner p:not(.eyebrow) { font-size: 15px; color: #76617f; line-height: 1.65; }
.billing-toggle button { font-size: 15px; padding: 12px 20px; }
.billing-toggle button span { font-size: 11px; }
.price-card { padding: 30px 22px; }
.plan-name { font-size: 22px; }
.plan-for { font-size: 14px; color: #776280; line-height: 1.6; min-height: 45px; }
.plan-price > span { font-size: 44px; }
.plan-price small { font-size: 14px; }
.billing-note { font-size: 13px; color: #796482; line-height: 1.5; min-height: 24px; }
.price-card .button { font-size: 14px; min-height: 46px; }
.price-card li { font-size: 14px; color: #6d5878; line-height: 1.6; padding-left: 20px; }
.price-card li:before { font-size: 14px; color: #9371ac; }
.popular { font-size: 10px; padding: 7px 11px; top: -14px; }
.pricing-footnote { font-size: 13px; color: #776380; line-height: 1.7; }
.learn-intro { font-size: 16px; color: #75637f; max-width: 400px; }
.guide-links > a { font-size: 16px; line-height: 1.5; }
.guide-links small { font-size: 11px; color: #846697; letter-spacing: 1px; }
.guide-icon { width: 42px; height: 42px; flex-shrink: 0; }
.faq h3 { font-size: 24px; }
.faq summary { font-size: 16px; line-height: 1.6; padding-block: 22px; }
.faq details > p { font-size: 15px; line-height: 1.8; color: #786382; }
.closing-inner > div:last-child p { font-size: 14px; color: #796084; }


.lightbox-toolbar p { font-size: 16px; }
.lightbox-hint { font-size: 12px; color: #7c6489; }
.scan-demo { font-size: 13px; padding: 12px 17px; }
.scene-note { font-size: 11px; color: #806c8c; left: 123px; bottom: -9px; }
.float-head { font-size: 12px; }
.float-head small { font-size: 10px; color: #82718e; }
.float-row { font-size: 12px; }
.float-caption { font-size: 10px; color: #82718e; }

/* Pointer lights are paint-only and never intercept a click. */
.interactive-surface { position: relative; }
.interactive-surface::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; z-index: 5;
  background: radial-gradient(420px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #d8b5ff38, transparent 65%);
  transition: opacity .35s ease;
}
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::after {
  content: ''; position: absolute; inset: -40% auto -40% -65%; width: 36%;
  background: linear-gradient(90deg, transparent, #fff5, transparent);
  transform: skewX(-22deg); pointer-events: none;
}
.button svg, .text-button, .play-small, .brand-mark, .scan-demo,
.media-caption a svg, .feature-card > a svg, .guide-icon, .guide-links > a > svg,
.paper-receipt, .barcode-card, .cover-bars i, .migration-doc, .migration-visual b,
.footer-links a, .faq summary, .billing-toggle button, .zoom-badge {
  transition: transform .4s var(--ease), color .25s, background .25s, box-shadow .35s, opacity .25s;
}
.feature-art, .price-card, .screenshot-frame, .video-shell, .migration-banner {
  transition: transform .5s var(--ease), box-shadow .45s, border-color .35s, background .35s;
}
.phone-model, .parcel, .floating-card, .scene-orbit {
  transition: translate .6s var(--ease), rotate .6s var(--ease), filter .4s;
}
.button { transition: translate .25s var(--ease), transform .3s var(--ease), box-shadow .3s, filter .3s; }
.screen-tabs button { transition: transform .3s var(--ease), background .25s, color .25s, box-shadow .3s; }
.screenshot-frame img { transition: transform .6s var(--ease); }
.guide-links > a { transition: padding .3s var(--ease), background .3s, color .3s; }
.cover-bars i { transform-origin: bottom; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-4px); box-shadow: 0 12px 28px #8058b53b; filter: saturate(1.15); }
  .button:hover::after { animation: button-sheen .75s ease both; }
  .button:hover svg { transform: translate(3px, -3px); }
  .button-outline:hover svg { transform: translateX(5px); }
  .button:active { transform: translateY(-1px) scale(.98); }
  .magnetic-button { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); }
  
  
  
  .text-button:hover { color: var(--violet-deep); }
  .text-button:hover .play-small { transform: scale(1.18); background: #e3d2f0; box-shadow: 0 0 0 6px #eadff780; }
  .scan-demo:hover { transform: translateY(-4px); box-shadow: 0 8px 25px #85649f40; }
  .scan-demo:hover svg { color: #6d438d; }
  .hero-art.is-pointed .phone-model { translate: var(--scene-x) var(--scene-y); rotate: y var(--scene-turn); }
  .hero-art.is-pointed .parcel-front { translate: calc(var(--scene-x) * -.65) calc(var(--scene-y) * -.4); }
  .hero-art.is-pointed .parcel-back { translate: calc(var(--scene-x) * .5) calc(var(--scene-y) * .35); }
  .hero-art.is-pointed .floating-card { translate: calc(var(--scene-x) * 1.3) calc(var(--scene-y) * .8); filter: drop-shadow(0 12px 14px #9d7bb82b); }
  .hero-art.is-pointed .scene-orbit { rotate: var(--scene-turn); }
  .interactive-surface:hover::after { opacity: 1; }
  .feature-art:hover, .price-card:hover, .screenshot-frame:hover {
    transform: perspective(1100px) translateY(-7px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }
  .feature-art:hover { box-shadow: 0 22px 38px -14px #9872b74d; }
  .feature-card:hover h3 { color: #72508a; }
  .feature-card:hover .barcode-card { transform: rotate(-5deg) translateY(-6px) scale(1.06); }
  .feature-card:hover .art-scan-line { animation-duration: 1.2s; }
  .feature-card:hover .cover-bars i { transform: scaleY(1.2); background: #b193cf; }
  .feature-card:hover .cover-bars i:nth-child(even) { transform: scaleY(1.5); transition-delay: .06s; }
  .feature-card:hover .paper-receipt { transform: rotate(-3deg) translateY(5px); box-shadow: 8px 18px 24px #8a64a536; }
  .feature-card:hover > a svg, .media-caption a:hover svg { transform: translateX(5px); }
  .price-card:hover { background-color: #faf3ff; border-color: #b696d1; box-shadow: 0 22px 45px -14px #8c60ad4d; }
  .price-card:hover .plan-name { color: #70478c; }
  .price-card.featured:hover { box-shadow: 0 22px 50px -12px #8e59b95e; border-color: #aa7bcb; }
  .screen-tabs button:hover { transform: translateX(5px); background: #e4d5f0; color: #65467e; box-shadow: 0 4px 12px #9a77b51c; }
  .screenshot-frame:hover { box-shadow: 0 24px 55px -18px #8d65ac52; border-color: #b99bcf; }
  .screenshot-frame:hover img { transform: scale(1.015); }
  .screenshot-frame:hover .zoom-badge { transform: scale(1.16) rotate(8deg); background: #e5d3f3; box-shadow: 0 5px 15px #8a5aa744; }
  .video-shell:hover { transform: translateY(-5px); border-color: #bda3d4; box-shadow: 0 24px 65px -20px #9064b056; }
  .video-cover:hover .play-large { transform: scale(1.13); box-shadow: 0 0 0 12px #e8d4fa52, 0 0 0 24px #e8d4fa26, 0 12px 35px #7e53b250; }
  .icon-button:hover { transform: translateY(-3px); background: #e5d6f2; border-color: #c2a8d6; box-shadow: 0 5px 12px #9676ae2b; }
  .migration-banner:hover { transform: translateY(-4px); border-color: #c5acd8; box-shadow: 0 16px 35px -16px #8f68a83d; }
  .migration-banner:hover .migration-doc { transform: rotate(-14deg) translateX(-5px); }
  .migration-banner:hover .new-doc { transform: rotate(5deg) translateX(5px); }
  .migration-banner:hover .migration-visual b { transform: translateX(4px); color: #8152a2; }
  .guide-links > a:hover { padding-left: 12px; padding-right: 10px; background: #efe5f7; color: #694781; }
  .guide-links > a:hover .guide-icon { transform: rotate(-7deg); background: #dfc9ee; }
  .guide-links > a:hover > svg { transform: translate(4px, -3px); }
  .faq summary:hover { color: #70468f; background: #f0e7f7; }
  .faq summary:hover span { color: #70468f; transform: rotate(90deg); }
  .faq details[open] summary:hover span { transform: rotate(135deg); }
  .billing-toggle button:hover { color: #64417f; background: #fdfaff; }
  
}
.price-card:focus-within { border-color: #b696d1; box-shadow: 0 0 0 3px #d3bde72e; }
@keyframes button-sheen { from { left: -65%; } to { left: 135%; } }

/* Keep readable type on smaller screens; never squeeze plan copy. */
@media (max-width: 1150px) {
  
  .hero h1 { font-size: 51px; }
  .hero-actions { flex-wrap: wrap; gap: 20px; }
  .hero-detail { font-size: 16px; }
  .hero .eyebrow { font-size: 11px; }
  .feature-card h3 { font-size: 23px; }
  .price-card { padding: 28px 20px; }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .plan-for { min-height: 0; }
  .gallery-layout { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero h1 { font-size: 45px; }
  .hero-description { font-size: 19px; }
  .hero-detail { font-size: 16px; }
  .reassurance { flex-wrap: wrap; justify-content: center; }
  .reassurance > div { font-size: 13px; }
  .gallery-layout { grid-template-columns: minmax(0, 1fr); }
  .screen-tabs button { font-size: 14px; }
  .screen-tabs button:hover { transform: translateY(-2px); }
  .feature-grid { grid-template-columns: 1fr; gap: 42px; }
  .feature-art { height: 240px; }
  .feature-card > p { min-height: 0; max-width: 600px; }
  .feature-card h3 br { display: none; }
  .learn-grid { gap: 35px; }
}
@media (max-width: 640px) {
  
  .hero h1 { font-size: clamp(36px, 10vw, 55px); }
  .hero .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .hero-description { font-size: 18px; }
  .hero-detail { font-size: 16px; }
  .hero-actions { gap: 18px; }
  .hero-actions .button { font-size: 15px; min-height: 52px; padding-inline: 20px; }
  .text-button { font-size: 14px; }
  .fine-print { font-size: 13px; }
  .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .reassurance > div { font-size: 12px; }
  .section-top > p { font-size: 16px; }
  .section-top h2, .center-heading h2, .learn-section h2 { font-size: 32px; }
  .browser-bar { font-size: 11px; height: 36px; }
  .play-caption { font-size: 16px; bottom: 14px; }
  .play-caption small { font-size: 11px; }
  .play-large { width: 56px; height: 56px; }
  .media-caption { font-size: 13px; }
  .gallery-controls p { font-size: 14px; }
  .feature-art { height: 220px; }
  .feature-card h3 { font-size: 26px; }
  .feature-card > p { font-size: 16px; }
  .feature-card > a { font-size: 15px; }
  .migration-banner .eyebrow { font-size: 10px; }
  .migration-banner h3 { font-size: 27px; }
  .migration-banner p:not(.eyebrow) { font-size: 16px; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .price-card { padding: 30px 27px; }
  .plan-name { font-size: 24px; }
  .plan-for { font-size: 15px; }
  .plan-price { height: 80px; }
  .plan-price > span { font-size: 46px; }
  .plan-price small { font-size: 15px; }
  .billing-note { font-size: 14px; min-height: 26px; }
  .price-card .button { font-size: 15px; min-height: 50px; padding-inline: 18px; }
  .price-card li { font-size: 16px; }
  .popular { font-size: 11px; right: 18px; }
  .billing-toggle button { font-size: 14px; padding: 12px 14px; }
  .billing-toggle button span { font-size: 10px; }
  .pricing-footnote { font-size: 13px; }
  .learn-intro, .guide-links > a, .faq summary, .faq details > p { font-size: 16px; }
  .guide-links small { font-size: 11px; }
  .closing .eyebrow { font-size: 11px; }
  .closing-inner > div:last-child p { font-size: 14px; }
  
  
  
  .lightbox-hint { font-size: 12px; }
}

body[data-motion=off] .interactive-surface,
body[data-motion=off] .button, body[data-motion=off] .phone-model,
body[data-motion=off] .parcel, body[data-motion=off] .floating-card,
body[data-motion=off] .scene-orbit { translate: none !important; rotate: none !important; }
body[data-motion=off] .interactive-surface:hover { transform: none !important; }
body[data-motion=off] *, body[data-motion=off] *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .interactive-surface:hover, .button:hover, .video-shell:hover,
  .migration-banner:hover { transform: none !important; }
}