/* page CSS shared by index.html and en.html (moved out of the pages; new layer visuals appended below) */
/* the strata hero: seven layers stacked like a stepped mountain, the widest (firmware) at the foot, each
     one stepping in towards the summit (the complete, documented system). They build up from the foot on
     load, one after another (about 2.2 s), and hold; the words stay legible throughout. */
  .hero--strata { position: relative; overflow: clip; --sh: calc(clamp(196px, 100svh - 470px, 560px) / 7.3); --sx: 9.2%; }
  .hero--strata .hero__in { position: relative; z-index: 1; }
  .hero--strata h1 { font-size: clamp(40px, 7vw, 108px); line-height: 1.0; letter-spacing: var(--display-tracking-xl); max-width: none; }
  .hero--strata h1 .h1-line { display: block; }
  .hero--strata .hero__lead { max-width: 54ch; font-size: var(--t-lead); line-height: 1.5; margin-top: var(--s-6); }
  .strata { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--sh) * 7); pointer-events: none; }
  .strata__band { position: absolute; right: 0; left: calc(var(--i) * var(--sx)); bottom: calc(var(--i) * var(--sh)); height: var(--sh);
    display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-5); box-sizing: border-box;
    background: color-mix(in oklab, var(--ink) calc(3% + var(--i) * 2.1%), var(--bg));
    border-top: 1px solid color-mix(in oklab, var(--ink) calc(14% + var(--i) * 3%), transparent);
    border-left: 1px solid color-mix(in oklab, var(--ink) calc(14% + var(--i) * 3%), transparent);
    opacity: .28; transform: translateY(14px);
    animation: strata-in .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.25s + var(--i) * .26s); }
  .strata__band--top { border-top-color: var(--accent); border-left-color: var(--accent); }
  .strata__band--top::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .strata__band--top::after { content: ""; position: absolute; left: -14px; top: -14px; width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0;
    animation: strata-ring 1.6s ease-out forwards; animation-delay: calc(.4s + 6 * .26s + .4s); }
  .strata__n { font: 500 13px/1 var(--font-mono); color: var(--muted); min-width: 2ch; }
  .strata__name { font: 500 min(clamp(16px, 1.45vw, 22px), calc(var(--sh) * .5))/1.2 var(--font-display); letter-spacing: -0.015em; white-space: nowrap; }
  .strata__icons { display: inline-flex; gap: 6px; align-items: center; }
  .strata__icons .ic-tile { --tile: min(28px, calc(var(--sh) - 8px)); }
  .strata__glyph { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
  .strata__sub { font: 400 13px/1.2 var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .strata__band--top .strata__name { color: var(--accent); }
  @keyframes strata-in { to { opacity: 1; transform: none; } }
  @keyframes strata-ring { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
  @media (prefers-reduced-motion: reduce) { .strata__band { animation: none; opacity: 1; transform: none; } .strata__band--top::after { animation: none; } }
  @media (max-width: 1023px) { .hero--strata { --sh: calc(min(40svh, 420px) / 7.2); --sx: 7%; } .strata__sub { display: none; } }
  @media (max-width: 639px) {
    .hero--strata { --sh: calc(32svh / 7); --sx: 5%; }
    .hero--strata h1 { font-size: 40px; line-height: 1.04; }
    .hero--strata h1 .h1-line { display: inline; }
    #allitas .mo-la__type { font-size: clamp(36px, 12.4vw, 56px); }
    .strata__band { padding: 0 var(--s-3); gap: var(--s-2); }
    .strata__icons { display: none; }
    .strata__name { font-size: 13px; }
  }
  /* app-frame (sections-library.md, app-frame) */
  .app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
  .app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
  .app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
  .app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
  @media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
  @media (max-width: 1023px) {
    .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .app > .app__pane--list { max-height: 252px; }
    .app > .app__pane--list::after { display: none; }
    .app .ui-win__side { display: none; }
    .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
    .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
  }
  @media (max-width: 639px) {
    .app.ui { grid-template-rows: minmax(0, 1fr); }
    .app > .app__pane--list { display: none; }
    .app > .app__pane + .app__pane { border-top: 0; }
  }
  #nyilt-forras .frame--split { --ratio: 100%; }
  #allitas .wrap { display: flex; flex-direction: column; height: 100%; }
  .stack-row { list-style: none; margin: auto 0 0; padding: var(--s-6) 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-5) var(--s-4); border-top: 1px solid var(--line); }
  .stack-row li { display: grid; justify-items: center; gap: var(--s-2); font: 500 13px/1.3 var(--font-mono); color: var(--muted); }
  @media (max-width: 639px) { .stack-row { justify-content: flex-start; gap: var(--s-4); } .stack-row li { width: calc((100% - 3 * var(--s-4)) / 4); } .stack-row .ic-tile--wide { width: var(--tile); } .stack-row .ic-tile--wide > .ic { width: 82%; } }
  @media (max-width: 639px) { #nyilt-forras .frame--split { --ratio: 130%; } }
  @media (min-width: 640px) and (max-width: 1023px) { #nyilt-forras .frame--split { --ratio: 62%; } }
  /* the phone in the mobile split */
  .device { width: 300px; border-radius: 44px; background: #0b0f0d; padding: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 30px 60px -30px rgb(0 0 0 / .55); }
  .device__screen { border-radius: 34px; background: #f1f0e9; color: #161c1a; padding: 44px 22px 28px; display: grid; gap: 14px; font: 400 14px/1.4 var(--font-text); min-height: 560px; align-content: start; }
  .device__top { display: flex; justify-content: space-between; align-items: baseline; }
  .device__top b { font: 500 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
  .device__chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #2c6448; }
  .device__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2c6448; }
  .device__temp { font: 500 56px/1 var(--font-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
  .device__temp small { font-size: 24px; letter-spacing: -0.02em; }
  .device__muted { color: #555a55; font-size: 13px; }
  .device svg { width: 100%; height: auto; display: block; }
  .device__row { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgb(22 28 26 / .12); font-variant-numeric: tabular-nums; }
  .device__row b { font-weight: 500; }
  .device__btn { margin-top: 4px; height: 44px; border-radius: 99px; background: #161c1a; color: #f1f0e9; display: grid; place-items: center; font-weight: 500; }
  .facts-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
  .facts-list li { padding-top: var(--s-3); border-top: 1px solid var(--line); }
  .lang-link { font-variant: normal; }

/* ===== the climb: the layer sections ===== */
/* the gauge: a small copy of the hero's staircase, the current layer lit */
.layer-head { align-items: start; }
.layer-head__side { display: grid; gap: var(--s-4); }
.layer-head__side > p { margin: 0; font-size: var(--t-lead); line-height: 1.5; }
.gauge { display: flex; align-items: flex-end; gap: var(--s-4); }
.gauge svg { width: 126px; height: 33px; flex: none; }
.gauge .g-lo { fill: color-mix(in oklab, var(--ink) 34%, transparent); }
.gauge .g-on { fill: var(--accent); }
.gauge .g-hi { fill: none; stroke: color-mix(in oklab, var(--ink) 26%, transparent); stroke-width: 1.5; }
.gauge__label { font: 500 13px/1.2 var(--font-mono); color: var(--muted); }
.gauge__label b { color: var(--ink); font-weight: 500; margin-right: 6px; }

/* the datasheet: mono labels, plain values, hairlines */
.spec { margin: 0; display: grid; }
.spec > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-4); padding: 10px 0; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font: 500 13px/1.6 var(--font-mono); color: var(--muted); }
.spec dd { margin: 0; font-size: 16px; line-height: 1.5; }
.spec--row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-5); }
.spec--row > div { grid-template-columns: minmax(0, 1fr); gap: 2px; border-bottom: 0; }
.spec--row > div:last-child { border-bottom: 0; }

/* every moving visual: runs only on screen, holds when paused, rests under reduced motion */
[data-loop]:is([data-paused], :not([data-visible])) *, [data-loop]:is([data-paused], :not([data-visible])) *::before, [data-loop]:is([data-paused], :not([data-visible])) *::after { animation-play-state: paused !important; }
[data-loop] > .loop-pause { position: absolute; right: 12px; bottom: 12px; z-index: 5; }

/* 01 the byte lab */
.bytelab { display: block; position: relative; overflow: hidden; padding: var(--s-6) var(--s-7) 0; background: #0d1210; color: #d6d9d1;
  border-color: color-mix(in oklab, #e3e2da 10%, transparent); --line: rgb(227 226 218 / .12); --muted: #8e948d; --ink: #e3e2da; }
.bytelab__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.bytelab__tabs button { font: 500 13px/1 var(--font-mono); padding: 11px 14px; border-radius: 99px; border: 1px solid rgb(227 226 218 / .16); background: transparent; color: #a9aea7; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.bytelab__tabs button:hover { border-color: rgb(227 226 218 / .4); color: #e3e2da; }
.bytelab__tabs button[aria-selected="true"] { background: #9fc7b8; color: #161c1a; border-color: transparent; }
.bytelab__phase { display: none; gap: 10px; }
.bytelab__phase[data-on] { display: grid; }
.bl-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.bl-k { font: 500 13px/1 var(--font-mono); color: #8e948d; }
.bl-cells { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bl-cell { width: 52px; height: 42px; display: grid; place-items: center; font: 500 18px/1 var(--font-mono); border-radius: 8px; border: 1px solid rgb(227 226 218 / .14); background: rgb(227 226 218 / .04); }
.bl-out .bl-cell { opacity: .12; transform: translateY(6px); }
.bytelab__phase[data-on] .bl-out .bl-cell { animation: bl-in .35s ease forwards; animation-delay: calc(.5s + var(--k) * .18s); }
.bytelab__phase[data-on] .bl-row--wire .bl-cell { animation-delay: calc(1.5s + var(--k) * .12s); }
.bl-bad .bl-cell { border-color: rgb(224 122 106 / .7); color: #f2b3a8; background: rgb(224 122 106 / .12); }
.bl-mark { margin-left: 6px; font: 500 13px/1 var(--font-mono); padding: 10px 12px; border-radius: 8px; opacity: 0; }
.bytelab__phase[data-on] .bl-mark { animation: bl-in .35s ease 2.2s forwards; }
.bl-mark--ok { color: #9fd1a8; border: 1px solid rgb(159 209 168 / .4); }
.bl-mark--bad { color: #f2b3a8; border: 1px solid rgb(224 122 106 / .55); }
.bl-status { margin: var(--s-2) 0 0; font-size: 16px; line-height: 1.5; opacity: 0; }
.bytelab__phase[data-on] .bl-status { animation: bl-in .4s ease 2.6s forwards; }
.bl-status--ok::before { content: "✓  "; color: #9fd1a8; }
.bl-status--bad::before { content: "✕  "; color: #f2b3a8; }
@keyframes bl-in { to { opacity: 1; transform: none; } }
.bytelab .spec--row { position: absolute; left: var(--s-7); right: 64px; bottom: var(--s-4); }
.bytelab .spec--row dd { color: #e3e2da; }

/* 02 desktop: a measuring window over the lit ground, a floor plan card at its foot */
.desk { --ratio: 100%; padding: 0; display: block; }
.desk__win { position: absolute; left: 32px; top: 32px; right: -40px; height: 58%; border-radius: 12px; overflow: hidden; background: #0d1210; color: #d6d9d1;
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 24px 48px -24px rgb(0 0 0 / .5); display: grid; grid-template-rows: auto 1fr; }
.desk__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgb(227 226 218 / .1); font: 500 13px/1 var(--font-mono); color: #a9aea7; }
.desk__bar b { color: #e3e2da; font-weight: 500; }
.desk__rec { color: #f2b3a8; animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .35; } }
.desk__traces { display: grid; grid-template-rows: repeat(3, 1fr); padding: 6px 0; }
.desk__ch { position: relative; overflow: hidden; border-bottom: 1px dashed rgb(227 226 218 / .08); }
.desk__ch span { position: absolute; left: 16px; top: 8px; font: 500 12px/1 var(--font-mono); color: #8e948d; z-index: 1; }
.desk__ch svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: trace 7s linear infinite; }
.desk__ch path { fill: none; stroke: #d6d9d1; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.desk__ch--gsr path { stroke: #9fc7b8; stroke-width: 2; }
.desk__ch--gsr svg { animation-duration: 14s; }
@keyframes trace { to { transform: translateX(-50%); } }
.desk__plan { position: absolute; left: 32px; bottom: 32px; width: 58%; border-radius: 12px; background: #f4f3ee; color: #161c1a; padding: 14px 16px 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .15), 0 24px 48px -24px rgb(0 0 0 / .45); }
.desk__planbar { display: flex; justify-content: space-between; gap: 12px; font: 500 13px/1 var(--font-mono); margin-bottom: 10px; }
.desk__planbar span { color: #a0402f; }
.desk__plan svg { width: 100%; height: auto; display: block; }
.pl-wall { fill: none; stroke: #161c1a; stroke-opacity: .5; stroke-width: 2; }
.pl-room { fill: #f4f3ee; stroke: #161c1a; stroke-opacity: .28; }
.pl-room--alarm { animation: alarm 1.4s ease-in-out infinite; }
@keyframes alarm { 50% { fill: #f2c4b8; } }
.desk__plan text { font: 500 12px/1 var(--font-mono); fill: #555a55; text-anchor: middle; }
.pl-cam { fill: #2c6448; } .pl-fov { fill: #2c6448; fill-opacity: .14; }

/* 04 web: the migration lanes between the old and the new database */
.mig { --ratio: 100%; padding: var(--s-6); display: grid; grid-template-columns: 124px minmax(0, 1fr) 124px; grid-template-rows: 1fr auto; gap: var(--s-4); align-items: center; }
.mig::before { display: none; }
.mig__db { display: grid; gap: 6px; align-content: center; padding: 16px 14px; border-radius: 12px; background: #161c1a; color: #e3e2da; min-height: 168px; text-align: left; }
.mig__db b { font: 500 16px/1.2 var(--font-display); }
.mig__eng, .mig__n { font: 500 12px/1.3 var(--font-mono); color: #a9aea7; }
.mig__db--new { background: #23302b; box-shadow: inset 0 0 0 1px #9fc7b8; }
.mig__db--new .ic-tile { --tile: 28px; margin-bottom: 4px; }
.mig__lanes { display: grid; gap: 6px; }
.mig__row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 16px; align-items: center; gap: 8px; height: 32px; }
.mig__name { font: 500 13px/1 var(--font-mono); color: #2a2622; white-space: nowrap; }
.mig__track { position: relative; height: 10px; border-bottom: 1px dashed rgb(42 38 34 / .3); }
.mig__track i { position: absolute; left: 0; bottom: -4px; width: 14px; height: 8px; border-radius: 3px; background: #2a2622; opacity: 0;
  animation: chip 2.7s linear infinite; animation-delay: calc(var(--k) * -.34s); }
.mig__track i:nth-child(2) { animation-delay: calc(var(--k) * -.34s - .9s); }
.mig__track i:nth-child(3) { animation-delay: calc(var(--k) * -.34s - 1.8s); }
@keyframes chip { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; } }
.mig__ok { width: 16px; height: 16px; fill: none; stroke: #2c6448; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mig__nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgb(42 38 34 / .06); font: 500 13px/1 var(--font-mono); color: #2a2622; }
.mig__nav .ic-tile { --tile: 24px; }
.mig__nav i { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #2c6448; animation: rec 1.6s steps(2, jump-none) infinite; }

/* 05 mobile: probe, phone, server in one wide frame on the effect ground */
.mob { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto 72px minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-7) 0; overflow: hidden; }
.mob > * { position: relative; z-index: 1; }
.mob__probe, .mob__srv { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; background: #f4f3ee; color: #161c1a; align-self: center; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 18px 36px -20px rgb(0 0 0 / .35); }
.mob__probe b, .mob__srv b { font: 500 16px/1.2 var(--font-display); }
.mob__probe span:last-child, .mob__srv span:last-child { font: 500 12px/1.35 var(--font-mono); color: #555a55; }
.mob__ico .strata__glyph { color: #2c6448; width: 22px; height: 22px; }
.mob__srv .ic-tile { --tile: 28px; }
.mob__link { display: flex; justify-content: space-between; align-items: center; height: 12px; }
.mob__link i { width: 8px; height: 8px; border-radius: 50%; background: #161c1a; opacity: .15; animation: hop 1.5s ease-in-out infinite; }
.mob__link i:nth-child(2) { animation-delay: .2s; } .mob__link i:nth-child(3) { animation-delay: .4s; }
.mob__link--sync i { background: #2c6448; }
@keyframes hop { 30% { opacity: .9; transform: scale(1.35); } 60% { opacity: .15; transform: none; } }
.mob .device { width: 236px; align-self: end; margin-bottom: -40px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mob .device__screen { min-height: 0; padding: 30px 18px 56px; gap: 10px; }
.mob .device__temp { font-size: 44px; }
.device__curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: curve 4s ease-in-out infinite; }
@keyframes curve { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
.mob__spec { grid-column: 1 / -1; align-self: end; }
.mob .spec--row { display: none; }

/* 06 infrastructure topology */
.topo { --ratio: 100%; padding: var(--s-5); display: block; }
.topo__svg { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.tp-link { fill: none; stroke: #2a2622; stroke-opacity: .28; stroke-width: 1.5; }
.tp-edge rect { fill: #161c1a; }
.tp-edge__t { font: 500 16px/1 var(--font-display); fill: #e3e2da; }
.tp-edge__s { font: 500 11px/1 var(--font-mono); fill: #a9aea7; }
.tp-node rect { fill: #f4f3ee; stroke: #2a2622; stroke-opacity: .3; }
.tp-ix { font: 500 12px/1 var(--font-mono); fill: #2a2622; text-anchor: middle; }
.tp-label { font: 500 12px/1 var(--font-mono); fill: #2a2622; text-anchor: middle; }
.tp-code rect { fill: #2a2622; fill-opacity: .07; stroke: #2a2622; stroke-opacity: .2; }
.tp-code text { font: 500 13px/1 var(--font-mono); fill: #2a2622; text-anchor: middle; }
.tp-pulse { fill: #2c6448; } .tp-pulse--down { fill: #a8794a; }

/* 07 documents stacking up like the hero's layers */
.docs { display: block; padding: 0; --dh: clamp(44px, 7.6svh, 68px); }
.docs__stack { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 42%; bottom: 0; top: 0; }
.docs__sheet { position: absolute; left: calc(28px + var(--i) * 4.6%); bottom: calc(28px + var(--i) * var(--dh) * .9); width: 64%; height: var(--dh);
  display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 8px; background: #fbfaf6; color: #161c1a;
  box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 10px 24px -14px rgb(0 0 0 / .35); border: 1px solid rgb(22 28 26 / .1);
  opacity: 0; transform: translateY(-16px); animation: sheet 8s cubic-bezier(.2, .7, .2, 1) infinite; animation-delay: calc(var(--i) * .34s); }
@keyframes sheet { 0% { opacity: 0; transform: translateY(-16px); } 7% { opacity: 1; transform: none; } 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
.docs__code { font: 500 12px/1 var(--font-mono); color: #555a55; min-width: 64px; }
.docs__name { font: 500 16px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs__ext { margin-left: auto; font: 500 11px/1 var(--font-mono); color: #2b5797; }
.docs__sheet--top { box-shadow: 0 0 0 1.5px #2c6448, 0 10px 24px -14px rgb(0 0 0 / .35); }
.docs__stamp { font: 500 12px/1 var(--font-mono); color: #f4f3ee; background: #2c6448; padding: 6px 8px; border-radius: 6px; }
.docs__grants { position: absolute; right: 32px; top: 32px; width: calc(42% - 64px); }
.docs__grants dd { color: #2a2622; }

/* open source: the branch graph */
.git { --ratio: 110%; padding: var(--s-5); display: block; }
.git__svg { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.gt-main { stroke: #2a2622; stroke-width: 3; stroke-linecap: round; }
.gt-ref { font: 500 13px/1 var(--font-mono); fill: #555a55; }
.gt-branch { fill: none; stroke: #2c6448; stroke-width: 2; }
.gt-commit { fill: #f4f3ee; stroke: #2c6448; stroke-width: 2; }
.gt-merge { fill: #2a2622; stroke: #f4f3ee; stroke-width: 2; }
.gt-n { font: 500 14px/1 var(--font-mono); fill: #2a2622; }
.gt-t { font: 400 14px/1 var(--font-text); fill: #555a55; }
.gt-pulse { fill: #9fc7b8; stroke: #2c6448; stroke-width: 1.5; }

/* reduced motion: every visual at its finished picture */
@media (prefers-reduced-motion: reduce) {
  .bl-out .bl-cell, .bl-mark, .bl-status, .docs__sheet { animation: none !important; opacity: 1; transform: none; }
  .desk__ch svg, .mig__track i, .mob__link i, .device__curve, .desk__rec, .pl-room--alarm, .mig__nav i { animation: none !important; }
  .device__curve { stroke-dashoffset: 0; }
  .mig__track i:first-child { opacity: 1; left: 45%; }
}

/* tablet and phone */
@media (max-width: 1279px) {
  .bl-cell { width: 44px; height: 38px; font-size: 16px; }
}
@media (max-width: 1023px) {
  .desk, .mig, .topo { --ratio: 80%; }
  .git { --ratio: 90%; }
  .mob { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .mob__link { display: none; }
  .docs__stack { position: relative; right: auto; height: calc(7 * var(--dh) * .9 + var(--dh) + 56px); }
  .docs__grants { position: static; width: auto; margin: 0 28px 28px; }
  .docs__sheet { width: 64%; }
}
@media (max-width: 639px) {
  .bytelab { padding: var(--s-5) var(--s-4) 0; }
  .bl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bl-cell { width: 36px; height: 34px; font-size: 14px; }
  .bl-mark { margin-left: 0; }
  .bytelab .spec--row { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--s-5) 0 var(--s-6); }
  .spec > div { grid-template-columns: 7.5em minmax(0, 1fr); }
  .desk, .mig, .topo, .git { --ratio: 118%; }
  .desk__plan { width: calc(100% - 48px); left: 24px; bottom: 24px; }
  .desk__win { left: 16px; top: 16px; height: 46%; }
  .mig { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: var(--s-4); }
  .mig__db { min-height: 0; }
  .mob { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) var(--s-4) 0; justify-items: center; }
  .mob__probe, .mob__srv { display: none; }
  .docs__sheet { width: calc(100% - 64px); left: calc(16px + var(--i) * 2%); }
  .gauge svg { width: 98px; height: 26px; }
}

/* frames laid out as blocks keep their ratio through a block ::before */
.desk::before, .topo::before, .git::before { display: block; }
/* the byte lab fills its frame: larger cells, more air */
.bytelab__phase { gap: 14px; }
.bl-row { grid-template-columns: 128px minmax(0, 1fr); }
.bl-cell { width: 74px; height: 60px; font-size: 26px; border-radius: 10px; }
.bl-cells { gap: 10px; }
.bl-k { font-size: 14px; }
.bl-mark { font-size: 14px; padding: 12px 14px; }
.bl-status { font-size: 18px; margin-top: var(--s-3); }
@media (max-width: 1279px) { .bl-cell { width: 58px; height: 50px; font-size: 21px; } }
@media (max-width: 639px) { .bl-cell { width: 40px; height: 36px; font-size: 15px; } .bl-row { grid-template-columns: minmax(0, 1fr); } }

/* system.css positions a frame's children relatively; these visuals place their parts themselves */
.frame > :is(.desk__win, .desk__plan, .topo__svg, .git__svg, .docs__stack, .docs__grants, .spec--row) { position: absolute; }
.frame > .loop-pause { position: absolute; }
@media (max-width: 1023px) { .frame > :is(.docs__stack, .docs__grants) { position: relative; } }
@media (max-width: 639px) { .frame.bytelab > .spec--row { position: static; } }
.mig { min-height: clamp(440px, 64svh, 620px); }
.mig__lanes { gap: 12px; }
.mig__row { height: 40px; }
/* the mobile frame: every part on its own cell (the effect's canvas must not take one) */
.mob > .mob__probe { grid-area: 1 / 1; } .mob > .mob__link--ble { grid-area: 1 / 2; } .mob > .device { grid-area: 1 / 3; }
.mob > .mob__link--sync { grid-area: 1 / 4; } .mob > .mob__srv { grid-area: 1 / 5; }
.mob > :is(canvas, .frame__fx) { position: absolute; inset: 0; }
@media (max-width: 1023px) { .mob > .mob__probe { grid-area: 1 / 1; } .mob > .device { grid-area: 1 / 2; } .mob > .mob__srv { grid-area: 1 / 3; } }
@media (max-width: 639px) { .mob > .device { grid-area: 1 / 1; } }

@media (max-width: 639px) { .desk { --ratio: 150%; } .desk__win { height: 50%; } }
@media (max-width: 639px) { .desk__gain { display: none; } .desk__bar { gap: 10px; } }

/* phone and tablet: the layers stand in the flow under the words, so a larger text size (a phone's
   text-scaling setting) pushes them down instead of sliding them under the buttons; the hero then grows */
@media (max-width: 1023px) {
  main > section.hero--strata { height: auto; min-height: 100svh; display: flex; flex-direction: column; overflow: visible; }
  .hero--strata > .wrap { order: 0; flex: none; }
  .hero--strata > .strata { order: 1; position: relative; left: auto; right: auto; bottom: auto; top: auto; height: auto;
    margin-top: var(--s-7); display: flex; flex-direction: column-reverse; flex: none; }
  .hero--strata .strata__band { position: relative; left: auto; right: auto; bottom: auto; flex: none; height: var(--bh, 46px);
    margin-left: calc(var(--i) * var(--sx)); }
}
@media (max-width: 639px) {
  .hero--strata { --bh: 38px; --sx: 5.5%; }
  .hero--strata > .strata { margin-top: var(--s-6); }
  .hero--strata .btn-row { gap: var(--s-3); }
}

/* phones: sections follow their content, so a larger text size never runs one section into the next */
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero) { height: auto; min-height: 0; }
  main > :is(section, .section):not(.hero) > .wrap > .fill, main > :is(section, .section):not(.hero) .frame.fill { flex: none; }
  .bytelab.fill, .mob.fill { min-height: 0; }
}
/* the topology: the wide drawing from 640px, the two-column one on a phone */
.topo__svg--phone { display: none; }
@media (max-width: 639px) {
  .topo { --ratio: 0px; }
  .topo::before { display: none; }
  .topo__svg--wide { display: none; }
  .frame > .topo__svg--phone { display: block; position: relative; inset: auto; width: 100%; height: auto; }
  .tp-label--side { text-anchor: start; font-size: 14px; }
}
/* the documents keep their whole stack below 1024px, and their names on a phone */
@media (max-width: 1023px) {
  .docs.fill { flex: none; height: auto; }
}
@media (max-width: 639px) {
  .docs { --dh: 46px; }
  .docs__sheet { gap: 10px; padding: 0 12px; width: calc(100% - 24px - 7 * 3%); left: calc(12px + var(--i) * 3%); }
  .docs__code { min-width: 0; }
  .docs__ext { display: none; }
  .docs__stamp { padding: 5px 6px; }
}
/* the language and tool row: three to a line on a phone so long names keep their space */
@media (max-width: 639px) {
  .stack-row li { width: calc((100% - 2 * var(--s-4)) / 3); }
}

@media (max-width: 1023px) { .frame > .docs__grants { right: auto; top: auto; width: auto; } }
@media (max-width: 639px) { #allitas .mo-la__type { font-size: clamp(32px, 10vw, 52px); } .tp-label--side { font-size: 13px; } }