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

.button { font-size: 15px; min-height: 54px; }
.button-small { font-size: 14px; min-height: 46px; }
.eyebrow { font-size: 12px; color: #3b6150; 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: #516359; line-height: 1.7; }
.hero-actions { gap: 22px; }
.reassurance > div { font-size: 14px; color: #4b5e54; }
.section-top > p { font-size: 16px; }
.section-top h2 span, .center-heading h2 span, .learn-section h2 span { color: #637168; }
.browser-bar { font-size: 12px; color: #5c6c63; 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: #506258; line-height: 1.6; }
.screen-tabs button { font-size: 15px; padding: 13px 12px; color: #52645a; }
.screen-tabs button span { font-size: 12px; opacity: .85; }
.gallery-layout { grid-template-columns: 200px minmax(0, 1fr); }
.gallery-tip { font-size: 13px; color: #56675e; padding-inline: 10px; }
.gallery-controls p { font-size: 14px; line-height: 1.65; color: #52645a; }
.gallery-controls span { font-size: 12px; }
.icon-button { width: 40px; height: 40px; font-size: 18px; }
.feature-number { font-size: 13px; color: #3d6452; }
.feature-card h3 { font-size: 25px; }
.feature-card > p { font-size: 16px; color: #4d6056; line-height: 1.75; min-height: 140px; }
.feature-card > a { font-size: 14px; line-height: 1.6; color: #375c4c; }
.tiny-label { font-size: 11px; color: #5b6b61; }
.center-heading > p:not(.eyebrow) { font-size: 16px; color: #53655b; }
.migration-banner .eyebrow { font-size: 11px; }
.migration-banner h3 { font-size: 28px; }
.migration-banner p:not(.eyebrow) { font-size: 15px; color: #506258; 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: #516359; 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: #52645a; line-height: 1.5; min-height: 24px; }
.price-card .button { font-size: 14px; min-height: 46px; }
.price-card li { font-size: 14px; color: #495c52; line-height: 1.6; padding-right: 20px; }
.price-card li:before { font-size: 14px; color: #446c59; }
.popular { font-size: 10px; padding: 7px 11px; top: -14px; }
.pricing-footnote { font-size: 13px; color: #516359; line-height: 1.7; }
.learn-intro { font-size: 16px; color: #516359; max-width: 400px; }
.guide-links > a { font-size: 16px; line-height: 1.5; }
.guide-links small { font-size: 11px; color: #3d6452; 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: #52645a; }
.closing-inner > div:last-child p { font-size: 14px; color: #516359; }


.lightbox-toolbar p { font-size: 16px; }
.lightbox-hint { font-size: 12px; color: #57685e; }
.scan-demo { font-size: 13px; padding: 12px 17px; }
.scene-note { font-size: 11px; color: #5e6d64; right: 123px; bottom: -9px; }
.float-head { font-size: 12px; }
.float-head small { font-size: 10px; color: #637168; }
.float-row { font-size: 12px; }
.float-caption { font-size: 10px; color: #637168; }

/* 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%), #d4e1d038, 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, #fffefa55, 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 #304c403b; 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: #dbe6d7; box-shadow: 0 0 0 6px #e0e4d980; }
  .scan-demo:hover { transform: translateY(-4px); box-shadow: 0 8px 25px #304c4040; }
  .scan-demo:hover svg { color: #355849; }
  .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 #304c402b); }
  .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 #304c404d; }
  .feature-card:hover h3 { color: #365b4b; }
  .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: #8eab93; }
  .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 #304c4036; }
  .feature-card:hover > a svg, .media-caption a:hover svg { transform: translateX(-5px); }
  .price-card:hover { background-color: #f6f8f0; border-color: #577364; box-shadow: 0 22px 45px -14px #304c404d; }
  .price-card:hover .plan-name { color: #355949; }
  .price-card.featured:hover { box-shadow: 0 22px 50px -12px #304c405e; border-color: #4f7462; }
  .screen-tabs button:hover { transform: translateX(-5px); background: #dce8d9; color: #345546; box-shadow: 0 4px 12px #304c401c; }
  .screenshot-frame:hover { box-shadow: 0 24px 55px -18px #304c4052; border-color: #587364; }
  .screenshot-frame:hover img { transform: scale(1.015); }
  .screenshot-frame:hover .zoom-badge { transform: scale(1.16) rotate(-8deg); background: #dde8d9; box-shadow: 0 5px 15px #304c4044; }
  .video-shell:hover { transform: translateY(-5px); border-color: #5b7265; box-shadow: 0 24px 65px -20px #304c4056; }
  .video-cover:hover .play-large { transform: scale(1.13); box-shadow: 0 0 0 12px #dde1d652, 0 0 0 24px #dde1d626, 0 12px 35px #304c4050; }
  .icon-button:hover { transform: translateY(-3px); background: #dee9db; border-color: #5d7266; box-shadow: 0 5px 12px #304c402b; }
  .migration-banner:hover { transform: translateY(-4px); border-color: #bbc5b7; box-shadow: 0 16px 35px -16px #304c403d; }
  .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: #3b6150; }
  .guide-links > a:hover { padding-right: 12px; padding-left: 10px; background: #d9e6d5; color: #345647; }
  .guide-links > a:hover .guide-icon { transform: rotate(7deg); background: #d5e2d1; }
  .guide-links > a:hover > svg { transform: translate(-4px, -3px); }
  .faq summary:hover { color: #35594a; background: #eaf0e5; }
  .faq summary:hover span { color: #35594a; transform: rotate(-90deg); }
  .faq details[open] summary:hover span { transform: rotate(-135deg); }
  .billing-toggle button:hover { color: #335445; background: #fcfcf7; }
  
}
.price-card:focus-within { border-color: #577364; box-shadow: 0 0 0 3px #ccd3c52e; }
@keyframes button-sheen { from { right: -65%; } to { right: 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; left: 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; }
}
/* mint: palette applied (2026-10-23) */
/* white: page background applied (2026-10-23) */