html { scroll-padding-top:0; }
.homepage { font-size:17px; line-height:1.65; background:#fff; }
.homepage :where(main) h1,.homepage :where(main) h2 { letter-spacing:-.03em; line-height:1.08; font-weight:600; }
.homepage :where(main) h1 { font-size:clamp(40px,4.5vw,66px); margin:0 0 24px; }
.homepage :where(main) h2 { font-size:clamp(32px,3vw,46px); margin:0 0 20px; }
.homepage :where(main) h3 { font-size:21px; line-height:1.35; font-weight:700; margin:16px 0 12px; }
.homepage :where(main) p { color:var(--qc-muted); }
.homepage a:focus-visible,.homepage button:focus-visible,.homepage summary:focus-visible,.homepage input:focus-visible { outline:3px solid #818cf8; outline-offset:4px; }
.homepage :where(main) figure { margin:0; }
.homepage :where(main) figcaption { font-size:12px; line-height:1.5; color:var(--qc-muted); margin-top:16px; }
.homepage section[id] { scroll-margin-top:24px; }
.home-section { padding:88px 0; }
.home-section-heading { max-width:780px; margin:0 auto 44px; text-align:center; }
.home-section-heading p { font-size:19px; margin-bottom:0; }
.home-soft { background:#f8fafc; }
.home-center { text-align:center; }
.home-center .site-actions { justify-content:center; }
.home-hero { padding:76px 0 64px; overflow:hidden; }
.home-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
.home-hero-copy { padding:12px 0; }
.home-lead { font-size:21px; margin:0 0 28px; }
.home-free { margin:18px 0; font-size:14px; }
.home-video-link { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; }
.home-product { min-height:490px; position:relative; display:flex; align-items:flex-start; padding:12px 0 100px; }
.home-results-frame { width:91%; padding:10px; background:#f1f5f9; border:1px solid #dbe2ea; border-radius:20px; box-shadow:0 16px 40px #0f172a12; }
.home-results-frame img { display:block; width:100%; height:auto; border-radius:12px; }
.home-phone-frame { position:absolute; right:0; bottom:40px; width:39%; border:7px solid #0f172a; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 20px 40px #0f172a25; }
.home-phone-frame img { display:block; width:100%; height:auto; }
.home-product figcaption { position:absolute; bottom:0; left:0; right:0; text-align:right; }
.home-join { background:#eef2ff; border-top:1px solid #e0e7ff; border-bottom:1px solid #e0e7ff; padding:28px 0; }
.home-join-grid { display:grid; grid-template-columns:1fr minmax(320px,430px); gap:32px; align-items:center; }
.home-join h2 { font:700 21px Figtree,system-ui,sans-serif; letter-spacing:0; margin:0 0 6px; }
.home-join p { font-size:15px; margin:0; }
.home-code-fields { display:flex; gap:10px; }
.home-code-fields input { min-width:0; width:100%; background:#fff; border:1px solid #94a3b8; border-radius:10px; padding:12px 16px; font:600 18px/1.4 Figtree,system-ui,sans-serif; color:var(--qc-ink); }
.home-code-fields input::placeholder { color:#64748b; font-weight:400; font-size:16px; }
.home-code-fields input[aria-invalid=true] { border-color:#b91c1c; }
.home-join .home-error { color:#b91c1c; min-height:24px; font-size:14px; padding-top:5px; }
.home-steps { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.home-steps li { position:relative; padding:8px 0 0 54px; }
.home-step-number { position:absolute; left:0; top:0; display:grid; place-items:center; width:36px; height:36px; background:#eef2ff; border-radius:50%; color:var(--qc-primary); font-weight:700; }
.home-steps .site-icon { color:var(--qc-primary); width:32px; height:32px; }
.home-steps p { margin:0; }
.home-film { background:#f8fafc; }
.home-video-container { max-width:1050px; }
.home-video-shell { background:#0f172a; border:1px solid var(--qc-border); border-radius:16px; overflow:hidden; }
.tutorial-video { width:100%; aspect-ratio:16/9; display:block; object-fit:contain; background:#0f172a; }
.home-video-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; font-size:14px; }
.home-video-meta p { margin:0; }
.home-video-meta>div { display:flex; flex-wrap:wrap; gap:20px; }
.home-feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.home-feature-grid .site-icon,.home-lead-feature>.site-icon { color:var(--qc-primary); width:34px; height:34px; }
.home-feature-grid p { font-size:16px; margin:0; }
.home-lead-feature { display:flex; align-items:center; gap:20px; padding-top:32px; margin-top:36px; border-top:1px solid var(--qc-border); }
.home-lead-feature h3 { margin:0 0 8px; }
.home-lead-feature p { margin:0; font-size:16px; }
.home-split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.home-check-list { list-style:none; padding:0; margin:24px 0 30px; }
.home-check-list li { display:flex; align-items:flex-start; gap:12px; margin:14px 0; }
.home-check-list .site-icon { color:var(--qc-primary); }
.home-ranking img { display:block; width:100%; height:auto; background:white; border:1px solid var(--qc-border); border-radius:var(--qc-radius); padding:20px; box-shadow:0 12px 30px #0f172a08; }
.home-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.home-case { color:var(--qc-ink); text-decoration:none; border:1px solid var(--qc-border); border-radius:var(--qc-radius); padding:28px; display:flex; align-items:flex-start; flex-direction:column; }
.home-case:hover { color:var(--qc-ink); border-color:#a5b4fc; background:#fafaff; }
.home-case>.site-icon { color:var(--qc-primary); width:30px; height:30px; }
.home-case p { margin:0 0 24px; }
.home-case>span { display:flex; align-items:center; gap:8px; margin-top:auto; color:var(--qc-primary); font-size:14px; font-weight:600; }
.home-editor img { display:block; width:100%; height:auto; border:1px solid var(--qc-border); border-radius:var(--qc-radius); box-shadow:0 12px 32px #0f172a0b; }
.home-small { font-size:14px; margin:16px 0 0; }
.home-pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.home-pricing article { border:1px solid var(--qc-border); border-radius:var(--qc-radius); padding:28px; }
.home-pricing article:first-child { border-color:#a5b4fc; background:#fafaff; }
.home-pricing h3 { margin:0 0 20px; }
.home-price { font-size:40px; line-height:1.2; font-weight:700; color:var(--qc-ink)!important; }
.home-price span { font-size:15px; font-weight:400; }
.home-pricing article>p:not(.home-price) { font-size:16px; margin-bottom:8px; }
.home-pricing .site-button { margin-top:16px; }
.home-faq-container { max-width:900px; }
.home-faq { padding:22px 0; border-bottom:1px solid #cbd5e1; }
.home-faq summary { font-weight:600; cursor:pointer; padding-right:20px; }
.home-faq p { margin:16px 0 0; }
.home-final { background:#1e1b4b; }
.home-final h2 { color:white; }
.home-final p { color:#e0e7ff; margin-bottom:28px; font-size:19px; }
.home-apps { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.home-apps>article>.site-icon { width:36px; height:36px; color:var(--qc-primary); }
.home-apps h3 { margin-top:20px; }
.home-install { margin-top:16px; }
.home-install summary { font-size:15px; color:var(--qc-primary); cursor:pointer; }
.home-install p { margin-top:12px; font-size:15px; }
.home-review { padding:24px; border:1px solid var(--qc-border); border-radius:var(--qc-radius); }
@media(max-width:991.98px) { .home-hero-grid { gap:32px; } .home-product { min-height:400px; padding-bottom:80px; } .home-phone-frame { width:44%; } .home-hero { padding-top:48px; } .home-split { gap:32px; } .home-feature-grid { grid-template-columns:repeat(2,1fr); } .home-cases { grid-template-columns:repeat(2,1fr); } .home-join-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:767.98px) { .home-section { padding:56px 0; } .home-hero-grid,.home-split,.home-join-grid { grid-template-columns:1fr; } .home-hero { padding:32px 0 40px; } .home-hero-grid { gap:40px; } .home-hero h1 { max-width:550px; } .home-lead { font-size:19px; } .home-product { width:100%; max-width:520px; margin:0 auto!important; min-height:0; } .home-results-frame { width:86%; } .home-phone-frame { width:40%; } .home-product figcaption { font-size:11px; text-align:left; } .home-steps { grid-template-columns:1fr; gap:32px; } .home-section-heading { text-align:left; margin-bottom:32px; } .home-section-heading p { font-size:17px; } .home-pricing { grid-template-columns:1fr; } .home-pricing article { padding:24px; } .home-apps { grid-template-columns:1fr; gap:40px; } .home-final .home-center { text-align:left; } .home-final .site-actions { justify-content:flex-start; } .home-cases { gap:16px; } .home-case { padding:20px; } }
@media(max-width:479.98px) { .home-cases { grid-template-columns:1fr; } .home-feature-grid { gap:28px 20px; } .home-feature-grid h3 { font-size:19px; } .home-hero .site-actions { align-items:stretch; flex-direction:column; } .home-code-fields .site-button { padding:12px; } .home-code-fields .site-button .site-icon { display:none; } }
.home-play-badge { display:inline-block; border-radius:6px; }
.home-play-badge img { display:block; width:162px; height:48px; }
/* Keep the phone flow short while retaining all product destinations. */
@media(max-width:767.98px) {
.homepage section[id] { scroll-margin-top:72px; }
.home-section { padding:48px 0; }
.home-section-heading { margin-bottom:24px; }
.home-hero { padding:20px 0 28px; }
.homepage .home-hero h1 { font-size:clamp(36px,9.5vw,40px); margin-bottom:16px; }
.home-lead { font-size:17px; line-height:1.55; margin-bottom:20px; }
.home-hero-grid { gap:24px; }
.home-free { margin:14px 0 8px; font-size:13px; }
.home-video-link { min-height:44px; }
.home-product { display:grid; grid-template-columns:132px minmax(0,1fr); align-items:center; gap:16px; padding:0; min-height:0; }
.home-results-frame { display:none; }
.home-phone-frame { position:static; width:132px; border-width:4px; border-radius:16px; box-shadow:0 8px 20px #0f172a14; }
.home-product figcaption { position:static; margin:0; font-size:12px; text-align:left; }
.home-ranking,.home-editor { display:none; }
.home-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
.home-feature-grid .site-icon { width:28px; height:28px; }
.home-feature-grid h3 { font-size:18px; }
.home-feature-grid p { font-size:15px; line-height:1.5; }
.home-cases { display:block; }
.home-case { display:grid; grid-template-columns:28px minmax(0,1fr) 24px; align-items:center; gap:12px; min-height:68px; padding:14px 0; border:0; border-bottom:1px solid #cbd5e1; border-radius:0; }
.home-case h3 { font-size:18px; margin:0; }
.home-case p,.home-case-link-label { display:none; }
.home-case>.site-icon { width:26px; height:26px; }
.home-case>span { margin:0; }
.home-video-meta { gap:12px; }
.home-video-meta>div { flex-direction:column; gap:0; width:100%; }
.home-video-meta a,.home-faq-container>p a,.home-pricing+ p a { display:inline-flex; align-items:center; min-height:44px; }
.home-faq summary,.home-install summary { display:list-item; min-height:44px; padding-top:8px; padding-bottom:8px; }
.home-faq { padding:12px 0; }
.home-join-grid { gap:16px; }
.home-join { padding:24px 0 16px; }
.home-apps { gap:32px; }
}
@media(max-width:991.98px) and (max-height:500px) {
.homepage section[id] { scroll-margin-top:72px; }
.homepage .home-hero h1 { font-size:32px; margin-bottom:16px; }
.home-hero { padding:24px 0; }
.home-lead { font-size:16px; line-height:1.5; }
.home-product { display:grid; grid-template-columns:132px minmax(0,1fr); align-items:center; gap:16px; padding:0; min-height:0; }
.home-results-frame { display:none; }
.home-phone-frame { position:static; width:132px; border-width:4px; border-radius:16px; }
.home-product figcaption { position:static; font-size:12px; text-align:left; }
}
@media(max-width:767.98px) {
.homepage :where(main) h2 { font-size:28px; line-height:1.12; margin-bottom:16px; }
.home-steps { gap:24px; }
.home-steps li { padding:0 0 0 50px; }
.home-steps .site-icon { display:none; }
.home-steps h3 { margin:0 0 6px; font-size:19px; }
.home-steps p { font-size:15px; line-height:1.5; }
.home-pricing { gap:16px; }
.home-pricing article { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:12px; padding:20px; }
.home-pricing h3 { grid-column:1; margin:0 0 12px; font-size:20px; }
.home-pricing .home-price { grid-column:2; grid-row:1/4; max-width:130px; margin:0; text-align:right; font-size:30px; }
.home-pricing .home-price span { display:block; font-size:13px; }
.home-pricing article>p:not(.home-price) { grid-column:1; margin:0 0 6px; font-size:14px; line-height:1.5; }
.home-pricing article>.site-button { grid-column:1/-1; margin-top:12px; }
}
@media(max-width:767.98px) {
.homepage .home-join h2 { font:700 21px/1.3 Figtree,system-ui,sans-serif; letter-spacing:0; margin-bottom:6px; }
}