/* Plans: /pricing (server/pricing-pages.mjs) and the account page's plan panel (server/account-page.mjs). Loaded after
   marketing.css on those pages. Follows docs/brand/identity.md: Readex Pro, start-aligned, panels with a 12 px radius and a
   1 px line and no shadow, no eyebrows or all-caps labels. Plans are a comparison table, never cards: the card shape is
   reserved for nights. Logical properties only, so the same rules serve English and Arabic. */

.pl{--pl-sticky:64px;font-family:var(--font-sans);color:var(--ink);padding-block-end:var(--s-7)}
.mk .pl :where(h1,h2,h3),.mk:lang(ar) .pl :where(h1,h2,h3){font-family:var(--font-sans)}
.mk:lang(ar) .pl{font-family:var(--font-sans)}
.pl :where(p,ul,ol,table){margin:0}
.pl a{color:var(--brand-ink)}
.pl .pl-icon{inline-size:18px;block-size:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pl-muted{color:var(--muted);font-size:var(--t-sm)}
.pl :is(td,th,.pl-price){font-variant-numeric:tabular-nums}

/* ---------- Hero: the homepage hero's type and voice ---------- */
.pl-hero{padding-block:clamp(44px,6vw,92px) clamp(20px,3vw,32px);text-align:start}
.pl-hero h1{margin:0;font-size:clamp(40px,5.8vw,84px);line-height:1;letter-spacing:-.03em;font-weight:700}
.pl-hero h1 span{display:block}
.pl-lead{max-inline-size:52ch;margin-block-start:clamp(20px,2.6vw,32px)!important;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2)}
.pl-proof{max-inline-size:62ch;margin-block-start:14px!important;font-size:var(--t-sm);line-height:1.6;color:var(--muted)}
:root:lang(ar) .pl-hero h1{line-height:1.3;letter-spacing:0}
:root:lang(ar) .pl-lead{line-height:1.85}

.pl-notice{max-inline-size:860px;padding:14px 18px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);line-height:1.6}
.pl-notice strong{color:var(--ink);font-weight:600}

/* ---------- Sections ---------- */
.pl-section{padding-block:clamp(28px,4.5vw,56px) 0;scroll-margin-block-start:calc(var(--pl-sticky) + 16px)}
.pl-head{max-inline-size:760px;margin-block-end:var(--s-5)}
.pl-head h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.pl-head p{margin-block-start:var(--s-2)!important;color:var(--muted);font-size:16px;line-height:1.6}
:root:lang(ar) .pl-head h2{line-height:1.4;letter-spacing:0}
.pl-free-note{max-inline-size:70ch;margin-block-start:var(--s-4)!important;color:var(--muted);font-size:var(--t-sm);line-height:1.6}

/* ---------- Monthly / yearly: two radio buttons and CSS, so it works without JavaScript ---------- */
.pl-plans{padding-block-start:clamp(28px,4vw,48px)}
/* Fixed, so focusing a radio from a label in a sticky corner never scrolls the page; the labels show its focus. */
.pl-radio{position:fixed;inset-block-start:0;inset-inline-start:0;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}
.pl-switch{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pl-switch-label{font-weight:500;color:var(--ink-2)}
.pl-switch-options{display:inline-flex;padding:3px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface)}
.pl-switch-options label{display:inline-flex;align-items:center;min-block-size:36px;padding-inline:18px;border-radius:var(--r-pill);font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
.pl-switch-options label:hover{color:var(--ink)}
.pl-switch-note{color:var(--muted);font-size:var(--t-sm)}
#pl-month:checked~* label[for="pl-month"],#pl-year:checked~* label[for="pl-year"]{background:var(--brand);color:var(--on-brand)}
#pl-month:focus-visible~* label[for="pl-month"],#pl-year:focus-visible~* label[for="pl-year"]{outline:2px solid var(--brand);outline-offset:2px}
/* Wide screens: the switch sits in each table's sticky corner, so it stays in reach while the rows scroll. */
.pl-switch-top{display:none}
.pl-corner .pl-switch{flex-direction:column;align-items:flex-start;gap:10px}
.pl-corner .pl-switch-note{font-size:var(--t-xs)}
#pl-month:checked~* .is-year,#pl-year:checked~* .is-month{display:none!important}

/* ---------- Plan table (wide screens): plan names, prices and buttons stay in view while the rows scroll ---------- */
.pl-table{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.pl-grid{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.pl-grid .pl-table{table-layout:fixed}
.pl-grid .pl-corner{inline-size:24%}
.pl-table :is(th,td){padding:14px 18px;text-align:start;vertical-align:top;border-block-end:1px solid var(--line);line-height:1.5;color:var(--ink-2);white-space:normal;font-size:15px;background:none}
.pl-table tbody tr:last-child :is(th,td){border-block-end:0}
.pl-table tbody th{font-weight:500;color:var(--ink);font-size:15px}
.pl-grid thead :is(th,td){position:sticky;inset-block-start:var(--pl-sticky);z-index:2;background:var(--surface);border-block-end:1px solid var(--line-strong);vertical-align:top;padding-block:18px 16px}
.pl-grid thead :is(th,td):first-child{border-start-start-radius:var(--r-md)}
.pl-grid thead :is(th,td):last-child{border-start-end-radius:var(--r-md)}
.pl-grid :is(th,td)+:is(th,td){border-inline-start:1px solid var(--line)}
.pl-col.is-current{background:var(--brand-softer)!important}
.pl-name{display:block;font-size:var(--t-lg);font-weight:600;color:var(--ink);line-height:1.2}
.pl-for{display:block;margin-block-start:2px!important;font-size:var(--t-sm);font-weight:400;color:var(--muted)}
.pl-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin-block:12px 12px!important}
.pl-price b{font-size:clamp(28px,2.6vw,36px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.pl-price span{font-size:var(--t-sm);font-weight:500;color:var(--ink-2)}
.pl-price small{flex-basis:100%;margin-block-start:4px;font-size:var(--t-xs);font-weight:400;color:var(--muted)}
:root:lang(ar) .pl-price b{letter-spacing:0}
.pl-cta{display:flex;align-items:center;justify-content:center;min-block-size:42px;padding-inline:14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)!important;font-size:14px;font-weight:600;text-decoration:none;text-align:center;line-height:1.25}
.pl-cta:hover{border-color:var(--faint)}
.pl-cta.is-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)!important}
.pl-cta.is-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.pl-cta.is-current{border-color:var(--brand-line);background:var(--surface);color:var(--brand-ink)!important}
.pl-cta.is-quiet{font-weight:500}
.pl-cta[aria-busy="true"]{opacity:.7;cursor:progress}
.pl-soon{display:block;margin-block-start:6px;font-size:var(--t-xs);font-weight:400;color:var(--muted);line-height:1.4}
.pl-more{display:inline-block;margin-block-start:10px;font-size:var(--t-sm);font-weight:500}
.pl-mark{display:inline-grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%}
.pl-mark .pl-icon{inline-size:16px;block-size:16px;stroke-width:2.4}
.pl-mark.is-yes{background:var(--good-soft);color:var(--good)}
.pl-mark.is-no{color:var(--faint)}
.pl-status{margin-block-start:var(--s-3)!important;font-size:var(--t-sm);color:var(--ink-2)}
.pl-status[data-tone="error"]{color:var(--bad)}

/* ---------- Stacked plans (phones): one section per plan, separated by a rule, never boxed as cards ---------- */
.pl-stack{display:none}
.pl-plan{padding-block:22px;border-block-start:1px solid var(--line-strong)}
.pl-plan:last-child{border-block-end:1px solid var(--line-strong)}
.pl-plan h3{font-size:var(--t-lg);font-weight:600;line-height:1.25}
.pl-plan.is-current h3::after{content:"";display:inline-block;inline-size:8px;block-size:8px;margin-inline-start:8px;border-radius:50%;background:var(--brand);vertical-align:middle}
.pl-plan .pl-price{margin-block:12px 14px!important}
.pl-plan-actions{display:grid;gap:4px;max-inline-size:420px}
.pl-plus{margin-block-start:16px!important;font-size:var(--t-sm);font-weight:500;color:var(--ink-2)}
.pl-list{list-style:none;padding:0;display:grid;gap:10px;margin-block-start:12px!important}
.pl-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.5;color:var(--ink-2)}
.pl-list .pl-icon{margin-block-start:2px;color:var(--good);stroke-width:2.4}

/* ---------- Comparison, notes and questions ---------- */
.pl-panel{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow-x:auto}
.pl-compare thead th{font-size:var(--t-sm);font-weight:500;color:var(--muted);background:var(--surface-2);border-block-end:1px solid var(--line-strong)}
.pl-compare thead th:first-child{border-start-start-radius:var(--r-md)}
.pl-compare thead th:last-child{border-start-end-radius:var(--r-md)}
.pl-compare td strong{display:block;font-size:var(--t-md);font-weight:600;color:var(--ink)}
.pl-sub{display:block;margin-block-start:2px;font-size:var(--t-sm);color:var(--muted)}
.pl-compare :is(th,td)+:is(th,td){border-inline-start:1px solid var(--line)}
.pl-notes{display:grid;gap:12px;max-inline-size:78ch;margin-block-start:var(--s-5)}
.pl-notes p{line-height:1.65;color:var(--ink-2)}
.pl-notes strong{font-weight:600;color:var(--ink)}
.pl-source{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-sm);font-weight:500;text-decoration:none}
.pl-source:hover{text-decoration:underline;text-underline-offset:3px}
.pl .pl-ext{inline-size:14px;block-size:14px}
.pl-faq{max-inline-size:860px;border-block-start:1px solid var(--line)}
.pl-faq summary{font-size:16px}
.pl-faq details p{color:var(--ink-2);line-height:1.65}
:root:lang(ar) .pl-faq details p,:root:lang(ar) .pl-notes p{line-height:1.85}
.pl-sources ol{display:grid;gap:8px;padding-inline-start:22px;margin-block-end:var(--s-3)!important}

/* ---------- The trial, Host per property and its calculator ---------- */
/* No plan table holds the switch's corner copy above Host, so the top switch shows on wide screens too. */
.pl-switch-top.pl-switch-always{display:flex}
.pl-hero .pl-actions{margin-block-start:var(--s-5)!important}
.pl-hero .pl-actions+.pl-muted{margin-block-start:8px!important}
.pl-free{font-size:var(--t-md)}
.pl-notice[data-tone="ended"]{border-color:var(--warn-line);background:var(--warn-soft)}
.pl-notice+.pl-notice{margin-block-start:var(--s-3)}
.pl-trial{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.pl-trial h3,.pl-subhead{font-size:var(--t-md);font-weight:600;line-height:1.3;color:var(--ink)}
.pl-subhead{margin-block:var(--s-5) 0!important}
.pl-host-price .pl-subhead{margin-block-start:var(--s-4)!important}
.pl-after{display:grid;gap:10px;margin-block-start:12px!important;padding-inline-start:20px;color:var(--ink-2);line-height:1.6}
.pl-host{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
.pl-host-price,.pl-calc{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.pl-host-price .pl-muted{margin-block-start:8px!important;line-height:1.5}
.pl-calc{display:grid;gap:12px}
.pl-calc label{font-weight:500;color:var(--ink)}
.pl-calc-row{display:flex;flex-wrap:wrap;gap:10px}
.pl-calc input,.pl-change input{inline-size:9ch;min-block-size:44px;padding-inline:12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-size:18px;font-variant-numeric:tabular-nums}
.pl-calc input:focus-visible,.pl-change input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pl-calc-out{display:grid;gap:4px}
.pl-calc-count{font-weight:500;color:var(--ink-2)}
.pl-calc-total{font-size:clamp(26px,2.6vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
:root:lang(ar) .pl-calc-total{letter-spacing:0;line-height:1.4}
.pl-calc-line{font-size:var(--t-sm);line-height:1.5;color:var(--muted)}
.pl-calc :is([hidden]){display:none!important}
.pl-tiers-note{margin-block-start:var(--s-2)!important;margin-block-end:var(--s-3)!important}
.pl-tiers b{font-weight:600;color:var(--ink)}

/* ---------- Account page ---------- */
.pl-account{display:grid;gap:var(--s-5);max-inline-size:860px}
.pl-account-head h1{font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.025em;font-weight:700}
:root:lang(ar) .pl-account-head h1{line-height:1.3;letter-spacing:0}
.pl-account-head p{margin-block-start:10px!important;color:var(--ink-2);font-size:17px;line-height:1.55}
.pl-box{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.pl-box h2{font-size:var(--t-lg);font-weight:600;line-height:1.3}
.pl-box>p{margin-block-start:8px!important;color:var(--ink-2);line-height:1.6}
.pl-plan-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-block-start:6px!important}
.pl-plan-line b{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pl-usage{display:grid;gap:16px;margin-block-start:16px!important}
.pl-usage div{display:grid;gap:6px}
.pl-usage dt{display:flex;justify-content:space-between;gap:12px;font-weight:500;color:var(--ink)}
.pl-usage dt span{font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pl-usage dd{margin:0}
.pl-bar{display:block;block-size:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.pl-bar i{display:block;block-size:100%;inline-size:var(--fill,0%);border-radius:inherit;background:var(--brand)}
.pl-bar.is-full i{background:var(--warn-fill)}
.pl-usage small{color:var(--muted);font-size:var(--t-sm);line-height:1.5}
.pl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px!important}
.pl-actions .pl-cta{min-inline-size:180px}
.pl-alert{padding:14px 18px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);line-height:1.6}
.pl-alert[data-tone="success"]{border-color:var(--good-line);background:var(--good-soft)}
.pl-alert[data-tone="warn"]{border-color:var(--warn-line);background:var(--warn-soft)}
.pl-alert[data-tone="error"]{border-color:var(--bad-line);background:var(--bad-soft)}
.pl-alert strong{font-weight:600}
.pl-alert p+p{margin-block-start:6px!important}
.pl-change{display:grid;gap:10px;margin-block-start:var(--s-5)!important;padding-block-start:var(--s-4);border-block-start:1px solid var(--line)}
.pl-change h3{font-size:var(--t-md);font-weight:600;line-height:1.3;color:var(--ink)}
.pl-change p{color:var(--ink-2);line-height:1.6}
.pl-status[data-tone="success"]{color:var(--good)}

@media (max-width:860px){
  .pl{--pl-sticky:64px}
  .pl-trial,.pl-host{grid-template-columns:1fr}
  .pl-grid{display:none}
  .pl-stack{display:block}
  .pl-switch-top{display:flex}
  .pl-switch{position:sticky;inset-block-start:var(--pl-sticky);z-index:3;margin-inline:calc(var(--gutter)*-1);padding:8px var(--gutter);background:var(--canvas);border-block-end:1px solid var(--line);flex-wrap:nowrap}
  .pl-switch .pl-switch-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .pl-switch-options label{min-block-size:34px}
  .pl-switch-note{font-size:var(--t-xs);line-height:1.35}
  .pl-section{padding-block-start:32px}
  .pl-table :is(th,td){padding:12px 14px}
  .pl-compare{min-inline-size:520px}
}
@media (max-width:480px){
  .pl-hero h1{font-size:clamp(36px,10.5vw,48px)}
  .pl-switch-options label{padding-inline:14px}
  .pl-compare{min-inline-size:0;font-size:14px}
  .pl-compare thead{display:none}
  .pl-compare tbody tr{display:block;padding:12px 14px;border-block-end:1px solid var(--line)}
  .pl-compare tbody tr:last-child{border-block-end:0}
  .pl-compare tbody :is(th,td){display:block;padding:4px 0;border:0!important}
  .pl-compare tbody th{font-size:var(--t-md);font-weight:600}
  .pl-compare tbody td::before{content:attr(data-label);display:block;font-size:var(--t-xs);color:var(--muted)}
}