/* The product layer pages /code, /control, /serve, /eu-compute and their translations
   (resources/views/layer.blade.php) in the house style, option C (4 Nov 2026).
   The page is built from the shared components (x-site.section, section-head, bento, cell,
   window, cta); this file only holds what those do not have yet:
     - the hero: the centred section head at the page title scale, and the stage that frames
       the layer's product screenshot (option C's .stage, without the floating cards);
     - a framed screenshot inside a cell (.hy-lp-shot);
     - on the ink band (the proof section), the framed screenshot takes the ink line.
   The visual-only cell and the cells on the ink band moved to brand.css (x-site.cell) on 4 Nov 2026.
   Candidates for brand.css section 8 once another page needs them (flagged to the lead).
   Loaded before brand.css (@section styles); every rule is scoped to .hy-layer-page and carries
   :root, so its specificity wins over the shared rules without !important. The hero section also
   carries .hy-hero, so brand.css's frame rule for layer pages (main:has(> .hy-hero)) lets the
   bands reach the page edges. */

/* --- hero: the centred head at the page title scale ----------------------------------- */
:root .hy-layer-page .hy-section.hy-lp-hero{padding:72px 0 0}
:root .hy-layer-page .hy-lp-hero .hy-sec-head{max-width:920px;margin-bottom:0}
:root .hy-layer-page .hy-lp-hero .hy-sec-title{font-size:var(--b-t-title);line-height:.98;letter-spacing:var(--b-track)}
:root .hy-layer-page .hy-lp-hero .hy-sec-lead{max-width:640px}

/* --- the stage: one product screenshot on a band mat, the layer switch above it -------- */
:root .hy-layer-page .hy-lp-stage{margin:56px 0 0}
:root .hy-layer-page .hy-lp-stage__mat{padding:20px 32px 0;border-radius:var(--b-r-panel);background:var(--b-band);overflow:hidden}
:root .hy-layer-page .hy-lp-stage__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
:root .hy-layer-page .hy-lp-stage__bar .hy-seg{overflow-x:auto;scrollbar-width:none}
:root .hy-layer-page .hy-lp-stage__bar .hy-seg::-webkit-scrollbar{display:none}
:root .hy-layer-page .hy-lp-stage__bar .hy-seg > a{text-decoration:none}
:root .hy-layer-page .hy-lp-stage__shot{position:relative;aspect-ratio:1355/800;overflow:hidden;border:1px solid var(--b-line-2);border-bottom:0;border-radius:var(--b-r-card) var(--b-r-card) 0 0;background:var(--b-card)}
:root .hy-layer-page .hy-lp-stage__shot img{position:absolute;inset:0 auto auto 0;display:block;width:100%;height:auto}

/* --- a framed screenshot inside a cell -------------------------------------------------- */
:root .hy-layer-page .hy-lp-shot{display:block;width:100%;height:auto;border:1px solid var(--b-line-2);border-radius:var(--b-r-card);background:var(--b-card)}
:root .hy-layer-page .hy-lp-shot--card{max-width:340px;margin-inline:auto}
:root .hy-layer-page .hy-lp-cardcell .hy-cell__vis{justify-content:center}


/* --- inside a cell: the read-more links, the notes and the check lists ------------------- */
:root .hy-layer-page .hy-cell__text > .hy-cap{margin:28px 0 0}
:root .hy-layer-page .hy-cell__text > .hy-also{margin-top:10px}
:root .hy-layer-page .hy-cell .hy-layer-page__note{margin-top:14px}
:root .hy-layer-page .hy-cell .hy-layer-page__checks{margin-top:8px}
:root .hy-layer-page .hy-cell .hy-layer-page__steps{margin-top:8px}
:root .hy-layer-page .hy-cell .hy-win{border:1px solid var(--b-line-2)}
:root .hy-layer-page .hy-lp-note{margin:24px 0 0}

/* --- the ink band: the framed screenshot on ink ------------------------------------------- */
:root .hy-layer-page .hy-section--ink .hy-cell__vis .hy-lp-shot{border-color:var(--b-ink-line)}

@media (max-width:900px){
  :root .hy-layer-page .hy-lp-stage__mat{padding:16px 24px 24px}
  :root .hy-layer-page .hy-lp-stage__shot{border-bottom:1px solid var(--b-line-2);border-radius:var(--b-r-card)}
}
@media (max-width:720px){
  :root .hy-layer-page .hy-section.hy-lp-hero{padding-top:40px}
  :root .hy-layer-page .hy-lp-stage{margin-top:40px}
  :root .hy-layer-page .hy-lp-stage__bar .hy-cap{display:none}
}
@media (max-width:560px){
  :root .hy-layer-page .hy-lp-stage__mat{padding:10px 10px 12px;border-radius:var(--b-r-card)}
}

/* --- final pass (4 Nov 2026): the /code hero keeps "open-weight" on one line ------------ */
:root .hy-layer-page[data-layer="code"] .hy-lp-hero .hy-sec-head{max-width:1040px}
:root .hy-layer-page[data-layer="code"] .hy-lp-hero .hy-sec-title{font-size:clamp(44px,5vw,72px);line-height:1.02;letter-spacing:var(--b-track)}
:root .hy-layer-page[data-layer="code"] .hy-lp-stage{margin-top:40px}
/* on a phone the product screenshot shows its top-left corner at a readable size, not the whole
   window shrunk to unreadable text (4 Nov 2026) */
@media (max-width:640px){
  :root .hy-layer-page .hy-lp-stage__shot{aspect-ratio:4/3}
  :root .hy-layer-page .hy-lp-stage__shot img{width:170%;max-width:none;height:auto;object-fit:cover;object-position:left top}
}