/* ============================================================================
   cs-page.css — the shared shell for Cargo-Stack PRODUCT PAGES.

   index.html is a 470 KB monolith with its stylesheet, its three dictionaries
   and fifty sections all inline. It works, and it is exactly the wrong thing to
   copy five times. Everything a product page needs lives here instead, so
   tenders/quotes/operations/intelligence/mobile are each a page of CONTENT
   rather than a page of infrastructure — and a change to the nav happens once.

   index.html is deliberately NOT migrated yet. Rewriting a working, harness-
   covered homepage at the same time as introducing a new page type is two risky
   changes wearing one coat; the homepage moves over once a product page has
   proven the shell in production.

   Shape of an Apple product page, and the reason each part earns its place:
     · one idea per screen, stated at display size
     · a STICKY visual that changes as the words scroll past it — the reader
       never loses the product while reading about it
     · generous vertical space, because crowding is what makes a page feel cheap
     · every motion opt-in and reversible under prefers-reduced-motion
   ============================================================================ */

:root{
  --bg:#0A0F1C; --bg2:#0D1424; --panel:#111A2E; --panel2:#0F1729;
  --line:rgba(148,163,184,.14); --line2:rgba(148,163,184,.24);
  --text:#E7ECF5; --muted:#98A6BC; --dim:#77859D;
  --teal:#2DD4BF; --teal-dim:rgba(45,212,191,.12); --amber:#F5B84A;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
    "PingFang HK","Hiragino Sans","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--teal);text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---- nav ---------------------------------------------------------------- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,15,28,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--text);letter-spacing:-.01em}
.brand svg{width:22px;height:22px}
.nav-links{display:flex;gap:20px;font-size:14.5px;color:var(--muted);margin-left:10px}
.nav-links a:hover{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(max-width:860px){.nav-links{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--teal);color:#04211D;font-weight:700;font-size:14.5px;
  padding:11px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  min-height:44px;transition:transform .2s,filter .2s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.btn.sm{padding:7px 13px;font-size:13px;min-height:36px}
.langs{display:flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.langs button{background:transparent;border:0;color:var(--muted);font-size:12.5px;
  padding:7px 10px;cursor:pointer;min-height:36px}
.langs button.on{background:var(--teal);color:#04211D;font-weight:700}

/* ---- page hero ---------------------------------------------------------- */
.phero{padding:86px 0 54px;text-align:center;position:relative;overflow:hidden}
.phero::after{content:'';position:absolute;left:50%;top:-30%;width:900px;height:600px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(45,212,191,.10),transparent 72%)}
.peye{font:600 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.phero h1{font-size:clamp(38px,6.4vw,72px);line-height:1.04;letter-spacing:-.035em;
  margin:16px auto 18px;max-width:16ch;font-weight:800}
.phero .lede{font-size:clamp(17px,2.1vw,21px);line-height:1.55;color:var(--muted);
  max-width:52ch;margin:0 auto 26px}
.phero-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- the sticky story: the heart of the page ---------------------------- */
.story{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:48px;
  padding:40px 0 80px;align-items:start}
.story-steps{display:flex;flex-direction:column;gap:0}
.story-step{padding:34vh 0;opacity:.32;transition:opacity .45s ease}
.story-step:first-child{padding-top:8vh}
.story-step:last-child{padding-bottom:24vh}
.story-step.on{opacity:1}
.story-step .n{font:600 11.5px var(--mono);letter-spacing:.18em;color:var(--teal);display:block;margin-bottom:12px}
.story-step h2{font-size:clamp(25px,3.3vw,38px);line-height:1.16;letter-spacing:-.025em;margin:0 0 14px;font-weight:750}
.story-step p{color:var(--muted);font-size:16px;line-height:1.68;margin:0;max-width:46ch}
.story-visual{position:sticky;top:96px;height:min(72vh,640px);display:flex;align-items:center;justify-content:center}
.story-frame{position:relative;width:100%;height:100%;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:var(--panel2);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.story-frame figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.03);
  transition:opacity .55s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.story-frame figure.on{opacity:1;transform:none}
.story-frame img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
@media(max-width:900px){
  .story{grid-template-columns:1fr;gap:0}
  .story-visual{position:static;height:auto;margin:6px 0 26px;order:-1}
  /* 52vw was sized for a screenshot, which crops gracefully. A diagram does
     not — object-fit cannot save a table whose last row is cut off. Measured
     content need across the six at 360/390/760px tops out at 450px, so the
     frame is tall enough to hold the tallest rather than clipping it. */
  .story-frame{height:auto;min-height:390px}
  .story-step{padding:26px 0;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .story-step{opacity:1;transition:none}
  .story-frame figure{transition:none}
}

/* ---- generic section furniture ----------------------------------------- */
section{padding:74px 0}
.sec-head{max-width:640px;margin:0 0 30px}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
.sec-eyebrow{font:600 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.sec-head h2{font-size:clamp(26px,3.6vw,40px);line-height:1.15;letter-spacing:-.028em;margin:0 0 12px;font-weight:750}
.sec-sub{color:var(--muted);font-size:16.5px;line-height:1.66;margin:0}
.rev{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.08s}.rev.d2{transition-delay:.16s}.rev.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:16px;padding:22px}
.card h3{font-size:17px;margin:0 0 8px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:14.5px;line-height:1.62;margin:0}
.card .ic{font-size:20px;margin-bottom:12px;display:block}

/* a stat that states its own source, because an unsourced number is a claim */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--panel2)}
.stat b{display:block;font:700 34px/1 var(--mono);color:var(--teal);letter-spacing:-.02em}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--muted);line-height:1.5}
.stat i{display:block;margin-top:7px;font-size:11.5px;color:var(--dim);font-style:normal}

/* ---- closing CTA -------------------------------------------------------- */
.endcta{text-align:center;padding:80px 0 96px;border-top:1px solid var(--line)}
.endcta h2{font-size:clamp(28px,4.2vw,46px);line-height:1.12;letter-spacing:-.03em;margin:0 auto 14px;max-width:18ch;font-weight:800}
.endcta p{color:var(--muted);max-width:48ch;margin:0 auto 22px;font-size:16.5px;line-height:1.6}
.endcta .fine{font-size:12.5px;color:var(--dim);margin-top:14px}

footer{border-top:1px solid var(--line);padding:36px 0 60px;color:var(--dim);font-size:13.5px}
.foot-in{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-in a{color:var(--muted)}
.foot-in .sp{flex:1}

/* ============================================================================
   STORY DIAGRAMS (tenders.html)
   Replaced six screenshots that showed the wrong screens. These are drawn, and
   they say so — the .dg-chip is not decoration, it is the honesty label that
   lets the frame sit next to real product copy without claiming to be a
   photograph of the product.
   ========================================================================== */
/* justify-content:center, NOT a caption pushed down with margin:auto. The six
   diagrams differ in height by a factor of three, so anchoring content to the
   top and the caption to the bottom left 400px of dead air inside a 657px
   frame on the shorter ones. Centring the whole group keeps every step looking
   composed whatever it contains. */
.story-frame figure.dg{display:flex;flex-direction:column;justify-content:center;gap:13px;
  padding:20px 22px;background:linear-gradient(180deg,#0c1424,#080e1a);overflow:hidden}
.dg-chip{position:absolute;top:12px;right:14px;font:600 9px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:99px;
  padding:3px 9px;background:rgba(8,14,26,.8)}
.dg-cap{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:58ch;
  padding-top:13px;border-top:1px solid var(--line)}
.dg .nolang{font-family:var(--mono)}

/* the workbook */
.dg-tabs{display:flex;gap:4px;flex-wrap:wrap;padding-right:78px}
.dg-tabs i{font:600 9.5px var(--mono);font-style:normal;color:var(--dim);padding:4px 9px;
  border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;background:rgba(148,163,184,.05)}
.dg-tabs i.on{color:var(--teal);border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.08)}
.dg-sheet{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dg-row{display:grid;grid-template-columns:1.2fr 1.2fr .8fr .55fr .8fr;gap:1px;
  font:500 12px var(--mono);background:var(--line)}
.dg-row>*{background:#0a1120;padding:10px 11px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dg-row.dg-head>*{background:#131e33;color:var(--dim);font-weight:700;font-size:10px;letter-spacing:.08em}
/* the merged header a shipper actually sends */
.dg-head .sp2{grid-column:span 2}
.dg-row .blk{background:repeating-linear-gradient(45deg,#1b2334 0 5px,#0a1120 5px 10px)}
.dg-sheet.back .wr{background:rgba(45,212,191,.14);color:#EAFFFB;font-weight:700}

/* the mapping */
.dg-map{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dg-mh{display:grid;grid-template-columns:1fr 18px 1fr 90px;gap:8px;padding:7px 11px;
  background:#131e33;font:700 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.dg-mh span:last-child{grid-column:3/-1}
.dg-mr{display:grid;grid-template-columns:1fr 22px 1fr 96px;gap:10px;align-items:center;
  padding:12px 13px;border-top:1px solid var(--line);font:500 12.5px var(--mono)}
.dg-mr b{color:var(--text);font-weight:600}
.dg-mr i{height:1px;background:rgba(45,212,191,.5);position:relative}
.dg-mr i::after{content:'';position:absolute;right:-1px;top:-2px;border:3px solid transparent;
  border-left-color:rgba(45,212,191,.7)}
.dg-mr span{color:var(--teal)}
.dg-mr em{font-style:normal;text-align:right;color:var(--dim);font-size:10px}
.dg-mr em.w{color:var(--amber)}
.dg-mr.fix i{background:rgba(245,184,74,.55)}
.dg-mr.fix i::after{border-left-color:rgba(245,184,74,.8)}
.dg-mr.fix span{color:var(--amber)}

/* the gateways */
.dg-gwin{font:700 15px var(--mono);color:var(--text);padding:9px 13px;border:1px dashed var(--line2);
  border-radius:8px;display:inline-block}
.dg-gw{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.dg-gwopt{width:100%;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline;
  padding:15px 16px;border:1px solid var(--line);border-radius:10px}
.dg-gwopt b{font:700 15px var(--mono);color:var(--muted)}
.dg-gwopt span{color:var(--muted);font-size:13px;line-height:1.5}
.dg-gwopt.on{border-color:rgba(45,212,191,.45);background:rgba(45,212,191,.06)}
.dg-gwopt.on b{color:var(--teal)}
.dg-gwopt em{grid-column:2;font-style:normal;font:600 9.5px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal);margin-top:5px}

/* the four prices */
.dg-lane{font:600 11px var(--mono);color:var(--dim);letter-spacing:.06em}
.dg-ladder{display:grid;gap:9px}
.dg-p{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;
  border:1px solid var(--line);border-radius:9px;background:rgba(148,163,184,.04)}
.dg-p span{font:600 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.dg-p b{font:700 17px var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
.dg-p.t{border-color:rgba(45,212,191,.45);background:rgba(45,212,191,.07)}
.dg-p.t b,.dg-p.t span{color:var(--teal)}
.dg-p.f b{color:var(--muted)}
/* empty on purpose — the system will not invent a walk-away */
.dg-p.e{border-style:dashed}
.dg-p.e b.dash{color:var(--dim);font-weight:400}

/* the checks */
.dg-checks{display:grid;grid-template-columns:repeat(18,1fr);gap:6px}
.dg-checks i{aspect-ratio:1;border-radius:3px;background:rgba(45,212,191,.16);
  border:1px solid rgba(45,212,191,.28);font-style:normal}
.dg-checks i.hit{background:var(--amber);border-color:var(--amber)}
.dg-find{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:14px 15px;
  border:1px solid rgba(245,184,74,.35);border-radius:9px;background:rgba(245,184,74,.06)}
.dg-find b{font:700 11px var(--mono);color:var(--amber)}
.dg-find span{color:var(--muted);font-size:12.5px;line-height:1.55}

@media(max-width:900px){
  /* The figures are absolutely positioned so the frame has no intrinsic
     height — it has to be told, and told enough for the TALLEST diagram in
     the WORST language at every width in the range, not just the one being
     looked at. Measured worst case is 450px (the check step at 760px, en);
     510 leaves real slack for a longer translation rather than clipping a
     table's last row, which is what object-fit used to hide for screenshots. */
  .story-frame{min-height:510px}
}
@media(max-width:760px){
  .story-frame figure.dg{padding:14px 14px 12px;gap:9px}
  .dg-cap{font-size:12px}
  .dg-row{font-size:9.5px} .dg-row>*{padding:5px 6px}
  .dg-checks{grid-template-columns:repeat(12,1fr)}
  .dg-tabs i{font-size:8.5px;padding:3px 6px}
}

/* ---- diagram primitives shared by the feature pages --------------------- */
.dg-rows{display:grid;gap:6px}
.dg-r{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:baseline;
  padding:10px 13px;border:1px solid var(--line);border-radius:9px;font:500 12.5px var(--mono)}
.dg-r b{color:var(--muted);font-weight:600}
.dg-r span{color:var(--text)}
.dg-r.ok{border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.06)}
.dg-r.ok span{color:var(--teal)}
.dg-r.warn{border-color:rgba(245,184,74,.38);background:rgba(245,184,74,.06)}
.dg-r.warn span{color:var(--amber)}
.dg-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.dg-flow .dg-chip{font:600 11px var(--mono);color:var(--text);padding:9px 13px;
  border:1px solid rgba(45,212,191,.35);border-radius:8px;background:rgba(45,212,191,.06)}
.dg-ar{font-style:normal;color:var(--dim)}
.dg-stack{display:grid;gap:6px}
.dg-card{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:baseline;
  padding:11px 13px;border:1px solid var(--line);border-radius:9px}
.dg-card b{font:700 11.5px var(--mono);color:var(--teal)}
.dg-card span{color:var(--muted);font-size:12.5px}
.dg-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dg-col{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.dg-col b{display:block;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:8px}
.dg-col.was b{color:var(--dim)} .dg-col.now b{color:var(--teal)}
.dg-col ul{margin:0;padding-left:16px} .dg-col li{font-size:12.5px;color:var(--muted);line-height:1.75}
.dg-col.now{border-color:rgba(45,212,191,.35);background:rgba(45,212,191,.05)}
@media(max-width:640px){
  .dg-r,.dg-card{grid-template-columns:1fr;gap:3px}
  .dg-compare{grid-template-columns:1fr}
}