/* thirdone.ae — shared stylesheet.
   The base is the stylesheet the site already shipped, preserved value for value so the
   design does not drift. Everything below the "ADDED" marker is new: self-hosted fonts,
   the mobile navigation the site was missing, breadcrumbs, and the layouts the inner
   pages need. */

/* ---------------------------------------------------------------- fonts
   Self-hosted. Previously Archivo came from fonts.googleapis.com + fonts.gstatic.com,
   which cost a render-blocking stylesheet (~570 ms) and was the sole measured cause of
   the page's 0.191 CLS: the fallback reflowed when the webfont arrived over a second
   connection. Same-origin + preload puts the file on the critical path instead. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback. Preloading the webfont cut CLS from 0.191 to 0.127, but the
   swap still moved text because Arial sets a different amount of space per character.
   These overrides, computed from the font's own OS/2 metrics against Arial's, make the
   fallback occupy the same box — so the swap is invisible to layout. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 130.27%;
  ascent-override: 67.40%;
  descent-override: 16.12%;
  line-gap-override: 0.00%;
}

/* ---------------------------------------------------------------- base */
:root{
  --paper:#F1F3F2;
  --panel:#FFFFFF;
  --ink:#152730;
  --ink-soft:#4C5E66;
  --line:#D4DAD8;
  --brand:#0E4F5C;
  --brand-soft:#DEEAEC;
  --amber:#C8862A;
  --amber-deep:#9C6716;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101B20;--panel:#16242B;--ink:#E7ECEC;--ink-soft:#9FB0B5;
    --line:#2A3B42;--brand:#6FB6C4;--brand-soft:#1C333B;--amber:#D99A3F;--amber-deep:#E2AC5C;
  }
}
:root[data-theme="dark"]{
  --paper:#101B20;--panel:#16242B;--ink:#E7ECEC;--ink-soft:#9FB0B5;
  --line:#2A3B42;--brand:#6FB6C4;--brand-soft:#1C333B;--amber:#D99A3F;--amber-deep:#E2AC5C;
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.ico{width:34px;height:34px;flex:none;stroke:var(--amber-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------------------------------------------- header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.mark{font-stretch:118%;font-weight:750;font-size:19px;letter-spacing:.02em;text-decoration:none;display:flex;align-items:baseline;gap:8px}
.mark b{color:var(--amber);font-weight:750}
.mark span{font-weight:400;font-size:12.5px;color:var(--ink-soft)}
nav.main{display:flex;gap:24px;align-items:center}
/* Nav links were 24px tall. WCAG 2.2 AA asks for 24x24 minimum, so they passed, but only
   just; the padding lifts them clear of the threshold without changing the visual rhythm. */
nav.main a{text-decoration:none;font-size:15px;color:var(--ink-soft);padding:10px 0;display:inline-block}
nav.main a:hover{color:var(--ink)}
nav.main a.cta{color:var(--paper);background:var(--ink);border-radius:999px;padding:11px 18px;font-weight:600}
nav.main a.cta:hover{background:var(--brand);color:#fff}
nav.main a[aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- hero */
.hero{padding:78px 0 66px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:420px}}
.kick{color:var(--amber-deep);font-weight:600;font-size:15px;margin-bottom:16px}
h1{font-stretch:112%;font-weight:740;line-height:1.05;font-size:clamp(38px,5.6vw,64px);letter-spacing:-.015em;max-width:16ch}
h1 .turn{color:var(--brand)}
.lede{margin-top:24px;max-width:56ch;font-size:clamp(17px,2vw,19px);color:var(--ink-soft)}
.actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:650;font-size:16px;padding:13px 26px;border-radius:999px;border:1.5px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.fact{margin-top:38px;color:var(--ink-soft);font-size:14.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fact i{display:inline-block;width:26px;height:2px;background:var(--amber);flex:none}

/* ---------------------------------------------------------------- sections */
section{padding:74px 0;border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:42px}
h2{font-stretch:112%;font-weight:720;letter-spacing:-.01em;font-size:clamp(27px,3.8vw,38px);line-height:1.12}
.sec-head p{color:var(--ink-soft);max-width:64ch;margin-top:10px}
h3{font-stretch:106%}

.deliver{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.deliver div{background:var(--panel);padding:22px 22px}
.deliver strong{display:block;font-size:16px;font-weight:660;margin-bottom:5px}
.deliver span{color:var(--ink-soft);font-size:14.5px}

.svc-block{display:grid;grid-template-columns:minmax(230px,330px) 1fr;gap:26px;padding:34px 0;border-top:1px solid var(--line)}
.svc-block:first-of-type{border-top:0}
.svc-block header{all:unset;display:block}
.svc-title{display:flex;gap:14px;align-items:flex-start}
.svc-title h3{font-size:20px;font-weight:680;line-height:1.25}
.svc-title h3 em{font-style:normal;color:var(--amber-deep)}
.svc-block > div > p{color:var(--ink-soft);font-size:16px;max-width:64ch}
.svc-list{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 26px;list-style:none}
.svc-list li{position:relative;padding-left:20px;font-size:15px;color:var(--ink-soft)}
.svc-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--amber)}
@media (max-width:680px){.svc-block{grid-template-columns:1fr;gap:12px}}

#process{background:var(--panel)}
.steps{list-style:none;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:20px 0 20px 58px;border-bottom:1px dashed var(--line)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(st);position:absolute;left:0;top:20px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--amber-deep);border:1.5px solid var(--amber);background:var(--paper)}
.steps li::after{content:"";position:absolute;left:16.5px;top:56px;bottom:-2px;width:1.5px;background:var(--amber);opacity:.45}
.steps li:last-child::after{display:none}
.steps h3{font-size:17.5px;font-weight:660}
.steps p{color:var(--ink-soft);font-size:15.5px;max-width:66ch}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split .copy p{color:var(--ink-soft);margin-bottom:14px;max-width:58ch}
.split .copy p strong{color:var(--ink);font-weight:640}
.chiplist{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.chiplist span{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 14px;font-size:13.5px;color:var(--ink-soft)}

.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.who div{background:var(--panel);padding:24px 22px}
.who h3{font-size:16.5px;font-weight:660;margin-bottom:6px}
.who p{color:var(--ink-soft);font-size:14.5px}

details.faq{border-bottom:1px solid var(--line);padding:4px 0}
details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 0;font-weight:640;font-size:17px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--amber-deep);font-size:22px;font-weight:400;flex:none}
details.faq[open] summary::after{content:"–"}
details.faq p{color:var(--ink-soft);padding:0 0 18px;max-width:70ch;font-size:15.5px}
details.faq p + p{padding-top:0;margin-top:-6px}

.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}}
.about-grid .copy p{color:var(--ink-soft);margin-bottom:16px;max-width:60ch}
.about-grid .copy p strong{color:var(--ink);font-weight:640}
.reg{background:var(--panel);border:1px solid var(--line);padding:26px 26px 12px}
.reg h3{font-size:15px;font-weight:680;color:var(--amber-deep);margin-bottom:16px}
.reg dl{display:grid;grid-template-columns:auto 1fr;column-gap:18px}
.reg dt{font-size:13.5px;color:var(--ink-soft);padding:9px 0;border-top:1px solid var(--line);white-space:nowrap}
.reg dd{font-size:14.5px;padding:9px 0;border-top:1px solid var(--line)}
.reg dt:first-of-type,.reg dd:first-of-type{border-top:0}

#contact{border-bottom:0}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-grid > div > p{color:var(--ink-soft);max-width:52ch}
.clines{margin-top:26px;display:grid;gap:18px}
.clines a{font-size:clamp(18px,2.4vw,22px);font-weight:660;text-decoration:none;font-stretch:106%;display:flex;gap:12px;align-items:center}
.clines a:hover{color:var(--brand)}
.clines small{display:block;color:var(--ink-soft);font-weight:400;font-size:13.5px;font-stretch:100%}
address{font-style:normal;color:var(--ink-soft);font-size:15.5px;line-height:1.7}

.form-card{background:var(--panel);border:1px solid var(--line);padding:28px 26px}
.form-card h3{font-size:18px;font-weight:680;margin-bottom:18px}
#contact-form label{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:14px;font-weight:500}
#contact-form input,#contact-form select,#contact-form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:15.5px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:11px 13px;min-height:46px}
#contact-form textarea{min-height:140px;resize:vertical}
#contact-form input:focus,#contact-form select:focus,#contact-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
#contact-form input[aria-invalid="true"],#contact-form textarea[aria-invalid="true"]{border-color:#B4432F}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.frow{grid-template-columns:1fr}}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#contact-form button{cursor:pointer;margin-top:4px}
#contact-form button:disabled{opacity:.6;cursor:wait}
.fnote{font-size:12.5px;color:var(--ink-soft);margin-top:12px}
.fnote a{color:var(--ink-soft)}
.form-status{margin-top:12px;font-size:15px;font-weight:560}
.form-status.ok{color:var(--brand)}
.form-status.err{color:#B4432F}
.form-status a{color:inherit}

footer{padding:52px 0 40px;color:var(--ink-soft);font-size:13.5px;border-top:1px solid var(--line)}
:focus-visible{outline:2.5px solid var(--amber);outline-offset:3px;border-radius:3px}

/* ================================================================ ADDED ==== */

/* Skip link — the site had no way for a keyboard user to jump past the navigation. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:0 0 8px 0;font-weight:640;text-decoration:none}
.skip:focus{left:0}

/* Mobile navigation. At <=860px the old stylesheet simply hid five of the six links with
   nothing in their place, so phones and tablets had no way to reach any section.
   <details> gives a working disclosure with no JavaScript, which also keeps it inside the
   site's strict CSP. */
.menu{display:none}
.menu > summary{list-style:none;cursor:pointer;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary span,.menu > summary span::before,.menu > summary span::after{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.menu > summary span::before,.menu > summary span::after{content:"";position:absolute;left:0}
.menu > summary span::before{top:-6px}
.menu > summary span::after{top:6px}
.menu[open] > summary span{background:transparent}
.menu[open] > summary span::before{top:0;transform:rotate(45deg)}
.menu[open] > summary span::after{top:0;transform:rotate(-45deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(21,39,48,.12);padding:10px 0 18px}
.menu-panel ul{list-style:none;max-width:1120px;margin:0 auto;padding:0 24px}
.menu-panel a{display:block;text-decoration:none;font-size:17px;font-weight:560;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.menu-panel li:last-child a{border-bottom:0}
.menu-panel .wa{color:var(--brand);font-weight:640}
@media (max-width:860px){
  /* Everything in nav.main is reachable from the disclosure menu and from the sticky
     action bar, and at 320px the logo, the CTA and the toggle together overflow the
     viewport by 41px. So the desktop nav is hidden outright rather than partially. */
  nav.main{display:none}
  .mark span{display:none}
  .menu{display:block}
  header{position:sticky}
}
@media (min-width:861px){.menu{display:none !important}}

/* Breadcrumbs on inner pages. */
.crumbs{padding:18px 0 0;font-size:13.5px;color:var(--ink-soft)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs li::after{content:"/";margin-left:8px;color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current="page"]{color:var(--ink)}

/* Inner-page hero: same type scale, less vertical weight than the homepage hero. */
.phero{padding:40px 0 54px;border-bottom:1px solid var(--line)}
.phero h1{max-width:20ch;font-size:clamp(33px,4.6vw,52px)}
.phero .lede{max-width:62ch}

/* Outcome grid — "what you actually get". */
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.outcomes div{background:var(--panel);padding:24px 22px}
.outcomes strong{display:block;font-size:16.5px;font-weight:660;margin-bottom:6px}
.outcomes span{color:var(--ink-soft);font-size:14.5px}

/* Long-form prose used by service, industry and article pages. */
.prose{max-width:68ch}
.prose h2{margin:46px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19.5px;font-weight:680;margin:30px 0 10px}
.prose p{color:var(--ink-soft);margin-bottom:16px}
.prose strong{color:var(--ink);font-weight:640}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:22px;color:var(--ink-soft);margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--amber)}
.prose ol{counter-reset:pl}
.prose ol li{counter-increment:pl;position:relative;padding-left:32px;color:var(--ink-soft);margin-bottom:11px}
.prose ol li::before{content:counter(pl) ".";position:absolute;left:0;top:0;color:var(--amber-deep);font-weight:680}
.prose a{color:var(--brand);text-underline-offset:3px}

/* Two-column page body with a sticky summary rail on wide screens. */
/* min-width:0 on the children: a grid item defaults to min-width:auto, which lets a
   wide table stretch its column and push the whole page sideways instead of scrolling
   inside its own wrapper. */
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.page-grid > *{min-width:0}
@media (max-width:920px){.page-grid{grid-template-columns:minmax(0,1fr);gap:40px}}
.rail{position:sticky;top:96px;display:grid;gap:22px}
@media (max-width:920px){.rail{position:static}}
.rail-card{background:var(--panel);border:1px solid var(--line);padding:22px 20px}
.rail-card h2{font-size:15px;font-weight:680;color:var(--amber-deep);letter-spacing:.01em;margin-bottom:12px;font-stretch:100%}
.rail-card ul{list-style:none;display:grid;gap:9px}
.rail-card a{text-decoration:none;font-size:15px;color:var(--ink-soft);display:inline-block;padding:3px 0}
.rail-card a:hover{color:var(--brand)}
.rail-card p{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px}
.rail-card .btn{display:block;text-align:center;padding:12px 14px;font-size:15px}

/* Card lists for index pages (services, industries, insights). */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cards article{background:var(--panel);padding:26px 24px;display:flex;flex-direction:column}
.cards h3{font-size:18.5px;font-weight:680;line-height:1.38;margin-bottom:8px}
.cards h3 a{text-decoration:none;display:block;padding:2px 0}
.cards h3 a:hover{color:var(--brand)}
.cards p{color:var(--ink-soft);font-size:15px;margin-bottom:16px}
.cards .more{margin-top:auto;font-size:14.5px;font-weight:640;color:var(--brand);text-decoration:none;display:inline-block;padding:5px 0;align-self:flex-start}
.cards .more::after{content:" →"}

/* Closing call to action, repeated at the foot of every inner page. */
.cta-band{background:var(--panel);border-top:1px solid var(--line);border-bottom:0;padding:62px 0}
.cta-band h2{max-width:20ch}
.cta-band p{color:var(--ink-soft);max-width:56ch;margin-top:12px}

/* Footer upgraded from two lines into a navigable, verifiable block. */
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h2{font-size:13px;font-weight:680;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-stretch:100%}
.foot-grid ul{list-style:none;display:grid;gap:4px}
.foot-grid li a{display:inline-block;padding:5px 0}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--ink)}
.foot-contact{margin-top:16px}
.foot-legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px}
.foot-legal nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{text-decoration:none}

/* Film section. */
.film{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0B141A;box-shadow:0 20px 50px rgba(21,39,48,.18)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* Sticky mobile action bar: the site's two conversion paths always within thumb reach. */
.mobile-cta{display:none}
@media (max-width:720px){
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb, var(--paper) 94%, transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
  .mobile-cta a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;text-decoration:none;font-weight:640;font-size:15px}
  .mobile-cta .primary{background:var(--ink);color:var(--paper)}
  .mobile-cta .wa{border:1.5px solid var(--line);background:var(--panel);color:var(--ink)}
  .mobile-cta svg{width:18px;height:18px;flex:none}
  body{padding-bottom:78px}
}

/* Small utilities, so no markup needs a style= attribute — the CSP forbids them. */
.stack-lg{margin-top:26px}
.stack-md{margin-top:18px}
.sub-head{font-size:15px;font-weight:680;color:var(--amber-deep);letter-spacing:.01em;margin-bottom:14px;font-stretch:100%}
.contact-sub{margin-top:32px}

/* Tables used on comparison content.
   A four-column table will not compress below about 420px, so on a phone it used to push
   the whole page sideways — 123px of horizontal overflow at 320px. The wrapper scrolls
   instead, and carries tabindex/role so a keyboard user can reach and scroll it too. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:22px;max-width:100%}
.tbl-wrap:focus-visible{outline:2.5px solid var(--amber);outline-offset:2px}
.tbl{width:100%;min-width:420px;border-collapse:collapse;margin-bottom:0;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--panel);font-weight:660;color:var(--ink)}
.tbl td{color:var(--ink-soft)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}