/* Paperota company page only. Sits on top of p3.css (linked from inside <main>, because the site's CSP blocks inline styles).
   The page is built around one idea: the navy status card of the company home screen, made big, and it works.
   Old Safari safe: no :has(), no color-mix(), no dvh. */

/* ---------- first screen: the navy board ---------- */
.co-hero{--brd-drop:104px;background:var(--navy);color:var(--on-navy-2);padding-block-start:clamp(32px,5vw,72px)}
.co-hero h1{color:var(--on-navy);max-width:17em}
.co-h1b{display:block;color:var(--on-navy-2)}
.co-hero__row{display:grid;gap:var(--s4);margin-block-start:var(--s5)}
.co-hero .p3-hero__lead{color:var(--on-navy-2)}
.co-hero .p3-cta{margin-block-start:0}
.co-hero .p3-hero__lead{max-width:40em;margin-block-start:0}
.co-hero .p3-trial{color:var(--on-navy-2);margin-block-start:var(--s3)}

/* the board. Plain radio buttons drive it, so it needs no script */
.brd{position:relative;margin-block-start:clamp(32px,4.5vw,56px)}
.brd__in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.brd__head{display:flex;flex-wrap:wrap;gap:0 var(--s4);align-items:baseline;justify-content:space-between;margin-block-end:var(--s3);font-size:var(--t-s);color:var(--on-navy-2)}
.brd__head b{color:var(--on-navy);font-weight:700;font-size:var(--t-b)}
.brd__tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.brd__t{border:1px solid transparent;position:relative;display:block;padding:10px var(--s2) 11px;min-height:96px;border-radius:var(--r-btn) var(--r-btn) 0 0;background:rgba(255,255,255,.09);color:var(--on-navy-2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s}
.brd__t:hover{background:rgba(255,255,255,.16)}
.brd__t b{display:block;font-family:var(--disp);font-size:clamp(28px,5vw,68px);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--on-navy);font-variant-numeric:tabular-nums}
html[lang=ar] .brd__t b{letter-spacing:0}
.brd__t span{display:block;margin-block-start:var(--s1);font-size:var(--t-cap);line-height:1.3}
html[lang=ar] .brd__t span{line-height:1.45}
.brd__t i{position:absolute;top:12px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;background:currentColor}
.brd__t--a i{color:var(--on-bad)}.brd__t--b i{color:var(--on-soon)}.brd__t--c i{color:var(--on-mid)}.brd__t--d i{color:var(--on-far)}.brd__t--e i{color:var(--on-ok)}
.brd__panel{position:relative;z-index:2;margin-block-end:calc(var(--brd-drop)*-1);padding:var(--s2) var(--s4) var(--s3);min-height:300px;background:var(--white);border-radius:0 0 var(--r-l) var(--r-l);box-shadow:var(--sh-2)}
.brd__r{display:none;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s3);align-items:center;padding-block:var(--s3);border-bottom:1px solid var(--line);line-height:1.4}
html[lang=ar] .brd__r{line-height:1.55}
.brd__n{color:var(--ink);font-weight:700}
.brd__p{grid-column:1;grid-row:2;font-size:var(--t-s);color:var(--muted)}
.brd__p em{font-style:normal}
.brd__s{grid-column:2;grid-row:1 / span 2}
.co-st{display:inline-block;padding:3px 11px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:500;white-space:nowrap;background:var(--pale);color:var(--text)}
.co-st--bad{background:var(--bad-bg);color:var(--bad)}.co-st--soon{background:var(--soon-bg);color:var(--soon)}.co-st--ok{background:var(--ok-bg);color:var(--ok)}
.brd__more{display:none;padding-block:var(--s3);font-size:var(--t-s);color:var(--muted)}
#bb:checked~.brd__panel .brd__more.rb,#bc:checked~.brd__panel .brd__more.rc,#bd:checked~.brd__panel .brd__more.rd,#be:checked~.brd__panel .brd__more.re{display:block}

/* which tile is on, and its rows */
#ba:checked~.brd__tiles .brd__t--a,#bb:checked~.brd__tiles .brd__t--b,#bc:checked~.brd__tiles .brd__t--c,#bd:checked~.brd__tiles .brd__t--d,#be:checked~.brd__tiles .brd__t--e{background:var(--white);color:var(--text);box-shadow:0 8px 0 var(--white)}
#ba:checked~.brd__tiles .brd__t--a b,#bb:checked~.brd__tiles .brd__t--b b,#bc:checked~.brd__tiles .brd__t--c b,#bd:checked~.brd__tiles .brd__t--d b,#be:checked~.brd__tiles .brd__t--e b{color:var(--ink)}
#ba:checked~.brd__tiles .brd__t--a i{color:var(--bad)}#bb:checked~.brd__tiles .brd__t--b i{color:var(--soon-2)}#bc:checked~.brd__tiles .brd__t--c i{color:var(--soon)}#bd:checked~.brd__tiles .brd__t--d i{color:var(--navy-soft)}#be:checked~.brd__tiles .brd__t--e i{color:var(--ok)}
#ba:focus~.brd__tiles .brd__t--a,#bb:focus~.brd__tiles .brd__t--b,#bc:focus~.brd__tiles .brd__t--c,#bd:focus~.brd__tiles .brd__t--d,#be:focus~.brd__tiles .brd__t--e{outline:3px solid var(--accent);outline-offset:2px}
#ba:focus:not(:focus-visible)~.brd__tiles .brd__t--a,#bb:focus:not(:focus-visible)~.brd__tiles .brd__t--b,#bc:focus:not(:focus-visible)~.brd__tiles .brd__t--c,#bd:focus:not(:focus-visible)~.brd__tiles .brd__t--d,#be:focus:not(:focus-visible)~.brd__tiles .brd__t--e{outline:none}
#ba:checked~.brd__panel .ra,#bb:checked~.brd__panel .brd__r.rb,#bc:checked~.brd__panel .brd__r.rc,#bd:checked~.brd__panel .brd__r.rd,#be:checked~.brd__panel .brd__r.re{display:grid;animation:corow .42s var(--ease) both}
#ba:checked~.brd__panel .ra:nth-child(n+2),#bb:checked~.brd__panel .rb:nth-child(n+2),#bc:checked~.brd__panel .rc:nth-child(n+2),#bd:checked~.brd__panel .rd:nth-child(n+2),#be:checked~.brd__panel .re:nth-child(n+2){animation-delay:.05s}
@keyframes corow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.brd__r{animation:none!important}.brd__t{transition:none}}
@media (forced-colors:active){
  .brd__t{border-color:ButtonText}
  #ba:checked~.brd__tiles .brd__t--a,#bb:checked~.brd__tiles .brd__t--b,#bc:checked~.brd__tiles .brd__t--c,#bd:checked~.brd__tiles .brd__t--d,#be:checked~.brd__tiles .brd__t--e{border:3px solid Highlight}
}
@media (min-width:760px){
  .brd__tiles{gap:var(--s2)}
  .brd__t{padding:var(--s4) var(--s4) var(--s4);min-height:132px}
  .brd__t span{font-size:var(--t-15)}
  .brd__t i{top:var(--s4);inset-inline-end:var(--s4);width:10px;height:10px}
  .brd__panel{padding:var(--s2) var(--s6) var(--s3);min-height:262px}
  .brd__r{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,2fr) auto;gap:var(--s4)}
  .brd__p{display:contents}
  .brd__p em{grid-column:2;grid-row:1;font-size:var(--t-15)}
  .brd__p u{grid-column:3;grid-row:1;font-size:var(--t-15);text-decoration:none}
  .brd__p .dot{display:none}
  .brd__s{grid-column:4;grid-row:1}
  .brd__r{min-height:64px}
}
.brd__p u{text-decoration:none}

/* ---------- the section that the board drops into ---------- */
.co-after{padding-block-start:calc(104px + clamp(56px,7vw,104px))}

/* ---------- Excel ---------- */
.co-xl{display:grid;gap:var(--s7)}
.co-xl__fig{display:grid;gap:var(--s5);min-width:0}
.co-sheet{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--white);box-shadow:var(--sh-1)}
.co-sheet__bar{display:flex;gap:var(--s2);align-items:center;padding:var(--s3) var(--s4);background:var(--pale);border-bottom:1px solid var(--line-2);font-size:var(--t-s);font-weight:500;color:var(--ink)}
.co-sheet__bar .i{width:20px;height:20px}
.co-sheet table{width:100%;border-collapse:collapse;font-size:var(--t-s);line-height:1.35;font-variant-numeric:tabular-nums}
.co-sheet th,.co-sheet td{padding:10px var(--s3);text-align:start;border-bottom:1px solid var(--line);white-space:nowrap}
.co-sheet th{font-weight:500;color:var(--muted);font-size:var(--t-cap);white-space:normal;vertical-align:bottom}
.co-sheet td{color:var(--ink)}
.co-sheet tr.is-err td{background:var(--bad-bg)}
.co-sheet tr.is-err .bad{color:var(--bad);font-weight:700}
.co-x{display:none}
.co-sheet__end{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);font-size:var(--t-s);color:var(--text)}
.co-sheet__end b{color:var(--ink);font-weight:700}
.co-sheet__end .bad{color:var(--bad);font-weight:500}
.co-fake{display:inline-flex;align-items:center;min-height:36px;padding:var(--s1) var(--s4);border-radius:var(--r-s);background:var(--navy);color:var(--white);font-weight:500}
@media (min-width:640px){.co-x{display:table-cell}}
@media (max-width:359px){.co-sheet th,.co-sheet td{padding-inline:var(--s2);font-size:var(--t-cap)}.co-sheet__bar,.co-sheet__end{padding-inline:var(--s3)}}
@media (min-width:1100px) and (max-width:1499px){.co-x2{display:none}}
@media (min-width:1100px){
  .co-xl{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:var(--s8);align-items:center}
}

/* ---------- every morning ---------- */
.co-morn{display:grid;gap:var(--s7)}
.co-morn__shot{width:min(72%,280px);margin-inline:auto}
.co-morn .p3-cap__list{margin-block-start:var(--s5)}
@media (min-width:1100px){
  .co-morn{grid-template-columns:minmax(0,1fr) 320px;gap:var(--s8);align-items:start}
  .co-morn__shot{width:100%}
}

/* ---------- who sees what: a real table, not cards ---------- */
.co-roles{width:100%;border-collapse:collapse;font-size:var(--t-15)}
.co-roles th,.co-roles td{text-align:start}
.co-roles thead th{padding:0 var(--s3) var(--s3);font-size:var(--t-s);font-weight:500;color:var(--muted);vertical-align:bottom;line-height:1.35}
.co-roles tbody th{padding:var(--s3) var(--s3) var(--s3) 0;font-weight:700;color:var(--ink);font-size:var(--t-b);white-space:nowrap}
html[dir=rtl] .co-roles tbody th{padding:var(--s3) 0 var(--s3) var(--s3)}
.co-roles tbody tr{border-top:1px solid var(--line)}
.co-roles td{padding:var(--s3)}
.co-lv{display:inline-block;padding:3px var(--s3);border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:500;line-height:1.5;white-space:nowrap}
.co-lv--m{background:var(--navy);color:var(--white)}
.co-lv--v{background:var(--pale-2);color:var(--ink)}
.co-lv--o{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink)}
.co-lv--n{color:var(--muted);padding-inline:0}
.co-lab{display:none}
.co-rolesnote{display:grid;gap:var(--s2);margin-block-start:var(--s5);max-width:38em}
.co-rolepick{display:none}
.js .co-rolepick{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block-end:var(--s4)}
.co-rolepick button{min-height:44px;padding:6px var(--s4);border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:var(--white);color:var(--navy);font:500 var(--t-15)/1.2 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.co-rolepick button:hover{border-color:var(--navy)}
.co-rolepick button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.co-roles.has-pick:not(.is-all) tbody tr{display:none}
.co-roles.has-pick:not(.is-all) tbody tr.on{display:table-row}
.co-rolesall{display:none;margin-block-start:var(--s2)}
@media (min-width:760px){.js .co-rolesall{display:inline-flex}}
@media (max-width:759px){
  .co-roles,.co-roles tbody{display:block}
  .co-roles thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .co-roles tr{display:block;padding-block:var(--s3)}
  .co-roles tbody th{display:block;padding:0 0 var(--s2);white-space:normal}
  html[dir=rtl] .co-roles tbody th{padding:0 0 var(--s2)}
  .co-roles td{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;padding:2px 0;min-height:30px}
  .co-roles td.is-none{display:none}
  .co-roles.has-pick:not(.is-all) tbody tr{display:none;border-top:0;padding-block:var(--s2)}
  .co-roles.has-pick:not(.is-all) tbody tr.on{display:block}
  .co-roles.has-pick tbody th{display:none}
  .co-lab{display:block;color:var(--text);font-size:var(--t-s)}
}

/* ---------- each employee ---------- */
.co-emp__fig{position:relative;width:100%;max-width:360px;margin-inline:auto;padding-block-end:var(--s8)}
.co-emp__fig .p3-shot{width:min(84%,300px)}
.co-emp__note{position:absolute;inset-inline-end:0;bottom:0;width:min(80%,286px);box-shadow:var(--sh-3)}

/* ---------- the rest of the company: a ledger ---------- */
.co-led__r{display:grid;gap:var(--s4) var(--s7);padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line-2)}
.co-led__r h3{font-size:clamp(24px,2.5vw,32px);line-height:1.2;letter-spacing:-.015em}
html[lang=ar] .co-led__r h3{letter-spacing:0;line-height:1.4}
.co-led__obj{display:grid;gap:0;padding:var(--s2) var(--s4);background:var(--pale);border-radius:var(--r);max-width:440px;width:100%}
.co-led__li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-block:var(--s3);border-top:1px solid var(--line-2);color:var(--ink);font-size:var(--t-15);line-height:1.4}
.co-led__li:first-child{border-top:0}
.co-led__li small{display:block;color:var(--muted);font-size:var(--t-xs)}
.co-led__li b{font-weight:700}
.co-num{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
@media (min-width:960px){
  .co-led__r{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,4fr);align-items:start}
}

/* ---------- price ---------- */
.co-price{display:grid;gap:var(--s7)}
.co-price__big{font-family:var(--disp);font-size:clamp(38px,5vw,68px);line-height:1.15;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-block-start:var(--s4)}
html[lang=ar] .co-price__big{letter-spacing:0;line-height:1.3}
.co-price__per{display:inline;margin-inline-start:.35em;font-family:var(--sans);font-size:var(--t-l);font-weight:500;letter-spacing:0;color:var(--text)}
.co-price__yr{margin-block-start:var(--s3)}
.co-price__yr b{color:var(--ink);font-weight:700}
.co-price .price-local{display:block;color:var(--muted);font-size:var(--t-15)}
.co-inc{display:grid}
.co-inc li{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding-block:var(--s4);border-top:1px solid var(--line-2)}
.co-inc b{color:var(--ink);font-weight:700}
.co-inc .t{font-size:var(--t-15)}
@media (min-width:960px){.co-price{grid-template-columns:5fr 7fr;gap:var(--s8)}}