/* /welcome — the post-sign-in MERIDIAN walkthrough.
 *
 * The counterweight to the anonymous landing: everything the public page withholds is told here,
 * behind a session. Same brand tokens as the app console so the walkthrough and the product it
 * describes read as one system.
 *
 * CSP is style-src 'self' — no inline styles, here or in content.html.
 */

@font-face {
  font-family: "Space Grotesk";
  src: url("/home/assets/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/home/assets/fonts/space-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/home/assets/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/home/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/home/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #fbfaf7;
  --panel: #ffffff;
  --panel2: #edf5f0;
  --edge: #16233c;
  --edge2: #24344f;
  --ink: #e9eff8;
  --dim: #a3b6d3;
  --faint: #7488ab;
  --mute: #4a5c7d;
  --brand: #f2a93b;
  --teal: #3fd0c9;
  --go: #37d39a;
  --wind: #5fb0ff;
  --violet: #b98cff;
  --nogo: #ff6d6d;
  --max: 1180px;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* The [hidden] ATTRIBUTE (not a class) is how welcome.js's show()/hide() toggle #loading/#gate/
   #content — but the UA stylesheet's `[hidden]{display:none}` and an author class selector like
   `.wc-state{display:flex}` below have EQUAL specificity, and author styles win the cascade
   regardless of source order. That silently defeated `.hidden = true` outright: #loading stayed
   rendered (own h1, own card) laid ON TOP of #gate once JS "hid" it — found only once this file's
   own real-browser gate (tests/test_public_pages_qa.py) measured the actual DOM instead of
   trusting the JS property name. `!important` is the standard, narrowly-scoped fix for exactly
   this attribute (matching how a browser's own UA stylesheet would win if nothing overrode it). */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  background:
    radial-gradient(circle at 78% 2%, rgba(95, 176, 255, 0.10), transparent 30rem),
    radial-gradient(circle at 8% 12%, rgba(63, 208, 201, 0.08), transparent 26rem),
    linear-gradient(180deg, #08111f 0%, var(--bg) 42%, #fbfaf7 100%);
}

.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }

a { color: var(--teal); }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--panel2);
  border: 1px solid var(--edge2);
  border-radius: 8px;
  color: var(--ink);
}

/* ── sticky bar: the Continue control is never more than a glance away ─────── */
.wc-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--edge);
  background: rgba(251, 250, 247, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.wc-bar-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}
.wc-brand { display: flex; align-items: center; gap: 0.65rem; margin-right: auto; min-width: 0; }
.wc-brand img { width: 26px; height: 26px; }
.wc-brand b {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.wc-brand span {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
@media (max-width: 720px) { .wc-brand span { display: none; } }

/* ── walkthrough family tabs: Overview ↔ Channel intake ↔ Ships agent ───────
 * Own row under the brand/CTA bar so the switcher is the primary control, not a
 * pill tucked beside Continue. Footer CTAs remain secondary. */
.wc-tabs {
  border-top: 1px solid var(--edge);
  background: rgba(237, 245, 240, 0.55);
}
.wc-tabs-in {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}
.wc-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.05rem 0.62rem;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.wc-tab:hover { color: var(--ink); }
.wc-tab[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--brand);
}
.wc-tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.wc-mono { font-family: var(--mono); font-size: 0.88em; }
.wc-muted { color: var(--faint); font-size: 0.88rem; }

/* Honesty callout — brand-edged, same role as channel-intake .guard */
.wc-note {
  margin-top: 1.25rem;
  max-width: 68ch;
  border-left: 2px solid var(--brand);
  padding: 0.75rem 1rem;
  background: rgba(242, 169, 59, 0.06);
  font-size: 0.95rem;
  color: var(--dim);
}
.wc-note b {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--brand);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Compact in-page desk mock — WC chrome, no screenshot file required */
.wc-mock {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: clamp(12px, 1.5vw, 18px);
  overflow: hidden;
  background: #eef4f7;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}
.wc-mock-chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 34px;
  padding: 0 0.85rem 0 3.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 14px 50%, rgba(255,255,255,0.2) 4.5px, transparent 5px),
    radial-gradient(circle at 30px 50%, rgba(255,255,255,0.2) 4.5px, transparent 5px),
    radial-gradient(circle at 46px 50%, rgba(255,255,255,0.2) 4.5px, transparent 5px),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--mute);
}
.wc-mock-body { padding: 1rem 1.1rem 1.15rem; }
.wc-mock-note {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: var(--faint);
}
.wc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.55rem;
}
.wc-kpi {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--panel);
}
.wc-kpi b {
  display: block;
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 600;
}
.wc-kpi span {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.wc-kpi.is-due b { color: var(--brand); }
.wc-kpi.is-breach b { color: var(--nogo); }
.wc-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.wc-strip > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--panel);
}
.wc-keylist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
}
.wc-keylist li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid var(--edge);
  font-size: 0.92rem;
}
.wc-keylist li:first-child { border-top: 0; }
.wc-keylist span { color: var(--faint); font-family: var(--mono); font-size: 0.72rem; }
.wc-formrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--edge);
}
.wc-formrow:last-child { border-bottom: 0; }
.wc-formrow strong { display: block; }
.wc-banner {
  margin: 0 0 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(185, 140, 255, 0.35);
  border-radius: 8px;
  background: rgba(185, 140, 255, 0.07);
  color: var(--dim);
  font-size: 0.88rem;
}

.wc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* 0.7rem vertical measured 41.0px tall on phone in the #gate pre-auth state — under the 44px
     touch-target floor (scripts/public_pages_qa.mjs). 0.85rem clears it with room to spare. */
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(96deg, var(--brand), #ffd07a);
  color: #06101c;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* The channel-intake hand-off label runs 455px in this face at phone width and, unwrappable,
 * pushed the whole page 100px past the right edge at 375px (welcome_tour_qa.mjs caught it).
 * Below 560px a CTA may wrap onto two lines instead of widening the page. */
@media (max-width: 560px) { .wc-cta { white-space: normal; text-align: center; } }
.wc-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(242, 169, 59, 0.24); }
.wc-cta.ghost {
  background: transparent;
  border: 1px solid var(--edge2);
  color: var(--ink);
}
.wc-cta.ghost:hover { box-shadow: none; border-color: #3d5480; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.wc-hero { padding: 4.5rem 0 3rem; position: relative; isolation: isolate; overflow: hidden; }
/* The harbor plate sits behind the copy, weighted right. The wash keeps the lower-left quiet
 * for the headline (the same safe-zone rule the public site's imagery brief enforces), so the
 * plate can carry detail on the right where the stats block overlays it. */
.wc-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wc-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
  opacity: 0.5;
  filter: saturate(0.85) contrast(1.05);
  display: block;
}
.wc-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(251, 250, 247, 0.9) 28%, rgba(251, 250, 247, 0.45) 60%, rgba(251, 250, 247, 0.3) 100%),
    linear-gradient(180deg, rgba(251, 250, 247, 0.1), rgba(251, 250, 247, 0) 35%, var(--bg) 100%);
}
@media (max-width: 560px) {
  /* No room for a side feather on a phone: the plate becomes a band above the copy. */
  .wc-hero-bg { inset: 0 0 auto 0; height: min(68%, 440px); }
  .wc-hero-bg img { object-position: 50% 40%; opacity: 0.55; }
  .wc-hero-bg::after {
    background: linear-gradient(180deg, rgba(251, 250, 247, 0.15) 0%, rgba(251, 250, 247, 0.5) 45%, rgba(251, 250, 247, 0.85) 78%, var(--bg) 100%);
  }
}
@media print { .wc-hero-bg { display: none; } }
.wc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
}
.wc-hero h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.055em;
  max-width: 20ch;
}
.wc-lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--dim);
}
.wc-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

.wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  overflow: hidden;
  background: var(--edge);
}
.wc-stats div { padding: 1.15rem 1.25rem; background: var(--panel); }
.wc-stats dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.wc-stats dd {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Compact chapter index for a deliberately comprehensive operating guide. */
.wc-guide-nav {
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: rgba(238, 244, 247, 0.92);
}
.wc-guide-nav .wrap {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding-block: 0.75rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.wc-guide-nav span,
.wc-guide-nav a {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.wc-guide-nav span { margin-right: 0.25rem; color: var(--brand); }
.wc-guide-nav a {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--faint);
  text-decoration: none;
  white-space: nowrap;
}
.wc-guide-nav a:hover,
.wc-guide-nav a:focus-visible { color: var(--ink); border-color: var(--edge2); }
@media print { .wc-guide-nav { display: none; } }

/* ── sections ─────────────────────────────────────────────────────────────── */
.wc-sec { padding: 3.75rem 0; border-top: 1px solid var(--edge); }
/* A deep link (/plans → #pricing, #walkthrough) must not land its heading under the sticky bar. */
.wc-sec[id] { scroll-margin-top: calc(var(--msn-h, 0px) + 1.5rem); }
html { scroll-padding-top: calc(var(--msn-h, 0px) + 12px); }
.wc-sec > .wrap > .wc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}
/* The lit dot that opens every eyebrow on the public site — the smallest piece of
   the shared visual signature, and the one that carries across pages fastest. */
.wc-sec > .wrap > .wc-kicker::before,
.wc-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}
.wc-sec h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.65rem, 2.6vw, 2.55rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.045em;
  max-width: 26ch;
}
.wc-sec h3 {
  margin: 0 0 0.5rem;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wc-sec p { margin: 0 0 1rem; max-width: 68ch; color: var(--dim); }
.wc-sec p:last-child { margin-bottom: 0; }
.wc-sec strong { color: var(--ink); font-weight: 600; }
.wc-sec > .wrap > .wc-kicker + h2 + p {
  max-width: 72ch;
  margin-bottom: 0;
  font-size: 1.02rem;
  line-height: 1.72;
}

/* ── the flow strip ───────────────────────────────────────────────────────── */
.wc-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 0;
  counter-reset: step;
}
.wc-flow li {
  position: relative;
  list-style: none;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
.wc-flow li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--brand);
}
.wc-flow b { display: block; font-size: 0.98rem; font-weight: 600; margin-bottom: 0.3rem; }
.wc-flow span { font-size: 0.88rem; color: var(--faint); }
@media (max-width: 780px) { .wc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wc-flow { grid-template-columns: 1fr; } }

/* ── one commercial call, start to finish ──────────────────────────────────
 * The journey keeps operational work, commercial purpose, and the human control
 * side by side at wide sizes. On a phone the same source order becomes one readable
 * vertical record; no horizontal process diagram or tiny labels are required. */
.wc-journey {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.wc-journey > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--panel2), var(--panel));
}
.wc-journey-no {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(242, 169, 59, 0.42);
  border-radius: 999px;
  color: var(--brand);
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.08em;
}
.wc-journey-main h3 { margin-top: 0.1rem; }
.wc-sec .wc-journey-main p { margin: 0; max-width: none; font-size: 0.94rem; }
.wc-journey dl { margin: 0; display: grid; gap: 0.55rem; }
.wc-journey dl div {
  display: grid;
  grid-template-columns: minmax(7.2rem, 0.42fr) minmax(0, 1fr);
  gap: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--edge);
}
.wc-journey dl div:first-child { padding-top: 0; border-top: 0; }
.wc-journey dt {
  font-family: var(--mono);
  font-size: 0.61rem;
  line-height: 1.5;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}
.wc-journey dd { margin: 0; color: var(--dim); font-size: 0.86rem; line-height: 1.5; }
@media (max-width: 820px) {
  .wc-journey > li { grid-template-columns: auto minmax(0, 1fr); }
  .wc-journey dl { grid-column: 2; }
}
@media (max-width: 520px) {
  .wc-journey > li { grid-template-columns: 1fr; padding: 1.1rem; }
  .wc-journey-no { width: 2rem; height: 2rem; }
  .wc-journey dl { grid-column: 1; }
  .wc-journey dl div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ── a walkthrough entry: explanation left, product evidence right ─────────
 * One direction throughout the guide makes a long operating sequence easier to scan.
 * Narrow screens retain the same source order: heading, explanation, then capture. */
/* Sections carrying screenshots get a wider content column than prose-only sections, so the
   figure has real room at desktop widths (adaptive-design: image types widen, text measure
   does not — .wc-sec p keeps its own max-width cap regardless of the wider .wrap). */
.wc-sec-shots.wc-sec { --max: 1400px; }

.wc-step {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 3.4rem);
  align-items: center;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--edge);
}
/* The head and its copy share the text column; the figure takes the other. */
.wc-step > .wc-step-head { grid-column: 1; align-self: end; }
.wc-step > p { grid-column: 1; align-self: start; margin-bottom: 0; }
.wc-step > .wc-shot,
.wc-step > .wc-phones,
.wc-step > .wc-multishot,
.wc-step > .wc-mock { grid-column: 2; grid-row: 1 / span 2; }
/* A step with no screenshot (the pure-prose ones) must not leave a dead column. */
.wc-step:not(:has(.wc-shot)):not(:has(.wc-phones)):not(:has(.wc-multishot)):not(:has(.wc-mock)) { display: block; }
.wc-step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin-bottom: 0.55rem; }
.wc-step-head h3 { font-size: clamp(1.35rem, 2.4vw, 1.95rem); letter-spacing: -0.03em; line-height: 1.12; }
@media (max-width: 900px) {
  .wc-step { display: block; }
  .wc-step > p { margin-bottom: 1rem; }
  /* Tablet/phone: the screenshot bleeds past the text gutter toward the page edge — full
     content width, a reduced side margin on the figure itself, caption stays below (source
     order already puts figcaption after img). */
  .wc-step > .wc-shot,
  .wc-qbo-shot {
    margin-inline: -0.9rem;
  }
}
.wc-tag {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--edge2);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.wc-tag.go { color: var(--go); border-color: rgba(55, 211, 154, 0.4); }
.wc-tag.wind { color: var(--wind); border-color: rgba(95, 176, 255, 0.4); }
.wc-tag.brand { color: var(--brand); border-color: rgba(242, 169, 59, 0.4); }
.wc-tag.teal { color: var(--teal); border-color: rgba(63, 208, 201, 0.4); }
.wc-tag.violet { color: var(--violet); border-color: rgba(185, 140, 255, 0.4); }
.wc-tag.caution { color: var(--caution); border-color: rgba(242, 169, 59, 0.45); }

/* A capture is framed as an application window — the same chrome the public page
 * uses — so a screenshot always reads as a screenshot and never as a photograph of
 * a finished product. The bar is drawn in CSS rather than markup: content.html is
 * served through a session gate and is guarded for structure, so the frame belongs
 * in the stylesheet, not in three extra elements per figure.
 */
.wc-shot {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: clamp(12px, 1.5vw, 18px);
  overflow: hidden;
  background: #eef4f7;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}
.wc-shot::before {
  content: "";
  display: block;
  height: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 14px 50%, rgba(255,255,255,0.2) 4.5px, transparent 5px),
    radial-gradient(circle at 30px 50%, rgba(255,255,255,0.2) 4.5px, transparent 5px),
    radial-gradient(circle at 46px 50%, rgba(255,255,255,0.2) 4.5px, transparent 5px),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
}
.wc-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--edge);
}
.wc-shot figcaption {
  padding: 0.7rem 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--mute);
}

/* The Ship Agency guide is deliberately comprehensive, but its primary workflow should read
 * like an operating manual rather than a stack of full-bleed screenshots. Keep every screen
 * available (and enlargeable) while giving the explanation and evidence one consistent card.
 * This is scoped to .wc-shipsagent so the Overview and Channel Intake walkthroughs retain their
 * own established image rhythm. */
.wc-shipsagent .wc-sec-shots { --max: 1240px; }
.wc-shipsagent .wc-sec-shots .wc-step {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.35rem, 3vw, 2.5rem);
  margin-top: 1.15rem;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid var(--edge);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 8%, rgba(95, 176, 255, 0.06), transparent 18rem),
    linear-gradient(145deg, rgba(237, 245, 240, 0.82), rgba(8, 15, 26, 0.92));
}
.wc-shipsagent .wc-sec-shots .wc-step > p {
  font-size: 0.94rem;
  line-height: 1.68;
}
.wc-shipsagent .wc-sec-shots .wc-step > .wc-shot,
.wc-shipsagent .wc-sec-shots .wc-step > .wc-phones,
.wc-shipsagent .wc-sec-shots .wc-step > .wc-multishot,
.wc-shipsagent .wc-sec-shots .wc-step > .wc-mock {
  width: 100%;
  max-width: 760px;
  justify-self: end;
}
.wc-shipsagent .wc-sec-shots .wc-shot {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}
.wc-shipsagent .wc-sec-shots .wc-shot figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.wc-shipsagent .wc-sec-shots .wc-shot figcaption::after {
  content: "Select to enlarge";
  flex: 0 0 auto;
  color: var(--brand);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .wc-shipsagent .wc-sec-shots .wc-step {
    padding: 1rem;
    border-radius: 18px;
  }
  .wc-shipsagent .wc-sec-shots .wc-step > .wc-shot,
  .wc-shipsagent .wc-sec-shots .wc-step > .wc-phones,
  .wc-shipsagent .wc-sec-shots .wc-step > .wc-multishot,
  .wc-shipsagent .wc-sec-shots .wc-step > .wc-mock {
    max-width: none;
    margin-inline: 0;
  }
}
@media (max-width: 520px) {
  .wc-shipsagent .wc-sec-shots .wc-step {
    padding: 0.85rem;
    border-radius: 16px;
  }
  .wc-shipsagent .wc-sec-shots .wc-shot figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Editorial dock scenes are intentionally distinct from MERIDIAN product captures. */
.wc-editorial {
  max-width: 720px;
  margin: 1.75rem auto 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: clamp(14px, 2vw, 22px);
  overflow: hidden;
  background: #eef4f7;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}
.wc-editorial img {
  display: block;
  width: 100%;
  /* the width/height attributes otherwise pin the rendered height at 1024px */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--edge);
}
.wc-editorial figcaption {
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--mute);
}

/* two phone shots side by side */
.wc-phones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  max-width: 700px;
}
.wc-phones .wc-shot { margin: 0; }
/* device rounding instead of a window bar, as on the public page */
.wc-phones .wc-shot { border-radius: clamp(22px, 3vw, 30px); }
.wc-phones .wc-shot::before { display: none; }

/* Two or three related captures side by side in one step's image column — same idea as
   .wc-phones (a responsive auto-fit grid) but keeps each capture's normal .wc-shot window
   chrome and corner radius instead of trading it for phone-bezel rounding, since these are
   ordinary app screenshots (e.g. the filings walkthrough's data-source panels), not device
   mockups. */
.wc-multishot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.wc-multishot .wc-shot { margin: 0; }
@media (max-width: 1100px) { .wc-multishot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .wc-multishot { grid-template-columns: 1fr; } }

/* ── generic card grid ────────────────────────────────────────────────────── */
.wc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.9rem;
  margin-top: 1.75rem;
}
.wc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.35rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}
/* the lit top seam every card carries on the public site */
.wc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63, 208, 201, 0.5), transparent);
  opacity: 0.55;
}
.wc-card:hover { transform: translateY(-2px); border-color: rgba(63, 208, 201, 0.45); }
.wc-card p { font-size: 0.93rem; margin-bottom: 0; color: var(--faint); }
.wc-card .wc-tag { margin-bottom: 0.7rem; }

/* ── process-to-revenue business case ───────────────────────────────────── */
.wc-revenue-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 1.75rem;
  padding: 1rem;
  border: 1px solid rgba(242, 169, 59, 0.28);
  border-radius: 16px;
  background: rgba(242, 169, 59, 0.045);
}
.wc-revenue-chain span {
  padding: 0.52rem 0.7rem;
  border: 1px solid var(--edge2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.82rem;
  white-space: nowrap;
}
.wc-revenue-chain b { color: var(--brand); font: 400 0.85rem/1 var(--mono); }
.wc-revenue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0.9rem;
  margin-top: 1.1rem;
}
.wc-revenue-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  overflow: hidden;
}
.wc-revenue-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 169, 59, 0.58), transparent);
}
.wc-revenue-grid .wc-tag { margin-bottom: 0.7rem; }
.wc-sec .wc-revenue-grid h3 { font-size: 1.02rem; }
.wc-sec .wc-revenue-grid p { max-width: none; margin: 0; color: var(--faint); font-size: 0.9rem; }
.wc-revenue-table { min-width: 760px; }
.wc-revenue-table td:nth-child(2) { color: var(--teal); white-space: normal; min-width: 12rem; }
.wc-revenue-table td:last-child { min-width: 19rem; }
.wc-business-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.wc-business-proof > div {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--panel);
}
.wc-business-proof .wc-tag { margin-bottom: 0.65rem; }
.wc-sec .wc-business-proof h3 { font-size: 1rem; }
.wc-sec .wc-business-proof p { max-width: none; margin: 0; font-size: 0.9rem; }
@media (max-width: 620px) {
  .wc-revenue-chain { display: grid; grid-template-columns: 1fr; }
  .wc-revenue-chain span { white-space: normal; text-align: center; }
  .wc-revenue-chain b { transform: rotate(90deg); justify-self: center; }
}

/* ── plans & target pricing (#pricing) ────────────────────────────────────────
 * One panel per tenant type; panels flow 3 → 2 → 1 by available width (auto-fit, never a fixed
 * column count). A rung is a two-row grid — name and price on one line, the fit line beneath —
 * so the ladder reads the same on a phone and a projector. The add-on table is the one wide
 * element on the page: it scrolls inside .wc-table-wrap, and the body never scrolls sideways. */
.wc-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 0.9rem;
  margin-top: 1.75rem;
}
.wc-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.35rem 1.2rem;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  overflow: hidden;
  break-inside: avoid;
}
.wc-plan::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 169, 59, 0.5), transparent);
  opacity: 0.55;
}
.wc-plan .wc-tag { margin-bottom: 0.7rem; align-self: flex-start; }
.wc-sec .wc-plan h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 0.3rem; }
.wc-sec .wc-plan p { max-width: none; }
.wc-plan-model {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.wc-sec .wc-plan-model { margin: 0 0 0.75rem; }
.wc-tiers { list-style: none; margin: 0; padding: 0; }
.wc-tiers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "fit fit";
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-top: 1px solid var(--edge);
}
.wc-tiers li:first-child { border-top: 0; padding-top: 0.2rem; }
.wc-tier-name { grid-area: name; color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.wc-tier-price {
  grid-area: price;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--brand);
  white-space: nowrap;
  text-align: right;
}
.wc-tier-price small { font-size: 0.64rem; letter-spacing: 0.06em; color: var(--faint); }
.wc-tier-fit { grid-area: fit; font-size: 0.85rem; line-height: 1.45; color: var(--faint); }
.wc-sec .wc-plan-meta {
  margin: auto 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--edge);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--faint);
}
.wc-sec .wc-addons-h { margin-top: 2.75rem; }
.wc-table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--panel);
}
.wc-table-wrap:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.wc-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.9rem; }
.wc-table th, .wc-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--edge);
}
.wc-table thead th {
  border-top: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--panel2);
}
.wc-table tbody th { color: var(--ink); font-weight: 600; line-height: 1.35; }
.wc-table td { color: var(--dim); font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; }
.wc-table td:last-child { white-space: normal; min-width: 14rem; }
@media print {
  .wc-plan, .wc-table tr { break-inside: avoid; }
  .wc-table-wrap { overflow: visible; border: 0; }
  .wc-table { min-width: 0; }
}

/* ── the boundaries panel ─────────────────────────────────────────────────── */
.wc-bounds {
  margin-top: 1.75rem;
  border: 1px solid rgba(255, 109, 109, 0.28);
  border-radius: 16px;
  background: rgba(255, 109, 109, 0.045);
  padding: 1.4rem 1.5rem;
}
.wc-bounds h3 { color: var(--ink); }
.wc-bounds ul { margin: 0.75rem 0 0; padding-left: 1.15rem; color: var(--dim); }
.wc-bounds li { margin-bottom: 0.5rem; font-size: 0.95rem; }
.wc-bounds li:last-child { margin-bottom: 0; }

.wc-guidance {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid rgba(63, 208, 201, 0.28);
  border-radius: 16px;
  background: rgba(63, 208, 201, 0.045);
}
.wc-guidance h3 { color: var(--ink); }
.wc-guidance ul { margin: 0.75rem 0 0; padding-left: 1.15rem; color: var(--dim); }
.wc-guidance li { margin-bottom: 0.5rem; font-size: 0.95rem; }
.wc-guidance li:last-child { margin-bottom: 0; }

.wc-glossary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}
.wc-glossary > div {
  padding: 1rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
.wc-glossary dt {
  margin-bottom: 0.35rem;
  color: var(--teal);
  font: 500 0.72rem/1.4 var(--mono);
  letter-spacing: 0.08em;
}
.wc-glossary dd { margin: 0; color: var(--dim); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 820px) { .wc-glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .wc-glossary { grid-template-columns: 1fr; } }

/* ── closing ──────────────────────────────────────────────────────────────── */
.wc-end {
  margin: 0;
  padding: 3.5rem 0 4.5rem;
  border-top: 1px solid var(--edge);
  text-align: center;
}
.wc-end h2 { margin: 0 auto 1rem; max-width: 22ch; }
.wc-end p { margin: 0 auto 2rem; max-width: 54ch; color: var(--dim); }
.wc-end .wc-cta { font-size: 0.8rem; padding: 0.95rem 2rem; }

.wc-foot {
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #33445f;
  text-align: center;
  overflow-wrap: anywhere;
}
.wc-legal-foot {
  padding: 1.25rem 1rem 2rem;
  border-top: 1px solid var(--edge);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dim);
  overflow-wrap: anywhere;
}
.wc-legal-foot a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wc-legal-foot a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.wc-foot .wrap { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.wc-rev-link { color: var(--faint); text-decoration: underline; }
.wc-rev-link:hover, .wc-rev-link:focus-visible { color: var(--ink); }

/* ── revision history (?rev=list) + a historic revision (?rev=<id>) ─────────
 * Rendered inside #content like the live walkthrough, so it inherits the shell's max-width,
 * fonts and dark background. Kept deliberately plain: no images, no tour markup, so it never
 * needs its own adaptive pass beyond fluid width + wrapping text. */
.pr-list {
  max-width: 44rem;
  margin: 3.5rem auto;
  padding: 0 1.5rem;
}
.pr-list h1 { margin: 0 0 0.5rem; font-size: 1.6rem; }
.pr-count { margin: 0 0 1.5rem; color: var(--dim); font-size: 0.9rem; }
.pr-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--edge);
}
.pr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--edge);
}
.pr-row a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pr-row a:hover, .pr-row a:focus-visible { text-decoration: underline; }
.pr-row.pr-current a { color: var(--go); font-weight: 600; }
.pr-date {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--faint);
}
.pr-banner {
  margin: 0 auto;
  max-width: var(--max);
  padding: 0.9rem 1.5rem;
  background: rgba(255, 109, 109, 0.1);
  border-bottom: 1px solid rgba(255, 109, 109, 0.3);
  color: var(--dim);
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.pr-banner a { color: var(--wind); }

/* ── gate / loading states (the shell before content arrives) ─────────────── */
.wc-state {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}
.wc-state-card {
  max-width: 26rem;
  padding: 2.5rem 2rem;
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: var(--panel);
}
.wc-state-card img { width: 40px; height: 40px; margin-bottom: 1.25rem; }
.wc-state-card h1 { margin: 0 0 0.75rem; font-size: 1.3rem; font-weight: 600; }
.wc-state-card .wc-state-title { margin: 0 0 0.75rem; color: var(--ink); font-size: 1.3rem; font-weight: 600; }
.wc-state-card p { margin: 0 0 1.25rem; color: var(--faint); font-size: 0.95rem; }
.wc-state-card p:last-child { margin-bottom: 0; }

/* ── concept-feature section: headline + bullets + one mockup figure ────────
 * Priority map (adaptive-design): headline/intro read first at every width; the
 * mockup figure comes right after in source order so a narrow viewport shows it
 * before the bullet list (no JS reorder needed); at >=860px a two-column grid
 * puts the bullets first visually without touching source/reading order, same
 * technique as .wc-step above. */
.wc-qbo {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "shot" "list";
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 1.75rem;
}
.wc-qbo-shot { grid-area: shot; margin: 0; }
.wc-qbo-list {
  grid-area: list;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.wc-qbo-list li {
  position: relative;
  padding-left: 1.55rem;
  font-size: 0.95rem;
  color: var(--dim);
}
.wc-qbo-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-family: var(--mono);
}
.wc-qbo-list strong { color: var(--ink); font-weight: 600; }
@media (min-width: 860px) {
  .wc-qbo {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    grid-template-areas: "list shot";
    align-items: center;
  }
}

/* ── step-by-step walkthrough (.wc-tour) ─────────────────────────────────────
 * Two modes, one markup. STATIC (default, no script, prefers-reduced-motion, print): an ordered
 * list — every screen with its caption, stacked. LIVE (welcome.js adds .is-live only when motion
 * is allowed): the steps share one grid cell and crossfade; the progress fill's animationend is
 * what advances the tour, so pausing is just animation-play-state and the bar can never drift
 * from the slide it describes. Controls are [hidden] until live mode reveals them. */
.wc-tour { margin-top: 1.75rem; }
.wc-tour-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 5vw, 3.25rem); }
.wc-tour-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: center; }
.wc-tour-fig {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: clamp(12px, 1.5vw, 18px);
  overflow: hidden;
  background: #eef4f7;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48);
}
.wc-tour-fig img { display: block; width: 100%; height: auto; }
.wc-tour-no {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.wc-sec .wc-tour-cap h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; }
.wc-sec .wc-tour-cap p { font-size: 1rem; margin: 0; }
@media (max-width: 859px) {
  /* Tablet/phone: same edge-to-edge treatment as .wc-shot above. */
  .wc-tour-fig { margin-inline: -0.9rem; }
}
@media (min-width: 860px) {
  .wc-tour-step { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
}
/* Wide variant. The workflow steppers carry dense operational diagrams — a voice-routing
 * topology, a four-channel intake stream, a service request with its clocks — rather than one
 * app screen, so they take the whole content column and put the caption underneath. At 1400px
 * the frame is 44% wider than the 971px the side-by-side layout leaves, which is the difference
 * between roughly 9px and 17px type inside the frame. The QuickBooks tour, whose frames are
 * single screens, keeps its caption beside. */
@media (min-width: 860px) {
  .wc-tour.is-wide .wc-tour-step { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
}
.wc-sec .wc-tour-note {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--mute);
}

.wc-tour-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.wc-tour-count { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.wc-tour-bar { flex: 1; height: 4px; border-radius: 999px; background: var(--edge2); overflow: hidden; }
.wc-tour-fill {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--teal), var(--brand));
}
.wc-tour.is-live .wc-tour-fill.is-running { animation: wc-tour-fill 7s linear forwards; }
.wc-tour.is-paused .wc-tour-fill.is-running { animation-play-state: paused; }
@keyframes wc-tour-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Off-stage slides in live mode carry `transform: translateX(18px)` (below) even while
   visibility:hidden — a transformed box still contributes to the page's scrollable overflow
   region, so at narrow widths (where the figure now bleeds toward the edge) that 18px slide-in
   offset alone can push scrollWidth past the viewport. Clipping the stack is the standard fix
   for an off-stage carousel slide and changes nothing about what is visibly shown. */
.wc-tour.is-live .wc-tour-steps { gap: 0; grid-template-areas: "stack"; overflow: clip; }
.wc-tour.is-live .wc-tour-step {
  grid-area: stack;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.wc-tour.is-live .wc-tour-step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s;
}

.wc-tour-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--edge2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.wc-tour-btn:hover { border-color: #3d5480; }
.wc-tour-btn:focus-visible,
.wc-tour-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.wc-tour-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "prev dots next";
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.wc-tour-nav [data-tour-prev] { grid-area: prev; }
.wc-tour-nav [data-tour-next] { grid-area: next; }
.wc-tour-dots { grid-area: dots; display: flex; flex-wrap: wrap; justify-content: center; }
.wc-tour-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wc-tour-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--edge2);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.wc-tour-dot[aria-current="step"]::before { width: 24px; background: var(--brand); }
@media (max-width: 560px) {
  .wc-tour-nav { grid-template-columns: 1fr 1fr; grid-template-areas: "dots dots" "prev next"; }
  .wc-tour-nav [data-tour-next] { justify-self: end; }
  .wc-tour-nav [data-tour-prev] { justify-self: start; }
}

@media print {
  .wc-tour-top, .wc-tour-nav { display: none !important; }
  .wc-tour-step { break-inside: avoid; }
  .wc-tour.is-live .wc-tour-steps { gap: 2rem; grid-template-areas: none; }
  .wc-tour.is-live .wc-tour-step { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-tour-step, .wc-tour-dot::before { transition: none !important; }
  html { scroll-behavior: auto; }
  .wc-cta, .wc-card { transition: none; }
  .wc-card:hover { transform: none; }
}

/* ── click/tap-to-enlarge: the screenshot trigger + lightbox dialog (welcome.js) ─────────────
 * Every .wc-shot / .wc-tour-fig <img> is wrapped in a <button class="wc-shot-trigger"> at
 * runtime; the button is a plain full-width wrapper so it changes nothing about the existing
 * frame, chrome bar or figcaption layout above. */
.wc-shot-trigger {
  all: unset;
  display: block;
  width: 100%;
  cursor: zoom-in;
}
.wc-shot-trigger:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.wc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(3, 6, 11, 0.92);
}
.wc-lightbox[hidden] { display: none; }
.wc-lightbox-img {
  display: block;
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.wc-lightbox-close {
  position: fixed;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge2);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.wc-lightbox-close:hover { border-color: #3d5480; }
.wc-lightbox-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
body.wc-lightbox-locked { overflow: hidden; }

/* Ship Agency field-PWA overview: a compact workflow diagram, status-led feature cards,
   and an explicit offline/online boundary. The visual carries meaning without adding another
   large image to an already screenshot-rich guide. */
.wc-pwa-status-key {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem 0.85rem;
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--edge2);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}
.wc-pwa-status-key p { margin: 0; font-size: 0.88rem; color: var(--dim); }
.wc-pwa-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.65rem;
  border: 1px solid;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wc-pwa-status.available { color: #8ff0c7; border-color: rgba(65, 206, 153, 0.45); background: rgba(35, 151, 111, 0.14); }
.wc-pwa-status.development { color: #f7c982; border-color: rgba(239, 175, 78, 0.42); background: rgba(171, 105, 31, 0.14); }
.wc-pwa-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1.75rem 0 2.25rem;
  padding: 1px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--edge2);
}
.wc-pwa-flow li {
  position: relative;
  min-height: 150px;
  padding: 1.2rem;
  background: var(--panel);
}
.wc-pwa-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 1;
  right: -0.72rem;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge2);
  border-radius: 50%;
  background: var(--panel2);
  color: var(--brand);
  transform: translateY(-50%);
}
.wc-pwa-flow span { display: block; margin-bottom: 1.25rem; font-family: var(--mono); color: var(--brand); }
.wc-pwa-flow b { display: block; margin-bottom: 0.4rem; font-size: 1rem; }
.wc-pwa-flow small { display: block; color: var(--dim); line-height: 1.5; }
.wc-pwa-step { margin-top: 2rem; }
.wc-pwa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.25rem;
}
.wc-pwa-card {
  min-width: 0;
  padding: 1.05rem;
  border: 1px solid var(--edge2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(24, 37, 57, 0.84), rgba(11, 20, 33, 0.94));
}
.wc-pwa-card[data-pwa-status="development"] { border-color: rgba(239, 175, 78, 0.30); }
.wc-sec .wc-pwa-card h4 { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.25; }
.wc-sec .wc-pwa-card p { margin: 0; font-size: 0.88rem; line-height: 1.58; color: var(--dim); }
.wc-pwa-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.wc-pwa-matrix article {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--edge2);
  border-radius: 16px;
  background: var(--panel);
}
.wc-pwa-matrix .wc-tag { max-width: 100%; white-space: normal; line-height: 1.35; }
.wc-pwa-matrix h3 { margin: 1rem 0 0.7rem; }
.wc-pwa-matrix ul { margin: 0; padding-left: 1.15rem; color: var(--dim); }
.wc-pwa-matrix li + li { margin-top: 0.45rem; }
.wc-pwa-boundary { margin-top: 2rem; }
.wc-pwa-boundary p { margin-bottom: 0; }

@media (max-width: 980px) {
  .wc-pwa-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc-pwa-flow li:nth-child(2)::after { display: none; }
  .wc-pwa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .wc-pwa-status-key { grid-template-columns: 1fr; }
  .wc-pwa-status-key p + .wc-pwa-status { margin-top: 0.5rem; }
  .wc-pwa-flow, .wc-pwa-grid, .wc-pwa-matrix { grid-template-columns: minmax(0, 1fr); }
  .wc-pwa-flow li { min-height: auto; }
  .wc-pwa-flow li::after { display: none !important; }
}

/* print-everywhere (lane/print-everywhere): shares the print-target/print-ancestor visibility
   contract webapp/print.js relies on (see webapp/styles.css's own copy for the full comment) —
   duplicated here rather than @import'd because this page never loads the app stylesheet. */
.mp-print-root{display:none}
@media print{
  .wc-bar,.wc-tabs,.skip-link,.wc-cta{display:none!important}
  body.print-scoped *{visibility:hidden!important}
  body.print-scoped .print-target,body.print-scoped .print-target *{visibility:visible!important}
  body.print-scoped .print-ancestor{position:static!important;overflow:visible!important;height:auto!important;max-height:none!important;transform:none!important}
  body.print-scoped .print-target{position:absolute!important;left:0;top:0;width:100%}
}