/* Products page hero as a hand of trading cards (Mehul 2026-10-30).
   .tc is one card: a coloured frame, a small piece of the product's real screen as its
   "photo", and a name plate. Pressing a card flips it to its scouting report. The flip is
   flat (the card narrows to a line and opens on its back) rather than a 3D turn, so the
   text is drawn directly, never from a flattened 3D layer, and stays sharp at any scale. */

.tcx-hero{position:relative; padding:64px 0 28px; overflow:hidden; background:#f6f8fa; border-bottom:1px solid #e3e9ee;}
.tcx-top{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:end;}
.tcx-series{margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#62707c;}
.tcx-h1{margin:0; font-family:var(--pc-display); font-weight:400; text-transform:uppercase; font-size:clamp(52px,6.2vw,88px); line-height:.92; letter-spacing:.3px; color:#0d1b2a;}
.tcx-intro p{margin:0; font-size:17px; line-height:1.6; color:#41505d;}
.tcx-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.tcx-btn{display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:6px; background:#0d1b2a; color:#fff; font-size:14.5px; font-weight:700; text-decoration:none; transition:background .15s;}
.tcx-btn:hover{background:#007a76;}
.tcx-btn.o{background:#fff; color:#0d1b2a; box-shadow:inset 0 0 0 1px #d5dde3;}
.tcx-btn.o:hover{box-shadow:inset 0 0 0 1px #007a76; color:#007a76;}
.tcx-btn:focus-visible{outline:2px solid #007a76; outline-offset:3px;}

/* ---------- one card ---------- */
/* light card stock: --c the pale frame, --t a paler tint, --cd the deep shade for small accents and text */
.tc{--c:#cfe8e5; --t:#e9f5f4; --cd:#00605d; position:relative; display:block; width:244px; height:342px; list-style:none;}
.tc-in{position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left;
  cursor:pointer; transition:transform .16s ease-in;}
.tc.turning .tc-in{transform:scaleX(0);}
.tc-face{position:absolute; inset:0; display:flex; flex-direction:column; border-radius:9px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(13,27,42,.12), 0 1px 2px rgba(13,27,42,.16), 0 12px 24px -14px rgba(13,27,42,.4);}
.tc-front{background:var(--c); padding:6px;}
/* the name sits in the top band, the part of each card that stays in view when the hand is fanned */
.tc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; min-height:44px; padding:5px 7px 8px; color:#0d1b2a;}
.tc-name{max-width:114px; font-family:var(--pc-display); font-weight:400; font-size:19px; line-height:1.02; letter-spacing:.4px; text-transform:uppercase;}
/* wrapped to the width each card keeps in view when fanned, so a long name breaks rather than hides */
.tc-no{flex:none; padding-top:2px; font-family:var(--pc-display); font-size:14px; letter-spacing:.5px; color:var(--cd);}
.tc-photo{flex:1; box-shadow:0 0 0 1px rgba(13,27,42,.06); display:flex; flex-direction:column; justify-content:center; padding:12px 13px; border-radius:4px; background:#fff; overflow:hidden;}
.tc-plate{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px -6px -6px; padding:8px 13px 9px; background:#fff; border-top:1px solid rgba(13,27,42,.08);}
.tc-brand{font-size:10.5px; font-weight:800; letter-spacing:.2em; color:#0d1b2a;}
.tc-plate i{flex:none; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--cd);}

/* the back: cream card stock, a scouting report and three stat lines */
.tc-back{display:none; padding:15px 15px 44px; background:#fbfaf6;
  box-shadow:inset 0 0 0 3px var(--c), 0 0 0 1px rgba(13,27,42,.1), 0 12px 24px -14px rgba(13,27,42,.4);}
.tc.flip .tc-front{display:none;}
.tc.flip .tc-back{display:flex;}
.tc-bh{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding-bottom:7px; border-bottom:2px solid #0d1b2a;}
.tc-bh b{font-family:var(--pc-display); font-weight:400; font-size:18px; line-height:1.05; letter-spacing:.3px; text-transform:uppercase; color:#0d1b2a;}
.tc-bh span{flex:none; font-family:var(--pc-display); font-size:14px; color:var(--cd);}
.tc-k{margin:11px 0 5px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cd);}
.tc-rep{font-size:13px; line-height:1.45; color:#22313d;}
.tc-stats{display:block; margin-top:10px;}
.tc-stat{display:flex; gap:6px; padding:6px 0; border-bottom:1px dotted #c3ccd4; font-size:12.5px; color:#22313d;}
.tc-stat span{flex:1;} .tc-stat b{font-weight:800; color:#0d1b2a;}
/* the link to the product sits on the back's foot, live only once the card is flipped */
.tc-go{position:absolute; left:8px; right:8px; bottom:7px; z-index:2; display:flex; align-items:center; min-height:30px; padding:0 7px;
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--cd); text-decoration:none;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .2s, transform .2s, visibility 0s .2s;}
/* it is not part of the turning card, so it waits for the card to open, then fades up */
.tc.flip:not(.turning) .tc-go{opacity:1; visibility:visible; transform:none; transition:opacity .22s .18s, transform .22s .18s, visibility 0s .18s;}
.tc.turning .tc-go{opacity:0; visibility:hidden; transition:none;}
.tc-go:hover{text-decoration:underline;}
.tc-in:focus-visible, .tc-go:focus-visible{outline:2px solid #0d1b2a; outline-offset:4px; border-radius:10px;}

/* small pieces of the real screens, the card's "photo" */
.u-h{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:7px; border-bottom:1px solid #e9edf0; font-size:13px; font-weight:800; color:#0d1b2a;}
.u-h small{font-size:11px; font-weight:600; color:#5b6975;}
.u-r{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid #eef1f4; font-size:13px; color:#22313d;}
.u-r b{font-weight:700; color:#0d1b2a;}
.u-r:last-child{border-bottom:0;}
.u-btn{padding:4px 9px; border-radius:4px; background:var(--cd); color:#fff; font-size:11px; font-weight:800;}
.u-ok,.u-no{width:15px; height:15px; border-radius:50%;} .u-ok{background:var(--cd);} .u-no{box-shadow:inset 0 0 0 1.5px #b9c3cb;}
.u-chip{padding:3px 6px; border-radius:3px; background:var(--t); color:var(--cd); font-size:11px; font-weight:800;}
.u-big{margin:8px 0 6px; font-size:30px; font-weight:800; letter-spacing:-.02em; color:#0d1b2a;}
.u-bars{display:flex; align-items:flex-end; gap:5px; height:96px;} .u-bars i{flex:1; border-radius:2px 2px 0 0; background:var(--cd);}
.u-code{display:inline-block; align-self:flex-start; margin-top:12px; padding:6px 9px; border:1.5px dashed var(--cd); border-radius:6px; font:800 12px/1 ui-monospace,Menlo,monospace; letter-spacing:.08em; color:var(--cd);}
.u-vid{display:grid; place-items:center; height:100px; margin:6px 0; border-radius:4px; background:#1d2b38;}
.u-vid::after{content:""; margin-left:4px; border-left:15px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;}

/* ---------- the hand: seven cards held in a fan, each laid over the one to its left,
   pivoting on one point below the hand the way cards fan out between finger and thumb ---------- */
.tcx-hand{position:relative; height:480px; margin:20px 0 0; padding:0; list-style:none;}
.tcx-hand .tc{position:absolute; left:50%; top:46px; margin-left:-122px; transform-origin:50% 230%;
  transform:rotate(calc(var(--k) * 9deg)); transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.tcx-hand .tc:nth-child(1){z-index:1} .tcx-hand .tc:nth-child(2){z-index:2} .tcx-hand .tc:nth-child(3){z-index:3} .tcx-hand .tc:nth-child(4){z-index:4}
.tcx-hand .tc:nth-child(5){z-index:5} .tcx-hand .tc:nth-child(6){z-index:6} .tcx-hand .tc:nth-child(7){z-index:7}
/* pointing at a card slides it up out of the hand, along its own tilt */
.tcx-hand .tc:hover, .tcx-hand .tc:focus-within{transform:rotate(calc(var(--k) * 9deg)) translateY(-44px);}
.tcx-hand .tc.flip{transform:rotate(calc(var(--k) * 9deg)) translateY(-44px); z-index:20;}
.tcx-hint{margin:0; text-align:center; font-size:13px; color:#62707c;} .tcx-hint b{color:#0d1b2a;}

@media (prefers-reduced-motion:reduce){ .tc-in, .tcx-hand .tc, .tc-go, .tc.flip:not(.turning) .tc-go{transition:none;} }

/* ---------- smaller screens ---------- */
@media (max-width:900px){ .tcx-top{grid-template-columns:minmax(0,1fr); gap:20px;} }
/* tablets: the same hand, a little smaller so the outer cards stay on screen */
@media (min-width:761px) and (max-width:1000px){ .tcx-hand{zoom:.8;} }
/* phones: the hand becomes a straight row you swipe */
@media (max-width:760px){
  .tcx-hero{padding:48px 0 24px;}
  .tcx-hand{display:flex; gap:14px; height:auto; margin:32px 0 0; padding:10px 20px 18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none; overscroll-behavior-x:contain;}
  .tcx-hand::-webkit-scrollbar{display:none;}
  .tcx-hand::after{content:""; flex:0 0 6px;}
  .tcx-hand .tc, .tcx-hand .tc:hover, .tcx-hand .tc:focus-within, .tcx-hand .tc.flip{position:relative; left:auto; top:auto; flex:0 0 244px; margin:0; transform:none; scroll-snap-align:start;}
  .tcx-hint{margin-top:4px;}
}