/* ── Discognia — one stylesheet for every page ────────────────────────────
   Until now the site was a single file with its CSS inside it, which was
   right when there was one page. There are four now, so the rules live here
   instead: a colour changed in one place changes everywhere, and no page can
   quietly drift away from the others.

   Three colours and one typeface. A company that sells judgement should not
   need a fourth of anything. */
:root{
  --ink:#0E1116; --ink-2:#141922; --line:rgba(244,245,246,.11);
  --paper:#F4F5F6; --dim:rgba(244,245,246,.58); --dimmer:rgba(244,245,246,.40);
  --signal:#00C2A8;
  --w:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--paper);
  font-family:Sora,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:300; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--w); margin-inline:auto; padding-inline:clamp(22px,5vw,56px)}
section{padding:clamp(78px,10vw,132px) 0; border-top:1px solid var(--line)}
h2{font-weight:400; font-size:clamp(30px,4.2vw,44px); line-height:1.24; letter-spacing:-.4px}
.eyebrow{font-size:12.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--signal); font-weight:600; margin-bottom:26px}
.lead{font-size:clamp(18px,2.1vw,21px); color:var(--dim); max-width:64ch; margin-top:22px}

/* ── header ── */
header{position:sticky; top:0; z-index:50; background:rgba(14,17,22,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:24px}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; flex:none}
.brand svg{width:30px; height:30px; display:block}
/* the name is the logotype, so it is set in the logotype's face — Poppins
   Light at the same tracking as the lock-up — not in the page's reading face. */
.bname{display:flex; flex-direction:column; gap:3px; line-height:1}
.brand b{font-family:Poppins,-apple-system,"Segoe UI",sans-serif;
  font-weight:300; font-size:19px; letter-spacing:.19em; display:block}
/* the descriptor: small enough and tracked wide enough to read as a rule under
   the word rather than as a second line of text arguing with it */
.brand i{font-family:Poppins,-apple-system,"Segoe UI",sans-serif; font-style:normal;
  font-size:8.5px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--dimmer); white-space:nowrap; display:block}
/* on a phone the header carries nothing but the brand, so there is room for
   the descriptor — it only steps out below 360px, where there genuinely isn't. */
@media(max-width:359px){ .brand i{display:none} }
nav{display:flex; gap:clamp(16px,2.6vw,32px); align-items:center}
nav a{text-decoration:none; color:var(--dim); font-size:14.5px; letter-spacing:.06em;
  transition:color .2s}
nav a:hover{color:var(--paper)}
@media(max-width:860px){ nav a.hide-s{display:none} }

/* ── hero ── */
.hero{padding:clamp(96px,15vw,190px) 0 clamp(70px,9vw,110px); border-top:0}
.hero .mark{width:clamp(78px,10vw,104px); height:clamp(78px,10vw,104px);
  margin-bottom:clamp(38px,5vw,54px)}
.hero h1{font-weight:200; font-size:clamp(38px,6.6vw,74px); line-height:1.14;
  letter-spacing:-1.6px; max-width:17ch}
.hero h1 em{font-style:normal; color:var(--signal)}
.hero .lead{margin-top:30px; font-size:clamp(18px,2.3vw,22px); max-width:56ch}
.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:44px}
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  padding:14px 26px; border-radius:999px; font-size:15px; letter-spacing:.04em;
  border:1px solid var(--line); color:var(--paper); transition:.22s}
.btn:hover{border-color:rgba(244,245,246,.34); transform:translateY(-1px)}
.btn.solid{background:var(--paper); color:var(--ink); border-color:var(--paper); font-weight:400}
.btn.solid:hover{background:#fff}
.btn svg{width:18px; height:18px; flex:none}

/* ── statement ── */
.statement p{font-size:clamp(21px,2.9vw,30px); font-weight:200; line-height:1.62;
  max-width:30ch; letter-spacing:-.3px}
.statement p + p{margin-top:26px; font-size:clamp(17px,1.9vw,19px); font-weight:300;
  color:var(--dim); max-width:62ch; line-height:1.85; letter-spacing:0}

/* ── products ── */
.cards{display:grid; gap:20px; margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
/* One card does not stretch across a row built for three. A lone product reads
   as a deliberate choice at this width and as an accident at full width. */
.cards:not(:has(> :nth-child(2))){max-width:620px}
.card{background:var(--ink-2); border:1px solid var(--line); border-radius:16px;
  padding:34px 30px 30px; display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s}
.card:hover{border-color:rgba(244,245,246,.24); transform:translateY(-3px)}
/* The kind and the status tag sit on one line and wrap to two when they cannot.
   In English "Safety device / In development" fits a phone; in Turkish
   "Güvenlik cihazı / Geliştirme aşamasında" is eleven pixels too long, and
   without the wrap it pushed out of the card. */
.card .kind{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dimmer); font-weight:600; display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap; row-gap:8px}
.card h3{margin-top:16px; font-weight:400; font-size:23px; letter-spacing:.2px}
.card p{margin-top:14px; color:var(--dim); font-size:15.5px; line-height:1.8; flex:1}
.card .go{margin-top:26px; font-size:14px; color:var(--signal); text-decoration:none;
  letter-spacing:.05em; display:inline-flex; align-items:center; gap:8px}
.card .go span{transition:transform .2s}
.card:hover .go span{transform:translateX(4px)}

/* A product that is not finished says so on its own card. A visitor who finds
   out later feels misled; one who is told up front feels informed. */
.tag{font-size:10.5px; letter-spacing:.18em; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(0,194,168,.42); color:var(--signal); font-weight:600;
  white-space:nowrap}
.tag.soon{border-color:rgba(244,245,246,.22); color:var(--dimmer)}

/* The filing reference. It sits under the description rather than beside the
   name, because it is evidence a serious reader goes looking for and noise to
   everybody else. Monospaced: it is a number to be copied, not read. */
.pat{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11.5px; letter-spacing:.08em; color:var(--dimmer); text-transform:uppercase}
.pat b{font-weight:500; color:var(--dim); font-family:ui-monospace,SFMono-Regular,
  Menlo,Consolas,monospace; letter-spacing:.04em; text-transform:none}

/* ── numbered points, as cards ───────────────────────────────────────────
   These were a stacked list: a number in a narrow column, the text in a wide
   one, a hairline between each. It read as a list of rules rather than as four
   equal things, and at full width each point ran to seventy-odd characters on
   one line, so the eye had to travel the whole page and come back for the next.

   As cards they read as a set. Two across on a desktop puts each point in its
   own frame at about sixty-five characters — a comfortable measure — and the
   grid falls to one column on a phone by itself.

   The markup did not change. The same <div class="row"><div class="n">…
   structure that made a list makes a card, which means all fifteen pages in
   three languages moved together and not one string needed re-translating. */
/* Two columns, stated rather than inferred. auto-fit with a 320px floor found
   room for three at 1180px, which put each point back down to thirty-six
   characters a line — narrower than the list it replaced. Two is the number
   this content wants; one below 760px. */
.rows{display:grid; gap:20px; margin-top:48px; grid-template-columns:1fr}
@media(min-width:760px){ .rows{grid-template-columns:repeat(2,1fr)} }
.row{display:block; padding:32px 30px 30px;
  background:rgba(244,245,246,.035); border:1px solid var(--line);
  border-radius:16px; transition:border-color .25s, transform .25s}
.row:hover{border-color:rgba(244,245,246,.22); transform:translateY(-3px)}
/* The number is the card's label now, not a column beside it: teal, small and
   tracked, the same treatment every other eyebrow on the site gets. */
.row .n{font-size:12px; letter-spacing:.24em; color:var(--signal); font-weight:600;
  display:block; margin-bottom:16px}
.row h3{font-weight:400; font-size:20px; letter-spacing:.1px}
.row p{color:var(--dim); font-size:15.5px; margin-top:12px; line-height:1.8}
@media(max-width:520px){
  .rows{gap:16px}
  .row{padding:26px 22px 24px}
}

/* ── contact ── */
/* auto-fit left four cards as three-plus-one, which reads as a card that
   did not fit rather than a layout. Four, two, one — stated, not inferred. */
.ways{display:grid; gap:18px; margin-top:52px; grid-template-columns:1fr}
@media(min-width:600px){ .ways{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){ .ways{grid-template-columns:repeat(4,1fr)} }
/* with two of the four cards held back, two columns is the honest layout;
   restore nothing when the numbers land — the rules above already handle it. */
.ways:has(> :nth-child(2):last-child){grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.way{background:var(--ink-2); border:1px solid var(--line); border-radius:16px;
  padding:28px 26px; display:flex; flex-direction:column; text-decoration:none;
  transition:border-color .25s, transform .25s}
a.way:hover{border-color:rgba(244,245,246,.26); transform:translateY(-3px)}
.way .ic{width:38px; height:38px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; border:1px solid var(--line);
  background:rgba(244,245,246,.04)}
.way .ic svg{width:19px; height:19px; display:block}
.way .lab{margin-top:20px; font-size:11.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--dimmer); font-weight:600}
.way .val{margin-top:9px; font-size:17.5px; font-weight:300; letter-spacing:.01em;
  line-height:1.5; word-break:break-word}
.way .sub{margin-top:8px; font-size:14px; color:var(--dim); line-height:1.7}
.way.wa .ic{border-color:rgba(37,211,102,.42); background:rgba(37,211,102,.10)}
.way.wa .ic svg{fill:#25D366}

/* ── product page ── */
.phero{padding:clamp(74px,11vw,128px) 0 clamp(46px,6vw,72px); border-top:0}
.phero .kind{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--dimmer); font-weight:600; display:flex; align-items:center; gap:14px}
.phero h1{margin-top:22px; font-weight:200; font-size:clamp(36px,5.8vw,62px);
  line-height:1.14; letter-spacing:-1.3px; max-width:16ch}
.phero .lead{max-width:60ch}
.back{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--dim); font-size:14px; letter-spacing:.05em; margin-bottom:34px}
.back:hover{color:var(--paper)}
.note{margin-top:44px; border:1px solid rgba(0,194,168,.30);
  background:rgba(0,194,168,.06); border-radius:14px; padding:24px 26px;
  color:var(--dim); font-size:15.5px; line-height:1.8; max-width:72ch}
.note b{color:var(--paper); font-weight:400}

/* ── footer ── */
footer{border-top:1px solid var(--line); padding:56px 0 66px; color:var(--dimmer);
  font-size:14px}
footer .wrap{display:flex; gap:28px; justify-content:space-between; flex-wrap:wrap;
  align-items:flex-end}
footer a{color:var(--dim); text-decoration:none}
footer a:hover{color:var(--paper)}
.flinks{display:flex; gap:22px; flex-wrap:wrap}

/* A page with five products needs to separate the ones you can use today from
   the ones you cannot, without hiding either. */
.group{margin-top:clamp(66px,8vw,98px)}
.group .gh{font-weight:400; font-size:clamp(23px,3.1vw,31px); letter-spacing:-.3px}
.group .gsub{font-size:16.5px; color:var(--dim); max-width:62ch; margin-top:14px}

.also{margin-top:30px; font-size:15px; color:var(--dimmer)}
.also a{color:var(--dim); text-decoration:none; border-bottom:1px solid rgba(244,245,246,.22)}
.also a:hover{color:var(--paper)}

/* ── buying ───────────────────────────────────────────────────────────────
   Every product card ends with two actions on one line: go and see the thing,
   or start buying it. The buy action is a WhatsApp link with the product's
   name already written into the message, so the first thing the visitor has
   to do is press send — not work out how to describe what they want. */
.acts{display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap}
.acts .go{margin-top:0}
.buy{margin-inline-start:auto; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-size:13.5px; letter-spacing:.04em; padding:9px 16px;
  border-radius:999px; border:1px solid rgba(0,194,168,.45); color:var(--signal);
  background:rgba(0,194,168,.08); transition:.2s; white-space:nowrap}
.buy:hover{background:rgba(0,194,168,.16); border-color:rgba(0,194,168,.75)}
.buy svg{width:15px; height:15px; fill:currentColor; flex:none}
@media(max-width:420px){ .buy{margin-inline-start:0} }

/* two numbers on one card: each stays tappable, and the second sits closer to
   the first than a new line would, so they read as one pair. */
.way .val + .val{margin-top:4px}
.way .val .tel{text-decoration:none; color:inherit; border-bottom:1px solid rgba(244,245,246,.16)}
.way .val .tel:hover{border-bottom-color:rgba(244,245,246,.55)}

/* ══ authority ═══════════════════════════════════════════════════════════
   A company that files patents should not have to say "we are serious" on
   its site; the layout should already be behaving that way. What follows is
   the vocabulary that does it: a numbered rule under every section heading,
   a band of facts that can be checked, and a founders block where two people
   are named rather than a stock photo of a team. */

.facts{display:grid; gap:1px; margin-top:54px; background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  grid-template-columns:1fr}
@media(min-width:560px){ .facts{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .facts{grid-template-columns:repeat(4,1fr)} }
.fact{background:var(--ink); padding:30px 26px}
.fact b{display:block; font-weight:200; font-size:clamp(30px,3.6vw,40px);
  letter-spacing:-1px; line-height:1}
.fact span{display:block; margin-top:12px; font-size:13px; color:var(--dim);
  line-height:1.65}

/* ── people ── */
.people{display:grid; gap:20px; margin-top:52px; grid-template-columns:1fr}
/* Stretched to a common height on purpose: two founders side by side should be
   two cards of the same size. What made that unbearable before was the length
   of the text, not the alignment — so the long half of each biography now folds
   away behind "Read more" and both cards open at a comparable size. */
/* …but only while both are folded. Once somebody opens one biography the two
   lengths are genuinely different, and holding them to a common height would
   leave hundreds of pixels of empty card under the shorter one. So the moment
   any card is open, the row stops stretching and each card takes the height of
   its own text. A browser without :has() simply keeps stretching, which is the
   behaviour this had before — the fallback is the old design, not a broken one. */
.people:has(.more[open]){align-items:start}
@media(min-width:820px){ .people{grid-template-columns:repeat(2,1fr)} }
/* While a single founder is listed, two columns would strand the card in the
   left half of the row with an empty half beside it. One centred column
   instead — and the rule stops applying by itself the moment a second
   .person is added back, so nothing has to be remembered later. */
@media(min-width:820px){
  .people:has(> .person:only-child){grid-template-columns:minmax(0,760px);
    justify-content:center}
}
.person{background:var(--ink-2); border:1px solid var(--line); border-radius:18px;
  padding:34px 32px 32px; display:flex; flex-direction:column}
/* Both founders now have a photograph, and the two are drawn to the same size
   and the same radius so they read as a set. The initials block is kept rather
   than deleted: it is what a third person's card falls back to on the day they
   are added and before their photograph arrives, and an empty square there
   would be worse than a pair of letters. */
.person .mono,.person .avatar{width:64px; height:64px; border-radius:17px;
  border:1px solid var(--line); display:block}
.person .mono{display:flex; align-items:center; justify-content:center;
  font-family:Poppins,sans-serif; font-weight:300; font-size:21px;
  letter-spacing:.06em; color:var(--signal); background:rgba(0,194,168,.07)}
.person .avatar{object-fit:cover; object-position:50% 22%;
  filter:grayscale(1) contrast(1.04); background:var(--ink)}
.person h3:not(.sect){margin-top:24px; font-weight:400; font-size:24px; letter-spacing:.1px}
.person .role{margin-top:8px; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dimmer); font-weight:600; line-height:1.8}
.person p{margin-top:18px; color:var(--dim); font-size:15.5px; line-height:1.82}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.tags span{font-size:12px; letter-spacing:.05em; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--dim)}
/* The link at the foot of a founder's card is pinned to the foot. The gap this
   leaves in the shorter card now falls between two controls — "Read more" and
   the link — where it reads as spacing, instead of between the last line of the
   biography and a control, where it read as a hole. And when either card is
   opened, .people:has(.more[open]) stops the stretching and the gap disappears
   entirely. */
.person .go{margin-top:auto; padding-top:24px}

/* ── an app-like bar on phones ───────────────────────────────────────────
   On a phone this reads as a product rather than a brochure, and it puts the
   two things a visitor actually wants — the products and a way to talk to a
   person — inside thumb reach on every page. It is hidden on anything wider,
   where the header already does the job. */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:rgba(14,17,22,.92); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; color:var(--dimmer); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; padding:8px 4px; border-radius:12px; min-height:52px;
  justify-content:center}
.tabbar a svg{width:21px; height:21px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tabbar a.wa svg{fill:currentColor; stroke:none}
.tabbar a:active{background:rgba(244,245,246,.06)}
.tabbar a.on{color:var(--paper)}
@media(max-width:720px){
  .tabbar{display:flex}
  body{padding-bottom:78px}
  /* the header keeps the name only; the tab bar has the navigation, and five
     links plus a logotype do not fit in 360 pixels without scrolling sideways */
  header nav{display:none}
  header .wrap{height:64px}
  /* thumbs are not mice: nothing tappable gets smaller than this */
  .btn{padding:15px 24px; font-size:15.5px}
  .buy{padding:11px 18px; font-size:14px}
  .way{padding:26px 24px}
  /* 25 pixels is a link. 44 is something a thumb can hit without aiming. */
  .card .go, .person .go, .back{padding:11px 0; min-height:44px; align-items:center}
  .also a{padding:3px 0}
}

/* ── a record, not a claim ────────────────────────────────────────────────
   Twenty years of shipped work is the strongest thing on this page, and it is
   wasted inside a paragraph. Set as a dated list it can be scanned in three
   seconds and checked in ten — which is what makes a company read as rooted
   rather than as new and confident. */
/* The small label above a founder's milestone list or tag row. It is an h4
   rather than a styled div because it genuinely heads the block below it, and
   a screen reader that can jump between headings should be able to reach it. */
.person h3.sect{margin-top:34px; font-weight:600; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dimmer)}
.person h3.sect + .mile, .person h3.sect + .tags{margin-top:12px}
.mile{margin-top:24px; border-top:1px solid var(--line)}
.mile div{display:grid; grid-template-columns:74px 1fr; gap:16px; padding:13px 0;
  border-bottom:1px solid var(--line); align-items:baseline}
.mile b{font-weight:600; font-size:12px; letter-spacing:.14em; color:var(--dimmer);
  font-variant-numeric:tabular-nums}
.mile span{font-size:14.5px; color:var(--dim); line-height:1.65}
/* A link inside a milestone row — an ORCID iD, a Scholar profile. It is the
   value of the row, so it takes the row's colour and earns an underline only
   for being a link, rather than shouting in the accent colour. */
.mile a{color:var(--paper); text-decoration:none;
  border-bottom:1px solid rgba(0,194,168,.45); padding-bottom:1px;
  transition:border-color .2s}
.mile a:hover{border-bottom-color:var(--signal)}
/* Some labels are words rather than years — PEER REVIEW, CONFERENCES — and at
   74px they broke across two lines while the year labels beside them did not,
   which made the column look accidental. */
/* 106px fitted the English labels and not the translations: Turkish
   KONFERANSLAR needs 121px and pushed out of its column. Sized to the longest
   label in any of the three languages, with room for the next one. */
.mile.wide div{grid-template-columns:132px 1fr}
@media(max-width:420px){
  /* 62px was four pixels short of PHOENIX, the longest label in the list, and
     the word spilled past its column on a phone. */
  .mile div{grid-template-columns:72px 1fr; gap:12px}
  .mile.wide div{grid-template-columns:1fr; gap:4px}
}

/* ── REVERTA figure ──────────────────────────────────────────────────────────
   The label lives in HTML rather than inside the drawing, so it stays readable
   when the picture is scaled down to a phone. */
.rvfig{display:grid; gap:26px; align-items:center; margin-top:44px;
  grid-template-columns:1fr}
.rvfig img{width:100%; height:auto; display:block; max-width:620px; margin:0 auto}
.rvkey div{display:flex; align-items:center; gap:11px; font-size:14px;
  letter-spacing:.03em; color:var(--paper)}
.rvkey .sw{width:15px; height:15px; border-radius:4px; flex:none;
  background:rgba(0,194,168,.14); border:1.5px solid rgba(0,194,168,.62)}
.rvkey p{margin-top:12px; color:var(--dim); font-size:14.5px; line-height:1.78; max-width:46ch}
@media(min-width:900px){ .rvfig{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:44px} }

/* ── product marks on the cards ──────────────────────────────────────────────
   Each product carries its own icon at the top of its card. They come from
   different palettes on purpose — they are separate products, not skins of one
   — so the tile is kept small and given the same radius everywhere, which is
   what makes a row of unlike marks still read as one set. */
.plogo{width:46px; height:46px; border-radius:11px; display:block; margin-bottom:20px;
  flex:none; object-fit:contain}

/* The staff panel. A bordered pill in the header so it reads as a door rather
   than another section of this page, and a quiet line in the footer for people
   who already know it is there. Both point off this site entirely — the panel
   lives on its own machine, behind its own sign-in. */
nav a.panel{border:1px solid rgba(244,245,246,.24); border-radius:999px;
  padding:6px 15px; color:var(--paper); font-size:13.5px}
nav a.panel:hover{border-color:var(--signal); color:var(--signal)}
.flinks a.staff{color:var(--dimmer)}
.flinks a.staff:hover{color:var(--signal)}
@media(max-width:520px){ nav a.panel{padding:5px 11px; font-size:12.5px} }

/* ------------------------------------------------------ language switcher ---
   Three two-letter links in the header. Deliberately quiet: somebody who wants
   another language goes looking for it, and somebody who does not should not
   have three more things competing with the navigation. */
.langs{display:inline-flex;gap:2px;margin-inline-start:14px;align-items:center}
.langs a{font-size:.68rem;letter-spacing:.1em;font-weight:700;color:var(--dimmer);
  border:1px solid var(--line);border-radius:7px;padding:4px 7px;text-decoration:none}
.langs a:hover{color:var(--paper)}
.langs a.on{color:var(--ink);background:var(--signal);border-color:var(--signal)}
@media(max-width:560px){ .langs{margin-inline-start:8px} .langs a{padding:4px 5px} }

/* ----------------------------------------------------------- product lockup ---
   A product's own logo above its heading. U-DIP has a brand of its own — its
   own geometry and its own amber — and this is the one place on the site where
   it is shown whole rather than as the bare mark. Sized by height so the
   wordmark keeps its proportions whatever the file's pixel dimensions are. */
/* `width:auto` is not enough here, and the reason is worth writing down.
   The product card is `display:flex; flex-direction:column`, so its CROSS axis
   is the horizontal one and every child defaults to `align-self:stretch` — a
   block-level image therefore fills the card's width and, with a fixed height,
   comes out squashed. The wordmark rendered 600 px wide and 30 px tall,
   letters and all. `align-self:start` is what restores the ratio in a flex
   column; `justify-self:start` is the equivalent if the container is ever
   changed to a grid, and costs nothing while it is not. */
.plockup{height:52px;width:auto;align-self:start;justify-self:start;
  display:block;margin:0 0 20px}
@media(max-width:560px){ .plockup{height:42px} }

/* U-DIP's own logo on its product card, in place of the bare mark. It is the
   one product with a wordmark of its own, so it is the one card that shows a
   wordmark instead of a square and a heading. */
.plockup-card{height:30px;width:auto;align-self:start;justify-self:start;
  display:block;margin:0 0 14px}

/* Present to a screen reader and a search engine, absent to the eye. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ── the closing block of the engines section ────────────────────────────
   The domain chips are the content here rather than a footnote to a
   biography, so they are set larger than the ones on a founder's card, and
   the question that follows them is set as a statement rather than as body
   copy — it is the last thing the section says. */
.tags.domains{margin-top:26px; gap:10px}
.tags.domains span{font-size:13.5px; padding:9px 16px; color:var(--paper)}
.closer{margin-top:30px; max-width:52ch; font-size:clamp(18px,2.1vw,22px);
  font-weight:200; line-height:1.6; color:var(--paper)}

/* A footnote inside the statement section. Without this it inherits the
   section's 30px display size, because `.statement p` is more specific than
   `.small` — and the line under the numbers came out shouting louder than the
   numbers it belongs to. */
.statement p.small{font-size:13.5px; font-weight:300; letter-spacing:0;
  line-height:1.75; max-width:62ch}

/* ── the rest of a founder's biography ───────────────────────────────────
   A <details>, so it works with no JavaScript, is keyboard-operable and is
   announced properly by a screen reader — and so that a browser's find-in-page
   can still reach the folded text.

   The control used to carry `margin-top:auto`, to line the two "Read more"
   links up at the foot of both cards. That was the wrong trade. The two cards
   are stretched to equal height, so all the slack of the shorter one collected
   in one place — and pushing the control down opened a hole between the last
   line of the biography and the link, which reads as a rendering fault rather
   than as alignment.

   Now the text simply runs on, and the slack falls below the last line where
   it looks like padding. The two links sit at slightly different heights; that
   is what text of different lengths does, and nobody reads it as a defect. */
.person .more > summary{list-style:none; cursor:pointer; margin-top:26px;
  display:inline-flex; align-items:center; gap:9px; font-size:14px;
  color:var(--signal); letter-spacing:.05em; padding:8px 0; min-height:38px;
  -webkit-tap-highlight-color:transparent}
/* Safari draws its own triangle unless both of these are removed. */
.person .more > summary::-webkit-details-marker{display:none}
.person .more > summary::marker{content:""}
.person .more > summary::after{content:""; width:7px; height:7px; display:block;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .2s}
.person .more[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.person .more > summary:hover{color:var(--paper)}
.person .more .mc{display:none}
.person .more[open] .mo{display:none}
.person .more[open] .mc{display:inline}
/* The first thing revealed should not collide with the control above it. */
.person .more > summary + *{margin-top:20px}


/* ── flush right edges ───────────────────────────────────────────────────
   Running text is justified across the site: leads, statements, numbered rows,
   biographies, product cards, milestone rows, the U-DIP flow blocks, the pull
   quotes. The right edge of a column is a straight line.

   What makes it work at these widths is hyphenation. A justified column has to
   put its slack somewhere; restricted to whole words, a thirty-six-character
   product card puts it between the words where it shows. Allowed to break a
   word, the same column reads like a newspaper column — which is this measure,
   justified, and has been for two centuries. `hyphenate-limit-chars` keeps the
   breaks decent: nothing shorter than seven letters is broken, and never with
   fewer than three letters either side.

   Where the line is drawn, and why it is a measurement and not a preference:
   below about thirty-five characters justification stops working. Measured on
   this site, with hyphenation unavailable — the worst case — the widest space
   inside a justified paragraph comes out at

       69 characters   0.45em      a lead, invisible
       59 characters   0.86em      a biography, fine
       36 characters   0.95em      a product card, the practical floor
       33 characters   1.59em      a statistic caption
       30 characters   2.12em      a KPI card
       23 characters   4.20em      a verdict card — a hole four spaces wide

   So the small cards keep their ragged edge. Forcing them flush would replace
   an uneven right margin with holes in the middle of the sentence, which is the
   same complaint one step further in.

   Arabic script justifies by stretching spaces and never breaks a word, so
   hyphenation is switched off for Persian rather than asked for and ignored.

   `text-align: justify` only affects lines that WRAP. The last line of any
   paragraph — and so the whole of a one-line label — is left alone. */
.lead, .statement p + p, .row p, .person p, .baseline, .say, .srcs li,
.mile span, .card p, .flow .stage p{
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto;
  hyphenate-limit-chars:7 3 3;
}
html[lang="fa"] p, html[lang="fa"] li, html[lang="fa"] .lead,
html[lang="fa"] span{ hyphens:none }