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

/* ---------- first screen ---------- */
.fm-hero{position:relative;z-index:1;padding-block:var(--s5) var(--s6)}
.fm-hero__in{display:grid;gap:var(--s6)}
.fm-h1{font-size:clamp(36px,4.5vw,64px);line-height:1.1;letter-spacing:-.028em}
html[lang=ar] .fm-h1{line-height:1.28;letter-spacing:0}
.fm-h1 .ln{display:block}
.fm-hero__tx .p3-hero__lead{margin-block-start:var(--s4)}
.fm-solo{margin-block-start:var(--s4);padding-block-start:var(--s3);border-top:1px solid var(--line);max-width:32em;font-size:var(--t-15);color:var(--text)}
.fm-hero__fig{position:relative;margin-block-end:calc(-72px - var(--s6))}
.fm-sample{margin-block-end:var(--s3);font-size:var(--t-xs);color:var(--muted)}

/* the folder: tabs on top of one sheet */
.fm-tabs{display:flex;gap:2px;padding-inline:var(--s3)}
.fm-tab{flex:0 1 auto;min-width:0;min-height:48px;padding:6px clamp(12px,3vw,22px) 10px;margin-block-end:-4px;border:0;border-radius:var(--r-btn) var(--r-btn) 0 0;background:var(--pale-2);color:var(--text);font:500 var(--t-15)/1.2 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s,color .18s}
.fm-tab:hover{background:var(--pale-3);color:var(--ink)}
.fm-tab.on,.fm-tab.on:hover{position:relative;z-index:2;background:var(--white);color:var(--ink);font-weight:700;box-shadow:0 -6px 14px rgba(15,45,82,.07)}
.fm-tab:focus{outline-offset:-3px}
.fm-sheet{position:relative;z-index:1;display:grid;background:var(--white);border-radius:var(--r-l);box-shadow:var(--sh-3)}
.fm-panel{display:flex;flex-direction:column;padding:var(--s4) var(--s4) 0}
.nojs .fm-panel+.fm-panel{border-top:1px solid var(--line)}
.js .fm-panel{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s .28s}
.js .fm-panel.on{visibility:visible;opacity:1;transform:none;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s}
.fm-who{display:flex;align-items:center;gap:var(--s3);padding-block-end:var(--s3)}
.fm-av{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:var(--r-btn);background:var(--navy);color:var(--white);font-weight:700}
.fm-who__n b{display:block;color:var(--ink);font-size:var(--t-b);font-weight:700;line-height:1.3}
.fm-who__n small{display:block;color:var(--muted);font-size:var(--t-xs);line-height:1.4}
.fm-paper,.fm-left,.fm-next{font-variant-numeric:tabular-nums}
.fm-paper{display:flex;align-items:center;gap:var(--s3);min-height:68px;padding-block:var(--s2);border-top:1px solid var(--line)}
.fm-paper .ic{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--r-btn-s);background:var(--pale);color:var(--navy)}
.fm-paper .ic .i{width:21px;height:21px}
.fm-paper__t{flex:1;min-width:0}
.fm-paper__t b{display:block;color:var(--ink);font-weight:500;line-height:1.35}
html[lang=ar] .fm-paper__t b{font-weight:700}
.fm-paper__t small{display:block;color:var(--muted);font-size:var(--t-xs);line-height:1.45}
.fm-left{flex:none;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:500;line-height:1.5;white-space:nowrap}
.fm-left.st--soon{background:var(--soon-bg)}
.fm-left.st--ok{background:var(--ok-bg)}
.fm-left.st--bad{background:var(--bad-bg)}
.fm-more{min-height:44px;padding-block:var(--s3);border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-s);line-height:1.5}
.fm-next{display:flex;align-items:center;gap:var(--s2);margin-inline:calc(var(--s4)*-1);padding:var(--s3) var(--s4);border-radius:0 0 var(--r-l) var(--r-l);background:var(--pale);color:var(--ink);font-size:var(--t-s);line-height:1.45}
.fm-next{margin-block-start:auto}
.fm-next .i{width:20px;height:20px;color:var(--navy)}
@media (min-width:960px){
  .fm-hero{padding-block-start:clamp(24px,3.4vw,56px)}
  .fm-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(32px,4vw,64px);align-items:end}
  html[lang=en] .fm-h1{font-size:clamp(44px,4.4vw,64px)}
  .fm-h1{font-size:clamp(46px,5vw,64px)}
}
@media (prefers-reduced-motion:reduce){.fm-tab,.js .fm-panel,.js .fm-panel.on{transition:none;transform:none}}

/* ---------- what you keep: a run of words ---------- */
.fm-keep{background:var(--pale);padding-block:calc(72px + clamp(48px,6vw,88px)) clamp(48px,6vw,88px)}
.fm-words{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block-start:var(--s5);max-width:1040px;color:var(--ink)}
.fm-words li{padding:6px 14px;background:var(--white);border-radius:var(--r-pill);font-size:var(--t-b);font-weight:500;line-height:1.5;white-space:nowrap}
.fm-keep__more{margin-block-start:var(--s5);max-width:36em}

/* ---------- the reminder board ---------- */
.fm-board{padding:clamp(24px,5vw,72px);background:var(--navy);border-radius:var(--r-l);color:var(--on-navy-2)}
.fm-board h2{color:var(--on-navy)}
.fm-board__head{max-width:760px}
.fm-tl{margin-block-start:clamp(32px,4vw,56px)}
.fm-tl__row{display:grid;gap:var(--s2);padding-block:var(--s4);border-top:1px solid var(--line-navy)}
.fm-tl__name b{display:block;color:var(--on-navy);font-weight:700;line-height:1.4}
.fm-tl__name span{display:block;font-size:var(--t-15);line-height:1.5}
.fm-tl__track{position:relative;height:22px;margin-block:var(--s1)}
.fm-tl__track::before{content:"";position:absolute;inset-inline:0;top:10px;height:2px;background:var(--line-navy)}
.fm-tl__track i{position:absolute;top:6px;width:10px;height:10px;margin-inline-start:-5px;border-radius:50%;background:var(--accent)}
.fm-tl__track .d180{inset-inline-start:0;margin-inline-start:0}
.fm-tl__track .d90{inset-inline-start:50%}
.fm-tl__track .d60{inset-inline-start:66.67%}
.fm-tl__track .d30{inset-inline-start:83.33%}
.fm-tl__track .d14{inset-inline-start:92.22%}
.fm-tl__track .d7{inset-inline-start:96.11%}
.fm-tl__end{position:absolute;inset-inline-end:0;top:2px;width:2px;height:18px;background:var(--on-navy)}
.fm-tl__axis{position:relative;height:24px;margin-block-start:var(--s2);font-size:var(--t-cap);line-height:1.6;white-space:nowrap}
.fm-tl__axis>span{position:absolute;top:0}
.fm-tl__axis .a180{inset-inline-start:0}
.fm-tl__axis .a90{inset-inline-start:50%;transform:translateX(-50%)}
html[dir=rtl] .fm-tl__axis .a90{transform:translateX(50%)}
.fm-tl__axis .a30{inset-inline-start:83.33%;transform:translateX(-100%)}
html[dir=rtl] .fm-tl__axis .a30{transform:translateX(100%)}
.fm-tl__axis .a0{inset-inline-end:0;color:var(--on-navy);font-weight:500}
.fm-via{display:grid;gap:var(--s2) var(--s6);margin-block-start:var(--s6)}
.fm-via li{display:flex;align-items:center;gap:var(--s3);min-height:32px;color:var(--on-navy);font-weight:500}
.fm-via .i{width:22px;height:22px;color:var(--on-navy-2)}
@media (min-width:760px){
  .fm-tl__row{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s6);align-items:center}
  .fm-tl__axis{margin-inline-start:calc((100% - var(--s6))*4/12 + var(--s6))}
  .fm-via{display:flex;flex-wrap:wrap}
}

/* ---------- ready when asked: the question, then the answer ---------- */
.fm-asked{display:grid;gap:var(--s7)}
.fm-moms{margin-block-start:clamp(24px,3vw,40px)}
.fm-mom{padding-block:var(--s5);border-top:1px solid var(--line-2)}
.fm-mom:last-child{padding-block-end:0}
.fm-mom__q{color:var(--ink);font-family:var(--disp);font-weight:700;font-size:var(--t-h3);line-height:1.35;letter-spacing:-.01em}
html[lang=ar] .fm-mom__q{line-height:1.55;letter-spacing:0}
.fm-mom__a{margin-block-start:var(--s1);max-width:34em}
.fm-asked__fig{width:min(70%,300px);margin-inline:auto}
@media (min-width:760px){
  .fm-mom{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6);align-items:baseline}
  .fm-mom__a{margin-block-start:0}
}
@media (min-width:1100px){
  .fm-asked{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s8);align-items:start}
  .fm-asked__fig{position:sticky;top:calc(var(--hdr) + 24px);width:auto}
}

/* ---------- adding a paper ---------- */
.fm-easy{display:grid;gap:var(--s4);margin-block-start:var(--s5);counter-reset:e}
.fm-easy li{position:relative;padding-inline-start:44px;counter-increment:e;max-width:32em}
.fm-easy li::before{content:counter(e);position:absolute;inset-inline-start:0;top:2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--pale-2);color:var(--ink);font-size:var(--t-15);font-weight:700;line-height:1}
.fm-easy b{color:var(--ink);font-weight:700}

/* ---------- together ---------- */
.fm-tog__fig{width:min(78%,360px);margin-inline:auto}
@media (max-width:959px){.fm-tog__fig{order:2}}

/* ---------- trust: a heading, then three plain facts ---------- */
.fm-safe__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s6)}
.fm-safe__list{display:grid;gap:var(--s5);margin-block-start:var(--s6)}
.fm-safe__list li{padding-block-start:var(--s4);border-top:1px solid var(--line-2)}
.fm-safe__list .i{color:var(--navy)}
.fm-safe__list h3{margin-block-start:var(--s2);font-size:var(--t-b);font-family:var(--sans);line-height:1.4}
.fm-safe__list p{margin-block-start:var(--s1);font-size:var(--t-15);line-height:1.55}
html[lang=ar] .fm-safe__list p{line-height:1.75}
@media (min-width:760px){.fm-safe__list{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}

/* ---------- final call with the price beside the button ---------- */
.fm-final{background:var(--navy);color:var(--on-navy-2);padding-block:clamp(64px,8vw,120px)}
.fm-final__in{display:grid;gap:var(--s7);align-items:center}
.fm-final h2{color:var(--on-navy);font-size:clamp(34px,4.2vw,60px);line-height:1.12;letter-spacing:-.022em}
html[lang=ar] .fm-final h2{line-height:1.3;letter-spacing:0}
.fm-final__sub{margin-block-start:var(--s3);font-size:var(--t-l);max-width:30em}
.fm-final .p3-trial{color:var(--on-navy-2)}
.fm-final .p3-link{color:var(--white)}
.fm-final .p3-link span{text-decoration-color:var(--line-navy)}
.fm-plan{padding:clamp(24px,3vw,40px);background:var(--white);border-radius:var(--r-l);color:var(--text)}
.fm-plan h3{font-family:var(--sans);font-size:var(--t-15);font-weight:500;color:var(--muted);line-height:1.4}
.fm-plan__big{margin-block-start:var(--s2);color:var(--ink);font-size:var(--t-b);line-height:1.3}
.fm-plan__big b{font-family:var(--disp);font-size:clamp(30px,3.4vw,42px);font-weight:700;letter-spacing:-.02em}
html[lang=ar] .fm-plan__big b{letter-spacing:0}
.fm-plan .p3-price__loc{margin-block-start:var(--s1)}
.fm-plan .p3-price__loc:empty{display:none}
.fm-plan__yr{margin-block-start:var(--s2)}
.fm-plan .p3-ticks{padding-block-start:var(--s4);border-top:1px solid var(--line);font-size:var(--t-15)}
.fm-plan .p3-link{color:var(--navy);margin-block-start:var(--s3)}
.fm-plan .p3-link span{text-decoration-color:var(--line-2)}
.fm-plan a:focus{outline-color:var(--navy)}
@media (min-width:960px){.fm-final__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8)}}