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

/* first screen: the words beside the three stops */
.sc-top{display:grid;gap:var(--s6)}
.sc-jump{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-block-start:var(--s5)}
.sc-jump a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-15);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.28em}
.sc-jump a:hover{text-decoration-color:currentColor}
.sc-flow{display:grid;align-self:center}
.sc-flow li{position:relative;display:flex;gap:var(--s4);padding-block:var(--s3)}
.sc-flow li:not(:last-child)::before{content:"";position:absolute;top:60px;bottom:-8px;inset-inline-start:21px;width:2px;background:var(--line-2)}
.sc-flow .ic{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--r-btn-s);background:var(--white);color:var(--navy);box-shadow:var(--sh-1)}
.sc-flow .ic .i{width:22px;height:22px}
.sc-flow b{display:block;color:var(--ink);font-weight:700}
.sc-flow li>span:last-child{font-size:var(--t-15);line-height:1.55}
html[lang=ar] .sc-flow li>span:last-child{line-height:1.75}
@media (min-width:960px){.sc-top{grid-template-columns:7fr 5fr;gap:clamp(48px,6vw,96px)}}

/* what we keep: one sheet, two sides */
.sc-two{display:grid;border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden}
.sc-two>div{padding:clamp(20px,3vw,40px)}
.sc-two__a{background:var(--navy);color:var(--on-navy-2)}
.sc-two__a h3{color:var(--on-navy)}
.sc-two h3{display:flex;gap:var(--s3);align-items:flex-start;margin-block-end:var(--s4)}
.sc-two h3 .i{margin-block-start:.1em}
.sc-list li{padding-block:var(--s3);border-top:1px solid var(--line);font-size:var(--t-16);line-height:1.5}
html[lang=ar] .sc-list li{line-height:1.7}
.sc-two__a .sc-list li{border-top-color:var(--line-navy);color:var(--on-navy)}
.sc-note{margin-block-start:var(--s5);max-width:48em}
.sc-more{margin-block-start:var(--s2)}
@media (min-width:860px){.sc-two{grid-template-columns:1fr 1fr}}

/* share links: the locks beside what the receiver gets */
.sc-share{display:grid;gap:var(--s6);align-items:start}
.sc-lock{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;padding-block:var(--s3);border-top:1px solid var(--line);cursor:pointer}
.sc-lock b{display:block;color:var(--ink);font-weight:700}
.sc-lock small{display:block;font-size:var(--t-s);line-height:1.5;color:var(--muted)}
html[lang=ar] .sc-lock small{line-height:1.65}
.sc-sw{position:relative;flex:none;width:52px;height:32px}
.sc-sw input{position:absolute;top:-6px;left:-4px;width:60px;height:44px;margin:0;opacity:0;cursor:pointer}
.sc-sw i{display:block;width:100%;height:100%;border-radius:var(--r-pill);background:var(--muted);transition:background-color .18s;pointer-events:none}
.sc-sw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(15,45,82,.3);transition:inset-inline-start .18s var(--ease)}
.sc-sw input:checked+i{background:var(--navy)}
.sc-sw input:checked+i::after{inset-inline-start:23px}
.sc-sw input:focus+i{outline:3px solid var(--navy);outline-offset:3px}
.sc-sw input:focus:not(:focus-visible)+i{outline:none}
.sc-share__tail{padding-block-start:var(--s4);border-top:1px solid var(--line)}
.sc-recv{display:grid;gap:var(--s3);padding:clamp(16px,3vw,32px);background:var(--pale);border-radius:var(--r-l)}
.sc-recv__url{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--white);border-radius:var(--r-pill);font-size:var(--t-s);color:var(--text);justify-self:start}
.sc-recv__url .i{width:16px;height:16px;color:var(--navy)}
.sc-page{position:relative;display:block;padding:var(--s4);background:var(--white);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;transition:opacity .2s}
.sc-page__top{display:flex;align-items:center;justify-content:space-between;padding-block-end:var(--s2);border-bottom:1px solid var(--line);color:var(--ink);font-weight:700}
.sc-page__top small{font-size:var(--t-cap);font-weight:500;color:var(--muted)}
.sc-page__body{display:flex;gap:var(--s4);padding-block-start:var(--s3)}
.sc-page__pic{display:flex;align-items:center;justify-content:center;flex:none;width:72px;height:92px;border-radius:var(--r-s);background:var(--pale-2);color:var(--muted)}
.sc-page__lines{flex:1;display:grid;gap:var(--s3);align-content:center}
.sc-page__lines i{display:block;height:10px;border-radius:var(--r-pill);background:var(--pale-2)}
.sc-page__lines i:nth-child(2){width:78%}
.sc-page__lines i:nth-child(3){width:60%}
.sc-page__wm{position:absolute;top:50%;left:50%;width:130%;text-align:center;font-weight:700;font-size:var(--t-l);color:var(--soon);transform:translate(-50%,-50%) rotate(-14deg);opacity:0;transition:opacity .2s;pointer-events:none}
.sc-recv.v-wmon .sc-page__wm{opacity:1}
.sc-recv.v-pwon .sc-page{opacity:.28}
.sc-recv__pw{display:none;align-items:center;gap:var(--s2);color:var(--ink);font-weight:700;font-size:var(--t-15)}
.sc-recv__pw .i{width:20px;height:20px}
.sc-recv.v-pwon .sc-recv__pw{display:flex}
.sc-badges{display:flex;flex-wrap:wrap;gap:var(--s2)}
.sc-badges span{display:inline-flex;align-items:center;min-height:30px;padding:2px var(--s3);border-radius:var(--r-pill);background:var(--pale-2);color:var(--ink);font-size:var(--t-s)}
@media (min-width:960px){.sc-share{grid-template-columns:7fr 5fr;gap:var(--s8)}.sc-recv{position:sticky;top:calc(var(--hdr) + var(--s4))}}
@media (prefers-reduced-motion:reduce){.sc-sw i,.sc-sw i::after,.sc-page,.sc-page__wm{transition:none}}
@media (forced-colors:active){.sc-sw i{border:1px solid ButtonText}.sc-sw input:checked+i{background:Highlight}}

/* AI */
.sc-ai{align-items:start}
.sc-ai .p3-ticks{margin-block-start:0}

/* how long */
.sc-t{white-space:nowrap;color:var(--ink);font-weight:700}
.sc-table th[scope=row]{min-width:12em}
.sc-rights{display:grid;gap:var(--s5);margin-block-start:var(--s7)}
.sc-rights p{margin-block-start:var(--s2);max-width:42em}
@media (max-width:759px){.sc-t{white-space:normal}.sc-table th[scope=row]{padding-block-start:var(--s4)}.sc-table td:last-child{padding-block-end:var(--s4)}}
@media (min-width:860px){.sc-rights{grid-template-columns:2fr 1fr;gap:var(--s7)}}

/* what we don't do */
.sc-never__h{margin-block-end:var(--s6)}
.sc-never{display:grid;column-gap:var(--s7)}
.sc-never li{display:flex;gap:var(--s3);padding-block:var(--s4);border-top:1px solid var(--line-navy)}
.sc-never .i{width:22px;height:22px;margin-block-start:.2em;color:var(--on-navy-2)}
.sc-never b{display:block;color:var(--on-navy);font-weight:700;font-size:var(--t-b)}
.sc-never li>span{font-size:var(--t-15);line-height:1.6}
html[lang=ar] .sc-never li>span{line-height:1.75}
@media (min-width:760px){.sc-never{grid-template-columns:1fr 1fr}}

/* the end */
.sc-end__in{display:grid;gap:var(--s5);align-items:end}
@media (min-width:960px){.sc-end__in{grid-template-columns:1fr auto;gap:var(--s8)}}

/* the Arabic font arrives late on a slow phone and the intro gains a line: its room is kept, so nothing moves under the reader */
@media (max-width:479px){html[lang=ar] .sc-top .p3-lead{min-height:calc(3*1.75em)}}
@media (max-width:359px){html[lang=ar] .sc-top .p3-lead{min-height:calc(4*1.75em)}}
@media (max-width:413px){html[lang=ar] .sc-jump{min-height:88px;align-content:flex-start}}