/* ═══════════════════════════════════════════════════════════════
   PRODUCT CATALOGUE — 20 pages, A4 landscape
   Screen: pages stack as cards. Print: one page per sheet.
   ═══════════════════════════════════════════════════════════════ */
.catalogue { background: #EEF1F6; }

.cat-bar {
  position: sticky; top: 64px; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.cat-bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 12px;
}
.cat-bar-in strong { display: block; font-size: 15px; font-weight: 800; }
.cat-bar-in span { font-size: 12.5px; color: var(--text-tertiary); }

.cat-deck { padding: 28px 16px 60px; display: flex; flex-direction: column; align-items: center; gap: 26px; }

/* One page. 297×210mm at 96dpi ≈ 1123×794. Kept as an aspect box on
   screen so it scales to the window, and pinned to real millimetres
   when it goes to paper. */
.pg {
  position: relative;
  width: min(1123px, 100%);
  aspect-ratio: 297 / 210;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15,23,42,.13);
  overflow: hidden;
  container-type: inline-size;
}
/* Type scales with the page, so a page looks identical on a phone, a
   laptop and on paper rather than reflowing at each size. */
.pg { font-size: clamp(9px, 1.32cqw, 17px); }

.pg-body { height: 100%; display: grid; padding: 4.2em 4.2em 5.4em; gap: 2.8em; }
.pg-body.split, .pg-body.showcase { grid-template-columns: 1.12fr .88fr; align-items: center; }
.pg-body.stack { grid-template-rows: auto minmax(0, 1fr); gap: 1.4em; }

.eyebrow {
  display: inline-block; font-size: .68em; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 1.1em;
}
.pg h2 { font-size: 1.95em; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; margin-bottom: .6em; }
.pg .lede { font-size: .89em; line-height: 1.58; color: var(--text-secondary); }
.pg-copy.wide { max-width: 46em; }

.pg-list { list-style: none; margin-top: 1.3em; display: grid; gap: .62em; }
.pg-list li { display: grid; gap: .18em; padding-inline-start: 1.15em; position: relative; }
.pg-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .52em;
  width: .42em; height: .42em; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--purple));
}
.pg-list strong { font-size: .9em; font-weight: 750; }
.pg-list span { font-size: .82em; line-height: 1.45; color: var(--text-tertiary); }

.pg-art { height: 100%; display: flex; align-items: center; justify-content: center; }
.pg-art img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.showcase .pg-art {
  background: linear-gradient(160deg, #F4F7FD, #E7EEFA);
  border-radius: 1.2em; padding: 1.6em; height: 100%;
}

.pg-foot {
  position: absolute; inset-inline: 4.4em; bottom: 1.9em;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72em; color: var(--text-tertiary);
  border-top: 1px solid var(--border); padding-top: .9em;
}
.pg-brand { font-weight: 700; letter-spacing: .04em; }
.pg-brand em { font-style: normal; color: var(--blue); }
.pg-num { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Device index ───────────────────────────────────────────── */
.dev-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85em; align-content: start; align-items: start; min-height: 0; }
.dev-card { display: flex; flex-direction: column; gap: .45em; min-width: 0; }
.dev-shot {
  height: 6.8em; border-radius: .7em; background: linear-gradient(160deg, #F4F7FD, #E6EDF9);
  display: flex; align-items: center; justify-content: center; padding: .5em;
}
.dev-shot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dev-card figcaption { display: grid; gap: .1em; }
.dev-card strong { font-size: .74em; font-weight: 750; line-height: 1.2; }
.dev-card span { font-size: .66em; line-height: 1.3; color: var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════════
   COVER — devices on stone
   The plinths are drawn rather than photographed: three faces per
   block with their own lighting, a grain overlay for the stone, and
   a cast shadow under each device so it sits on the slab instead of
   floating above it.
   ═══════════════════════════════════════════════════════════════ */
.pg-cover { background: #0A0E17; color: #fff; }
.cov-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 42% at 50% 84%, rgba(59,130,246,.34), transparent 68%),
    radial-gradient(40% 34% at 82% 12%, rgba(139,92,246,.20), transparent 70%);
}
/* Fine grain over the whole cover so the flat fills read as stone and
   ink rather than as CSS gradients. */
.cov-grain {
  position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.cov-head {
  position: absolute; inset-inline: 4.4em; top: 3.2em; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78em; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.cov-lockup { font-weight: 800; color: #fff; letter-spacing: .16em; }
.cov-lockup em { font-style: normal; color: var(--blue); margin-inline: .3em; }
.cov-type { position: absolute; inset-inline-start: 4.4em; top: 7.4em; z-index: 3; width: 30%; }
.cov-type h1 {
  font-size: 3.1em; font-weight: 900; line-height: 1.02; letter-spacing: -.035em;
  background: linear-gradient(170deg, #fff 40%, #9DC0FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cov-type p { margin-top: 1.1em; font-size: .96em; line-height: 1.62; color: rgba(255,255,255,.66); }

/* The stage is its own column on the right, so a plinth can never
   wander under the headline. Bottom-aligned flex puts every block on
   one floor line regardless of its height, and each device is sized by
   HEIGHT rather than width — widths differ wildly between a kiosk and a
   handheld, heights are what must look proportionate side by side. */
.cov-stage {
  position: absolute; z-index: 2;
  inset-inline: 36% 3.6em; bottom: 4.6em;
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: .9em;
}
.cov-floor {
  position: absolute; z-index: 1; inset-inline: 0; bottom: 0; height: 30%;
  background:
    linear-gradient(180deg, transparent, rgba(140,175,235,.10)),
    radial-gradient(70% 100% at 68% 100%, rgba(59,130,246,.16), transparent 70%);
}

/* One plinth: slab top, front face, lit side. */
.stone { position: relative; flex: 0 0 auto; }
.stone-top, .stone-face, .stone-side { position: absolute; display: block; }
.stone-top {
  inset-inline: 0; top: 0; height: 1.35em;
  background: linear-gradient(175deg, #B4B2AD 0%, #96948F 55%, #817F7B 100%);
  border-radius: .12em .12em 0 0;
  box-shadow: inset 0 .09em .16em rgba(255,255,255,.42);
}
.stone-face {
  inset-inline: 0; top: 1.24em; bottom: 0;
  background: linear-gradient(180deg, #63615D 0%, #43413E 55%, #2E2D2B 100%);
}
.stone-side {
  inset-block: 1.24em 0; inset-inline-end: -.7em; width: .7em;
  background: linear-gradient(180deg, #4E4C48, #292826);
  transform: skewY(-30deg); transform-origin: top left;
}
/* Grain, so the faces read as cut stone rather than flat fills. */
.stone-face::after, .stone-top::after, .stone-side::after {
  content: ''; position: absolute; inset: 0; opacity: .85; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='5'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)' opacity='.6'/%3E%3C/svg%3E");
}
.stone-dev {
  position: absolute; z-index: 3; bottom: calc(100% - .18em); left: 50%;
  transform: translateX(-50%);
  width: auto; max-width: none;
  filter: drop-shadow(0 .55em .7em rgba(0,0,0,.6));
}
/* Contact shadow on the slab — the device rests on it rather than
   hovering a few millimetres above. */
.stone-shadow {
  position: absolute; z-index: 2; left: 50%; top: -.22em;
  width: 82%; height: .62em; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.66), transparent 78%);
  filter: blur(.1em);
}

/* Per-column: plinth footprint, then the device height that suits it.
   Heights are deliberately stepped rather than even — a row of equal
   blocks reads as a shelf, a stepped one reads as a display. */
.stone-a { width: 8.6em; height: 3.0em; }
.stone-a .stone-dev { height: 7.6em; }
.stone-b { width: 7.6em; height: 6.0em; }
.stone-b .stone-dev { height: 6.0em; }
.stone-c { width: 7.0em; height: 3.4em; }
.stone-c .stone-dev { height: 11.8em; }
.stone-d { width: 9.4em; height: 7.6em; }
.stone-d .stone-dev { height: 7.4em; }
.stone-e { width: 8.0em; height: 10.0em; }
.stone-e .stone-dev { height: 5.0em; }

.cov-rule {
  display: block; width: 3.4em; height: .16em; margin: 1.6em 0 1.1em;
  background: linear-gradient(90deg, var(--blue), var(--purple)); border-radius: 2px;
}
.cov-meta {
  font-size: .7em; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.5); white-space: nowrap;
}

.cov-foot { color: rgba(255,255,255,.55); border-top-color: rgba(255,255,255,.16); z-index: 3; }
.cov-foot .pg-brand { color: rgba(255,255,255,.8); }

/* ── Print ──────────────────────────────────────────────────── */
@page { size: A4 landscape; margin: 0; }
@media print {
  .nav, .cat-bar, .footer { display: none !important; }
  .catalogue { background: #fff; }
  .cat-deck { padding: 0; gap: 0; display: block; }
  .pg {
    width: 297mm; height: 210mm; aspect-ratio: auto;
    border-radius: 0; box-shadow: none; break-after: page; page-break-after: always;
    font-size: 3.6mm;
  }
  .pg:last-child { break-after: auto; page-break-after: auto; }

  /* Two things do not survive the print pipeline, and both wreck the
     cover if left in.

     background-clip:text paints the gradient BOX rather than the glyphs,
     so the headline came out with a solid blue slab across it. */
  .cov-type h1 {
    background: none; color: #fff; -webkit-text-fill-color: #fff;
  }
  /* mix-blend-mode is not honoured either: the grain overlays stopped
     blending and painted flat over the stone, turning the dark faces
     light grey. The stone keeps its gradients; only the grain goes. */
  .cov-grain,
  .stone-top::after, .stone-face::after, .stone-side::after { display: none; }
  /* Backgrounds are the design here, not decoration. */
  .pg, .pg-cover, .showcase .pg-art, .dev-shot,
  .stone-top, .stone-face, .stone-side, .cov-glow { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 900px) {
  .cat-bar { top: 58px; }
  .cat-bar-in { flex-direction: column; align-items: flex-start; gap: 10px; }
}

.cat-bar-actions { display: flex; align-items: center; gap: 10px; }
.cat-bar-actions .btn span { opacity: .72; font-weight: 600; font-size: .86em; }