.pmo-atlas .pmo-redesign-services {
  --atlas-ink: var(--pmo-r-ink, #19162c);
  --atlas-muted: var(--pmo-r-muted, #5b566c);
  --atlas-paper: var(--pmo-r-surface, #fff);
  --atlas-board: color-mix(in srgb, var(--atlas-ink) 4%, var(--atlas-paper));
  --atlas-line: color-mix(in srgb, var(--atlas-ink) 16%, var(--atlas-paper));
  --atlas-gap: clamp(12px, 1.55vw, 22px);
  --atlas-pad: clamp(15px, 1.9vw, 26px);
}

.pmo-atlas .pmo-redesign-services-head {
  max-width: 69ch;
  margin-bottom: clamp(20px, 3.4vw, 44px);
  padding-top: 12px;
}
.pmo-atlas .pmo-redesign-services-head h2 {
  font-size: clamp(1.8rem, 4.4vw, 4rem) !important;
  line-height: 1.06;
  letter-spacing: -.059em;
}

.pmo-atlas .pmo-redesign-services .pmo-redesign-nav-wrap {
  padding: 4px;
  margin-bottom: clamp(23px, 4.6vw, 55px);
  border: 1px solid var(--atlas-line);
  border-radius: 8px;
  background: var(--atlas-paper);
}
.pmo-atlas .pmo-redesign-services .pmo-categories[data-pmo-nav] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 0;
  border-radius: 0;
}
.pmo-atlas .pmo-redesign-services .pmo-categories a {
  position: relative;
  min-height: 47px;
  padding: 9px 11px;
  border: 0;
  border-radius: 4px;
  font-size: clamp(.77rem, 1vw, .88rem);
}
.pmo-atlas .pmo-redesign-services .pmo-categories a::after {
  position: absolute;
  inset: auto 10px 4px;
  height: 2px;
  background: var(--pmo-r-accent);
  content: '';
  opacity: 0;
}
.pmo-atlas .pmo-redesign-services .pmo-categories a[aria-current="location"]::after { opacity: 1; }
.pmo-atlas .pmo-redesign-services .pmo-redesign-filter { margin-top: 4px; padding: 4px 4px 0; }
.pmo-atlas .pmo-redesign-services .pmo-redesign-filter [data-pmo-filter] { border-radius: 4px; }

.pmo-atlas .pmo-redesign-services .pmo-price-section {
  --atlas-accent: #583bb6;
  --atlas-pattern-size: 15px;
  --atlas-pattern-angle: 0deg;
  --atlas-banner: color-mix(in srgb, var(--atlas-accent) 12%, var(--atlas-paper));
  --atlas-rule: color-mix(in srgb, var(--atlas-accent) 32%, var(--atlas-paper));
  --atlas-price: color-mix(in srgb, var(--atlas-accent) 7%, var(--atlas-paper));
  --atlas-price-strong: color-mix(in srgb, var(--atlas-accent) 12%, var(--atlas-paper));
  margin-bottom: clamp(40px, 7vw, 104px);
}
.pmo-atlas .pmo-redesign-services #prices-web { --atlas-accent: #245d8a; --atlas-pattern-size: 18px; --atlas-pattern-angle: 20deg; }
.pmo-atlas .pmo-redesign-services #prices-marketing { --atlas-accent: #19634c; --atlas-pattern-size: 12px; --atlas-pattern-angle: 35deg; }
.pmo-atlas .pmo-redesign-services #prices-design { --atlas-accent: #754469; --atlas-pattern-size: 21px; --atlas-pattern-angle: -24deg; }
.pmo-atlas .pmo-redesign-services #prices-production { --atlas-accent: #854823; --atlas-pattern-size: 10px; --atlas-pattern-angle: -12deg; }
[data-theme="dark"] .pmo-atlas .pmo-redesign-services .pmo-price-section { --atlas-accent: #c1a8ff; }
[data-theme="dark"] .pmo-atlas .pmo-redesign-services #prices-web { --atlas-accent: #a4cef8; }
[data-theme="dark"] .pmo-atlas .pmo-redesign-services #prices-marketing { --atlas-accent: #93daba; }
[data-theme="dark"] .pmo-atlas .pmo-redesign-services #prices-design { --atlas-accent: #edb6e2; }
[data-theme="dark"] .pmo-atlas .pmo-redesign-services #prices-production { --atlas-accent: #efbc99; }

.pmo-atlas .pmo-redesign-services .pmo-price-section > header {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .84fr) clamp(85px, 12vw, 158px);
  align-items: center;
  gap: clamp(10px, 2.1vw, 27px);
  min-height: clamp(119px, 12vw, 173px);
  padding: clamp(16px, 2.65vw, 34px);
  margin: 0 0 5px;
  border: 1px solid var(--atlas-rule);
  border-top: 3px solid var(--atlas-accent);
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(110deg, var(--atlas-banner), color-mix(in srgb, var(--atlas-accent) 4%, var(--atlas-paper)) 68%, var(--atlas-banner));
}
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-main,
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-note { min-width: 0; }
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-main > :is(h2, h3) {
  margin: 5px 0 0 !important;
  color: var(--atlas-ink);
  font-size: clamp(1.56rem, 3.05vw, 3.2rem) !important;
  font-weight: 760;
  line-height: 1.07;
  letter-spacing: -.048em;
  text-wrap: pretty;
}
.pmo-atlas .pmo-redesign-services .pmo-redesign-group-index {
  gap: 8px;
  color: var(--atlas-accent);
  font-size: .79rem;
  font-weight: 810;
  letter-spacing: .12em;
}
.pmo-atlas .pmo-redesign-services .pmo-redesign-group-index::before { width: 19px; height: 2px; }
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-note {
  padding-left: clamp(9px, 1.3vw, 17px);
  border-inline-start: 1px solid var(--atlas-rule);
}
.pmo-atlas .pmo-redesign-services .pmo-price-section .pmo-atlas-group-note p {
  max-width: 43ch;
  margin: 0 !important;
  color: var(--atlas-ink);
  font-size: clamp(.84rem, 1.1vw, .96rem) !important;
  line-height: 1.62;
  overflow-wrap: anywhere;
}
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-count {
  display: block;
  margin-top: 6px;
  color: var(--atlas-accent);
  font-size: .73rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  height: clamp(69px, 8.4vw, 112px);
  overflow: hidden;
  color: var(--atlas-accent);
  pointer-events: none;
}
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-art::before {
  position: absolute;
  z-index: -1;
  inset: 7px 13px;
  border: 1px solid var(--atlas-rule);
  background:
    repeating-linear-gradient(90deg, var(--atlas-rule) 0 1px, transparent 1px var(--atlas-pattern-size)),
    repeating-linear-gradient(0deg, var(--atlas-rule) 0 1px, transparent 1px var(--atlas-pattern-size));
  transform: rotate(var(--atlas-pattern-angle));
  opacity: .5;
  content: '';
}
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-art::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(currentColor, currentColor) left 1px top 1px / 12px 1px,
    linear-gradient(currentColor, currentColor) left 1px top 1px / 1px 12px,
    linear-gradient(currentColor, currentColor) right 1px bottom 1px / 12px 1px,
    linear-gradient(currentColor, currentColor) right 1px bottom 1px / 1px 12px;
  background-repeat: no-repeat;
  content: '';
}
.pmo-atlas .pmo-redesign-services .pmo-atlas-group-art svg {
  width: clamp(49px, 6.2vw, 83px);
  height: clamp(49px, 6.2vw, 83px);
  padding: 9px;
  border: 1px solid var(--atlas-rule);
  border-radius: 4px;
  background: var(--atlas-banner);
  color: inherit;
}

.pmo-atlas .pmo-redesign-services .pmo-price-grid {
  gap: var(--atlas-gap);
  padding: var(--atlas-gap);
  border: 1px solid var(--atlas-line);
  border-radius: 3px 3px 9px 9px;
  background: var(--atlas-board);
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan {
  --atlas-sheet-line: var(--atlas-line);
  padding: var(--atlas-pad);
  border: 1px solid var(--atlas-sheet-line);
  border-radius: 4px;
  background: var(--atlas-paper);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--atlas-ink) 6%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan:is(:hover, :focus-within, :target) {
  border-color: var(--atlas-accent);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--atlas-accent) 32%, transparent);
}
.pmo-atlas .pmo-redesign-services .pmo-plan-top {
  align-items: center;
  min-height: 34px;
  padding-bottom: 10px;
  margin: 0 0 13px;
  border-bottom: 1px solid var(--atlas-line);
}
.pmo-atlas .pmo-redesign-services .pmo-plan-illustration {
  place-items: center start;
  align-self: center;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--atlas-accent);
}
.pmo-atlas .pmo-redesign-services .pmo-plan-illustration svg { width: 23px; height: 23px; }
.pmo-atlas .pmo-redesign-services .pmo-plan-kind {
  color: var(--atlas-accent);
  font-size: .67rem;
  font-weight: 775;
  letter-spacing: .045em;
  line-height: 1.35;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-head { min-height: 0; padding: 0 0 14px; }
.pmo-atlas .pmo-redesign-services .pmo-plan-head > :is(h3, h4) {
  margin: 0 0 5px !important;
  color: var(--atlas-ink);
  font-size: clamp(1.06rem, 1.9vw, 1.66rem) !important;
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-head > p {
  margin: 0 !important;
  color: var(--atlas-muted);
  font-size: .81rem !important;
  line-height: 1.5;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 94px;
  padding: 10px 13px;
  margin: 0 0 17px;
  border: 0;
  border-inline-start: 3px solid var(--atlas-accent);
  border-radius: 0 4px 4px 0;
  background: var(--atlas-price);
}
.pmo-atlas .pmo-redesign-services .pmo-plan[data-pmo-kind="monthly"] .pmo-plan-price {
  background: var(--atlas-price-strong);
}
.pmo-atlas .pmo-redesign-services .pmo-plan[data-pmo-kind="quote"] .pmo-plan-price {
  gap: 2px;
  border-inline-start: 3px dashed var(--atlas-rule);
  background: var(--atlas-board);
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-price strong {
  margin: 3px 0;
  color: var(--atlas-ink);
  font-size: clamp(1.28rem, 2.3vw, 2.15rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.045em;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-price .pmo-quote-price {
  font-size: clamp(1.13rem, 1.7vw, 1.52rem);
  letter-spacing: -.034em;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-price :is(span, small, p) {
  color: var(--atlas-muted);
  font-size: .74rem !important;
  line-height: 1.43;
}
.pmo-atlas .pmo-redesign-services .pmo-plan-price .pmo-redesign-estimate {
  padding: 2px 5px;
  border-radius: 2px;
  background: var(--atlas-paper);
}
.pmo-atlas .pmo-redesign-services .pmo-plan-included > :is(h4, h5),
.pmo-atlas .pmo-redesign-services .pmo-plan-extras > strong {
  margin: 0 0 6px !important;
  color: var(--atlas-ink);
  font-size: .78rem !important;
  font-weight: 790;
  line-height: 1.4;
  letter-spacing: .01em;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan ul {
  gap: 6px;
  margin: 0 0 14px !important;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan li {
  gap: 8px;
  padding: 0;
  font-size: .86rem;
  line-height: 1.49;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan li svg { width: 14px; height: 14px; color: var(--atlas-accent); }
.pmo-atlas .pmo-redesign-services .pmo-plan-extras {
  padding: 9px 0 0;
  margin: 0 0 13px;
  border-color: var(--atlas-line);
}
.pmo-atlas .pmo-redesign-services .pmo-plan-extras .pmo-exclusions {
  color: var(--atlas-muted);
  font-size: .78rem !important;
  line-height: 1.53;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-actions { gap: 3px; align-self: stretch; }
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan .pmo-plan-cta {
  min-height: 44px;
  border: 1px solid var(--atlas-ink);
  border-radius: 4px;
  background: var(--atlas-ink);
  color: var(--atlas-paper) !important;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan .pmo-plan-cta > span[aria-hidden="true"] { color: inherit; }
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan .pmo-plan-cta:hover {
  border-color: var(--atlas-accent);
  background: var(--atlas-accent);
  color: var(--atlas-paper) !important;
}
.pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan .pmo-scope-link {
  min-height: 44px;
  color: var(--atlas-accent) !important;
  font-size: .8rem;
}

/* Real cards use six content tracks. Align each track across the row where supported. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    .pmo-atlas .pmo-redesign-services .pmo-price-grid { row-gap: 0; }
    .pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan {
      display: grid;
      grid-row: span 6;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      row-gap: 0;
      margin-bottom: var(--atlas-gap);
    }
    .pmo-atlas .pmo-redesign-services .pmo-price-grid { padding-bottom: 0; }
  }
}
@media (max-width: 900px) {
  .pmo-atlas .pmo-redesign-services .pmo-price-section > header {
    grid-template-columns: minmax(0, 1fr) minmax(0, .84fr) 77px;
  }
}
@media (max-width: 740px) {
  .pmo-atlas .pmo-redesign-services .pmo-categories[data-pmo-nav] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pmo-atlas .pmo-redesign-services .pmo-price-section > header {
    grid-template-columns: minmax(0, 1fr) minmax(54px, 20%);
    align-items: start;
    row-gap: 8px;
  }
  .pmo-atlas .pmo-redesign-services .pmo-atlas-group-art { grid-area: 1 / 2 / 3 / 3; align-self: center; }
  .pmo-atlas .pmo-redesign-services .pmo-atlas-group-art::before { inset: 4px; }
  .pmo-atlas .pmo-redesign-services .pmo-atlas-group-note { grid-column: 1; padding-left: 0; border-inline-start: 0; }
}
@media (max-width: 600px) {
  .pmo-atlas .pmo-redesign-services .pmo-categories[data-pmo-nav] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmo-atlas .pmo-redesign-services .pmo-price-grid { padding: 7px; gap: 8px; }
  .pmo-atlas .pmo-redesign-services .pmo-price-section > header { padding: 12px; }
  .pmo-atlas .pmo-redesign-services .pmo-atlas-group-art { height: 57px; }
  .pmo-atlas .pmo-redesign-services .pmo-atlas-group-art svg { width: 42px; height: 42px; padding: 6px; }
  .pmo-atlas .pmo-redesign-services .pmo-price-grid .pmo-plan-price { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pmo-atlas .pmo-redesign-services :is(.pmo-plan, .pmo-plan-cta, .pmo-categories a) { transition: none !important; }
}