/* Paperota website, cover page only. Tokens and shared components are in p3.css. Old Safari safe: no :has, no dvh, no color-mix. */

/* ---------- hero stage: one picture in front, two calmer behind, the rest come in as they turn ---------- */
.p3-stage{--u:2.6vw;position:relative;height:calc(var(--u)*49.5 + 48px);margin-inline:calc(var(--gutter)*-1);overflow:hidden}
.p3-tile{position:absolute;left:50%;top:10px;width:calc(var(--u)*22);margin-left:calc(var(--u)*-11);z-index:var(--z);opacity:var(--op);
  transform:translate3d(calc(var(--x)*var(--u)),calc(var(--y)*var(--u)),0) scale(var(--sc));transform-origin:50% 0;transition:transform 1s var(--ease),opacity .7s ease,visibility 0s}
.s0{--x:0;--y:0;--sc:1;--z:5;--op:1}
.s1{--x:-14;--y:5.6;--sc:.78;--z:3;--op:.94}
.s2{--x:14;--y:5.6;--sc:.78;--z:3;--op:.94}
.s3{--x:-24;--y:9.5;--sc:.6;--z:1;--op:0;visibility:hidden;pointer-events:none;transition:transform 1s var(--ease),opacity .5s ease,visibility 0s .5s}
.s4{--x:24;--y:9.5;--sc:.6;--z:1;--op:0;visibility:hidden;pointer-events:none;transition:transform 1s var(--ease),opacity .5s ease,visibility 0s .5s}
.p3-tile--more{display:none}
.p3-tile__par{display:block;will-change:transform}
.p3-tile__fly{display:block;animation:p3fly1 9s ease-in-out infinite;will-change:transform}
.p3-tile:nth-child(2) .p3-tile__fly{animation-name:p3fly2;animation-duration:11s;animation-delay:-3s}
.p3-tile:nth-child(3) .p3-tile__fly{animation-name:p3fly3;animation-duration:10s;animation-delay:-6s}
.p3-tile:nth-child(4) .p3-tile__fly{animation-name:p3fly2;animation-duration:12s;animation-delay:-8s}
.p3-tile:nth-child(5) .p3-tile__fly{animation-name:p3fly3;animation-duration:13s;animation-delay:-2s}
@keyframes p3fly1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@keyframes p3fly2{0%,100%{transform:translate3d(0,-4px,0)}50%{transform:translate3d(0,7px,0)}}
@keyframes p3fly3{0%,100%{transform:translate3d(0,5px,0)}50%{transform:translate3d(0,-6px,0)}}
.p3-tile__btn{display:block;width:100%;padding:0;border:0;background:var(--white);border-radius:var(--r-shot);overflow:hidden;cursor:pointer;box-shadow:var(--sh-3);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--ease)}
.p3-tile__btn img{width:100%}
.p3-tile__btn:focus{outline-offset:-4px}
.s0 .p3-tile__btn{cursor:zoom-in}
@media (hover:hover){.p3-tile:not(.s0):hover{--op:1}.p3-tile:not(.s0) .p3-tile__btn:hover{transform:translateY(-6px) scale(1.02)}}
.js .p3-stage.is-enter .p3-tile__btn{animation:p3rise 1.1s var(--ease) backwards}
.js .p3-stage.is-enter .s1 .p3-tile__btn,.js .p3-stage.is-enter .s2 .p3-tile__btn{animation-delay:.1s}
@keyframes p3rise{from{opacity:0;transform:translateY(48px) scale(.97)}to{opacity:1;transform:none}}
.p3-stage.is-paused .p3-tile__fly,.p3-stage.is-off .p3-tile__fly,.p3-stage.is-paused .p3-floaty,.p3-stage.is-off .p3-floaty{animation-play-state:paused}

/* one label at a time, the one that belongs to the picture in front */
.p3-over{position:absolute;z-index:7;inset-inline-start:var(--s3);top:calc(var(--u)*33);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
[data-front=home] .p3-over--home,[data-front=docs] .p3-over--docs,[data-front=co_home] .p3-over--co_home,[data-front=year] .p3-over--year,[data-front=co_emps] .p3-over--co_emps{opacity:1;visibility:visible;transition:opacity .6s ease .35s,visibility 0s}
.p3-floaty{display:block;animation:p3fly2 10s ease-in-out infinite;will-change:transform}
.p3-chip{display:block;padding:10px 14px;background:var(--white);border-radius:var(--r-btn);box-shadow:var(--sh-2);font-size:var(--t-s);line-height:1.35;white-space:nowrap}
html[lang=ar] .p3-chip{line-height:1.55}
.p3-chip b{display:block;color:var(--ink);font-weight:700}
.p3-chip .st{display:flex;align-items:center;gap:6px;font-size:var(--t-cap);font-weight:500}
.p3-chip .st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st--bad{color:var(--bad)}.st--soon{color:var(--soon)}.st--ok{color:var(--ok)}
.p3-stage__note{position:absolute;z-index:8;left:0;right:0;bottom:12px;text-align:center;color:var(--muted);font-size:var(--t-xs);line-height:1.6}
.p3-stage__pause{position:absolute;z-index:8;top:12px;inset-inline-end:12px;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--white);box-shadow:var(--sh-1);color:var(--navy);cursor:pointer}
.p3-stage__pause:hover{background:var(--pale-2)}
.p3-stage__pause .i{width:18px;height:18px}
.p3-stage__pause .pl{display:none}
.p3-stage.is-paused .p3-stage__pause .pa{display:none}
.p3-stage.is-paused .p3-stage__pause .pl{display:block}
@media (min-width:760px){
  .p3-stage{--u:1.6vw}
  .p3-tile--more{display:block}
  .p3-over{top:auto;bottom:calc(var(--u)*14);inset-inline-start:auto;left:var(--gutter)}
  .p3-over--docs,.p3-over--co_home{left:auto;right:var(--gutter)}
}
@media (max-width:759px){.p3-over{display:none}}
/* two columns from 960 px: here the width decides the size too, so the side pictures stay in their column */
@media (min-width:960px){
  .p3-stage{--u:min(1.02vw,calc((100vh - 145px)/49.5));margin-inline:0;overflow:visible}
  .p3-over{left:calc(var(--u)*-1)}
  .p3-over--docs,.p3-over--co_home{left:auto;right:calc(var(--u)*-1)}
}
@media (min-width:1100px){.p3-stage{--u:clamp(11px,calc((100vh - 145px)/49.5),16px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .p3-tile,.p3-tile__btn,.btn,.p3-link .i,.p3-over{transition:none!important}
  .p3-tile__fly,.p3-floaty,.p3-cam__line,.p3-cam__found,.js .p3-stage.is-enter .p3-tile__btn{animation:none!important}
  .p3-stage__pause{display:none}
  .p3-tile__par,.p3-tile__fly,.p3-floaty{will-change:auto}
}


/* ---------- the three words ---------- */
.p3-ota{background:var(--navy);color:var(--on-navy-2);padding-block:clamp(48px,6vw,88px)}
.p3-ota__list{display:grid;gap:var(--s6)}
.p3-ota__w{display:block;font-family:"Sora",var(--sans);font-weight:700;font-size:clamp(34px,4.2vw,60px);line-height:1.1;letter-spacing:-.025em;color:var(--on-navy)}
.p3-ota__w b{color:var(--accent);font-weight:700}
html[lang=ar] .p3-ota__w{font-family:var(--sans);line-height:1.3;letter-spacing:0}
.p3-ota__en{display:block;margin-block-start:var(--s1);font-family:"Sora",var(--sans);font-weight:600;font-size:var(--t-s);color:var(--on-navy-2)}
.p3-ota__en b{color:var(--accent);font-weight:600}
.p3-ota__t{display:block;margin-block-start:var(--s1);max-width:22em}
@media (min-width:760px){
  .p3-ota__list{grid-template-columns:repeat(3,1fr);gap:0}
  .p3-ota__list li{padding-inline:clamp(20px,3vw,48px);border-inline-start:1px solid var(--line-navy)}
  .p3-ota__list li:first-child{padding-inline-start:0;border-inline-start:0}
  .p3-ota__list li:last-child{padding-inline-end:0}
}


html[lang=ar] .p3-ota__en{text-align:right}

/* ---------- which one are you: right under the buttons on the first screen ---------- */
.p3-who{margin-block-start:var(--s2)}
.p3-who__q{font-size:var(--t-s);color:var(--muted)}
.p3-who__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-block-start:var(--s1)}
.p3-who__a{display:block;min-height:44px;padding:var(--s2) var(--s3);border:1.5px solid var(--line-2);border-radius:var(--r-btn-s);color:var(--text);text-decoration:none;font-size:var(--t-xs);line-height:1.4;transition:border-color .15s,background-color .15s}
html[lang=ar] .p3-who__a{line-height:1.55}
.p3-who__a b{display:block;color:var(--ink);font-size:var(--t-15);font-weight:700}
.p3-who__a:hover{border-color:var(--navy);background:var(--pale)}
/* the two links do not fit one line at the narrowest phones: one under the other, no dot */
@media (max-width:359px){html[lang=en] .p3-who__row{display:block}html[lang=en] .p3-who__a{display:flex}html[lang=en] .p3-who__a+.p3-who__a::before{content:none}}
/* phones and small tablets: one quiet line with two links, so the two main buttons stay the only buttons */
@media (max-width:959px){
  .p3-who{margin-block-start:0}
  .p3-who__q,.p3-who__a>.lang-ar,.p3-who__a>.lang-en{display:none!important}
  .p3-who__row{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);margin:0}
  .p3-who__a{display:inline-flex;align-items:center;padding:0;border:0;border-radius:0}
  .p3-who__a:hover{background:none}
  .p3-who__a+.p3-who__a::before{content:"·";margin-inline-end:var(--s2);color:var(--muted);text-decoration:none}
  .p3-who__a b{font-size:var(--t-15);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.28em}
  html[lang=ar] .p3-who__a b{font-weight:700}
  /* the free line and the trust line become one */
  .p3-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2)}
  .p3-hero__meta .p3-trial{margin:0;font-size:var(--t-s)}
  .p3-hero__meta .p3-safe__more{display:none}
  .p3-hero__meta .p3-safe .i{display:none}
  .p3-hero__meta .p3-trial+.p3-safe::before{content:"·";color:var(--muted)}
  .p3-hero__meta .p3-safe{gap:var(--s2)}
  .p3-hero__meta .p3-safe>span{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.28em}
  .p3-hero__lead{font-size:var(--t-16)}
}
@media (min-width:960px){.p3-who{margin-block-start:var(--s4)}.p3-who__a{padding:var(--s3) var(--s4);font-size:var(--t-s)}.p3-who__a b{font-size:var(--t-b)}}

/* ---------- what else it does: three named groups, one strong line each, the rest short ---------- */
.p3-groups{display:grid;gap:var(--s7)}
.p3-group{padding-block-start:var(--s4);border-top:2px solid var(--navy)}
.p3-group h3{font-size:var(--t-h3);line-height:1.3}
.p3-group__lead{margin-block-start:var(--s3)}
.p3-group__lead b{display:block;color:var(--ink);font-size:var(--t-l);font-weight:700;line-height:1.4}
.p3-group ul{margin-block-start:var(--s4)}
.p3-group li{padding-block:var(--s3);border-top:1px solid var(--line);font-size:var(--t-15);line-height:1.55}
html[lang=ar] .p3-group li{line-height:1.75}
.p3-group li b{color:var(--ink);font-weight:700}
.p3-group .p3-link{font-size:var(--t-15)}
@media (min-width:900px){.p3-groups{grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,64px)}}