/* All three wordmarks use the same source-unit scale: the primary capitals
   are 100 units high in every asset. Keep each complete SVG and its clearspace.
   AI / ORIGIN canvases are 200 units tall with 50-unit left padding; CASH is
   110 units tall with a -5 y origin and no horizontal padding. */
:root{--product-logo-ink-height:23.04901px}
.wordmark-ai,.business-loop-brand-ai img,
.wordmark-origin,.business-loop-brand-origin img{--logo-box-units:200;--logo-left-space:.5}
.wordmark-cash,.business-loop-brand-cash img{--logo-box-units:110;--logo-left-space:0}
.editorial-chapter :is(.editorial-topline,.editorial-mark) > img:is(.wordmark-ai,.wordmark-origin,.wordmark-cash),
.business-loop-mark img{
 height:calc(var(--product-logo-ink-height) * var(--logo-box-units) / 100);
 width:auto;
 max-width:none;
 flex:none;
 object-fit:contain;
}
/* Move the transparent canvas into the available clearspace. The visible first
   letter then starts exactly at the heading/caption edge, without SVG cropping. */
.editorial-chapter :is(.editorial-topline,.editorial-mark) > img:is(.wordmark-ai,.wordmark-origin,.wordmark-cash){
 margin-left:calc(-1 * var(--product-logo-ink-height) * var(--logo-left-space));
}

/* The Group opening and business loop use the same quiet colour family as
   the three product chapters, with clear paper around native HTML copy. */
#top.editorial-group{
 background:
  radial-gradient(ellipse at 75% 57%,rgba(24,191,208,.08) 0%,rgba(24,191,208,0) 65%),
  radial-gradient(ellipse at 20% 87%,rgba(24,58,53,.035) 0%,rgba(24,58,53,0) 59%),
  var(--paper);
}
#approach.group-approach.approved-loop{
 background:
  radial-gradient(ellipse at 77% 52%,rgba(24,191,208,.085) 0%,rgba(24,191,208,0) 66%),
  radial-gradient(ellipse at 25% 74%,rgba(24,58,53,.04) 0%,rgba(24,58,53,0) 60%),
  var(--paper);
}
#approach .business-loop-return{background:transparent}

/* Centre the reading block inside the left track, keeping the text itself
   left aligned. ORIGIN / CASH marks occupy a separate grid row, so give
   their row the same measure as the copy to preserve one visible edge. */
@media(min-width:901px){
 :is(.editorial-ai,.editorial-origin,.editorial-cash) .editorial-scene{
  --product-copy-measure:384px;
 }
 :is(.editorial-ai,.editorial-origin,.editorial-cash) :is(.editorial-topline,.editorial-copy,.editorial-ai-copy){
  justify-self:center;
  width:100%;
  max-width:var(--product-copy-measure);
 }
}
@media(min-width:1601px){
 :is(.editorial-ai,.editorial-origin,.editorial-cash) .editorial-scene{
  --product-copy-measure:clamp(384px,24vw,640px);
 }
}

@media(min-width:1601px) and (min-height:901px){
 :root{--product-logo-ink-height:clamp(23.04901px,1.440563vw,34.573515px)}
}
@media(max-width:900px){
 /* Equal letter height makes ORIGIN longer. Give the caption its own row
    rather than shrinking this one logo or letting it collide with text. */
 .business-loop-brands{display:flex;flex-direction:column;gap:0}
 .business-loop-brand{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:48px 24px;
  align-content:start;
  align-items:start;
  gap:8px;
  min-height:112px;
  padding:16px 0;
  text-align:left;
 }
 .business-loop-mark{justify-content:flex-start;height:48px;overflow:visible}
 .business-loop-mark img{margin-left:calc(-1 * var(--product-logo-ink-height) * var(--logo-left-space))}
 .business-loop-caption,
 .business-loop-brand-cash .business-loop-caption{
  max-width:none;white-space:nowrap;text-align:left;font-size:14px;line-height:24px;
 }
 .cash-caption-separator,.cash-caption-status{display:inline}
 .business-loop-brand::after{left:0;transform:none}
}

.business-loop-stage-labels{display:none}

/* One language link stays available on both the desktop and compact header. */
.language-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;flex:none;font-size:12px;line-height:20px;text-underline-offset:4px}
.language-switch:hover{text-decoration:underline}
.nav-language{margin-top:24px}
.nav-language .language-switch{justify-content:flex-start}
@media(max-width:1100px){
 .desktop-nav,.header-contact{display:none}
 .header>.language-switch{margin-left:auto}
 .menu-trigger{display:flex;margin-left:0;flex:none}
}
@media(max-width:720px){
 .header{gap:8px}
 .header .brand img{width:clamp(144px,42vw,200px)}
}

@media(max-width:600px){
 /* Recompose the registered source units for portrait. The original hands,
    evidence planes and network are preserved, rather than stretching a crop. */
 .business-loop-diagram{aspect-ratio:600 / 1440;margin-top:32px}
 .business-loop-return{left:50%;top:auto;bottom:0;font-size:12px}
 .business-loop-stage-labels{display:block;position:absolute;inset:0;z-index:2;color:var(--ink);font-size:clamp(12px,3.56vw,14px);line-height:24px}
 .business-loop-stage-labels span{position:absolute;left:8%;display:flex;align-items:center;gap:8px;white-space:nowrap}
 .loop-role-ai{top:0}
 .loop-role-origin{top:31.25%}
 .loop-role-cash{top:55.55%}
 .business-loop-brand{min-height:96px;padding-block:8px}
 :is(.editorial-ai,.editorial-origin,.editorial-cash) .editorial-scene{padding-top:24px}
 :is(.editorial-ai,.editorial-origin,.editorial-cash) .lede{margin-top:16px}
 :is(.editorial-ai,.editorial-origin,.editorial-cash) .text-action{margin-top:16px}
 .editorial-cash .editorial-cash-action{margin-top:16px}
 :is(.editorial-ai,.editorial-origin,.editorial-cash) [data-native-product]{margin-block:16px}
 .editorial-ai [data-native-product],.editorial-origin [data-native-product]{aspect-ratio:1.4}
 .editorial-cash [data-native-product]{aspect-ratio:1.12}
}

.cash-title-line{display:block}

/* Landscape tablets retain the left/right composition. Equal tracks keep the
   English headings readable and all three wordmarks on the same reading edge. */
@media(min-width:901px) and (max-width:1100px){
 html[lang="en"] :is(.editorial-ai,.editorial-origin,.editorial-cash) .editorial-scene{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 }
}

/* English product copy needs a bounded illustration at phone/tablet widths.
   Keep the common type scale and optical logo size; the renderer fits the
   complete drawing uniformly into this slot rather than stretching it. */
@media(max-width:900px){
 html[lang="en"] :is(.editorial-ai,.editorial-cash) .editorial-scene{
  min-height:calc(100svh - 81px);
  padding-top:16px;
 }
 html[lang="en"] :is(.editorial-ai,.editorial-cash) :is(.editorial-mark,.editorial-topline){margin-bottom:8px}
 html[lang="en"] :is(.editorial-ai,.editorial-cash) .lede{max-width:560px;margin-top:16px}
 html[lang="en"] :is(.editorial-ai,.editorial-cash) .text-action{margin-top:8px}
 html[lang="en"] .editorial-cash .editorial-cash-action{margin-top:8px}
 html[lang="en"] .editorial-cash .editorial-cash-action .text-action{margin-top:0}
 html[lang="en"] :is(.editorial-ai,.editorial-cash) [data-native-product]{
  flex:1 1 auto;
  min-height:160px;
  max-height:min(100vw,56svh);
  height:min(72vw,clamp(200px,32svh,384px));
  aspect-ratio:auto;
  margin-block:8px;
 }
 html[lang="en"] :is(.editorial-ai,.editorial-cash) .editorial-foot{margin-top:auto}
}
@media(max-width:720px){
 html[lang="en"] :is(.editorial-ai,.editorial-cash) .editorial-scene{min-height:calc(100svh - 73px)}
}
@media(max-width:600px){
 html[lang="en"] :is(.editorial-ai,.editorial-cash) .editorial-foot{padding-block:8px}
}
@media(max-width:350px){
 html[lang="en"] :is(.editorial-ai,.editorial-cash) .editorial-foot{padding-block:4px}
}