/* SkyMail r170: public Online-Speicher page and original feature captures. */
:root{color-scheme:dark;--page:#0b1220;--surface:#131e30;--line:#2b3b52;--text:#f3f7ff;--muted:#afbdd1;--blue:#8ac7ff;scroll-behavior:smooth;scroll-padding-top:28px}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font-family:"Segoe UI",system-ui,-apple-system,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,summary{font:inherit;cursor:pointer}a,button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b2dcff;outline-offset:5px}h1,h2,h3,p,figure{margin:0}button{color:inherit}img{max-width:100%}.container{width:min(1240px,calc(100% - 72px));margin-inline:auto}.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}[hidden]{display:none!important}.skip-link{position:fixed;z-index:30;top:-100px;left:15px;background:white;color:#0b1220;padding:12px 18px;border-radius:8px}.skip-link:focus{top:10px}
.site-header{border-bottom:1px solid var(--line);background:#0b1220}.header-inner{display:flex;align-items:center;gap:40px;min-height:88px}.brand{display:inline-flex;align-items:center;flex-shrink:0}.brand img{display:block;width:183px;height:auto}.header-nav{display:flex;align-items:center;gap:28px;font-size:14px;color:#c1cee0}.header-nav>a{display:inline-flex;align-items:center;min-height:44px}.header-nav>a[aria-current]{color:#a8d5ff}.header-nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.header-inner>.button{margin-left:auto}.app-menu{position:relative}.app-menu summary{display:flex;align-items:center;gap:8px;list-style:none;min-height:44px}.app-menu summary::-webkit-details-marker{display:none}.submenu{position:absolute;z-index:20;top:48px;left:-12px;display:grid;min-width:230px;padding:8px;border:1px solid #3a506e;border-radius:12px;background:#17263d;box-shadow:0 16px 40px #0006}.submenu a{display:block;min-height:48px;padding:10px 16px;font-size:16px;border-radius:6px}.submenu a:hover{background:#263c5a;text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:50px;padding:12px 22px;background:#91caff;color:#0b223b;border:1px solid transparent;border-radius:8px;font-weight:650;font-size:14px}.button:hover{background:#b4ddff}.button-small{min-height:44px;padding:10px 17px;font-size:13px}.text-link{display:inline-flex;align-items:center;min-height:44px;color:#aad7ff;font-size:14px;font-weight:600}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-top:26px}.eyebrow{font-size:11px;font-weight:650;line-height:1.6;letter-spacing:1.8px;color:#92bbdf}.hero{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-block:78px 62px}.hero h1{margin-top:20px;font-size:clamp(52px,5.5vw,78px);font-weight:650;line-height:1.08;letter-spacing:-3.6px}.hero h1 span,.mobile-copy h2 span{color:#8ccaff}.hero-intro{align-self:end}.hero-intro>p:first-child{max-width:540px;color:var(--muted);font-size:18px;line-height:1.8}.hero-note{font-size:12px;color:#93a9c2;margin-top:19px}
.showcase{position:relative}.showcase-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:23px}.showcase h2{font-size:25px;font-weight:600;line-height:1.35;letter-spacing:-.6px;margin-top:10px}.mobile-break{display:none}.view-controls{display:flex;flex-wrap:wrap;gap:5px;padding:5px;border:1px solid #3c4d67;border-radius:10px;background:#142035}.view-controls button{min-height:42px;padding:9px 16px;border:0;border-radius:6px;background:transparent;color:#afc0d6;font-size:13px;line-height:1.5}.view-controls button[aria-pressed=true]{background:#334d6c;color:#fff}.screenshot-frame{overflow:hidden;border:1px solid #435a78;border-radius:14px;background:#101b2d;box-shadow:0 24px 85px #0004}.screenshot-titlebar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 18px;color:#adc0d9;background:#111e31;font-size:10px}.screenshot-titlebar>span:last-child{letter-spacing:1px;font-size:8px}.window-dots{display:flex;gap:6px}.window-dots span{width:7px;height:7px;background:#a67984;border-radius:50%}.window-dots span:nth-child(2){background:#b5a472}.window-dots span:nth-child(3){background:#73a992}.screenshot-link{display:block;position:relative;line-height:0}.screenshot-link img{display:block;width:100%;height:auto}.screenshot-link:focus-visible{outline-offset:-5px}.zoom-label{position:absolute;right:18px;bottom:18px;display:flex;gap:15px;align-items:center;padding:11px 15px;border:1px solid #657d99;border-radius:7px;background:#10223aee;color:#e6f3ff;font-size:11px;line-height:1.5}.screenshot-frame figcaption{display:flex;justify-content:space-between;gap:15px;padding:11px 18px;color:#aebfd6;font-size:11px;border-top:1px solid #2f425f}.capture-note{margin-top:15px;color:#8fa5c0;font-size:11px}.capture-note a{text-decoration:underline;text-underline-offset:4px}
.everyday{margin-top:100px}.section-heading h2{margin-top:15px;font-size:39px;font-weight:600;line-height:1.2;letter-spacing:-1.3px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:38px}.feature-grid article{padding-top:22px;border-top:1px solid #3c516e}.feature-number{font-size:12px;color:#76a8d2;font-variant-numeric:tabular-nums}.feature-grid h3{margin-top:14px;font-size:23px;font-weight:600;letter-spacing:-.5px}.feature-grid p{margin-top:13px;font-size:14px;color:var(--muted)}.feature-grid .text-link{font-size:12px;margin-top:15px}
.mobile-section{margin-top:100px;padding-block:65px;background:radial-gradient(ellipse at 80% 40%,#20466d55,transparent 65%),#101c2c;border-block:1px solid #283d59}.mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}.mobile-copy h2{margin-top:19px;font-size:clamp(40px,4vw,58px);font-weight:600;line-height:1.13;letter-spacing:-2px}.mobile-copy>p:not(.eyebrow){max-width:500px;color:var(--muted);font-size:15px;margin-top:22px;line-height:1.9}.image-benefits{padding:0;list-style:none;display:grid;gap:10px;margin-block:26px 14px;color:#cfdfef;font-size:14px}.image-benefits li::before{content:"✓";display:inline-block;color:#8ccaff;margin-right:12px}.phone-figure{justify-self:center;width:min(100%,312px)}.phone-figure>a{display:block;border:1px solid #596e86;border-radius:22px;overflow:hidden;box-shadow:0 25px 70px #0006;line-height:0}.phone-figure img{display:block;width:100%;height:auto}.phone-figure figcaption{text-align:center;margin-top:16px;font-size:10px;color:#98adc6}
.questions{display:grid;grid-template-columns:1fr 1.3fr;gap:90px;margin-top:100px}.faq-list details{border-bottom:1px solid #344b68}.faq-list details:first-child{border-top:1px solid #344b68}.faq-list summary{display:flex;justify-content:space-between;gap:22px;align-items:center;min-height:72px;padding-block:19px;list-style:none;font-size:15px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:23px;color:#91bbdf}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list p{padding-bottom:22px;color:var(--muted);font-size:14px;line-height:1.9}.faq-list p a{color:#abd5ff;text-decoration:underline;text-underline-offset:4px}.closing-cta{padding:52px 35px;margin-top:100px;text-align:center;background:radial-gradient(ellipse at 50% 0,#244c7b88,transparent 90%),#101d31;border:1px solid #365779;border-radius:14px}.closing-cta h2{margin-top:18px;font-size:46px;font-weight:600;letter-spacing:-1.6px;line-height:1.18}.closing-cta>p:not(.eyebrow){margin-top:20px;color:var(--muted);font-size:15px}.closing-cta .actions{justify-content:center}.site-footer{display:flex;align-items:center;gap:40px;margin-top:75px;padding-block:30px 40px;border-top:1px solid #2c405b}.site-footer .brand img{width:125px}.site-footer nav{display:flex;flex-wrap:wrap;gap:14px 24px;margin-left:auto;color:#9fb3cd;font-size:12px}.site-footer nav a{display:inline-flex;align-items:center;min-height:44px}.site-footer nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1050px){.container{width:calc(100% - 48px)}.header-inner{gap:24px}.header-nav{gap:22px}.hero{gap:40px}.hero h1{font-size:62px}.hero-intro>p:first-child{font-size:16px}.mobile-grid{gap:65px}.questions{gap:45px}.section-heading h2{font-size:34px}}
@media(max-width:740px){.container{width:calc(100% - 36px)}.header-inner{flex-wrap:wrap;gap:0 18px;padding-block:15px 8px;min-height:0}.brand img{width:145px}.header-nav{order:3;width:100%;justify-content:space-between;gap:12px;font-size:13px;margin-top:8px}.header-inner>.button{min-height:44px}.submenu{left:0}.hero{grid-template-columns:1fr;gap:25px;padding-block:42px 39px}.hero h1{font-size:clamp(44px,9vw,67px);letter-spacing:-2.5px}.hero-intro>p:first-child{font-size:16px;max-width:100%}.hero .eyebrow{font-size:10px}.showcase-heading{align-items:start;flex-direction:column;gap:19px}.showcase h2{font-size:23px}.view-controls{max-width:100%}.view-controls button{padding-inline:13px}.screenshot-frame{border-radius:9px}.screenshot-titlebar{padding:9px 11px;font-size:9px}.screenshot-titlebar>span:last-child{font-size:6px;letter-spacing:.5px}.window-dots{gap:4px}.window-dots span{width:5px;height:5px}.zoom-label{position:static;justify-content:center;border:0;border-radius:0;background:#192b43;font-size:11px}.screenshot-frame figcaption{padding:10px 11px;font-size:10px}.screenshot-frame figcaption>span:last-child{display:none}.capture-note{font-size:10px;line-height:1.8}.everyday{margin-top:66px}.section-heading h2{font-size:31px;letter-spacing:-1px}.feature-grid{grid-template-columns:1fr;gap:27px;margin-top:28px}.feature-grid article{padding-top:18px}.feature-grid h3{font-size:23px;margin-top:9px}.feature-grid p{font-size:14px}.feature-grid .text-link{margin-top:10px;font-size:13px}.mobile-section{margin-top:65px;padding-block:45px}.mobile-grid{grid-template-columns:1fr;gap:35px}.mobile-copy h2{font-size:43px;letter-spacing:-1.4px}.mobile-copy>p:not(.eyebrow){font-size:14px;max-width:100%}.mobile-copy .eyebrow{font-size:9px;letter-spacing:1.1px}.phone-figure{width:min(100%,290px)}.questions{grid-template-columns:1fr;gap:28px;margin-top:65px}.faq-list summary{font-size:14px}.faq-list p{font-size:13px}.closing-cta{padding:35px 22px;margin-top:65px}.closing-cta h2{font-size:35px;letter-spacing:-1.1px}.closing-cta .actions{gap:15px}.closing-cta .text-link{font-size:12px}.site-footer{flex-direction:column;align-items:start;gap:16px;margin-top:50px;padding-block:24px 30px}.site-footer nav{margin-left:0;gap:4px 23px}.eyebrow{font-size:10px;letter-spacing:1.4px}}
@media(max-width:360px){.header-nav{font-size:12px;gap:8px}.brand img{width:132px}.button-small{padding-inline:13px;font-size:12px}.mobile-break{display:block}.hero-intro>p:first-child{font-size:15px}.view-controls button{font-size:12px;padding-inline:10px}.closing-cta .eyebrow{font-size:9px}.section-heading h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}

/* Image editing and document handoff: actual UI captures, no simulated editor. */
.editor-section,.handoff-section{margin-top:100px;scroll-margin-top:28px}
.editor-heading{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:end}
.editor-heading>div:last-child>p:first-child{max-width:660px;color:var(--muted);font-size:17px;line-height:1.9}
.editor-heading strong,.zoom-notes strong,.handoff-card strong{color:#e4f1ff;font-weight:600}
.editor-promise{margin-top:15px;color:#a6d9f0;font-size:13px}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:28px;margin-top:35px}
.editor-desktop-shot{min-width:0}
.editor-phone-shot{width:100%;max-width:260px;justify-self:center}
.editor-phone-shot>a{display:block;line-height:0;overflow:hidden;border:1px solid #596e86;border-radius:18px;box-shadow:0 20px 55px #0005}
.editor-phone-shot img{display:block;width:100%;height:auto}
.editor-phone-shot figcaption{margin-top:13px;color:#98adc6;font-size:10px;line-height:1.7;text-align:center}
.editor-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:34px}
.editor-feature-grid article{padding:23px;border:1px solid #2f455f;border-radius:12px;background:#111e30}
.feature-tag{color:#8ed0ed;font-size:9px;font-weight:650;letter-spacing:1.5px}
.editor-feature-grid h3,.zoom-notes h3{margin-top:12px;font-size:23px;font-weight:600;line-height:1.35;letter-spacing:-.4px}
.editor-feature-grid p{margin-top:11px;color:var(--muted);font-size:13px;line-height:1.85}
.zoom-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px;padding:27px 29px;border-block:1px solid #2f455f;background:linear-gradient(100deg,#16304b55,#111b2d33)}
.detail-kicker{color:#8eb6d8;font-size:9px;font-weight:650;letter-spacing:1.1px;line-height:1.7}
.zoom-notes h3{margin-top:7px;font-size:21px}
.zoom-notes article>p:last-child{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.85}
.editor-format-note{margin-top:17px;color:#92a8c0;font-size:11px;line-height:1.8}
.editor-section>.actions{margin-top:12px}
.editor-section>.actions .text-link{font-size:12px}
.handoff-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:34px}
.handoff-card{position:relative;min-width:0;padding:30px;border:1px solid #385774;border-radius:14px;overflow:hidden}
.handoff-pdf{background:radial-gradient(ellipse at 100% 0,#2a476b66,transparent 70%),#121f32}
.handoff-mail{background:radial-gradient(ellipse at 100% 0,#1e586466,transparent 70%),#101f2d}
.handoff-symbol{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:9px;border:1px solid #537491;border-radius:12px;color:#b2dbff;font-size:16px;font-weight:650;line-height:1}
.handoff-mail .handoff-symbol{border-color:#438d91;color:#b6ece7;font-size:25px}
.handoff-card h3{margin-top:20px;font-size:25px;font-weight:600;line-height:1.35;letter-spacing:-.6px}
.handoff-card>p{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.85}
.handoff-card>.handoff-note{font-size:11px;color:#91abc4}
.handoff-card>.text-link{margin-top:19px;font-size:12px}
.mail-capture{margin-top:28px}
.mail-capture .screenshot-link img{width:100%;height:auto}
@media(max-width:1050px){.editor-heading{gap:40px}.editor-layout{grid-template-columns:minmax(0,1fr) 220px;gap:22px}.editor-feature-grid{gap:18px}.editor-feature-grid article{padding:19px}.editor-heading>div:last-child>p:first-child{font-size:15px}.handoff-card{padding:25px}}
@media(max-width:740px){
  .editor-section,.handoff-section{margin-top:65px}
  .editor-heading{grid-template-columns:minmax(0,1fr);gap:22px}
  .editor-heading>div:last-child>p:first-child{font-size:15px;line-height:1.85}
  .editor-promise{font-size:12px}
  .editor-layout{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
  .editor-desktop-shot{display:none}
  .editor-phone-shot{max-width:280px}
  .editor-feature-grid{grid-template-columns:minmax(0,1fr);gap:15px;margin-top:28px}
  .editor-feature-grid article{padding:21px}
  .editor-feature-grid h3{font-size:23px;margin-top:9px}
  .editor-feature-grid p{font-size:14px}
  .zoom-notes{grid-template-columns:minmax(0,1fr);gap:25px;padding:23px 20px;margin-top:25px}
  .zoom-notes h3{font-size:22px}
  .zoom-notes article>p:last-child{font-size:13px}
  .detail-kicker{font-size:9px;letter-spacing:.8px}
  .editor-format-note{font-size:10px}
  .editor-section>.actions{gap:8px 22px}
  .editor-section>.actions .text-link{font-size:12px}
  .handoff-grid{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:28px}
  .handoff-card{padding:25px 23px}
  .handoff-card h3{font-size:25px}
  .handoff-card>p{font-size:14px}
  .mail-capture{margin-top:22px}
}
