/* TITECH v3 · spc.css: owned by WO-11 (work-orders/DESIGN-SPEC.md §10.4). */
/* The extras of the Vision One SPC page: gap, platform, correlation, architecture, services, role, results, and the
   built-on/editions band. Everything else on the page (hero, why, fits, FAQ, CTA, chips) comes from pages.css. Every class
   is .spc-*, or .a-* / .c-* inside the two inline diagrams. Text, surfaces and lines come only from --ctx-*, so the dark
   sections (.section-navy) and the light ones both work. Section order and markup: content/blocks/11-spc.en.html. */

:root {
  --spc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spc-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, Arial, sans-serif;
}

/* ---------------------------------------------------------------- 1. Gap (dark): seven challenge and answer rows */
.spc-gap-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--ctx-line);
}
.spc-gap-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 2fr) minmax(0, 3fr); /* the challenge takes 40% of what the index leaves */
  gap: 8px clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding-block: clamp(22px, 2.4vw, 32px);
  border-block-start: 1px solid var(--ctx-line);
}
.spc-gap-no,
.spc-step__no {
  color: var(--ctx-link);
  font-family: var(--spc-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.spc-gap-q {
  max-width: none;
  margin: 0;
  color: var(--ctx-heading);
  font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.spc-gap-a {
  margin: 0;
  color: var(--ctx-body);
  font-size: 1rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------------- 2. Platform (light): five layers, stacked */
.spc-layers {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The layer is a WO-02 .capability-card, so its surface, hover lift, glow and spotlight are the site's own. Only the
   3px edge in the spectrum and the two-column layout are added here. */
.spc-layer {
  --layer: var(--c-spec-1);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px clamp(24px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(24px, 2.5vw, 36px);
  padding-inline: clamp(24px, 3vw, 44px);
  border-inline-start: 3px solid var(--layer);
}
.spc-layer:nth-child(5n + 2) { --layer: var(--c-spec-2); }
.spc-layer:nth-child(5n + 3) { --layer: var(--c-spec-3); }
.spc-layer:nth-child(5n + 4) { --layer: var(--c-spec-4); }
.spc-layer__main h3 { max-width: none; margin-block: 0 10px; }
.spc-layer__main p { margin: 0; font-size: 1rem; line-height: 1.65; }
/* The legacy .capability-card ul rule indents lists and sets their size; this one is more specific. */
.spc-layer .fp-chips {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  align-content: flex-start;
}

/* ---------------------------------------------------------------- 3. Correlation (dark): three steps joined by lines */
.spc-corr { --spc-gap: clamp(28px, 4vw, 64px); }
.spc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-step { position: relative; }
.spc-step:nth-child(1) { --d: 0s; }
.spc-step:nth-child(2) { --d: .75s; }
.spc-step:nth-child(3) { --d: 1.5s; }
.spc-step__art { width: 192px; height: 112px; }
.spc-step__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spc-step__no { display: block; margin-block: 22px 8px; }
.spc-step h3 {
  max-width: none;
  margin: 0 0 10px;
  color: var(--ctx-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.spc-step p { max-width: 38ch; margin: 0; color: var(--ctx-body); font-size: 1rem; line-height: 1.65; }

/* The connector runs from one drawing to the next, along the middle of the 112px art. */
.spc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 56px;
  inset-inline-start: calc(192px + 14px);
  width: calc(100% + var(--spc-gap) - 192px - 28px);
  height: 1px;
  background: linear-gradient(90deg, rgb(255 255 255 / .16), rgb(76 141 255 / .9));
  transform-origin: left center;
  transition: transform .6s var(--ease-out) calc(var(--d) + .35s);
  pointer-events: none;
}
[dir="rtl"] .spc-step:not(:last-child)::after {
  background: linear-gradient(270deg, rgb(255 255 255 / .16), rgb(76 141 255 / .9));
  transform-origin: right center;
}
[dir="rtl"] .spc-step__art svg { scale: -1 1; } /* the drawings carry no text, so they mirror with the reading direction */

/* The drawings. Colours come from the spectrum; the last step's line is the brightest thing in the section. */
.spc-step__art .c-dot { fill-opacity: .75; }
.spc-step__art .c-d1 { fill: var(--c-spec-1); }
.spc-step__art .c-d2 { fill: var(--c-spec-2); }
.spc-step__art .c-d3 { fill: var(--c-spec-3); }
.spc-step__art .c-d4 { fill: var(--c-spec-4); }
.spc-step__art .c-line {
  fill: none;
  stroke: rgb(255 255 255 / .42);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .6s var(--ease-out) calc(var(--d) + var(--k, 0) * .06s);
}
.spc-step__art .c-hub-ring { fill: none; stroke: var(--c-signal); stroke-opacity: .5; }
.spc-step__art .c-hub { fill: var(--c-signal); }
.spc-step__art .c-story {
  fill: none;
  stroke: var(--c-signal-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgb(76 141 255 / .8));
  transition: stroke-dashoffset 1s var(--ease-out) calc(var(--d) + .1s);
}
.spc-step__art .c-node { fill: var(--c-banner); stroke: var(--c-signal-soft); stroke-width: 1.5; } /* the section's navy, so it reads hollow */
.spc-step__art .c-node-end { fill: var(--c-spec-1); }
.spc-step__art .c-node-end-ring { fill: none; stroke: var(--c-spec-1); stroke-opacity: .5; }
.spc-step__art { transition: opacity .7s var(--ease-out) var(--d); }

/* The draw-in. motion.js sets .m-pending on the .spc-corr wrapper (it has data-reveal) while it is below the fold, then
   swaps it for .m-in when it scrolls into view, and removes .m-in again a moment later. So the finished drawing is the
   default state and only the waiting state is hidden. The transitions above sit on the default state too, which means
   removing .m-in leaves them running. With no JS, after a JS error and under reduced motion the class never appears,
   and the whole drawing shows. */
@media screen and (prefers-reduced-motion: no-preference) {
  .spc-corr.m-pending .spc-step__art { opacity: 0; transition: none; }
  .spc-corr.m-pending .spc-step:not(:last-child)::after { transform: scaleX(0); transition: none; }
  .spc-corr.m-pending :is(.c-line, .c-story) { stroke-dashoffset: 1; transition: none; }
}

/* ---------------------------------------------------------------- 4. Architecture (light): the diagram in a dark panel */
.spc-arch__diagram {
  /* A dark context inside a light section, like the CTA band. */
  --ctx-heading: #F2F5FA;
  --ctx-body: #C5D0DE;
  --ctx-muted: #93A3B8;
  --ctx-line: rgb(255 255 255 / .09);
  --ctx-line-strong: rgb(255 255 255 / .18);
  padding: clamp(14px, 2.4vw, 32px);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background:
    radial-gradient(600px circle at 85% 0%, rgb(76 141 255 / .12), transparent 60%) padding-box,
    linear-gradient(var(--c-ink-900), var(--c-ink-900)) padding-box,
    var(--g-spectrum-soft) border-box;
  color: var(--ctx-body);
}
.spc-arch__svg { display: block; width: 100%; height: auto; }
.spc-arch__svg--tall { display: none; max-width: 420px; margin-inline: auto; }
.spc-arch__svg text { fill: var(--ctx-heading); font-family: inherit; letter-spacing: 0; }
.spc-arch__svg .a-m { fill: var(--ctx-muted); }
.spc-arch__svg .a-b { font-weight: 600; }
.spc-arch__svg .a-p { font-weight: 500; }
.spc-arch__svg .a-panel { fill: rgb(255 255 255 / .03); stroke-width: 1.25; }
.spc-arch__svg .a-dc { stroke: var(--c-spec-3); stroke-opacity: .85; }
.spc-arch__svg .a-tn { stroke: var(--c-spec-4); stroke-opacity: .85; }
.spc-arch__svg .a-pill { fill: rgb(255 255 255 / .04); stroke-width: 1.25; stroke-opacity: .9; }
.spc-arch__svg .a-c1 { stroke: var(--c-spec-1); }
.spc-arch__svg .a-c2 { stroke: var(--c-spec-2); }
.spc-arch__svg .a-c3 { stroke: var(--c-spec-3); }
.spc-arch__svg .a-c4 { stroke: var(--c-spec-4); }
.spc-arch__svg .a-ic { fill: none; stroke: var(--ctx-body); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spc-arch__svg .a-badge { fill: var(--c-spec-1); }
.spc-arch__svg .a-line,
.spc-arch__svg .a-head { fill: none; stroke: var(--c-signal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spc-arch__svg .a-line { stroke-dasharray: 3 9; }
/* Telemetry flows from each tenant to the platform: the paths are drawn that way round, in both languages. */
@media (prefers-reduced-motion: no-preference) {
  .spc-arch__svg .a-flow { animation: spc-flow 6s linear infinite; }
}
@keyframes spc-flow {
  to { stroke-dashoffset: -48; }
}

.spc-arch__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(24px, 4vw, 64px);
  margin-block-start: clamp(24px, 3vw, 36px);
}
.spc-arch__note {
  --note: var(--c-spec-3);
  max-width: 60ch;
  margin: 0;
  padding-inline-start: 18px;
  border-inline-start: 2px solid var(--note);
  color: var(--ctx-body);
  font-size: .9375rem;
  line-height: 1.6;
}
.spc-arch__note--tn { --note: var(--c-spec-4); }

/* ---------------------------------------------------------------- 5. Services (dark): four cards */
.spc-services .capability-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.spc-services .capability-card h3 { max-width: none; margin-block: 0 12px; }
.spc-services .capability-card p { margin-block-end: 0; font-size: 1rem; line-height: 1.65; }

/* ---------------------------------------------------------------- 6. Role (light): five items in a row */
.spc-role-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-role-list > li {
  --role: var(--c-spec-1);
  position: relative;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--ctx-line-strong);
}
.spc-role-list > li::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 48px;
  height: 2px;
  background: var(--role);
}
.spc-role-list > li:nth-child(2) { --role: var(--c-spec-2); }
.spc-role-list > li:nth-child(3) { --role: var(--c-spec-3); }
.spc-role-list > li:nth-child(4) { --role: var(--c-spec-4); }
.spc-role-list h3 {
  max-width: none;
  margin: 0 0 10px;
  color: var(--ctx-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.spc-role-list p { margin: 0; color: var(--ctx-body); font-size: .9375rem; line-height: 1.6; }

/* ---------------------------------------------------------------- 7. Results (dark): a light and dark checkerboard */
/* Three cards across the top and two wider ones below: light, dark, light / dark, light. The section is dark, so the light
   cards set their own light values and the dark ones take the section's. The cards follow the home proof cards. */
.spc-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-stat { grid-column: span 2; }
.spc-stat:nth-child(n + 4) { grid-column: span 3; }
.spc-stat {
  /* light tone */
  --ctx-surface: var(--c-white);
  --ctx-heading: #0B1424;
  --ctx-body: #2F3B4C;
  --ctx-muted: #5B6778;
  --ctx-line: #DDE2E6;
  --ctx-link: var(--c-signal-ink);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-height: 200px;
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--ctx-line);
  border-radius: var(--r-lg);
  background: var(--ctx-surface);
  color: var(--ctx-body);
  transition: translate var(--dur-base) var(--ease-out), border-color var(--dur-hover) var(--ease-hover),
    box-shadow var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}
/* dark tone. WO-19 integration: the banner's navy and aurora with the spectrum-soft edge, like the dark home proof cards
   and dark featured tiles (WO-19c), so on the navy results section the dark cards read as lit panels, not ink holes. The
   three padding-box layers are --bg-banner's; the spectrum is the last layer, the only one painted under the border. */
.spc-stat:nth-child(even) {
  --ctx-surface: rgb(255 255 255 / .04);
  --ctx-heading: #F2F5FA;
  --ctx-body: #C5D0DE;
  --ctx-muted: #93A3B8;
  --ctx-line: rgb(255 255 255 / .09);
  --ctx-link: var(--c-signal-soft);
  border-color: transparent;
  background-color: var(--c-banner);
  background-image: var(--bg-banner), var(--g-spectrum-soft);
  background-origin: padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;
}
.spc-stat::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: var(--r-lg);
  width: 48px;
  height: 2px;
  background: var(--g-spectrum);
}
.spc-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(76 141 255 / .10), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-hover);
}
@media (hover: hover) {
  .spc-stat:hover {
    border-color: rgb(76 141 255 / .45);
    box-shadow: var(--shadow-card), var(--glow-soft);
    translate: 0 -2px;
  }
  .spc-stat:nth-child(even):hover {
    border-color: transparent;
    background-image: var(--bg-banner), linear-gradient(rgb(76 141 255 / .55), rgb(76 141 255 / .55));
  }
  .spc-stat:hover::after { opacity: 1; }
}
.spc-stat__value {
  margin: 0;
  color: var(--ctx-heading);
  font-size: clamp(2.5rem, 1.7rem + 2.2vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.spc-stat__label { max-width: 32ch; margin: 0; color: var(--ctx-body); font-size: .9375rem; line-height: 1.55; }
.spc-attribution {
  max-width: 72ch;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  color: var(--ctx-muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- 8. Built on and editions (light) */
.spc-built-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.spc-built-main .section-intro { max-width: 58ch; }
.spc-built-main .fp-chips { margin-block-start: clamp(24px, 3vw, 36px); }
.spc-editions {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--ctx-line);
  border-radius: var(--r-lg);
  background: var(--ctx-surface);
}
.spc-editions::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: var(--r-lg);
  width: 48px;
  height: 2px;
  background: var(--g-spectrum);
}
.spc-editions h3 {
  max-width: none;
  margin: 0 0 12px;
  color: var(--ctx-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.spc-editions p { margin: 0; color: var(--ctx-body); font-size: 1rem; line-height: 1.65; }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .spc-services .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spc-role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spc-role-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .spc-layer { grid-template-columns: minmax(0, 1fr); }
  .spc-built-grid { grid-template-columns: minmax(0, 1fr); }
  /* Two columns of stats: light, dark / dark, light / light. */
  .spc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spc-stat, .spc-stat:nth-child(n + 4) { grid-column: auto; }
  .spc-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* The generic rule below darkens every even card; here the pattern is 2, 3, 6, 7 … so the second row starts dark. */
  .spc-stat:nth-child(4n + 3) {
    --ctx-surface: rgb(255 255 255 / .04);
    --ctx-heading: #F2F5FA;
    --ctx-body: #C5D0DE;
    --ctx-muted: #93A3B8;
    --ctx-line: rgb(255 255 255 / .09);
    --ctx-link: var(--c-signal-soft);
    border-color: transparent;
    background-color: var(--c-banner);
    background-image: var(--bg-banner), var(--g-spectrum-soft);
    background-origin: padding-box, padding-box, padding-box, border-box;
    background-clip: padding-box, padding-box, padding-box, border-box;
  }
  .spc-stat:nth-child(4n) {
    --ctx-surface: var(--c-white);
    --ctx-heading: #0B1424;
    --ctx-body: #2F3B4C;
    --ctx-muted: #5B6778;
    --ctx-line: #DDE2E6;
    --ctx-link: var(--c-signal-ink);
    border-color: var(--ctx-line);
    background: var(--ctx-surface);
  }
}
/* WO-19 integration: on tablets the dark cards are 2, 3, 6, 7 … (above), but the generic even-card hover still matched the
   light 4th card and painted it dark under its dark text. Here the hover follows the tablet pattern: a light card keeps its
   surface and takes the lit border, a dark one takes the blue edge like the even cards elsewhere. */
@media (min-width: 601px) and (max-width: 900px) and (hover: hover) {
  .spc-stat:nth-child(4n):hover { border-color: rgb(76 141 255 / .45); background: var(--ctx-surface); }
  .spc-stat:nth-child(4n + 3):hover {
    border-color: transparent;
    background-image: var(--bg-banner), linear-gradient(rgb(76 141 255 / .55), rgb(76 141 255 / .55));
  }
}
@media (max-width: 860px) {
  .spc-arch__svg--wide { display: none; }
  .spc-arch__svg--tall { display: block; }
  .spc-arch__notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .spc-gap-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 720px) {
  /* The steps stack, and the connector turns to run down from one drawing to the next. */
  .spc-corr { --spc-gap: 56px; }
  .spc-steps { grid-template-columns: minmax(0, 1fr); }
  .spc-step:not(:last-child)::after,
  [dir="rtl"] .spc-step:not(:last-child)::after {
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 96px;
    width: 1px;
    height: calc(var(--spc-gap) - 16px);
    background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(76 141 255 / .9));
    transform-origin: center top;
    transition: transform .6s var(--ease-out) calc(var(--d) + .35s);
  }
  @media screen and (prefers-reduced-motion: no-preference) {
    .spc-corr.m-pending .spc-step:not(:last-child)::after { transform: scaleY(0); }
  }
}
@media (max-width: 600px) {
  .spc-services .capability-grid { grid-template-columns: minmax(0, 1fr); }
  .spc-role-list { grid-template-columns: minmax(0, 1fr); }
  .spc-stats { grid-template-columns: minmax(0, 1fr); }
  .spc-stat, .spc-stat:nth-child(n + 4), .spc-stat:last-child:nth-child(odd) { grid-column: auto; }
  .spc-stat { min-height: 0; }
}

/* ---------------------------------------------------------------- Arabic */
/* Plex Mono has no Arabic glyphs and tracking breaks joining (§3): numerals and labels use the Arabic face, Western digits
   stay. Headings and text follow the site's Arabic line heights. */
:is([dir="rtl"], html[lang^="ar"]) :is(.spc-gap-no, .spc-step__no) {
  font-family: var(--spc-arabic);
  font-weight: 500;
  letter-spacing: 0;
}
:is([dir="rtl"], html[lang^="ar"]) :is(.spc-gap-q, .spc-step h3, .spc-role-list h3, .spc-editions h3) { line-height: 1.35; letter-spacing: 0; }
:is([dir="rtl"], html[lang^="ar"]) :is(.spc-gap-a, .spc-step p, .spc-role-list p, .spc-editions p, .spc-layer__main p, .spc-stat__label, .spc-arch__note) { line-height: 1.8; }
:is([dir="rtl"], html[lang^="ar"]) .spc-stat__value { font-weight: 500; letter-spacing: 0; line-height: 1.15; }
:is([dir="rtl"], html[lang^="ar"]) .spc-attribution { line-height: 1.8; }

/* ---------------------------------------------------------------- Reduced motion and forced colours */
/* The lift is movement and goes. The colour and glow fades are not, so they stay: the legacy theme cuts every transition to
   .01ms with !important, and only another !important restores them (as WO-02 and pages.css do). */
@media (prefers-reduced-motion: reduce) {
  .spc-stat:hover { translate: none; }
  .spc-stat, .spc-stat::after {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: var(--dur-hover) !important;
    transition-timing-function: var(--ease-hover) !important;
  }
}
@media (forced-colors: active) {
  .spc-step:not(:last-child)::after { forced-color-adjust: none; background: CanvasText; }
  .spc-stat::before, .spc-editions::before, .spc-role-list > li::before { forced-color-adjust: none; background: CanvasText; }
  .spc-stat, .spc-stat:nth-child(even), .spc-arch__diagram { border-color: CanvasText; background: Canvas; }
}
@media print {
  .spc-arch__svg--tall { display: none; }
  .spc-arch__svg--wide { display: block; }
}