/* photos in the story */
.pains-photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/8;background:var(--soft)}
.pains-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.pains .pain-list{position:relative;margin:-96px 28px 0}
.pains .pain-list a{background:#fff;box-shadow:var(--shadow)}

.was{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/7;margin-bottom:44px;background:var(--soft)}
.was img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.was::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,28,.72),rgba(10,15,28,.15) 60%,transparent)}
.was figcaption{position:absolute;z-index:1;left:36px;bottom:32px;max-width:30ch;color:#fff;font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);line-height:1.4}

/* final call with the desk photo */
.final{position:relative;overflow:hidden;color:#fff;border-top:0;padding-left:0;padding-right:0}
.final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.final::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,15,28,.78),rgba(10,15,28,.55) 55%,rgba(10,15,28,.82))}
.final-in{position:relative;z-index:2}
.final .lede{color:rgba(255,255,255,.78)}

/* folders */
.fold-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.fold-copy h2{margin-bottom:20px}
.ticks{list-style:none;margin-top:28px;display:grid;gap:12px;max-width:44ch}
.ticks li{position:relative;padding-left:32px;font-size:17px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--blue-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.6 2.6L14 7.5' fill='none' stroke='%230057FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* iPhone 17 Pro shape, the app's home screen inside */
.iphone{justify-self:center;width:min(340px,100%);aspect-ratio:9/19.3;padding:11px;border-radius:56px;background:linear-gradient(145deg,#4A4D55,#1C1D21 40%,#2F3137);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 0 0 1px #0d0e10,0 50px 80px -40px rgba(10,15,28,.6),0 20px 40px -24px rgba(10,15,28,.4)}
.iph-screen{position:relative;height:100%;border-radius:46px;overflow:hidden;background:#F2F2F7;color:#000;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--sans);font-size:13px;line-height:1.25;letter-spacing:-.01em}
.iph-screen svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iph-screen svg .f{fill:currentColor;stroke:none}
.iph-status{position:absolute;z-index:3;left:0;right:0;top:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 34px;font-size:14px}
.iph-status svg{width:62px;height:12px;stroke:none}
.iph-status svg path[stroke]{stroke:currentColor}
.iph-island{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000}
.iph-views{position:absolute;inset:0;display:flex;width:200%;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.iph-views.pushed{transform:translateX(-50%)}
.iph-view{width:50%;height:100%;overflow:hidden;padding:48px 0 90px}
.iph-folder{background:#F2F2F7}
.iph-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 0;height:44px}
.iph-btns{display:flex;gap:8px}
.iph-glass{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.75);box-shadow:0 1px 6px rgba(0,0,0,.08),inset 0 0 0 .5px rgba(0,0,0,.06);color:#1C1C1E}
.iph-glass svg{width:19px;height:19px}
.iph-back{color:#0066CC}
.iph-back svg{stroke-width:2.4}
.iph-title{font-family:inherit;font-size:28px;font-weight:700;letter-spacing:-.02em;padding:2px 18px 8px}
.iph-count{padding:0 18px 10px;color:#6C6C70;font-size:13px;margin-top:-6px}
.iph-h{display:flex;justify-content:space-between;align-items:baseline;padding:8px 18px 8px}
.iph-h b{font-size:15px;font-weight:600}
.iph-h span{color:#0066CC;font-size:13px}
.iph-h .iph-plus{font-size:22px;line-height:1;font-weight:400}
.iph-recents{display:flex;gap:10px;padding:0 18px 6px;overflow:hidden}
.rtile{flex:none;width:62px}
.rtile i{display:flex;flex-direction:column;gap:4px;height:76px;border-radius:8px;padding:9px 7px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
.rtile em{display:block;height:2.5px;border-radius:2px;background:rgba(40,50,70,.22)}
.rtile em:nth-child(1){width:60%;background:rgba(40,50,70,.4)}
.rtile em:nth-child(3){width:80%}
.rtile b{display:block;font-size:10.5px;font-weight:500;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtile small{display:block;font-size:9.5px;color:#6C6C70}
.iph-folders{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;padding:0 14px}
.ftile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:2px 0;border-radius:12px;font-family:inherit}
.ftile:focus-visible{outline-offset:0}
.iph-screen .fsvg{stroke:none;width:76%;height:auto;overflow:visible;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.fsvg .fpapers{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.fsym{fill:none;stroke:currentColor;stroke-width:1.9}
.ftile:hover .fsvg{transform:scale(1.06)}
.ftile:hover .fpapers{transform:translateY(-5px)}
.ftile b{font-size:12px;font-weight:400;margin-top:3px;letter-spacing:-.01em}
.ftile small{font-size:10px;color:#6C6C70}
.iph-docs{list-style:none;margin:0 14px;background:#fff;border-radius:16px;overflow:hidden}
.iph-docs li{display:flex;gap:11px;align-items:center;padding:9px 12px;position:relative;animation:ppIn .35s backwards}
.iph-docs li:nth-child(2){animation-delay:.04s}.iph-docs li:nth-child(3){animation-delay:.08s}.iph-docs li:nth-child(4){animation-delay:.12s}.iph-docs li:nth-child(n+5){animation-delay:.16s}
.iph-docs li+li::before{content:"";position:absolute;left:60px;right:0;top:0;border-top:.5px solid rgba(60,60,67,.2)}
.iph-docs i{flex:none;width:36px;height:46px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);padding:7px 5px;display:flex;flex-direction:column;gap:4px;border-top:4px solid var(--c)}
.iph-docs em{display:block;height:2px;border-radius:2px;background:#D3D7DE}
.iph-docs em:nth-child(2){width:70%}
.iph-docs b{display:block;font-size:13.5px;font-weight:500}
.iph-docs small{font-size:11.5px;color:#6C6C70}
.iph-tabs{position:absolute;z-index:3;left:12px;right:12px;bottom:24px;height:58px;border-radius:30px;display:flex;justify-content:space-around;align-items:center;padding:0 6px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 6px 24px rgba(0,0,0,.1),inset 0 0 0 .5px rgba(0,0,0,.08)}
.iph-tabs span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5px;font-weight:500;color:#1C1C1E;padding:5px 10px;border-radius:22px}
.iph-tabs span.on{color:#0066CC;background:rgba(0,0,0,.05)}
.iph-tabs svg{width:22px;height:22px}
.iph-home-ind{position:absolute;z-index:3;left:50%;bottom:8px;transform:translateX(-50%);width:120px;height:4.5px;border-radius:3px;background:#000}

/* security */
.sec-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-bottom:88px}
.privacy .sec-copy h2{max-width:15ch;margin-bottom:22px}
.privacy .lede{color:rgba(255,255,255,.7);max-width:48ch}
.sec-zero{display:flex;gap:18px;align-items:center;margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
.sec-zero b{font-size:clamp(44px,5vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--mark);white-space:nowrap}
.sec-zero span{color:rgba(255,255,255,.72);font-size:16px;max-width:26ch}
.sec-demo{background:#141A2B;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.sec-air{display:flex;align-items:center;gap:12px;padding:12px 12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sec-air-ico{width:34px;height:34px;border-radius:9px;background:#FF9500;display:grid;place-items:center;color:#fff;flex:none}
.sec-air-ico svg{width:20px;height:20px}
.sec-air b{flex:1;font-weight:500;font-size:17px}
.sec-switch{width:52px;height:32px;border-radius:999px;background:rgba(120,120,128,.36);position:relative;transition:background .3s;flex:none}
.sec-switch i{position:absolute;left:2px;top:2px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sec-switch.on{background:#34C759}
.sec-switch.on i{transform:translateX(20px)}
.sec-list{list-style:none;padding:8px 4px 2px}
.sec-list li{display:flex;align-items:center;gap:12px;padding:12px 8px;font-size:16px;color:rgba(255,255,255,.66);transition:color .3s}
.sec-list li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);transition:.3s;background-position:center;background-repeat:no-repeat}
.sec-list li.ok{color:#fff}
.sec-list li.ok::before{border-color:transparent;background-color:#16A34A;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sec-list em{margin-left:auto;font-style:normal;font-size:13px;color:rgba(255,255,255,.45);opacity:0;transition:opacity .3s}
.sec-list li.ok em{opacity:1}
.priv dt{display:flex;flex-direction:column;gap:14px}
.priv dt svg{width:30px;height:30px;fill:none;stroke:var(--mark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:900px){
  .pains-photo{aspect-ratio:4/3;border-radius:var(--r-md)}
  .pains .pain-list{margin:-48px 12px 0}
  .was{aspect-ratio:4/3;margin-bottom:28px;border-radius:var(--r-md)}
  .was::after{background:linear-gradient(0deg,rgba(10,15,28,.8),transparent 70%)}
  .was figcaption{left:18px;right:18px;bottom:18px}
  .fold-grid,.sec-grid{grid-template-columns:1fr;gap:40px}
  .sec-grid{margin-bottom:56px}
}