/* Central Fleet — public marketing site
   sections.css
   Part of the approved design. Load order matters: see src/pages/index.html. */

/* ── 2. benefit strip ─────────────────── */
.strip{background:var(--white);border-bottom:1px solid var(--rule)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.bn{padding:34px 30px 34px 0;border-right:1px solid var(--rule)}
.bn:last-child{border-right:0}
.bn:not(:first-child){padding-left:30px}
.bn .ic{color:var(--g);margin-bottom:13px}
.bn h3{font-size:15.5px;margin-bottom:6px;letter-spacing:-.022em}
.bn p{font-size:13.8px;color:var(--slate);line-height:1.55}

/* ── 3. use cases ─────────────────────── */
.shead{margin-bottom:48px;max-width:34em}
.shead h2{font-size:clamp(30px,3.8vw,46px);font-weight:800;letter-spacing:-.038em;margin-top:16px}
.shead p{margin-top:16px}
.uc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ucard{border-radius:16px;overflow:hidden;background:var(--white);border:1px solid var(--rule);transition:transform .4s var(--ez),box-shadow .4s var(--ez),border-color .3s}
.ucard:hover{transform:translateY(-5px);box-shadow:0 3px 8px rgba(13,18,17,.04),0 22px 48px rgba(13,18,17,.11);border-color:var(--rule2)}
.ucard .im{aspect-ratio:3/2;overflow:hidden;background:var(--paper2)}
.ucard .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ez)}
.ucard:hover .im img{transform:scale(1.045)}
.ucard .bd{padding:24px 24px 26px}
.ucard h3{font-size:19px;margin-bottom:9px;letter-spacing:-.028em}
.ucard p{font-size:14.5px;color:var(--slate);line-height:1.6}
.more{margin-top:26px;font-size:15px;color:var(--slate)}
.more a{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--gt2);transition:border-color .2s}
.more a:hover{border-color:var(--g)}

/* ── 4. timeline ──────────────────────── */
.tl-d{margin-top:6px}
.tl-track,.tl-text{display:grid;grid-template-columns:repeat(4,1fr)}
.tl-text{margin-top:22px;gap:0}
.tl-node{display:flex;align-items:center;gap:0;min-width:0}
.tl-node .dot{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:-.02em;
  background:var(--white);border:2px solid var(--rule2);color:var(--slate2);
  transition:background .45s var(--ez),border-color .45s var(--ez),color .45s var(--ez),transform .3s var(--ez)}
.tl-d.go .tl-node .dot{border-color:var(--g);color:var(--g)}
.tl-d.go .tl-node.lit .dot{background:var(--g);border-color:var(--g);color:#fff}
.tl-node .seg{flex:1;height:2px;background:var(--rule);position:relative;margin:0 4px}
.tl-node .seg i{position:absolute;inset:0;width:0;background:var(--g);transition:width .8s var(--ez)}
.tl-d.go .tl-node .seg i{width:100%}
.tl-node .seg:after{content:'';position:absolute;right:-1px;top:50%;width:7px;height:7px;border-right:2px solid var(--rule2);border-top:2px solid var(--rule2);
  transform:translateY(-50%) rotate(45deg);transition:border-color .6s var(--ez)}
.tl-d.go .tl-node .seg:after{border-color:var(--g)}
.tl-node:last-child .seg{display:none}
.tl-step{padding-right:34px}
.tl-step h3{font-size:18px;letter-spacing:-.026em;margin-bottom:9px;transition:color .25s var(--ez)}
.tl-step p{font-size:14.5px;color:var(--slate);line-height:1.6}
.tl-node.on .dot{transform:scale(1.09)}
.tl-step.on h3{color:var(--g)}
.tl-step.on p{color:var(--ink2,#3c4842)}
.tl-m{display:none}
.tl-mi{display:flex;gap:18px;padding-bottom:30px;position:relative}
.tl-mi:last-child{padding-bottom:0}
.tl-mi:before{content:'';position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--gt2)}
.tl-mi:last-child:before{display:none}
.tl-mi .dot{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:13.5px;font-weight:500;background:var(--g);color:#fff;
  box-shadow:0 2px 6px rgba(11,132,70,.24);position:relative;z-index:1}
.tl-mi .bd{padding-top:8px;min-width:0}
.tl-mi h3{font-size:17px;letter-spacing:-.024em;margin-bottom:7px}
.tl-mi p{font-size:14.5px;color:var(--slate);line-height:1.6}