/* =========================================================================
   CanvasPro brochures · layout and components
   ONE HTML, TWO LAYOUTS
   - Screen: responsive web page. Each <section class="page"> is a full-width
     band; content sits in .page__inner (max 74rem) and grids collapse to
     one column on phones.
   - PDF ("Export PDF" button = browser print): each section becomes exactly
     one A4 page (see section 9, @media print).
   Sections: 1 Base  2 Toolbar  3 Type  4 Layout  5 Signal line
             6 Frames overlay  7 Components  8 Diagrams  9 PDF / print
   ========================================================================= */

/* 1 · BASE --------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  color: var(--charcoal); background: var(--black);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }
a { color: inherit; }

.page { position: relative; overflow: hidden; background: var(--cool); color: var(--charcoal); counter-increment: folio; }
.page--dark  { background: var(--black); color: var(--cool); }
.page--white { background: #e5e5ea; border-top: 1px solid var(--cool-line); }
.page__inner {
  position: relative; z-index: 2;
  max-width: calc(var(--max) + 2 * var(--pad-x)); margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-direction: column; min-height: 100%;
}
.document { counter-reset: folio; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 2 · TOOLBAR (screen only) --------------------------------------------- */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .9rem;
  /* Consistent height across all pages */
  height: 4rem;
  min-height: 4rem;
  padding: 0 var(--pad-x);
  background: rgba(12,13,14,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--black-line);
  color: var(--cool);
  font-size: .82rem;
}
.toolbar__logo { height: 1.35rem; width: auto; }
.toolbar__title { flex: 1; min-width: 0; color: var(--on-dark-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.toolbar a { color: var(--on-dark-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.toolbar a:hover { color: var(--white); }
.btn-pdf {
  display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0;
  min-height: 44px; padding: 0 1.2rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 .86rem var(--font-body); background: var(--blue); color: var(--black);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.btn-pdf:hover { box-shadow: 0 0 0 4px rgba(102,204,255,.25); }
.btn-pdf:focus-visible, .cta:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.btn-pdf svg { width: 1rem; height: 1rem; }
@media (max-width: 560px) { .toolbar__title { display: none; } .toolbar { justify-content: space-between; } }

/* 3 · TYPE ----------------------------------------------------------------- */
.label { font-size: var(--fs-label); font-weight: 500; line-height: 1.35; letter-spacing: .28em; text-transform: uppercase; }
.page--dark .label { color: var(--blue); }
.label--muted, .page--dark .label--muted { color: var(--on-light-2); }
.page--dark .label--muted { color: var(--on-dark-2); }

/* All Round Gothic Bold, uppercase. Two-tone rule: colour ONE statement only (.hl). */
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-xl); line-height: 1; letter-spacing: .01em; text-wrap: balance; }
.display--mega { font-size: var(--fs-mega); line-height: .96; }
.display--l { font-size: var(--fs-l); line-height: 1.04; letter-spacing: .02em; }
.display--m { font-size: var(--fs-m); line-height: 1.12; letter-spacing: .03em; }
.display .hl { color: var(--blue); }
/* On light sections DMT Blue is only for LARGE type (brand accessibility rule) */

.lead { font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; max-width: 40em; }
.page--dark .lead { color: var(--cool); }
.muted { color: var(--on-light-2); }
.page--dark .muted { color: var(--on-dark-2); }
.small { font-size: var(--fs-s); line-height: 1.55; }
p + p { margin-top: .7em; }
strong { font-weight: 500; }

/* 4 · LAYOUT ------------------------------------------------------------ */
.head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; height: 2.4rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.head img { height: 1.6rem; width: auto; }
/* Section name beside the signal-line node: 50% larger than standard labels */
.head > .label { font-size: calc(var(--fs-label) * 1.5); }
.foot { display: none; } /* folio footer: PDF only */

.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.split--r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.stack > * + * { margin-top: var(--gap-s); }
.mt-s { margin-top: var(--gap-s); } .mt { margin-top: var(--gap); } .mt-l { margin-top: calc(var(--gap) * 2); }
.bottom { margin-top: auto; }
.rule { border: 0; border-top: 1px solid var(--cool-line); }
.page--dark .rule { border-top-color: var(--black-line); }

@media screen and (max-width: 900px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .split, .split--r { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 620px) {
  html { font-size: 15.5px; }
  .cols-2, .cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* 5 · SIGNAL LINE -------------------------------------------------------
   PDF: each page carries one segment of a continuous blue line (inline SVG,
   viewBox 0 0 210 297 = millimetres). A segment leaves the right edge at
   the height where the next page's segment enters on the left.
   Screen: the segments are hidden and one vertical line runs down the left
   gutter instead, with a node at the start of every section.            */
.signal { display: none; }
.rail { position: absolute; z-index: 1; left: max(10px, calc((100% - var(--max)) / 2 - var(--pad-x) + 14px));
  top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--blue), var(--blue)) center / 1.5px 100% no-repeat; opacity: 1; pointer-events: none; }
.rail::before { content: ""; position: absolute; left: -4px; top: calc(var(--pad-y) + 1.2rem - 5px); /* centred on the .head row (2.4rem tall) */ width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
@media screen and (max-width: 900px) { .rail { display: none; } }

/* Brand textures */
.glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--blue-glow), transparent 66%); }
.pixels { position: absolute; z-index: 0; pointer-events: none; width: min(40vw, 24rem); height: min(26vw, 15rem);
  background-image: radial-gradient(rgba(229,229,234,.22) 1.6px, transparent 1.9px); background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 75%); mask-image: linear-gradient(135deg, #000 10%, transparent 75%); }
.page:not(.page--dark) .pixels { background-image: radial-gradient(rgba(50,51,54,.18) 1.6px, transparent 1.9px); }

/* 6 · FRAMES OVERLAY ------------------------------------------------------
   "CanvasPro drives frames, not outputs." Frame guides are drawn over real
   photography the way the product's frame editor shows them. The canvas
   keeps a fixed aspect ratio so frames stay aligned at every screen size.
   Position frames with --x --y --w --h (percent of the canvas).          */
.canvas { position: relative; overflow: hidden; background: var(--black-2); aspect-ratio: var(--ratio, 16 / 9); }

.canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); }
.frame { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: 1.5px solid var(--blue); border-radius: 3px; }
.frame__tag { position: absolute; left: -1.5px; bottom: 100%; white-space: nowrap;
  font: 500 .62rem/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase;
  color: var(--black); background: var(--blue); padding: .32rem .5rem .28rem; border-radius: 3px 3px 0 0; }
.canvas__meta { position: absolute; right: 1rem; bottom: .9rem; z-index: 3;
  font: 500 .62rem/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--cool); }
@media screen and (max-width: 620px) { .frame__tag { font-size: .5rem; padding: .22rem .35rem; } }

/* 7 · COMPONENTS ---------------------------------------------------------- */
.card { padding: clamp(1.1rem, 2.2vw, 1.6rem); border-radius: var(--radius); background: var(--cool-2); border: 1px solid var(--cool-line); }
.page--dark .card { background: var(--black-2); border-color: var(--black-line); }

/* Proof chips: short, verified product facts */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid var(--cool-line); background: #f2f2f5; font-size: var(--fs-s); font-weight: 500; line-height: 1.2; }
.chip::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.page--dark .chip { background: var(--black-2); border-color: var(--black-line); color: var(--cool); }

/* Pillars: Control / Perform / Prove */
.pillar { display: flex; flex-direction: column; padding-top: 1.3rem; border-top: 2px solid var(--charcoal); }
.page--dark .pillar { border-top-color: var(--blue); }
.pillar__num { font: 500 var(--fs-label)/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--on-light-2); margin-bottom: 1.6rem; }
.page--dark .pillar__num { color: var(--on-dark-2); }
.pillar .display { margin-bottom: .9rem; }
.pillar .chips { margin-top: auto; padding-top: 1.2rem; }

/* Key figures */
.figure { border-top: 2px solid var(--blue); padding-top: .9rem; }
.figure__value { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1; }
.page--dark .figure__value { color: var(--blue); }
.figure__label { margin-top: .5rem; font-size: var(--fs-s); line-height: 1.45; }

/* Photos */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--black-2); aspect-ratio: var(--ratio, 4 / 3); }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem .8rem;
  background: rgba(12,13,14,.82); color: var(--white); } /* solid panel: no gradients on photography */
.photo figcaption .label { color: var(--blue); }
.photo figcaption p { font-size: var(--fs-s); line-height: 1.4; margin-top: .25rem; }

/* Comparison */
.spec { display: grid; grid-template-columns: 7.5rem minmax(0,1fr); gap: .55rem .9rem; font-size: var(--fs-s); }
.spec dt { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-2); padding-top: .15rem; }
.page--dark .spec dt { color: var(--on-dark-2); }
.spec dd { font-weight: 500; }
.product-mark { height: 2.6rem; width: auto; max-width: 100%; }

/* Calls to action */
.cta { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: 0 1.6rem; border-radius: 999px;
  background: var(--blue); color: var(--black); font-weight: 500; font-size: 1rem; text-decoration: none;
  transition: box-shadow .2s ease-out; }
.cta:hover { box-shadow: 0 0 0 5px rgba(102,204,255,.22); }
.cta--ghost { background: transparent; color: inherit; border: 1px solid currentColor; }

.legal { font-size: .68rem; line-height: 1.55; color: var(--on-dark-2); }
.page:not(.page--dark) .legal { color: var(--on-light-2); }



/* Technical tables */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); line-height: 1.45; }
.table th, .table td { text-align: left; vertical-align: top; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--cool-line); }
.table thead th { font-size: var(--fs-label); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--on-light-2); border-bottom: 2px solid var(--blue); }
.table tbody th { font-weight: 500; width: 32%; }
.page--dark .table th, .page--dark .table td { border-bottom-color: var(--black-line); }
.page--dark .table thead th { color: var(--on-dark-2); border-bottom-color: var(--blue); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Glossary / definition list */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem var(--gap); }
.terms div { border-top: 1px solid var(--cool-line); padding-top: .6rem; }
.page--dark .terms div { border-top-color: var(--black-line); }
.terms dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; }
.terms dd { font-size: var(--fs-s); line-height: 1.5; margin-top: .2rem; }
@media screen and (max-width: 620px) { .terms { grid-template-columns: minmax(0, 1fr); } }

/* Note line */
.note { font-size: var(--fs-s); line-height: 1.55; padding-left: .9rem; border-left: 2px solid var(--blue); }

/* 8 · DIAGRAMS (inline SVG, editable as text) ------------------------------ */
.diagram { width: 100%; height: auto; }
.diagram text { font-family: var(--font-body); }
.diagram .t-label { letter-spacing: 2.5px; }
.diagram .t-label { font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; }
.diagram .t-body { font-size: 11px; font-weight: 400; }
.diagram .t-big { font-family: var(--font-display); font-weight: 700; font-size: 17px; text-transform: uppercase; }
.diagram .t-mono { font-family: var(--font-body); font-weight: 500; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; }

/* 9 · PDF / PRINT --------------------------------------------------------- */
@page { size: A4; margin: 0; }
@media print {
  html { font-size: 12.4px; }
  body { background: none; }
  .toolbar, .rail, .screen-only { display: none !important; }

  .page { width: var(--a4-w); height: var(--a4-h); break-after: page; page-break-after: always; }
  .page:last-child { break-after: auto; page-break-after: auto; }
  .page__inner { max-width: none; height: 100%; padding: var(--a4-my) var(--a4-mx) 11mm; }

  /* Fixed A4 type scale (overrides the fluid screen sizes) */
  .display { font-size: 2.85rem; }
  .display.display--mega { font-size: 4.3rem; }
  .display.display--l { font-size: 1.95rem; }
  .display.display--m { font-size: 1.15rem; }
  .lead { font-size: 1.12rem; }
  .small, .chip, .spec, .figure__label, .photo figcaption p, .table, .terms dd, .note { font-size: .86rem; }
  .terms dt { font-size: .98rem; }
  .table th, .table td { padding: 1.6mm 2.5mm 1.6mm 0; }
  .label, .pillar__num, .frame__tag, .canvas__meta, .spec dt, .table thead th { font-size: .66rem; }
  .figure__value { font-size: 2.2rem; }
  .head { height: 8mm; margin-bottom: 9mm; } /* centre line at 14mm + 4mm = 18mm, where the signal node sits */
  .head > .label { font-size: .99rem; }

  .signal { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .signal svg { width: 100%; height: 100%; }
  .signal path { fill: none; stroke: var(--blue); stroke-width: .45; stroke-linecap: round; stroke-linejoin: round; }
  .signal circle { fill: var(--blue); }

  .foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 4mm;
    font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-light-2); }
  .page--dark .foot { color: var(--on-dark-2); }
  .foot .folio::before { content: counter(folio, decimal-leading-zero); color: var(--blue); margin-right: 2.5mm; }

  .print-hide { display: none !important; }
}