/* ═══════════ ERP page ═══════════
   Everything shared with the landing page lives in base.css. Only the
   console belongs here. */

/* the console is the whole story here, so the section gives it the screen */
/* the hero: the copy was carrying no type scale of its own next to a
   full-height shape, so it read as a caption */
#top .pi{max-width:min(74ch,54%)}
#top h1{font-size:clamp(36px,5.2vw,74px);letter-spacing:-.046em;line-height:1.03;margin-top:18px}
#top h1 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  color:var(--k);font-size:1.06em}
#top .plede{color:var(--fg2);margin-top:20px;max-width:44ch;font-size:clamp(17px,1.55vw,21px);line-height:1.5}
.scale{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-top:clamp(26px,4vh,40px);
  color:var(--fg3);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.scale span{display:flex;align-items:baseline;gap:9px}
.scale b{font-family:"Inter Tight",system-ui,sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(28px,3.4vw,44px);color:var(--fg);line-height:1}
.c-cta{margin-top:clamp(28px,4.5vh,44px)}

#system{align-items:center;padding-block:clamp(48px,5.5vh,72px)}
#system .wrap{max-width:1420px}
#system .pi.wide{max-width:min(104ch,100%)}
#system h2{font-size:clamp(26px,3.5vw,48px);margin-top:16px}
#system .lede{margin-top:12px}

/* ---------- the console: one block that carries the whole system ---------- */
.c-con{margin-top:clamp(20px,3vh,34px);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(242,244,248,.022),transparent)}
.c-con .c-cap{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.16em;color:var(--fg3);
  text-transform:uppercase;margin:0 0 12px}
/* three columns: promises · the product · what runs underneath.
   Spending width instead of height lets the whole screenshot show. */
.c-con-top{display:grid;grid-template-columns:clamp(186px,14vw,222px) 1fr clamp(198px,14.6vw,238px)}

/* the fixed half — this never changes, whatever screen is showing */
.c-usp{border-right:1px solid var(--line);padding:clamp(16px,1.8vw,22px)}
.c-usp ul{margin:0;padding:0;list-style:none}
.c-usp li{padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4;
  display:flex;gap:11px;align-items:flex-start}
.c-usp li:last-child{border-bottom:1px solid var(--line)}
.c-usp li i{width:8px;height:8px;background:var(--k);flex:none;margin-top:5px;transition:background .6s}
.c-usp small{display:block;color:var(--fg3);font-size:12.5px;margin-top:3px;line-height:1.45}

/* the changing half — the product itself */
.c-view{margin:0;padding:clamp(16px,1.9vw,24px);display:flex;flex-direction:column;gap:14px;min-width:0;align-items:center}
.c-shot{flex:none;width:100%;aspect-ratio:1.6;border:1px solid var(--line);border-radius:6px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(62,127,196,.09),rgba(242,244,248,.025));
  display:flex;align-items:center;justify-content:center}
.c-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .45s}
.c-shot img.c-ready{opacity:1}
/* the label is the fallback: with no screenshot yet the frame still reads */
.c-ph{font-size:11px;letter-spacing:.2em;color:var(--fg3);text-align:center;padding:0 20px;transition:opacity .3s}
.c-shot img.c-ready~.c-ph{opacity:0}
.c-cap2{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-height:38px;
  width:min(100%, calc((100svh - 358px) * 1.6))}
.c-cap2 h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.c-cap2 p{margin:0;color:var(--fg2);font-size:14.5px;line-height:1.5}

/* the journey, now doubling as the control for the screen above */
.c-rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative}
.c-prog{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--k);
  box-shadow:0 0 10px color-mix(in srgb,var(--k) 60%,transparent)}
.c-st{appearance:none;background:none;border:0;border-right:1px solid var(--line);cursor:pointer;
  padding:13px 10px;text-align:left;color:var(--fg3);font-family:inherit;min-height:44px;
  display:flex;flex-direction:column;gap:7px;transition:background .3s,color .3s}
.c-st:last-child{border-right:0}
.c-st:hover{background:rgba(242,244,248,.03);color:var(--fg2)}
.c-st:focus-visible{outline:2px solid var(--k);outline-offset:-2px}
.c-st i{width:11px;height:11px;position:relative;flex:none}
.c-st i::before,.c-st i::after{content:"";position:absolute;width:6px;height:6px;background:var(--line);
  transition:background .35s,box-shadow .35s}
.c-st i::after{left:5px;top:5px;opacity:.55}
.c-st b{font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
/* the live step has to be unmistakable, since nothing else says which
   screen is on show */
.c-st[aria-selected="true"]{color:var(--fg);background:color-mix(in srgb,var(--k) 13%,transparent);
  box-shadow:inset 0 2px 0 var(--k)}
.c-st[aria-selected="true"] b{color:var(--fg);font-weight:700}
.c-st[aria-selected="true"] i::before{background:var(--k);
  box-shadow:0 0 12px color-mix(in srgb,var(--k) 65%,transparent)}
.c-st[aria-selected="true"] i::after{background:var(--k)}

/* the five layers — they light for whichever step is live */
.c-lay{border-left:1px solid var(--line);padding:clamp(16px,1.8vw,22px);display:grid;gap:13px;align-content:start}
/* stacked, because the column is narrow */
.c-band{display:grid;grid-template-columns:1fr auto;gap:6px 8px;width:100%;appearance:none;
  background:none;border:0;padding:6px 8px;margin:-6px -8px;border-radius:5px;cursor:pointer;
  font-family:inherit;text-align:left;transition:background .3s}
.c-band:hover{background:rgba(242,244,248,.04)}
.c-band:focus-visible{outline:1px solid var(--k);outline-offset:2px}
.c-band[aria-pressed="true"]{background:color-mix(in srgb,var(--k) 13%,transparent);
  box-shadow:inset 2px 0 0 var(--k)}
.c-band[aria-pressed="true"] .c-nm{color:var(--fg);font-weight:600}
.c-band .c-nm{font-size:13px;color:var(--fg3);transition:color .45s}
.c-more{margin-left:6px;font-family:"Space Mono",monospace;font-size:9px;text-decoration:none;
  border:1px solid var(--line);border-radius:3px;padding:1px 4px;color:var(--fg3);vertical-align:1px}
.c-band[aria-pressed="true"] .c-more{border-color:var(--k);color:var(--k)}
.c-band .c-cells{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap}
.c-band .c-cells s{width:10px;height:10px;background:rgba(242,244,248,.09);display:block;text-decoration:none;
  transition:background .45s,box-shadow .45s}
.c-band .c-ct{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--fg3);text-align:right}
.c-band.c-hot .c-nm{color:var(--fg)}
.c-band.c-hot .c-cells s{background:var(--k);box-shadow:0 0 8px color-mix(in srgb,var(--k) 50%,transparent)}

@media (max-width:900px){
  #top .pi{max-width:none}
  #top .plede{max-width:none}
}
@media (max-width:880px){
  /* the product goes first on a phone; the promises sit under it */
  .c-con-top{grid-template-columns:1fr}
  .c-usp{border-right:0;border-bottom:1px solid var(--line);order:2}
  .c-view{order:1;align-items:stretch}
  .c-cap2{width:100%}
  .c-lay{order:3;border-left:0;border-top:1px solid var(--line)}
  .c-band{grid-template-columns:78px 1fr auto}
  .c-band .c-cells{grid-column:auto}
  .c-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .c-rail::-webkit-scrollbar{display:none}
  .c-prog{display:none}
  .c-st{flex:0 0 44%;scroll-snap-align:start}
  .c-band{flex-wrap:wrap;gap:8px}
  .c-band .c-nm{width:auto}
}
/* short viewports: laptop screens lose 200px+ to browser chrome, so tie the
   shot's width to the height actually left over and trim the heading with it */
@media (min-width:901px){
  .c-shot{width:min(100%, calc((89svh - 376px) * 1.6))}
}
@media (min-width:901px) and (max-height:880px){
  #system{padding-block:clamp(48px,6vh,72px)}
  #system h2{font-size:clamp(26px,3.2vw,44px);margin-top:12px}
  #system .lede{margin-top:9px;font-size:16px}
  .c-con{margin-top:16px}
  .c-usp,.c-lay,.c-view{padding:15px 17px}
  .c-usp li{padding:8px 0;font-size:14px}
  .c-usp small{font-size:11.5px;margin-top:2px}
  .c-con .c-cap{margin-bottom:9px}
  .c-cap2{min-height:32px;gap:10px}
  .c-cap2 h3{font-size:20px}
  .c-cap2 p{font-size:14px}
  .c-st{padding:10px 9px;min-height:42px;gap:6px}
  .c-st b{font-size:12.5px}
  .c-lay{gap:10px}
  .c-band .c-nm{font-size:13px}
  .c-band .c-cells s{width:9px;height:9px}
}

/* below this the promise column, not the shot, sets the height — the
   headline claims still read without their sub-lines */
@media (min-width:901px) and (max-height:720px){
  .c-usp small{display:none}
  .c-usp li{padding:10px 0}
  #system h2{font-size:clamp(22px,2.5vw,32px)}
  #system .lede{display:none}
}

@media (prefers-reduced-motion:reduce){
  .c-shot img,.c-ph,.c-st i::before,.c-st i::after,.c-band .c-cells s,.c-band .c-nm{transition:none}
  .c-prog{display:none}
}

#inside{align-items:center}
#inside .wrap{max-width:1420px}
#inside h2{font-size:clamp(26px,3.4vw,48px)}

/* ---------- the index ---------- */
.c-idx{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,44px);
  margin-top:clamp(28px,4vh,48px)}
.c-grp h3{margin:0;font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg3);padding-bottom:12px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;transition:color .3s,border-color .3s}
.c-grp h3 u{text-decoration:none;color:var(--kt);font-size:15px;font-family:"Inter Tight",sans-serif;
  font-weight:700;letter-spacing:-.02em}
.c-grp ul{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
/* a name you can put your cursor on reads as a thing, not a tag */
.c-grp li{font-size:14px;color:var(--fg2);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;line-height:1.3;cursor:default;
  transition:color .22s,border-color .22s,background .22s,transform .22s}
.c-grp li:hover{color:var(--fg);border-color:color-mix(in srgb,var(--k) 60%,transparent);
  background:color-mix(in srgb,var(--k) 12%,transparent);transform:translateY(-2px)}
.c-grp:hover h3{color:var(--fg2);border-color:color-mix(in srgb,var(--k) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.c-grp li{transition:none}.c-grp li:hover{transform:none}}

/* the index is 74 names; on a laptop it has to give the heading back some room */
@media (min-width:901px) and (max-height:880px){
  #inside{padding-block:clamp(44px,5.5vh,68px)}
  #inside h2{font-size:clamp(24px,2.9vw,38px);margin-top:10px}
  #inside .lede{margin-top:8px;font-size:15px}
  .c-idx{margin-top:clamp(20px,2.6vh,30px);gap:clamp(18px,2vw,30px) clamp(20px,2.4vw,38px)}
  .c-grp h3{padding-bottom:10px}
  .c-grp ul{margin-top:12px;gap:7px}
  .c-grp li{font-size:13.5px;padding:6px 12px}
}

@media (max-width:1000px){
  .c-idx{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .c-idx{grid-template-columns:1fr}
}

/* the closing block is the only one that arrives without a label, which is why
   the brand gold reads as abrupt rather than as the company's own colour */
#start .kick{justify-content:center;margin-bottom:6px}
#start .kick b{background:#C9A227}
#start .kick{color:rgba(201,162,39,.72)}

/* The WMS page reuses this console, but its right-hand column is written,
   not clickable — warehousing has no cross-cutting layers to open. Same
   frame as .c-band so the two pages read as one family. */
.c-note{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 13px;
  font-size:13.5px;line-height:1.4;color:var(--fg2)}
.c-note small{display:block;color:var(--fg3);font-size:12px;margin-top:2px;line-height:1.4}
@media (max-width:900px){.c-note{font-size:13px}}

/* Why 84svh - 380px: everything around the screenshot inside #system measures
   500px at a 900px viewport — header 165, rail 62, caption 38, .c-view padding
   48, section padding 144, borders and gaps the rest. 144 of that is
   padding-block: clamp(64px,8vh,96px), which grows with the viewport, so the
   reserve is split into a fixed 380px and the 16svh the two paddings take.
   The old constant was 358px flat, which never bound on a wide window: the
   column width won the min() and the rail fell off the bottom. */

/* On a short laptop the written column, not the screenshot, is the tallest
   thing in the row — shrinking the shot cannot buy the last pixels back.
   Placed last so it wins on source order against the base .c-note rule. */
@media (min-width:901px) and (max-height:820px){
  .c-note{padding:8px 11px;font-size:13px}
  .c-note small{font-size:11.5px;margin-top:1px}
  .c-lay{gap:9px}
}

/* One pixel over at 1440x900 — the chip grid and its heading land exactly on
   the fold. A hair off the section's own padding is the cheapest place to
   find it, and nothing else in the section changes. */
@media (min-width:901px) and (min-height:860px) and (max-height:960px){
  #inside{padding-block:clamp(44px,5vh,64px)}
}

/* Phone sizes. These live here rather than in base.css because this file loads
   after it: at equal specificity the later rule wins, so the base file's
   mobile override never reached .c-cap or .c-ph. */
@media (max-width:720px){
  .c-st{padding:11px 9px;gap:6px}
  .c-st b{font-size:12px}
  /* fifteen 10px cells plus gaps overran the row by one, which wrapped alone */
  .c-band .c-cells s{width:8px;height:8px}
  .c-band .c-cells{gap:3px}
  .c-con .c-cap{font-size:12px;letter-spacing:.11em}
  .c-ph{font-size:12px}
  .c-note{font-size:13px}
  .c-note small{font-size:12px}
  .c-band{min-height:44px}
  .c-st{min-height:46px}
  .c-grp li{padding:9px 14px;font-size:13.5px}
}

@media (max-width:720px){
  .c-ph{font-size:12px}
  .c-band .c-ct{font-size:12px}
  .c-usp small{font-size:12px}
  .c-grp h3{font-size:12px}
  .c-note small{font-size:12px}
  .c-con .c-cap{font-size:12px}
}

@media (max-width:720px){
  /* the hero counts and the layer-band badge were the last two under 12px */
  .scale span{font-size:12px}
  .c-more{font-size:12px;padding:2px 5px}
}

@media (max-width:720px){
  /* Same story as the landing page: these clamps bottom out on a phone, so
     every inner-page heading rendered at its floor — a 36px hero against a
     74px one on a desktop. The scale here matches the landing page so the
     site reads as one thing.

     Ceilings, found by growing each heading until it overflowed: the tightest
     on any inner page is /wms's "Warehouse management" at 52px on a 320
     screen, 61px at 390, 68px at 430. Everything else clears 85px. */
  #top h1{font-size:clamp(36px,13.6vw,62px);margin-top:14px}
  #system h2,#inside h2{font-size:clamp(34px,12vw,54px);margin-top:14px}
}