/* ============================================================
   Symphony, workload automation alternative landing page.
   (/workload-automation-alternative/)
   Paid + noindexed. Loads AFTER campaign.css.

   campaign.css carries the shared campaign language (gr-). This file
   only adds what this page needs on top: the hero jump links, the
   capability grid at three across, the offer cards, the migration
   steps, form validation states, and the
   scroll-reveal machinery.

   MOTION RULES
   - Every animated element is visible by default. The hidden start
     state only applies under html.wa-anim, which JS adds. If JS fails
     or prefers-reduced-motion is set, the page renders fully.
   - Reveals are a short fade and rise, staggered by --wa-i. Nothing
     moves more than 16px and nothing animates twice.
   ============================================================ */

/* ============================================================
   A. LANDING-PAGE NAV
   Section links, not site links. Every site nav item is an exit from a
   page whose only job is one booked session, so the bar orients the
   reader within the page and the logo is the single deliberate route
   back to the main site.
   ============================================================ */
.wa-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 140;
  padding: 0 24px;
  background: transparent;
  transition: background .3s var(--ease-out), border-color .3s, box-shadow .3s;
  border-bottom: 1px solid transparent;
}
.wa-nav.on {
  background: rgba(13, 10, 26, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(168, 85, 247, 0.16);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9);
}
.wa-nav-in {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 68px;
}
.wa-nav-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.wa-nav-logo img { display: block; height: 30px; width: auto; opacity: .95; transition: opacity .18s; }
.wa-nav-logo:hover img { opacity: 1; }
.wa-nav-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.wa-nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.wa-nav-links a {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.wa-nav-links a:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.wa-nav-links a.on { color: var(--text-primary); }
/* Active section marker, same gradient hairline as the section eyebrows */
.wa-nav-links a.on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(95deg, var(--accent), var(--accent-purple));
}
.wa-nav-cta { flex: 0 0 auto; text-decoration: none; }

/* Reading progress, doubles as the nav's bottom rule once scrolling. */
.wa-nav-prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(95deg, var(--accent), var(--accent-purple));
  transition: width .1s linear;
}

@media (max-width: 1100px) {
  .wa-nav-links { display: none; }
  .wa-nav-in { justify-content: space-between; }
  .wa-nav-cta { margin-left: auto; }
}
@media (max-width: 520px) {
  .wa-nav { padding: 0 14px; }
  .wa-nav-in { height: 60px; }
  .wa-nav-cta { font-size: 0.82rem; padding: 9px 14px; }
}

/* ============================================================
   B. BY LINE OF BUSINESS ENHANCEMENT LAYER, ported
   src/css/lob-enhance.css targets the pc- system, which this page no
   longer uses, so its techniques are ported to the gr- components
   here rather than the file being linked:
     - per-section signature colour driven by one --sec triple
     - gradient hairline under each section eyebrow
     - resting depth on cards with a consistent hover lift
     - soft brand glow on the primary CTA
     - glass hero panel on a glow halo with mouse-driven 3D tilt
   ============================================================ */

/* Per-section colour. One --sec triple per section drives the wash,
   the eyebrow and the card accents, so nothing drifts. */
.gr .sec { position: relative; }
.gr .sec[style*="--sec"], .gr .sec.wa-sec {
  background-image: radial-gradient(96% 72% at 50% -12%, rgba(var(--sec), 0.075), transparent 58%);
}
.wa-sec .head .eyebrow { color: rgb(var(--sec)); }

/* Gradient hairline under the eyebrow, the LoB structural marker. */
.gr .head.center .eyebrow { position: relative; padding-bottom: 14px; }
.gr .head.center .eyebrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(95deg, var(--accent), var(--accent-purple));
}
.wa-sec .head.center .eyebrow::after { background: rgb(var(--sec)); }

/* Resting depth and a consistent hover lift across every card type. */
.gr-lc, .gr-capc, .gr-mode, .gr-case, .wa-step, .wa-lane, .wa-cta, .gr-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 30px -22px rgba(0, 0, 0, 0.7);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}
.gr-lc:hover, .gr-capc:hover, .gr-mode:hover, .gr-case:hover, .wa-step:hover, .wa-lane:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 187, 255, 0.28);
}
/* In a coloured section the lift glows in that section's own hue. */
.wa-sec .gr-lc:hover, .wa-sec .gr-capc:hover, .wa-sec .gr-mode:hover,
.wa-sec .gr-case:hover, .wa-sec .wa-step:hover, .wa-sec .wa-lane:hover {
  box-shadow: 0 22px 48px -20px rgba(var(--sec), 0.45);
  border-color: rgba(var(--sec), 0.4);
}

/* Soft brand glow on the primary action. The nav and the offer panel
   sit outside .gr, so they are named explicitly. */
.gr .btn-primary, .wa-nav .btn-primary, .wa-pop .btn-primary, .wa-sticky .btn-primary { box-shadow: 0 10px 30px -10px rgba(255, 122, 61, 0.5); }
.gr .btn-primary:hover, .wa-nav .btn-primary:hover, .wa-pop .btn-primary:hover, .wa-sticky .btn-primary:hover { box-shadow: 0 14px 38px -10px rgba(255, 122, 61, 0.62); transform: translateY(-2px); }

/* Hero panel: glass on a glow halo, tilting to the cursor. */
.gr-hero-c { position: relative; }
.wa-tilt { perspective: 1300px; isolation: isolate; position: relative; }
.wa-tilt::before {
  content: "";
  position: absolute;
  inset: -30% -14% -34% -14%;
  z-index: 0;
  background: radial-gradient(58% 55% at 62% 40%, rgba(168, 85, 247, 0.3), transparent 70%),
              radial-gradient(46% 46% at 28% 82%, rgba(255, 122, 61, 0.16), transparent 72%);
  filter: blur(36px);
  pointer-events: none;
}
.wa-tilt .gr-hero-mon {
  position: relative;
  z-index: 1;
  box-shadow: 0 32px 84px -22px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(212, 187, 255, 0.1);
  transform-style: preserve-3d;
  transition: transform .3s var(--ease-out);
  will-change: transform;
}

/* ---------- density ----------
   The reference page is a long editorial campaign page at 96px bands.
   This one has a single job, so alternate bands are tightened. */
.gr .sec { padding: 76px 0; }
.gr .sec.wa-tight { padding: 60px 0; }
.gr .head { margin-bottom: 38px; }
.gr .head.center .lede { margin-left: auto; margin-right: auto; }

/* ---------- hero ---------- */
.gr-hero-mon { margin-top: 26px; max-width: 460px; }
.gr-mon-grid { grid-template-columns: repeat(16, 1fr); }
/* fault cell, clears to recovered on a stagger */
.gr-mon-grid i.f { background: rgba(250, 129, 62, 0.18); border-color: rgba(250, 129, 62, 0.5); }
.gr-mon-grid i.r { background: rgba(45, 212, 167, 0.28); border-color: rgba(45, 212, 167, 0.6); }
.gr-mon-grid i { transition: background .5s ease, border-color .5s ease; }

.wa-herolinks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 26px; }
.wa-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding-bottom: 3px;
  transition: color .18s, border-color .18s;
}
.wa-jump:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.wa-jump-hi { color: var(--accent); border-color: rgba(255, 122, 61, 0.4); }
.wa-jump-hi:hover { color: var(--accent-hover); border-color: var(--accent); }

/* ---------- capability grid ----------
   campaign.css sets .gr-cap to five across for its own content. Six
   cards read better at three. */
.wa-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.wa-caps .gr-capc { padding: 22px 20px; }
.wa-caps .gr-capc h3 { font-size: 1rem; margin-bottom: 8px; }
.wa-caps .gr-capc p { font-size: 0.88rem; color: var(--text-tertiary); line-height: 1.55; }

/* ---------- offer cost timeline ----------
   Three points on one line rather than three floating cards. The period
   leads, because that is what makes the offer legible: two of the three
   lines land in year one, one on subscription and one on implementation.
   A rail with nodes carries the sequence so the eye reads left to right
   as time passing, which is the argument. */
.wa-offer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
/* The rail. Sits behind the nodes, stops short at both ends so it does
   not run off into nothing. */
.wa-offer::before {
  content: ;
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-purple));
  opacity: .5;
}
.wa-oc {
  position: relative;
  padding: 34px 22px 0;
  text-align: center;
}
.wa-oc-node {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 122, 61, 0.12);
}
.wa-oc:last-child .wa-oc-node { border-color: var(--accent-purple); box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.14); }

.wa-oc-when {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.wa-oc-what {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quaternary);
}
.wa-oc-v {
  display: block;
  margin: 14px 0 10px;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  background: linear-gradient(95deg, #ff7a3d 10%, #d08bff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wa-oc p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-tertiary);
  max-width: 30ch;
  margin: 0 auto;
}

/* ---------- migration steps ---------- */
.wa-steps { display: grid; gap: 14px; max-width: 780px; margin: 0 auto; }
.wa-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: start;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.wa-step-n {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(255, 122, 61, 0.1);
  border: 1px solid rgba(255, 122, 61, 0.32);
}
.wa-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.wa-step p { font-size: 0.89rem; color: var(--text-tertiary); line-height: 1.55; }


/* ---------- closer ----------
   Two columns like the hero. A centred band stacked above the form left
   a dead void between the two. */
.wa-closer { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.wa-closer-c .t { font-size: clamp(1.7rem, 1.529rem + 0.857vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.14; margin-bottom: 14px; }
.wa-closer-c .lede { margin-bottom: 22px; }
.wa-assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wa-assure li {
  position: relative;
  padding-left: 24px;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--text-tertiary);
}
.wa-assure li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 5px;
  border-left: 1.7px solid var(--accent);
  border-bottom: 1.7px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- two routes: message or meeting ----------
   Same pattern as the contact page. Some buyers want to write first,
   some want a slot now. Both routes fire the conversion. */
.wa-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
}
.wa-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.wa-tab svg { flex: none; }
.wa-tab[aria-selected="true"] { background: var(--accent); color: #fff; }
.wa-tab:hover:not([aria-selected="true"]) { color: var(--text-primary); }
.wa-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Calendly mounts white, so the shell keeps the rounded dark frame and
   the height is capped against the viewport rather than fixed. An
   unbounded inline widget was what broke the contact page layout. */
.wa-cal {
  position: relative;
  margin-top: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  height: min(560px, 68dvh);
  min-height: 460px;
}
.wa-cal iframe { width: 100%; height: 100%; border: 0; display: block; }
.wa-cal-load {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-tertiary);
  background: var(--bg-card);
}
.wa-cal-spin {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  animation: wa-spin .8s linear infinite;
}
@keyframes wa-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wa-cal-spin { animation: none; } }

.wa-linkbtn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.wa-linkbtn:hover { color: var(--accent-hover); }

/* ---------- form ---------- */
.gr-hero-form .gr-card, .wa-closer .gr-card { padding: 26px 24px; }
.wa-key label { color: var(--accent); }
.gr-field select {
  width: 100%;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--field-border, #726a85);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  /* 16px minimum: iOS Safari force-zooms the viewport on focus below it */
  font-size: 16px;
  padding: 11px 34px 11px 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238a8a96' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  transition: border-color .18s;
}
.gr-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.gr-field option { background: #151029; color: var(--text-primary); }

.wa-msg { display: none; font-size: 0.78rem; line-height: 1.45; color: var(--accent); margin-top: 6px; }
.gr-field.wa-invalid .wa-msg { display: block; }
.gr-field.wa-invalid input, .gr-field.wa-invalid select { border-color: var(--accent); }
.wa-foot { margin-top: 12px; font-size: 0.78rem; color: var(--text-quaternary); text-align: center; }

/* ---------- the agentic layer diagram ----------
   Three decision lanes converge on one governance gate, which feeds one
   execution engine, which reaches the estate. Built as layout plus two
   thin SVG connector strips rather than one big SVG, so the text stays
   selectable, translatable and readable at any width. */
.wa-agentic { background: linear-gradient(180deg, rgba(28, 22, 53, 0.35), transparent 70%); }

.wa-dia {
  margin: 0;
  padding: 26px 24px 22px;
  border: 1px solid var(--hair2);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(28, 22, 53, 0.5), rgba(15, 11, 26, 0.55));
}
.wa-dia-k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  text-align: center;
  margin-bottom: 20px;
}

.wa-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wa-lane {
  position: relative;
  padding: 18px 16px;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--accent-purple);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
/* Each lane keeps its own identity: rules deterministic, Maestro person
   led, isAI agent led. Colour carries the distinction, not just labels. */
.wa-lane-1 { border-top-color: #8a8a96; }
.wa-lane-2 { border-top-color: var(--accent-purple); }
.wa-lane-3 { border-top-color: var(--accent); }
.wa-lane-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--hair2);
  border-radius: 999px;
  padding: 3px 8px;
  margin-bottom: 12px;
}
.wa-lane-k { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.wa-lane-t {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  margin: 3px 0 9px;
}
.wa-lane p { font-size: 0.85rem; line-height: 1.55; color: var(--text-tertiary); }

.wa-flow { display: block; width: 100%; height: 46px; }
.wa-flow-s { height: 30px; }

.wa-gate {
  text-align: center;
  padding: 16px 20px;
  border: 1px solid rgba(212, 187, 255, 0.34);
  border-radius: var(--radius-lg);
  background: rgba(168, 85, 247, 0.09);
}
.wa-gate-ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--accent-purple);
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.32);
}
.wa-gate-t {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.wa-gate p { font-size: 0.84rem; line-height: 1.5; color: var(--text-tertiary); }

.wa-engine {
  text-align: center;
  padding: 16px 20px;
  border: 1px solid rgba(255, 122, 61, 0.34);
  border-radius: var(--radius-lg);
  background: rgba(255, 122, 61, 0.08);
}
.wa-engine-t { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 3px; }
.wa-engine p { font-size: 0.84rem; line-height: 1.5; color: var(--text-tertiary); }

.wa-targets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.wa-targets span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--bg-card);
}

.wa-caps-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- parity pull quote ----------
   The line that closes the capability argument. It was a grey caption
   under a table and read as a footnote, so it is now the loudest thing
   in the section. */
.wa-quote {
  margin: 34px auto 0;
  max-width: 780px;
  padding: 30px 34px;
  text-align: center;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(28, 22, 53, 0.6), rgba(21, 16, 41, 0.4));
  position: relative;
}
.wa-quote::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(95deg, var(--accent), var(--accent-purple));
}
.wa-quote p {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text-primary);
}
.wa-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- what else is included ----------
   Ticked list rather than cards. Nine cards after a table and a quote
   would have been a third grid in a row, and the point here is breadth,
   which a list carries better than tiles. */
.wa-incl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; }
.wa-incl-i { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.wa-incl-tick {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #0d0a1a;
  background: rgb(var(--sec, 212, 187, 255));
  margin-top: 2px;
}
.wa-incl-i h3 { font-size: 0.96rem; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.wa-incl-i p { font-size: 0.85rem; line-height: 1.55; color: var(--text-tertiary); }

/* ---------- closing band ----------
   The last thing on the page has to close, not restate. */
.wa-close {
  max-width: 860px;
  margin: 0 auto;
  padding: 46px 44px 40px;
  text-align: center;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 122, 61, 0.3);
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(255, 122, 61, 0.13), transparent 62%),
    linear-gradient(180deg, rgba(34, 24, 50, 0.9), rgba(17, 12, 32, 0.9));
  position: relative;
  overflow: hidden;
}
.wa-close::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(95deg, var(--accent), var(--accent-purple));
}
.wa-close-k {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.wa-close h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.wa-close-p { font-size: 1.04rem; line-height: 1.6; color: var(--text-secondary); max-width: 56ch; margin: 0 auto 24px; }

.wa-close-pts {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  display: inline-grid;
  gap: 9px;
  text-align: left;
}
.wa-close-pts li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: 0.89rem; color: var(--text-tertiary); line-height: 1.5; }
.wa-close-pts svg { color: var(--accent); margin-top: 3px; }

.wa-close-act { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.wa-close-act .btn { text-decoration: none; }
.wa-close-alt {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 2px;
}
.wa-close-alt:hover { color: var(--text-primary); border-color: var(--text-tertiary); }

/* The offer restated on one line so nobody scrolls back for it. */
.wa-close-offer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 0;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.wa-close-offer span {
  font-size: 0.84rem;
  color: var(--text-tertiary);
  padding: 0 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.wa-close-offer span:last-child { border-right: 0; }
.wa-close-offer b { color: var(--accent); font-weight: 700; }

/* ---------- inline conversion points ----------
   One after each section that lands an argument. Deliberately not a
   full-width band: it reads as a next step in the flow rather than an
   interruption, so it does not break the reading rhythm. */
.wa-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 20px 26px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
}
.wa-cta-l { font-size: 1.02rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.wa-cta-s { margin-top: 4px; font-size: 0.82rem; color: var(--text-quaternary); line-height: 1.5; }
.wa-cta-b { flex: 0 0 auto; text-decoration: none; }

/* The offer CTA carries the claim, so it gets the accent frame. */
.wa-cta-hi {
  border-color: rgba(255, 122, 61, 0.32);
  background: linear-gradient(180deg, rgba(255, 122, 61, 0.08), rgba(21, 16, 41, 0.5));
}
.wa-cta-hi .wa-cta-s { color: var(--accent); }

/* ---------- offer panel ----------
   A dismissible corner card, not a modal. No backdrop, no scroll lock,
   nothing over the reading column. A blocking interstitial would risk
   the Google Ads landing page experience score and this buyer bounces
   off them. It carries the three numbers so it informs rather than
   shouts, which is what makes it read as considered instead of pushy. */
.wa-pop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 130;
  width: 336px;
  max-width: calc(100vw - 32px);
  padding: 24px 24px 18px;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(32, 24, 52, 0.985), rgba(16, 12, 28, 0.985));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px -18px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  overflow: hidden;
}
/* Brand rule across the top, the same marker the closing band uses. */
.wa-pop::before {
  content: ;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(95deg, var(--accent), var(--accent-purple));
}
.wa-pop[hidden] { display: none; }
.wa-pop.on { opacity: 1; transform: none; }

.wa-pop-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-quaternary);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.wa-pop-x:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); }
.wa-pop-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wa-pop-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 9px;
}
.wa-pop-h { font-size: 1.32rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--text-primary); margin-bottom: 8px; }
.wa-pop-p { font-size: 0.86rem; line-height: 1.55; color: var(--text-tertiary); margin-bottom: 16px; }

/* The three numbers, as a definition list. Informing beats asserting. */
.wa-pop-rows {
  margin: 0 0 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 9px;
}
.wa-pop-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.wa-pop-rows dt {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  white-space: nowrap;
}
.wa-pop-rows dd { margin: 0; font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); text-align: right; }
.wa-pop-rows > div:last-child dd { color: var(--accent); }

/* Self-contained rather than leaning on the shared .btn. The panel sits
   outside .gr and the inherited button styling did not survive the
   cascade there, so every property it needs is declared here. */
.wa-pop-b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #0a0a0a;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(255, 122, 61, 0.55);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.wa-pop-b:hover { background: var(--accent-hover); color: #0a0a0a; transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(255, 122, 61, 0.65); }
.wa-pop-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wa-pop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.wa-pop-no {
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-quaternary);
  cursor: pointer;
}
.wa-pop-no:hover { color: var(--text-secondary); }
.wa-pop-no:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-pop-foot span { font-size: 0.7rem; color: var(--text-quaternary); }

@media (max-width: 760px) {
  /* Sits above the sticky bar, never on top of it. */
  .wa-pop { right: 12px; left: 12px; bottom: 78px; width: auto; padding: 20px 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-pop { transition: none; transform: none; }
}

/* ---------- sticky mobile bar ----------
   Phone only. On a small screen the form is a long way from most of the
   page, so the action follows the reader. Hidden once the closing form
   is on screen so it never covers what it points at. */
.wa-sticky { display: none; }
@media (max-width: 760px) {
  .wa-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(13, 10, 26, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--hair2);
    transform: translateY(100%);
    transition: transform .28s var(--ease-out);
  }
  .wa-sticky.on { transform: none; }
  .wa-sticky[hidden] { display: none; }
  .wa-sticky-l {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary);
    font-weight: 600;
  }
  .wa-sticky-b { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
  /* Clear the bar so it never sits on the final privacy line. */
  .gr .sec.wa-closer-sec { padding-bottom: 96px; }
}

/* ---------- scroll reveal ----------
   Visible by default. The hidden start state exists only when JS has
   flagged the root, so a script failure never blanks the page. */
html.wa-anim .wa-rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--wa-i, 0) * .07s);
  will-change: opacity, transform;
}
html.wa-anim .wa-rv.wa-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .wa-caps, .wa-caps-3 { grid-template-columns: repeat(2, 1fr); }
  .wa-incl { grid-template-columns: repeat(2, 1fr); }
  .wa-lanes { grid-template-columns: 1fr; }
  /* Connectors only make sense while the lanes sit side by side. */
  .wa-flow { display: none; }
  .wa-gate, .wa-engine { margin-top: 14px; }
  .wa-closer { grid-template-columns: 1fr; gap: 30px; }
  .wa-offer { grid-template-columns: 1fr; gap: 30px; }
  .wa-offer::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), var(--accent-purple)); }
  .wa-oc { padding: 0 0 0 34px; text-align: left; }
  .wa-oc-node { top: 4px; left: 0; transform: none; }
  .wa-oc p { margin: 0; }
  .gr-hero-mon { max-width: none; }
}
@media (max-width: 760px) {
  .gr .sec { padding: 54px 0; }
  .gr .sec.wa-tight { padding: 44px 0; }
  .gr .head { margin-bottom: 28px; }
  .wa-caps, .wa-caps-3 { grid-template-columns: 1fr; }
  .wa-incl { grid-template-columns: 1fr; }
  .wa-close { padding: 32px 20px 28px; }
  .wa-close-offer span { border-right: 0; padding: 0 12px; }
  .wa-dia { padding: 18px 14px; }
  .wa-step { grid-template-columns: 34px 1fr; gap: 14px; padding: 18px; }
  .wa-step-n { width: 34px; height: 34px; border-radius: 10px; }
  .wa-herolinks { gap: 10px; }
  .wa-jump { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html.wa-anim .wa-rv { opacity: 1; transform: none; transition: none; }
  .gr-mon-grid i { transition: none; }
}

/* ---------- minimal footer ----------
   Legal only. The site footer's link directory and company-facts strip
   are exits from a single-conversion page. */
.wa-foot-bar { border-top: 1px solid var(--hair); padding: 22px 0; background: var(--bg-primary); }
.wa-foot-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-quaternary);
}
.wa-foot-in a { color: var(--text-tertiary); text-decoration: underline; }
.wa-foot-in a:hover { color: var(--text-secondary); }

/* ---------- say no more to ----------
   Two-line pairs, the pain struck through in muted grey and the answer
   directly under it in the accent. The strike is what makes the section
   read at a glance: you scan the greys, then the greens. Every pain is
   a documented complaint about incumbent products, so this section is
   doing competitive work without naming anyone. */
.wa-nm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 34px; }
.wa-nm-i {
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}
.wa-nm-no, .wa-nm-yes { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; }
.wa-nm-no {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-quaternary);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 122, 61, 0.55);
  text-decoration-thickness: 2px;
  margin-bottom: 12px;
}
.wa-nm-yes { font-size: 0.88rem; line-height: 1.55; color: var(--text-tertiary); }
.wa-nm-x, .wa-nm-tick {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
/* The cross is not decoration, it marks the thing being removed. */
.wa-nm-x { background: rgba(255, 122, 61, 0.12); border: 1px solid rgba(255, 122, 61, 0.3); color: var(--accent); }
.wa-nm-tick { background: rgba(45, 212, 167, 0.12); border: 1px solid rgba(45, 212, 167, 0.32); color: #2dd4a7; }
/* The strike must not carry into the answer line. */
.wa-nm-yes, .wa-nm-yes * { text-decoration: none; }

@media (max-width: 860px) {
  .wa-nm { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- clients strip ----------
   White band, one continuous left-to-right scroll, marks in full colour.

   The row is rendered twice and the track translates by exactly -50%,
   so the second copy lands where the first began and the loop has no
   seam. Edges are masked rather than hard-cut, otherwise logos appear
   to be sliced by the viewport.

   Motion pauses on hover so anyone who wants to read a specific mark
   can. That is the only hover behaviour left, the greyscale treatment
   is gone and every logo sits in full colour at rest. */
.wa-logos {
  background: #fff;
  padding: 32px 0 28px;
  position: relative;
  z-index: 2;
}
.wa-logos-k {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b78;
  margin-bottom: 22px;
}

.wa-marquee {
  overflow: hidden;
  /* fade the ends so marks are not sliced by the edge of the viewport */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.wa-marquee-track {
  display: flex;
  width: max-content;
  animation: wa-marquee 62s linear infinite;
}
.wa-marquee:hover .wa-marquee-track { animation-play-state: paused; }
@keyframes wa-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.wa-logos-row {
  list-style: none;
  margin: 0;
  padding: 0 28px 0 0;
  display: flex;
  align-items: center;
  gap: 56px;
  flex: none;
}
.wa-logos-row li { display: flex; align-items: center; flex: none; }
.wa-logos-row img {
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}
.wa-logos-w { font-size: 0.95rem; font-weight: 700; color: #4a4a55; white-space: nowrap; }

.wa-logos-foot {
  margin: 26px auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #7a7a86;
}

@media (max-width: 760px) {
  .wa-logos { padding: 24px 0 20px; }
  .wa-logos-row { gap: 36px; }
  .wa-logos-row img { height: 28px; max-width: 118px; }
  .wa-marquee-track { animation-duration: 44s; }
}

/* No motion: drop the duplicate row and let the single set wrap. */
@media (prefers-reduced-motion: reduce) {
  .wa-marquee { -webkit-mask-image: none; mask-image: none; }
  .wa-marquee-track { animation: none; width: auto; justify-content: center; }
  .wa-marquee-track ul[aria-hidden='true'] { display: none; }
  .wa-logos-row { flex-wrap: wrap; justify-content: center; gap: 20px 40px; padding: 0 24px; }
}

/* ---------- FAQ ----------
   Two columns, heading left and questions right. Deliberately not
   centred: it breaks a run of identically centred sections that was
   making the page read as a slide deck. */
.wa-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px 56px; align-items: start; }
.wa-faq-head { position: sticky; top: 96px; }
.wa-faq-head .t { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.14; }
.wa-faq-list { display: grid; gap: 10px; }

.wa-faq-i {
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 4px 20px;
  transition: border-color .2s;
}
.wa-faq-i[open] { border-color: var(--hair2); }
.wa-faq-i summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
}
.wa-faq-i summary::-webkit-details-marker { display: none; }
.wa-faq-i summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.wa-faq-ic {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(255, 122, 61, 0.1);
  border: 1px solid rgba(255, 122, 61, 0.28);
  transition: transform .25s var(--ease-out);
}
.wa-faq-i[open] .wa-faq-ic { transform: rotate(45deg); }
.wa-faq-i p {
  padding: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-tertiary);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .wa-faq-grid { grid-template-columns: 1fr; gap: 24px; }
  .wa-faq-head { position: static; }
}

/* ---------- free-text qualifier ----------
   Replaced the platform dropdown. A select could not be accurate without
   naming vendors, which this page avoids, and free text captures the
   platform, the scale and the actual question in one field. */
.gr-field textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--field-border, #726a85);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  /* 16px minimum: iOS Safari force-zooms the viewport on focus below it */
  font-size: 16px;
  line-height: 1.5;
  padding: 11px 13px;
  resize: vertical;
  min-height: 84px;
  transition: border-color .18s;
}
.gr-field textarea::placeholder { color: var(--text-quaternary); line-height: 1.45; }
.gr-field textarea:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 1px; border-color: transparent; }
.gr-field.wa-invalid textarea { border-color: var(--accent); }

/* ---------- practitioner voices in the no-more grid ----------
   The quote is what turns this section from assertion into evidence.
   Role and company size only: naming the individual or the product on a
   commercial page is a legal and reputational risk that buys nothing.
   Full attribution lives in SYMPHONY_COMPETITOR_PAIN_EVIDENCE.md. */
.wa-nm-q {
  margin: 0 0 16px;
  padding: 0 0 14px 16px;
  border-left: 2px solid var(--hair2);
  border-bottom: 1px solid var(--hair);
}
.wa-nm-q p {
  font-size: 1rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-secondary);
}
.wa-nm-q p::before { content: "\201C"; }
.wa-nm-q p::after  { content: "\201D"; }
.wa-nm-q figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quaternary);
}
.wa-nm-foot {
  margin: 26px auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-quaternary);
}

/* ---------- /scheduler-offer/ additions ----------
   The LinkedIn page reuses everything above. Only these three pieces
   are unique to it. */
.so-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.so-case {
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-left: 3px solid rgb(var(--sec, 74, 222, 128));
  border-radius: var(--radius-lg);
  padding: 22px 20px;
}
.so-case-sect {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--sec, 74, 222, 128));
  margin-bottom: 10px;
}
.so-case b { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 6px; }
.so-case p { font-size: 0.85rem; line-height: 1.55; color: var(--text-tertiary); }

/* The single deliberate route to the long-form page. */
.so-deeper {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.92rem;
  color: var(--text-tertiary);
}
.so-deeper a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 122, 61, 0.4);
  padding-bottom: 2px;
}
.so-deeper a:hover { color: var(--accent-hover); border-color: var(--accent); }

@media (max-width: 860px) { .so-cases { grid-template-columns: 1fr; } }

/* ============================================================
   J. COMPARISON PAGE (cm-), /alternatives/control-m/
   Draft, noindex. The only surface that names a competitor.

   Visual rule for this page: it must read as a document, not a
   pitch. A comparison page that looks like an ad gets discounted by
   the reader before the first claim lands. So: no accent-flooded
   panels, restrained type, the concession block styled at exactly
   the same weight as the switch block, and the sources list left
   plainly visible rather than tucked away.
   ============================================================ */
.cm-narrow { max-width: 780px; }
.cm-note { font-size: 0.82rem; line-height: 1.6; color: var(--text-tertiary); margin-top: 18px; }
.cm-note-c { text-align: center; margin-top: 22px; }

/* --- Verdict. Two columns, deliberately equal weight. If the "stay"
   card were quieter than the "switch" card the concession would read
   as decoration and take the credibility of the page with it. --- */
.cm-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.cm-v {
  padding: 30px 28px 32px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, 0.02);
}
.cm-v h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.cm-v ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.cm-v li {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-secondary);
}
.cm-v li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.cm-v-stay { border-top: 2px solid rgba(148, 163, 184, 0.55); }
.cm-v-stay li { color: var(--text-tertiary); }
.cm-v-switch { border-top: 2px solid var(--accent); }

/* --- Cost. Figures large, attribution always attached. The role and
   company size are the load-bearing part, not the number. --- */
.cm-cost { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cm-cost-i {
  padding: 26px 22px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, 0.02);
}
.cm-cost-i b {
  display: block;
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  line-height: 1.1;
}
.cm-cost-d { display: block; margin-top: 8px; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); }
.cm-cost-w {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.cm-shift, .cm-answer { margin-top: 22px; padding: 22px 24px; border-radius: var(--radius-lg, 16px); }
.cm-shift { border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.02); }
.cm-answer { border: 1px solid rgba(255, 122, 61, 0.28); background: rgba(255, 122, 61, 0.06); }
.cm-shift p, .cm-answer p { margin: 0; font-size: 0.95rem; line-height: 1.68; color: var(--text-secondary); }

/* --- The table. Rendered as a grid rather than a <table> so the
   three columns can restack cleanly on a phone, where a real table
   would either overflow or shrink to nothing.
   .cm-win marks the stronger side of a row, including the two rows
   where the stronger side is Control-M. --- */
.cm-table { border: 1px solid var(--hair); border-radius: var(--radius-lg, 16px); overflow: hidden; }
.cm-tr { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-top: 1px solid var(--hair); }
.cm-tr:first-child { border-top: 0; }
.cm-tr > div { padding: 18px 20px; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }
.cm-th > div {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.03);
}
.cm-k { font-weight: 600; color: var(--text-primary) !important; }
.cm-tr > .cm-a { border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.cm-win { background: rgba(255, 122, 61, 0.07); color: var(--text-primary) !important; }
.cm-th .cm-b { color: var(--accent); }

/* --- Voices. Quiet, typographic. Loud pull-quotes on a page about a
   named competitor read as an attack; the point is that these are
   somebody else's words, reported. --- */
.cm-voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cm-voice {
  margin: 0;
  padding: 24px 26px;
  border-left: 2px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0;
}
.cm-voice blockquote { margin: 0; }
.cm-voice p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-style: italic;
}
.cm-voice p::before { content: "\201C"; }
.cm-voice p::after { content: "\201D"; }
.cm-voice figcaption { margin-top: 14px; font-size: 0.78rem; color: var(--text-tertiary); }
.cm-balance {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--text-secondary);
}

/* --- Form section, copy left, form right. --- */
.cm-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cm-formgrid .t { margin-top: 14px; }
.cm-formgrid .lede { margin-top: 14px; }

/* --- Sources. Deliberately not hidden in a footnote: it is the first
   thing a sceptical evaluator looks for. --- */
.cm-src-h { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; }
.cm-src { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cm-src a {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
}
.cm-src a:hover { color: var(--text-secondary); border-color: var(--text-tertiary); }

@media (max-width: 1000px) {
  .cm-cost { grid-template-columns: repeat(2, 1fr); }
  .cm-formgrid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .cm-verdict { grid-template-columns: 1fr; }
  .cm-voices { grid-template-columns: 1fr; }
  /* The table restacks into three stacked cells per row. The header
     row is dropped and each cell is labelled inline instead, because
     a sticky three-column header is unreadable at this width. */
  .cm-th { display: none; }
  .cm-tr { grid-template-columns: 1fr; }
  .cm-tr > .cm-a { border-left: 0; border-right: 0; }
  .cm-tr > .cm-a, .cm-tr > .cm-b { border-top: 1px solid var(--hair); padding-top: 14px; }
  .cm-tr > .cm-a::before, .cm-tr > .cm-b::before {
    display: block;
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .cm-tr > .cm-a::before { content: "Control-M"; }
  .cm-tr > .cm-b::before { content: "Symphony"; color: var(--accent); }
  .cm-tr > div { padding-bottom: 14px; }
}
@media (max-width: 560px) {
  .cm-cost { grid-template-columns: 1fr; }
}

/* ============================================================
   K. SHARED BITS THAT WERE RELYING ON BROWSER DEFAULTS
   ============================================================ */

/* Offer terms line. Small, centred, clearly subordinate to the cards
   above it: it is a legal qualifier, not part of the pitch. */
.wa-terms {
  max-width: 660px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* Hero trust row on the offer page. Inline and separated by hairlines
   rather than a bulleted list, which is what it was rendering as. */
.wa-trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}
/* Pills, not hairline dividers. The hero column is narrow enough that
   the row wraps, and a leading divider on a wrapped item reads as a
   stray mark. */
.wa-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.wa-trust b { color: var(--text-primary); font-weight: 700; }

/* Four inclusions sit 2x2 on the offer page. At three across the
   fourth orphans onto its own row and the section looks unfinished. */
#so-what .wa-incl { grid-template-columns: repeat(2, 1fr); gap: 26px 44px; }
@media (max-width: 860px) { #so-what .wa-incl { grid-template-columns: 1fr; } }

/* ============================================================
   L. SCHEDULER OFFER PAGE (so-), /scheduler-offer/
   Post-conversion. One primary action, ten sections.

   The three diagrams here replace card grids because each argument is
   structural: layering, a lifecycle, and two tracks running in
   parallel. Cards would flatten all three into equal boxes and lose
   exactly the thing being argued.
   ============================================================ */

/* --- Hero. Copy left, the offer restated right as a receipt rather
   than an offer, because the reader has already accepted it. --- */
.so-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.so-hero-c { min-width: 0; }
.so-hero-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.so-hero-act .btn { text-decoration: none; }
.so-hero-foot { font-size: 0.8rem; color: var(--text-tertiary); }
.so-receipt {
  padding: 26px 26px 24px;
  border: 1px solid rgba(255, 122, 61, 0.26);
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 122, 61, 0.05);
}
.so-receipt-k {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 122, 61, 0.22);
}
.so-receipt ul { list-style: none; margin: 0; padding: 0; }
.so-receipt li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair);
}
.so-receipt li:last-child { border-bottom: 0; }
.so-receipt-w { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.so-receipt-t { grid-column: 1; font-size: 0.9rem; color: var(--text-secondary); }
.so-receipt-v {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}
.so-receipt-f { margin: 16px 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--text-tertiary); }

/* --- Node > Template > Job. Three boxes, connectors drawn with
   pseudo-elements so they always touch the box edge. --- */
.so-prim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 46px;
  padding: 32px 34px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
.so-prim-c h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; }
.so-prim-c p { margin: 0; font-size: 0.92rem; line-height: 1.68; color: var(--text-secondary); }
.so-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.so-chain li {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-left: 2px solid rgb(var(--sec, 212 187 255));
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
}
.so-chain li + li::before {
  content: "";
  position: absolute;
  left: 28px;
  top: -26px;
  width: 1px;
  height: 26px;
  background: var(--hair);
}
.so-chain li + li::after {
  content: "";
  position: absolute;
  left: 25px;
  top: -7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--text-tertiary);
}
.so-chain-k { display: block; font-size: 0.94rem; font-weight: 700; color: var(--text-primary); }
.so-chain-d { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--text-tertiary); }

/* --- The three layers. Stacked full-width bands. Layer 1 is muted
   because it is conceded ground; layers 2 and 3 carry the accent. The
   left rule is the visual argument, so it must not be decorative. --- */
.so-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.so-layer {
  position: relative;
  padding: 30px 34px 28px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(100deg, rgba(255, 122, 61, 0.07), var(--surface) 46%);
}
.so-layer-par {
  border-left-color: rgba(148, 163, 184, 0.5);
  background: var(--surface);
}
.so-layer-h { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.so-layer-n {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.so-layer-par .so-layer-n { color: var(--text-tertiary); }
.so-layer-ttl { flex: 1 1 320px; min-width: 0; }
.so-layer-ttl h3 { margin: 0; font-size: 1.22rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.so-layer-sub { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--text-tertiary); }
.so-layer-tag {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 61, 0.35);
  background: rgba(255, 122, 61, 0.1);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.so-layer-par .so-layer-tag {
  border-color: var(--hair);
  background: var(--surface-2);
  color: var(--text-tertiary);
}
/* Measure. The layer bodies are prose now, not feature lists, and at
   the full card width a line ran to about 140 characters. Capping the
   measure is the single biggest readability win on this page. */
.so-layer-b { margin: 0; max-width: 72ch; font-size: 0.96rem; line-height: 1.75; color: var(--text-secondary); }
.so-layer-m { max-width: 72ch; }
.so-prim-c p { max-width: 62ch; }
.so-layer-m {
  margin: 18px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--hair);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-tertiary);
}

/* --- Template lifecycle rail. Draft to Approved to Published, with
   the re-entry note below. A list cannot show a cycle. --- */
.so-life {
  margin: 0 0 40px;
  padding: 30px 34px 26px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
.so-life figcaption {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 26px;
}
.so-life-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.so-life-rail li { position: relative; padding: 0 20px 0 0; }
.so-life-rail li::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--hair);
}
.so-life-rail li:last-child::before { display: none; }
.so-life-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgb(var(--sec, 74 222 128));
  background: var(--ink-bg);
}
.so-life-k { display: block; margin-top: 16px; font-size: 0.98rem; font-weight: 700; color: var(--text-primary); }
.so-life-d { display: block; margin-top: 5px; padding-right: 18px; font-size: 0.84rem; line-height: 1.55; color: var(--text-tertiary); }
.so-life-f {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.so-life-f svg { flex: 0 0 auto; margin-top: 2px; color: rgb(var(--sec, 74 222 128)); }

/* --- Governance cards. Quiet on purpose: six loud cards would read
   as a feature dump. --- */
.so-guards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.so-guard {
  padding: 22px 22px 20px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
.so-guard h3 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.so-guard p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--text-tertiary); }
.so-identity {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --- The delta. Four numbered blocks, 2x2. --- */
.so-delta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.so-d {
  position: relative;
  padding: 28px 30px 26px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
.so-d-n {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.so-d h3 { margin: 0 0 9px; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.35; }
.so-d p { margin: 0; font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); }

/* --- Two-track migration diagram. The incumbent track fades out, the
   Symphony track fills in, and the marks are the cutover points. The
   fade IS the message, so it is not decoration. --- */
.so-tracks {
  margin: 0 0 44px;
  padding: 30px 34px 26px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
.so-track { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 18px; }
.so-track + .so-track { margin-top: 18px; }
.so-track-k { font-size: 0.8rem; font-weight: 600; color: var(--text-tertiary); text-align: right; }
.so-track-line { display: block; height: 5px; border-radius: 3px; }
.so-track-a .so-track-line { background: linear-gradient(90deg, rgba(148, 163, 184, 0.75), rgba(148, 163, 184, 0.06)); }
.so-track-b .so-track-line { background: linear-gradient(90deg, rgba(45, 212, 167, 0.1), rgba(45, 212, 167, 0.85)); }
.so-track-b .so-track-k { color: var(--text-primary); }
/* Cutover points sit ON the Symphony track, not on a separate row
   below it. Floating them underneath read as stray dots and lost the
   connection to the thing they mark. */
.so-track-b { position: relative; }
.so-track-marks {
  position: absolute;
  left: 148px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}
.so-track-marks span {
  justify-self: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-bg);
  border: 2px solid rgba(45, 212, 167, 0.9);
}
.so-tracks figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

/* --- Close. Copy left, booking right. --- */
.so-close { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: start; }
.so-close-h { margin-top: 14px; }
.so-close-p { margin-top: 14px; }
.so-deeper-l { justify-content: flex-start; text-align: left; margin-top: 28px; }

/* ------------------------------------------------------------
   Responsive. Media queries only where the intent genuinely
   changes, per the responsive rulebook layer order.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .so-guards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  /* The hero receipt goes below the copy, never above the H1. That
     inversion is the site-wide bug this page must not reproduce. */
  .so-hero { grid-template-columns: 1fr; gap: 34px; }
  .so-prim { grid-template-columns: 1fr; gap: 30px; }
  .so-close { grid-template-columns: 1fr; gap: 34px; }
  .so-delta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .so-life-rail { grid-template-columns: 1fr; gap: 22px; }
  /* Vertical rail on a phone: the connector rotates rather than
     disappearing, so the sequence still reads as a sequence. */
  .so-life-rail li { padding: 0 0 0 26px; }
  .so-life-rail li::before { left: 6px; right: auto; top: 14px; bottom: -22px; width: 1px; height: auto; }
  .so-life-dot { position: absolute; left: 0; top: 3px; }
  .so-life-k { margin-top: 0; }
  .so-life-d { padding-right: 0; }
  .so-layer { padding: 24px 22px 22px; }
  .so-layer-h { gap: 10px; }
  .so-layer-tag { order: -1; }
  .so-guards { grid-template-columns: 1fr; }
  .so-track { grid-template-columns: 96px 1fr; gap: 12px; }
  .so-track-marks { left: 108px; }
  .so-receipt { padding: 22px 20px 20px; }
}

/* ============================================================
   M. ALTERNATING SECTION BACKGROUNDS, offer page
   White sections against the deep violet gradient used on the LoB
   pages.

   HOW THIS WORKS, and why it is not per-component overrides:
   every so- component already draws from four semantic values,
   --text-primary / --text-secondary / --text-tertiary / --hair, plus
   two surface tokens introduced for this. A light section therefore
   only has to redefine those six. Nothing inside the components
   changes, and any component added later inherits the behaviour for
   free. Overriding each card individually would have meant touching
   about thirty rules and would break the next time one is added.

   CONTRAST, per UIUX rulebook R1 (WCAG 2.1 AA, 4.5:1 body text).
   Measured against #ffffff:
     --text-primary   #14101f   18.6:1
     --text-secondary #443d55    9.4:1
     --text-tertiary  #635c78    5.6:1
   The brand orange #FA813E is 2.6:1 on white and FAILS as small text,
   so light sections switch the eyebrow and small accents to the brand
   violet #47287D (10.4:1). The CTA button keeps its orange, because a
   filled button is a UI component judged on its own fill, not on the
   page background, and its white-on-orange label is unaffected.
   ============================================================ */

/* Surface tokens. Dark is the default so every existing dark section
   is unchanged by this block. */
.gr {
  --surface: rgba(255, 255, 255, 0.02);
  --surface-2: rgba(255, 255, 255, 0.03);
  --ink-bg: #0d0a1a;
}

/* --- Dark sections: the LoB deep-violet gradient, two radials over
   the base rather than a flat fill, so the band has depth. --- */
/* Selectors are .gr .sec.so-* rather than bare .so-*, because
   .gr .sec.wa-sec already sets background-image at 0-3-0 and a bare
   class would silently lose to it. This cost a build: the cards
   flipped to white and the section ground stayed dark, leaving dark
   headings on a dark band. */
.gr .sec.so-dark {
  position: relative;
  background-color: #0f0c1a;
  background-image:
    radial-gradient(58% 60% at 62% 34%, rgba(152, 42, 243, 0.16), transparent 70%),
    radial-gradient(46% 50% at 22% 84%, rgba(250, 129, 62, 0.07), transparent 72%);
}

/* --- Light sections --- */
.gr .sec.so-alt {
  --text-primary: #14101f;
  --text-secondary: #443d55;
  --text-tertiary: #635c78;
  --hair: rgba(71, 40, 125, 0.16);
  --surface: rgba(71, 40, 125, 0.035);
  --surface-2: rgba(71, 40, 125, 0.06);
  --ink-bg: #ffffff;
  color: var(--text-primary);
  /* Not pure white. Cards on this ground are #ffffff, and on a pure
     white section they lost their edges entirely, leaving borders
     doing all the work. A faint violet tint keeps the section reading
     as white while letting the cards sit on top of it. */
  background-color: #f6f3fb;
  background-image: linear-gradient(180deg, #f8f6fc 0%, #f2eef9 100%);
}

/* Headings do not inherit colour from the section, they are set in
   campaign.css, so they are re-pointed here. */
.gr .so-alt h2.t,
.so-alt h3,
.so-alt b { color: var(--text-primary); }
.gr .so-alt .lede { color: var(--text-secondary); }

/* Eyebrow and its hairline swap to brand violet for contrast. */
.gr .so-alt .eyebrow { color: #47287d; }
.gr .so-alt .eyebrow::before,
.gr .so-alt .head.center .eyebrow::after { background: #47287d; }
/* .wa-sec sets the eyebrow from --sec, which is tuned for dark. */
.gr .so-alt.wa-sec .head .eyebrow { color: #47287d; }
.gr .so-alt.wa-sec .head.center .eyebrow::after { background: #47287d; }

/* Cards sit on white, so they need a real border rather than the
   near-invisible hairline that works over a dark ground, plus a soft
   lift so they read as raised rather than as outlined boxes. */
.so-alt .so-guard,
.so-alt .so-d,
.so-alt .so-case,
.so-alt .wa-step,
.so-alt .so-prim,
.so-alt .so-life,
.so-alt .so-tracks {
  background: #ffffff;
  border-color: rgba(71, 40, 125, 0.14);
  box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 8px 24px -16px rgba(20, 16, 31, 0.18);
}

/* The offer cards carry their own accent treatment; keep the value
   readable and let the accent stay orange, which is large text. */
.so-alt .wa-oc { background: #ffffff; border-color: rgba(71, 40, 125, 0.14); }
.so-alt .wa-oc p { color: var(--text-secondary); }
.so-alt .wa-oc-when,
.so-alt .wa-oc-what { color: var(--text-tertiary); }

/* Step numerals were a dark chip with a light numeral. */
.so-alt .wa-step-n {
  background: rgba(71, 40, 125, 0.07);
  border-color: rgba(71, 40, 125, 0.18);
  color: #47287d;
}

/* Inclusion ticks. */
.so-alt .wa-incl-tick {
  background: rgba(71, 40, 125, 0.08);
  border-color: rgba(71, 40, 125, 0.2);
  color: #47287d;
}

/* Lifecycle rail: the dot's centre is a knockout of the page ground,
   so it follows --ink-bg and needs nothing else. The rail and the
   ring colour do need re-pointing, since green on white is 1.9:1. */
.so-alt .so-life-dot { border-color: #1a8f63; }
.so-alt .so-life-f svg { color: #1a8f63; }

/* Migration tracks: the incumbent line has to darken to stay visible
   on white, and the Symphony teal darkens for the same reason. */
.so-alt .so-track-a .so-track-line {
  background: linear-gradient(90deg, rgba(99, 92, 120, 0.65), rgba(99, 92, 120, 0.08));
}
.so-alt .so-track-b .so-track-line {
  background: linear-gradient(90deg, rgba(26, 143, 99, 0.12), rgba(26, 143, 99, 0.9));
}
.so-alt .so-track-marks span { border-color: rgba(26, 143, 99, 0.9); }

/* Proof cards keep their coloured left rule; darken it for white. */
.so-alt .so-case { border-left-color: #1a8f63; }
/* The sector label is small text, and #1a8f63 measures 4.08:1 on
   white, which fails AA. The rule beside it is a graphic and may stay
   at the lighter green, which only needs 3:1. */
.so-alt .so-case-sect { color: #15774f; }

/* The three layers. Layer 1 stays the muted, conceded one; layers 2
   and 3 keep the accent wash, lightened so it tints rather than
   floods. */
.so-alt .so-layer {
  background: linear-gradient(100deg, rgba(255, 122, 61, 0.06), #ffffff 46%);
  border-color: rgba(71, 40, 125, 0.14);
  box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 8px 24px -16px rgba(20, 16, 31, 0.18);
}
.so-alt .so-layer-par { background: #ffffff; border-left-color: rgba(99, 92, 120, 0.45); }
.so-alt .so-layer-n { color: #b8410a; }
.so-alt .so-layer-tag { border-color: rgba(184, 65, 10, 0.32); background: rgba(255, 122, 61, 0.09); color: #b8410a; }
.so-alt .so-layer-par .so-layer-tag { border-color: rgba(71, 40, 125, 0.16); background: rgba(71, 40, 125, 0.05); color: var(--text-tertiary); }

/* Small numerals and accent text: orange fails on white at this size,
   so it drops to a darker burnt orange that holds the brand read. */
.so-alt .so-d-n { color: #b8410a; }
.so-alt .so-chain li { border-left-color: #47287d; }

/* The terms line and any accent panel. */
.so-alt .wa-terms { color: var(--text-tertiary); }

/* Section dividers. Adjacent bands of the same tone would merge, so
   each light band gets a hairline top and bottom. */
.so-alt + .so-alt { border-top: 1px solid rgba(71, 40, 125, 0.1); }

/* ============================================================
   N. OFFER PAGE REV 3
   Hero offer boxes, the scope comparison, the three-step flow, the
   governance icons, and migration as one workflow.

   Supersedes parts of blocks L and M. Rules in those blocks that are
   no longer referenced by the template (so-receipt, so-prim, so-chain,
   so-layer, so-d, so-tracks) are dead and can be deleted the next time
   this file is touched. They are left in place for now because the
   sibling comparison page still uses some of the same tokens.
   ============================================================ */

/* The site nav is fixed and taller than the old landing bar, so the
   hero needs clearance it did not need before. */
.so-page { padding-top: 0; }

/* --- Hero layout. Copy left, offer right. --- */
.so-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.so-hero-c { min-width: 0; }
.so-hero-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.so-hero-act .btn { text-decoration: none; }
.so-hero-foot { font-size: 0.8rem; color: var(--text-tertiary); }

/* --- The offer, two boxes.
   Carousel slide 2 has a white card with a gradient band across the
   middle carrying the value. That band is the thing a reader
   recognises from the ad, so it is reproduced rather than
   reinterpreted. Two boxes, never three. --- */

/* The rev3 offer boxes (white card, gradient band, .so-box-v) are
   superseded by the rev5 offer card in block P and were deleted here.
   Leaving them in place kept a white background on .so-box, which put
   white labels on a white card inside the dark offer panel. */



/* --- The scope comparison.
   A grid rather than a <table> so the three columns can restack on a
   phone. Short phrases only. If a cell needs a paragraph it belongs
   somewhere else on the page. --- */
.so-cmp { border: 1px solid var(--hair); border-radius: var(--radius-lg, 16px); overflow: hidden; background: var(--ink-bg); }
.so-cmp-h, .so-cmp-r { display: grid; grid-template-columns: 0.85fr 1fr 1.35fr; }
.so-cmp-r { border-top: 1px solid var(--hair); }
.so-cmp-h > div, .so-cmp-r > div { padding: 20px 22px; font-size: 0.9rem; line-height: 1.6; }
.so-cmp-h > div {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--text-tertiary);
}
.so-cmp-h .so-cmp-b { color: var(--accent); }
.so-cmp-k { font-weight: 700; color: var(--text-primary); }
.so-cmp-a { color: var(--text-tertiary); border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.so-cmp-b { color: var(--text-secondary); background: rgba(255, 122, 61, 0.05); }
/* Inline column labels, shown only once the grid restacks. */
.so-cmp-lbl { display: none; }
/* The cell text is its own block so the tag below always starts on a
   new line. As inline content it wrapped up beside the last words of
   a short row and read as part of the sentence. */
.so-cmp-a > span, .so-cmp-b > span:not(.so-cmp-tag):not(.so-cmp-lbl) { display: block; }
.so-cmp-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 61, 0.3);
  background: rgba(255, 122, 61, 0.09);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.so-cmp-foot {
  max-width: 720px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* --- Three-step flow, used by the platform and price sections.
   Horizontal, with the connector drawn between cards so the sequence
   is visible without a separate diagram. --- */
.so-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.so-fs {
  position: relative;
  padding: 26px 24px 24px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
/* Connector. Sits in the gap, touching both card edges. */
.so-fs + .so-fs::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 44px;
  width: 20px;
  height: 1px;
  background: var(--hair);
}
.so-fs + .so-fs::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 41px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid var(--text-tertiary);
}
.so-fs-n {
  display: block;
  margin-bottom: 12px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.so-fs h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.so-fs p { margin: 0; font-size: 0.87rem; line-height: 1.62; color: var(--text-secondary); }

.so-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.so-note { padding: 20px 22px; border-left: 2px solid var(--hair); }
.so-note h3 { margin: 0 0 6px; font-size: 0.93rem; font-weight: 700; color: var(--text-primary); }
.so-note p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--text-tertiary); }

/* --- Governance icons. The six cards were a wall of text without
   them. Icon tint follows the section accent. --- */
.so-guard { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: start; }
.so-guard-ic {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 122, 61, 0.28);
  background: rgba(255, 122, 61, 0.1);
  color: #b8410a;
}
.so-guard h3 { align-self: center; }
.so-guard p { grid-column: 2; }

/* Warm section. The orange tint sits at about 15% of the band, which
   is enough to colour it without the cards having to fight it. */
.gr .sec.so-alt.so-warm {
  background-image:
    radial-gradient(90% 60% at 50% -10%, rgba(255, 122, 61, 0.15), transparent 60%),
    linear-gradient(180deg, #fbf7f5 0%, #f6f1f8 100%);
}
.so-alt.so-warm .so-life-dot { border-color: #b8410a; }
.so-alt.so-warm .so-life-f svg { color: #b8410a; }

/* --- Migration as one workflow.
   Four steps across, with both platform tracks drawn underneath the
   same steps they describe. Previously this was a track diagram plus
   four stacked cards, which said the same thing twice and doubled the
   scroll. --- */
.so-mig {
  margin: 0;
  padding: 32px 34px 26px;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg, 16px);
  background: var(--ink-bg);
}
.so-mig-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.so-mig-steps li { position: relative; padding-right: 6px; }
.so-mig-steps li + li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--text-tertiary);
  border-right: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
  opacity: .7;
}
.so-mig-n {
  display: block;
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.so-mig-steps h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.so-mig-steps p { margin: 0; font-size: 0.83rem; line-height: 1.55; color: var(--text-tertiary); }

.so-mig-tracks { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); display: grid; gap: 12px; }
.so-mig-t { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 16px; }
.so-mig-lbl { font-size: 0.78rem; font-weight: 600; text-align: right; color: var(--text-tertiary); }
.so-mig-line { display: block; height: 5px; border-radius: 3px; }
/* The incumbent thins out across the four steps, Symphony fills in.
   The crossover is the message, so this is not decoration. */
.so-mig-a .so-mig-line { background: linear-gradient(90deg, rgba(99, 92, 120, 0.7) 0%, rgba(99, 92, 120, 0.55) 45%, rgba(99, 92, 120, 0.06) 100%); }
.so-mig-b .so-mig-line { background: linear-gradient(90deg, rgba(26, 143, 99, 0.14) 0%, rgba(26, 143, 99, 0.5) 45%, rgba(26, 143, 99, 0.92) 100%); }
.so-mig-b .so-mig-lbl { color: var(--text-primary); }
.so-mig figcaption { margin-top: 18px; text-align: center; font-size: 0.8rem; color: var(--text-tertiary); }

/* --- Close --- */
.so-close { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: start; }
.so-close-h { margin-top: 14px; }
.so-close-p { margin-top: 14px; }
.so-deeper-l { justify-content: flex-start; text-align: left; margin-top: 28px; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .so-mig-steps { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  .so-mig-steps li:nth-child(3)::before { display: none; }
}
@media (max-width: 960px) {
  .so-hero { grid-template-columns: 1fr; gap: 38px; }
  .so-close { grid-template-columns: 1fr; gap: 34px; }
  .so-flow { grid-template-columns: 1fr; gap: 14px; }
  /* Vertical stack, so the connector rotates rather than vanishing. */
  .so-fs + .so-fs::before { left: 34px; top: -14px; width: 1px; height: 14px; }
  .so-fs + .so-fs::after {
    left: 31px; top: -5px;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 5px solid var(--text-tertiary);
    border-bottom: 0;
  }
  .so-notes { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  /* The comparison restacks into label plus two stacked cells. The
     header row is dropped and each cell carries its own label, because
     a three-column header is unreadable at this width. */
  .so-cmp-h { display: none; }
  .so-cmp-r { grid-template-columns: 1fr; }
  .so-cmp-a { border-left: 0; border-right: 0; border-top: 1px solid var(--hair); }
  .so-cmp-lbl {
    display: block;
    margin-bottom: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .so-cmp-b .so-cmp-lbl { color: var(--accent); }
  .so-boxes { grid-template-columns: 1fr; }
  .so-mig { padding: 24px 20px 20px; }
  .so-mig-steps { grid-template-columns: 1fr; }
  .so-mig-steps li + li::before { display: none; }
  .so-mig-t { grid-template-columns: 96px 1fr; gap: 12px; }
}

/* ============================================================
   O. OFFER PAGE REV 4
   Page sub-nav, comparison label fix, orange logo kicker, and the
   full case-study grid on a dark band.
   ============================================================ */

/* --- BUG FIX. The block rule added for the tag wrapping was written
   as `.so-cmp-a > span`, which is 0-2-0 and beat `.so-cmp-lbl`'s
   0-1-0 `display: none`. The result was "What the renewal covers"
   repeated inside every cell of that column on desktop. Both columns
   now exclude the label explicitly. --- */
.so-cmp-a > span:not(.so-cmp-lbl),
.so-cmp-b > span:not(.so-cmp-tag):not(.so-cmp-lbl) { display: block; }
.so-cmp-a > .so-cmp-lbl, .so-cmp-b > .so-cmp-lbl { display: none; }
@media (max-width: 760px) {
  .so-cmp-a > .so-cmp-lbl, .so-cmp-b > .so-cmp-lbl { display: block; }
}

/* --- Page sub-nav. Sticky beneath the site nav. The site nav orients
   the reader in the site, this one orients them in the page, and on a
   long page it is the only thing that says how much is left. --- */
.so-subnav {
  position: sticky;
  top: 68px;
  z-index: 90;
  background: rgba(13, 10, 26, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(168, 85, 247, 0.16);
}
.so-subnav-in {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 54px;
}
.so-subnav-brand {
  /* Shrinkable, and dropped below 1180px. As flex: 0 0 auto it
     pushed the row wider than the wrap and clipped off the left. */
  flex: 0 1 auto;
  white-space: nowrap;
  font-size: 0.74rem;
  color: var(--text-tertiary);
  padding-right: 20px;
  border-right: 1px solid rgba(168, 85, 247, 0.2);
}
.so-subnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.so-subnav-links::-webkit-scrollbar { display: none; }
.so-subnav-links a {
  display: block;
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  white-space: nowrap;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color .18s, background .18s;
}
.so-subnav-links a:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
/* Current section. Marked with colour AND an underline, never colour
   alone, per WCAG 1.4.1. */
.so-subnav-links a.on { color: var(--accent); }
.so-subnav-links a.on::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.so-subnav-cta {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 0.82rem;
  text-decoration: none;
}
@media (max-width: 1180px) { .so-subnav-brand { display: none; } }
@media (max-width: 900px) {
  .so-subnav { top: 60px; }
  .so-subnav-cta { display: none; }
  .so-subnav-in { height: 48px; gap: 0; }
}

/* The hero clears the site nav plus the sub-nav. */

/* Anchor offset, so a jump does not land under the two fixed bars. */
.so-page [id] { scroll-margin-top: 130px; }

/* --- Logo strip kicker in brand orange. --- */
.wa-logos-k { color: var(--accent) !important; }

/* --- Full case studies on the dark proof band. The gr-case component
   comes from campaign.css and is built for dark, so it needs only the
   accent rule and the stat grid at three across. --- */
#so-proof .gr-cases { grid-template-columns: repeat(3, 1fr); gap: 18px; }
#so-proof .gr-case { background: var(--surface); }
#so-proof .gr-case-st { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
@media (max-width: 980px) { #so-proof .gr-cases { grid-template-columns: 1fr; } }

/* ============================================================
   P. OFFER PAGE REV 5
   The offer redesigned as an offer, the light form theme, the pull
   quote, and the What Symphony Is band.
   ============================================================ */

/* --- THE OFFER.
   The previous build reproduced carousel slide 2 literally: white
   card, gradient band, sentence in the middle. On a slide that works
   because it is the whole frame. On a page it read as a slide pasted
   in, and the value was carried by a sentence rather than by a figure.
   This version leads with the two numbers a reader should leave with,
   Zero and 50%, and wraps both in one offer card with a badge, so it
   reads as a deal rather than as two facts. --- */
.so-offer-card {
  position: relative;
  padding: 30px 28px 26px;
  border-radius: 20px;
  border: 1px solid rgba(255, 122, 61, 0.34);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 122, 61, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(38, 24, 56, 0.92), rgba(22, 16, 36, 0.96));
  box-shadow: 0 30px 70px -34px rgba(255, 122, 61, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.so-offer-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(100deg, #fa813e, #d05ce8);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(250, 129, 62, 0.8);
}
.so-offer-k {
  display: block;
  margin: 4px 0 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.so-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.so-box {
  padding: 4px 18px 6px;
  text-align: center;
}
/* Divider between the two halves, not a border on each, so they read
   as one offer split in two rather than two separate cards. */
.so-box + .so-box { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.so-box-when {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.so-box-big {
  display: block;
  margin-top: 10px;
  font-size: clamp(2.6rem, 2.1rem + 2.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  background: linear-gradient(100deg, #ffb27a 0%, #fa813e 42%, #d05ce8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.so-box-unit {
  display: block;
  margin-top: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
}
.so-box p {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.so-offer-foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.so-terms { margin: 12px 0 0; text-align: center; font-size: 0.72rem; color: var(--text-tertiary); }

/* --- WHAT SYMPHONY IS --- */
.so-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.so-cap {
  padding: 22px 20px;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
.so-cap h3 { margin: 0 0 8px; font-size: 0.96rem; font-weight: 700; color: var(--text-primary); }
.so-cap p { margin: 0; font-size: 0.84rem; line-height: 1.58; color: var(--text-tertiary); }

/* --- Proof strip.
   A light panel sitting on the dark band. On the dark ground the
   figures competed with the capability cards directly above and the
   whole section read as one grey mass. Lifting it out gives the
   section a floor and makes the numbers the last thing read.

   The orange is #b8410a, not the brand #FA813E: the brand orange
   measures 2.5:1 on white and fails AA even at display size, where
   this passes at 5.5:1 and still reads unmistakably orange. --- */
.so-stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 26px 18px;
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(180deg, #ffffff 0%, #f7f4fb 100%);
  box-shadow: 0 22px 60px -30px rgba(0, 0, 0, 0.7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
  align-items: center;
}
/* Hairline dividers between cells, not borders on each, so the row
   reads as one panel split four ways. */
.so-stats li { position: relative; }
.so-stats li + li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 42px;
  background: rgba(71, 40, 125, 0.14);
}
.so-stats b {
  display: block;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #b8410a;
}
.so-stats span { display: block; margin-top: 6px; font-size: 0.8rem; line-height: 1.4; color: #443d55; }
/* The Gartner cell carries no label: the mark already says Gartner
   Peer Insights, so a caption repeating it was noise. */
.so-stat-logo {
  display: block;
  height: 28px;
  width: auto;
  /* Sits under the figure, in the slot the other three cells use for
     their label, so all four share a baseline. */
  margin: 8px auto 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.so-stat-inline { color: #b8410a; font-weight: 800; }

/* --- PULL QUOTE.
   This sentence is the whole argument compressed, so it was wrong as
   a grey caption under the table. --- */
.so-quote {
  max-width: 820px;
  margin: 34px auto 0;
  padding: 26px 30px 26px 34px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0;
  background: rgba(255, 122, 61, 0.07);
}
.so-quote p {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.so-quote p::before { content: "\201C"; }
.so-quote p::after { content: "\201D"; }

/* --- LIGHT FORM THEME.
   The closing section is a light band but the form card, the tabs and
   every field came from campaign.css, which is built for dark. The
   result was a near-black card dropped onto white with grey-on-grey
   labels. Everything below re-points those components for the light
   ground. --- */
.so-alt .gr-card {
  background: #ffffff;
  border-color: rgba(71, 40, 125, 0.14);
  box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 18px 44px -26px rgba(20, 16, 31, 0.28);
}
.so-alt .gr-form-h { color: var(--text-primary); }
.so-alt .gr-form-s { color: var(--text-secondary); }
.so-alt .gr-field label { color: var(--text-primary); }
.so-alt .gr-field input,
.so-alt .gr-field textarea,
.so-alt .gr-field select {
  background: #fbfaFe;
  border-color: rgba(71, 40, 125, 0.22);
  color: var(--text-primary);
}
.so-alt .gr-field input::placeholder,
.so-alt .gr-field textarea::placeholder { color: #8b849c; }
.so-alt .gr-field input:focus,
.so-alt .gr-field textarea:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.16);
}
.so-alt .gr-priv, .so-alt .wa-foot { color: var(--text-tertiary); }
.so-alt .gr-priv a { color: #b8410a; }
.so-alt .wa-key label { color: #b8410a; }

/* Tabs. The unselected tab was light-on-dark and vanished. */
.so-alt .wa-tabs {
  background: rgba(71, 40, 125, 0.06);
  border: 1px solid rgba(71, 40, 125, 0.12);
}
.so-alt .wa-tab { color: var(--text-secondary); }
.so-alt .wa-tab:hover { color: var(--text-primary); }
.so-alt .wa-tab[aria-selected="true"] { color: #ffffff; }
.so-alt .wa-linkbtn { color: #b8410a; }
.so-alt .gr-success h3 { color: var(--text-primary); }
.so-alt .gr-success p { color: var(--text-secondary); }
/* The Calendly widget paints its own dark ground from the URL params,
   so it gets a surround that does not fight it. */
.so-alt .wa-cal { background: #14101f; border-radius: 12px; overflow: hidden; }
.so-alt .wa-cal-load { color: #cfc9dd; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .so-caps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .so-caps { grid-template-columns: 1fr; }
  .so-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .so-boxes { grid-template-columns: 1fr; }
  .so-box + .so-box {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    margin-top: 20px;
    padding-top: 20px;
  }
  .so-quote { padding: 22px 20px 22px 22px; }
  .so-quote p { font-size: 1.04rem; }
}

/* ============================================================
   Q. PAGE NAV, built on the site nav's own classes
   .nav / .nav-inner / .nav-logo / .nav-links / .nav-actions /
   .nav-burger all come from styles.css, so this page inherits the
   site's bar height (--nav-h 64px), its transparent-to-blurred scroll
   behaviour, its 1024px collapse breakpoint and its hamburger
   animation. Only the contents differ. Nothing below re-implements
   what the site already defines.
   ============================================================ */

/* Section links. Same type scale as the site nav, with room for the
   current-section marker underneath.

   NO BRAND LINE IN THE BAR. It was tried beside the logo and cost
   about 300px, which pushed the seven links onto a second row inside
   the 1200px .nav-inner. The attribution lives in the drawer, in the
   site footer, and in the opening line of the What Symphony Is
   section, so nothing is lost by leaving it out here. */
.so-nav-links { gap: 26px; }
.so-nav-links a { position: relative; padding: 6px 0; white-space: nowrap; }
.so-nav-links a.on { color: var(--accent); }
/* Colour is never the only signal, per WCAG 1.4.1. */
.so-nav-links a.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.so-nav-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* The bar is fixed and opaque once scrolled, so the hero clears it. */
/* Tight to the nav. The hero has no eyebrow now, so the H1 is the
   first thing on the page and there is nothing to breathe above it. */
/* .gr-hero ships as `padding: 104px 0 0`, so the bottom is zero and
   the band ended flush against the logo strip.

   Padding only, no min-height. A viewport-height minimum was tried and
   left too much dead space under the offer card on a short window,
   because the band then stretched past what its content needed. The
   band is now exactly its content plus this padding, which behaves the
   same at every viewport height. */
.so-page .gr-hero { padding: calc(var(--nav-h, 64px) + 34px) 0 72px; }
.so-page [id] { scroll-margin-top: calc(var(--nav-h, 64px) + 16px); }

/* --- Mobile drawer.
   Seven items, so a flat list is the correct pattern here. Rules
   followed: it scrolls, the CTA is pinned inside the safe area, and
   the body is locked behind it by .so-locked. --- */
.so-drawer {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-h, 64px);
  max-height: calc(100dvh - var(--nav-h, 64px));
  display: flex;
  flex-direction: column;
  background: rgba(13, 10, 26, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.so-drawer.on { transform: none; opacity: 1; }
.so-drawer[hidden] { display: none; }
.so-drawer-list {
  list-style: none;
  margin: 0;
  padding: 8px 20px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
}
.so-drawer-list a {
  display: flex;
  align-items: center;
  /* 48px, comfortably past the 24px minimum and the 44px preference. */
  min-height: 48px;
  padding: 4px 4px;
  font-size: 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.so-drawer-list li:last-child a { border-bottom: 0; }
.so-drawer-list a.on { color: var(--accent); }
.so-drawer-foot {
  flex: 0 0 auto;
  padding: 14px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(13, 10, 26, 0.98);
}
.so-drawer-foot .btn { text-decoration: none; }
.so-drawer-brand { display: block; margin-top: 12px; text-align: center; font-size: 0.74rem; color: var(--text-tertiary); }
@media (min-width: 1025px) { .so-drawer { display: none; } }

/* Body lock while the drawer is open. Position fixed rather than
   overflow hidden, because iOS Safari ignores the latter. */
body.so-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }


/* The rating sits inline with the label under the mark, so the cell
   still carries a figure without competing with the logo above it. */
.so-stat-inline { color: var(--text-primary); font-weight: 800; }

/* Status pills in the renewal column. "Out of scope" was buried in a
   sentence and read as prose rather than as the verdict on that row.
   It now sits in a pill matching the Symphony column's tags, so a
   reader scanning the table gets the answer per row without reading.
   Colour is a reinforcement only; the pill text carries the meaning
   on its own, per WCAG 1.4.1. */
.so-cmp-a .so-cmp-tag { border-color: rgba(99, 92, 120, 0.34); background: rgba(99, 92, 120, 0.1); color: var(--text-tertiary); }
.so-cmp-tag-no   { border-color: rgba(179, 38, 30, 0.32) !important; background: rgba(179, 38, 30, 0.09) !important; color: #b3261e !important; }
.so-cmp-tag-part { border-color: rgba(146, 94, 10, 0.32) !important; background: rgba(146, 94, 10, 0.09) !important; color: #7a4d05 !important; }
/* The A cell text and its pill both need to be blocks so the pill
   always starts on its own line. */
.so-cmp-a > span:not(.so-cmp-lbl):not(.so-cmp-tag) { display: block; margin-bottom: 10px; }

/* The rev4 rule `.so-cmp-a > span:not(.so-cmp-lbl) { display: block }`
   also matches the status pill, which stretched it across the whole
   column. The pill has to stay inline-block so it hugs its label. */
/* Must be `span.so-cmp-tag`, not `.so-cmp-tag`: the rev4 rule is
   `.so-cmp-a > span:not(.so-cmp-lbl)` at 0-2-1, so a 0-2-0 selector
   loses to it regardless of source order. */
.so-cmp-a > span.so-cmp-tag { display: inline-block; }

/* Pills hug their label at every width. `display: inline-block` alone
   is not enough: when the row restacks the cell can become a grid or
   flex parent, and an inline-block child of one of those still
   stretches to the track. `width: fit-content` holds in all three
   layout modes. */
.so-cmp-tag { width: fit-content; max-width: 100%; align-self: start; justify-self: start; }

@media (max-width: 760px) {
  .so-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; padding: 24px 14px; }
  /* Only the vertical divider between the two columns survives. */
  .so-stats li + li::before { display: none; }
  .so-stats li:nth-child(even)::before { display: block; height: 36px; }
}