/* Focused Scopes — solutions pages (hub + 4 personas). New design system
   (2026-07-21): builds on homepage.css shared components (nav, buttons,
   footer, scrollbar); tokens only. Replaces the legacy teal stylesheet. */

.gr { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec strong, .strip strong { color: var(--text-primary); }

/* ---------------------------------------------------------------- Hero
   Centered variant — homepage.css supplies the section padding, spotlight
   and vignette; the legacy canvas grid is retired. */
.hero-bg { display: none; }
.hero-content { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.hero-badge { display: block; font-size: var(--step--1); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
  font-style: normal; margin: 0 0 var(--space-4); }
.hero-badge-dot { display: none; }
.hero-content .hero-sub { font-size: var(--step-1); color: var(--text-secondary); line-height: var(--leading-body);
  max-width: 54ch; margin: 0 auto var(--space-6); }
.hero-btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.btn-p, .btn-g {
  font-family: inherit; font-style: italic; font-weight: var(--weight-bold); font-size: 15px;
  border-radius: var(--radius); border: none; cursor: pointer; padding: 15px 30px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo);
}
.btn-p { background: var(--grad); color: var(--bg-deep); box-shadow: var(--glow); }
.btn-p:hover { transform: var(--lift); box-shadow: var(--elev-3), var(--glow); color: var(--bg-deep); }
.btn-g { background: transparent; color: var(--text-primary); box-shadow: var(--ring-subtle); }
.btn-g:hover { transform: var(--lift); box-shadow: var(--ring-accent); color: var(--text-primary); }
.hero-trust { display: flex; gap: var(--space-3) var(--space-5); justify-content: center; flex-wrap: wrap;
  margin-top: var(--space-5); font-size: 13px; font-style: normal; color: var(--text-muted); }

/* ---------------------------------------------------------------- Showcase mock */
.showcase { position: relative; z-index: 1; padding: var(--space-4) var(--gutter) var(--space-7); }
.mock {
  max-width: 640px; margin-inline: auto; overflow: hidden; position: relative;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-4), var(--edge-top);
}
.mock-wide { max-width: 780px; }
.mock-narrow { max-width: 480px; }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px;
  background: rgba(1,24,32,0.35); border-bottom: 1px solid var(--border-subtle); }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elevated); box-shadow: var(--ring-subtle); }
.mock-title { font-size: 12px; font-style: normal; font-weight: var(--weight-bold); color: var(--text-secondary); margin-left: 6px; }
.mock-body { padding: var(--space-5); }
.mcap { text-align: center; font-size: 13px; font-style: normal; color: var(--text-muted);
  margin: var(--space-4) auto 0; max-width: 560px; }

/* mini make-ready board */
.mboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.mcol-h { font-size: 10px; font-style: normal; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.mcard { background: var(--bg-card); border-radius: var(--radius-sm); padding: 10px 11px;
  box-shadow: var(--elev-1); border-left: 2px solid var(--accent-dim); margin-bottom: 8px; }
.mcard.done { border-left-color: var(--green); }
.mcard-t { font-size: 11.5px; font-weight: var(--weight-bold); color: var(--text-primary); }
.mchip { display: inline-block; margin-top: 6px; font-size: 10px; font-style: normal; font-weight: var(--weight-bold);
  padding: 3px 9px; border-radius: var(--radius-pill); color: var(--accent-light); background: var(--accent-dim); box-shadow: var(--ring-subtle); }
.mchip.warn { color: var(--amber); background: var(--gold-dim); }
.mchip.ok { color: var(--green); background: var(--green-dim); }

/* deal math */
.mrow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.mrow-t { font-size: 13.5px; font-weight: var(--weight-bold); color: var(--text-primary); }
.mrow-s { font-size: 11px; font-style: normal; color: var(--text-muted); margin-top: 2px; }
.mtag { flex: none; font-size: 10.5px; font-style: normal; font-weight: var(--weight-bold); padding: 4px 11px;
  border-radius: var(--radius-pill); color: var(--accent-light); background: var(--accent-dim); box-shadow: var(--ring-subtle); }
.mtag.good { color: var(--green); background: var(--green-dim); }
.mstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mstat { background: var(--bg-card); border-radius: var(--radius); padding: 12px; box-shadow: var(--elev-1); border-top: 2px solid var(--accent); }
.mstat-l { font-size: 10px; font-style: normal; font-weight: var(--weight-bold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); }
.mstat-n { font-size: var(--step-1); font-weight: var(--weight-extrabold); color: var(--text-primary); margin-top: 4px; font-style: normal; }

/* trade sequence */
.mseq { display: flex; flex-direction: column; gap: 8px; }
.mseq-row { display: flex; align-items: center; gap: 10px; background: var(--bg-card);
  border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--elev-1); }
.mseq-row.active { box-shadow: var(--ring-accent), var(--elev-2); }
.mseq-row.done { opacity: .75; }
.mseq-row .mrow-t { font-size: 12.5px; }
.mseq-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-style: normal; font-weight: var(--weight-extrabold); color: var(--accent-light);
  background: var(--accent-dim); box-shadow: var(--ring-subtle); }
.mseq-row.done .mseq-n { color: var(--green); background: var(--green-dim); }
.mseq-b { flex: 1; min-width: 0; }

/* client bid */
.mbid { display: flex; flex-direction: column; }
.mbid-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 12.5px;
  color: var(--text-secondary); padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.mbid-row span:last-child { color: var(--text-primary); font-weight: var(--weight-bold); font-style: normal; }
.mbid-total { display: flex; justify-content: space-between; padding-top: 12px; font-size: 14.5px;
  font-weight: var(--weight-extrabold); color: var(--text-primary); }
.mbid-total span:last-child { color: var(--accent-light); font-style: normal; }
.mbid-sent { margin-top: var(--space-3); font-size: 11.5px; font-style: normal; font-weight: var(--weight-bold); color: var(--green); }

/* ---------------------------------------------------------------- Sections */
section.sec { padding: var(--section-y) var(--gutter); position: relative; }
.sec-inner { max-width: var(--container); margin-inline: auto; }
.sec-head { max-width: 62ch; margin-bottom: var(--space-6); }
.sec-eyebrow { display: block; font-size: var(--step--1); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted);
  font-style: normal; margin: 0 0 var(--space-4); }
.sec-title { font-size: var(--step-4); font-weight: var(--weight-extrabold); line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0 0 var(--space-4); text-wrap: balance; }
.sec-sub { font-size: var(--step-1); color: var(--text-secondary); line-height: var(--leading-body); margin: 0; max-width: var(--measure); }

/* feature cards */
.deliverables { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.del { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--elev-2);
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo); }
.del:hover { transform: var(--lift); box-shadow: var(--elev-3); }
.del-num { font-size: 11px; font-style: normal; font-weight: var(--weight-extrabold); color: var(--accent);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.del-title { font-size: var(--step-1); font-weight: var(--weight-extrabold); color: var(--text-primary);
  margin: var(--space-2) 0 var(--space-3); }
.del-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }

/* numbered workflow steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); counter-reset: step; }
.step { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--elev-1); counter-increment: step;
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo); }
.step:hover { transform: var(--lift); box-shadow: var(--elev-2); }
.step::before { content: "0" counter(step); display: block; font-size: var(--step-3);
  font-weight: var(--weight-black); font-style: normal; color: var(--accent); line-height: 1;
  letter-spacing: var(--tracking-display); margin-bottom: var(--space-3); }
.step-title { font-size: 15px; font-weight: var(--weight-extrabold); color: var(--text-primary); margin-bottom: 6px; }
.step-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* included checklist */
.strip {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-7);
  box-shadow: var(--elev-2), var(--edge-top);
}
.strip-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 11px var(--space-7); }
.strip-row li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.strip-row li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* cross-link cards: 2-up normally, 3-up when five or more (the hub) */
.xlinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.xlinks:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
.xlink { display: flex; flex-direction: column; gap: 8px; background: var(--bg-card);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--elev-1); color: inherit;
  transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur) var(--ease-out-expo); }
.xlink:hover { transform: var(--lift); box-shadow: var(--ring-accent), var(--elev-2); color: inherit; }
.xlink-title { font-size: var(--step-0); font-weight: var(--weight-extrabold); color: var(--text-primary); }
.xlink-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.xlink-go { margin-top: auto; padding-top: var(--space-2); font-size: 12.5px; font-weight: var(--weight-bold); color: var(--accent-light); }

/* ---------------------------------------------------------------- CTA */
.cta-section { padding: var(--section-y) var(--gutter); text-align: center; position: relative; }
.cta-section::before { content: ""; position: absolute; inset: 0; background: var(--spotlight); pointer-events: none; }
.cta-card {
  position: relative; z-index: 1; max-width: 760px; margin-inline: auto;
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-7);
  box-shadow: var(--elev-4), var(--edge-top);
}
.cta-title { font-size: var(--step-3); font-weight: var(--weight-black); color: var(--text-primary);
  letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); }
.cta-sub { font-size: var(--step-0); color: var(--text-secondary); line-height: var(--leading-body);
  max-width: 48ch; margin: 0 auto var(--space-6); }
.cta-btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.cta-fine { margin-top: var(--space-5); font-size: 13px; color: var(--text-muted); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 980px) {
  .deliverables, .steps { grid-template-columns: repeat(2, 1fr); }
  .xlinks:has(> :nth-child(5)) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .deliverables, .steps, .xlinks, .xlinks:has(> :nth-child(5)) { grid-template-columns: 1fr; }
  .mboard { grid-template-columns: 1fr; }
  .strip { padding: var(--space-5) var(--space-4); }
  .strip-row { grid-template-columns: 1fr; }
  .cta-card { padding: var(--space-6) var(--space-4); }
}