/* The additional sections use the same quiet spacing and blue-led visual language. */
.how-section,.progress-section,.pricing-section,.faq-section { padding:112px clamp(22px,6vw,96px); }
.section-heading { max-width:620px; margin:0 auto 58px; text-align:center; }.section-heading h2 { margin:0 0 18px; color:#132c47; font-size:clamp(42px,5vw,68px); line-height:.98; letter-spacing:-.065em; }.section-heading h2 span { color:#147bf4; }.section-heading>p:last-child { margin:0; color:#61758a; font-size:18px; line-height:1.48; }
.how-section { background:linear-gradient(180deg,#fff,#f3f8ff); }.how-grid { max-width:1050px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.how-card { position:relative; min-height:515px; overflow:hidden; padding:28px 27px; border:1px solid #deebf7; border-radius:28px; background:#fff; box-shadow:0 18px 40px rgba(30,83,143,.09); }.how-card>span { position:relative; z-index:2; color:#147bf4; font-weight:750; font-size:14px; letter-spacing:.08em; }.how-card h3 { position:absolute; z-index:2; right:27px; bottom:57px; left:27px; margin:0 0 9px; color:#16314d; font-size:26px; letter-spacing:-.05em; }.how-card p { position:absolute; z-index:2; right:27px; bottom:24px; left:27px; margin:0; color:#66798c; font-size:15px; line-height:1.38; }.how-phone { position:absolute; top:63px; left:50%; width:178px; aspect-ratio:1206/2622; transform:translateX(-50%); border:5px solid #12161d; border-radius:30px; background:#12161d; box-shadow:0 19px 32px rgba(13,48,95,.23); }.how-phone img { width:100%; height:100%; object-fit:cover; border-radius:25px; }
.feature-points { display:grid; gap:8px; margin:24px 0 0; padding:0; list-style:none; color:#426079; font-size:15px; font-weight:600; }.feature-points li::before { content:"✓"; display:inline-grid; width:18px; height:18px; margin-right:8px; place-items:center; border-radius:50%; color:#147bf4; background:#e1f1ff; font-size:12px; }.feature-fact { margin-top:21px !important; color:#147bf4 !important; font-size:14px !important; font-weight:700; line-height:1.45 !important; }
.progress-section { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,9vw,130px); align-items:center; background:#102948; }.progress-copy { max-width:470px; justify-self:end; }.progress-copy .eyebrow { color:#77bcff; }.progress-copy h2 { margin:0 0 19px; color:#fff; font-size:clamp(42px,5vw,67px); line-height:1; letter-spacing:-.066em; }.progress-copy h2 span { color:#8ed0ff; }.progress-copy>p:not(.eyebrow) { margin:0; color:#c7d8e8; font-size:18px; line-height:1.5; }.progress-pills { display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; }.progress-pills span { padding:9px 12px; border:1px solid rgba(154,207,255,.22); border-radius:99px; color:#d5e9fa; background:rgba(255,255,255,.06); font-size:13px; font-weight:650; }.progress-devices { position:relative; width:430px; height:475px; }.progress-devices::before { content:""; position:absolute; inset:10% 4% 2%; border-radius:50%; background:radial-gradient(ellipse,rgba(38,139,255,.43),transparent 69%); }.progress-phone { position:absolute; width:205px; aspect-ratio:1206/2622; border:6px solid #111820; border-radius:34px; background:#111820; box-shadow:0 28px 45px rgba(0,0,0,.32); }.progress-phone img { width:100%; height:100%; object-fit:cover; border-radius:28px; }.progress-phone-back { top:10px; left:8px; }.progress-phone-front { right:20px; bottom:0; }
.devices-feature { position:relative; overflow:hidden; background:#b8a3ed !important; }.devices-feature::after { content:""; position:absolute; right:-15%; bottom:-35%; width:65%; height:95%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.38),transparent 67%); }.devices-feature .feature-copy { position:relative; z-index:2; }.devices-feature .feature-copy h2 { color:#19243c; }.devices-feature .feature-copy h2 span { color:#513fc5; }.devices-feature .feature-copy>p:not(.eyebrow) { color:#43516e; }.devices-feature .feature-icon { color:#513fc5; background:rgba(255,255,255,.5); }
.device-ecosystem { position:relative; z-index:2; width:620px; height:450px; }.device-ecosystem::before { display:none; }.imac-device { position:absolute; z-index:1; top:0; left:128px; width:367px; }.imac-screen { position:relative; overflow:hidden; aspect-ratio:16/10; padding:7px; border:7px solid #090b0e; border-radius:23px 23px 5px 5px; background:#090b0e; box-shadow:0 29px 42px rgba(51,31,104,.26); }.imac-screen img { width:100%; height:100%; object-fit:cover; border-radius:4px; }.imac-screen::after { content:""; position:absolute; top:3px; left:50%; width:5px; height:5px; border-radius:50%; background:#2e3743; transform:translateX(-50%); }.imac-chin { position:absolute; left:7px; bottom:-37px; width:calc(100% - 14px); height:37px; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#e9edf1,#aeb8c1); }.imac-chin::after { content:""; position:absolute; left:50%; top:11px; width:22px; height:18px; border-radius:50% 50% 45% 45%; background:#171b20; transform:translateX(-50%); }.imac-stand { position:absolute; z-index:-1; left:50%; bottom:-126px; width:82px; height:93px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,#8d969e,#edf0f2 46%,#8c969f); transform:translateX(-50%); }.imac-stand::after { content:""; position:absolute; bottom:0; left:50%; width:175px; height:12px; border-radius:50% 50% 4px 4px; background:linear-gradient(180deg,#edf0f2,#929da6); transform:translateX(-50%); }
.device-ecosystem .macbook-device { z-index:4; top:208px; left:0; width:275px; }.device-ecosystem .macbook-screen { padding:5px; border-width:5px; border-bottom-width:6px; border-radius:11px 11px 3px 3px; }.device-ecosystem .macbook-base { bottom:-17px; height:17px; }.device-ecosystem .ipad-device { z-index:5; top:188px; right:62px; width:178px; padding:6px; border-width:6px; border-radius:21px; }.device-ecosystem .ecosystem-iphone { z-index:7; left:auto; right:0; bottom:0; width:83px; border-width:4px; border-radius:18px; }.device-ecosystem .ecosystem-iphone img { border-radius:13px; }.device-ecosystem .ecosystem-watch { z-index:8; right:112px; bottom:-2px; transform:rotate(-4deg) scale(.88); transform-origin:bottom right; }
.privacy-section { padding:110px clamp(22px,6vw,96px); background:#f5f9fd; }.privacy-inner { max-width:1040px; margin:auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:center; }.privacy-inner h2 { margin:0 0 18px; color:#142c46; font-size:clamp(42px,5vw,67px); line-height:.98; letter-spacing:-.066em; }.privacy-inner h2 span { color:#147bf4; }.privacy-inner>div>p:last-child { margin:0; color:#61758a; font-size:18px; line-height:1.5; }.privacy-points { display:grid; gap:16px; margin:0; padding:0; list-style:none; }.privacy-points li { display:flex; gap:16px; padding:19px 20px; border:1px solid #dce8f3; border-radius:18px; background:#fff; box-shadow:0 10px 22px rgba(34,84,137,.06); }.privacy-points span { display:grid; width:35px; height:35px; flex:0 0 auto; place-items:center; border-radius:11px; color:#147bf4; background:#e3f2ff; font-size:20px; font-weight:700; }.privacy-points strong { color:#203b56; font-size:16px; }.privacy-points p { margin:4px 0 0; color:#718398; font-size:14px; line-height:1.42; }
.pricing-section { background:#fff; }.pricing-grid { max-width:900px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }.price-card { padding:35px; border:1px solid #dce7f1; border-radius:25px; background:#fff; box-shadow:0 18px 38px rgba(25,76,132,.08); }.price-card-featured { border-color:#176fe7; color:#fff; background:linear-gradient(145deg,#1687ff,#0d58d4); box-shadow:0 24px 48px rgba(15,99,215,.28); }.price-label { margin:0 0 15px; color:#147bf4; font-size:12px; font-weight:800; letter-spacing:.1em; }.price-card-featured .price-label { color:#bfeaff; }.price-card h3 { margin:0 0 16px; color:#17324d; font-size:27px; letter-spacing:-.05em; }.price-card-featured h3 { color:#fff; }.price-value { margin:0 0 23px; color:#147bf4; font-size:42px; font-weight:770; letter-spacing:-.065em; }.price-value span { font-size:15px; font-weight:600; letter-spacing:-.02em; }.price-card-featured .price-value { color:#fff; }.price-card ul { display:grid; gap:11px; min-height:113px; margin:0 0 27px; padding:0; list-style:none; color:#587087; font-size:14px; line-height:1.4; }.price-card li::before { content:"✓"; margin-right:8px; color:#147bf4; font-weight:800; }.price-card-featured ul { color:#e6f4ff; }.price-card-featured li::before { color:#c3ecff; }.price-card a { display:block; padding:13px 15px; border-radius:12px; color:#147bf4; background:#edf6ff; text-align:center; font-weight:750; }.price-card-featured a { color:#0a5ad6; background:#fff; }.price-card small { display:block; margin-top:12px; color:#d7ecff; text-align:center; font-size:12px; }
.faq-section { background:#f4f8fc; }.faq-list { max-width:800px; margin:auto; display:grid; gap:10px; }.faq-list details { border:1px solid #dce7f1; border-radius:15px; background:#fff; }.faq-list summary { padding:19px 21px; color:#203b56; cursor:pointer; list-style:none; font-size:17px; font-weight:700; }.faq-list summary::after { content:"+"; float:right; color:#147bf4; font-size:22px; line-height:.8; }.faq-list details[open] summary::after { content:"–"; }.faq-list p { margin:0; padding:0 21px 20px; color:#687c90; font-size:15px; line-height:1.5; }
@media (max-width:800px) { .how-section,.progress-section,.pricing-section,.faq-section { padding:82px 22px; }.how-grid { grid-template-columns:1fr; max-width:440px; }.how-card { min-height:470px; }.progress-section,.privacy-inner { grid-template-columns:1fr; }.progress-copy { justify-self:start; }.progress-devices { margin:auto; }.device-ecosystem { width:520px; max-width:100%; }.imac-device { left:100px; width:310px; }.device-ecosystem .macbook-device { top:197px; width:245px; }.device-ecosystem .ipad-device { top:185px; width:165px; right:39px; }.privacy-inner { gap:42px; }.pricing-grid { max-width:600px; }.devices-feature .feature-copy { order:1; }.devices-feature .device-ecosystem { order:2; } }
@media (max-width:480px) { .section-heading { margin-bottom:38px; }.how-card { min-height:440px; }.how-phone { width:150px; }.progress-devices { width:320px; height:370px; }.progress-phone { width:156px; border-width:5px; border-radius:27px; }.progress-phone img { border-radius:22px; }.progress-phone-front { right:0; }.device-ecosystem { height:320px; width:340px; }.imac-device { left:79px; width:203px; }.imac-screen { padding:4px; border-width:4px; border-radius:13px 13px 3px 3px; }.imac-chin { bottom:-23px; height:23px; }.imac-stand { bottom:-78px; width:48px; height:56px; }.imac-stand::after { width:105px; height:8px; }.device-ecosystem .macbook-device { top:158px; left:0; width:154px; }.device-ecosystem .macbook-screen { padding:3px; border-width:3px; border-bottom-width:4px; }.device-ecosystem .macbook-base { bottom:-10px; height:10px; }.device-ecosystem .ipad-device { top:148px; right:39px; width:108px; padding:3px; border-width:4px; border-radius:14px; }.device-ecosystem .ecosystem-iphone { right:3px; width:58px; border-width:3px; border-radius:12px; }.device-ecosystem .ecosystem-iphone img { border-radius:8px; }.device-ecosystem .ecosystem-watch { right:71px; bottom:-6px; transform:rotate(-4deg) scale(.63); }.privacy-section { padding:76px 22px; }.privacy-points li { padding:16px; }.pricing-grid { grid-template-columns:1fr; }.price-card { padding:29px; }.faq-list summary { font-size:16px; } }