@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=Reem+Kufi:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Palette derived from the Information Age logo:
     #1F293D letter outline · #5D82C5 blue · #66666B grey · #D7DBE3 pale blue-grey */
  --ink:#1F293D; --ink-2:#2C3A56; --slate:#4E5666;
  --mist:#D7DBE3; --paper:#F7F8FA;
  --logo-blue:#5D82C5;
  --accent:#40598B;      /* accent on light surfaces  — 6.5:1 */
  --accent-lt:#8FAAE0;   /* accent on dark surfaces   — 6.2:1 */
  --rule:rgba(31,41,61,.18); --rule-dk:rgba(215,219,227,.22);
  --maxw:1180px; --gutter:clamp(20px,5vw,64px);
  --f-disp:Spectral,Georgia,serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",monospace;
  --f-ar:"IBM Plex Sans Arabic",sans-serif;
  --f-ar-disp:"Reem Kufi","IBM Plex Sans Arabic",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:fixed;inset-inline-start:8px;top:-80px;background:var(--accent);color:#fff;padding:10px 16px;z-index:200;text-decoration:none;font-weight:600;font-size:14px;transition:top .15s}
.skip:focus{top:8px}
html,body{overflow-x:hidden;max-width:100%}

/* RTL */
html[dir="rtl"] body{font-family:var(--f-ar)}
html[dir="rtl"] h1,html[dir="rtl"] h2{font-family:var(--f-ar-disp);letter-spacing:0;line-height:1.35}
html[dir="rtl"] h3{font-family:var(--f-ar);font-weight:600;letter-spacing:0;line-height:1.5}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .svc-lbl,html[dir="rtl"] .card-cl,html[dir="rtl"] .tag,html[dir="rtl"] .chip,html[dir="rtl"] .ft h4,html[dir="rtl"] .cta-box b,html[dir="rtl"] .rail-i b{font-family:var(--f-ar);letter-spacing:0}
html[dir="rtl"] .brand-tx{font-family:var(--f-ar-disp)}
html[dir="rtl"] .brand-tx span{font-family:var(--f-ar);letter-spacing:0}
html[dir="rtl"] .role time{font-family:var(--f-mono)}

/* type */
.eyebrow{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow--dim{color:var(--slate)}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;line-height:1.12;letter-spacing:-.012em}
h2{font-size:clamp(30px,4.2vw,46px)}
h3{font-size:21px;line-height:1.28}
.lede{font-size:clamp(17px,1.6vw,19.5px);color:var(--slate);max-width:58ch}
.prose p{color:var(--slate);margin-bottom:18px;font-size:16.5px;max-width:66ch}
.prose p strong{color:var(--ink);font-weight:600}
.prose h3{margin:34px 0 12px;color:var(--ink)}
.prose ul{margin:0 0 20px;padding-inline-start:20px;color:var(--slate);max-width:66ch}
.prose li{margin-bottom:9px;font-size:16px}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule);
 box-shadow:0 1px 0 rgba(31,41,61,.04)}
.hdr-in{display:flex;align-items:center;gap:28px;height:78px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-inline-end:auto}
.brand-logo{display:block;width:172px;height:auto}
@media(max-width:900px){.brand-logo{width:142px}}
.brand-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.brand-tx span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;color:rgba(251,250,247,.5);text-transform:uppercase;margin-top:2px}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:var(--slate);text-decoration:none;font-size:14.5px;font-weight:500;padding:6px 0;
 border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.nav .lang{font-family:var(--f-ar)}
html[dir="rtl"] .nav .lang{font-family:var(--f-body)}
.nav .lang{color:var(--accent);font-weight:600}
.btn-hd{background:var(--accent);color:#fff;text-decoration:none;font-size:14px;font-weight:600;
 padding:10px 18px;white-space:nowrap;transition:background .18s}
.btn-hd:hover{background:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--rule);color:var(--ink);width:40px;height:38px;font-size:17px;cursor:pointer}
@media(max-width:900px){
  .nav{display:none}.burger{display:block}
  .hdr-in{gap:14px}
  .brand-tx span{display:none}
  .brand-tx{font-size:16.5px}
  .btn-hd{padding:9px 14px;font-size:13.5px}
}
@media(max-width:540px){.btn-hd{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:15px;font-weight:600;padding:14px 24px;transition:.18s}
.btn-a{background:var(--accent);color:#fff}
.btn-a:hover{background:var(--logo-blue)}
.btn-b{border:1px solid rgba(251,250,247,.32);color:var(--paper)}
.btn-b:hover{border-color:var(--accent);color:var(--accent-lt)}
.btn-c{border:1px solid var(--rule);color:var(--ink)}
.btn-c:hover{border-color:var(--accent);color:var(--accent)}

/* hero */
.hero{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,76px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,60px)}
@media(min-width:960px){.hero-grid{grid-template-columns:1.04fr 1fr;align-items:center}}
.hero h1{font-size:clamp(38px,6.2vw,68px);margin:18px 0 22px;color:var(--paper)}
.hero .eyebrow{letter-spacing:.11em;font-size:11px;max-width:none}
.phero .eyebrow,.phero .crumb{max-width:none}
html[dir="rtl"] .hero h1{font-size:clamp(34px,5.4vw,58px)}
.hero h1 em{font-style:italic;color:var(--accent-lt)}
html[dir="rtl"] .hero h1 em{font-style:normal}
.hero p{color:rgba(251,250,247,.72);font-size:clamp(16.5px,1.7vw,19px);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* page hero (inner pages) */
.phero{background:var(--ink);color:var(--paper);padding:clamp(52px,7vw,88px) 0 clamp(44px,6vw,68px);position:relative}
.phero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}
.phero h1{font-size:clamp(32px,5vw,54px);color:var(--paper);margin:16px 0 20px;max-width:20ch}
.phero p{color:rgba(251,250,247,.72);max-width:56ch;font-size:clamp(16px,1.6vw,18.5px)}
.crumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,250,247,.45)}
.crumb a{text-decoration:none;color:var(--accent-lt)}
html[dir="rtl"] .crumb{font-family:var(--f-ar);letter-spacing:0}

/* analyser */
.an{border:1px solid var(--rule-dk);background:rgba(255,255,255,.03);padding:clamp(20px,3vw,30px)}
.an-hd{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--rule-dk);margin-bottom:26px}
.an-hd span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,250,247,.45)}
html[dir="rtl"] .an-hd span{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12px}
.an-hd .live{color:var(--accent-lt);display:flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;background:var(--accent-lt);border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.toks{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 18px;direction:rtl}
.tok{text-align:center;opacity:0;transform:translateY(7px);animation:tokIn .5s cubic-bezier(.2,.7,.3,1) forwards}
.tok-w{font-family:var(--f-ar);font-size:clamp(21px,2.6vw,29px);font-weight:500;color:var(--paper);padding-bottom:7px;border-bottom:1.5px solid rgba(251,250,247,.22)}
.tok-g{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;color:rgba(251,250,247,.42);margin-top:8px;direction:ltr;text-transform:uppercase}
.tok.dial .tok-w{color:var(--accent-lt);border-bottom-color:var(--accent)}
.tok.dial .tok-g{color:var(--accent)}
@keyframes tokIn{to{opacity:1;transform:none}}
.tok:nth-child(1){animation-delay:.35s}.tok:nth-child(2){animation-delay:.47s}
.tok:nth-child(3){animation-delay:.59s}.tok:nth-child(4){animation-delay:.71s}
.tok:nth-child(5){animation-delay:.83s}.tok:nth-child(6){animation-delay:.95s}
.an-out{margin-top:28px;padding-top:20px;border-top:1px solid var(--rule-dk);display:flex;flex-wrap:wrap;gap:10px;opacity:0;animation:tokIn .6s ease forwards;animation-delay:1.2s}
.chip{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;border:1px solid var(--rule-dk);padding:6px 11px;color:rgba(251,250,247,.72)}
.chip b{color:var(--accent-lt);font-weight:500}
.an-note{margin-top:18px;font-size:13.5px;line-height:1.55;color:rgba(251,250,247,.55);opacity:0;animation:tokIn .6s ease forwards;animation-delay:1.45s}
.an-note b{color:var(--accent-lt);font-weight:500}
@media(prefers-reduced-motion:reduce){
  .tok,.an-out,.an-note{animation:none;opacity:1;transform:none}
  .dot{animation:none}
  html{scroll-behavior:auto}
}

/* rail */
.rail{background:var(--ink-2);color:var(--paper);padding:22px 0;border-top:1px solid var(--rule-dk)}
.rail-in{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center}
.rail-i{display:flex;align-items:baseline;gap:9px;font-size:13.5px;color:rgba(251,250,247,.66)}
.rail-i b{font-family:var(--f-mono);font-size:11px;color:var(--accent-lt);font-weight:500;letter-spacing:.08em}

/* sections */
.s{padding:clamp(64px,8vw,110px) 0}
.s--tint{background:var(--mist)}
.s-head{margin-bottom:clamp(36px,5vw,56px);max-width:64ch}
.s-head h2{margin:14px 0 16px}

/* services list */
.svc{border-top:1px solid var(--rule)}
.svc-i{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 40px;padding:30px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding-inline-start .22s}
@media(min-width:900px){.svc-i{grid-template-columns:132px minmax(0,1.05fr) minmax(0,1.15fr);align-items:start;gap:0 40px}}
.svc-i:hover{padding-inline-start:12px}
.svc-i:hover h3{color:var(--accent)}
.svc-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding-top:6px}
.svc-i h3{transition:color .18s}
.svc-i h3 small{display:block;font-family:var(--f-ar);font-size:14px;font-weight:400;color:var(--slate);margin-top:5px;direction:rtl}
html[dir="rtl"] .svc-i h3 small{font-family:var(--f-body);direction:ltr;text-align:right}
.svc-i p{font-size:15.5px;color:var(--slate);line-height:1.6;margin-top:2px}

/* cards */
.work{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1050px){.work{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--paper);padding:30px 26px 28px;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:background .2s}
.s--tint .card{background:var(--paper)}
.card:hover{background:#fff}
.card:hover .card-go{color:var(--accent);gap:12px}
.card-cl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.card h3{font-size:19.5px}
.card p{font-size:14.5px;color:var(--slate);line-height:1.58;flex:1}
.card-mt{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;border:1px solid var(--rule);padding:4px 8px;color:var(--slate)}
.card-go{font-size:13.5px;font-weight:600;color:var(--slate);display:flex;align-items:center;gap:7px;transition:.2s;margin-top:4px}

/* founder */
.fnd{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,60px)}
@media(min-width:900px){.fnd{grid-template-columns:.85fr 1.15fr;align-items:start}}
.fnd-port{background:var(--ink);color:var(--paper);padding:34px 30px;position:relative}
.fnd-port::before{content:"";position:absolute;top:0;inset-inline-start:0;width:3px;height:64px;background:var(--accent)}
.fnd-port .ar{font-family:var(--f-ar-disp);font-size:24px;font-weight:600;direction:rtl;margin-bottom:6px}
.fnd-port .en{font-family:var(--f-disp);font-size:20px;font-weight:600;color:var(--accent-lt)}
.fnd-port .ro{font-size:14px;color:rgba(251,250,247,.62);margin-top:14px;line-height:1.55}
.fnd-port .aw{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule-dk);font-size:13.5px;color:rgba(251,250,247,.72);line-height:1.55}
.fnd-port .aw b{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:6px;font-weight:500}
html[dir="rtl"] .fnd-port .aw b{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12.5px}
.roles{border-top:1px solid var(--rule);margin-top:26px}
.role{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:14.5px;align-items:baseline}
.role time{font-family:var(--f-mono);font-size:11.5px;color:var(--accent);flex:none;width:96px;letter-spacing:.04em;direction:ltr}
.role span{color:var(--slate)}

/* partners */
.ptn{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ptn div{background:var(--mist);padding:26px 18px;text-align:center}
.s .ptn div{background:var(--paper)}
.s--tint .ptn div{background:var(--mist)}
.ptn b{display:block;font-family:var(--f-disp);font-size:18px;font-weight:600}
.ptn span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:5px;display:block}
html[dir="rtl"] .ptn span{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12px}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:15px}
.cmp th,.cmp td{text-align:start;padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp thead th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);border-bottom:1px solid var(--ink);font-weight:500}
html[dir="rtl"] .cmp thead th{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px}
.cmp td:first-child{font-family:var(--f-ar);font-size:19px;direction:rtl;white-space:nowrap;color:var(--ink)}
.cmp .miss{color:#8A3B2A;font-weight:500}
.cmp .hit{color:var(--accent);font-weight:500}
.cmp tbody td{color:var(--slate)}

/* steps */
.steps{border-top:1px solid var(--rule)}
.step{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 40px;padding:28px 0;border-bottom:1px solid var(--rule)}
@media(min-width:820px){.step{grid-template-columns:132px minmax(0,1fr) 180px;align-items:start;gap:0 40px}}
.step-n{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-top:6px}
html[dir="rtl"] .step-n{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px}
.step h3{margin-bottom:8px}
.step p{color:var(--slate);font-size:15.5px;max-width:60ch}
.step-t{font-family:var(--f-mono);font-size:11.5px;color:var(--slate);padding-top:8px}
html[dir="rtl"] .step-t{font-family:var(--f-ar);font-size:13px}

/* case study */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--rule-dk);border:1px solid var(--rule-dk);margin-top:34px}
.meta div{background:var(--ink);padding:18px 20px}
.meta b{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-lt);font-weight:500;margin-bottom:6px}
html[dir="rtl"] .meta b{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12px}
.meta span{color:var(--paper);font-size:15px}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:34px 0}
.figs div{background:var(--mist);padding:26px 22px}
.figs b{display:block;font-family:var(--f-disp);font-size:clamp(30px,4vw,42px);font-weight:600;color:var(--ink);line-height:1}
html[dir="rtl"] .figs b{font-family:var(--f-ar-disp)}
.figs span{display:block;margin-top:10px;font-size:13.5px;color:var(--slate);line-height:1.5}
.pull{border-inline-start:3px solid var(--accent);padding:6px 0 6px 24px;margin:30px 0;font-family:var(--f-disp);font-size:clamp(20px,2.6vw,25px);line-height:1.4;color:var(--ink)}
html[dir="rtl"] .pull{padding:6px 24px 6px 0;font-family:var(--f-ar-disp);line-height:1.6}
.pull cite{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-style:normal;margin-top:14px}
html[dir="rtl"] .pull cite{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px}
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,56px)}
@media(min-width:940px){.cs-grid{grid-template-columns:minmax(0,1fr) 260px}}
.aside-box{border:1px solid var(--rule);padding:24px;align-self:start}
.aside-box h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:14px}
html[dir="rtl"] .aside-box h4{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px}
.aside-box a{display:block;text-decoration:none;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--slate)}
.aside-box a:last-child{border-bottom:0}
.aside-box a:hover{color:var(--accent)}

/* CTA */
.cta-s{background:var(--ink);color:var(--paper);padding:clamp(60px,8vw,96px) 0}
.cta-g{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
@media(min-width:880px){.cta-g{grid-template-columns:1.2fr .8fr}}
.cta-s h2{color:var(--paper);margin-bottom:16px}
.cta-s p{color:rgba(251,250,247,.7);max-width:50ch}
.cta-box{border:1px solid var(--rule-dk);padding:26px}
.cta-box b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lt);font-weight:500}
html[dir="rtl"] .cta-box b{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:13px}
.cta-box a{display:block;margin-top:12px;font-size:16px;text-decoration:none;color:var(--paper);border-bottom:1px solid transparent;width:fit-content}
.cta-box a:hover{border-bottom-color:var(--accent)}

/* footer */
.ft{background:var(--ink-2);color:rgba(251,250,247,.6);padding:44px 0 30px;font-size:14px}
.ft-logo{display:block;width:156px;height:auto;margin-bottom:26px;opacity:.9}
.ft-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;padding-bottom:30px;border-bottom:1px solid var(--rule-dk)}
.ft h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lt);font-weight:500;margin-bottom:12px}
.ft a{display:block;text-decoration:none;padding:4px 0;color:rgba(251,250,247,.62)}
.ft a:hover{color:var(--paper)}
.ft-bt{padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:rgba(251,250,247,.42)}
/* form */
.form{display:grid;gap:16px;max-width:520px}
.field label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--accent-lt);margin-bottom:7px}
html[dir="rtl"] .field label{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12.5px}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--rule-dk);
 color:var(--paper);padding:12px 14px;font:inherit;font-size:15.5px}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form button{background:var(--accent);color:#fff;border:0;padding:14px 24px;font:inherit;
 font-weight:600;font-size:15px;cursor:pointer;justify-self:start}
.form button:hover{background:var(--logo-blue)}
.note{font-size:13.5px;color:rgba(251,250,247,.55);margin-top:4px}
.msg{padding:12px 14px;border:1px solid var(--accent);color:var(--accent-lt);font-size:14.5px}
/* index lists */
.idx{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){.idx{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* imported product screenshots */
.shot{margin:30px 0;border:1px solid var(--rule);background:var(--paper)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-size:13.5px;color:var(--slate);padding:12px 16px;border-top:1px solid var(--rule)}
.shot-row{display:grid;gap:18px;margin:30px 0}
@media(min-width:760px){.shot-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shot-row .shot{margin:0}

/* external video reference — a deliberate link, not an embed */
.vidlink{display:flex;align-items:center;gap:18px;border:1px solid var(--rule);
 padding:18px 20px;margin:30px 0;text-decoration:none;background:var(--paper);
 transition:border-color .18s,background .18s}
.vidlink:hover{border-color:var(--accent);background:#fff}
.vidlink-ico{flex:none;width:46px;height:46px;border:1.5px solid var(--accent);border-radius:50%;
 display:grid;place-items:center;color:var(--accent);transition:.18s}
.vidlink:hover .vidlink-ico{background:var(--accent);color:#fff}
.vidlink-ico svg{width:16px;height:16px;margin-inline-start:3px}
/* play arrows are NOT mirrored in RTL — they denote the media timeline, not reading order */
html[dir="rtl"] .vidlink-ico svg{margin-inline-start:3px}
.vidlink-tx b{display:block;font-family:var(--f-disp);font-size:18px;font-weight:600;color:var(--ink);line-height:1.3}
html[dir="rtl"] .vidlink-tx b{font-family:var(--f-ar);}
.vidlink-tx span{display:block;font-size:13.5px;color:var(--slate);margin-top:5px}
.s--tint .vidlink{background:var(--mist)}

/* two images sharing one caption */
.shot-pair{margin:30px 0;border:1px solid var(--rule);background:var(--paper)}
/* stacked, one above the other; never upscaled beyond natural size */
.shot-pair-imgs{display:grid;gap:1px;grid-template-columns:1fr;background:var(--rule)}
.shot-pair-imgs img{display:block;width:auto;max-width:100%;height:auto;
 margin-inline:auto;background:var(--paper)}
.shot-pair figcaption{font-size:13.5px;color:var(--slate);padding:12px 16px;border-top:1px solid var(--rule);line-height:1.6}
.s--tint .shot-pair{background:var(--mist)}

/* archive access — each coverage period is a live query tool */
.arch{border-top:1px solid var(--rule);margin:26px 0 10px}
.arch-i{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 28px;padding:20px 0;
 border-bottom:1px solid var(--rule);text-decoration:none;transition:padding-inline-start .2s}
@media(min-width:760px){.arch-i{grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:0 28px}}
.arch-i:hover{padding-inline-start:10px}
.arch-i:hover .arch-t{color:var(--accent)}
.arch-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
html[dir="rtl"] .arch-lbl{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12.5px}
.arch-t{font-size:16.5px;color:var(--ink);font-weight:500;transition:color .18s}
.arch-go{font-size:13.5px;font-weight:600;color:var(--slate);white-space:nowrap}
.arch-i:hover .arch-go{color:var(--accent)}
.arch-i--live .arch-lbl{color:var(--accent)}

/* success stories — external evidence documents */
.docs{border-top:1px solid var(--rule);margin-top:8px}
.doc-i{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 32px;padding:26px 0;
 border-bottom:1px solid var(--rule);text-decoration:none;transition:padding-inline-start .2s}
@media(min-width:860px){.doc-i{grid-template-columns:150px minmax(0,1fr) 132px;align-items:start;gap:0 32px}}
.doc-i:hover{padding-inline-start:10px}
.doc-i:hover .doc-t{color:var(--accent)}
.doc-src{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--accent);padding-top:5px}
html[dir="rtl"] .doc-src{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:12.5px}
.doc-t{font-family:var(--f-disp);font-size:19px;font-weight:600;color:var(--ink);line-height:1.3;
 transition:color .18s;display:block}
html[dir="rtl"] .doc-t{font-family:var(--f-ar)}
.doc-d{font-size:15px;color:var(--slate);line-height:1.6;margin-top:8px;display:block;max-width:60ch}
.doc-go{font-size:13px;font-weight:600;color:var(--slate);white-space:nowrap;padding-top:6px}
.doc-i:hover .doc-go{color:var(--accent)}
