/* =========================================================
   LOCKED HERO PANEL RULE
   The Architectural Ribbon Ombre is one uninterrupted layer
   spanning the full height of the Hero. It is not masked,
   faded, or terminated beneath the dashboard. Dashboard
   panels use a structural border and no drop shadow.
   ========================================================= */

:root {
  --ink: #101828;
  --text: #344054;
  --muted: #667085;
  --quiet: #98a2b3;
  --line: #e6e9ec;
  --white: #ffffff;
  --soft: #f7faf9;
  --green-deep: #087f6f;
  --green: #00a982;
  --emerald: #18c98b;
  --shell: 1240px;
  --section-space: 184px;
  --section-space-mobile: 104px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.shell {
  width: min(calc(100% - 48px), var(--shell));
  margin-inline: auto;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  border-bottom: 1px solid rgba(16, 24, 40, .07);
}

.nav-shell {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.02em;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border: 7px solid var(--green);
  border-radius: 50% 50% 50% 16%;
  transform: rotate(-45deg);
  position: relative;
}

.brand-mark::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  inset: 4px;
  margin: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 27px;
}

.main-nav a,
.nav-link {
  color: #667085;
  text-decoration: none;
  font-size: .77rem;
  font-weight: 400;
}

.main-nav a:hover,
.nav-link:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-cta {
  padding: 9px 14px;
  border: 1px solid rgba(16, 24, 40, .13);
  border-radius: 8px;
  background: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .77rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.hero {
  min-height: 1240px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

.hero-ribbon {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("gpm-hero-ribbon.png") center center / cover no-repeat;
}


.hero-shell {
  min-height: inherit;
  padding-top: 78px;
  padding-bottom: 152px;
}

.hero-copy {
  width: min(100%, 1040px);
  padding-top: 128px;
}

.eyebrow,
.section-kicker {
  margin: 0 0 22px;
  color: var(--green-deep);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0,169,130,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(9px);
}

.waypoint-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 5px rgba(24,201,139,.12);
}

h1, h2, h3 {
  font-family: "Inter Tight", Inter, sans-serif;
  text-wrap: balance;
}

p { text-wrap: pretty; }

h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(3.45rem, 4.35vw, 4.9rem);
  line-height: 1.045;
  letter-spacing: -.044em;
  font-weight: 500;
}

.hero-copy-row {
  max-width: 1050px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-top: 26px;
}

.hero-lede {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.58;
}

.hero-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 3px;
  color: var(--muted);
  text-decoration: none;
  font-size: .79rem;
  white-space: nowrap;
}

.hero-inline-link strong {
  color: var(--ink);
  font-weight: 500;
}

.dashboard-stage {
  position: relative;
  margin-top: 78px;
}

.dashboard-preview {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(16,24,40,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.985);
  box-shadow: none;
  overflow: hidden;
}


.dashboard-topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfc;
}

.dashboard-brand,
.dashboard-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 500;
}

.mini-mark {
  width: 18px;
  height: 18px;
  border: 5px solid var(--green);
  border-radius: 50% 50% 50% 16%;
  transform: rotate(-45deg);
}

.workspace-chip {
  color: var(--muted);
  font-size: .7rem;
}

.avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eafbf4;
  color: var(--green-deep);
  font-size: .68rem;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 206px 1fr;
  min-height: 474px;
}

.dashboard-sidebar {
  padding: 23px 15px;
  border-right: 1px solid var(--line);
  background: #fafbfb;
}

.side-label {
  display: block;
  margin: 0 10px 12px;
  color: var(--quiet);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.side-label-spaced { margin-top: 30px; }

.side-item {
  display: block;
  padding: 9px 11px;
  border-radius: 7px;
  color: #667085;
  text-decoration: none;
  font-size: .72rem;
  font-weight: 400;
}

.side-item.active {
  color: var(--ink);
  background: #edf8f4;
  font-weight: 500;
}

.side-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--emerald);
}

.dashboard-content { padding: 32px; }

.dashboard-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}

.dash-kicker,
.card-overline {
  color: var(--green-deep);
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.dashboard-heading-row h2 {
  max-width: 620px;
  margin: 8px 0 0;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 500;
}

.dashboard-heading-row p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green-deep);
  background: #eafbf4;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .68rem;
  white-space: nowrap;
}

.status-pill > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
}

.route-card {
  margin-top: 28px;
  padding: 21px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.route-card-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.route-card-top strong {
  display: block;
  margin-top: 7px;
  font-size: .86rem;
  font-weight: 500;
}

.route-updated {
  color: var(--quiet);
  font-size: .68rem;
}

.route-track {
  display: flex;
  align-items: flex-start;
  margin-top: 28px;
}

.route-step {
  width: 68px;
  text-align: center;
}

.route-step span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin: auto;
  border: 1px solid #d0d5dd;
  border-radius: 50%;
  background: #fff;
  color: var(--quiet);
  font-size: .7rem;
}

.route-step small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .66rem;
}

.route-step.complete span,
.route-step.active span {
  border-color: var(--emerald);
  color: var(--green-deep);
  background: #eafbf4;
}

.route-line {
  height: 2px;
  flex: 1;
  margin-top: 14px;
  background: #e4e7ec;
}

.route-line.complete {
  background: linear-gradient(90deg, var(--emerald), #8ee7c7);
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 17px;
}

.dashboard-cards article {
  min-height: 125px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.card-label {
  display: block;
  margin-bottom: 12px;
  color: var(--quiet);
  font-size: .61rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dashboard-cards strong {
  font-size: .8rem;
  font-weight: 500;
}

.dashboard-cards p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.45;
}


.decision-tools {
  padding: 150px 0 170px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.decision-tools-intro {
  max-width: 760px;
  margin-bottom: 74px;
}

.decision-tools-intro h2 {
  margin: 0;
  font-size: clamp(2.45rem, 3.8vw, 4rem);
  line-height: 1.07;
  letter-spacing: -.042em;
  font-weight: 500;
}

.decision-tools-intro > p:last-child {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.decision-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.decision-tool-panel {
  min-height: 720px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.panel-ribbon {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.panel-ribbon::before,
.panel-ribbon::after {
  content: "";
  position: absolute;
  border-radius: 48% 52% 38% 62% / 50% 44% 56% 50%;
  transform-origin: center;
}

/* Position-based:
   Teal → emerald → mint, zoomed-out, broad and calm. */
.panel-ribbon-position {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(246,253,250,.92) 40%, rgba(232,250,244,.95) 100%);
}

.panel-ribbon-position::before {
  width: 132%;
  height: 52%;
  left: -35%;
  bottom: -6%;
  transform: rotate(-13deg);
  background:
    linear-gradient(90deg,
      rgba(4,123,119,.78) 0%,
      rgba(0,169,130,.82) 28%,
      rgba(24,201,139,.68) 56%,
      rgba(186,244,221,.78) 82%,
      rgba(255,255,255,0) 100%);
  box-shadow:
    0 -16px 0 rgba(18,164,146,.12),
    0 -34px 0 rgba(135,232,197,.17);
}

.panel-ribbon-position::after {
  width: 92%;
  height: 30%;
  right: -34%;
  top: 24%;
  transform: rotate(32deg);
  background: linear-gradient(90deg, rgba(186,244,221,0), rgba(143,235,198,.38), rgba(166,235,72,.26));
}

/* Constraint-aware:
   Deep teal → blue-green → emerald, medium zoom, converging passage. */
.panel-ribbon-constraint {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(244,250,251,.95) 39%, rgba(225,244,241,.95) 100%);
}

.panel-ribbon-constraint::before {
  width: 116%;
  height: 90%;
  right: -46%;
  bottom: -18%;
  transform: rotate(18deg) skewX(-8deg);
  background:
    linear-gradient(145deg,
      rgba(5,74,93,.9) 4%,
      rgba(4,123,119,.88) 31%,
      rgba(0,169,130,.76) 54%,
      rgba(24,201,139,.5) 72%,
      rgba(255,255,255,0) 92%);
  box-shadow:
    -18px 0 0 rgba(9,104,116,.16),
    -40px 0 0 rgba(0,169,130,.12);
}

.panel-ribbon-constraint::after {
  width: 86%;
  height: 68%;
  left: -42%;
  bottom: -20%;
  transform: rotate(-28deg);
  background: linear-gradient(135deg, rgba(5,74,93,.2), rgba(0,169,130,.5), rgba(24,201,139,0));
}

/* Action-oriented:
   Emerald → bright green → lime, close zoom, decisive upward turn. */
.panel-ribbon-action {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,253,244,.93) 38%, rgba(237,250,224,.96) 100%);
}

.panel-ribbon-action::before {
  width: 148%;
  height: 58%;
  left: -25%;
  bottom: -10%;
  transform: rotate(-24deg);
  background:
    linear-gradient(90deg,
      rgba(0,169,130,.15) 0%,
      rgba(24,201,139,.72) 27%,
      rgba(99,218,90,.82) 56%,
      rgba(166,235,72,.86) 78%,
      rgba(220,255,128,.55) 100%);
  box-shadow:
    0 -14px 0 rgba(24,201,139,.13),
    0 -30px 0 rgba(166,235,72,.13);
}

.panel-ribbon-action::after {
  width: 62%;
  height: 86%;
  right: -20%;
  top: 8%;
  transform: rotate(28deg);
  background: linear-gradient(180deg, rgba(166,235,72,.58), rgba(24,201,139,.52), rgba(255,255,255,0));
}

.decision-tool-copy {
  position: relative;
  z-index: 2;
  min-height: 150px;
}

.decision-tool-copy h3 {
  margin: 0;
  font-size: 1.72rem;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 500;
}

.decision-tool-copy p {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
}

.tool-ui {
  position: relative;
  z-index: 3;
  margin-top: 74px;
  padding: 24px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.97);
  box-shadow: none;
}

.constraint-ui { margin-top: 58px; }
.action-ui { margin-top: 63px; }

.tool-ui-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.tool-ui-header strong {
  display: block;
  margin-top: 6px;
  font-size: .86rem;
  font-weight: 500;
}

.tool-overline {
  color: var(--green-deep);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tool-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--green-deep);
  background: #eafbf4;
  font-size: .63rem;
}

.tool-status span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
}

.action-status {
  color: #537b10;
  background: #f0fad8;
}

.position-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: .73rem;
}

.position-row span { color: var(--muted); }
.position-row strong { font-weight: 500; text-align: right; }

.tool-action {
  width: 100%;
  min-height: 42px;
  margin-top: 21px;
  border: 0;
  border-radius: 8px;
  color: var(--green-deep);
  background: #eafbf4;
  font: inherit;
  font-size: .72rem;
  font-weight: 500;
}

.filter-icon {
  color: var(--green-deep);
  font-size: 1rem;
}

.constraint-control {
  margin-top: 19px;
}

.constraint-control > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: .68rem;
}

.constraint-control strong {
  color: var(--ink);
  font-weight: 500;
}

.range-track {
  height: 4px;
  position: relative;
  margin-top: 10px;
  border-radius: 999px;
  background: #e8edef;
}

.range-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #087f6f, #18c98b);
}

.range-track i {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #00a982;
  box-shadow: 0 0 0 4px rgba(0,169,130,.1);
}

.tool-note {
  margin-top: 24px;
  padding: 12px 13px;
  border-radius: 8px;
  color: var(--green-deep);
  background: #edf8f4;
  font-size: .68rem;
}

.action-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.action-number {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--emerald);
  border-radius: 50%;
  color: var(--green-deep);
  background: #eafbf4;
  font-size: .65rem;
}

.action-step strong {
  display: block;
  font-size: .72rem;
  font-weight: 500;
}

.action-step small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .62rem;
}

.action-step em {
  color: var(--quiet);
  font-size: .59rem;
  font-style: normal;
  white-space: nowrap;
}

.action-button {
  color: #537b10;
  background: #f0fad8;
}

.statement-section,
.feature-section,
.industries-section,
.resources-section {
  padding: var(--section-space) 0;
}

.statement-section { border-bottom: 1px solid var(--line); }

.statement-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 120px;
  align-items: start;
}

.statement-grid h2,
.feature-copy h2,
.section-heading-row h2,
.resource-grid h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(2.45rem, 3.8vw, 4.05rem);
  line-height: 1.07;
  letter-spacing: -.042em;
  font-weight: 500;
}

.statement-copy {
  padding-top: 37px;
}

.statement-copy p,
.feature-copy p,
.section-heading-row > p,
.final-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.text-link {
  display: inline-flex;
  gap: 10px;
  margin-top: 28px;
  color: var(--green-deep);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
}

.feature-section {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 112px;
  align-items: center;
}

.position-panel {
  padding: 30px;
  border: 1px solid #dfe6e3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(23,44,39,.08);
}

.panel-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: .84rem;
  font-weight: 500;
}

.position-line {
  display: flex;
  align-items: center;
  margin: 58px 8px;
}

.position-node {
  width: 16px;
  height: 16px;
  border: 4px solid #d8e4df;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 16px;
}

.position-node.active {
  border-color: var(--emerald);
  box-shadow: 0 0 0 7px rgba(24,201,139,.11);
}

.position-path {
  height: 3px;
  background: linear-gradient(90deg, var(--emerald), #d8e4df);
  flex: 1;
}

.panel-metrics {
  display: grid;
  gap: 14px;
}

.panel-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

.panel-metrics span {
  color: var(--muted);
  text-align: right;
}

.feature-copy p { margin-top: 25px; }

.industries-section { border-bottom: 1px solid var(--line); }

.section-heading-row {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 110px;
  align-items: end;
}

.industry-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 70px;
}

.industry-row span,
.resource-list span {
  padding: 21px 23px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: .82rem;
  font-weight: 500;
  background: #fff;
}

.resources-section {
  color: #fff;
  background: #0f1f1b;
}

.resources-section .section-kicker { color: #8ee7c7; }

.resource-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 92px;
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.resource-list span {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.final-cta {
  padding: 132px 0;
}

.final-cta-shell {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 19px;
  border-radius: 8px;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
}

.button-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--green-deep), var(--green));
  box-shadow: 0 12px 28px rgba(0,127,111,.16);
}

footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.footer-shell {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: .76rem;
}


@media (max-width: 1120px) {
  .decision-tool-grid {
    grid-template-columns: 1fr;
  }

  .decision-tool-panel {
    min-height: 620px;
  }

  .tool-ui {
    width: min(100%, 560px);
  }
}

@media (max-width: 980px) {
  .main-nav { display: none; }

  .hero {
    min-height: auto;
  }

  .hero-shell {
    padding-bottom: 110px;
  }

  .hero-copy {
    padding-top: 112px;
  }

  .hero-ribbon {
    background-size: cover;
    background-position: center center;
  }

  .hero-copy-row {
    display: block;
  }

  .hero-inline-link {
    margin-top: 22px;
  }

  .dashboard-stage {
    margin-top: 62px;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar { display: none; }

  .dashboard-cards {
    grid-template-columns: 1fr;
  }

  .principles-grid,
  .statement-grid,
  .feature-grid,
  .section-heading-row,
  .resource-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .principles article {
    min-height: auto;
    padding: 34px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .principles article:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .principles article:last-child {
    padding-bottom: 0;
  }

  .statement-copy {
    padding-top: 0;
  }
}

@media (max-width: 680px) {
  .decision-tools {
    padding: 96px 0 108px;
  }

  .decision-tools-intro {
    margin-bottom: 48px;
  }

  .decision-tool-panel {
    min-height: 610px;
    padding: 28px 22px 24px;
  }

  .decision-tool-copy {
    min-height: 140px;
  }

  .tool-ui,
  .constraint-ui,
  .action-ui {
    margin-top: 42px;
    padding: 20px;
  }

  .action-step {
    grid-template-columns: 26px 1fr;
  }

  .action-step em {
    grid-column: 2;
  }


  .shell {
    width: min(calc(100% - 32px), var(--shell));
  }

  .nav-link,
  .nav-cta {
    display: none;
  }

  .hero-shell {
    padding-bottom: 86px;
  }

  .hero-copy {
    padding-top: 94px;
  }

  h1 {
    font-size: clamp(2.75rem, 11.5vw, 3.9rem);
    line-height: 1.03;
  }

  .hero-lede {
    font-size: .94rem;
  }

  .hero-ribbon {
    background-size: cover;
    background-position: center center;
  }

  .dashboard-stage {
    margin-top: 48px;
  }

  .dashboard-preview {
    border-radius: 13px;
  }

  .dashboard-topbar {
    height: 51px;
  }

  .workspace-chip { display: none; }

  .dashboard-content {
    padding: 19px;
  }

  .dashboard-heading-row {
    display: block;
  }

  .status-pill {
    margin-top: 14px;
  }

  .dashboard-heading-row h2 {
    font-size: 1.48rem;
  }

  .dashboard-cards { display: none; }

  .principles {
    padding: 86px 0;
  }

  .statement-section,
  .feature-section,
  .industries-section,
  .resources-section {
    padding: var(--section-space-mobile) 0;
  }

  .statement-grid h2,
  .feature-copy h2,
  .section-heading-row h2,
  .resource-grid h2,
  .final-cta h2 {
    font-size: clamp(2.25rem, 10vw, 3.3rem);
  }

  .industry-row,
  .resource-list {
    grid-template-columns: 1fr;
  }

  .industry-row {
    margin-top: 46px;
  }

  .final-cta {
    padding: 96px 0;
  }

  .final-cta-shell,
  .footer-shell {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-metrics div {
    flex-direction: column;
    gap: 6px;
  }

  .panel-metrics span {
    text-align: left;
  }
}


/* =========================================================
   VERSION 7 — LOCKED HERO & SECTION 2
   ========================================================= */

/* Hero copy contains only the locked title and sub-text. */
.hero-copy-minimal {
  width: min(100%, 1000px);
  padding-top: 138px;
}

.hero-copy-minimal h1 {
  max-width: 930px;
}

.hero-subtext {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.55;
  letter-spacing: .005em;
}

/* Section 2: one horizontal Architectural Ribbon Panel. */
.decision-system-section {
  padding: 156px 0 176px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.decision-system-intro {
  max-width: 980px;
  margin-bottom: 72px;
}

.decision-system-intro h2 {
  max-width: 930px;
  margin: 0;
  font-size: clamp(2.55rem, 4vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 500;
}

.decision-system-intro p {
  max-width: 820px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.65;
}

.decision-system-panel {
  min-height: 630px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 52px 38px 40px;
  border: 1px solid rgba(16,24,40,.13);
  border-radius: 20px;
  background: #f9fcfb;
}

.decision-system-ribbon {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      rgba(248,252,251,.93) 34%,
      rgba(237,249,244,.95) 100%);
}

.ribbon-band {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform-origin: center;
}

/* One continuous semantic composition:
   broad orientation → constrained convergence → opening options. */
.ribbon-band-one {
  width: 72%;
  height: 34%;
  left: -18%;
  bottom: 2%;
  transform: rotate(-12deg);
  background: linear-gradient(90deg,
    rgba(4,123,119,.72),
    rgba(0,169,130,.72) 42%,
    rgba(24,201,139,.45) 72%,
    rgba(186,244,221,0));
  box-shadow:
    0 -18px 0 rgba(0,169,130,.1),
    0 -38px 0 rgba(143,235,198,.12);
}

.ribbon-band-two {
  width: 48%;
  height: 76%;
  left: 29%;
  bottom: -36%;
  transform: rotate(12deg) skewX(-7deg);
  background: linear-gradient(145deg,
    rgba(5,74,93,.78),
    rgba(4,123,119,.8) 38%,
    rgba(0,169,130,.64) 66%,
    rgba(24,201,139,0));
  box-shadow:
    -18px 0 0 rgba(5,74,93,.1),
    20px 0 0 rgba(24,201,139,.08);
}

.ribbon-band-three {
  width: 74%;
  height: 42%;
  right: -24%;
  top: 5%;
  transform: rotate(24deg);
  background: linear-gradient(90deg,
    rgba(24,201,139,0),
    rgba(24,201,139,.55) 28%,
    rgba(99,218,90,.72) 58%,
    rgba(166,235,72,.65) 82%,
    rgba(220,255,128,.18));
  box-shadow:
    0 18px 0 rgba(24,201,139,.08),
    0 38px 0 rgba(166,235,72,.08);
}

.decision-system-flow {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 0 8px 34px;
  color: var(--green-deep);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.decision-system-flow i {
  height: 1px;
  position: relative;
  background: linear-gradient(90deg, rgba(0,169,130,.2), rgba(0,169,130,.7));
}

.decision-system-flow i::after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--green);
  border-right: 1px solid var(--green);
  transform: translateY(-50%) rotate(45deg);
}

.decision-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.decision-module {
  min-height: 440px;
  padding: 24px;
  border: 1px solid rgba(16,24,40,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
}

.module-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.module-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border: 1px solid rgba(0,169,130,.3);
  border-radius: 50%;
  color: var(--green-deep);
  background: #eafbf4;
  font-size: .62rem;
}

.module-kicker {
  color: var(--green-deep);
  font-size: .57rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.module-heading h3 {
  margin: 5px 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.025em;
}

.module-body {
  padding-top: 13px;
}

.module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: .7rem;
}

.module-row span {
  color: var(--muted);
}

.module-row strong {
  font-weight: 500;
  text-align: right;
}

.positive-text {
  color: var(--green-deep);
}

.filter-control {
  margin-top: 18px;
}

.filter-control > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: .68rem;
}

.filter-control strong {
  color: var(--ink);
  font-weight: 500;
}

.filter-track {
  height: 4px;
  position: relative;
  margin-top: 10px;
  border-radius: 999px;
  background: #e8edef;
}

.filter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #087f6f, #18c98b);
}

.filter-track i {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #00a982;
  box-shadow: 0 0 0 4px rgba(0,169,130,.1);
}

.goal-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.goal-chip-row span {
  padding: 7px 9px;
  border: 1px solid rgba(0,169,130,.18);
  border-radius: 999px;
  color: var(--green-deep);
  background: #edf8f4;
  font-size: .62rem;
}

.path-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.path-option.recommended {
  border-color: rgba(0,169,130,.28);
  background: #f1fbf7;
}

.path-option.compact {
  min-height: 64px;
}

.path-label {
  display: block;
  margin-bottom: 6px;
  color: var(--green-deep);
  font-size: .55rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.path-option strong {
  display: block;
  font-size: .72rem;
  font-weight: 500;
}

.path-option small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .61rem;
}

.path-arrow {
  color: var(--green-deep);
  font-size: 1rem;
}

@media (max-width: 980px) {
  .hero-copy-minimal {
    padding-top: 118px;
  }

  .decision-module-grid {
    grid-template-columns: 1fr;
  }

  .decision-system-panel {
    padding: 38px 26px 30px;
  }

  .decision-module {
    min-height: auto;
  }

  .decision-system-flow {
    display: none;
  }
}

@media (max-width: 680px) {
  .hero-copy-minimal {
    padding-top: 98px;
  }

  .hero-subtext {
    font-size: .72rem;
  }

  .decision-system-section {
    padding: 104px 0 116px;
  }

  .decision-system-intro {
    margin-bottom: 48px;
  }

  .decision-system-panel {
    padding: 26px 18px 22px;
    border-radius: 16px;
  }

  .decision-module {
    padding: 20px;
  }
}


/* =========================================================
   VERSION 8 — APPROVED UI COMPONENTS RESTORED
   ========================================================= */

.decision-system-panel.approved-card-environment {
  min-height: 790px;
  padding: 0;
  border-radius: 20px;
  background: #f8fbfa;
}

.approved-card-environment .decision-system-ribbon {
  inset: 0;
}

.decision-card-grid {
  min-height: 790px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
  padding: 34px;
}

.decision-tool-card {
  min-height: 720px;
  display: flex;
  flex-direction: column;
  padding: 34px 36px 30px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.decision-card-copy {
  min-height: 190px;
}

.decision-card-copy h3 {
  margin: 0;
  font-size: 1.72rem;
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 500;
}

.decision-card-copy p {
  max-width: 320px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.6;
}

.approved-tool-ui {
  margin-top: auto;
  padding: 28px 30px 24px;
  border: 1px solid rgba(16,24,40,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: none;
}

.approved-tool-ui .tool-ui-header {
  margin-bottom: 24px;
}

.approved-tool-ui .tool-ui-header strong {
  font-size: .94rem;
}

.approved-tool-ui .tool-overline {
  font-size: .6rem;
}

.approved-tool-ui .position-row {
  padding: 15px 0;
  font-size: .75rem;
}

.approved-tool-ui .tool-action {
  min-height: 52px;
  margin-top: 26px;
  border-radius: 9px;
  font-size: .74rem;
}

.approved-tool-ui .constraint-control {
  margin-top: 20px;
}

.approved-tool-ui .tool-note {
  margin-top: 28px;
  padding: 14px 16px;
}

.approved-tool-ui .action-step {
  padding: 17px 0;
}

.approved-tool-ui .action-step strong {
  font-size: .75rem;
}

.approved-tool-ui .action-step small {
  font-size: .63rem;
}

.approved-tool-ui .action-step em {
  font-size: .59rem;
}

/* Sentence case is now the default for all visible headings and labels.
   Small overline labels may retain uppercase styling via CSS only. */

@media (max-width: 1180px) {
  .decision-card-grid {
    grid-template-columns: 1fr;
  }

  .decision-tool-card {
    min-height: auto;
  }

  .decision-card-copy {
    min-height: 150px;
  }
}

@media (max-width: 680px) {
  .decision-card-grid {
    padding: 18px;
    gap: 16px;
  }

  .decision-tool-card {
    padding: 28px 22px 22px;
  }

  .decision-card-copy {
    min-height: 135px;
  }

  .approved-tool-ui {
    padding: 22px 20px 20px;
  }
}


/* =========================================================
   VERSION 10 — COMPLETE HOMEPAGE ARCHITECTURE
   ========================================================= */

.v10-section-two,
.v10-route-section,
.v10-method-section,
.v10-progress-section,
.v10-final-cta {
  background: #fff;
}

.v10-section-two {
  padding: 180px 0 170px;
}

.v10-immersive-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.13);
  border-radius: 21px;
}

.v10-position-panel {
  min-height: 940px;
  padding: 58px 34px 34px;
  background: #effbf6;
}

.v10-position-ribbon {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.98) 0 19%, rgba(255,255,255,.35) 34%, transparent 47%),
    linear-gradient(145deg, #f9fdfb 0%, #dcf7eb 26%, #73dfb5 57%, #13aa88 78%, #087f6f 100%);
}

.v10-position-ribbon span {
  position: absolute;
  display: block;
  border-radius: 50%;
  transform-origin: center;
}

.v10-ribbon-a {
  width: 118%;
  height: 43%;
  left: -26%;
  bottom: -2%;
  transform: rotate(-10deg);
  background: linear-gradient(90deg, rgba(4,123,119,.92), rgba(0,169,130,.87) 34%, rgba(24,201,139,.68) 66%, rgba(166,235,72,.55));
  box-shadow: 0 -18px 0 rgba(231,250,243,.42), 0 -38px 0 rgba(255,255,255,.2);
}

.v10-ribbon-b {
  width: 66%;
  height: 83%;
  right: -20%;
  top: -20%;
  transform: rotate(32deg);
  background: linear-gradient(150deg, rgba(166,235,72,.82), rgba(99,218,90,.74) 42%, rgba(24,201,139,.3) 73%, transparent);
}

.v10-ribbon-c {
  width: 76%;
  height: 37%;
  left: 22%;
  top: 36%;
  transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(229,251,242,.62), rgba(255,255,255,.2));
  box-shadow: 0 15px 0 rgba(255,255,255,.18);
}

.v10-panel-heading {
  max-width: 970px;
  position: relative;
  z-index: 3;
  padding: 6px 16px 52px;
}

.v10-panel-heading h2 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(2.45rem, 4.1vw, 4.35rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 500;
}

.v10-panel-heading p {
  max-width: 790px;
  margin: 23px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.65;
}

.v10-input-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 3;
}

.v10-input-card {
  min-height: 700px;
  display: flex;
  flex-direction: column;
  padding: 34px 36px 30px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.89);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.v10-card-copy {
  min-height: 180px;
}

.v10-card-copy h3 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 500;
}

.v10-card-copy p {
  max-width: 315px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.62;
}

.v10-input-card .approved-tool-ui {
  margin-top: auto;
  padding: 27px 29px 24px;
  border: 1px solid rgba(16,24,40,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  box-shadow: none;
}

.v10-goal-status {
  color: #557c17;
  background: #f0fad8;
}

.v10-goal-option {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.v10-goal-check {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,169,130,.34);
  border-radius: 50%;
  color: var(--green-deep);
  font-size: .66rem;
}

.v10-goal-option strong,
.v10-goal-option small {
  display: block;
}

.v10-goal-option strong {
  font-size: .74rem;
  font-weight: 500;
}

.v10-goal-option small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.45;
}

.v10-goal-option.selected .v10-goal-check {
  color: #fff;
  background: var(--emerald);
}

.v10-goal-button {
  color: #527913;
  background: #f0fad8;
}

/* Section 3: editorial product proof */
.v10-route-section {
  padding: 188px 0 184px;
  border-top: 1px solid var(--line);
}

.v10-editorial-heading {
  max-width: 920px;
  margin-bottom: 78px;
}

.v10-editorial-heading h2 {
  margin: 0;
  font-size: clamp(2.75rem, 4.55vw, 4.85rem);
  line-height: 1.04;
  letter-spacing: -.048em;
  font-weight: 500;
}

.v10-editorial-heading > p:last-child {
  max-width: 700px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.v10-route-dashboard {
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.14);
  border-radius: 18px;
  background: #fff;
}

.v10-route-topbar {
  min-height: 78px;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

.v10-window-controls {
  display: flex;
  gap: 7px;
}

.v10-window-controls span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9e1e7;
}

.v10-route-title-block strong {
  display: block;
  margin-top: 5px;
  font-size: .83rem;
  font-weight: 500;
}

.v10-route-actions {
  display: flex;
  gap: 8px;
}

.v10-route-actions button {
  min-height: 35px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: .65rem;
}

.v10-route-actions .v10-primary-mini {
  border-color: var(--green-deep);
  color: #fff;
  background: var(--green-deep);
}

.v10-route-body {
  display: grid;
  grid-template-columns: 245px 1fr;
  min-height: 570px;
}

.v10-route-sidebar {
  padding: 30px 25px;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
}

.v10-side-label {
  color: var(--green-deep);
  font-size: .59rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.v10-route-sidebar > strong {
  display: block;
  margin: 12px 0 31px;
  font-size: .8rem;
  line-height: 1.5;
  font-weight: 500;
}

.v10-side-stat {
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.v10-side-stat span,
.v10-side-stat strong {
  display: block;
}

.v10-side-stat span {
  color: var(--muted);
  font-size: .62rem;
}

.v10-side-stat strong {
  margin-top: 6px;
  font-size: .7rem;
  font-weight: 500;
}

.v10-route-legend {
  display: grid;
  gap: 10px;
  margin-top: 38px;
}

.v10-route-legend span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: .62rem;
}

.v10-route-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.recommended-dot { background: var(--emerald); }
.alternate-dot { background: #7fa7b5; }
.later-dot { background: #d9e1e7; }

.v10-map-canvas {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(16,24,40,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,24,40,.035) 1px, transparent 1px),
    radial-gradient(circle at 84% 16%, rgba(166,235,72,.15), transparent 25%),
    #fff;
  background-size: 40px 40px, 40px 40px, auto, auto;
}

.v10-route-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.route-base {
  fill: none;
  stroke: #e7edef;
  stroke-width: 18;
  stroke-linecap: round;
}

.route-main {
  fill: none;
  stroke: url(#routeGradient);
  stroke-width: 8;
  stroke-linecap: round;
  filter: url(#softGlow);
}

.route-alt {
  fill: none;
  stroke: #92adb6;
  stroke-width: 4;
  stroke-dasharray: 9 10;
  stroke-linecap: round;
}

.route-node {
  fill: #fff;
  stroke: #18c98b;
  stroke-width: 5;
}

.route-node.current {
  stroke: #087f6f;
}

.route-node.destination {
  fill: #a6eb48;
  stroke: #fff;
  stroke-width: 5;
}

.route-node.alternate {
  stroke: #92adb6;
}

.v10-map-label {
  position: absolute;
  min-width: 135px;
  padding: 12px 13px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 9px;
  background: rgba(255,255,255,.96);
}

.v10-map-label span,
.v10-map-label strong,
.v10-map-label small {
  display: block;
}

.v10-map-label span {
  color: var(--green-deep);
  font-size: .54rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.v10-map-label strong {
  margin-top: 5px;
  font-size: .68rem;
  font-weight: 500;
}

.v10-map-label small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .56rem;
}

.current-label { left: 3%; bottom: 5%; }
.node-one { left: 20%; bottom: 26%; }
.node-two { left: 42%; bottom: 35%; }
.node-three { right: 19%; top: 22%; }
.destination-label { right: 2%; top: 2%; }
.alternate-label { right: 14%; bottom: 12%; }

.v10-route-footer {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 26px;
  border-top: 1px solid var(--line);
}

.v10-route-footer strong {
  display: block;
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 500;
}

.v10-route-footer a {
  color: var(--green-deep);
  font-size: .67rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Section 4: methodology panel */
.v10-method-section {
  padding: 176px 0 184px;
  border-top: 1px solid var(--line);
}

.v10-method-panel {
  min-height: 790px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 58px 52px 48px;
  border: 1px solid rgba(16,24,40,.13);
  border-radius: 21px;
  background: #edf7f6;
}

.v10-method-ribbon {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.96) 0 22%, rgba(255,255,255,.3) 35%, transparent 49%),
    linear-gradient(135deg, #f8fcfc 0%, #dceff0 28%, #5fc8b8 58%, #0d7e7b 82%, #054a5d 100%);
}

.v10-method-ribbon span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.method-ribbon-one {
  width: 112%;
  height: 45%;
  right: -30%;
  top: 10%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(5,74,93,.83), rgba(4,123,119,.87) 50%, rgba(24,201,139,.7));
  box-shadow: 0 18px 0 rgba(255,255,255,.15), 0 38px 0 rgba(194,244,228,.17);
}

.method-ribbon-two {
  width: 58%;
  height: 78%;
  left: -20%;
  bottom: -35%;
  transform: rotate(-28deg);
  background: linear-gradient(150deg, rgba(5,74,93,.88), rgba(4,123,119,.64), rgba(24,201,139,.12));
}

.method-ribbon-three {
  width: 62%;
  height: 30%;
  right: -8%;
  bottom: -5%;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, rgba(24,201,139,.2), rgba(166,235,72,.6), rgba(220,255,128,.38));
}

.v10-method-copy {
  max-width: 760px;
  position: relative;
  z-index: 3;
}

.v10-panel-label {
  display: inline-block;
  color: var(--green-deep);
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.v10-method-copy h2 {
  max-width: 730px;
  margin: 18px 0 0;
  font-size: clamp(2.4rem, 4vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 500;
}

.v10-method-copy p {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.67;
}

.v10-signal-engine {
  display: grid;
  grid-template-columns: 1fr .75fr 1.05fr;
  gap: 22px;
  align-items: center;
  position: relative;
  z-index: 3;
  margin-top: 68px;
}

.v10-signal-column {
  display: grid;
  gap: 10px;
}

.v10-signal-chip {
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 11px;
  padding: 14px 15px;
  border: 1px solid rgba(16,24,40,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.93);
}

.v10-signal-chip > span {
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green-deep);
  background: #eafbf4;
  font-size: .58rem;
}

.v10-signal-chip strong {
  font-size: .7rem;
  font-weight: 500;
}

.v10-signal-chip small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .58rem;
}

.v10-engine-core {
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
}

.v10-core-orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
}

.orbit-one {
  width: 92%;
  height: 92%;
}

.orbit-two {
  width: 68%;
  height: 68%;
  border-style: dashed;
}

.v10-core-center {
  width: 55%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.93);
}

.v10-core-center span,
.v10-core-center strong,
.v10-core-center small {
  display: block;
}

.v10-core-center span {
  color: var(--green-deep);
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.v10-core-center strong {
  margin-top: 4px;
  font-size: .76rem;
  font-weight: 500;
}

.v10-core-center small {
  margin-top: 6px;
  color: var(--muted);
  font-size: .54rem;
}

.v10-output-column {
  padding: 22px;
  border: 1px solid rgba(16,24,40,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.95);
}

.v10-output-card {
  margin-top: 13px;
  padding: 18px;
  border: 1px solid rgba(0,169,130,.22);
  border-radius: 11px;
  background: #effaf6;
}

.v10-output-status {
  color: var(--green-deep);
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.v10-output-card strong {
  display: block;
  margin-top: 9px;
  font-size: .8rem;
  line-height: 1.42;
  font-weight: 500;
}

.v10-output-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.55;
}

.v10-output-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 13px;
  border-top: 1px solid var(--line);
}

.v10-output-metrics div {
  padding: 14px 7px 2px;
  text-align: center;
}

.v10-output-metrics span,
.v10-output-metrics strong {
  display: block;
}

.v10-output-metrics span {
  color: var(--muted);
  font-size: .52rem;
  line-height: 1.3;
}

.v10-output-metrics strong {
  margin-top: 5px;
  font-size: .78rem;
  font-weight: 500;
}

/* Section 5: feature grid */
.v10-progress-section {
  padding: 178px 0 190px;
  border-top: 1px solid var(--line);
}

.v10-progress-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.v10-progress-card {
  min-height: 650px;
  position: relative;
  overflow: hidden;
  padding: 32px 30px 30px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 17px;
  background: #fbfcfc;
}

.v10-progress-copy {
  min-height: 225px;
}

.v10-card-index {
  color: var(--green-deep);
  font-size: .58rem;
  letter-spacing: .08em;
}

.v10-progress-copy h3 {
  max-width: 340px;
  margin: 18px 0 0;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -.038em;
  font-weight: 500;
}

.v10-progress-copy p {
  max-width: 335px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.65;
}

.v10-progress-ui,
.v10-recalculate-ui,
.v10-history-ui {
  margin-top: 55px;
  padding: 23px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 13px;
  background: rgba(255,255,255,.97);
}

.v10-progress-track {
  background:
    radial-gradient(circle at 50% 82%, rgba(24,201,139,.2), transparent 35%),
    #fbfcfc;
}

.v10-progress-recalculate {
  background:
    radial-gradient(circle at 65% 78%, rgba(4,123,119,.15), transparent 37%),
    #fbfcfc;
}

.v10-progress-history {
  background:
    radial-gradient(circle at 50% 80%, rgba(166,235,72,.2), transparent 38%),
    #fbfcfc;
}

.v10-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: .68rem;
}

.v10-progress-head span { color: var(--muted); }
.v10-progress-head strong { font-weight: 500; }

.v10-progress-bar {
  height: 5px;
  margin: 12px 0 22px;
  border-radius: 999px;
  background: #e9edef;
}

.v10-progress-bar span {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #087f6f, #18c98b, #a6eb48);
}

.v10-milestone {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.v10-milestone i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd9dd;
  border-radius: 50%;
  color: var(--muted);
  font-size: .62rem;
  font-style: normal;
}

.v10-milestone.completed i {
  border-color: var(--emerald);
  color: #fff;
  background: var(--emerald);
}

.v10-milestone.active i {
  border-color: var(--emerald);
  color: var(--green-deep);
  background: #eafbf4;
}

.v10-milestone strong,
.v10-milestone small {
  display: block;
}

.v10-milestone strong {
  font-size: .69rem;
  font-weight: 500;
}

.v10-milestone small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .57rem;
}

.v10-change-alert {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.v10-pulse {
  width: 12px;
  height: 12px;
  border: 3px solid rgba(24,201,139,.24);
  border-radius: 50%;
  background: var(--emerald);
}

.v10-change-alert strong,
.v10-change-alert small {
  display: block;
}

.v10-change-alert strong {
  font-size: .7rem;
  font-weight: 500;
}

.v10-change-alert small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .58rem;
}

.v10-route-shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 25px 0;
}

.v10-route-shift div {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcfd;
}

.v10-route-shift span,
.v10-route-shift strong {
  display: block;
}

.v10-route-shift div span {
  color: var(--muted);
  font-size: .54rem;
}

.v10-route-shift strong {
  margin-top: 6px;
  font-size: .64rem;
  line-height: 1.4;
  font-weight: 500;
}

.v10-shift-arrow {
  color: var(--green-deep);
}

.v10-recalculate-ui button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  color: var(--green-deep);
  background: #eafbf4;
  font: inherit;
  font-size: .68rem;
}

.v10-history-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 13px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.v10-history-row:first-child {
  border-top: 0;
}

.v10-history-date {
  color: var(--green-deep);
  font-size: .58rem;
}

.v10-history-row strong,
.v10-history-row small {
  display: block;
}

.v10-history-row strong {
  font-size: .69rem;
  font-weight: 500;
}

.v10-history-row small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .58rem;
  line-height: 1.45;
}

/* CTA */
.v10-final-cta {
  padding: 0 0 120px;
}

.v10-cta-panel {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 52px;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 20%, rgba(166,235,72,.34), transparent 28%),
    linear-gradient(135deg, #f7fcfa, #e8f9f1);
}

.v10-cta-panel h2 {
  margin: 15px 0 0;
  font-size: clamp(2.25rem, 3.8vw, 3.8rem);
  line-height: 1.07;
  letter-spacing: -.043em;
  font-weight: 500;
}

@media (max-width: 1120px) {
  .v10-input-grid,
  .v10-progress-grid {
    grid-template-columns: 1fr;
  }

  .v10-input-card {
    min-height: auto;
  }

  .v10-card-copy {
    min-height: 150px;
  }

  .v10-signal-engine {
    grid-template-columns: 1fr;
  }

  .v10-engine-core {
    width: min(330px, 100%);
    justify-self: center;
  }

  .v10-progress-card {
    min-height: auto;
  }
}

@media (max-width: 900px) {
  .v10-route-body {
    grid-template-columns: 1fr;
  }

  .v10-route-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .v10-map-canvas {
    min-height: 560px;
  }

  .v10-route-topbar {
    grid-template-columns: 1fr auto;
  }

  .v10-window-controls {
    display: none;
  }
}

@media (max-width: 680px) {
  .v10-section-two,
  .v10-route-section,
  .v10-method-section,
  .v10-progress-section {
    padding: 108px 0 116px;
  }

  .v10-position-panel,
  .v10-method-panel {
    padding: 32px 18px 20px;
    border-radius: 16px;
  }

  .v10-panel-heading {
    padding: 0 4px 42px;
  }

  .v10-input-grid {
    gap: 16px;
  }

  .v10-input-card {
    padding: 28px 22px 22px;
  }

  .v10-input-card .approved-tool-ui {
    padding: 22px 20px 20px;
  }

  .v10-editorial-heading {
    margin-bottom: 52px;
  }

  .v10-route-topbar {
    padding: 18px;
  }

  .v10-route-actions {
    display: none;
  }

  .v10-route-footer,
  .v10-cta-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .v10-map-label {
    min-width: 112px;
    padding: 9px;
  }

  .v10-signal-engine {
    margin-top: 48px;
  }

  .v10-output-metrics {
    grid-template-columns: 1fr;
  }

  .v10-progress-card {
    padding: 28px 22px 22px;
  }

  .v10-progress-copy {
    min-height: 190px;
  }

  .v10-route-shift {
    grid-template-columns: 1fr;
  }

  .v10-shift-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .v10-final-cta {
    padding-bottom: 80px;
  }

  .v10-cta-panel {
    padding: 34px 28px;
  }
}

/* ================================================================
   Theme v4 — Native editable header template part
   ================================================================ */
.site-header.wp-block-group {
  max-width: none;
  margin: 0;
  padding: 0;
}

.site-header .nav-shell.wp-block-group {
  width: min(1180px, calc(100% - 48px));
  max-width: none;
  margin-inline: auto;
}

.site-header .wp-block-navigation.main-nav {
  margin: 0;
}

.site-header .main-nav .wp-block-navigation-item__content {
  color: inherit;
  text-decoration: none;
}

.site-header .nav-actions.wp-block-group,
.site-header .nav-actions .wp-block-buttons,
.site-header .nav-actions .wp-block-button {
  margin: 0;
}

.site-header .nav-actions .nav-link {
  margin: 0;
}

.site-header .nav-actions .nav-link a {
  color: inherit;
  text-decoration: none;
}

.site-header .nav-actions .nav-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

.site-header .nav-actions .nav-cta .wp-block-button__link:hover {
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .site-header .wp-block-navigation.main-nav {
    display: flex;
  }

  .site-header .main-nav .wp-block-navigation__responsive-container-open {
    display: flex;
  }

  .site-header .main-nav .wp-block-navigation__container {
    display: none;
  }
}


/* ================================================================
   Theme v5 — Official GPM logo + restored Hero Architectural Ribbon
   ================================================================ */
.brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 10px;
  object-fit: cover;
}

.brand-mark {
  display: none;
}

.hero-ribbon {
  background-image: url("gpm-hero-ribbon.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 720px) {
  .brand-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 9px;
  }
}


/* ================================================================
   Theme v6 — Architectural Ribbon Ombre Pattern Library
   ================================================================ */
.gpm-ribbon {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(8, 43, 35, 0.10);
  border-radius: 22px;
  isolation: isolate;
  min-height: 440px;
  background:
    radial-gradient(120% 140% at 95% 5%, rgba(153, 255, 68, 0.95) 0%, rgba(38, 213, 126, 0.72) 34%, transparent 62%),
    radial-gradient(95% 110% at 72% 85%, rgba(0, 181, 143, 0.90) 0%, rgba(0, 113, 97, 0.84) 48%, transparent 72%),
    linear-gradient(135deg, #f8fffb 0%, #dff8eb 32%, #7ee6b4 62%, #0fa27c 100%);
}

.gpm-ribbon::before,
.gpm-ribbon::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(0.2px);
}

.gpm-ribbon::before {
  width: 78%;
  height: 42%;
  right: -8%;
  top: 5%;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(191,255,145,0.58), rgba(0,195,150,0.38));
}

.gpm-ribbon::after {
  width: 92%;
  height: 50%;
  left: -18%;
  bottom: -18%;
  transform: rotate(12deg);
  background: linear-gradient(90deg, rgba(2,83,71,0.78), rgba(19,188,132,0.72), rgba(173,255,106,0.34));
}

.gpm-ribbon-content {
  position: relative;
  z-index: 2;
}

.gpm-ribbon-content-top {
  max-width: 70%;
  margin-left: 0;
  padding: clamp(2.5rem, 6vw, 6rem);
}

.gpm-ribbon-70-white {
  min-height: 420px;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 66%, rgba(255,255,255,0.15) 78%, transparent 100%),
    radial-gradient(110% 135% at 100% 10%, #a3ff55 0%, #1fd08f 35%, #007d69 70%, #043b36 100%);
}

.gpm-ribbon-two-column {
  gap: 24px;
}

.gpm-ribbon-panel {
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.gpm-ribbon-panel-a {
  background:
    radial-gradient(120% 100% at 10% 5%, rgba(177,255,93,0.98) 0%, rgba(18,206,137,0.88) 42%, rgba(0,96,82,0.96) 100%),
    linear-gradient(135deg, #d9ffb7, #00aa83);
}

.gpm-ribbon-panel-b {
  background:
    radial-gradient(110% 105% at 95% 15%, rgba(46,226,204,0.98) 0%, rgba(0,160,126,0.88) 48%, rgba(3,65,61,0.98) 100%),
    linear-gradient(135deg, #77f0d0, #006b5a);
}

.gpm-ribbon-text-box {
  width: min(78%, 520px);
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.96);
  color: #081f2c;
  border: 1px solid rgba(8, 43, 35, 0.10);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(1, 47, 39, 0.10);
  backdrop-filter: blur(8px);
}

.gpm-ribbon-full-text-box {
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 5rem);
}

.gpm-ribbon-text-box-wide {
  width: min(70%, 900px);
}

.gpm-eyebrow {
  margin-bottom: 0.75rem;
  color: #008d6c;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .gpm-ribbon-content-top,
  .gpm-ribbon-text-box-wide,
  .gpm-ribbon-text-box {
    max-width: none;
    width: 100%;
  }

  .gpm-ribbon-two-column {
    gap: 18px;
  }

  .gpm-ribbon-panel,
  .gpm-ribbon-full-text-box {
    min-height: 420px;
  }
}


/* ================================================================
   Theme v7 — Shared UI Component Library
   ================================================================ */
.gpm-btn-primary .wp-block-button__link,
.wp-block-button.gpm-btn-primary .wp-block-button__link {
  background: #4055E8;
  color: #FFFFFF;
  border: 1px solid #4055E8;
  border-radius: 6px;
  padding: 0.9rem 1.35rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(64, 85, 232, 0.14);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.gpm-btn-primary .wp-block-button__link:hover,
.wp-block-button.gpm-btn-primary .wp-block-button__link:hover {
  background: #3347D6;
  border-color: #3347D6;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(64, 85, 232, 0.20);
}

.gpm-btn-primary .wp-block-button__link:focus-visible,
.wp-block-button.gpm-btn-primary .wp-block-button__link:focus-visible {
  outline: 3px solid rgba(64, 85, 232, 0.28);
  outline-offset: 3px;
}

.gpm-btn-secondary .wp-block-button__link,
.wp-block-button.gpm-btn-secondary .wp-block-button__link {
  background: #FFFFFF;
  color: #0B1F2A;
  border: 1px solid rgba(11, 31, 42, 0.18);
  border-radius: 6px;
  padding: 0.9rem 1.35rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.gpm-btn-secondary .wp-block-button__link:hover,
.wp-block-button.gpm-btn-secondary .wp-block-button__link:hover {
  background: #F7F9FB;
  border-color: rgba(11, 31, 42, 0.32);
  transform: translateY(-1px);
}

.gpm-ui-row {
  gap: 0.65rem;
}

.gpm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin: 0;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.gpm-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
}

.gpm-badge-success {
  color: #087E63;
  background: #E7F8F1;
}

.gpm-badge-info {
  color: #4055E8;
  background: #EEF0FF;
}

.gpm-badge-neutral {
  color: #66737B;
  background: #F1F4F5;
}

.gpm-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #FFFFFF;
  border: 1px solid rgba(11, 31, 42, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(9, 37, 31, 0.04);
}

.gpm-card-eyebrow {
  margin: 0 0 0.65rem;
  color: #008D6C;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.gpm-card h3 {
  margin-top: 0;
}

.gpm-metric-card {
  min-height: 210px;
}

.gpm-metric-value {
  margin-bottom: 0.35rem;
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.gpm-progress-head {
  margin-bottom: 0.8rem;
}

.gpm-progress-head p {
  margin: 0;
}

.gpm-progress-value {
  font-weight: 700;
}

.gpm-progress-track {
  height: 8px;
  overflow: hidden;
  margin: 0.9rem 0 1.3rem;
  background: #E8EEF0;
  border-radius: 999px;
}

.gpm-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #009B76, #9FEA3D);
}

.gpm-progress-list {
  margin: 0;
  padding-left: 1.15rem;
}

.gpm-progress-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(11, 31, 42, 0.08);
}

.gpm-progress-list li:last-child {
  border-bottom: 0;
}


/* Theme v8 — Global Layout System */
:root {
  --gpm-standard: 820px;
  --gpm-wide: 1240px;
  --gpm-gutter: clamp(20px, 4vw, 64px);
}

.gpm-section-full,
.wp-block-group.alignfull.gpm-section-full {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.gpm-content-wide,
.wp-block-group.alignwide.gpm-content-wide {
  width: min(calc(100% - (var(--gpm-gutter) * 2)), var(--gpm-wide));
  max-width: var(--gpm-wide);
  margin-left: auto;
  margin-right: auto;
}

.gpm-content-standard {
  width: min(calc(100% - (var(--gpm-gutter) * 2)), var(--gpm-standard));
  max-width: var(--gpm-standard);
  margin-left: auto;
  margin-right: auto;
}

.gpm-public-section {
  padding: clamp(4rem, 8vw, 8rem) 0;
  background: #fff;
}

.gpm-section-full.gpm-ribbon,
.alignfull.gpm-ribbon {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.gpm-journey {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
}

.gpm-journey-step {
  flex: 1 1 180px;
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid rgba(11,31,42,.10);
  border-radius: 14px;
  background: #fff;
}

.gpm-step-number {
  margin: 0 0 .7rem;
  color: #008d6c;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.gpm-pricing-grid,
.gpm-testimonials {
  gap: 1.25rem;
  margin-top: 2rem;
}

.gpm-pricing-card { min-height: 360px; }

.gpm-pricing-featured {
  border-color: rgba(64,85,232,.40);
  box-shadow: 0 18px 45px rgba(64,85,232,.10);
}

.gpm-price {
  margin: .4rem 0 1rem;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.gpm-faq .wp-block-details {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(11,31,42,.12);
}

.gpm-faq summary { cursor: pointer; font-weight: 600; }

.gpm-quote-card { min-height: 230px; }

.gpm-logo-strip {
  padding: 1.5rem 0;
  border-top: 1px solid rgba(11,31,42,.10);
  border-bottom: 1px solid rgba(11,31,42,.10);
  background: #fff;
}

.gpm-logo-strip .gpm-content-wide {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.gpm-logo-strip p {
  margin: .5rem 1rem;
  color: #52606a;
  font-weight: 700;
  letter-spacing: .04em;
}

.gpm-comparison,
.gpm-timeline {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.gpm-comparison table {
  overflow: hidden;
  border: 1px solid rgba(11,31,42,.12);
  border-radius: 14px;
}

.gpm-comparison th,
.gpm-comparison td { padding: 1rem; }

.gpm-timeline-item {
  position: relative;
  padding: 0 0 2rem 3rem;
  border-left: 1px solid rgba(0,141,108,.28);
}

.gpm-timeline-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #00a47e;
  box-shadow: 0 0 0 5px #e7f8f1;
}

@media (max-width: 781px) {
  .gpm-content-wide,
  .gpm-content-standard {
    width: min(calc(100% - 32px), 100%);
  }
  .gpm-public-section { padding: 3.5rem 0; }
}


/* ================================================================
   Theme v8.1 — Full-Width Hero Correction
   ================================================================ */
.gpm-hero-full,
.hero.gpm-hero-full {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  overflow: hidden;
}

/* Keep the headline readable and intentionally constrained. */
.gpm-hero-full .hero-copy.gpm-content-standard {
  width: min(calc(100% - (var(--gpm-gutter) * 2)), var(--gpm-standard));
  max-width: var(--gpm-standard);
  margin-left: auto;
  margin-right: auto;
}

/* Allow the dashboard/product visual to occupy the official wide grid. */
.gpm-hero-full .product-shell.gpm-content-wide {
  width: min(calc(100% - (var(--gpm-gutter) * 2)), var(--gpm-wide));
  max-width: var(--gpm-wide);
  margin-left: auto;
  margin-right: auto;
}

/* Ensure the Architectural Ribbon environment spans the full hero width. */
.gpm-hero-full .hero-ribbon,
.gpm-hero-full::before,
.gpm-hero-full::after {
  max-width: none;
}

@media (max-width: 781px) {
  .gpm-hero-full .hero-copy.gpm-content-standard,
  .gpm-hero-full .product-shell.gpm-content-wide {
    width: min(calc(100% - 32px), 100%);
  }
}


/* ================================================================
   Theme v8.2 — Hero Ribbon Layer Correction
   ================================================================ */

/* The Architectural Ribbon Ombre now belongs to the full-width Hero
   environment rather than the inner dashboard container. */
.gpm-hero-ribbon-environment {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 135% at 96% 8%, rgba(166,255,88,0.95) 0%, rgba(45,213,132,0.78) 35%, transparent 64%),
    radial-gradient(110% 120% at 76% 92%, rgba(0,183,152,0.92) 0%, rgba(0,112,99,0.88) 52%, transparent 76%),
    linear-gradient(135deg, #ffffff 0%, #f7fffb 24%, #dff8ec 42%, #77dfb4 66%, #0e9879 100%);
  overflow: hidden;
}

/* Architectural ribbon layers span the entire viewport width. */
.gpm-hero-ribbon-environment::before,
.gpm-hero-ribbon-environment::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
}

.gpm-hero-ribbon-environment::before {
  width: 82vw;
  height: 34vw;
  min-height: 340px;
  right: -16vw;
  top: 22%;
  transform: rotate(-17deg);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.08),
    rgba(184,255,125,0.68),
    rgba(0,198,158,0.42)
  );
}

.gpm-hero-ribbon-environment::after {
  width: 96vw;
  height: 38vw;
  min-height: 390px;
  left: -24vw;
  bottom: -18%;
  transform: rotate(11deg);
  background: linear-gradient(
    90deg,
    rgba(0,82,72,0.80),
    rgba(16,188,139,0.74),
    rgba(164,255,102,0.34)
  );
}

/* Disable the old constrained ribbon layer without changing its content. */
.gpm-hero-ribbon-environment .hero-ribbon-inner,
.gpm-hero-ribbon-environment .hero-ribbon {
  background: transparent !important;
  background-image: none !important;
  max-width: none;
}

/* Keep all Hero content above the full-width ribbon environment. */
.gpm-hero-ribbon-environment > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 781px) {
  .gpm-hero-ribbon-environment::before {
    width: 130vw;
    height: 70vw;
    right: -48vw;
    top: 28%;
  }

  .gpm-hero-ribbon-environment::after {
    width: 150vw;
    height: 82vw;
    left: -60vw;
    bottom: -8%;
  }
}


/* ================================================================
   Theme v8.3 — Verified Full-Width Hero Ribbon
   ================================================================ */

/* Apply the actual Green Point Map Architectural Ribbon asset directly
   to the real Hero section wrapper. */
section.hero.gpm-hero-ribbon-environment {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff !important;
  background-image: url("gpm-hero-ribbon.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Remove the generated v8.2 layers so they cannot cover the image asset. */
section.hero.gpm-hero-ribbon-environment::before,
section.hero.gpm-hero-ribbon-environment::after {
  display: none !important;
  content: none !important;
}

/* The old inner ribbon remains transparent. */
section.hero.gpm-hero-ribbon-environment .hero-ribbon-inner,
section.hero.gpm-hero-ribbon-environment .hero-ribbon {
  display: none !important;
  background: none !important;
}

/* Preserve readable content widths inside the full-width environment. */
section.hero.gpm-hero-ribbon-environment .hero-shell {
  width: min(calc(100% - (var(--gpm-gutter) * 2)), var(--gpm-wide));
  max-width: var(--gpm-wide);
  margin-left: auto;
  margin-right: auto;
}

section.hero.gpm-hero-ribbon-environment .hero-copy {
  max-width: var(--gpm-standard);
}

section.hero.gpm-hero-ribbon-environment .dashboard-stage {
  width: 100%;
  max-width: var(--gpm-wide);
}

@media (max-width: 781px) {
  section.hero.gpm-hero-ribbon-environment .hero-shell {
    width: min(calc(100% - 32px), 100%);
  }
}


/* ================================================================
   Theme v8.4 — Full-Width Hero Panel Correction
   ================================================================ */

/* Expand the outer WordPress pattern panel itself to the viewport width. */
.wp-block-group.gpm-pattern-hero.gpm-hero-panel-full,
.gpm-pattern-hero.gpm-hero-panel-full {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
  overflow: visible;
}

/* Prevent WordPress constrained-layout rules from re-centering the Hero panel. */
.gpm-hero-panel-full > .wp-block-group__inner-container,
.gpm-hero-panel-full > * {
  max-width: none !important;
}

/* The Hero section now fills the full-width panel. */
.gpm-hero-panel-full > section.hero,
.gpm-hero-panel-full section.hero.gpm-hero-ribbon-environment {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep the content grid intentionally centered inside the expanded panel. */
.gpm-hero-panel-full .hero-shell {
  width: min(calc(100% - (var(--gpm-gutter) * 2)), var(--gpm-wide)) !important;
  max-width: var(--gpm-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 781px) {
  .gpm-hero-panel-full .hero-shell {
    width: min(calc(100% - 32px), 100%) !important;
  }
}


/* ================================================================
   Theme v8.5 — Full-Width Major Section System
   ================================================================ */
.wp-block-group.gpm-panel-full,
.gpm-panel-full {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
  overflow: visible;
}

.gpm-panel-full > .wp-block-group__inner-container,
.gpm-panel-full > section {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.gpm-panel-full .shell {
  width: min(calc(100% - (var(--gpm-gutter) * 2)), var(--gpm-wide)) !important;
  max-width: var(--gpm-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.gpm-panel-full .v10-method-section,
.gpm-panel-full .v10-section-two,
.gpm-panel-full .v10-progress-section,
.gpm-panel-full .v10-route-section,
.gpm-panel-full .v10-final-cta {
  width: 100% !important;
  max-width: none !important;
}

.gpm-panel-full .v10-editorial-heading,
.gpm-panel-full .v10-method-copy,
.gpm-panel-full .v10-panel-heading {
  max-width: var(--gpm-standard);
}

@media (max-width: 781px) {
  .gpm-panel-full .shell {
    width: min(calc(100% - 32px), 100%) !important;
  }
}

/* ================================================================
   Theme v8.6 — Unified Public CTA System
   ================================================================ */

/* Official Green Point Map primary action token. */
:root {
  --gpm-cta-blue: #4055E8;
  --gpm-cta-blue-hover: #3347D6;
  --gpm-cta-blue-focus: rgba(64, 85, 232, 0.28);
}

/* Header primary CTA */
.site-header .nav-actions .nav-cta .wp-block-button__link {
  background: var(--gpm-cta-blue) !important;
  border-color: var(--gpm-cta-blue) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-family: inherit;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(64, 85, 232, 0.14) !important;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.site-header .nav-actions .nav-cta .wp-block-button__link:hover {
  background: var(--gpm-cta-blue-hover) !important;
  border-color: var(--gpm-cta-blue-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(64, 85, 232, 0.20) !important;
}

.site-header .nav-actions .nav-cta .wp-block-button__link:focus-visible {
  outline: 3px solid var(--gpm-cta-blue-focus);
  outline-offset: 3px;
}

/* Decision Map Route primary action */
.v10-route-actions .v10-primary-mini {
  border-color: var(--gpm-cta-blue) !important;
  background: var(--gpm-cta-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(64, 85, 232, 0.14);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.v10-route-actions .v10-primary-mini:hover {
  border-color: var(--gpm-cta-blue-hover) !important;
  background: var(--gpm-cta-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(64, 85, 232, 0.20);
}

.v10-route-actions .v10-primary-mini:focus-visible {
  outline: 3px solid var(--gpm-cta-blue-focus);
  outline-offset: 3px;
}

/* Decision Map CTA primary action */
.v10-final-cta .button-primary,
.gpm-pattern-cta .button-primary {
  background: var(--gpm-cta-blue) !important;
  color: #fff !important;
  border: 1px solid var(--gpm-cta-blue) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(64, 85, 232, 0.14) !important;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.v10-final-cta .button-primary:hover,
.gpm-pattern-cta .button-primary:hover {
  background: var(--gpm-cta-blue-hover) !important;
  border-color: var(--gpm-cta-blue-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(64, 85, 232, 0.20) !important;
}

.v10-final-cta .button-primary:focus-visible,
.gpm-pattern-cta .button-primary:focus-visible {
  outline: 3px solid var(--gpm-cta-blue-focus);
  outline-offset: 3px;
}

/* Green remains reserved for status, progress, and success states. */


/* ================================================================
   Theme v9 — Decision Workspace Architecture
   Decision Ergonomics™ + Decision Guidance Map™
   ================================================================ */
.gpm-workspace-shell {
  width: 100%;
  min-height: 900px;
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 16px;
  background: #f7f9f9;
  color: #101828;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.gpm-workspace-header {
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 22px;
  border-bottom: 1px solid #e5e9eb;
  background: #fff;
}

.gpm-workspace-brand,
.gpm-workspace-actions {
  display: flex;
  align-items: center;
  gap: 11px;
}

.gpm-workspace-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.gpm-workspace-brand strong,
.gpm-workspace-brand span,
.gpm-workspace-project span,
.gpm-workspace-project strong {
  display: block;
}

.gpm-workspace-brand strong { font-size: .78rem; font-weight: 500; }
.gpm-workspace-brand span,
.gpm-workspace-project span { margin-top: 3px; color: #7a8790; font-size: .58rem; }
.gpm-workspace-project { text-align: center; }
.gpm-workspace-project strong { margin-top: 4px; font-size: .7rem; font-weight: 500; }

.gpm-workspace-actions { justify-content: flex-end; }
.gpm-icon-button {
  width: 31px; height: 31px; border: 1px solid #e2e7e9; border-radius: 7px;
  background: #fff; color: #5d6972; font: inherit; cursor: pointer;
}
.gpm-workspace-avatar {
  width: 31px; height: 31px; display: grid; place-items: center;
  border-radius: 50%; background: #e8f8f2; color: #087f6f; font-size: .62rem; font-weight: 600;
}

.gpm-recommendation-bar {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1fr 190px;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  padding: 14px 22px;
  border-bottom: 1px solid #dfe6e8;
  background: #fff;
}

.gpm-summary-segment span,
.gpm-summary-segment strong,
.gpm-summary-action span {
  display: block;
}

.gpm-summary-segment span,
.gpm-summary-action span {
  color: #7a8790; font-size: .56rem; letter-spacing: .055em; text-transform: uppercase;
}
.gpm-summary-segment strong {
  margin-top: 7px; font-size: .69rem; line-height: 1.4; font-weight: 500;
}
.gpm-summary-primary {
  padding: 12px 14px; border: 1px solid rgba(64,85,232,.18);
  border-radius: 9px; background: #f3f5ff;
}
.gpm-recommendation-bar > i { color: #9aa6ad; font-style: normal; }
.gpm-summary-action { padding-left: 8px; }

.gpm-workspace-primary {
  min-height: 38px;
  margin-top: 7px;
  padding: 0 14px;
  border: 1px solid #4055e8;
  border-radius: 6px;
  background: #4055e8;
  color: #fff;
  font: inherit;
  font-size: .65rem;
  font-weight: 500;
  cursor: pointer;
}

.gpm-workspace-body {
  display: grid;
  grid-template-columns: 224px minmax(0,1fr);
  min-height: 744px;
}

.gpm-decision-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 14px 16px;
  border-right: 1px solid #e1e7e9;
  background: #fbfcfc;
}

.gpm-decision-sidebar nav { display: grid; gap: 3px; }
.gpm-sidebar-label {
  margin: 17px 10px 7px;
  color: #98a2a9;
  font-size: .53rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gpm-sidebar-label:first-child { margin-top: 0; }

.gpm-decision-sidebar a {
  display: flex; align-items: center; gap: 9px;
  min-height: 34px; padding: 0 10px;
  border-radius: 7px;
  color: #637078;
  text-decoration: none;
  font-size: .67rem;
}
.gpm-decision-sidebar a i {
  width: 7px; height: 7px; border: 1px solid #aeb8bd; border-radius: 50%;
}
.gpm-decision-sidebar a.active {
  color: #101828; background: #edf8f4; font-weight: 500;
}
.gpm-decision-sidebar a.active i { border-color: #18c98b; background: #18c98b; }

.gpm-persistent-context {
  margin-top: auto;
  padding: 15px;
  border: 1px solid #e1e7e9;
  border-radius: 10px;
  background: #fff;
}
.gpm-persistent-context > span {
  color: #087f6f; font-size: .55rem; letter-spacing: .06em; text-transform: uppercase;
}
.gpm-persistent-context div { padding-top: 12px; margin-top: 12px; border-top: 1px solid #edf0f1; }
.gpm-persistent-context small,
.gpm-persistent-context strong { display: block; }
.gpm-persistent-context small { color: #8a969d; font-size: .54rem; }
.gpm-persistent-context strong { margin-top: 5px; font-size: .65rem; font-weight: 500; }

.gpm-decision-canvas {
  min-width: 0;
  padding: 28px;
  background: #f8faf9;
}

.gpm-canvas-heading {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  margin-bottom: 22px;
}
.gpm-canvas-heading span {
  color: #087f6f; font-size: .57rem; letter-spacing: .075em; text-transform: uppercase;
}
.gpm-canvas-heading h1 {
  margin: 7px 0 0; font-size: 1.8rem; line-height: 1.1; letter-spacing: -.035em; font-weight: 500;
}
.gpm-canvas-heading p { margin: 8px 0 0; color: #758189; font-size: .68rem; }
.gpm-canvas-controls { display: flex; gap: 7px; }
.gpm-canvas-controls button {
  min-height: 34px; padding: 0 11px; border: 1px solid #dce2e4;
  border-radius: 7px; background: #fff; color: #58656d; font: inherit; font-size: .61rem;
}

.gpm-map-workspace {
  display: grid;
  grid-template-columns: minmax(0,1fr) 292px;
  min-height: 610px;
  overflow: hidden;
  border: 1px solid #dce3e5;
  border-radius: 13px;
  background: #fff;
}

.gpm-map-canvas {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 13%, rgba(166,235,72,.10), transparent 27%),
    #fff;
}
.gpm-map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,24,40,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,24,40,.032) 1px, transparent 1px);
  background-size: 38px 38px;
}

.gpm-guidance-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.gpm-route-future {
  fill: none; stroke: #e3e9eb; stroke-width: 13; stroke-linecap: round;
}
.gpm-route-completed {
  fill: none; stroke: url(#gpmCompletedRoute); stroke-width: 7; stroke-linecap: round;
}
.gpm-route-alternate {
  fill: none; stroke: #9bb0b8; stroke-width: 3; stroke-dasharray: 8 9; stroke-linecap: round;
}
.gpm-waypoint { fill: #fff; stroke-width: 4; }
.gpm-waypoint.completed { fill: #18c98b; stroke: #fff; }
.gpm-waypoint.current { fill: #4055e8; stroke: #fff; }
.gpm-waypoint.future { stroke: #aebcc1; }
.gpm-waypoint.alternate { stroke: #9bb0b8; }

.gpm-map-point {
  position: absolute;
  min-width: 120px;
  padding: 9px 11px;
  border: 1px solid #dfe5e7;
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  color: #101828;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.gpm-map-point span,
.gpm-map-point strong { display: block; }
.gpm-map-point span { color: #7c8990; font-size: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.gpm-map-point strong { margin-top: 5px; font-size: .62rem; font-weight: 500; }
.gpm-map-point.current-point {
  border-color: rgba(64,85,232,.38);
  box-shadow: 0 0 0 4px rgba(64,85,232,.09);
}
.gpm-map-point.current-point span { color: #4055e8; }
.gpm-map-point.completed span { color: #087f6f; }

.start-point { left: 2%; bottom: 6%; }
.capture-point { left: 20%; bottom: 27%; }
.current-point { left: 48%; top: 47%; }
.followup-point { right: 18%; top: 24%; }
.destination-point { right: 2%; top: 4%; }
.alternate-point { right: 7%; bottom: 16%; }

.gpm-map-legend {
  position: absolute; left: 18px; top: 18px;
  display: flex; gap: 14px;
  padding: 9px 11px; border: 1px solid #e2e7e9; border-radius: 8px; background: rgba(255,255,255,.94);
}
.gpm-map-legend span { display: flex; align-items: center; gap: 6px; color: #77848b; font-size: .53rem; }
.gpm-map-legend i { width: 7px; height: 7px; border-radius: 50%; }
.gpm-map-legend i.completed { background: #18c98b; }
.gpm-map-legend i.current { background: #4055e8; }
.gpm-map-legend i.future { border: 1px solid #aebcc1; }

.gpm-waypoint-detail {
  padding: 23px;
  border-left: 1px solid #e0e6e8;
  background: #fbfcfc;
}
.gpm-detail-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 999px;
  color: #4055e8; background: #eef0ff; font-size: .55rem;
}
.gpm-detail-status span { width: 6px; height: 6px; border-radius: 50%; background: #4055e8; }
.gpm-detail-kicker {
  display: block; margin-top: 23px; color: #087f6f;
  font-size: .55rem; letter-spacing: .07em; text-transform: uppercase;
}
.gpm-waypoint-detail h2 {
  margin: 9px 0 0; font-size: 1.25rem; line-height: 1.18; letter-spacing: -.025em; font-weight: 500;
}
.gpm-waypoint-detail > p { margin: 12px 0 22px; color: #69767e; font-size: .67rem; line-height: 1.6; }

.gpm-waypoint-detail details { padding: 12px 0; border-top: 1px solid #e2e7e9; }
.gpm-waypoint-detail summary { cursor: pointer; font-size: .65rem; font-weight: 500; }
.gpm-waypoint-detail details p,
.gpm-waypoint-detail details li { color: #6f7c83; font-size: .61rem; line-height: 1.55; }
.gpm-waypoint-detail ul { padding-left: 17px; }

.gpm-detail-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px;
}
.gpm-detail-meta div { padding: 11px; border: 1px solid #e2e7e9; border-radius: 8px; background: #fff; }
.gpm-detail-meta span,
.gpm-detail-meta strong { display: block; }
.gpm-detail-meta span { color: #87939a; font-size: .5rem; }
.gpm-detail-meta strong { margin-top: 5px; font-size: .62rem; font-weight: 500; }
.gpm-detail-action { width: 100%; margin-top: 17px; }

.gpm-canvas-standalone { border: 1px solid #dfe5e7; border-radius: 13px; }
.gpm-map-placeholder {
  min-height: 360px; display: grid; place-content: center; gap: 28px;
  padding: 40px; border: 1px solid #e1e7e9; border-radius: 12px; background: #fff; text-align: center;
}
.gpm-placeholder-route { display: flex; align-items: center; justify-content: center; }
.gpm-placeholder-route span {
  width: 18px; height: 18px; border: 4px solid #cad4d8; border-radius: 50%; background: #fff;
}
.gpm-placeholder-route span.done { border-color: #18c98b; background: #18c98b; }
.gpm-placeholder-route span.here { border-color: #4055e8; background: #4055e8; box-shadow: 0 0 0 6px rgba(64,85,232,.10); }
.gpm-placeholder-route i { width: 70px; height: 3px; background: #dfe6e8; }
.gpm-map-placeholder p { color: #738088; font-size: .72rem; }

@media (max-width: 1100px) {
  .gpm-recommendation-bar { grid-template-columns: 1fr 1fr; }
  .gpm-recommendation-bar > i { display: none; }
  .gpm-summary-action { padding-left: 0; }
  .gpm-map-workspace { grid-template-columns: 1fr; }
  .gpm-waypoint-detail { border-left: 0; border-top: 1px solid #e0e6e8; }
  .gpm-map-canvas { min-height: 560px; }
}

@media (max-width: 760px) {
  .gpm-workspace-header { grid-template-columns: 1fr auto; }
  .gpm-workspace-project { display: none; }
  .gpm-workspace-body { grid-template-columns: 1fr; }
  .gpm-decision-sidebar { display: none; }
  .gpm-decision-canvas { padding: 18px; }
  .gpm-recommendation-bar { grid-template-columns: 1fr; }
  .gpm-canvas-heading { display: block; }
  .gpm-canvas-controls { margin-top: 14px; }
  .gpm-map-point { min-width: 96px; padding: 7px; }
  .gpm-map-point strong { font-size: .56rem; }
}


/* ================================================================
   Theme v9.1 — Projected Trajectory Model
   ================================================================ */
.gpm-recommendation-bar {
  grid-template-columns: 1fr auto 1.1fr auto 1fr .7fr 190px;
}

.gpm-trajectory-canvas { min-height: 620px; }

.gpm-axis-line {
  stroke: #cbd5d9;
  stroke-width: 2;
}

.gpm-axis-label {
  position: absolute;
  z-index: 2;
  color: #7b878e;
  font-size: .52rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gpm-axis-y {
  left: 14px;
  top: 50%;
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: left top;
}

.gpm-axis-x {
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
}

.gpm-neutral-marker {
  position: absolute;
  z-index: 5;
  left: 55.6%;
  top: 51.5%;
  width: 44px;
  height: 73px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gpm-neutral-marker-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid #4f8e37;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 8px rgba(112,178,73,.10), 0 0 0 16px rgba(112,178,73,.05);
}

.gpm-neutral-marker-ring i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6fae3c;
}

.gpm-neutral-marker::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  width: 2px;
  height: 23px;
  background: #6fae3c;
}

.gpm-neutral-marker b {
  position: absolute;
  left: 18px;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fae3c;
}

.gpm-route-comparison {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid #dfe5e7;
  border-radius: 13px;
  background: #fff;
}

.gpm-route-comparison-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.gpm-route-comparison-head span {
  color: #087f6f;
  font-size: .55rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.gpm-route-comparison-head h2 {
  margin: 7px 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -.025em;
}

.gpm-route-comparison-head p {
  margin: 8px 0 0;
  color: #738088;
  font-size: .66rem;
}

.gpm-route-options {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 18px;
}

.gpm-route-options article {
  padding: 16px;
  border: 1px solid #e0e6e8;
  border-radius: 10px;
  background: #fbfcfc;
}

.gpm-route-options article.recommended {
  border-color: rgba(64,85,232,.32);
  background: #f4f6ff;
}

.gpm-route-options article > span,
.gpm-route-options article > strong { display: block; }

.gpm-route-options article > span {
  color: #76838a;
  font-size: .54rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gpm-route-options article > strong {
  margin-top: 7px;
  font-size: .8rem;
  font-weight: 500;
}

.gpm-route-options ul {
  margin: 13px 0 0;
  padding-left: 15px;
  color: #68757d;
  font-size: .6rem;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .gpm-recommendation-bar { grid-template-columns: 1fr 1fr; }
  .gpm-route-options { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .gpm-route-comparison-head { display: block; }
  .gpm-route-comparison-head .gpm-workspace-primary { margin-top: 14px; }
  .gpm-neutral-marker {
    left: 54%;
    top: 52%;
    transform: translate(-50%, -50%) scale(.82);
  }
}