.about-page{width:100%;height:calc(100dvh - var(--hf-header-height,80px));flex:1;min-height:0;overflow:hidden}body:has(.about-page){height:100dvh;min-height:0;max-height:100dvh;overflow:hidden}body:has(.about-page) .hf-footer{display:none}.how-it-works{--how-top-padding:clamp(24px, 4vh, 36px);width:100%;max-width:1200px;padding:var(--how-top-padding) 24px 20px;box-sizing:border-box;flex:1;align-items:flex-start;height:100%;min-height:0;margin:0 auto;display:flex}.how-layout{flex-direction:column;width:100%;min-height:0;display:flex}.how-main-row{grid-template:"heading.""steps screenshot"/minmax(0,1fr) minmax(280px,360px);align-items:stretch;gap:clamp(10px,1.8vh,18px) 48px;display:grid}.how-heading{color:#fff;grid-area:heading;margin:0;font-family:Archivo,sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:600;line-height:normal}.step-list{flex-direction:column;grid-area:steps;gap:clamp(10px,1.8vh,16px);min-height:0;margin:0;padding:0;list-style:none;display:flex}.step-card{text-align:left;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:14px;padding:clamp(12px,1.9vh,18px) 20px}.step-label{letter-spacing:.04em;text-transform:uppercase;color:#ffffffa6;margin:0 0 6px;font-family:Archivo,sans-serif;font-size:.8rem;font-weight:600}.step-title{color:#fff;margin:0 0 6px;font-family:Archivo,sans-serif;font-size:clamp(1rem,1.8vw,1.2rem);font-weight:600}.step-body{color:#ffffffe0;margin:0;font-family:Nunito,sans-serif;font-size:clamp(.875rem,1.4vw,.96rem);line-height:1.42}.how-disclaimer{text-align:left;border-top:1px solid #ffffff24;margin-top:clamp(8px,1.6vh,16px);padding-top:clamp(8px,1.4vh,14px)}.how-disclaimer-lead{color:#ffffffb3;margin:0 0 6px;font-family:Archivo,sans-serif;font-size:.95rem;font-weight:600}.how-disclaimer p{color:#ffffff8c;margin:0;font-family:Nunito,sans-serif;font-size:.8rem;line-height:1.35}.how-screenshot{grid-area:screenshot;justify-content:center;place-self:stretch center;align-items:stretch;width:100%;display:flex}.how-screenshot-image{object-fit:contain;width:auto;max-width:100%;height:100%;display:block}@media (max-width:900px){.how-main-row{grid-template-columns:minmax(0,1fr) minmax(210px,280px);column-gap:28px}}@media (min-width:1100px){.how-disclaimer{margin-top:40px}}@media (max-width:768px),(max-width:1024px) and (orientation:portrait),(max-height:500px) and (max-width:1024px){.about-page.page-fit-viewport{flex:none;height:auto;min-height:0;overflow:visible}body:has(.about-page){height:auto;max-height:none;overflow:hidden auto}.how-it-works{height:auto;padding:20px 16px max(24px, env(safe-area-inset-bottom));flex:none;align-items:flex-start}.how-main-row{grid-template:"heading""steps""screenshot"/1fr;gap:18px 0}.how-heading{text-align:left;font-size:1.75rem;line-height:1.15}.step-list{gap:14px}.how-screenshot{align-self:center}.how-screenshot-image{width:min(82vw,312px);height:auto;transform:none}.step-card{border-radius:10px;padding:10px 12px}.step-label{margin-bottom:3px;font-size:.68rem}.step-title{margin-bottom:3px;font-size:.9rem}.step-body{font-size:.78rem;line-height:1.28}.how-disclaimer{margin-top:18px;padding-top:7px}.how-disclaimer-lead{margin-bottom:3px;font-size:.78rem}.how-disclaimer p{font-size:.7rem;line-height:1.2}}@media (min-width:600px) and (max-width:1024px) and (orientation:portrait){.how-screenshot-image{width:min(52vw,380px)}.how-heading{font-size:clamp(1.85rem,3.2vw,2.25rem)}.step-card{padding:12px 16px}.step-title{font-size:1rem}.step-body{font-size:.85rem;line-height:1.35}}@media (max-height:720px) and (min-width:769px) and (orientation:landscape),(max-height:820px) and (min-width:1201px){.how-heading{font-size:clamp(1.35rem,2.4vw,1.7rem)}.step-card{padding:10px 14px}.step-label{margin-bottom:3px;font-size:.68rem}.step-title{margin-bottom:3px;font-size:.95rem}.step-body{font-size:.78rem;line-height:1.28}.how-disclaimer{margin-top:10px;padding-top:8px}.how-disclaimer p{font-size:.7rem;line-height:1.25}}@media (min-width:1201px){.step-list{gap:clamp(13px,2vh,18px)}.how-disclaimer{margin-top:clamp(78px,9.75vh,94px)}.how-screenshot{grid-area:1/2/3;align-self:stretch;position:relative;overflow:visible}.how-screenshot-image{--mockup-height:min(79.8vh, 736.44px);--mockup-half-height:min(39.9vh, 368.22px);left:50%;top:clamp(calc(var(--mockup-half-height) - var(--how-top-padding) + 12px), calc(50% + 8px), calc(100dvh - var(--hf-header-height) - var(--how-top-padding) - var(--mockup-half-height) - 12px));height:var(--mockup-height);transform-origin:50%;width:auto;max-width:none;position:absolute;bottom:auto;transform:translate(-50%,-50%)}}@media (max-height:820px) and (min-width:1201px){.how-it-works{--how-top-padding:clamp(40px, 6vh, 52px);padding-top:var(--how-top-padding)}.how-heading{font-size:clamp(1.75rem,2.4vw,1.9rem)}.step-list{gap:clamp(13px,2vh,16px)}.step-card{padding:clamp(11px,1.6vh,13px) 16px}.step-label{margin-bottom:4px;font-size:.72rem}.step-title{margin-bottom:4px;font-size:1rem}.step-body{font-size:.84rem;line-height:1.32}.how-screenshot{align-self:stretch}.how-screenshot-image{--mockup-height:min(68.4vh, 524.4px);--mockup-half-height:min(34.2vh, 262.2px);height:var(--mockup-height);width:auto;transform:translate(-50%,-50%)}.how-disclaimer-lead{font-size:.8rem}.how-disclaimer p{font-size:.74rem;line-height:1.3}}@media (max-height:620px) and (min-width:769px) and (orientation:landscape),(max-height:620px) and (min-width:1025px){.how-it-works{padding-top:8px;padding-bottom:8px}.step-list{gap:6px}.step-card{padding:8px 12px}.how-disclaimer-lead{margin-right:6px;font-size:.7rem;display:inline}.how-disclaimer p{font-size:.68rem;line-height:1.2;display:inline}}@media (max-width:768px) and (max-height:720px),(max-width:1024px) and (orientation:portrait) and (max-height:720px),(max-height:500px) and (max-width:1024px){.how-main-row{row-gap:14px}}@media (max-height:500px) and (max-width:1024px) and (orientation:landscape){.how-it-works{padding:12px 16px max(16px, env(safe-area-inset-bottom))}.how-heading{font-size:1.45rem}.step-list{gap:10px}.how-screenshot-image{width:min(36vw,220px)}.how-disclaimer{margin-top:12px;padding-top:6px}}@media (max-height:900px) and (orientation:landscape) and (max-width:1200px){body:has(.about-page){height:auto;max-height:none;overflow:hidden auto}.about-page.page-fit-viewport{flex:none;height:auto;min-height:0;overflow:visible}.how-it-works{flex:none;height:auto}}@media (max-height:900px) and (min-height:501px) and (orientation:landscape) and (max-width:1200px) and (min-width:769px){.how-screenshot{align-self:start}.how-screenshot-image{width:min(38vw,400px);height:auto;max-height:min(78vh,600px);transform:none}.how-disclaimer{margin-top:16px}}
