/* Public Android landing and shared Wolf page navigation. */
.lp-page {
  --lp-ink: #171714;
  --lp-yellow: #f6c928;
  --lp-paper: #f5f0e6;
  --lp-red: #ee5548;
  --lp-muted: #68645b;
  --lp-line: rgba(23,23,20,.2);
  --lp-width: 1320px;
  --lp-gutter: max(clamp(18px, 4vw, 58px), calc((100vw - var(--lp-width)) / 2));
  margin: 0;
  color: var(--lp-ink);
  background: var(--lp-paper);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lp-page *, .lp-page *::before, .lp-page *::after { box-sizing: border-box; }
.lp-page [hidden] { display: none !important; }
.lp-page a { color: inherit; }
.lp-page .lp-button { color: var(--lp-ink); }
.lp-page img { display: block; max-width: 100%; }
.lp-page button { font: inherit; cursor: pointer; }
.lp-page :is(a,button,summary):focus-visible { outline: 3px solid #256baa; outline-offset: 5px; }
.lp-page button, .lp-page a, .lp-page summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.lp-main { width: 100%; max-width: none; margin: 0; overflow: clip; }
.lp-section { position: relative; isolation: isolate; padding: 62px var(--lp-gutter); scroll-margin-top: 92px; }
.lp-section::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .32; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2397835e' opacity='.17' filter='url(%23n)' d='M0 0h140v140H0z'/%3E%3C/svg%3E"); }
.lp-skip { position: fixed; top: 10px; left: 10px; z-index: 300; padding: 12px 18px; border: 2px solid var(--lp-ink); background: white; transform: translateY(-150%); }
.lp-skip:focus { transform: none; }
.lp-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 30px; min-height: 78px; padding: 10px var(--lp-gutter); border-bottom: 3px solid var(--lp-ink); color: var(--lp-ink); background: var(--lp-yellow); }
.lp-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 1; min-width: 0; text-decoration: none; font-family: 'Russo One', Impact, sans-serif; font-size: clamp(19px, 2.1vw, 28px); letter-spacing: -1.3px; }
.lp-header .lp-brand { max-width: min(360px,35vw); }
.lp-brand img { width: 33px; height: 33px; flex-shrink: 0; }
.lp-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.5vw, 35px); margin-left: auto; }
.lp-nav a, .lp-nav summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--lp-ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.lp-nav > a { position: relative; }
.lp-nav > a::after { content: ''; position: absolute; right: 100%; left: 0; bottom: 7px; height: 2px; background: var(--lp-ink); transition: right .2s; }
.lp-nav > a:hover::after { right: 0; }
.lp-nav-group { position: relative; }
.lp-nav-group > summary { cursor: pointer; }
.lp-nav-group > summary::after { content: '⌄'; margin-left: 6px; }
.lp-nav-group > summary, .lp-mobile-menu > summary { list-style: none; }
.lp-nav-group > summary::-webkit-details-marker, .lp-mobile-menu > summary::-webkit-details-marker { display: none; }
.lp-nav-submenu { position: absolute; top: 100%; left: -14px; display: grid; width: min(290px, 75vw); padding: 10px; border: 2px solid var(--lp-ink); background: var(--lp-paper); box-shadow: 5px 5px 0 var(--lp-ink); }
.lp-nav-submenu a { padding: 8px; white-space: normal; }
.lp-nav-submenu a:hover { background: var(--lp-yellow); }
.lp-header-actions { display: flex; align-items: center; gap: 13px; margin-left: 6px; }
.lp-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 57px; padding: 14px 23px; border: 2px solid var(--lp-ink); border-radius: 7px; color: var(--lp-ink); background: var(--lp-yellow); box-shadow: 5px 5px 0 var(--lp-ink); font-size: 18px; font-weight: 850; line-height: 1.25; text-align: center; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.lp-button svg { width: 25px; height: 25px; flex: 0 0 25px; }
.lp-button:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--lp-ink); background: #ffda4b; }
.lp-button--small { min-height: 44px; padding: 9px 17px; box-shadow: 3px 3px 0 var(--lp-ink); font-size: 14px; }
.lp-button--small svg { width: 20px; height: 20px; flex-basis: 20px; }
.lp-theme-toggle { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; padding: 8px; border: 2px solid var(--lp-ink); border-radius: 50%; color: var(--lp-ink); background: #f5f0e6; }
.lp-theme-toggle svg { width: 23px; height: 23px; }
.lp-theme-toggle:hover { background: white; }
.lp-mobile-menu { display: none; }
.lp-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(630px, 47vw, 780px); padding: 65px var(--lp-gutter) 75px; overflow: hidden; border-bottom: 4px solid var(--lp-ink); color: #f5f0e6; background: #111311; }
.lp-hero-art { position: absolute; z-index: -2; inset: 0; }
.lp-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.lp-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(13,15,13,.5),transparent 58%); pointer-events: none; }
.lp-hero-copy { position: relative; z-index: 2; width: 47%; max-width: 640px; }
.lp-eyebrow { display: block; margin: 0 0 16px; font-family: 'Roboto Condensed', Impact, sans-serif; font-size: clamp(16px,1.5vw,20px); font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.lp-hero h1 { margin: 0; font-family: 'Roboto Condensed', Impact, sans-serif; font-size: clamp(64px,6.8vw,96px); font-weight: 950; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.lp-hero h1 span { display: block; color: var(--lp-yellow); }
.lp-hero-description { max-width: 465px; margin: 21px 0 24px; font-size: clamp(16px,1.3vw,19px); font-weight: 650; line-height: 1.45; }
.lp-release-note { margin: 15px 0 20px; color: #dbd7ce; font-size: 12px; line-height: 1.6; }
.lp-release-unavailable { max-width: 380px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.4); color: #f5f0e6; font-size: 13px; line-height: 1.5; }
.lp-text-link { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; padding: 7px 0; border-bottom: 2px solid var(--lp-yellow); font-size: 15px; font-weight: 750; text-decoration: none; }
.lp-text-link svg { width: 24px; height: 24px; color: var(--lp-yellow); transition: transform .2s; }
.lp-text-link:hover svg { transform: translateX(5px); }
.lp-hero-phone { position: absolute; right: var(--lp-gutter); top: 54px; width: clamp(225px,22vw,322px); margin: 0; transform: rotate(6deg); transform-origin: center bottom; }
.lp-phone { position: relative; padding: 9px; overflow: hidden; border: 8px solid #191c1d; border-radius: 44px; background: #191c1d; box-shadow: inset 0 0 0 3px #7b7c78, 14px 15px 0 rgba(0,0,0,.3); }
.lp-phone img { width: 100%; height: auto; border-radius: 26px; background: #eef1f4; }
.lp-continuity { display: grid; grid-template-columns: auto minmax(0,.85fr) minmax(0,1fr); align-items: center; gap: 23px; margin: 34px var(--lp-gutter) 0; padding: 20px 25px; border: 2px solid var(--lp-ink); background: linear-gradient(106deg,#ffdc59 0 75px,transparent 75px); box-shadow: 4px 4px 0 rgba(23,23,20,.1); }
.lp-continuity-mark { color: var(--lp-ink); display: grid; width: 45px; height: 52px; align-items: center; font-family: 'Russo One', Impact, sans-serif; font-size: 47px; font-style: italic; transform: rotate(-8deg); }
.lp-continuity h2 { margin: 0; font-family: 'Roboto Condensed', Impact, sans-serif; font-size: clamp(23px,2.7vw,36px); font-weight: 900; line-height: 1.05; }
.lp-continuity p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; }
.lp-heading { display: table; position: relative; max-width: 100%; margin: 0 0 32px; font-family: 'Roboto Condensed', Impact, sans-serif; font-size: clamp(33px,3.8vw,52px); font-weight: 950; font-style: italic; line-height: 1.04; letter-spacing: -.025em; text-transform: uppercase; }
.lp-heading::after { content: ''; position: absolute; left: 0; right: -4%; bottom: -8px; height: 5px; background: var(--lp-red); clip-path: polygon(0 25%,94% 0,100% 35%,88% 65%,1% 100%); }
.lp-mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px; }
.lp-mode { position: relative; isolation: isolate; min-height: 310px; overflow: hidden; border: 3px solid var(--lp-ink); background: var(--lp-paper); }
.lp-mode:nth-child(1) { transform: rotate(-1deg); }
.lp-mode:nth-child(2) { transform: rotate(1deg); }
.lp-mode-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.lp-mode::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,var(--lp-paper) 0%,rgba(245,240,230,.94) 30%,rgba(245,240,230,.05) 65%); }
.lp-mode-label { display: inline-flex; align-items: center; gap: 15px; min-height: 72px; max-width: 92%; margin: 0; padding: 12px 22px; color: var(--lp-ink); background: var(--lp-yellow); font-family: 'Roboto Condensed',Impact,sans-serif; font-size: clamp(24px,2.6vw,35px); font-weight: 900; font-style: italic; line-height: 1.1; text-transform: uppercase; }
.lp-mode-label svg { width: 33px; height: 33px; flex-shrink: 0; }
.lp-mode:nth-child(even) .lp-mode-label { color: var(--lp-yellow); background: var(--lp-ink); }
.lp-mode-copy { width: 68%; padding: 22px; }
.lp-mode-copy h3 { margin: 0 0 12px; font-family: 'Roboto Condensed',sans-serif; font-size: 26px; font-weight: 900; line-height: 1.1; }
.lp-mode-copy p { max-width: 330px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }
.lp-gallery-section { padding-top: 18px; }
.lp-section-description { max-width: 670px; margin: -9px 0 28px; font-size: 15px; line-height: 1.6; }
.lp-gallery { position: relative; min-width: 0; }
.lp-gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 27px; }
.lp-gallery-tab { min-height: 44px; padding: 10px 15px; border: 2px solid var(--lp-ink); border-radius: 3px; color: var(--lp-ink); background: transparent; font-size: 13px; font-weight: 800; transition: background .15s, transform .15s; }
.lp-gallery-tab[aria-selected='true'] { background: var(--lp-yellow); box-shadow: 3px 3px 0 var(--lp-ink); }
.lp-gallery-tab:hover { background: #ffdf66; }
 .lp-gallery-stage { position: relative; min-width: 0; padding: 10px 3.5%; overflow: hidden; background: radial-gradient(circle,var(--lp-ink) .7px,transparent 1px) left center / 9px 9px; touch-action: pan-y; }
.lp-gallery-rail { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--lp-card-count,3),minmax(0,1fr)); justify-items: center; gap: 19px; }
.lp-gallery-card { width: 100%; max-width: 430px; min-width: 0; padding: 18px 18px 23px; border: 2px solid var(--lp-ink); border-radius: 6px; background: var(--lp-paper); }
.lp-gallery-zoom { display: block; width: min(290px,100%); margin: 0 auto; padding: 0; border: 0; color: var(--lp-paper); background: transparent; text-align: left; touch-action: pan-y; }
.lp-gallery-zoom .lp-phone { display: block; border-radius: 39px; box-shadow: inset 0 0 0 3px #7b7c78, 6px 7px 0 rgba(0,0,0,.16); }
.lp-gallery-zoom .lp-phone img { border-radius: 24px; aspect-ratio: 390/844; object-fit: cover; object-position: top; }
.lp-gallery-zoom-label { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; margin-top: 13px; color: var(--lp-ink); font-size: 10px; font-weight: 750; }
.lp-gallery-zoom-label svg { width: 15px; height: 15px; }
.lp-gallery-card-copy { padding-top: 12px; }
.lp-gallery-card-copy h3 { margin: 0 0 8px; font-family: 'Roboto Condensed',Impact,sans-serif; font-size: clamp(23px,2.1vw,30px); font-weight: 900; line-height: 1.08; }
.lp-gallery-card-copy p { margin: 0; font-size: 13px; line-height: 1.5; }
.lp-gallery-mobile-copy { display: none; }
.lp-gallery-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 21px; }
.lp-icon-button { display: inline-grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; padding: 10px; border: 2px solid var(--lp-ink); border-radius: 50%; color: var(--lp-ink); background: var(--lp-paper); transition: background .2s; }
.lp-icon-button:hover { background: var(--lp-yellow); }
.lp-icon-button svg { width: 24px; height: 24px; }
.lp-gallery-count { min-width: 55px; margin: 0 4px; font-size: 13px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.lp-gallery-caption { margin: 20px 0 0; color: var(--lp-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.lp-gallery-scriptless { display: flex; gap: 16px; overflow-x: auto; }
.lp-gallery-scriptless figure { flex: 0 0 200px; margin: 0; }
.lp-gallery-scriptless img { width: 100%; border: 2px solid var(--lp-ink); }
.lp-gallery-scriptless figcaption { padding-top: 10px; font-size: 13px; }
.lp-install-section { padding-top: 38px; }
.lp-install-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.lp-install-step { position: relative; display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 13px; align-items: center; min-height: 150px; padding: 23px 22px; border: 2px solid var(--lp-ink); background: linear-gradient(106deg,#ffdc59 0 82px,transparent 83px); counter-increment: steps; }
.lp-install-step::before { color: var(--lp-ink); content: counter(steps,decimal-leading-zero); font-family: 'Roboto Condensed',Impact,sans-serif; font-size: 48px; font-weight: 900; font-style: italic; line-height: 1; }
.lp-install-step:not(:last-child)::after { content: '→'; position: absolute; right: -25px; font-size: 30px; font-weight: 900; }
.lp-install-icon { display: inline-flex; width: 32px; height: 40px; align-items: center; }
.lp-install-icon svg { width: 32px; height: 36px; }
.lp-install-step h3 { margin: 0 0 9px; font-size: 16px; font-weight: 850; line-height: 1.3; }
.lp-install-step p { margin: 0; color: #514f49; font-size: 13px; line-height: 1.5; }
.lp-faq-section { padding-top: 25px; }
.lp-faq-list { border: 2px solid var(--lp-ink); }
.lp-faq { padding: 0 22px; }
.lp-faq + .lp-faq { border-top: 1px solid var(--lp-ink); }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 60px; padding: 14px 0; list-style: none; font-size: 16px; font-weight: 800; line-height: 1.4; cursor: pointer; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; flex: 0 0 24px; font-size: 32px; font-weight: 600; line-height: 1; text-align: center; }
.lp-faq[open] summary::after { content: '−'; }
.lp-faq[open] { background: rgba(246,201,40,.12); }
.lp-faq p { max-width: 930px; margin: 0; padding: 2px 48px 22px 0; color: #49473f; font-size: 14px; line-height: 1.75; white-space: pre-line; }
.lp-final { scroll-margin-top: 92px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 50px; min-height: 270px; padding: 43px var(--lp-gutter); overflow: hidden; border-block: 3px solid var(--lp-ink); color: #f5f0e6; background: var(--lp-ink); }
.lp-final-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.lp-final::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#111311 0%,rgba(17,19,17,.92) 35%,rgba(17,19,17,.3) 70%); }
.lp-final h2 { max-width: 690px; margin: 0 0 15px; color: var(--lp-yellow); font-family: 'Roboto Condensed',Impact,sans-serif; font-size: clamp(42px,4.9vw,65px); font-weight: 950; font-style: italic; line-height: .98; text-transform: uppercase; white-space: pre-line; }
.lp-final p { max-width: 490px; margin: 0; font-size: 14px; line-height: 1.6; }
.lp-final-actions { position: relative; z-index: 1; width: min(340px,100%); }
.lp-final-actions .lp-release-note { margin-bottom: 0; }
.lp-phone-link { margin-top: 20px !important; font-size: 11px !important; color: #ddd9ce; }
.lp-phone-link a { display: inline-block; margin-top: 3px; text-underline-offset: 3px; }
.lp-qr-panel { display: flex; align-items: center; gap: 13px; margin-top: 19px; }
.lp-qr-code { display: grid; place-items: center; width: 94px; height: 94px; flex: 0 0 94px; padding: 5px; background: white; border-radius: 3px; }
.lp-qr-code svg { display: block; width: 100%; height: 100%; }
.lp-qr-panel p { font-size: 11px; line-height: 1.5; }
.lp-qr-panel a { display: block; margin-top: 6px; text-underline-offset: 3px; }
.lp-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 25px 40px; padding: 31px var(--lp-gutter); background: var(--lp-paper); }
.lp-footer .lp-brand { font-size: 22px; }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-left: auto; }
.lp-footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; text-decoration: none; }
.lp-footer-nav a:hover { text-decoration: underline; }
.lp-footer-note { width: 100%; margin: 0; color: var(--lp-muted); font-size: 11px; line-height: 1.6; }
.lp-lightbox { width: min(95vw,600px); max-height: 94dvh; padding: 16px; border: 3px solid var(--lp-ink); border-radius: 8px; color: var(--lp-ink); background: var(--lp-paper); box-shadow: 10px 10px 0 rgba(0,0,0,.35); }
.lp-lightbox::backdrop { background: rgba(8,9,8,.88); }
.lp-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.lp-lightbox-bar h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.lp-lightbox-image { width: auto; max-width: 100%; max-height: calc(94dvh - 118px); margin: 0 auto; object-fit: contain; }
.lp-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; }
.lp-reveal { opacity: 1; transform: none; }
.lp-page[data-lp-motion='enabled'] .lp-reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.lp-page[data-lp-motion='enabled'] .lp-reveal { transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.lp-page[data-lp-theme='dark'] { --lp-paper: #242520; --lp-muted: #c8c6bc; --lp-line: rgba(245,240,230,.25); color: #f5f0e6; background: var(--lp-paper); }
.lp-page[data-lp-theme='dark'] :is(.lp-heading,.lp-continuity h2,.lp-continuity p,.lp-gallery-card-copy,.lp-footer) { color: #f5f0e6; }
.lp-page[data-lp-theme='dark'] :is(.lp-continuity,.lp-faq-list,.lp-faq + .lp-faq,.lp-install-step,.lp-gallery-card) { border-color: #8d8d7b; }
.lp-page[data-lp-theme='dark'] :is(.lp-faq p,.lp-install-step p,.lp-gallery-caption,.lp-footer-note) { color: #c8c6bc; }
.lp-page[data-lp-theme='dark'] .lp-install-step { background: linear-gradient(106deg,#b29838 0 82px,transparent 83px); }
.lp-page[data-lp-theme='dark'] .lp-mode { background: #f5f0e6; color: var(--lp-ink); }
.lp-page[data-lp-theme='dark'] .lp-mode::after { background: linear-gradient(90deg,#f5f0e6 0%,rgba(245,240,230,.94) 30%,rgba(245,240,230,.05) 65%); }
.lp-page[data-lp-theme='dark'] .lp-footer .lp-brand { color: #f5f0e6; }
.lp-page[data-lp-theme='dark'] .lp-icon-button { color: #f5f0e6; border-color: #8d8d7b; }
.lp-page[data-lp-theme='dark'] .lp-icon-button:hover { color: var(--lp-ink); }
.lp-page[data-lp-theme='dark'] .lp-gallery-tab { color: #f5f0e6; border-color: #8d8d7b; }
.lp-page[data-lp-theme='dark'] .lp-gallery-tab:is(:hover,[aria-selected='true']) { color: var(--lp-ink); }
.lp-page[data-lp-theme='dark'] .lp-gallery-zoom-label { color: #d9d6ca; }
.lp-page[data-lp-theme='dark'] .lp-lightbox { color: #f5f0e6; }
@media (min-width: 1700px) { .lp-page { --lp-width: 1480px; } .lp-hero-copy { max-width: 680px; } .lp-hero h1 { font-size: 107px; } .lp-hero-phone { right: calc(var(--lp-gutter) + 28px); width: 350px; } }
@media (max-width: 1199px) { .lp-header { gap: 20px; } .lp-brand { font-size: 21px; } .lp-nav { gap: 18px; } .lp-nav a,.lp-nav summary { font-size: 12px; } .lp-header-actions { gap: 10px; margin-left: 0; } .lp-hero { min-height: 600px; } .lp-hero-copy { width: 53%; } .lp-hero h1 { font-size: clamp(62px,7.2vw,82px); } .lp-hero-description { max-width: 390px; } .lp-hero-phone { right: calc(var(--lp-gutter) + 7px); top: 78px; width: 245px; } .lp-continuity { grid-template-columns: auto minmax(0,1fr); gap: 12px 20px; } .lp-continuity p { grid-column: 2; } .lp-continuity-mark { grid-row: 1 / 3; } .lp-mode { min-height: 310px; } .lp-mode-copy { width: 80%; } .lp-mode-label { padding-inline: 17px; } .lp-install-step { padding: 19px 16px; gap: 16px; } .lp-install-step::before { font-size: 42px; } }
@media (max-width: 900px) { .lp-nav { display: none; } .lp-header-actions { margin-left: auto; } .lp-mobile-menu { display: block; position: relative; flex-shrink: 0; } .lp-mobile-menu > summary { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid var(--lp-ink); border-radius: 4px; background: transparent; cursor: pointer; } .lp-mobile-menu > summary svg { width: 24px; height: 24px; } .lp-mobile-panel { position: absolute; right: 0; top: calc(100% + 15px); display: grid; width: min(310px,calc(100vw - 36px)); max-height: 70dvh; overflow-y: auto; padding: 10px; border: 2px solid var(--lp-ink); color: var(--lp-ink); background: #f5f0e6; box-shadow: 5px 5px 0 var(--lp-ink); } .lp-mobile-panel a { padding: 13px 10px; font-size: 14px; font-weight: 800; line-height: 1.4; text-decoration: none; } .lp-mobile-panel a:hover { background: var(--lp-yellow); } .lp-mobile-panel a.is-child { padding-left: 25px; font-size: 12px; } .lp-hero { min-height: 630px; padding-block: 57px; } .lp-hero-copy { width: 58%; } .lp-hero h1 { font-size: clamp(55px,7.6vw,70px); } .lp-hero-description { max-width: 350px; font-size: 16px; } .lp-hero-phone { right: var(--lp-gutter); top: 123px; width: 210px; } .lp-hero .lp-button { max-width: 350px; font-size: 16px; padding-inline: 17px; } .lp-mode { min-height: 330px; } .lp-mode-label { max-width: 100%; font-size: 23px; gap: 11px; min-height: 65px; } .lp-mode-copy { width: 100%; padding: 19px; } .lp-mode-copy h3 { max-width: 210px; font-size: 24px; } .lp-mode-copy p { max-width: 210px; font-size: 13px; } .lp-mode::after { background: linear-gradient(90deg,var(--lp-paper),rgba(245,240,230,.94) 35%,rgba(245,240,230,.05) 68%); } .lp-install-grid { gap: 17px; } .lp-install-step { display: block; min-height: 230px; padding: 21px; background: linear-gradient(116deg,#ffdc59 0 72px,transparent 73px); } .lp-install-step::before { display: block; margin-bottom: 20px; } .lp-install-icon { position: absolute; right: 20px; top: 18px; } .lp-install-step:not(:last-child)::after { right: -19px; top: 100px; font-size: 25px; }     .lp-gallery-stage { padding-inline: 0; } .lp-gallery-rail { gap: 12px; } .lp-gallery-card { padding: 12px 10px 18px; } .lp-gallery-zoom .lp-phone { padding: 5px; border-width: 5px; border-radius: 30px; } .lp-gallery-zoom .lp-phone img { border-radius: 20px; } .lp-gallery-card-copy h3 { font-size: 23px; } .lp-gallery-card-copy p { font-size: 12px; } .lp-final { gap: 30px; } .lp-final h2 { font-size: 46px; } .lp-final .lp-button { font-size: 16px; } }
@media (max-width: 680px) { .lp-page { --lp-gutter: 22px; } .lp-header { min-height: 67px; gap: 11px; padding-block: 9px; } .lp-header .lp-brand { max-width: calc(100vw - (2 * var(--lp-gutter)) - 105px); } .lp-brand { font-size: 18px; letter-spacing: -.8px; gap: 6px; } .lp-brand img { width: 26px; height: 26px; } .lp-header-actions { gap: 8px; } .lp-header-download { display: none; } .lp-theme-toggle { width: 41px; height: 41px; flex-basis: 41px; } .lp-mobile-menu > summary { width: 41px; height: 41px; } .lp-hero { display: block; min-height: 0; padding: 40px var(--lp-gutter) 0; } .lp-hero-art { top: 250px; } .lp-hero-art img { object-position: 74% center; } .lp-hero::after { background: linear-gradient(180deg,#111311 0%,#111311 34%,rgba(17,19,17,.73) 50%,transparent 70%); } .lp-hero-copy { width: 100%; max-width: 480px; } .lp-eyebrow { margin-bottom: 14px; font-size: 15px; } .lp-hero h1 { font-size: clamp(49px,13.2vw,82px); line-height: .96; letter-spacing: -.035em; } .lp-hero-description { max-width: 410px; margin-block: 19px 22px; font-size: 15px; line-height: 1.5; } .lp-hero .lp-button { width: 100%; max-width: 360px; min-height: 58px; font-size: 16px; } .lp-release-note { margin: 14px 0 12px; font-size: 11px; } .lp-hero-phone { position: relative; right: auto; top: auto; width: clamp(190px,55vw,250px); margin: 30px 2% -86px auto; transform: rotate(6deg); } .lp-phone { padding: 6px; border-width: 6px; border-radius: 32px; box-shadow: inset 0 0 0 2px #7b7c78,9px 9px 0 rgba(0,0,0,.3); } .lp-phone img { border-radius: 20px; } .lp-continuity { margin-top: 24px; padding: 18px 16px; gap: 10px 14px; background: linear-gradient(102deg,#ffdc59 0 59px,transparent 60px); } .lp-continuity-mark { width: 30px; font-size: 38px; } .lp-continuity h2 { font-size: 27px; } .lp-continuity p { font-size: 13px; line-height: 1.55; } .lp-section { padding-block: 40px; scroll-margin-top: 82px; } .lp-heading { margin-bottom: 29px; font-size: clamp(32px,7.8vw,45px); line-height: 1.02; } .lp-heading::after { bottom: -9px; height: 4px; } .lp-mode-grid { grid-template-columns: minmax(0,1fr); gap: 25px; } .lp-mode { min-height: 285px; } .lp-mode-label { padding: 13px 17px; min-height: 65px; font-size: 28px; } .lp-mode-label svg { width: 30px; height: 30px; } .lp-mode-copy { width: 74%; padding: 20px 17px; } .lp-mode-copy h3 { max-width: 260px; font-size: 25px; } .lp-mode-copy p { max-width: 235px; font-size: 14px; } .lp-gallery-section { padding-top: 12px; } .lp-section-description { font-size: 14px; line-height: 1.65; } .lp-gallery-tabs { flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 -4px 22px; padding: 4px 4px 9px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #9a9281 transparent; } .lp-gallery-tab { flex: 0 0 auto; font-size: 12px; padding-inline: 14px; }    .lp-gallery-zoom .lp-phone { border-radius: 35px; }       .lp-gallery-controls { justify-content: center; margin-top: 24px; } .lp-gallery-stage { padding: 20px 0 5px; background-position: center 15%; }
.lp-gallery-rail { display: block; height: clamp(470px,149vw,650px); }
.lp-gallery-card { position: absolute; top: 24px; width: 57%; padding: 0; border: 0; background: transparent; }
.lp-gallery-card[data-lp-slot='0'] { z-index: 3; top: 0; left: 50%; width: 74%; max-width: 292px; transform: translateX(-50%); }
.lp-gallery-card[data-lp-slot='1'] { z-index: 1; right: -5%; transform: rotate(4deg) scale(.88); transform-origin: right center; opacity: .77; }
.lp-gallery-card[data-lp-slot='2'] { z-index: 1; left: -5%; transform: rotate(-4deg) scale(.88); transform-origin: left center; opacity: .77; }
.lp-gallery-card:not([data-lp-slot='0']) .lp-gallery-zoom-label { visibility: hidden; }
.lp-gallery-card-copy { display: none; }
.lp-gallery-zoom { width: 100%; }
.lp-gallery-zoom .lp-phone { padding: 6px; border-width: 6px; border-radius: 35px; }
.lp-gallery-zoom .lp-phone img { border-radius: 23px; }
.lp-gallery-mobile-copy { display: block; padding-top: 17px; text-align: center; }
.lp-gallery-mobile-copy h3 { display: inline-block; margin: 0 0 13px; padding: 6px 13px; color: var(--lp-ink); background: var(--lp-yellow); font-family: 'Roboto Condensed',Impact,sans-serif; font-size: 28px; font-weight: 900; font-style: italic; line-height: 1.05; }
.lp-gallery-mobile-copy p { margin: 0; font-size: 14px; line-height: 1.55; }
.lp-gallery-caption { margin-top: 17px; font-size: 11px; } .lp-install-section { padding-top: 25px; } .lp-install-grid { grid-template-columns: minmax(0,1fr); gap: 21px; } .lp-install-step { display: grid; grid-template-columns: auto auto minmax(0,1fr); gap: 14px; min-height: 124px; padding: 21px; background: linear-gradient(106deg,#ffdc59 0 78px,transparent 79px); } .lp-install-step::before { margin: 0; font-size: 45px; } .lp-install-icon { position: static; width: 28px; } .lp-install-icon svg { width: 28px; } .lp-install-step h3 { font-size: 15px; } .lp-install-step p { font-size: 13px; } .lp-install-step:not(:last-child)::after { right: 50%; top: auto; bottom: -23px; font-size: 25px; transform: translateX(50%) rotate(90deg); } .lp-faq-section { padding-top: 12px; } .lp-faq { padding-inline: 15px; } .lp-faq summary { gap: 13px; min-height: 66px; font-size: 14px; } .lp-faq p { padding: 2px 3px 20px 0; font-size: 13px; line-height: 1.7; } .lp-final { grid-template-columns: minmax(0,1fr); gap: 26px; min-height: 420px; padding-block: 38px; } .lp-final-art { object-position: 73% center; } .lp-final::after { background: linear-gradient(90deg,rgba(17,19,17,.95) 0%,rgba(17,19,17,.8) 46%,rgba(17,19,17,.38)); } .lp-final h2 { max-width: 330px; font-size: clamp(42px,11vw,58px); } .lp-final p { max-width: 310px; font-size: 13px; } .lp-final-actions { width: 100%; max-width: 360px; } .lp-final .lp-button { width: 100%; font-size: 16px; } .lp-footer { display: block; padding-block: 28px; } .lp-footer .lp-brand { margin-bottom: 12px; font-size: 22px; } .lp-footer-nav { gap: 4px 20px; margin: 0; } .lp-footer-note { margin-top: 15px; } .lp-phone-link { display: none; } .lp-qr-panel { display: none; } .lp-lightbox { width: 96vw; max-height: 95dvh; padding: 11px; } .lp-lightbox-image { max-height: calc(95dvh - 102px); } .lp-page[data-lp-theme='dark'] .lp-install-step { background: linear-gradient(106deg,#b29838 0 78px,transparent 79px); } }
@media (max-width: 359px) { .lp-page { --lp-gutter: 16px; } .lp-header { gap: 6px; } .lp-brand { font-size: 16px; gap: 4px; } .lp-brand img { width: 23px; height: 23px; } .lp-header-actions { gap: 6px; } .lp-theme-toggle,.lp-mobile-menu > summary { width: 38px; height: 38px; } .lp-theme-toggle { flex-basis: 38px; } .lp-hero h1 { font-size: 46px; } .lp-hero-description { font-size: 14px; } .lp-mode-label { font-size: 25px; gap: 10px; } .lp-mode-copy { width: 81%; } .lp-continuity h2 { font-size: 24px; } .lp-heading { font-size: 31px; } .lp-install-step { gap: 18px; padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .lp-page *, .lp-page *::before, .lp-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } .lp-page[data-lp-motion='enabled'] .lp-reveal:not(.is-visible) { opacity: 1; transform: none; } }