/* Custom-build section on product pages (remember row 24y). Design "Round 7 · Showcase" (Kristian's pick 2026-10-04, canvas
   https://claude.ai/artifact/JK3VVpCf7tkQ5yu7uyewW6): an advertisement for /custom-builds/ — text and one white button on the left,
   three real chart pictures stacked on the right. No form. Loaded only by src/_includes/product/custom-build.njk, which
   product-v3.njk includes when the product json sets "customBuild": true. Everything is scoped under .cbx.
   It takes the PAGE's own language, so it reads as part of the page and never outranks the product's own button (cold review
   2026-10-04): the button is the page's white button (48 px, 4 px corners, 15 px, hover #EDEDED, the same arrow), the card is the
   page's dark card (#0A0A0A, border .16, 12 px corners), the headline is DM Sans 600 in #F4F4F4 with the page's tight spacing.
   The picture stack is one box with a fixed shape (660 : 368), centred in its half of the card; the three pictures are placed in
   percent inside it, so the stack keeps its look at every width. The back two are darkened with a filter, not made see-through. */
.cbx{ box-sizing:border-box; max-width:1208px; margin:128px auto 0; padding:0 24px; color:#F4F4F4; text-align:left; }
.cbx *, .cbx *::before, .cbx *::after{ box-sizing:border-box; }

/* the section header above the card: the page's own section-heading style (.t3-use-h / .t3-demo-h), one step bigger and closer
   to the card on Kristian's word 2026-10-04 ("slightly closer to the box and slightly bigger"): 56 px (theirs 52), 42 from 1100 down
   (theirs 40 from 980), and 34 on phones — the page's own cap there, so it never gets bigger than the product's closing headline (60 / 44 / 34) */
.cbx-title{ margin:0 0 30px; font-family:'DM Sans', var(--sans); font-size:56px; font-weight:600; line-height:1.05; letter-spacing:-1.5px; text-align:center; text-wrap:balance; color:#F4F4F4; -webkit-font-smoothing:antialiased; }

.cbx-card{ display:flex; min-height:460px; overflow:hidden; background:#0A0A0A; border:1px solid rgba(255,255,255,.16); border-radius:12px; }

.cbx-text{ display:flex; flex-direction:column; justify-content:center; gap:18px; flex:0 0 500px; padding:56px 0 56px 56px; }
.cbx-h{ margin:0; font-family:'DM Sans', var(--sans); font-size:42px; font-weight:600; line-height:1.08; letter-spacing:-1.2px; color:#F4F4F4; text-wrap:balance; -webkit-font-smoothing:antialiased; }
.cbx-body{ margin:0; font:400 16px/1.6 'Inter', var(--sans); color:rgba(255,255,255,.64); }
.cbx-btn{ display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; height:48px; margin-top:8px; padding:0 26px;
  background:#FFFFFF; border-radius:4px; font:600 15px/1 'Inter', var(--sans); letter-spacing:.01em; color:#000000; text-decoration:none; white-space:nowrap; transition:background .15s; }
.cbx-btn:hover{ background:#EDEDED; color:#000000; }
.cbx-btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }
.cbx-arr{ display:inline-flex; margin-left:10px; }
.cbx-note{ margin:0; font:400 13px/1.5 'Inter', var(--sans); color:rgba(255,255,255,.5); text-wrap:balance; }

.cbx-shots{ position:relative; flex:1 1 auto; min-width:0; margin-right:18px; }
.cbx-stack{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); aspect-ratio:660 / 368; }
.cbx-shot{ position:absolute; display:block; width:64%; aspect-ratio:1260 / 674; overflow:hidden; border-radius:6px; background:#1F1F1F; }
.cbx-shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.cbx-shot-1{ left:9%;  top:0;     border:1px solid rgba(255,255,255,.16); }
.cbx-shot-2{ left:20%; top:19%;   border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 48px rgba(0,0,0,.7); }
.cbx-shot-3{ left:30%; top:38.6%; border:1px solid rgba(255,255,255,.22); box-shadow:0 22px 56px rgba(0,0,0,.75); }
.cbx-shot-1 img{ filter:brightness(.72); }
.cbx-shot-2 img{ filter:brightness(.9); }

/* narrower computers and tablets on their side: the same card, a little tighter */
@media (max-width:1180px){
  .cbx-card{ min-height:400px; }
  .cbx-text{ flex-basis:46%; padding:48px 0 48px 44px; }
  .cbx-h{ font-size:38px; letter-spacing:-1.1px; }
  .cbx-shots{ margin-right:12px; }
}
/* tablets upright and phones: the text first, the pictures under it */
@media (max-width:1100px){   /* 1100, not 980: the product's closing headline drops from 60 to 44 px at 1100, and this header must never be the bigger one (cold review 2026-10-04: it was 56 against 44 between 981 and 1100) */
  .cbx-title{ font-size:42px; letter-spacing:-1.1px; margin-bottom:26px; }
}
@media (max-width:900px){
  .cbx{ max-width:720px; }
  .cbx-card{ flex-direction:column; min-height:0; }
  .cbx-text{ flex:none; padding:40px 40px 4px; }
  .cbx-h{ font-size:34px; letter-spacing:-1px; }
  .cbx-shots{ flex:none; margin-right:0; padding:30px 0 40px; }
  .cbx-stack{ position:relative; top:auto; transform:translateX(-1.5%); width:min(100%, 560px); margin:0 auto; }
}
@media (max-width:760px){   /* the width at which the page's own section headings drop to 34 px */
  .cbx{ max-width:none; padding:0 40px; }   /* from here down the page's own blocks (payment card, demo, FAQ) sit 40 px from the screen edge; the card was 24 (cold review 2026-10-04). max-width:none - the 720 cap above would leave it 60 px in at 721-760 */
  .cbx-title{ font-size:34px; line-height:1.1; letter-spacing:-.9px; margin-bottom:22px; }
}
@media (max-width:600px){
  .cbx{ margin-top:127px; }   /* 127 + the close block's own 8 = the page's 135 section gap */
  .cbx-text{ gap:14px; padding:30px 22px 4px; }
  .cbx-h{ font-size:27px; line-height:1.12; letter-spacing:-.7px; }
  .cbx-body{ font-size:15px; }
  .cbx-btn{ align-self:stretch; margin-top:6px; }
  .cbx-shots{ padding:22px 0 30px; }
  .cbx-shot{ border-radius:4px; }
}