/* Shared styles for the home page and /company/, on top of the tokens in styles.css.
   Started as the /concept/ prototype, which keeps its own copy for comparison. */

html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The three fixed statements exist in both languages. Google Translate marks the document
   with .translated-ltr; the approved Romanian wording then replaces its own rendering. */
.x-ro{display:none}
.translated-ltr .x-ro{display:inline}
.translated-ltr .x-en{display:none}

/* Google Translate's own bar is not part of the page. */
.goog-te-banner-frame,.skiptranslate iframe,#goog-gt-tt{display:none !important}
body{top:0 !important}

.lang{
  height:36px;min-width:44px;padding:0 10px;background:transparent;cursor:pointer;
  border:1px solid rgba(252,251,248,.28);border-radius:var(--radius-control);
  font:500 var(--mono-1)/1 var(--font-mono);letter-spacing:var(--tr-eyebrow);color:var(--paper-000);
}
.lang:hover{border-color:var(--paper-000)}

.c-dark{background:var(--basalt-950);color:var(--text-body)}

/* ---------- hero ---------- */

.c-hero{background:var(--basalt-950);padding:var(--s128) 0 var(--s96)}
.c-display{
  font-size:clamp(40px,6.6vw,104px);line-height:1;letter-spacing:-.03em;
  max-width:16ch;color:var(--paper-000);
}
.c-lede{font-size:clamp(17px,1.6vw,22px);line-height:1.45;max-width:44ch;
  color:var(--basalt-200);margin-top:var(--s32)}
.c-hero .domains span + span::before{content:"";}

.c-statement{font-size:clamp(32px,4.6vw,68px);line-height:1.04;letter-spacing:-.026em;max-width:20ch}

.c-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s64);align-items:end}

.k{font-family:var(--font-mono);font-size:var(--eyebrow);font-weight:500;letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s12)}
.num{font-family:var(--font-mono);font-size:var(--mono-1);letter-spacing:var(--tr-mono);color:var(--accent)}

.tag{
  display:inline-block;padding:4px 9px;border:1px solid var(--border-strong);
  border-radius:var(--radius-control);font-family:var(--font-mono);font-size:var(--eyebrow);
  font-weight:500;letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-strong);
}
.tag.accent{border-color:var(--accent);color:var(--accent)}

/* ---------- 2. illustrative example ---------- */

.demo{margin-top:var(--s64);background:var(--basalt-950);color:var(--text-body);padding:var(--s32)}
.demo-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s16);
  padding-bottom:var(--s24);border-bottom:1px solid var(--border-hairline)}
.demo-body{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--s48);padding:var(--s32) 0}

.hours{display:grid;grid-template-columns:repeat(7,1fr) 0;margin-left:76px;
  font-family:var(--font-mono);font-size:var(--eyebrow);color:var(--text-faint)}
.hours span{transform:translateX(-50%);width:max-content}

.lanes{position:relative;margin-top:var(--s8)}
.lane{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;height:52px}
.lane button{
  height:36px;background:transparent;cursor:pointer;border:1px solid var(--border-strong);
  border-radius:var(--radius-control);color:var(--text-strong);
  font:500 var(--mono-1)/1 var(--font-mono);letter-spacing:var(--tr-mono);
  transition:background var(--dur-2) var(--ease-standard),color var(--dur-2) var(--ease-standard);
}
.lane button:hover{border-color:var(--paper-000)}
.lane button[aria-pressed="false"]{color:var(--signal-400);border-color:var(--signal-400);
  text-decoration:line-through}
.lane .track{
  height:36px;border:1px solid var(--border-hairline);
  background-image:linear-gradient(to right,var(--border-hairline) 1px,transparent 1px);
  background-size:calc(100% / 7) 100%;
  transition:opacity var(--dur-3) var(--ease-standard);
}
.lane.off .track{
  background-image:repeating-linear-gradient(135deg,rgba(240,113,79,.22) 0 1px,transparent 1px 8px);
}

/* Sessions are positioned over the lanes, so a reassignment is seen as a move. */
.bars{position:absolute;left:76px;right:0;top:0;bottom:0;pointer-events:none}
.bar{
  position:absolute;height:28px;margin-top:12px;display:flex;align-items:center;padding:0 6px;
  overflow:hidden;white-space:nowrap;background:var(--basalt-700);color:var(--paper-000);
  border-left:2px solid var(--basalt-300);
  font:500 var(--eyebrow)/1 var(--font-mono);letter-spacing:var(--tr-mono);
  transition:left var(--dur-4) var(--ease-standard),top var(--dur-4) var(--ease-standard),
             width var(--dur-4) var(--ease-standard),background var(--dur-2) var(--ease-standard);
}
.bar.invalid{background:transparent;color:var(--signal-400);border:1px dashed var(--signal-400);
  border-left-width:2px}
.bar.late{background:var(--signal-600);border-left-color:var(--signal-200)}

.demo-hint{margin-top:var(--s16);color:var(--text-faint)}

.demo-side dl{margin:0;display:grid;gap:0;border-top:1px solid var(--border-hairline)}
.demo-side dl > div{padding:var(--s16) 0;border-bottom:1px solid var(--border-hairline)}
.demo-side dt{font-family:var(--font-mono);font-size:var(--eyebrow);font-weight:500;
  letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.demo-side dd{margin:0;font-size:var(--body-2);color:var(--text-strong);min-height:1.55em}
.state{font-family:var(--font-mono);font-size:var(--mono-1);letter-spacing:var(--tr-mono)}
.state.ok{color:var(--teal-300)}
.state.stale{color:var(--signal-400)}
.demo-actions{display:flex;flex-wrap:wrap;gap:var(--s12);margin-top:var(--s24)}
.demo-actions .btn[disabled]{opacity:.38;cursor:default;pointer-events:none}
.demo-foot{padding-top:var(--s24);border-top:1px solid var(--border-hairline);color:var(--text-faint);
  max-width:90ch}

/* ---------- 3. principle ---------- */

.c-three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s48);margin-top:var(--s96);
  padding-top:var(--s32);border-top:2px solid var(--text-strong)}
.c-three p:not(.k){font-size:var(--body-1);color:var(--text-body)}

/* ---------- 4. ways of working ---------- */

.c-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--s64);
  background:var(--border-hairline);border:1px solid var(--border-hairline)}
.c-ways article{background:var(--surface-card);padding:var(--s48) var(--s32);display:flex;
  flex-direction:column;gap:var(--s16);min-height:340px}
.c-ways h3{font-size:var(--title-1);line-height:var(--lh-title);letter-spacing:var(--tr-title);
  margin-top:var(--s32)}
.c-ways p{font-size:var(--body-1);color:var(--text-muted)}
.c-ways a{margin-top:auto;font-weight:500}

/* ---------- 5. products ---------- */

.c-product{display:grid;grid-template-columns:1.1fr 1fr;gap:1px;margin-top:var(--s32);
  background:var(--border-hairline);border:1px solid var(--border-hairline)}
#products .d3 + .c-product{margin-top:var(--s64)}
.c-product > div{background:var(--surface-card);padding:var(--s64) var(--s48)}
.c-product.flip .p-text{order:2}
.c-product h3{font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.024em;margin-bottom:var(--s24)}
.c-product .p-text p:not(.k){font-size:var(--body-1);max-width:46ch;color:var(--text-body)}
.c-product .btn{margin-top:var(--s32)}
.c-product .p-panel{background:var(--basalt-950);color:var(--basalt-200);display:flex;
  flex-direction:column;justify-content:space-between;gap:var(--s48)}
.p-panel .mono{color:var(--basalt-400)}
.p-figs{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s32) var(--s24)}
.p-figs dt{font-size:var(--title-1);font-weight:600;letter-spacing:var(--tr-title);color:var(--paper-000)}
.p-figs dd{margin:6px 0 0;font-size:var(--body-3);color:var(--basalt-300)}
.p-list{list-style:none;margin:0;padding:0}
.p-list li{padding:var(--s16) 0;border-top:1px solid rgba(252,251,248,.14);
  font-size:var(--title-2);letter-spacing:var(--tr-title);color:var(--paper-000)}

/* ---------- 6. technology programme ---------- */

.c-prog{list-style:none;margin:var(--s64) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-hairline);
  border:1px solid var(--border-hairline)}
.c-prog li{background:var(--basalt-950);padding:var(--s32);display:flex;flex-direction:column;
  gap:var(--s12);min-height:280px}
.c-prog h3{font-size:var(--title-2);line-height:var(--lh-title);letter-spacing:var(--tr-title);
  margin-top:var(--s24)}
.c-prog p{color:var(--text-muted)}
.c-prog .role{margin-top:auto;padding-top:var(--s16);font-family:var(--font-mono);
  font-size:var(--eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--text-faint)}

/* ---------- 7. research ---------- */

.c-research{display:grid;grid-template-columns:1fr 1fr;gap:var(--s64);align-items:center;
  padding:var(--s64);border:1px solid var(--border-strong)}
.c-research h2{margin:var(--s24) 0}
.c-research figure{margin:0}
.c-research svg{width:100%;height:auto}
.c-research svg rect{fill:var(--surface-card);stroke:var(--border-strong);stroke-width:1}
.c-research svg rect.ref{fill:var(--basalt-950);stroke:var(--basalt-950)}
.c-research svg .ln path{fill:none;stroke:var(--basalt-500);stroke-width:1}
.c-research svg .dep{fill:none;stroke:var(--signal-500);stroke-width:1.5;stroke-dasharray:4 4}
.c-research svg text{font:500 12px var(--font-mono);letter-spacing:.04em;fill:var(--basalt-950)}
.c-research svg rect.ref + text{fill:var(--paper-000)}
.c-research svg text.sm{font-size:10px;fill:var(--signal-600)}

/* ---------- 8. company ---------- */

.c-mv{display:grid;grid-template-columns:1fr 1fr;gap:var(--s64);margin-top:var(--s32)}
.c-mv .big{font-size:clamp(24px,2.7vw,38px);line-height:1.16;letter-spacing:-.02em;font-weight:600;
  color:var(--text-strong);max-width:22ch}

.foot .legal a{font:inherit;color:inherit;text-decoration:underline}

/* ---------- responsive ---------- */

@media (max-width:1100px){
  .c-prog{grid-template-columns:repeat(2,1fr)}
  .demo-body{grid-template-columns:1fr;gap:var(--s32)}
  .c-research{grid-template-columns:1fr;padding:var(--s48)}
}

@media (max-width:820px){
  .c-hero{padding:var(--s64) 0}
  .c-split,.c-three,.c-ways,.c-product,.c-mv,.c-prog{grid-template-columns:1fr}
  .c-split{gap:var(--s24)}
  .c-three{gap:var(--s32);margin-top:var(--s48)}
  .c-ways article{min-height:0;padding:var(--s32) var(--s24)}
  .c-ways h3{margin-top:var(--s8)}
  .c-product > div{padding:var(--s32) var(--s24)}
  .c-product.flip .p-text{order:0}
  .c-prog li{min-height:0}
  .c-prog h3{margin-top:var(--s8)}
  .c-mv{gap:var(--s48)}
  .c-research{padding:var(--s24)}
  .demo{padding:var(--s24) var(--s16);margin-top:var(--s48)}
  .lane{grid-template-columns:44px 1fr;gap:8px}
  .hours,.bars{margin-left:0}
  .hours{margin-left:52px}
  .bars{left:52px}
  .nav .btn{display:none}
}

/* ---------- programme vs. available ---------- */

.c-avail{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:var(--s32);
  background:var(--border-hairline);border:1px solid var(--border-hairline)}
.c-avail > div{background:var(--basalt-950);padding:var(--s32)}
.c-avail p:not(.k){color:var(--text-body);max-width:52ch}
.c-avail a{font-weight:500}

/* ---------- company page ---------- */

.c-head{padding:var(--s128) 0 var(--s96);background:var(--basalt-950)}
.c-steps{list-style:none;margin:var(--s64) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s32);border-top:2px solid var(--text-strong);
  padding-top:var(--s32)}
.c-steps h3{font-size:var(--title-2);line-height:var(--lh-title);letter-spacing:var(--tr-title);
  margin:var(--s16) 0 var(--s12)}
.c-steps p{color:var(--text-muted)}
.c-founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s64);margin-top:var(--s48)}
.c-founder h3{font-size:clamp(30px,3.4vw,48px);line-height:1.04;letter-spacing:-.024em}
.c-founder .role{font-family:var(--font-mono);font-size:var(--mono-1);letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--text-muted);margin-top:var(--s12)}
.c-founder .bio p{font-size:var(--body-1);max-width:var(--measure-prose)}
.c-founder .bio p + p{margin-top:var(--s16)}

@media (max-width:820px){
  .c-avail,.c-founder{grid-template-columns:1fr}
  .c-steps{grid-template-columns:1fr;gap:var(--s24)}
  .c-head{padding:var(--s64) 0}
  .c-founder{gap:var(--s24)}
}
@media (min-width:821px) and (max-width:1100px){.c-steps{grid-template-columns:1fr 1fr}}

/* ---------- product and trust pages ---------- */

.c-head .actions{margin-top:var(--s32)}
.c-cells{list-style:none;margin:var(--s64) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-hairline);
  border:1px solid var(--border-hairline)}
.c-cells > li{background:var(--surface-card);padding:var(--s32);display:flex;flex-direction:column;
  gap:var(--s12);min-height:220px}
.c-cells h3{font-size:var(--title-2);line-height:var(--lh-title);letter-spacing:var(--tr-title);
  margin-top:var(--s16)}
.c-cells p{color:var(--text-muted)}
.c-cells .tag{align-self:flex-start;margin-top:auto}

.c-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s64);margin-top:var(--s64)}
.c-two h3{font-size:var(--title-1);letter-spacing:var(--tr-title);padding-bottom:var(--s16);
  border-bottom:2px solid var(--text-strong)}
.c-two .plist li{font-size:var(--body-1);color:var(--text-body)}

/* what is real and what is an example, said in one place per page */
.c-status{margin-top:var(--s64);border:1px solid var(--border-strong)}
.c-status > div{display:grid;grid-template-columns:220px 1fr;gap:var(--s24);padding:var(--s24) var(--s32);
  border-bottom:1px solid var(--border-hairline);align-items:start}
.c-status > div:last-child{border-bottom:0}
.c-status p{font-size:var(--body-1);color:var(--text-body);max-width:70ch}
.tag.real{border-color:var(--teal-500);color:var(--teal-600)}
.tag.synthetic{border-color:var(--signal-600);color:var(--signal-600)}
[data-theme="dark"] .tag.real{border-color:var(--teal-300);color:var(--teal-300)}

.c-figs{margin:var(--s64) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border-hairline);border:1px solid var(--border-hairline)}
.c-figs > div{background:var(--basalt-950);padding:var(--s32)}
.c-figs dt{font-size:clamp(30px,3.4vw,48px);font-weight:600;letter-spacing:-.024em;color:var(--paper-000)}
.c-figs dd{margin:var(--s12) 0 0;color:var(--basalt-300)}

@media (max-width:1100px){.c-cells{grid-template-columns:1fr 1fr}.c-figs{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .c-cells,.c-two,.c-figs{grid-template-columns:1fr}
  .c-cells > li{min-height:0}
  .c-two{gap:var(--s48)}
  .c-status > div{grid-template-columns:1fr;gap:var(--s12);padding:var(--s24)}
}

/* ---------- contrast and small-screen corrections ---------- */

/* On paper the faint grey and the bright vermilion fall under 4.5:1 at text sizes. */
.evidence{color:var(--text-muted)}
.num,.row .num{color:var(--accent-strong)}
[data-theme="dark"] .evidence{color:var(--text-faint)}
/* white on signal-500 is 3.6:1; one step darker clears 4.5:1 */
[data-theme="dark"] .btn-primary{background:var(--signal-600)}
[data-theme="dark"] .btn-primary:hover{background:var(--signal-500)}
.btn-primary:hover{background:var(--signal-600)}

.only-mobile{display:none}
@media (max-width:820px){.only-mobile{display:block}}
.foot .legal{color:var(--basalt-400)}
.note .date{color:var(--text-muted)}
.cell .n{color:var(--text-muted)}

/* ================= 07-10-2026 ================= */

/* ---------- hero with the operational example beside the statement ---------- */

.c-hero{padding:var(--s96) 0 var(--s64)}
.c-hero.duo .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s64);align-items:start}
.c-display{font-size:clamp(34px,4.3vw,64px);line-height:1.04;max-width:15ch}
.c-head .c-display{font-size:clamp(34px,4.6vw,68px)}
.c-hero .domains{margin-top:var(--s32)}

.demo{min-width:0}
.demo.compact{margin-top:0;padding:var(--s24);border:1px solid var(--border-hairline)}
.demo.compact .demo-body{grid-template-columns:1fr;gap:var(--s24);padding:var(--s24) 0}
.demo.compact .demo-side dl{grid-template-columns:1fr 1fr;column-gap:var(--s24)}
.demo.compact .demo-foot{padding-top:var(--s16)}
.demo-plan,.demo-side{min-width:0}
.demo-lead{font-size:var(--body-2);color:var(--text-body);margin:var(--s16) 0 0;max-width:60ch}

/* sessions never leave the diagram: the layer is clipped to the lanes, and a session that
   runs past the window is drawn to its edge and marked */
.bars{overflow:hidden}
.bar[hidden]{display:none}
.bar.cut{border-right:2px dashed var(--signal-200)}
.demo-out{margin-top:var(--s12);padding:8px 10px;border:1px dashed var(--signal-400);
  color:var(--signal-400);font-size:var(--mono-1)}
.demo-out[hidden]{display:none}
.demo-side dd .state{display:inline-block}
.demo-side dd{line-height:1.5}

/* ---------- translation status ---------- */

.lang-status{margin:0;padding:8px var(--gutter);background:var(--basalt-800);color:var(--basalt-200);
  font-family:var(--font-mono);font-size:var(--mono-1);letter-spacing:var(--tr-mono);text-align:center}
.lang-status[hidden]{display:none}
.lang-status[data-state="error"]{background:var(--signal-700);color:var(--paper-000)}
.lang[aria-busy="true"]{opacity:.6;cursor:progress}

/* ---------- product evidence ---------- */

.c-shot{margin:var(--s48) 0 0;border:1px solid var(--border-strong);background:var(--surface-card)}
.c-shot img{width:100%;height:auto}
.c-shot figcaption{display:flex;flex-wrap:wrap;gap:var(--s12) var(--s24);align-items:center;
  padding:var(--s16) var(--s24);border-top:1px solid var(--border-hairline);
  font-family:var(--font-mono);font-size:var(--mono-1);letter-spacing:var(--tr-mono);color:var(--text-muted)}
.c-evid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s48);align-items:start;margin-top:var(--s48)}
.c-evid .c-shot{margin-top:0}
.c-evid h3{font-size:var(--title-2);letter-spacing:var(--tr-title);margin:var(--s24) 0 var(--s8)}
.c-evid h3:first-child{margin-top:0}
.c-evid p{color:var(--text-body)}

/* a score taken apart: one bar per indicator, widths are the points */
.c-decomp{margin-top:var(--s48);border:1px solid var(--border-strong);background:var(--surface-card);padding:var(--s32)}
.c-decomp .total{display:flex;align-items:baseline;gap:var(--s16);flex-wrap:wrap}
.c-decomp .total b{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.03em;color:var(--text-strong)}
.c-decomp ul{list-style:none;margin:var(--s32) 0 0;padding:0;display:grid;gap:var(--s16)}
.c-decomp li{display:grid;grid-template-columns:minmax(120px,220px) 1fr 64px;gap:var(--s16);align-items:center}
.c-decomp .bar2{height:14px;background:var(--surface-sunken)}
.c-decomp .bar2 i{display:block;height:100%;background:var(--basalt-700)}
.c-decomp li:first-child .bar2 i{background:var(--signal-600)}
.c-decomp .pts{font-family:var(--font-mono);font-size:var(--mono-1);text-align:right;color:var(--text-strong)}

.hero-tag{margin-top:var(--s24)}
.c-note{margin-top:var(--s16);padding:var(--s16) var(--s24);border-left:2px solid var(--signal-600);
  background:var(--surface-sunken);font-size:var(--body-2);color:var(--text-body)}
.c-note a{font-weight:500}
.c-prog.brief li{min-height:0}

@media (max-width:1100px){
  .c-hero.duo .wrap{grid-template-columns:1fr;gap:var(--s48)}
  .c-evid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .demo.compact .demo-side dl{grid-template-columns:1fr}
  .c-decomp{padding:var(--s24) var(--s16)}
  .c-decomp li{grid-template-columns:1fr 48px;row-gap:6px}
  .c-decomp li span:first-child{grid-column:1 / -1}
  .c-shot figcaption{padding:var(--s12) var(--s16)}
}

/* ---------- screen viewer: several real screens of one product ---------- */

.c-viewer{margin-top:var(--s48)}
.c-viewer .tabs{display:flex;flex-wrap:wrap;gap:var(--s8);margin-bottom:var(--s12)}
.c-viewer .tabs [role="tablist"]{display:flex;flex-wrap:wrap;gap:var(--s8)}
.c-viewer .tabs button{
  padding:8px 12px;background:transparent;cursor:pointer;border:1px solid var(--border-strong);
  border-radius:var(--radius-control);color:var(--text-strong);
  font:500 var(--mono-1)/1.2 var(--font-mono);letter-spacing:var(--tr-mono)}
.c-viewer .tabs button[aria-selected="true"]{background:var(--basalt-950);color:var(--paper-000);border-color:var(--basalt-950)}
.c-viewer .tabs .play{margin-left:auto}
/* the tabs and the pause control only do something with scripts */
html:not(.js) .c-viewer .tabs{display:none}
.c-viewer .c-shot{margin-top:0}
.c-viewer .frames{position:relative;background:var(--basalt-950)}
.c-viewer .frames img{width:100%;height:auto}
/* with scripts, frames share one box and cross-fade; without, they simply follow each other.
   A frame that is not selected is taken out of the accessibility tree once it has faded. */
.js .c-viewer .frames{aspect-ratio:var(--ar,16/10);overflow:hidden}
.js .c-viewer .frame{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity var(--dur-4) var(--ease-standard),visibility 0s linear var(--dur-4)}
.js .c-viewer .frame.on{opacity:1;visibility:visible;transition-delay:0s}
.js .c-viewer .frame img{height:100%;object-fit:contain;object-position:top center}
.c-viewer figcaption .cap{flex:1 1 320px;font-family:var(--font-sans);font-size:var(--body-2);letter-spacing:normal;color:var(--text-body)}

/* ---------- full-size view ---------- */

.cap-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--s8)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zoom,.out{padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-control);
  font:500 var(--mono-1)/1.2 var(--font-mono);letter-spacing:var(--tr-mono);color:var(--text-strong);
  text-decoration:none;white-space:nowrap}
.zoom:hover,.out:hover{border-color:var(--text-strong)}
.zoom-dialog{width:min(96vw,1560px);max-width:none;height:92vh;max-height:none;padding:0;border:1px solid var(--basalt-600);
  background:var(--basalt-950);color:var(--paper-000)}
.zoom-dialog[open]{display:flex;flex-direction:column}
.zoom-dialog::backdrop{background:rgba(6,9,10,.82)}
.zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s16);
  padding:var(--s12) var(--s16);border-bottom:1px solid var(--basalt-700)}
.zoom-bar p{margin:0;color:var(--basalt-200)}
.zoom-bar .btn{color:var(--paper-000);border-color:var(--basalt-400)}
/* on a phone the screen keeps a readable width and is moved around by scrolling */
.zoom-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.zoom-body img{display:block;width:max(100%,1100px);max-width:none;height:auto}
@media (max-width:820px){.cap-actions{margin-left:0}}

/* ================= 07-10-2026, second pass ================= */

/* ---------- home: a shorter page ---------- */

/* the six directions as one compact list; what each is for lives on /research/ */
.c-dirs{list-style:none;margin:var(--s48) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline)}
.c-dirs li{background:var(--basalt-950);padding:var(--s24);display:flex;gap:var(--s16);align-items:baseline;
  font-size:var(--title-3);font-weight:600;letter-spacing:var(--tr-title);color:var(--text-strong)}
/* a product and its capture share one block: text beside the capture, and what the product
   reads or computes as one strip underneath */
.c-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:1px;margin-top:var(--s48);
  grid-template-areas:"text shot" "panel panel";
  background:var(--border-hairline);border:1px solid var(--border-hairline)}
#products .d3 + .c-pair{margin-top:var(--s64)}
.c-pair.flip{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-areas:"shot text" "panel panel"}
.c-pair .c-product{display:contents}
.c-pair .p-text{grid-area:text;background:var(--surface-card);padding:var(--s48) var(--s32)}
.c-pair .p-panel{grid-area:panel;padding:var(--s24) var(--s32);gap:var(--s16)}
.c-pair .c-shot{grid-area:shot;margin:0;border:0}
.c-pair .c-product h3{font-size:clamp(30px,3vw,44px);margin-bottom:var(--s16)}
.c-pair .c-product .btn{margin-top:var(--s24)}
.c-pair .p-list{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--s24)}
.c-pair .p-list li{padding:var(--s12) 0 0;font-size:var(--title-3)}
.c-pair .p-figs{grid-template-columns:repeat(4,1fr);gap:var(--s24)}
.c-pair .p-panel .mono{margin:0}
.p-panel a{color:var(--paper-000)}
#collaboration .rows{margin-top:var(--s16)}
@media (max-width:1100px){.c-dirs{grid-template-columns:1fr 1fr}}
@media (max-width:820px){
  .c-dirs{grid-template-columns:1fr}
  .c-pair .p-text,.c-pair .p-panel{padding:var(--s24)}
}
@media (max-width:1100px){
  .c-pair,.c-pair.flip{grid-template-columns:1fr;grid-template-areas:"text" "shot" "panel"}
  .c-pair .p-list,.c-pair .p-figs{grid-template-columns:1fr 1fr}
}

/* ---------- evidence behind a figure ---------- */

.c-src{margin-top:var(--s48);border:1px solid var(--border-hairline)}
.c-src > div{display:grid;grid-template-columns:200px 1fr;gap:var(--s24);padding:var(--s24) var(--s32);
  border-bottom:1px solid var(--border-hairline)}
.c-src > div:last-child{border-bottom:0}
.c-src dt{font-size:var(--title-1);font-weight:600;letter-spacing:var(--tr-title);color:var(--paper-000)}
.c-src dd{margin:0;display:grid;gap:6px;font-size:var(--body-2);color:var(--basalt-200)}
.c-src dd b{font-family:var(--font-mono);font-size:var(--eyebrow);font-weight:500;letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;color:var(--basalt-400);margin-right:8px}
@media (max-width:820px){.c-src > div{grid-template-columns:1fr;gap:var(--s12);padding:var(--s24)}}