/* pricing.html. Two plans side by side, because here comparing is the job; everything else is plain words on the page. */
.pr-intro{padding-block-end:var(--s5)}
.pr-intro__in{display:grid;gap:var(--s5)}
.pr-cur{display:grid;gap:var(--s2);max-width:26rem}
/* the picker and the longer note arrive with the server's answer: their room is kept, so the plans do not jump */
.js form#curf[hidden]{display:grid!important;visibility:hidden}
.js form#curf[hidden] select{min-height:48px}
@media (max-width:999px){.js #cur-note{min-height:3.5em}}
.pr-cur__f{display:grid;gap:var(--s1)}
.pr-note{font-size:var(--t-s);line-height:1.55;color:var(--muted)}
html[lang=ar] .pr-note{line-height:1.75}
.pr-note:empty{display:none}
@media (min-width:1000px){.pr-intro__in{grid-template-columns:minmax(0,1fr) 22rem;gap:var(--s8);align-items:end}}

.pr-plans{padding-block-end:clamp(48px,6vw,88px)}
.p3-plan{gap:0;padding:clamp(20px,2.6vw,36px)}
.pr-name{font-size:clamp(24px,2.4vw,30px);line-height:1.25;letter-spacing:-.015em}
html[lang=ar] .pr-name{letter-spacing:0;line-height:1.4}
.pr-for{margin-block-start:var(--s1);font-size:var(--t-16);line-height:1.5}
.p3-plan__price{margin-block-start:var(--s5);font-variant-numeric:tabular-nums}
.pr-loc{display:block;font-size:var(--t-15);line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.pr-loc:empty{display:none}
.pr-year{margin-block-start:var(--s3);font-size:var(--t-b);line-height:1.5;font-variant-numeric:tabular-nums}
.pr-year b{color:var(--ink);font-weight:700}
.pr-save{margin-block-start:var(--s1);font-size:var(--t-15);line-height:1.5;color:var(--ok);font-weight:500}
.pr-ticks{margin-block-start:var(--s5);padding-block-start:var(--s5);border-top:1px solid var(--line);font-size:var(--t-16);line-height:1.5}
html[lang=ar] .pr-ticks{line-height:1.7}
/* more than the plan's employees: under both cards, so the cards stay balanced */
.pr-pack{display:grid;gap:var(--s2) var(--s6);margin-block-start:var(--s5);padding-block-start:var(--s4);border-top:1px solid var(--line-2);font-size:var(--t-15);line-height:1.6}
@media (min-width:760px){.pr-pack{grid-template-columns:minmax(0,1fr) auto;align-items:center}.pr-pack__h,.pr-pack p{grid-column:1}.pr-pack .p3-link{grid-column:2;grid-row:1 / span 2}}
.pr-pack__h{font-family:var(--sans);font-size:var(--t-16);line-height:1.5;letter-spacing:0}
.pr-pack p{margin-block-start:var(--s1)}
.pr-pack b{color:var(--ink);font-weight:700}
.pr-pack a[href^="mailto"]{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.pr-go{margin-block-start:auto;padding-block-start:var(--s5)}
.pr-go .btn{width:100%}

.pr-trial{display:grid;gap:var(--s2);margin-block-start:var(--s5);padding:clamp(20px,2.6vw,36px);background:var(--pale);border-radius:var(--r)}
.pr-trial__h{font-size:clamp(20px,2vw,24px);line-height:1.35;letter-spacing:-.01em}
html[lang=ar] .pr-trial__h{letter-spacing:0;line-height:1.5}
.pr-trial__l{display:grid;gap:var(--s3);margin-block-start:var(--s3)}
.pr-trial__l li{font-size:var(--t-15);line-height:1.55;padding-block-start:var(--s3);border-top:1px solid var(--line-2)}
.pr-trial__l b{display:block;color:var(--ink);font-weight:700}
@media (min-width:760px){.pr-trial__l{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}

.pr-calc__n{margin-block-start:var(--s3);font-size:var(--t-16);max-width:34em}
.pr-calc__c{align-self:start}
.pr-calc__c .p3-form{max-width:none}
.pr-calc__c .p3-seg{justify-self:start;max-width:100%}
.pr-emp{max-width:10rem;font-size:var(--t-l);font-weight:700;font-variant-numeric:tabular-nums}
html[dir=rtl] .pr-emp{text-align:right}
.pr-out{padding:var(--s4);background:var(--pale);border-radius:var(--r-btn-s);color:var(--ink);font-size:var(--t-l);line-height:1.45;font-weight:700;font-variant-numeric:tabular-nums}
html[lang=ar] .pr-out{line-height:1.65}

.pr-ai{display:grid;gap:var(--s6)}
.pr-ai__t{display:grid;gap:var(--s3);margin-block-start:var(--s4);max-width:38em}
@media (min-width:1000px){.pr-ai{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:end}}

.pr-cmp{background:var(--white);border-color:var(--line-2)}
.pr-cmp th[scope=row]{width:26%}
.pr-ai__tb td:not([colspan]){white-space:nowrap}
.pr-more{margin-block-start:var(--s4);font-size:var(--t-15)}
.pr-more a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:759px){
  .pr-cmp tr{padding-block:var(--s3)}
  .pr-cmp tbody th{font-weight:700;width:auto}
  .pr-cmp td{display:grid!important;grid-template-columns:5em minmax(0,1fr);gap:var(--s2);align-items:start}
  .pr-cmp td::before{color:var(--muted);font-size:var(--t-s)}
  html[lang=ar] .pr-cmp td:nth-of-type(1)::before{content:"العائلة"}
  html[lang=ar] .pr-cmp td:nth-of-type(2)::before{content:"الشركة"}
  html[lang=en] .pr-cmp td:nth-of-type(1)::before{content:"Family"}
  html[lang=en] .pr-cmp td:nth-of-type(2)::before{content:"Company"}
}

.pr-qs{display:grid;gap:var(--s5)}
.pr-terms{font-size:var(--t-15)}
.pr-terms a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1000px){.pr-qs{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s8);align-items:start}.pr-qs .pr-note,.pr-qs .pr-terms{grid-column:2}.pr-qs .pr-terms{margin-block-start:calc(var(--s7)*-1)}.pr-qs .pr-note{margin-block-start:calc(var(--s8)*-1)}}

/* the closing buttons. Not .p3-cta: p3.js takes the first .p3-cta in the page for the hero's button, and would hold back the header's start button */
.pg-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-block-start:var(--s5)}
@media (max-width:479px){.pg-cta .btn{flex:1 1 40%;padding-inline:var(--s3);min-height:48px}}

.pr-low{margin-block-start:var(--s3);max-width:44rem}

/* the Arabic font arrives late on a slow phone and the title gains a line: its room is kept */
@media (max-width:479px){html[lang=ar] main .p3-intro__h{min-height:2.6em}}