/* ==========================================================================
   Shaz Media Co — marketing site
   Ported from design_handoff_shaz_media/signal-a-brass.dc.html
   The prototype used all-inline styles because its tooling required it.
   Per the handoff README that approach is NOT ported; the resolved values are.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset + base
   Resets use :where() so a zero-specificity rule can never outrank a
   component rule further down the file.
   -------------------------------------------------------------------------- */
:where(*, *::before, *::after) { box-sizing: border-box; }

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }

:where(ul, ol) { margin: 0; padding: 0; list-style: none; }

:where(img, svg, video) { max-width: 100%; }

:where(button, input, select, textarea) { font: inherit; color: inherit; }

/* The UA rule for [hidden] is display:none at zero specificity, so ANY
   component rule that sets display (.sm-panel{display:grid}) silently beats it
   and the hidden element renders anyway. Every tab panel on this page relies on
   [hidden], so this has to outrank them all. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* Header is sticky; anchor targets must clear it. */
:where([id]) { scroll-margin-top: 120px; }

body.sm {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* :where() so this base rule sits at the scope's own specificity. As a plain
   `.sm a` it is (0,1,1) and silently outranks every single-class component rule
   — it was painting the header nav LABELS in the accent while their numbers
   stayed muted, i.e. the inverse of the design. */
.sm :where(a) { color: var(--acc-text); text-decoration: none; }
.sm :where(a):hover { color: var(--ink); }

.sm ::selection { background: var(--acc); color: var(--on-acc); }

.sm :focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — visible only on focus. */
.sm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 14px 22px;
  background: var(--acc);
  color: var(--on-acc);
  font-weight: 600;
}
.sm-skip:focus { left: 12px; top: 12px; color: var(--on-acc); }

.sm-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   2. Keyframes
   -------------------------------------------------------------------------- */
@keyframes sm-marquee { from { transform: translateX(0); }  to { transform: translateX(-50%); } }
@keyframes sm-in      { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sm-pulse   { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes sm-fade    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sm-word    { from { opacity: 0; transform: translateY(-6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sm-flow    { to   { stroke-dashoffset: -20; } }
@keyframes sm-slide   { 0% { transform: translateX(6px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(292px); opacity: 0; } }
@keyframes sm-rise    { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes sm-appear  { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   3. Shared primitives
   -------------------------------------------------------------------------- */
/* width:100% is load-bearing: snap mode makes each section a flex column, and a
   flex item with margin: 0 auto on the cross axis is shrink-to-fit rather
   than stretched -- without it these rails collapse to their content width. */
.sm-wrap { max-width: var(--wrap); width: 100%; margin: 0 auto; }

.sm-section { padding: var(--pad-y) var(--pad-x); }

/* The recurring motif: 11px, 700, wide tracking, uppercase. 11px is the floor. */
.sm-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-t-46);
}
.sm-eyebrow--acc   { color: var(--acc-text); }
.sm-eyebrow--wide  { letter-spacing: 0.18em; }
.sm-eyebrow--wider { letter-spacing: 0.20em; }
.sm-eyebrow--lg    { font-size: 11.5px; font-weight: 600; }

.sm-h2 {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(32px, 5.2vw, 70px);
  line-height: 0.96;
  letter-spacing: -0.038em;
  margin: 0;
}

.sm-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-t-60);
  margin: 0;
}

.sm-num { font-family: var(--fd); font-variant-numeric: tabular-nums; }

/* Buttons ---------------------------------------------------------------- */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 17px 36px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.25s,
              border-color 0.25s, color 0.25s, gap 0.25s;
}
.sm-btn--acc { background: var(--acc); color: var(--on-acc); }
.sm-btn--acc:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px var(--acc-34);
  color: var(--on-acc);
}
.sm-btn--ghost {
  background: transparent;
  border-color: var(--ink-t-22);
  color: var(--ink);
  font-weight: 500;
}
.sm-btn--ghost:hover {
  background: var(--ink-07);
  border-color: var(--ink-t-46);
  color: var(--ink);
}
.sm-btn--sm { padding: 14px 26px; font-size: 15px; }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.sm-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg-86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ink-10);
}

/* accent hairline along the top edge */
.sm-header__hair {
  height: 1px;
  opacity: 0.55;
  background: linear-gradient(90deg, transparent, var(--acc) 22%, var(--acc) 78%, transparent);
}

/* utility row — collapses away once the page is scrolled */
.sm-topbar {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s var(--ease), opacity 0.3s;
}
.sm-topbar > div { min-height: 0; overflow: hidden; }
.sm-header.is-scrolled .sm-topbar { grid-template-rows: 0fr; opacity: 0; }

.sm-topbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--rail);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--ink-09);
  /* Quieter than the nav beneath it: this is reference information, not a
     second navigation bar. */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-t-46);
}
.sm-topbar__contacts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.sm-topbar__sep { opacity: 0.35; }
.sm-topbar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-t-62);
}
.sm-topbar a:hover { color: var(--acc-text); }
.sm-topbar__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--acc-text);
}

.sm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
  animation: sm-pulse 2.4s ease-in-out infinite;
}

.sm-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--rail);
  margin: 0 auto;
  padding: 14px var(--pad-x);
}

/* Wordmark — type only, always one line. Treatment: "Accent period". */
.sm-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-family: var(--fd);
  line-height: 1;
  white-space: nowrap;
}
/* The wordmark is 19px of type; the link around it still needs a 44px target. */
.sm-wordmark-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.sm-wordmark-link:hover { color: var(--ink); }
.sm-wordmark:hover { color: var(--ink); }
.sm-wordmark__name { font-weight: 700; letter-spacing: -0.042em; }
.sm-wordmark__stop { font-weight: 700; color: var(--acc-text); }
.sm-wordmark--lg { font-size: 22px; }
.sm-wordmark--sm { font-size: 19px; }

/* Alternate treatments, selected in Customize → Brand. */
.sm-wordmark--split { gap: 0.36em; }
.sm-wordmark--dot   { gap: 0.28em; }
.sm-wordmark__shaz  { font-weight: 800; letter-spacing: -0.02em; }
.sm-wordmark__media { font-weight: 400; letter-spacing: 0.24em; color: var(--ink-t-72); }
.sm-wordmark--dot .sm-wordmark__shaz  { font-weight: 700; letter-spacing: 0.04em; }
.sm-wordmark--dot .sm-wordmark__media { letter-spacing: 0.1em; }
.sm-wordmark__bullet { font-weight: 700; color: var(--acc-text); }
.sm-wordmark__wide  { font-weight: 500; letter-spacing: 0.3em; font-size: 0.82em; }

.sm-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px clamp(4px, 1.2vw, 18px);
  min-width: 0;
}
.sm-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-t-66);
  transition: color 0.25s;
}
.sm-nav__link:hover { color: var(--ink); }
.sm-nav__inner { position: relative; display: inline-flex; align-items: baseline; gap: 7px; }
.sm-nav__num {
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-t-38);
  transition: color 0.25s;
}
.sm-nav__link:hover .sm-nav__num { color: var(--acc-text); }
.sm-nav__rule {
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.sm-nav__link:hover .sm-nav__rule { transform: scaleX(1); }

.sm-nav__cta {
  margin-left: clamp(8px, 1.4vw, 18px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid var(--acc);
  border-radius: var(--r);
  background: transparent;
  color: var(--acc-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.32s, color 0.32s, box-shadow 0.32s, gap 0.32s;
}
.sm-nav__cta:hover {
  background: var(--acc);
  color: var(--on-acc);
  box-shadow: 0 10px 30px var(--acc-30);
  gap: 14px;
}

.sm-bar__actions { display: flex; align-items: center; gap: 10px; }

/* Menu button — never shown on desktop, where the nav is already inline. */
.sm-burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--ink-22);
  border-radius: var(--r);
  background: transparent;
  cursor: pointer;
}
.sm-burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.sm-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.sm-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.sm-navscrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.sm-navscrim[hidden] { display: none; }

.sm-nav__drawercta { display: none; }

/* scroll-progress hairline along the bottom edge of the bar */
.sm-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--acc);
}
.sm-header { position: sticky; }
.sm-header > .sm-bar { position: relative; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.sm-hero {
  padding: clamp(80px, 10vh, 140px) var(--pad-x) 0;
  position: relative;
}
/* the only decorative element on the page */
.sm-hero__glow {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  /* 100%, not 112vw: a viewport-wide glow on a centred transform pushes past
     the right edge and gives the whole page a horizontal scrollbar. */
  width: min(920px, 100%);
  height: 620px;
  background: radial-gradient(ellipse at center, var(--acc-16), transparent 68%);
  filter: blur(24px);
  pointer-events: none;
}
.sm-hero__inner { max-width: var(--wrap); margin: 0 auto; text-align: center; position: relative; }

.sm-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--ink-16);
  border-radius: var(--pill, 999px);
  font-size: 13px;
  color: var(--ink-t-76);
  margin-bottom: 38px;
  animation: sm-in 0.6s ease both;
}
.sm-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: sm-pulse 2.2s ease-in-out infinite; }

.sm-hero__h1 {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(44px, 8.2vw, 118px);
  line-height: 0.94;
  letter-spacing: -0.042em;
  margin: 0 0 30px;
  text-wrap: balance;
  animation: sm-in 0.7s 0.05s ease both;
}
.sm-hero__h1 span { color: var(--acc-text); }

.sm-hero__lead {
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 44px;
  color: var(--ink-t-66);
  animation: sm-in 0.7s 0.12s ease both;
}

.sm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: clamp(50px, 6vw, 84px);
  animation: sm-in 0.7s 0.18s ease both;
}

/* stat strip — three cells in a 1px-gap grid on a bordered container */
.sm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--ink-14);
  border: 1px solid var(--ink-14);
  border-radius: var(--r);
  overflow: hidden;
  animation: sm-in 0.7s 0.24s ease both;
}
.sm-stats__cell { background: var(--bg); padding: 26px 20px 28px; }
.sm-stats__value {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.sm-stats__label { font-size: 13px; letter-spacing: 0.02em; color: var(--ink-t-50); margin-top: 9px; }

/* --------------------------------------------------------------------------
   5b. Hero — "Split + intake form"
   Statement on the left, the intake card on the right, so the page's purpose
   is reachable before a scroll.
   -------------------------------------------------------------------------- */
.sm-hero--split { padding-bottom: 0; }
.sm-hero__split {
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(40px, 4.5vw, 76px);
  align-items: center;
}
.sm-hero__say { animation: sm-in 0.7s ease both; }
.sm-hero__h1--split {
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 0.96;
  margin: 0 0 24px;
  animation: none;
}
.sm-hero__lead--split {
  font-size: clamp(16.5px, 1.6vw, 20px);
  max-width: 480px;
  margin: 0 0 32px;
  text-align: left;
  animation: none;
}
.sm-hero--split .sm-pill { margin-bottom: 30px; }

.sm-assures { display: grid; gap: 14px; }
.sm-assures li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-t-88);
}
.sm-assures li::before {
  content: "\2713";
  flex: 0 0 auto;
  color: var(--acc-text);
  font-size: 14px;
  padding-top: 2px;
}

.sm-heroform {
  border: 1px solid var(--ink-16);
  border-radius: var(--rl);
  background: var(--ink-03);
  padding: clamp(26px, 2.8vw, 38px);
  animation: sm-in 0.7s 0.1s ease both;
}
.sm-heroform__title {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 25px);
  letter-spacing: -0.028em;
  margin-bottom: 6px;
}
.sm-heroform__sub { font-size: 14.5px; color: var(--ink-t-55); margin: 0 0 26px; }
.sm-heroform__send { width: 100%; margin-top: 10px; padding: 17px 30px; }
.sm-heroform__note { font-size: 13.5px; line-height: 1.55; color: var(--ink-t-50); margin: 16px 0 0; text-align: center; }

/* The cycling-word placeholder. A real placeholder attribute cannot carry a
   styled, animating child, so this overlays the field and hides on input. */
.sm-hint { position: relative; display: block; }
.sm-hint textarea { position: relative; z-index: 1; background: transparent; }
.sm-hint__text {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 14px 16px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-t-46);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.sm-hint.is-typed .sm-hint__text { opacity: 0; }
.sm-hint__text b {
  color: var(--acc-text);
  font-weight: 600;
  text-shadow: 0 0 18px var(--acc-40), 0 0 42px var(--acc-30);
}
.sm-hint__text b.is-swapping { animation: sm-word 0.5s var(--ease) both; }

@media (max-width: 760px) {
  .sm-hero__split { gap: 34px; }
}

/* --------------------------------------------------------------------------
   6. Industry marquee
   -------------------------------------------------------------------------- */
.sm-marquee {
  margin-top: clamp(70px, 9vw, 120px);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sm-marquee__track {
  display: inline-flex;
  gap: 56px;
  animation: sm-marquee 34s linear infinite;
  will-change: transform;
}
.sm-marquee:hover .sm-marquee__track { animation-play-state: paused; }
.sm-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fd);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink-t-60);
}
.sm-marquee__item svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   7. Problems — reveal-on-hover grid, circular-spotlight reveal
   -------------------------------------------------------------------------- */
.sm-problems__head {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
}
.sm-problems__head .sm-h2 { max-width: 640px; }
.sm-problems__head .sm-lead { color: var(--ink-t-58); margin-bottom: 8px; }

.sm-problems__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.sm-pcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 24px 26px 28px;
  border: 1px solid var(--ink-14);
  border-radius: var(--rl);
  background: var(--ink-03);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.sm-pcard:hover, .sm-pcard.is-on { border-color: var(--acc-text); transform: translateY(-2px); }

.sm-pcard__front {
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: opacity 0.3s ease;
}
.sm-pcard.is-on .sm-pcard__front { opacity: 0; }

.sm-pcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.sm-pcard__num { font-family: var(--fd); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; opacity: 0.5; }
.sm-pcard__time { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-text); }
.sm-pcard__quote {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.sm-pcard__body { font-size: 15.5px; line-height: 1.5; color: var(--ink-t-62); margin: 0; }

/* The accent-filled overlay. Two reveal treatments, chosen in Customize → Brand:
   "spotlight" wipes a circle from the top-right; "blur" cross-fades while the
   face blurs out from under it. */
.sm-pcard__back {
  position: absolute;
  inset: 0;
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  background: var(--acc);
  color: var(--on-acc);
}

/* spotlight */
.sm-reveal-spotlight .sm-pcard__back {
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 0.62s var(--ease);
}
.sm-reveal-spotlight .sm-pcard:hover .sm-pcard__back,
.sm-reveal-spotlight .sm-pcard.is-on .sm-pcard__back { clip-path: circle(145% at 100% 0%); }

/* blur swap */
.sm-reveal-blur .sm-pcard__back {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.34s ease, transform 0.5s var(--ease);
}
.sm-reveal-blur .sm-pcard:hover .sm-pcard__back,
.sm-reveal-blur .sm-pcard.is-on .sm-pcard__back { opacity: 1; transform: scale(1); }
.sm-reveal-blur .sm-pcard__front {
  transition: filter 0.4s ease, opacity 0.3s ease, transform 0.5s var(--ease);
}
.sm-reveal-blur .sm-pcard:hover .sm-pcard__front,
.sm-reveal-blur .sm-pcard.is-on .sm-pcard__front {
  filter: blur(7px);
  opacity: 0;
  transform: scale(0.97);
}

.sm-pcard__backlabel { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; margin-bottom: 10px; }
.sm-pcard__build { font-size: 15.5px; line-height: 1.5; margin-bottom: auto; }
.sm-pcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid currentColor;
}
.sm-pcard__prooflabel { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; margin-bottom: 5px; }
.sm-pcard__proof { font-family: var(--fd); font-weight: var(--dw); font-size: 21px; letter-spacing: -0.03em; }
.sm-pcard__cta { font-size: 15px; font-weight: 600; }

.sm-problems__after { margin-top: 26px; }
.sm-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--acc-text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: gap 0.25s, color 0.25s;
}
.sm-linkbtn:hover { gap: 16px; color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Solutions — the inverted band
   The one strong tonal break on the page.
   -------------------------------------------------------------------------- */
/* The solutions band.
   Invert is the handoff's one strong tonal break - a light slab against the
   dark page. Flat keeps the page continuous and separates the section with
   hairlines instead. Which one ships is a Customize > Brand choice.
   The three --band-* values are what the inner rules read, so neither
   variant duplicates any component styling. */
.sm-solutions {
  --band-line: var(--alt-ink-12);
  --band-mute: var(--alt-ink-t-64);
  --band-acc:  var(--acc-band);
  background: var(--alt-bg);
  color: var(--alt-ink);
}
.sm-solutions--flat {
  --band-line: var(--ink-12);
  --band-mute: var(--ink-t-66);
  --band-acc:  var(--acc-text);
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
}
.sm-solutions__head { max-width: 700px; margin-bottom: 56px; }
.sm-solutions__head .sm-h2 { margin-bottom: 18px; }
.sm-solutions__head p { font-size: 18px; line-height: 1.55; color: var(--band-mute); margin: 0; }

.sm-solutions__list { border-top: 1px solid var(--band-line); }

.sm-srow {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(24px, 3vw, 38px) 0;
  padding-left: 0;
  border: 0;
  border-bottom: 1px solid var(--band-line);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
/* The row shifts right on hover. Translating the two content blocks rather
   than the button's padding keeps the border and the accent rule anchored,
   and keeps the move off the layout path. */
.sm-srow__top,
.sm-srow .sm-chips { transition: transform 0.42s var(--ease); }
.sm-srow:hover .sm-srow__top,
.sm-srow:hover .sm-chips,
.sm-srow:focus-visible .sm-srow__top,
.sm-srow:focus-visible .sm-chips { transform: translateX(18px); }

/* accent rule that draws in from the left along the bottom edge */
.sm-srow__rule {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--band-acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.sm-srow:hover .sm-srow__rule,
.sm-srow:focus-visible .sm-srow__rule { transform: scaleX(1); }

/* A grid, not a flex row. With flex, each tagline began wherever its title
   happened to end, so "Brand" and "Web & E-commerce" pushed their descriptions
   to two different x positions and the four rows read as a jumble. Fixed
   columns give every row the same number / title / description / arrow rails. */
.sm-srow__top {
  display: grid;
  grid-template-columns: 30px minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 36px);
  row-gap: 12px;
}
.sm-srow__num {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--band-acc);
  align-self: center;
}
.sm-srow__title {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--dls);
  transition: color 0.3s;
}
.sm-srow:hover .sm-srow__title,
.sm-srow:focus-visible .sm-srow__title { color: var(--band-acc); }
.sm-srow__mid {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.sm-srow__tag { font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.45; color: var(--band-mute); }
.sm-srow__arrow {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--band-acc);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.32s ease, transform 0.42s var(--ease);
}
.sm-srow:hover .sm-srow__arrow,
.sm-srow:focus-visible .sm-srow__arrow { opacity: 1; transform: translateX(0); }

/* The row renders .sm-chips (see smco_solution_chips), not .sm-srow__chips
   -- rules written against the latter style nothing at all. The chips sit
   outside the grid, so they take the title column's left rail by hand. */
.sm-srow .sm-chips {
  margin-top: 14px;
  margin-left: calc(30px + clamp(16px, 2.4vw, 36px));
}
/* --- chips, shared by all three solution layouts ------------------------- */
.sm-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.sm-chips span {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--pill, 999px);
  background: transparent;
  border: 1px solid var(--band-acc);
  color: var(--band-acc);
  white-space: nowrap;
}
.sm-chips__more { border-style: dashed; }

/* --- LAYOUT: cards ------------------------------------------------------- */
.sm-solcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.sm-solcard { display: flex; flex-direction: column; }
.sm-solcard__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--band-line);
  border-radius: var(--rl);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.28s, background 0.28s, transform 0.28s var(--ease);
}
.sm-solcard__btn:hover { border-color: var(--band-acc); background: var(--acc-06); transform: translateY(-3px); }
.sm-solcard__num { font-family: var(--fd); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; color: var(--band-acc); }
.sm-solcard__title {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 14px 0 8px;
}
.sm-solcard__tag { font-size: 15.5px; line-height: 1.5; color: var(--band-mute); }
.sm-solcard .sm-chips { margin-top: 18px; }
.sm-solcard__more { margin-top: auto; padding-top: 20px; font-size: 14.5px; font-weight: 600; color: var(--band-acc); }

/* --- LAYOUT: index + stage ---------------------------------------------- */
.sm-solindex { display: grid; grid-template-columns: minmax(260px, 0.85fr) 1.15fr; gap: clamp(20px, 3vw, 44px); align-items: start; }
.sm-solindex__list { display: grid; gap: 2px; border-top: 1px solid var(--band-line); }
.sm-solindex__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  width: 100%;
  padding: 20px 14px 20px 0;
  border: 0;
  border-bottom: 1px solid var(--band-line);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: padding-left 0.3s var(--ease), color 0.25s;
}
.sm-solindex__item:hover { padding-left: 10px; }
.sm-solindex__item[aria-selected="true"] { padding-left: 10px; }
.sm-solindex__num { font-family: var(--fd); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; color: var(--band-acc); padding-top: 5px; }
.sm-solindex__name { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(21px, 2vw, 27px); line-height: 1.1; letter-spacing: -0.03em; }
.sm-solindex__tag { grid-column: 2; font-size: 14.5px; line-height: 1.45; color: var(--band-mute); }
.sm-solindex__item[aria-selected="true"] .sm-solindex__name { color: var(--band-acc); }
.sm-solindex__stage { position: sticky; top: 110px; }
.sm-solindex__stage:empty::after {
  content: "";
  display: block;
  min-height: 260px;
  border: 1px dashed var(--band-line);
  border-radius: var(--rl);
}

/* --- the shared detail --------------------------------------------------- */
.sm-detail__head { padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 44px) clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--ink-10); }
.sm-detail__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sm-detail__kicker span:first-child { width: 24px; height: 1px; background: var(--acc); }
.sm-detail__title {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.04;
  letter-spacing: var(--dls);
  margin: 0 0 12px;
  padding-right: 46px;
}
.sm-detail__what { font-size: clamp(15.5px, 1.5vw, 19px); line-height: 1.55; margin: 0; color: var(--ink-t-66); max-width: 620px; }
.sm-detail__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.sm-detail__col { padding: clamp(22px, 2.6vw, 36px) clamp(22px, 3vw, 44px); border-right: 1px solid var(--ink-10); }
.sm-detail__chart { padding: clamp(22px, 2.6vw, 36px) clamp(22px, 3vw, 44px); background: var(--ink-03); }
.sm-detail__label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-t-46); margin-bottom: 20px; }
.sm-detail__note { font-size: 13.5px; line-height: 1.55; color: var(--ink-t-46); margin: 20px 0 0; }
.sm-detail__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 3vw, 44px);
  border-top: 1px solid var(--ink-10);
}
.sm-detail__facts { display: flex; flex-wrap: wrap; gap: 30px; }
.sm-detail__facts .sm-eyebrow { display: block; color: var(--ink-t-46); margin-bottom: 6px; }
.sm-detail__facts b { display: block; font-family: var(--fd); font-weight: var(--dw); font-size: 20px; letter-spacing: -0.03em; }
.sm-detail__facts b.acc { color: var(--acc-text); }

/* Inline (mobile) the detail is a panel under its trigger, not an overlay. */
.sm-srow-wrap > .sm-detail,
.sm-solcard > .sm-detail,
.sm-solindex__list > .sm-detail {
  border: 1px solid var(--band-acc);
  border-radius: var(--rl);
  background: var(--bg);
  color: var(--ink);
  margin: 4px 0 18px;
  overflow: hidden;
  animation: sm-fade 0.3s var(--ease) both;
}

/* --------------------------------------------------------------------------
   9. Process
   -------------------------------------------------------------------------- */
.sm-process__head { max-width: 700px; margin-bottom: 52px; }
.sm-process__head .sm-h2 { margin-bottom: 18px; }

.sm-process__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 14px;
}
.sm-phase {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 30px;
  border: 1px solid var(--ink-14);
  border-radius: var(--r);
  background: var(--ink-03);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.sm-phase:hover {
  border-color: var(--acc-70);
  background: var(--acc-06);
  transform: translateY(-6px);
}
.sm-phase__head { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.sm-phase__num {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--acc-text);
}
.sm-phase__rule { flex: 1; height: 1px; background: var(--ink-14); }
.sm-phase__title { font-family: var(--fd); font-weight: var(--dw); font-size: 21px; letter-spacing: -0.032em; margin: 0 0 8px; }
.sm-phase__line { font-size: 15.5px; line-height: 1.45; color: var(--ink-t-62); margin: 0 0 20px; }
.sm-phase__get { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ink-10); }
.sm-phase__get .sm-eyebrow { display: block; color: var(--ink-t-40); margin-bottom: 7px; }
.sm-phase__get p { font-size: 14.5px; line-height: 1.45; color: var(--ink-t-88); margin: 0; }

/* --------------------------------------------------------------------------
   10. Proof
   -------------------------------------------------------------------------- */
.sm-proof { padding: 0 var(--pad-x) var(--pad-y); }
.sm-proof .sm-h2 { margin: 0 0 48px; max-width: 660px; }
.sm-proof__list { display: grid; gap: 14px; }

.sm-case {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(200px, 1.1fr) minmax(200px, 1.1fr) minmax(150px, 0.7fr);
  gap: 28px;
  align-items: center;
  padding: 28px 30px;
  border: 1px solid var(--ink-12);
  border-radius: var(--r);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.sm-case:hover {
  border-color: var(--acc-60);
  background: var(--acc-05);
  transform: translateX(6px);
}
.sm-case__industry { font-family: var(--fd); font-weight: 600; font-size: 17px; letter-spacing: -0.018em; line-height: 1.3; }
.sm-case .sm-eyebrow { display: block; color: var(--ink-t-38); margin-bottom: 6px; }
.sm-case__text { font-size: 15px; line-height: 1.45; color: var(--ink-t-84); }
.sm-case__result {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--acc-text);
  text-align: right;
}

/* --------------------------------------------------------------------------
   11. Engagement
   -------------------------------------------------------------------------- */
.sm-engagement { padding: 0 var(--pad-x) var(--pad-y); }
.sm-engagement__head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 34px;
}
.sm-engagement__head .sm-h2 { max-width: 640px; }
.sm-engagement__head .sm-lead { color: var(--ink-t-58); max-width: 340px; margin-bottom: 8px; }

.sm-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.sm-tab {
  display: block;
  width: 100%;
  padding: 20px 22px 18px;
  border: 1px solid var(--ink-14);
  border-radius: var(--r);
  background: var(--ink-03);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.28s, background 0.28s, box-shadow 0.28s, transform 0.28s var(--ease);
}
.sm-tab:hover { transform: translateY(-2px); border-color: var(--acc-60); }
.sm-tab[aria-selected="true"] {
  border-color: var(--acc-text);
  background: var(--acc-12);
  box-shadow: 0 0 0 1px var(--acc);
}
.sm-tab__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.sm-tab__title { font-family: var(--fd); font-weight: var(--dw); font-size: 23px; letter-spacing: -0.035em; }
.sm-tab__mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ink-24);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.sm-tab[aria-selected="true"] .sm-tab__mark {
  background: var(--acc);
  border-color: var(--acc-text);
  box-shadow: inset 0 0 0 3px var(--bg);
}
.sm-tab__short { display: block; font-size: 14.5px; line-height: 1.45; opacity: 0.68; margin-bottom: 15px; }
.sm-tab__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-12);
}
.sm-tab__fact .sm-eyebrow { display: block; font-size: 11px; opacity: 0.5; color: inherit; margin-bottom: 5px; }
.sm-tab__fact b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }

.sm-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border: 1px solid var(--ink-14);
  border-radius: var(--rl);
  overflow: hidden;
  animation: sm-fade 0.4s var(--ease) both;
}
/* The right column always drives the panel height -- measured at 1600x900 it
   left 267px of dead space under Monthly's left column and 220px under Custom
   build's. As a flex column with the includes block pushed to the bottom, that
   space is distributed between the blocks instead of pooling in a void. */
.sm-panel__left {
  padding: clamp(28px, 3.2vw, 44px);
  border-right: 1px solid var(--ink-14);
  display: flex;
  flex-direction: column;
}
body.sm-snap .sm-panel__left .sm-includes,
.sm-panel__left .sm-includes { margin-top: auto; }
.sm-panel__left .sm-benefits { margin-bottom: 0; }
.sm-panel__right {
  padding: clamp(28px, 3.2vw, 44px);
  background: var(--ink-03);
  display: flex;
  flex-direction: column;
}
.sm-panel__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sm-panel__kicker span:first-child { width: 24px; height: 1px; background: var(--acc); }
.sm-panel__body {
  font-family: var(--fd);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.32;
  letter-spacing: -0.026em;
  margin: 0 0 14px;
}
.sm-panel__best { font-size: 15px; line-height: 1.5; color: var(--ink-t-55); margin: 0 0 28px; }

.sm-benefits { display: grid; gap: 11px; padding-top: 24px; border-top: 1px solid var(--ink-12); }
.sm-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-t-86);
}
.sm-benefits li::before { content: "\2713"; flex: 0 0 auto; color: var(--acc-text); font-size: 13px; padding-top: 3px; }

.sm-includes { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ink-12); }
.sm-includes .sm-eyebrow { color: var(--ink-t-44); margin-bottom: 14px; }
.sm-includes ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 22px; }
.sm-includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-t-72);
}
.sm-includes li::before {
  content: "";
  flex: 0 0 auto;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--acc);
  margin-top: 8px;
}

/* No min-height: the stack below already guarantees a stable frame, and a
   floor on top of it just left a dead gap under the content. */
.sm-viz { padding: 0 0 22px; }

/* A fixed frame for swapping content.
   Every panel occupies the SAME grid cell, so the container is always as tall
   as the tallest one and selecting a different phase cannot make the section
   jump. Hidden panels stay laid out but are made invisible — `display:none`
   would collapse them and bring the wobble straight back. */
.sm-stack { display: grid; }
.sm-stack > * { grid-area: 1 / 1; }
.sm-stack > [hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
.sm-viz__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sm-viz__hint { font-size: 12.5px; color: var(--ink-t-50); }

/* Project — "where the time goes" segments */
.sm-segments { display: flex; gap: 4px; align-items: flex-end; margin-bottom: 10px; }
.sm-segment {
  position: relative;
  height: 30px;
  border: 1px solid var(--ink-14);
  border-radius: 6px;
  background: var(--ink-07);
  color: var(--ink-t-66);
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: height 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
}
/* Selecting a phase changes its colour only. Growing the selected bar shunted
   the whole row around and made the panel look unsettled. */
.sm-segment[aria-selected="true"] {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--on-acc);
}
/* The bar stays 30px; the touch target is extended past the painted box. */
.sm-segment::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.sm-segments__ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-t-42);
  margin-bottom: 22px;
}
.sm-viz__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.sm-viz__title b { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.035em; }
.sm-chip {
  padding: 4px 11px;
  border-radius: var(--pill, 999px);
  background: var(--acc-14);
  color: var(--acc-text);
  font-size: 12.5px;
  font-weight: 600;
}
.sm-viz__rows { display: grid; gap: 16px; }
.sm-viz__rows .sm-eyebrow { display: block; font-size: 11px; color: var(--ink-t-44); margin-bottom: 6px; }
.sm-viz__rows p { font-size: 15.5px; line-height: 1.5; margin: 0; }
.sm-viz__rows p.muted { color: var(--ink-t-72); }

/* Monthly — cadence + four-week rail */
.sm-cadence { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.sm-pillbtn {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--ink-22);
  border-radius: var(--pill, 999px);
  background: transparent;
  color: var(--ink-t-66);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.sm-pillbtn:hover { border-color: var(--acc-text); color: var(--ink); }
.sm-pillbtn[aria-selected="true"] { background: var(--acc); border-color: var(--acc-text); color: var(--on-acc); }

.sm-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sm-week {
  padding: 14px 10px 16px;
  border: 1px solid var(--ink-12);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, opacity 0.25s;
}
.sm-week:disabled { opacity: 0.34; cursor: default; }
.sm-week[aria-selected="true"] { border-color: var(--acc-text); background: var(--acc-12); }
.sm-week__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin-bottom: 8px; }
.sm-week__dot {
  display: block;
  width: 9px; height: 9px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--ink-20);
}
.sm-week.has-session .sm-week__dot { background: var(--acc); }
.sm-week__mark { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 8px; min-height: 15px; font-weight: 500; }

.sm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-12);
}
.sm-facts .sm-eyebrow { display: block; font-size: 11px; color: var(--ink-t-44); margin-bottom: 6px; }
.sm-facts b { display: block; font-family: var(--fd); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }

/* Custom build — diagram frame */
.sm-diagram {
  border: 1px solid var(--ink-14);
  border-radius: var(--r);
  background: var(--bg);
  padding: 18px 16px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.sm-diagram svg { width: 100%; min-width: 300px; height: auto; display: block; color: var(--ink); }
/* connectors march; a token travels the automation diagram */
.sm-flow  { animation: sm-flow 1.4s linear infinite; }
.sm-token { animation: sm-slide 3.6s linear infinite; }
.sm-viz__detail { animation: sm-fade 0.34s var(--ease) both; }
.sm-diagram__blurb { font-size: 15.5px; line-height: 1.5; margin: 0 0 10px; }
.sm-diagram__eg { font-size: 13.5px; line-height: 1.5; color: var(--ink-t-52); margin: 0; }

/* Label ABOVE value. The eyebrow is a <span> and the figure a <b> — both
   inline — so without an explicit block they ran together on one line and
   wrapped mid-word ("One-" / "off"). */
.sm-panel__facts {
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--ink-12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 16px;
}
.sm-panel__facts > div { min-width: 0; }
.sm-panel__facts .sm-eyebrow {
  display: block;
  font-size: 11px;
  color: var(--ink-t-44);
  margin-bottom: 7px;
}
.sm-panel__facts b {
  display: block;
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-wrap: balance;
}

.sm-panel__cta { margin-top: 26px; width: 100%; padding: 15px 28px; font-size: 15.5px; }
.sm-panel__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px var(--acc-30); gap: 15px; }

/* --------------------------------------------------------------------------
   12. Intake
   -------------------------------------------------------------------------- */
.sm-start { padding: 0 var(--pad-x) clamp(70px, 9vw, 110px); }
.sm-start__panel {
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ink-14);
  border-radius: var(--rl);
  background: var(--bg);
}
/* accent gradient hairline along the top edge */
.sm-start__hair {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  opacity: 0.8;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
}
.sm-start__glow {
  position: absolute;
  bottom: -40%; left: -10%;
  width: min(680px, 80%);
  height: 130%;
  background: radial-gradient(ellipse at center, var(--acc-16), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.sm-start__top {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 4vw, 72px);
  align-items: end;
  padding: clamp(52px, 6.4vw, 96px) clamp(26px, 3.4vw, 48px);
}
.sm-start__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(26px, 3vw, 38px); }
.sm-start__kicker span:first-child { width: 30px; height: 1px; background: var(--acc); }
.sm-start__h2 {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.042em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.sm-start__lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; max-width: 540px; margin: 0; color: var(--ink-t-66); }
.sm-start__side { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.sm-start__toggle { padding: 19px 40px; font-size: 16.5px; letter-spacing: -0.01em; }
.sm-start__toggle:hover { transform: translateY(-3px); box-shadow: 0 18px 44px var(--acc-32); }
.sm-start__toggle .sm-arrow { font-size: 15px; transform: rotate(90deg); transition: transform 0.4s var(--ease); }
.sm-start__toggle[aria-expanded="true"] .sm-arrow { transform: rotate(-90deg); }
.sm-start__note {
  width: 100%;
  max-width: 340px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-14);
}
.sm-start__note p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--ink-t-62); }

/* the form itself collapses with a grid-rows transition (no fixed height) */
.sm-start__drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.55s var(--ease), opacity 0.35s ease;
}
.sm-start__drawer[data-open="true"] { grid-template-rows: 1fr; opacity: 1; }
.sm-start__drawer > div { position: relative; min-height: 0; overflow: hidden; }
.sm-start__form {
  border-top: 1px solid var(--ink-14);
  padding: clamp(30px, 3.4vw, 48px) clamp(32px, 5vw, 80px) clamp(44px, 5.4vw, 80px);
}
.sm-start__formhead {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 30px;
}
.sm-start__formhead b { font-family: var(--fd); font-weight: 600; font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -0.03em; }

.sm-form { display: grid; gap: 18px; }
.sm-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.sm-field { display: block; }
.sm-field > .sm-eyebrow { font-size: 11.5px; font-weight: 600; margin-bottom: 8px; }
.sm-field input,
.sm-field select,
.sm-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--ink-20);
  border-radius: var(--r);
  background: var(--ink-03);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.25s;
}
.sm-field textarea { resize: vertical; }
.sm-field select { appearance: none; }
.sm-field input:focus,
.sm-field select:focus,
.sm-field textarea:focus { border-color: var(--acc-text); }
.sm-field ::placeholder { color: var(--ink-t-38); }

.sm-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.sm-choice {
  min-height: 44px;
  padding: 12px 17px;
  border: 1px solid var(--ink-18);
  border-radius: var(--pill, 999px);
  background: transparent;
  color: var(--ink-t-72);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s,
              box-shadow 0.45s var(--ease), transform 0.3s var(--ease);
}
.sm-choice:hover { border-color: var(--acc-text); color: var(--ink); }
.sm-choice[aria-pressed="true"] {
  border-color: var(--acc-text);
  background: var(--acc);
  color: var(--on-acc);
  box-shadow: 0 0 0 4px var(--acc-16), 0 0 28px var(--acc-50);
  transform: translateY(-1px);
}

.sm-form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--ink-10);
}
.sm-form__submit { flex: 0 0 auto; padding: 17px 36px; }
.sm-form__promise { font-size: 14px; line-height: 1.6; color: var(--ink-t-46); margin: 0; max-width: 420px; }

.sm-form__msg { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--r); font-size: 15px; }
.sm-form__msg--ok  { border: 1px solid var(--good); background: rgba(62, 156, 107, 0.12); color: var(--ink); }
.sm-form__msg--err { border: 1px solid var(--bad);  background: rgba(212, 80, 60, 0.12);  color: var(--ink); }

/* honeypot */
.sm-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   12b. Long-form pages (Privacy, Terms)
   -------------------------------------------------------------------------- */
.sm-prose { max-width: 700px; }
.sm-prose .sm-h2 { margin-bottom: 34px; }
.sm-prose__body { font-size: 16.5px; line-height: 1.7; color: var(--ink-t-84); }
.sm-prose__body > * + * { margin-top: 1.1em; }
.sm-prose__body h2 {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.03em;
  margin-top: 1.8em;
}
.sm-prose__body h3 { font-family: var(--fd); font-weight: 600; font-size: 19px; letter-spacing: -0.022em; margin-top: 1.6em; }
.sm-prose__body ul { list-style: disc; padding-left: 1.2em; }
.sm-prose__body li + li { margin-top: 0.5em; }
.sm-prose__body a { border-bottom: 1px solid var(--acc-40); }

/* --------------------------------------------------------------------------
   12c. Blog index + archives
   The posts are the real client case studies, so they get proper cards.
   -------------------------------------------------------------------------- */
.sm-blog__head { max-width: 720px; margin-bottom: 52px; }
.sm-blog__head .sm-h2 { margin: 14px 0 16px; }

.sm-blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.sm-card {
  border: 1px solid var(--ink-12);
  border-radius: var(--rl);
  background: var(--ink-03);
  overflow: hidden;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.sm-card:hover {
  border-color: var(--acc-60);
  background: var(--acc-05);
  transform: translateY(-4px);
}
.sm-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
}
.sm-card__link:hover { color: var(--ink); }

.sm-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-07);
  border-bottom: 1px solid var(--ink-10);
}
.sm-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.sm-card:hover .sm-card__thumb img { transform: scale(1.03); }

.sm-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.sm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.sm-card__title {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.sm-card__excerpt { font-size: 15px; line-height: 1.5; color: var(--ink-t-62); margin-bottom: 20px; }
.sm-card__more {
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--acc-text);
}

.sm-blog__pager { margin-top: 44px; }
.sm-blog__pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sm-blog__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ink-14);
  border-radius: var(--r);
  color: var(--ink-t-66);
  font-size: 14.5px;
  font-weight: 500;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.sm-blog__pager .page-numbers:hover { border-color: var(--acc-text); color: var(--ink); }
.sm-blog__pager .page-numbers.current {
  background: var(--acc);
  border-color: var(--acc-text);
  color: var(--on-acc);
}
.sm-blog__pager .screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sm-blog__empty { padding: 40px 0; }
.sm-blog__empty .sm-lead { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   12d. Single post
   -------------------------------------------------------------------------- */
.sm-article__head { padding: clamp(50px, 6vw, 90px) var(--pad-x) 0; }
.sm-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 22px; }
/* The category is a link, so it needs a real target even though the type is 11px. */
.sm-article__meta a { display: inline-flex; align-items: center; min-height: 44px; }
.sm-article__dot { color: var(--ink-t-38); }
.sm-article__title {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(30px, 4.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.038em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.sm-article__lede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-t-66); margin: 0; }

.sm-article__hero { padding: clamp(34px, 4vw, 56px) var(--pad-x) 0; }
.sm-article__hero img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ink-12);
  border-radius: var(--rl);
}

.sm-article .sm-prose { padding: clamp(34px, 4vw, 56px) var(--pad-x) 0; }
.sm-article .sm-prose__body img { height: auto; border-radius: var(--r); }
.sm-article .sm-prose__body blockquote {
  margin-left: 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--acc);
  font-family: var(--fd);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.024em;
  color: var(--ink);
}

.sm-article__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 40px; }
.sm-article__tags a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--ink-18);
  border-radius: var(--pill, 999px);
  color: var(--ink-t-66);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.25s, color 0.25s;
}
.sm-article__tags a:hover { border-color: var(--acc-text); color: var(--acc-text); }

.sm-article__cta { padding: clamp(50px, 6vw, 84px) var(--pad-x) 0; }
.sm-article__ctabox {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(28px, 3.2vw, 44px);
  border: 1px solid var(--acc-40);
  border-radius: var(--rl);
  background: var(--acc-06);
}
.sm-article__ctatitle {
  font-family: var(--fd);
  font-weight: 600;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.3;
  letter-spacing: -0.026em;
  margin: 10px 0 0;
  max-width: 620px;
}

.sm-article__nav { padding: clamp(40px, 5vw, 70px) var(--pad-x) 0; }
.sm-article__navgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding-top: 34px;
  border-top: 1px solid var(--ink-12);
}
.sm-article__nav a {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--ink-12);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color 0.25s, background 0.25s;
}
.sm-article__nav a:hover { border-color: var(--acc-text); background: var(--acc-05); color: var(--ink); }
.sm-article__navnext { text-align: right; }
.sm-article__navtitle {
  display: block;
  margin-top: 10px;
  font-family: var(--fd);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.3;
  letter-spacing: -0.022em;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.sm-footer { border-top: 1px solid var(--ink-10); padding: 40px var(--pad-x) 52px; }
.sm-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  justify-content: space-between;
}
.sm-footer__tag { font-size: 13px; color: var(--ink-t-46); margin-top: 10px; }
.sm-footer__links { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.sm-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-t-66);
}
.sm-footer__links a:hover { color: var(--acc-text); }
.sm-footer__grid {
  max-width: var(--wrap);
  margin: 40px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--ink-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px 34px;
}
.sm-footer__col .sm-eyebrow { display: block; margin-bottom: 12px; }
.sm-footer__strong { font-size: 15.5px; font-weight: 600; line-height: 1.45; margin: 0 0 6px; }
.sm-footer__strong a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.sm-footer__strong a:hover { color: var(--acc-text); }
.sm-footer__soft { font-size: 13.5px; line-height: 1.5; color: var(--ink-t-60); margin: 0; }
.sm-footer__soft a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-t-66); }
.sm-footer__soft a:hover { color: var(--acc-text); }

/* Payment methods, named rather than drawn - card-brand logos are trademarked
   marks with their own usage rules, and the gateway shows the real ones at
   checkout anyway. */
.sm-paylist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sm-paylist__item {
  padding: 6px 11px;
  border: 1px solid var(--ink-18);
  border-radius: var(--pill, 999px);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-t-76);
  white-space: nowrap;
}
.sm-paylist__item--transfer { border-color: var(--acc-40); color: var(--acc-text); }

.sm-footer__legal {
  max-width: var(--wrap);
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--ink-09);
  font-size: 12.5px;
  color: var(--ink-t-50);
}

/* --------------------------------------------------------------------------
   14. Modal
   -------------------------------------------------------------------------- */
/* scrim */
.sm-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vh, 64px) clamp(14px, 3vw, 34px);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  animation: sm-appear 0.28s ease both;
}
.sm-modal[hidden] { display: none; }

/* panel */
.sm-modal__box {
  position: relative;
  width: 100%;
  max-width: 900px;
  border: 1px solid var(--ink-14);
  border-radius: var(--rl);
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  animation: sm-rise 0.42s var(--ease) both;
}
.sm-modal__hair {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
}
.sm-modal__close {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 2;
  width: 38px; height: 38px;
  border: 1px solid var(--ink-22);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.sm-modal__close:hover { background: var(--acc); border-color: var(--acc-text); color: var(--on-acc); }

/* header */
.sm-modal__head {
  padding: clamp(30px, 3.6vw, 52px) clamp(24px, 3.4vw, 52px) clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--ink-10);
}
.sm-modal__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sm-modal__kicker span:first-child { width: 24px; height: 1px; background: var(--acc); }
.sm-modal__kicker .sm-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--acc-text); }
.sm-modal__title {
  font-family: var(--fd);
  font-weight: var(--dw);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.04;
  letter-spacing: var(--dls);
  margin: 0 0 14px;
  padding-right: 50px;
}
.sm-modal__what { font-size: clamp(16.5px, 1.6vw, 20px); line-height: 1.55; margin: 0; color: var(--ink-t-66); max-width: 620px; }

/* body — two columns */
.sm-modal__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sm-modal__col {
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3.4vw, 52px);
  border-right: 1px solid var(--ink-10);
}
.sm-modal__chartcol {
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3.4vw, 52px);
  background: var(--ink-03);
  display: flex;
  flex-direction: column;
}
.sm-modal__collabel {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-t-46);
  margin-bottom: 22px;
}
.sm-steps { display: grid; gap: 18px; }
.sm-step { display: flex; gap: 14px; align-items: flex-start; }
.sm-step__n {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 2px;
  border: 1px solid var(--acc-40);
  border-radius: 50%;
  color: var(--acc-text);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-step__t { font-family: var(--fd); font-weight: 600; font-size: 16.5px; letter-spacing: -0.02em; margin: 0 0 4px; }
.sm-step__b { font-size: 15px; line-height: 1.5; color: var(--ink-t-66); margin: 0; }
.sm-modal__chartnote { font-size: 13.5px; line-height: 1.55; color: var(--ink-t-46); margin: 22px 0 0; }

/* footer */
.sm-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 3.4vw, 52px);
  border-top: 1px solid var(--ink-10);
}
.sm-modal__facts { display: flex; flex-wrap: wrap; gap: 34px; }
.sm-modal__facts .sm-eyebrow { display: block; color: var(--ink-t-46); margin-bottom: 6px; }
.sm-modal__facts b { display: block; font-family: var(--fd); font-weight: var(--dw); font-size: 22px; letter-spacing: -0.03em; }
.sm-modal__facts b.acc { color: var(--acc-text); }
.sm-modal__cta { padding: 14px 28px; font-size: 15px; }
.sm-modal__cta:hover { transform: translateY(-2px); }

/* --- the four chart variants ------------------------------------------- */
.sm-chart { display: grid; gap: 20px; }

/* brand — swatch strip + type specimen + wordmark */
.sm-swatches { display: flex; gap: 6px; }
.sm-swatches span { flex: 1; height: 42px; border-radius: 6px; }
.sm-specimen { display: grid; gap: 9px; }
.sm-specimen__aa   { font-family: var(--fd); font-weight: var(--dw); font-size: 34px; line-height: 1; letter-spacing: -0.04em; }
.sm-specimen__head { font-family: var(--fd); font-weight: 600; font-size: 21px; line-height: 1; letter-spacing: -0.03em; color: var(--ink-t-66); }
.sm-specimen__body { font-size: 14.5px; line-height: 1; color: var(--ink-t-46); }
.sm-specimen__wm {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-10);
  font-family: var(--fd);
}

/* funnel + trend — labelled bars */
.sm-bars { display: grid; gap: 12px; }
.sm-bar__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  margin-bottom: 6px;
  color: var(--ink-t-66);
}
.sm-bar__head b { font-weight: 600; color: var(--ink); }
.sm-bar__track { height: 9px; border-radius: 999px; background: var(--ink-10); overflow: hidden; }
.sm-bar__fill {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--acc);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease);
}
.sm-modal.is-drawn .sm-bar__fill { transform: scaleX(1); }

.sm-axis { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-t-46); margin-top: 8px; }
.sm-channels {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-10);
}
.sm-channel { display: flex; align-items: center; gap: 12px; }
.sm-channel__label { flex: 0 0 88px; font-size: 13.5px; color: var(--ink-t-66); }
.sm-channel__track { flex: 1; height: 7px; border-radius: 999px; background: var(--ink-10); overflow: hidden; }
.sm-channel__fill {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--acc);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease);
}
.sm-modal.is-drawn .sm-channel__fill { transform: scaleX(1); }

.sm-trend svg { width: 100%; height: auto; display: block; overflow: visible; }
.sm-trend__line { stroke-dasharray: 480; stroke-dashoffset: 480; transition: stroke-dashoffset 1.25s cubic-bezier(0.4, 0, 0.2, 1); }
.sm-modal.is-drawn .sm-trend__line { stroke-dashoffset: 0; }
.sm-trend__area, .sm-trend__cap { opacity: 0; transition: opacity 0.7s ease 0.55s; }
.sm-modal.is-drawn .sm-trend__area,
.sm-modal.is-drawn .sm-trend__cap { opacity: 1; }
.sm-trend__area { fill: var(--acc); fill-opacity: 0.14; }

/* system — three nodes into middleware. Pure DOM, no SVG. */
.sm-sys { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.sm-sys__node {
  padding: 11px 12px;
  border: 1px solid var(--ink-22);
  border-radius: 8px;
  font-size: 13.5px;
  text-align: center;
}
.sm-sys__nodes { display: grid; gap: 8px; }
.sm-sys__arrows { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--acc-text); font-size: 15px; }
.sm-sys__mid {
  padding: 20px 14px;
  border: 1px solid var(--acc);
  border-radius: 10px;
  background: var(--acc-07);
  text-align: center;
}
.sm-sys__mid b { display: block; font-family: var(--fd); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; margin-bottom: 6px; }
.sm-sys__mid span { font-size: 12.5px; line-height: 1.4; color: var(--ink-t-66); }
.sm-sys__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-10);
}
.sm-sys__foot span:first-child,
.sm-sys__foot span:last-child { flex: 1; height: 1px; background: var(--ink-14); }
.sm-sys__foot em { font-style: normal; font-size: 12.5px; color: var(--ink-t-46); }

.sm-modal__slot > .sm-detail { display: block; }

/* Mobile: the index layout has no side stage, and everything stacks. */
@media (max-width: 860px) {
  .sm-solindex { grid-template-columns: 1fr; }
  .sm-solindex__stage { display: none; }
}
@media (max-width: 760px) {
  .sm-solutions__head { margin-bottom: 34px; }
  .sm-srow { padding: 20px 0; }
  .sm-srow__top { gap: 6px 14px; }
  .sm-srow__title { font-size: clamp(23px, 6.4vw, 30px); }
  .sm-srow__tag { font-size: 14.5px; }
  .sm-srow__arrow { display: none; }
  /* Four headlines plus seventeen chips is too much to scan on a phone; the
     chips live inside the expanded detail instead. */
  .sm-srow .sm-chips,
  .sm-solindex .sm-chips { display: none; }
  .sm-solcard .sm-chips { margin-top: 14px; }
  .sm-detail__col { border-right: 0; border-bottom: 1px solid var(--ink-10); }
  .sm-detail__foot { gap: 14px; }
  .sm-detail__facts { gap: 20px; }
}

body.sm-locked { overflow: hidden; }

@media (max-width: 620px) {
  .sm-modal__col { border-right: 0; border-bottom: 1px solid var(--ink-10); }
}

/* --------------------------------------------------------------------------
   15. Scroll reveals
   -------------------------------------------------------------------------- */
/* Applied by JS only — an element with the attribute stays fully visible if
   the script never runs, so a broken bundle can't blank the page. */
[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sm-case {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 22px;
  }
  .sm-case__result { text-align: left; }
  .sm-panel__left { border-right: 0; border-bottom: 1px solid var(--ink-14); }
}

@media (max-width: 760px) {
  :root { --pad-x: 20px; }

  /* The utility strip is reference information; it does not earn a permanent
     row on a phone. The same email and phone sit inside the menu drawer. */
  .sm-topbar { display: none; }

  .sm-bar { gap: 10px; flex-wrap: nowrap; }
  .sm-burger { display: flex; }
  .sm-nav__cta { margin-left: 0; padding: 11px 16px; font-size: 11.5px; letter-spacing: 0.06em; }

  /* Nav becomes a drawer. */
  .sm-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 60;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 84px 20px 28px;
    background: var(--bg);
    border-left: 1px solid var(--ink-14);
    overflow-y: auto;
    /* The closed state fades instead of translating off-screen: a fixed panel
       parked past the right edge extends the DOCUMENT, which gave the phone a
       710px scrollWidth on a 390px viewport. Vertical movement is safe. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.26s ease, transform 0.34s var(--ease), visibility 0s linear 0.34s;
  }
  body.sm-menu-open .sm-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.26s ease, transform 0.34s var(--ease), visibility 0s;
  }

  .sm-nav__link {
    padding: 6px 10px;
    font-size: 17px;
    font-weight: 600;
    border-radius: var(--r);
  }
  .sm-nav__link:hover { background: var(--acc-06); }
  .sm-nav__num { font-size: 12px; }
  .sm-nav__rule { display: none; }

  .sm-nav__drawercta {
    display: grid;
    gap: 2px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--ink-12);
  }
  .sm-nav__contact {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-t-66);
    font-size: 14.5px;
  }

  .sm-srow__title { font-size: clamp(24px, 7vw, 34px); }
  .sm-srow__mid { flex: 1 1 100%; }
  .sm-rail { grid-template-columns: repeat(2, 1fr); }
  .sm-start__top { padding: 40px 22px; }
  .sm-start__form { padding: 28px 22px 40px; }
}

@media (min-width: 761px) {
  /* The drawer-only contact block never appears in the inline nav. */
  .sm-nav__drawercta { display: none; }
}

/* --------------------------------------------------------------------------
   17. Reduced motion — skip the reveals, the marquee, and the cycling word
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .sm *,
  .sm *::before,
  .sm *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal],
  [data-reveal].is-armed { opacity: 1; transform: none; }
  .sm-marquee__track { animation: none; transform: none; }
  .sm-pcard__back { transition: none; }
}

/* --------------------------------------------------------------------------
   18. Snap mode - one section per screen
   Enabled from Customize > Brand > Section scroll.

   proximity, never mandatory: mandatory hijacks the scroll and traps a
   reader inside any section taller than their viewport, which is exactly what
   happens on a short laptop or with large text. Proximity snaps when you land
   near a boundary and gets out of the way otherwise.

   Sections use min-height, not height, and center their content. A section
   whose content genuinely exceeds the viewport grows and opts out of snapping
   rather than clipping - losing content is worse than losing the effect.
   -------------------------------------------------------------------------- */
/* scroll-snap-type on <body> does NOTHING for the page scroller: for the
   document, the viewport takes this property from the ROOT element only, and
   unlike overflow it is not propagated up from body. Snapping was declared and
   inert. :has() covers current browsers; site.js also mirrors the class onto
   <html> so older ones still snap. */
html.sm-snap,
:root:has(body.sm-snap) {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  /* The header is sticky, so a section snapped to the top would slide under it. */
  scroll-padding-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  html.sm-snap,
  :root:has(body.sm-snap) { scroll-behavior: auto; scroll-snap-type: none; }
}
body.sm-snap :where([id]) { scroll-margin-top: 0; }

body.sm-snap .sm-hero,
body.sm-snap #problems,
body.sm-snap #capabilities,
body.sm-snap #process,
body.sm-snap #proof,
body.sm-snap #engagement,
body.sm-snap #start {
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(78px, 9vh, 110px);
  padding-bottom: clamp(34px, 4.6vh, 64px);
}
/* The hero is the one section seen with the header at full height. */
body.sm-snap .sm-hero { padding-top: clamp(104px, 13vh, 150px); }

/* The marquee is a divider, not a destination. */
body.sm-snap .sm-marquee { scroll-snap-align: none; }

/* Tighten the vertical rhythm so a section has a chance of fitting. */
body.sm-snap .sm-solutions__head,
body.sm-snap .sm-process__head,
body.sm-snap .sm-engagement__head { margin-bottom: clamp(20px, 3vh, 40px); }
body.sm-snap .sm-problems__head { margin-bottom: clamp(18px, 3vh, 36px); }
body.sm-snap .sm-proof .sm-h2 { margin-bottom: clamp(20px, 3vh, 40px); }
body.sm-snap .sm-srow { padding: clamp(12px, 1.8vh, 30px) 0; }
body.sm-snap .sm-case { padding: clamp(14px, 2vh, 26px) 30px; }
body.sm-snap .sm-phase { padding: clamp(16px, 2.2vh, 26px) 22px clamp(18px, 2.4vh, 30px); }
body.sm-snap .sm-pcard { min-height: 0; }

/* A section that cannot fit must scroll normally rather than clip. */
body.sm-snap .sm-section--tall { scroll-snap-align: none; }

@media (max-width: 760px) {
  /* Phones have too little height and too much content for this to be
     anything but a trap; snapping is a desktop affordance here. */
  html.sm-snap,
  :root:has(body.sm-snap) { scroll-snap-type: none; }
  body.sm-snap .sm-hero,
  body.sm-snap #problems,
  body.sm-snap #capabilities,
  body.sm-snap #process,
  body.sm-snap #proof,
  body.sm-snap #engagement,
  body.sm-snap #start {
    min-height: 0;
    display: block;
    padding-top: var(--pad-y);
    padding-bottom: var(--pad-y);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.sm-snap,
  :root:has(body.sm-snap) { scroll-snap-type: none; }
}

/* --- snap mode: size to the viewport HEIGHT too ---------------------------
   Width-only clamps ignore how tall the screen is, so a 1440x700 laptop got a
   hero needing 1053px in a 700px viewport. Every dominant measurement below is
   min()'d against a vh value so a short screen compresses instead of clipping.
   Measured with _tools/fit.js at 1440x900, 1280x800, 1440x700 and 820x1180. */

body.sm-snap .sm-hero__h1--split { font-size: min(clamp(30px, 5.4vw, 80px), 8.6vh); margin-bottom: min(24px, 2.2vh); }
body.sm-snap .sm-hero__h1:not(.sm-hero__h1--split) { font-size: min(clamp(36px, 8.2vw, 118px), 12vh); margin-bottom: min(30px, 3vh); }
body.sm-snap .sm-hero__lead--split { font-size: min(clamp(15px, 1.6vw, 20px), 2.4vh); margin-bottom: min(32px, 3vh); }
body.sm-snap .sm-hero__lead:not(.sm-hero__lead--split) { font-size: min(clamp(16px, 1.7vw, 22px), 2.6vh); margin-bottom: min(44px, 4vh); }
body.sm-snap .sm-pill { margin-bottom: min(30px, 2.6vh); padding: min(8px, 1vh) 16px; }
body.sm-snap .sm-assures { gap: min(14px, 1.6vh); }
body.sm-snap .sm-assures li { font-size: min(15.5px, 2vh); }
body.sm-snap .sm-heroform { padding: min(clamp(20px, 2.8vw, 38px), 3.4vh) clamp(20px, 2.8vw, 38px); }
body.sm-snap .sm-heroform__sub { margin-bottom: min(26px, 2.6vh); }
body.sm-snap .sm-heroform__note { margin-top: min(16px, 1.6vh); }
body.sm-snap .sm-form { gap: min(18px, 1.8vh); }
body.sm-snap .sm-form__row { gap: min(18px, 1.8vh); }
body.sm-snap .sm-field { margin-bottom: 0; }
body.sm-snap .sm-hero__split { gap: min(clamp(28px, 4.5vw, 76px), 5vh) clamp(28px, 4.5vw, 76px); }

body.sm-snap .sm-h2 { font-size: min(clamp(28px, 4.6vw, 58px), 6.6vh); }
body.sm-snap .sm-lead { font-size: min(18px, 2.3vh); }

body.sm-snap .sm-problems__grid { gap: min(14px, 1.6vh); }
body.sm-snap .sm-pcard { padding: min(24px, 2.4vh) 26px min(28px, 2.6vh); }
body.sm-snap .sm-pcard__quote { font-size: min(clamp(17px, 1.7vw, 22px), 2.6vh); margin-bottom: min(14px, 1.4vh); }
body.sm-snap .sm-pcard__body { font-size: min(15.5px, 2vh); }
body.sm-snap .sm-pcard__meta { margin-bottom: min(20px, 2vh); }

body.sm-snap .sm-srow__title { font-size: min(clamp(26px, 4.4vw, 62px), 7vh); }
body.sm-snap .sm-chips { margin-top: min(20px, 1.8vh); }
body.sm-snap .sm-chips span { padding: min(7px, 0.9vh) 13px; font-size: min(13px, 1.7vh); }

body.sm-snap .sm-process__grid { gap: min(14px, 1.6vh); }
body.sm-snap .sm-phase__num { font-size: min(32px, 4vh); }
body.sm-snap .sm-phase__head { margin-bottom: min(22px, 2.2vh); }
body.sm-snap .sm-phase__title { font-size: min(21px, 2.7vh); }
body.sm-snap .sm-phase__line { font-size: min(15.5px, 2vh); margin-bottom: min(20px, 2vh); }
body.sm-snap .sm-phase__get { padding-top: min(18px, 1.8vh); }
body.sm-snap .sm-phase__get p { font-size: min(14.5px, 1.9vh); }

body.sm-snap .sm-proof__list { gap: min(14px, 1.5vh); }
body.sm-snap .sm-case__result { font-size: min(clamp(22px, 2.4vw, 34px), 4.4vh); }

body.sm-snap .sm-tabs { gap: min(10px, 1.2vh); margin-bottom: min(12px, 1.4vh); }
body.sm-snap .sm-tab { padding: min(20px, 2vh) 22px min(18px, 1.8vh); }
body.sm-snap .sm-tab__title { font-size: min(23px, 2.9vh); }
body.sm-snap .sm-tab__short { margin-bottom: min(15px, 1.5vh); font-size: min(14.5px, 1.9vh); }
body.sm-snap .sm-tab__facts { padding-top: min(14px, 1.4vh); gap: min(14px, 1.4vh); }
body.sm-snap .sm-panel__left,
body.sm-snap .sm-panel__right { padding: min(clamp(20px, 3.2vw, 44px), 3vh) clamp(20px, 3.2vw, 44px); }
body.sm-snap .sm-panel__body { font-size: min(clamp(17px, 1.9vw, 25px), 2.9vh); margin-bottom: min(14px, 1.4vh); }
body.sm-snap .sm-panel__best { margin-bottom: min(28px, 2.4vh); font-size: min(15px, 1.9vh); }
body.sm-snap .sm-benefits { gap: min(11px, 1.2vh); padding-top: min(24px, 2.2vh); }
body.sm-snap .sm-benefits li { font-size: min(15px, 1.9vh); }
body.sm-snap .sm-includes { margin-top: min(28px, 2.4vh); padding-top: min(24px, 2.2vh); }
body.sm-snap .sm-includes ul { gap: min(10px, 1.1vh) 22px; }
body.sm-snap .sm-includes li { font-size: min(14.5px, 1.85vh); }
body.sm-snap .sm-viz { padding-bottom: min(22px, 2vh); }
body.sm-snap .sm-viz__rows { gap: min(16px, 1.6vh); }
body.sm-snap .sm-viz__rows p { font-size: min(15.5px, 2vh); }
body.sm-snap .sm-panel__facts { padding-top: min(26px, 2.4vh); gap: min(18px, 1.8vh) 16px; }
body.sm-snap .sm-panel__cta { margin-top: min(26px, 2.2vh); padding: min(15px, 1.6vh) 28px; }
body.sm-snap .sm-diagram { padding: min(18px, 1.8vh) 16px; margin-bottom: min(18px, 1.8vh); }

body.sm-snap .sm-start__top { padding: min(clamp(30px, 6.4vw, 96px), 6vh) clamp(24px, 5vw, 80px); }
body.sm-snap .sm-start__h2 { font-size: min(clamp(30px, 5.2vw, 68px), 8vh); margin-bottom: min(24px, 2.4vh); }
body.sm-snap .sm-start__lead { font-size: min(clamp(16px, 1.6vw, 21px), 2.4vh); }
body.sm-snap .sm-start__kicker { margin-bottom: min(26px, 2.4vh); }

/* Set by site.js when a section's content is taller than the viewport: snapping
   off, natural height, normal padding. Clipping content is worse than scrolling
   past it, so the section stops pretending to fit. */
body.sm-snap .sm-hero.is-tall,
body.sm-snap #problems.is-tall,
body.sm-snap #capabilities.is-tall,
body.sm-snap #process.is-tall,
body.sm-snap #proof.is-tall,
body.sm-snap #engagement.is-tall,
body.sm-snap #start.is-tall {
  min-height: 0;
  scroll-snap-align: none;
  justify-content: flex-start;
  padding-top: clamp(80px, 11vh, 130px);
  padding-bottom: clamp(56px, 8vh, 96px);
}

/* --- snap mode: density of the three densest sections ---------------------
   Measured with _tools/sect.js, not estimated. #engagement spends 165px per
   tab and 499px on the panel; #capabilities spends 148px per row over four
   rows. These trim the wrappers, never the text. */
body.sm-snap .sm-engagement__head { margin-bottom: min(20px, 2vh); }
body.sm-snap .sm-engagement__head .sm-lead { margin-bottom: 0; }
body.sm-snap .sm-tab { padding: min(14px, 1.5vh) 20px min(12px, 1.3vh); }
body.sm-snap .sm-tab__top { margin-bottom: min(7px, 0.8vh); }
body.sm-snap .sm-tab__short { margin-bottom: min(10px, 1.1vh); }
body.sm-snap .sm-tab__facts { padding-top: min(10px, 1.1vh); }
body.sm-snap .sm-panel__kicker { margin-bottom: min(14px, 1.5vh); }
body.sm-snap .sm-panel__best { margin-bottom: min(16px, 1.7vh); }
body.sm-snap .sm-benefits { padding-top: min(14px, 1.5vh); }
body.sm-snap .sm-includes { margin-top: min(16px, 1.7vh); padding-top: min(14px, 1.5vh); }
body.sm-snap .sm-panel__facts { padding-top: min(16px, 1.7vh); }
body.sm-snap .sm-panel__cta { margin-top: min(16px, 1.7vh); }

body.sm-snap .sm-solutions__head { margin-bottom: min(20px, 2vh); }
body.sm-snap .sm-solutions__head .sm-h2 { margin-bottom: min(12px, 1.3vh); }
body.sm-snap .sm-srow { padding: min(11px, 1.3vh) 0; }

body.sm-snap .sm-case { padding: min(14px, 1.6vh) 30px; }
body.sm-snap .sm-proof__head { margin-bottom: min(20px, 2vh); }

/* --- snap mode: the engagement panel's own density -------------------------
   Measured with _tools/sect.js at 1280x800: the right column spends 309px on
   the visualiser (33 head + 40 segments + 39 rail + 180 stack) and the left
   spends 134px on the includes list at two columns. These tighten the frames
   and let the list use three columns; no text gets smaller. */
body.sm-snap .sm-viz { padding-bottom: min(8px, 1vh); }
body.sm-snap .sm-viz__head { margin-bottom: min(9px, 1vh); }
body.sm-snap .sm-segments { margin-bottom: min(7px, 0.8vh); }
body.sm-snap .sm-segments__ends { margin-bottom: min(11px, 1.2vh); }
body.sm-snap .sm-viz__title { margin-bottom: min(9px, 1vh); }
body.sm-snap .sm-viz__rows { gap: min(11px, 1.2vh); }
body.sm-snap .sm-includes ul { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: min(8px, 0.9vh) 18px; }
body.sm-snap .sm-includes .sm-eyebrow { margin-bottom: min(9px, 1vh); }
body.sm-snap .sm-benefits li { line-height: 1.4; }
body.sm-snap .sm-engagement__head .sm-h2 { font-size: min(clamp(26px, 4vw, 50px), 5.8vh); }

/* --- short desktop viewports (a laptop with a lot of browser chrome) -------
   At 1440x700 the hero, capabilities and engagement were over by 25-38px --
   entirely in section padding, not in content. Trim the chrome there rather
   than shrink the type, which is what would actually look cramped. */
@media (min-width: 761px) and (max-height: 780px) {
  body.sm-snap .sm-hero,
  body.sm-snap #problems,
  body.sm-snap #capabilities,
  body.sm-snap #process,
  body.sm-snap #proof,
  body.sm-snap #engagement,
  body.sm-snap #start {
    padding-top: clamp(58px, 8.4vh, 92px);
    padding-bottom: clamp(22px, 3.6vh, 44px);
  }
  body.sm-snap .sm-hero { padding-top: clamp(82px, 11.5vh, 110px); }
  body.sm-snap .sm-srow { padding: min(9px, 1.1vh) 0; }
  body.sm-snap .sm-solutions__head { margin-bottom: min(16px, 1.7vh); }
}

/* --- cross-platform colour fidelity ---------------------------------------
   The palette is only "right" if the platform does not repaint it.
   - color-scheme is emitted per palette in the brand block (see customizer.php)
     so Android Chrome's auto-dark-theme leaves the light palettes alone and
     native controls match the page rather than the OS.
   - Windows High Contrast / forced-colors REPLACES every colour. Fighting it is
     wrong -- the point is legibility -- but the accent chips and rules carry
     meaning through colour alone, so they get a system-colour equivalent.
   - Printing drops backgrounds by default, which turns light-on-dark panels
     into invisible text. */
@media (forced-colors: active) {
  .sm-chips span,
  .sm-srow,
  .sm-pcard,
  .sm-tab,
  .sm-case,
  .sm-phase { border: 1px solid CanvasText; }
  .sm-btn--acc { border: 2px solid ButtonText; forced-color-adjust: none; }
  .sm-srow__rule,
  .sm-header__hair { background: Highlight; }
  .sm-pill__dot { background: Highlight; }
  /* The accent is the only thing distinguishing an active tab. */
  .sm-tab[aria-selected="true"],
  .sm-tab.is-on { outline: 3px solid Highlight; outline-offset: -3px; }
}

@media print {
  .sm,
  .sm-band,
  .sm-footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sm-header,
  .sm-navscrim,
  .sm-hero__glow { display: none !important; }
}

/* iOS inflates text in portrait unless told not to, which breaks every measured
   size on this page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --------------------------------------------------------------------------
   MOBILE ONLY (<=760px). Desktop is deliberately untouched by everything here.
   Measured on the live page at 390x844 with _tools/mobile.js.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {

  /* Problem cards clipped their own back face.
     .sm-pcard__back is position:absolute, so the card's height came only
     from the FRONT face -- 139px -- while the back needed 186px. The extra
     47px was cut off by overflow:hidden, which is why "PROOF / Seed closed /
     Fix this" was sliced in half. Stacking both faces in one grid cell makes
     the card as tall as the taller of the two, and the crossfade still works
     because they remain superimposed. */
  /* moved out of this block - it applies at every width now. */

  /* The menu drawer was 112px tall with 223px of links inside it -- exactly
     its own padding (84 + 24), so the links had nowhere to go and five of the
     seven were cut off. It has top:0 and bottom:0, which should stretch it to
     the viewport, but the computed height came back as 108px regardless. Rather
     than rely on that stretch resolving, the height is stated outright. */
  .sm-nav {
    height: 100svh;
    max-height: 100svh;
    padding-bottom: 28px;
    overscroll-behavior: contain;
  }

  /* Tap targets. 30px and 31px are below the 44px minimum, and these are the
     controls you use with a thumb. */
  .sm-segment { height: 44px; }
  .sm-field input,
  .sm-field select,
  .sm-input { min-height: 44px; }

  /* --- "Three ways to work with us" -------------------------------------
     On a phone the three option cards are each ~200px tall, so the detail
     panel sat a full screen below the choice that controls it -- you tapped
     Monthly and nothing appeared to happen. site.js moves the open panel
     directly beneath its own option, and these rules make it read as one
     connected block rather than a second, separate section. */
  .sm-tabs { display: flex; flex-direction: column; gap: 10px; }
  .sm-tab { width: 100%; }
  .sm-tab[aria-selected="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .sm-tab__facts { display: none; }              /* repeated inside the panel */

  .sm-engage-inline {
    border: 1px solid var(--acc);
    border-top: 0;
    border-radius: 0 0 var(--rl) var(--rl);
    margin: -1px 0 4px;
    overflow: hidden;
    animation: sm-fade 0.28s var(--ease) both;
  }
  .sm-engage-inline .sm-panel { border: 0; border-radius: 0; }
  .sm-engage-inline .sm-panel__left,
  .sm-engage-inline .sm-panel__right { border-right: 0; padding: 22px 20px; }
  .sm-engage-inline .sm-panel__left { border-bottom: 1px solid var(--ink-14); }

  /* The stack that holds the panels on desktop must not reserve height once
     the panels have been moved out of it. */
  .sm-stack:empty { display: none; }
}

/* ==========================================================================
   Five alternative Solutions layouts. Pick one in Customize > Brand, or add
   ?sol=<key> to the front page to preview without saving.
   Each reuses the same detail modal and the same chip helper; only the
   arrangement changes.
   ========================================================================== */

/* --- 1. Ledger: one line each, table-like, maximum density --------------- */
.sm-ledger { border-top: 1px solid var(--band-line); }
.sm-ledger__row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(150px, 0.9fr) minmax(0, 1.1fr) 130px 20px;
  align-items: center;
  column-gap: clamp(14px, 2vw, 30px);
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--band-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s, padding-left 0.25s;
}
.sm-ledger__row:hover,
.sm-ledger__row:focus-visible { background: var(--ink-03); padding-left: 12px; }
.sm-ledger__num { font-family: var(--fd); font-size: 12px; letter-spacing: 0.14em; color: var(--band-acc); }
.sm-ledger__name { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(19px, 1.7vw, 25px); letter-spacing: var(--dls); }
.sm-ledger__row:hover .sm-ledger__name { color: var(--band-acc); }
.sm-ledger__tag { font-size: 15px; color: var(--band-mute); }
.sm-ledger__count { font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-t-46); text-align: right; }
.sm-ledger__go { color: var(--band-acc); opacity: 0; transition: opacity 0.25s; text-align: right; }
.sm-ledger__row:hover .sm-ledger__go { opacity: 1; }

/* --- 2. Inline: quiet typography, capabilities as text not pills --------- */
.sm-inline { display: grid; gap: 2px; }
.sm-inline__row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px clamp(24px, 4vw, 60px);
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid var(--band-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sm-inline__head { display: flex; align-items: baseline; gap: 16px; }
.sm-inline__num { font-family: var(--fd); font-size: 12px; letter-spacing: 0.14em; color: var(--band-acc); }
.sm-inline__title { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(22px, 2.2vw, 32px); letter-spacing: var(--dls); transition: color 0.25s; }
.sm-inline__row:hover .sm-inline__title { color: var(--band-acc); }
.sm-inline__tag { font-size: clamp(16px, 1.5vw, 19px); color: var(--band-mute); grid-column: 2; grid-row: 1; }
.sm-inline__items { grid-column: 2; grid-row: 2; font-size: 13.5px; line-height: 1.7; color: var(--ink-t-46); }

/* --- 3. Quad: four tiles across, one glance ----------------------------- */
.sm-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sm-quad__tile {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 22px 24px;
  border: 1px solid var(--band-line);
  border-radius: var(--rl);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.3s var(--ease);
}
.sm-quad__tile:hover { border-color: var(--band-acc); transform: translateY(-3px); }
.sm-quad__num { font-family: var(--fd); font-size: 12px; letter-spacing: 0.14em; color: var(--band-acc); }
.sm-quad__title { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.1; letter-spacing: var(--dls); }
.sm-quad__tag { font-size: 14.5px; line-height: 1.5; color: var(--band-mute); }
.sm-quad__items { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.sm-quad__items span { font-size: 13px; color: var(--ink-t-46); padding-left: 13px; position: relative; }
.sm-quad__items span::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 1px; background: var(--band-acc); }
.sm-quad__go { margin-top: auto; padding-top: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--band-acc); }

/* --- 4. Sidebar: heading on the left, the four stacked right ------------- */
.sm-sol-sidebar .sm-solutions__head { display: none; }
.sm-solside { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.4fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.sm-solside__aside { position: sticky; top: 120px; }
.sm-solside__aside p { font-size: 17px; line-height: 1.6; color: var(--band-mute); margin: 18px 0 0; max-width: 34ch; }
.sm-solside__list { display: grid; gap: 2px; }
.sm-solside__row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--band-line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sm-solside__top { display: flex; align-items: baseline; gap: 14px; width: 100%; }
.sm-solside__num { font-family: var(--fd); font-size: 12px; letter-spacing: 0.14em; color: var(--band-acc); }
.sm-solside__title { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(21px, 2vw, 30px); letter-spacing: var(--dls); }
.sm-solside__go { margin-left: auto; color: var(--band-acc); opacity: 0; transition: opacity 0.25s; }
.sm-solside__row:hover .sm-solside__go { opacity: 1; }
.sm-solside__tag { font-size: 15.5px; color: var(--band-mute); }
.sm-solside__row .sm-chips { margin-top: 4px; }

/* --- 5. Marquee: full-width bands, title and line together --------------- */
.sm-band-list { display: grid; gap: 10px; }
.sm-bandrow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px clamp(20px, 3vw, 50px);
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px);
  border: 1px solid var(--band-line);
  border-radius: var(--rl);
  background: var(--ink-03);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.sm-bandrow:hover { border-color: var(--band-acc); background: var(--ink-07); }
.sm-bandrow__left { display: grid; grid-template-columns: 34px auto; column-gap: 14px; row-gap: 4px; align-items: baseline; }
.sm-bandrow__num { font-family: var(--fd); font-size: 12px; letter-spacing: 0.14em; color: var(--band-acc); grid-row: 1; }
.sm-bandrow__title { font-family: var(--fd); font-weight: var(--dw); font-size: clamp(24px, 2.6vw, 38px); line-height: 1.05; letter-spacing: var(--dls); grid-row: 1; }
.sm-bandrow__tag { font-size: 15.5px; color: var(--band-mute); grid-column: 2; grid-row: 2; }
.sm-bandrow__right { display: flex; align-items: center; gap: 16px; }
.sm-bandrow__right .sm-chips { margin-top: 0; justify-content: flex-end; }
.sm-bandrow__go { color: var(--band-acc); opacity: 0; transition: opacity 0.25s; }
.sm-bandrow:hover .sm-bandrow__go { opacity: 1; }

@media (max-width: 1000px) {
  .sm-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-solside { grid-template-columns: 1fr; }
  .sm-solside__aside { position: static; }
}
@media (max-width: 760px) {
  .sm-ledger__row { grid-template-columns: 28px 1fr; row-gap: 6px; padding: 16px 0; }
  .sm-ledger__tag { grid-column: 2; }
  .sm-ledger__count,
  .sm-ledger__go { display: none; }
  .sm-inline__row { grid-template-columns: 1fr; }
  .sm-inline__tag,
  .sm-inline__items { grid-column: 1; grid-row: auto; }
  .sm-quad { grid-template-columns: 1fr; }
  .sm-bandrow { flex-direction: column; align-items: flex-start; }
  .sm-bandrow__right .sm-chips { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Problem cards: both faces stacked, and every card in a row the same height.
   .sm-pcard__back is position:absolute, so the card was only ever as tall as
   its FRONT face. On hover a longer back face was cut off by overflow:hidden --
   measured on mobile as up to 64px of lost text, and the same defect is there
   at desktop widths whenever the reveal runs longer than the question.
   Stacking both faces in one grid cell makes the card as tall as the taller of
   the two, at any screen size, and the crossfade still works because they stay
   superimposed. grid-auto-rows:1fr then makes the row uniform, so a short card
   no longer leaves a hole beside a long one.
   -------------------------------------------------------------------------- */
.sm-pcard { display: grid; }
.sm-pcard__front,
.sm-pcard__back {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
}
.sm-problems__grid { grid-auto-rows: 1fr; }
/* The front face spreads so its meta line sits on the baseline of the card
   rather than leaving the gap under it. */
.sm-pcard__front { display: flex; flex-direction: column; }
.sm-pcard__body { margin-bottom: auto; }
.sm-pcard__back { display: flex; flex-direction: column; }
.sm-pcard__build { margin-bottom: auto; }