/* V3.3 — a shared typographic system with seven content-led compositions. */
.sheet-wrap { --accent:#0756df; --wash:#edf4ff; --accent-line:#bbd0f2; }
.sheet-wrap[data-product="02"] { --accent:#087b84; --wash:#edf8f6; --accent-line:#a8d9d5; }
.sheet-wrap[data-product="03"] { --accent:#6652c8; --wash:#f3f0fc; --accent-line:#d0c5ef; }
.sheet-wrap[data-product="04"] { --accent:#375bc5; --wash:#eff3fc; --accent-line:#bcccf1; }
.sheet-wrap[data-product="05"] { --accent:#127d76; --wash:#edf7f4; --accent-line:#b5dbd1; }
.sheet-wrap[data-product="06"] { --accent:#4e59b8; --wash:#f1f2fc; --accent-line:#c5cbef; }
.sheet-wrap[data-product="07"] { --accent:#15779d; --wash:#edf7fb; --accent-line:#b6d9e8; }
.editorial-body { display:grid; min-height:0; min-width:0; gap:24px 32px; }
.editorial-body>.lead { grid-area:lead; margin:0; font-size:27px; line-height:1.6; align-self:center; }
.editorial-body>.visual { grid-area:visual; border-radius:18px; overflow:hidden; background:#f7f9fc; }
.editorial-body>.visual.diagram { background:#fff; }
.editorial-body>.visual img { width:100%; height:100%; object-fit:contain; object-position:center; }
.editorial-body>.visual figcaption { display:none; }
.editorial-body>.visual.visual-scene { background:transparent; border-radius:0; gap:12px; }
.editorial-body>.visual.visual-scene img { flex:1; min-height:0; aspect-ratio:auto; border-radius:16px; }
.editorial-body .visual-notes { display:flex; justify-content:space-between; gap:20px; padding:0 8px; }
.editorial-body .visual-notes>div { display:flex; flex-direction:row; gap:12px; border:0; padding:0; align-items:baseline; }
.editorial-body .visual-notes strong { font-size:21px; white-space:nowrap; color:var(--accent); }
.editorial-body .visual-notes span { font-size:20px; }
.benefit { min-width:0; min-height:0; display:flex; align-items:flex-start; gap:18px; }
.editorial-body>.benefit-1 { grid-area:f1; }.editorial-body>.benefit-2 { grid-area:f2; }.editorial-body>.benefit-3 { grid-area:f3; }.editorial-body>.benefit-4 { grid-area:f4; }
.benefit-symbol { width:48px; height:48px; flex:none; display:grid; place-items:center; color:var(--accent); background:var(--wash); border:1px solid var(--accent-line); border-radius:14px; }
.benefit-symbol svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.benefit-copy { min-width:0; }
.benefit h3 { color:var(--navy); font-size:27px; line-height:1.4; font-weight:650; margin:0 0 9px; }
.benefit p { color:var(--muted); font-size:23px; line-height:1.55; margin:0; }

/* Hero story: a large image with a short editorial sidebar. */
.composition-hero .editorial-body { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-rows:auto repeat(3,minmax(0,1fr)); grid-template-areas:"visual lead" "visual f1" "visual f2" "visual f3"; column-gap:40px; }
.composition-hero .editorial-body>.lead { font-size:30px; padding-bottom:22px; border-bottom:2px solid var(--accent-line); }
.composition-hero .benefit { align-self:center; }
.composition-hero .editorial-body>.visual { background:#f2f5f9; }

/* Architecture: a statement beside the large system visual, capabilities below. */
.composition-bridge .editorial-body { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; grid-template-areas:"lead visual visual" "f1 f2 f3"; }
.composition-bridge .editorial-body>.lead { height:auto; display:block; padding:36px; border-radius:18px; background:linear-gradient(145deg,var(--wash),#fff); border-left:4px solid var(--accent); font-size:30px; line-height:1.65; }
.composition-bridge .benefit { border-top:1px solid var(--accent-line); padding-top:22px; }

/* Two applications and one shared capability: an asymmetric, connected spread. */
.composition-duet .editorial-body { grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr); grid-template-rows:auto minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas:"lead visual" "f1 visual" "f2 visual" "f3 f3"; gap:20px 32px; }
.composition-duet .benefit-1,.composition-duet .benefit-2 { padding:22px; border-radius:16px; background:var(--wash); align-items:center; }
.composition-duet .benefit-symbol { background:#fff; }
.composition-duet .benefit-3 { padding:20px 26px; border-radius:14px; background:#f5f7fa; align-items:center; }
.composition-duet .benefit-3 .benefit-copy { display:flex; align-items:baseline; gap:24px; }
.composition-duet .benefit-3 h3 { margin:0; white-space:nowrap; }

/* Learning / inquiry progression: one visual and a connected three-step rail. */
.composition-timeline .editorial-body { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; grid-template-areas:"lead visual visual" "f1 f2 f3"; }
.composition-timeline .editorial-body>.lead { font-size:32px; line-height:1.75; padding:18px 26px 18px 0; border-top:3px solid var(--accent); }
.composition-timeline .benefit { position:relative; flex-direction:column; gap:16px; border-top:1px solid var(--accent-line); padding:22px 10px 0 0; }
.composition-timeline .benefit:not(.benefit-3)::after { content:'→'; position:absolute; right:5px; top:30px; color:var(--accent); font:30px/1 Arial; }
.composition-timeline .benefit-symbol { border-radius:50%; }

/* Atlas: a large visual paired with a compact field of four capabilities. */
.composition-atlas .editorial-body { grid-template-columns:1.15fr 1.15fr 1fr 1fr; grid-template-rows:auto minmax(0,1fr) minmax(0,1fr); grid-template-areas:"lead lead lead lead" "visual visual f1 f2" "visual visual f3 f4"; gap:22px; }
.composition-atlas .benefit { flex-direction:column; justify-content:center; gap:16px; padding:24px; background:var(--wash); border-radius:16px; }
.composition-atlas .benefit:nth-of-type(even) { background:#f7f9fb; }
.composition-atlas .benefit h3 { font-size:25px; }

/* Magazine spread: image, statement and distinct horizontal benefit blocks. */
.composition-panorama .editorial-body { grid-template-columns:.95fr 1.1fr 1.1fr; grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"lead visual visual" "f1 visual visual" "f2 f3 f3"; }
.composition-panorama .editorial-body>.lead { font-size:29px; line-height:1.65; }
.composition-panorama .benefit-1 { padding:26px; align-self:center; background:var(--wash); border-radius:16px; flex-direction:column; gap:16px; }
.composition-panorama .benefit-2,.composition-panorama .benefit-3 { padding-top:22px; border-top:1px solid var(--accent-line); }
.composition-panorama .benefit-3 .benefit-copy { display:flex; align-items:baseline; gap:24px; }
.composition-panorama .benefit-3 h3 { white-space:nowrap; margin:0; }

/* Hardware exhibits: each image and its use case are kept together. */
.exhibit-body { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:22px; min-height:0; }
.exhibit-body>.lead { font-size:27px; }
.exhibit-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; min-height:0; }
.exhibit { display:grid; grid-template-rows:minmax(0,1fr) auto auto; gap:14px; min-height:0; padding:18px 24px 24px; border:1px solid var(--line); border-radius:20px; background:#f9fbfd; }
.exhibit .visual { min-height:0; background:transparent; }
.exhibit .visual img { height:100%; width:100%; object-fit:contain; border-radius:12px; }
.exhibit-label { font-size:21px; font-weight:550; line-height:1.4; margin:0; color:var(--muted); text-align:center; }
.exhibit .benefit { padding-top:18px; border-top:1px solid var(--line); }
.exhibit .benefit h3 { font-size:25px; margin-bottom:6px; }
.exhibit .benefit p { font-size:23px; }
.benefit-strip { padding:14px 22px; background:var(--wash); border-radius:12px; align-items:center; }
.benefit-strip .benefit-copy { display:flex; align-items:baseline; gap:24px; }
.benefit-strip h3 { white-space:nowrap; margin:0; }

/* Shared stage for directional page travel; only the two animated pages are painted. */
@media screen {
  .reader { display:grid; place-items:center; isolation:isolate; }
  .sheet-wrap { grid-area:1/1; min-width:0; min-height:0; }
  .sheet-wrap.leaving { display:block; pointer-events:none; }
  .reader.is-transitioning .sheet-wrap { will-change:transform; box-shadow:none; }
  .reader.is-transitioning { pointer-events:none; }

  /* Portrait compositions use their own reading order, not a scaled desktop spread. */
  [data-layout="portrait"] .editorial-body { gap:24px; }
  [data-layout="portrait"] .editorial-body>.lead { font-size:var(--lead-size); line-height:1.5; padding:0; margin:0; border:0; background:none; height:auto; display:block; }
  [data-layout="portrait"] .benefit { gap:18px; }
  [data-layout="portrait"] .benefit h3 { font-size:var(--body-size); line-height:1.35; margin-bottom:10px; }
  [data-layout="portrait"] .benefit p { font-size:calc(var(--body-size) - 2px); line-height:1.5; }
  [data-layout="portrait"] .benefit-symbol { width:50px; height:50px; }
  [data-layout="portrait"] .benefit-symbol svg { width:30px; height:30px; }
  [data-layout="portrait"] .editorial-body>.visual { border-radius:18px; }
  [data-layout="portrait"] .composition-hero .editorial-body { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) auto auto auto; grid-template-areas:"visual visual" "lead lead" "f1 f2" "f3 f3"; }
  [data-layout="portrait"] .composition-hero .benefit-1,
  [data-layout="portrait"] .composition-hero .benefit-2 { flex-direction:column; align-self:stretch; padding:22px; border-radius:16px; background:var(--wash); }
  [data-layout="portrait"] .composition-hero .benefit-3 { padding:20px 22px; border-top:1px solid var(--accent-line); }
  [data-layout="portrait"] .composition-bridge .editorial-body { grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto minmax(0,1fr); grid-template-areas:"lead lead" "f1 f2" "f3 f3" "visual visual"; }
  [data-layout="portrait"] .composition-bridge .benefit-1,
  [data-layout="portrait"] .composition-bridge .benefit-2 { padding:20px; border:0; border-radius:16px; background:var(--wash); flex-direction:column; }
  [data-layout="portrait"] .composition-bridge .benefit-3 { padding-top:18px; }
  [data-layout="portrait"] .composition-duet .editorial-body { grid-template-columns:1fr 1fr; grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-areas:"lead lead" "f1 f2" "visual visual" "f3 f3"; }
  [data-layout="portrait"] .composition-duet .benefit-1,
  [data-layout="portrait"] .composition-duet .benefit-2 { flex-direction:column; align-items:flex-start; padding:22px; }
  [data-layout="portrait"] .composition-duet .benefit-3 .benefit-copy,
  [data-layout="portrait"] .composition-panorama .benefit-3 .benefit-copy { display:block; }
  [data-layout="portrait"] .composition-duet .benefit-3 h3,
  [data-layout="portrait"] .composition-panorama .benefit-3 h3 { white-space:normal; margin-bottom:8px; }
  [data-layout="portrait"] .composition-timeline .editorial-body { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto auto auto auto; grid-template-areas:"visual" "lead" "f1" "f2" "f3"; gap:22px; }
  [data-layout="portrait"] .composition-timeline .benefit { flex-direction:row; padding:0 0 0 2px; border:0; gap:24px; }
  [data-layout="portrait"] .composition-timeline .benefit:not(.benefit-3)::after { content:''; top:58px; bottom:-18px; left:27px; right:auto; width:1px; background:var(--accent-line); }
  [data-layout="portrait"] .composition-timeline .benefit h3 { margin-bottom:5px; }
  [data-layout="portrait"] .composition-atlas .editorial-body { grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto minmax(0,1fr); grid-template-areas:"lead lead" "f1 f2" "f3 f4" "visual visual"; gap:20px; }
  [data-layout="portrait"] .composition-atlas .benefit { padding:20px; gap:14px; }
  [data-layout="portrait"] .composition-atlas .benefit h3 { font-size:30px; }
  [data-layout="portrait"] .composition-atlas .benefit p { font-size:28px; }
  [data-layout="portrait"] .composition-panorama .editorial-body { grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:"lead lead" "visual visual" "f1 f2" "f3 f3"; }
  [data-layout="portrait"] .composition-panorama .benefit-1,
  [data-layout="portrait"] .composition-panorama .benefit-2 { padding:22px; border:0; background:var(--wash); border-radius:16px; align-self:stretch; flex-direction:column; gap:16px; }
  [data-layout="portrait"] .composition-panorama .benefit-3 { padding-top:18px; }
  [data-layout="portrait"] .editorial-body .visual-notes { gap:16px; padding:0; }
  [data-layout="portrait"] .editorial-body .visual-notes>div { display:block; }
  [data-layout="portrait"] .editorial-body .visual-notes strong { font-size:27px; display:block; }
  [data-layout="portrait"] .editorial-body .visual-notes span { font-size:24px; }

  [data-layout="portrait"] .exhibit-body { gap:22px; }
  [data-layout="portrait"] .exhibit-body>.lead { font-size:var(--lead-size); }
  [data-layout="portrait"] .exhibit-pair { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); gap:22px; }
  [data-layout="portrait"] .exhibit { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:14px 22px; padding:22px; }
  [data-layout="portrait"] .exhibit .visual { grid-column:1; grid-row:1; }
  [data-layout="portrait"] .exhibit-label { grid-column:1; grid-row:2; font-size:23px; }
  [data-layout="portrait"] .exhibit .benefit { grid-column:2; grid-row:1/-1; flex-direction:column; align-self:center; padding:0; border:0; }
  [data-layout="portrait"] .exhibit .benefit h3 { font-size:30px; }
  [data-layout="portrait"] .exhibit .benefit p { font-size:28px; }
  [data-layout="portrait"] .benefit-strip .benefit-copy { display:block; }
  [data-layout="portrait"] .benefit-strip h3 { margin-bottom:7px; }

  /* Short portrait/tablet windows retain the layouts with a tighter content budget. */
  [data-layout="portrait"][data-density="short"] .editorial-body { gap:14px 18px; }
  [data-layout="portrait"][data-density="short"] .benefit { gap:12px; }
  [data-layout="portrait"][data-density="short"] .benefit-symbol { width:36px; height:36px; border-radius:10px; }
  [data-layout="portrait"][data-density="short"] .benefit-symbol svg { width:23px; height:23px; }
  [data-layout="portrait"][data-density="short"] .benefit h3 { font-size:25px; margin-bottom:5px; }
  [data-layout="portrait"][data-density="short"] .benefit p { font-size:24px; line-height:1.4; }
  [data-layout="portrait"][data-density="short"] .composition-hero .benefit-1,
  [data-layout="portrait"][data-density="short"] .composition-hero .benefit-2,
  [data-layout="portrait"][data-density="short"] .composition-bridge .benefit-1,
  [data-layout="portrait"][data-density="short"] .composition-bridge .benefit-2,
  [data-layout="portrait"][data-density="short"] .composition-duet .benefit-1,
  [data-layout="portrait"][data-density="short"] .composition-duet .benefit-2,
  [data-layout="portrait"][data-density="short"] .composition-panorama .benefit-1,
  [data-layout="portrait"][data-density="short"] .composition-panorama .benefit-2,
  [data-layout="portrait"][data-density="short"] .composition-atlas .benefit { padding:14px; flex-direction:row; }
  [data-layout="portrait"][data-density="short"] .composition-duet .benefit-3 { padding:12px 16px; }
  [data-layout="portrait"][data-density="short"] .composition-timeline .editorial-body { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto auto; grid-template-areas:"visual visual visual" "lead lead lead" "f1 f2 f3"; }
  [data-layout="portrait"][data-density="short"] .composition-timeline .benefit { flex-direction:column; padding-top:12px; border-top:1px solid var(--accent-line); }
  [data-layout="portrait"][data-density="short"] .composition-timeline .benefit::after { display:none; }
  [data-layout="portrait"][data-density="short"] .exhibit-body { gap:14px; }
  [data-layout="portrait"][data-density="short"] .exhibit-pair { gap:16px; }
  [data-layout="portrait"][data-density="short"] .exhibit { padding:14px; gap:10px 16px; }
  [data-layout="portrait"][data-density="short"] .exhibit .benefit h3 { font-size:25px; }
  [data-layout="portrait"][data-density="short"] .exhibit .benefit p { font-size:24px; }
  [data-layout="portrait"][data-density="short"] .exhibit-label { font-size:21px; }
  [data-layout="portrait"][data-density="short"] .editorial-body .visual-notes strong { font-size:24px; }
  [data-layout="portrait"][data-density="short"] .editorial-body .visual-notes span { font-size:22px; }

  /* Landscape phones keep the composition; titles and symbols become compact. */
  [data-layout="compact"] .editorial-body { gap:14px 22px; }
  [data-layout="compact"] .editorial-body>.lead { font-size:26px; line-height:1.5; padding:0; background:none; border:0; }
  [data-layout="compact"] .benefit { gap:12px; }
  [data-layout="compact"] .benefit-symbol { width:36px; height:36px; border-radius:10px; }
  [data-layout="compact"] .benefit-symbol svg { width:23px; height:23px; }
  [data-layout="compact"] .benefit h3 { font-size:25px; line-height:1.35; margin-bottom:6px; }
  [data-layout="compact"] .benefit p { font-size:23px; line-height:1.4; }
  [data-layout="compact"] .composition-hero .editorial-body { grid-template-columns:1fr 1fr; gap:12px 24px; grid-template-rows:auto repeat(3,minmax(0,1fr)); }
  [data-layout="compact"] .composition-hero .editorial-body>.lead { font-size:24px; line-height:1.4; padding-bottom:8px; }
  [data-layout="compact"] .composition-hero .benefit { gap:12px; }
  [data-layout="compact"] .composition-hero .benefit h3 { font-size:24px; }
  [data-layout="compact"] .composition-hero .benefit p { font-size:22px; }
  [data-layout="compact"] .composition-bridge .benefit,
  [data-layout="compact"] .composition-timeline .benefit { padding-top:14px; }
  [data-layout="compact"] .composition-timeline .benefit { gap:10px; }
  [data-layout="compact"] .composition-timeline .benefit::after { top:19px; }
  [data-layout="compact"] .composition-duet .benefit-1,
  [data-layout="compact"] .composition-duet .benefit-2,
  [data-layout="compact"] .composition-panorama .benefit-1 { padding:14px; gap:12px; }
  [data-layout="compact"] .composition-duet .benefit-3 { padding:12px 18px; }
  [data-layout="compact"] .composition-duet .editorial-body { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; grid-template-areas:"lead visual visual" "f1 f2 f3"; }
  [data-layout="compact"] .composition-duet .benefit { padding:14px; align-items:flex-start; }
  [data-layout="compact"] .composition-duet .benefit-3 .benefit-copy { display:block; }
  [data-layout="compact"] .composition-duet .benefit-3 h3 { white-space:normal; margin-bottom:6px; }
  [data-layout="compact"] .composition-duet .benefit p { font-size:22px; }
  [data-layout="compact"] .composition-atlas .benefit { padding:16px; gap:12px; }
  [data-layout="compact"] .composition-atlas .benefit h3 { font-size:23px; }
  [data-layout="compact"] .editorial-body .visual-notes strong { font-size:20px; }
  [data-layout="compact"] .editorial-body .visual-notes span { font-size:18px; }
  [data-layout="compact"] .exhibit-body { gap:14px; }
  [data-layout="compact"] .exhibit-body>.lead { font-size:26px; }
  [data-layout="compact"] .exhibit-pair { gap:22px; }
  [data-layout="compact"] .exhibit { padding:12px 18px 16px; gap:8px; }
  [data-layout="compact"] .exhibit .benefit { padding-top:10px; }
  [data-layout="compact"] .exhibit-label { font-size:21px; }
  [data-layout="compact"] .benefit-strip { padding:10px 18px; }
}

@media print {
  .sheet-wrap { transform:none!important; opacity:1!important; }
  .sheet-wrap.leaving { display:block!important; }
}
@media (prefers-reduced-motion:reduce) {
  .sheet-wrap { animation:none!important; transition:none!important; }
}