/* Why Zineps: the bento.

   Measured off the references logged in design.md. Three rules carry the grid:
   the row height is set by the grid and never by the content (vercel 280,
   bindplane 404, clerk 260); a cell that spans two rows is exactly two rows
   plus one gutter (clerk 260+8+260, pin 327073991712005917 132+3+132); and
   cells separate by tint alone, no stroke and no shadow, which is also this
   page's own locked material rule.

   The section heading lives inside the lead cell rather than above the grid.
   Every other section on this page is heading-then-content, and the three-card
   section directly above is already a 7:5 grid with a two-row lead, so a second
   one of those would read as the same section twice. */

.why {
  padding: var(--s-11) var(--s-8) var(--s-10);
  max-width: var(--content-max);
  margin-inline: auto;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(var(--bento-row), auto));
  gap: var(--bento-gap);
}

.cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* the slack falls in one field, not as two dead margins */
  gap: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--radius);
  background-color: var(--g-50);
  overflow: hidden;
}

/* Rank 1: the lead. Eight columns of twelve, one row, on the mint ground the
   page already gives a lead card. Copy left, the merge drawing right. */
.cell-intro {
  grid-column: 1 / 9;
  flex-direction: row;
  align-items: stretch;
  gap: var(--s-7);
  background-color: var(--m-50);
}

/* Rank 2: the tall cell. Four columns, both rows, so it is the only object in
   the section that runs the grid's full height. White rather than the grey the
   two small cells take, which keeps one treatment off 75% of the cells and
   gives the brand marks the ground they are drawn for. */
.cell-connect {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
  justify-content: flex-start;
  background-color: var(--g-0);
}

/* Rank 3: the two cells under the lead. */
.cell-chart { grid-column: 1 / 5; grid-row: 2; }
.cell-reach { grid-column: 5 / 9; grid-row: 2; }

.cell-copy { display: flex; flex-direction: column; gap: var(--s-2); }

.cell-art {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- the lead cell ---- */

/* With the heading at 20 the copy is a compact block, so it centres against the
   drawing instead of holding the cell's two ends: at this size, splitting it
   would leave a hole rather than a field. */
.intro-copy {
  flex: 5 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-5);
  align-items: flex-start;
}

.intro-head { display: flex; flex-direction: column; gap: var(--s-2); }
.intro-head .bento-title { margin-top: var(--s-2); margin-bottom: var(--s-1); }
.intro-copy .lede { max-width: var(--measure-lede); }

.intro-art {
  flex: 7 1 0;
  max-width: var(--iso-w);
  min-width: 0;
  align-self: stretch;
  min-height: 0;
}

/* The captain took this heading to 20: "try making it 20". The page keeps its
   three sizes, and the heading holds its rank by face - Almarai, which nothing
   else in the bento uses - by ink, and by sitting on the mint ground, rather
   than by being the largest thing in the cell. */
.bento-title {
  font-size: var(--t-lede);
  line-height: var(--lh-title);
  max-width: var(--measure-intro);
}

.intro-head .card-body { max-width: var(--measure-intro); }

/* The platform drawing, on the hero's isometric rules: 1px non-scaling ink,
   --g-0 and --g-50 faces, one mint element. */
.platform { width: 100%; height: 100%; display: block; }
.platform * { vector-effect: non-scaling-stroke; }
.platform .f-top { fill: var(--g-0); }
.platform .f-left { fill: var(--g-0); }
.platform .f-right { fill: var(--g-50); }
.platform .f-accent { fill: var(--m-400); }
.platform .e { stroke: var(--g-700); stroke-width: var(--hairline); stroke-linejoin: round; }
.platform .grid-rule { fill: none; stroke: var(--g-100); stroke-width: var(--hairline); }
.platform .halo { fill: none; stroke: var(--g-300); stroke-width: var(--hairline); stroke-dasharray: var(--dash-orbit); }
.platform .post { fill: none; stroke: var(--g-300); stroke-width: var(--hairline); }
.platform .rail { fill: none; stroke: var(--g-400); stroke-width: var(--hairline); stroke-linecap: round; stroke-linejoin: round; }
.platform .lane-out,
.platform .lane-head { fill: none; stroke: var(--m-600); stroke-width: var(--stroke-glyph); stroke-linecap: round; stroke-linejoin: round; }
.platform .rider { fill: var(--m-600); }
.platform .rider-out { fill: var(--m-700); }
.platform .f-live { fill: var(--m-200); }
.platform .halo-on { fill: none; stroke: var(--m-200); stroke-width: var(--hairline); stroke-dasharray: var(--dash-orbit); }

/* ---- the integrations cell: the live site's own marks ----
   Every rule is scoped to .wall: the hero illustration's SVG uses .tile too.
   Every logo is the company's own, taken from zineps.com, which ships them on
   its home page. They are used to name the systems Zineps connects to and for
   nothing else; see CREDITS.md. */

.wall {
  width: 100%;
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--tile-h), 1fr);
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wall .tile {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  border-radius: var(--radius-inner);
  background-color: var(--g-50);
}

.wall .tile[data-mark="shopify"] { --mh: 40px; }
.wall .tile[data-mark="woo"] { --mh: 30px; }
.wall .tile[data-mark="magento"] { --mh: 40px; }
.wall .tile[data-mark="ccv-shop"] { --mh: 32px; }
.wall .tile[data-mark="bol"] { --mh: 26px; }
.wall .tile[data-mark="amazon"] { --mh: 38px; }
.wall .tile[data-mark="temu"] { --mh: 36px; }
.wall .tile[data-mark="exact"] { --mh: 36px; }
.wall .tile[data-mark="snelstart"] { --mh: 38px; }

.wall .tile img {
  width: auto;
  height: var(--mh, var(--tile-mark));
  max-width: 100%;
  object-fit: contain;
}

.wall .tile-more { color: var(--g-500); }
.wall .tile-more .card-body { color: inherit; }

/* One lamp per tile: off, then on, walking the wall. It is decoration on top of
   a list that already reads without it, so it carries no state anyone needs. */
.wall .tile-lamp {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: var(--s-1);
  height: var(--s-1);
  border-radius: 50%;
  background-color: var(--g-200);
  transition: background-color var(--dur-base) var(--ease-out);
}

.wall .tile[data-on] .tile-lamp { background-color: var(--m-400); }

/* ---- the analytics cell: the week's parcels, inside a panel ----
   12.847, + 1.234 and the 750 line are the captain's illustrative values. They
   sit inside the mock and are never stated as a Zineps number in the copy. */

.report {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--radius);
  background-color: var(--g-0);
}

.report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
}

.report-label { flex: 1 0 100%; color: var(--g-500); }
.report-figure { color: var(--g-900); font-variant-numeric: tabular-nums; }
.report-delta { color: var(--m-800); }

.days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: var(--s-2);
  height: calc(var(--chart-h) + var(--s-2) + var(--lh-meta) * var(--t-ui));
}

/* The daily target, drawn where the bars can be read against it. */
.target {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--s-2) + var(--lh-meta) * var(--t-ui) + var(--chart-h) * var(--target-h));
  border-top: var(--hairline) dashed var(--g-300);
}

.target-label {
  position: absolute;
  right: 0;
  bottom: var(--hairline);
  padding-inline: var(--s-1);
  background-color: var(--g-0);
  color: var(--g-500);
}

.day { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2); height: 100%; }

/* The week's shape. These are the captain's illustrative values and they never
   change, so they are declared here rather than written into the markup. */
.day-bar[data-day="mo"] { --h: 0.42; --i: 0; }
.day-bar[data-day="tu"] { --h: 0.55; --i: 1; }
.day-bar[data-day="we"] { --h: 0.48; --i: 2; }
.day-bar[data-day="th"] { --h: 0.66; --i: 3; }
.day-bar[data-day="fr"] { --h: 0.90; --i: 4; }
.day-bar[data-day="sa"] { --h: 0.30; --i: 5; }
.day-bar[data-day="su"] { --h: 0.22; --i: 6; }

.day-bar {
  height: calc(var(--h) * var(--chart-h));
  min-height: var(--s-1);
  border-radius: var(--radius-inner) var(--radius-inner) 0 0;
  background-color: var(--m-100);
  transform-origin: bottom;
}

.day-now { background-color: var(--m-400); }
.day-label { color: var(--g-500); text-align: center; }

.is-live .day-bar {
  animation: bar-rise var(--dur-draw) var(--ease-out) backwards;
  animation-delay: calc(var(--i) * var(--stagger));
}

@keyframes bar-rise {
  from { transform: scaleY(0.04); }
  to { transform: scaleY(1); }
}

/* ---- the coverage cell: a wireframe globe ---- */

.reach {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.reach-legend {
  display: inline-flex;
  align-items: center;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  background-color: var(--m-100);
  color: var(--m-900);
}

.globe { width: 100%; height: auto; display: block; }
.globe .rim { fill: none; stroke: var(--g-300); stroke-width: 1; }
.globe .grid-line { fill: none; stroke: var(--g-300); stroke-width: 1; }
.globe .grid-back { stroke: var(--g-200); stroke-dasharray: 3 4; }
.globe .arc { fill: none; stroke: var(--m-600); stroke-width: 1.5; }
.globe .arc-back { stroke: var(--m-200); stroke-dasharray: 3 4; stroke-width: 1; }
.globe .stop { fill: var(--g-0); stroke: var(--m-600); stroke-width: 1.5; }
.globe .stop-live { fill: var(--m-400); stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .connect-row[data-state="now"] .connect-lamp { animation: none; }
  .is-live .day-bar { animation: none; }
}

/* Below 960 the lead takes the full width and the tall cell moves beside the
   two it used to sit next to, so it still spans two rows and no cell is
   stretched past the content it has. */
@media (max-width: 960px) {
  .why { padding-inline: var(--s-5); }
  .bento { grid-template-rows: auto repeat(2, minmax(var(--bento-row), auto)); }
  .cell-intro { grid-column: 1 / 13; grid-row: 1; }
  .cell-chart { grid-column: 1 / 7; grid-row: 2; }
  .cell-reach { grid-column: 1 / 7; grid-row: 3; }
  .cell-connect { grid-column: 7 / 13; grid-row: 2 / 4; }
}

@media (max-width: 960px) {
  .cell-intro { flex-direction: column; align-items: stretch; gap: var(--s-6); }
  .intro-art { flex: 0 0 auto; align-self: center; width: var(--iso-w); max-width: 100%; }
  .intro-copy { flex: 0 0 auto; }
}

/* One column on phones. Every cell takes the height of what it holds, and the
   grid's fixed row stops applying, because a 440 row on a 358 wide cell is a
   box with a hole in it rather than a bento cell. */
@media (max-width: 560px) {
  .why { padding-block: var(--s-9); }
  .bento { grid-template-rows: none; grid-auto-rows: auto; gap: var(--s-4); }
  .cell { gap: var(--s-5); }   /* padding stays 32 at every width, so the atom spec holds */
  .cell-intro,
  .cell-connect,
  .cell-chart,
  .cell-reach { grid-column: 1 / 13; grid-row: auto; }
  .intro-art { align-self: center; width: 100%; max-width: var(--iso-w); }
  .wall { min-height: var(--wall-min); }
}