@layer pages {
  .hero {
    position: relative;
    min-height: min(54rem, calc(100vh - var(--header-height)));
    display: grid;
    align-items: center;
    overflow: hidden;
    padding-block: clamp(var(--space-12), 7vw, var(--space-24));
    background:
      radial-gradient(circle at 10% 15%, rgb(200 217 111 / 22%), transparent 24rem),
      radial-gradient(circle at 82% 22%, rgb(239 127 109 / 12%), transparent 26rem),
      linear-gradient(180deg, #fff 0%, #f8fbff 72%, #f3f8ff 100%);
  }

  .hero::before {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgb(22 125 106 / 3%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(22 125 106 / 3%) 1px, transparent 1px);
    background-size: 4rem 4rem;
    content: "";
    mask-image: linear-gradient(to right, rgb(0 0 0 / 45%), transparent 75%);
  }

  .hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(34rem, 1.12fr);
    align-items: center;
    gap: clamp(var(--space-10), 5vw, var(--space-20));
  }

  .hero__copy {
    display: grid;
    justify-items: start;
    gap: var(--space-6);
  }

  .hero__copy h1 {
    max-width: 11ch;
  }

  .hero__lead {
    max-width: 38rem;
    font-size: var(--text-lg);
  }

  .hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .hero__proof li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .hero__proof li::before {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background:
      radial-gradient(circle, var(--color-surface) 0 28%, transparent 30%),
      var(--gradient-brand);
    content: "";
  }

  .hero__visual {
    position: relative;
    min-width: 0;
    padding-block: var(--space-12);
  }

  .hero__network {
    position: absolute;
    z-index: -1;
    width: 130%;
    max-width: none;
    right: -20%;
    bottom: -12%;
    opacity: 0.65;
    pointer-events: none;
  }

  .workspace-preview {
    overflow: hidden;
    border: 1px solid rgb(230 234 241 / 84%);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 94%);
    box-shadow:
      0 34px 80px rgb(23 53 47 / 16%),
      0 8px 20px rgb(22 125 106 / 8%);
    transform: perspective(75rem) rotateY(-2deg) rotateX(1deg);
    transform-origin: center;
  }

  .workspace-preview__topbar {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: rgb(255 255 255 / 84%);
  }

  .workspace-preview__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .workspace-preview__identity img {
    border-radius: 0.6rem;
  }

  .workspace-preview__identity div,
  .preview-heading > div,
  .preview-card-heading > div,
  .hero__floating-note > div {
    display: grid;
  }

  .workspace-preview__identity strong,
  .preview-heading strong,
  .preview-card-heading strong,
  .hero__floating-note strong {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 650;
    line-height: 1.25;
  }

  .workspace-preview__identity span,
  .preview-heading span,
  .preview-card-heading span,
  .hero__floating-note small {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    line-height: 1.45;
  }

  .workspace-preview__body {
    display: grid;
    min-height: 25rem;
    grid-template-columns: 3.6rem minmax(0, 1fr);
  }

  .preview-rail {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2);
    background: var(--pc-ink);
  }

  .preview-rail__mark {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: var(--space-3);
    place-items: center;
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 8%);
  }

  .preview-rail__item {
    position: relative;
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
  }

  .preview-rail__item::before,
  .preview-rail__item::after {
    position: absolute;
    border-radius: 0.2rem;
    background: rgb(255 255 255 / 38%);
    content: "";
  }

  .preview-rail__item::before {
    width: 0.85rem;
    height: 0.7rem;
    top: 0.65rem;
    left: 0.7rem;
  }

  .preview-rail__item::after {
    width: 0.55rem;
    height: 2px;
    top: 1.5rem;
    left: 0.85rem;
  }

  .preview-rail__item.is-active {
    background: rgb(22 125 106 / 28%);
  }

  .preview-rail__item.is-active::before,
  .preview-rail__item.is-active::after {
    background: var(--pc-sky);
  }

  .preview-content {
    min-width: 0;
    padding: var(--space-5);
    background: #f8fafc;
  }

  .preview-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .preview-heading > div {
    gap: 0.1rem;
  }

  .preview-heading > div > span {
    color: var(--color-action);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .preview-heading strong {
    font-size: 1rem;
  }

  .preview-heading__period {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: var(--color-surface);
  }

  .preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .preview-metrics article {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  .preview-metrics span,
  .preview-metrics small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.56rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .preview-metrics strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.7rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .preview-metrics small {
    color: var(--color-positive);
  }

  .preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(10rem, 0.8fr);
    gap: var(--space-3);
  }

  .preview-chart,
  .preview-flow {
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  .preview-card-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .preview-card-heading strong {
    font-size: 0.68rem;
  }

  .mini-trend {
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-pill);
    color: var(--color-positive) !important;
    background: rgb(239 127 109 / 10%);
    font-weight: 700;
  }

  .preview-chart svg {
    width: 100%;
    height: 8rem;
    overflow: visible;
  }

  .preview-chart__grid {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1;
  }

  .preview-chart__area {
    fill: url("#chart-fill");
  }

  .preview-chart__line {
    fill: none;
    stroke: var(--color-action);
    stroke-width: 4;
    stroke-linecap: round;
  }

  .preview-chart circle {
    fill: var(--color-surface);
    stroke: var(--color-action);
    stroke-width: 4;
  }

  .preview-flow ol {
    position: relative;
    display: grid;
    gap: var(--space-3);
    list-style: none;
  }

  .preview-flow ol::before {
    position: absolute;
    width: 1px;
    top: 0.8rem;
    bottom: 0.8rem;
    left: 0.72rem;
    background: var(--color-border);
    content: "";
  }

  .preview-flow li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .preview-flow li > span {
    z-index: 1;
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 50%;
    color: var(--color-action);
    background: var(--color-surface-blue);
    font-size: 0.48rem;
    font-weight: 800;
  }

  .preview-flow li div {
    display: grid;
  }

  .preview-flow strong {
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .preview-flow small {
    color: var(--color-text-muted);
    font-size: 0.52rem;
  }

  .hero__floating-note {
    position: absolute;
    z-index: 2;
    right: -1.5rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgb(239 127 109 / 20%);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow-sm);
  }

  .hero__floating-note > span {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border-radius: 50%;
    color: var(--color-surface);
    background: var(--color-accent-strong);
    font-size: var(--text-sm);
    font-weight: 800;
  }

  .hero__floating-note strong {
    font-size: 0.72rem;
  }

  .promise-strip {
    padding-block: var(--space-6);
    border-block: 1px solid var(--color-border);
    background: rgb(255 255 255 / 86%);
  }

  .module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .module-card--primary {
    border-color: rgb(22 125 106 / 26%);
    background:
      radial-gradient(circle at 100% 0%, rgb(200 217 111 / 14%), transparent 12rem),
      var(--color-surface);
  }

  .module-card--more {
    color: var(--color-surface);
    background: var(--gradient-night);
  }

  .module-card--more h3,
  .module-card--more .feature-card__link {
    color: var(--color-surface);
  }

  .module-card--more p {
    color: rgb(255 255 255 / 68%);
  }

  .connected-flow {
    background: var(--gradient-wash);
  }

  .connected-flow__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(26rem, 1.12fr);
    align-items: center;
    gap: clamp(var(--space-12), 8vw, var(--space-24));
  }

  .connected-flow__copy,
  .operations-section__copy {
    display: grid;
    justify-items: start;
    gap: var(--space-6);
  }

  .connected-flow__copy > p,
  .operations-section__copy > p {
    font-size: var(--text-lg);
  }

  .flow-steps {
    position: relative;
    display: grid;
    gap: var(--space-4);
    list-style: none;
  }

  .flow-steps::before {
    position: absolute;
    width: 2px;
    top: 2rem;
    bottom: 2rem;
    left: 2rem;
    background: linear-gradient(var(--pc-blue), var(--pc-sky), var(--pc-teal));
    content: "";
  }

  .flow-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 88%);
    box-shadow: var(--shadow-xs);
  }

  .flow-steps li > span {
    z-index: 1;
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 6px solid #f8fbff;
    border-radius: 50%;
    color: var(--color-surface);
    background: var(--gradient-brand);
    font-size: var(--text-sm);
    font-weight: 800;
  }

  .flow-steps li > div {
    display: grid;
    align-content: center;
    gap: var(--space-2);
  }

  .flow-steps h3 {
    font-size: var(--text-xl);
  }

  .operations-section {
    overflow: hidden;
  }

  .operations-section__grid {
    display: grid;
    grid-template-columns: minmax(26rem, 1fr) minmax(0, 0.88fr);
    align-items: center;
    gap: clamp(var(--space-12), 8vw, var(--space-24));
  }

  .operations-section__copy h2 {
    color: var(--color-surface);
  }

  .operations-section__copy > p {
    color: rgb(255 255 255 / 68%);
  }

  .check-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    color: rgb(255 255 255 / 80%);
  }

  .check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .check-list li::before {
    display: grid;
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 50%;
    color: var(--color-surface);
    background: var(--color-accent-strong);
    font-size: 0.65rem;
    font-weight: 900;
    content: "\2713";
  }

  .orbit-map {
    position: relative;
    width: min(100%, 32rem);
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid rgb(200 217 111 / 18%);
    border-radius: 50%;
    background:
      radial-gradient(circle, rgb(22 125 106 / 18%) 0 8%, transparent 28%),
      radial-gradient(circle, transparent 0 42%, rgb(200 217 111 / 8%) 42.5% 43%, transparent 43.5%),
      radial-gradient(circle, transparent 0 68%, rgb(239 127 109 / 10%) 68.5% 69%, transparent 69.5%);
  }

  .orbit-map::before,
  .orbit-map::after {
    position: absolute;
    inset: 15%;
    border: 1px dashed rgb(200 217 111 / 24%);
    border-radius: 50%;
    content: "";
    animation: orbit-spin 28s linear infinite;
  }

  .orbit-map::after {
    inset: 31%;
    border-color: rgb(239 127 109 / 20%);
    animation-direction: reverse;
    animation-duration: 18s;
  }

  .orbit-map__center,
  .orbit-map__node {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid rgb(200 217 111 / 20%);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 16px 40px rgb(0 0 0 / 20%);
  }

  .orbit-map__center {
    width: 7.5rem;
    height: 7.5rem;
    top: 50%;
    left: 50%;
    border-radius: 2rem;
    transform: translate(-50%, -50%);
  }

  .orbit-map__node {
    min-width: 5rem;
    min-height: 2.8rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 750;
  }

  .orbit-map__node::before {
    width: 0.45rem;
    height: 0.45rem;
    margin-right: var(--space-2);
    border-radius: 50%;
    background: var(--gradient-brand);
    content: "";
  }

  .orbit-map__node {
    grid-auto-flow: column;
  }

  .orbit-map__node--crm { top: 6%; left: 40%; }
  .orbit-map__node--billing { top: 38%; right: -4%; }
  .orbit-map__node--support { right: 14%; bottom: 4%; }
  .orbit-map__node--automation { bottom: 12%; left: -2%; }

  @keyframes orbit-spin {
    to { transform: rotate(1turn); }
  }

  .audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block: 1px solid var(--color-border);
  }

  .audience-card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    border-right: 1px solid var(--color-border);
  }

  .audience-card:last-child {
    border-right: 0;
  }

  .audience-card > span {
    color: var(--color-action);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 750;
  }

  .audience-card h3 {
    font-size: var(--text-xl);
  }

  .cta-panel__ghost {
    color: var(--color-surface);
  }

  .cta-panel__ghost:hover {
    background: rgb(255 255 255 / 10%);
  }

  /* Shared inner-page compositions */
  .content-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-5);
  }

  .content-card {
    grid-column: span 4;
    padding: clamp(var(--space-6), 3vw, var(--space-8));
  }

  .content-card--wide {
    grid-column: span 6;
  }

  .content-card--full {
    grid-column: 1 / -1;
  }

  .content-card h3 {
    margin-bottom: var(--space-3);
  }

  .content-card p + p {
    margin-top: var(--space-3);
  }

  .principles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .principle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    padding: var(--space-6);
    border-top: 1px solid var(--color-border);
  }

  .principle > span {
    color: var(--color-action);
    font-family: var(--font-heading);
    font-weight: 700;
  }

  .principle > div {
    display: grid;
    gap: var(--space-2);
  }

  .timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    list-style: none;
    counter-reset: timeline;
  }

  .timeline li {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    counter-increment: timeline;
  }

  .timeline li::before {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--color-action);
    background: var(--color-surface-blue);
    font-size: var(--text-sm);
    font-weight: 800;
    content: counter(timeline, decimal-leading-zero);
  }

  .plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .plan-card {
    display: grid;
    min-height: 100%;
    align-content: start;
    gap: var(--space-5);
    padding: var(--space-6);
  }

  .plan-card--featured {
    border-color: rgb(22 125 106 / 42%);
    box-shadow: var(--shadow-blue);
  }

  .plan-card__header {
    display: grid;
    gap: var(--space-2);
  }

  .plan-card__price {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-border);
  }

  .plan-card__price strong {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
  }

  .plan-card__price span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
  }

  .plan-card ul {
    display: grid;
    gap: var(--space-3);
    margin-bottom: auto;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .plan-card li {
    display: flex;
    gap: var(--space-2);
  }

  .plan-card li::before {
    color: var(--color-accent-strong);
    font-weight: 800;
    content: "\2713";
  }

  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  .comparison-table {
    width: 100%;
    min-width: 45rem;
    border-collapse: collapse;
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }

  .comparison-table th {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
  }

  .comparison-table td {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .comparison-table tr:last-child td {
    border-bottom: 0;
  }

  .comparison-table .is-included {
    color: var(--color-accent-strong);
    font-weight: 750;
  }

  .faq-list {
    display: grid;
    gap: var(--space-3);
    max-width: 52rem;
    margin-inline: auto;
  }

  .faq-list details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .faq-list summary {
    padding: var(--space-5) var(--space-6);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 650;
    cursor: pointer;
  }

  .faq-list details p {
    padding: 0 var(--space-6) var(--space-5);
  }

  .privacy-copy {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-16) var(--space-24);
  }

  .privacy-copy section {
    display: grid;
    gap: var(--space-3);
  }

  .privacy-copy h2 {
    font-size: var(--text-xl);
  }

  @media (max-width: 70rem) {
    .hero__grid {
      grid-template-columns: minmax(0, 0.82fr) minmax(30rem, 1.18fr);
      gap: var(--space-8);
    }

    .workspace-preview {
      transform: none;
    }

    .hero__floating-note {
      right: -0.5rem;
    }

    .module-grid,
    .audience-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .audience-card:nth-child(2) {
      border-right: 0;
    }

    .audience-card:last-child {
      grid-column: 1 / -1;
      border-top: 1px solid var(--color-border);
    }

    .plan-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 60rem) {
    .hero {
      min-height: auto;
    }

    .hero__grid,
    .connected-flow__grid,
    .operations-section__grid {
      grid-template-columns: 1fr;
    }

    .hero__copy {
      max-width: 46rem;
    }

    .hero__copy h1 {
      max-width: 13ch;
    }

    .hero__visual {
      width: min(100%, 44rem);
      margin-inline: auto;
    }

    .operations-section__visual {
      order: 2;
    }

    .content-card,
    .content-card--wide {
      grid-column: span 6;
    }
  }

  @media (max-width: 44rem) {
    .hero {
      padding-top: var(--space-12);
    }

    .hero__proof {
      display: grid;
    }

    .hero__visual {
      margin-top: calc(-1 * var(--space-6));
    }

    .workspace-preview__body {
      grid-template-columns: 2.8rem minmax(0, 1fr);
      min-height: 22rem;
    }

    .preview-rail {
      padding-inline: var(--space-1);
    }

    .preview-rail__mark,
    .preview-rail__item {
      width: 2rem;
      height: 2rem;
    }

    .preview-content {
      padding: var(--space-3);
    }

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

    .preview-metrics article:nth-child(n + 2) {
      display: none;
    }

    .preview-grid {
      grid-template-columns: 1fr;
    }

    .preview-flow {
      display: none;
    }

    .hero__floating-note {
      right: 0;
      bottom: 0.25rem;
    }

    .module-grid,
    .audience-grid,
    .principles-grid,
    .timeline,
    .plan-grid {
      grid-template-columns: 1fr;
    }

    .audience-card {
      border-right: 0;
      border-bottom: 1px solid var(--color-border);
    }

    .audience-card:last-child {
      grid-column: auto;
      border-top: 0;
      border-bottom: 0;
    }

    .flow-steps li {
      grid-template-columns: 3rem 1fr;
      padding: var(--space-4);
    }

    .flow-steps li > span {
      width: 3rem;
      height: 3rem;
      border-width: 4px;
    }

    .flow-steps::before {
      left: 1.5rem;
    }

    .orbit-map {
      width: min(94%, 28rem);
    }

    .orbit-map__center {
      width: 6rem;
      height: 6rem;
    }

    .orbit-map__node {
      min-width: 4.25rem;
      font-size: 0.65rem;
    }

    .content-card,
    .content-card--wide,
    .content-card--full {
      grid-column: 1 / -1;
    }
  }
}

@layer pages {
  .care-hero {
    min-height: min(48rem, calc(100svh - var(--header-height)));
    padding-block: clamp(var(--space-10), 4vw, var(--space-16));
    background:
      radial-gradient(circle at 90% 18%, rgb(200 217 111 / 22%), transparent 24rem),
      radial-gradient(circle at 64% 82%, rgb(239 127 109 / 14%), transparent 22rem),
      var(--color-canvas);
  }

  .care-hero .hero__grid {
    grid-template-columns: minmax(0, 1.03fr) minmax(31rem, 0.97fr);
    gap: clamp(var(--space-8), 4vw, var(--space-16));
  }

  .care-hero .hero__copy {
    gap: var(--space-4);
  }

  .care-hero__title {
    max-width: none !important;
    font-size: var(--heading-hero);
    line-height: 0.98;
  }

  .care-hero__title > span {
    display: block;
  }

  .care-hero__title > .text-gradient {
    white-space: nowrap;
  }

  .care-hero__visual {
    display: grid;
    min-height: 34rem;
    align-items: center;
    padding-block: 0;
  }

  .care-map {
    position: relative;
    width: min(100%, 39rem);
    aspect-ratio: 1.15;
    margin-inline: auto;
  }

  .care-map__line {
    position: absolute;
    z-index: 0;
    width: 39%;
    height: 2px;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, var(--color-action), rgb(22 125 106 / 22%));
    transform-origin: left center;
  }

  .care-map__line::after {
    position: absolute;
    width: 0.65rem;
    height: 0.65rem;
    top: 50%;
    right: 0;
    border: 3px solid var(--color-canvas);
    border-radius: 50%;
    background: var(--color-action);
    content: "";
    transform: translate(50%, -50%);
  }

  .care-map__line--people { transform: rotate(214deg); }
  .care-map__line--providers { background: linear-gradient(90deg, var(--color-accent-strong), rgb(239 127 109 / 22%)); transform: rotate(326deg); }
  .care-map__line--providers::after { background: var(--color-accent-strong); }
  .care-map__line--diagnostics { background: linear-gradient(90deg, var(--color-accent), rgb(200 217 111 / 28%)); transform: rotate(146deg); }
  .care-map__line--diagnostics::after { background: var(--color-accent); }
  .care-map__line--programmes { transform: rotate(34deg); }

  .care-map__core,
  .care-map__node {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    border: 1px solid rgb(22 125 106 / 15%);
    background: rgb(251 252 248 / 96%);
    box-shadow: 0 1.25rem 3rem rgb(23 53 47 / 10%);
  }

  .care-map__core {
    width: 13.75rem;
    min-height: 7rem;
    gap: var(--space-3);
    padding: var(--space-4);
    top: 50%;
    left: 50%;
    border-radius: var(--radius-lg);
    transform: translate(-50%, -50%);
  }

  .care-map__core img {
    width: 4.15rem;
    height: auto;
    flex: 0 0 auto;
  }

  .care-map__core div,
  .care-map__node div {
    display: grid;
    gap: 0.15rem;
  }

  .care-map__core strong,
  .care-map__node strong {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    line-height: 1.25;
  }

  .care-map__core small,
  .care-map__node small {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .care-map__node {
    width: 12.75rem;
    min-height: 4.8rem;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
  }

  .care-map__node > span {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--color-text);
    background: var(--color-accent-soft);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
  }

  .care-map__node--people { top: 4%; left: 0; }
  .care-map__node--providers { top: 4%; right: 0; }
  .care-map__node--diagnostics { bottom: 4%; left: 0; }
  .care-map__node--programmes { right: 0; bottom: 4%; }

  .principle-number {
    color: var(--color-action);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.08em;
  }

  .care-principles .module-card--more { background: var(--pc-sand); }
  .care-principles .module-card--more h3 { color: var(--color-text); }
  .care-principles .module-card--more p { color: var(--color-text-muted); }
  .care-principles .module-card--more .feature-card__link { color: var(--color-action-hover); }

  .care-orbit {
    position: relative;
    width: min(29rem, 82vw);
    aspect-ratio: 1;
    margin-inline: auto;
  }

  .care-orbit__ring,
  .care-orbit::before,
  .care-orbit::after {
    position: absolute;
    inset: 8%;
    border: 1px solid rgb(200 217 111 / 24%);
    border-radius: 50%;
    content: "";
  }

  .care-orbit::before { inset: 20%; border-color: rgb(239 127 109 / 26%); }
  .care-orbit::after { inset: 35%; border-color: rgb(255 255 255 / 20%); }

  .care-orbit__center {
    position: absolute;
    z-index: 1;
    inset: 50% auto auto 50%;
    display: grid;
    width: 8rem;
    height: 8rem;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 20px 50px rgb(0 0 0 / 20%);
  }

  .care-orbit__word {
    position: absolute;
    z-index: 2;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--radius-pill);
    color: #fff;
    background: rgb(255 255 255 / 8%);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.04em;
  }

  .care-orbit__word--listen { top: 6%; left: 18%; }
  .care-orbit__word--learn { top: 34%; right: -1%; }
  .care-orbit__word--respond { bottom: 8%; left: 12%; }

  @media (max-width: 70rem) {
    .care-hero {
      min-height: auto;
      padding-block: var(--space-12);
    }

    .care-hero .hero__grid {
      grid-template-columns: 1fr;
    }

    .care-hero__visual { min-height: 31rem; }
  }

  @media (max-width: 44rem) {
    .care-hero__title {
      max-width: 12ch !important;
    }

    .care-hero__title > span {
      display: inline;
    }

    .care-hero__title > .text-gradient { white-space: normal; }
    .care-hero__title > span::after { content: " "; }
    .care-hero__visual { min-height: 35rem; }
    .care-map { aspect-ratio: 0.78; }
    .care-map__line { width: 35%; }
    .care-map__line--people { transform: rotate(236deg); }
    .care-map__line--providers { transform: rotate(304deg); }
    .care-map__line--diagnostics { transform: rotate(124deg); }
    .care-map__line--programmes { transform: rotate(56deg); }
    .care-map__core { width: 13rem; }
    .care-map__node { width: min(11.5rem, 48%); }
    .care-map__node--people,
    .care-map__node--diagnostics { left: 0; }
    .care-map__node--providers,
    .care-map__node--programmes { right: 0; }
  }
}

@layer pages {
  .suite-layers {
    display: grid;
    max-width: 62rem;
    margin-inline: auto;
    gap: var(--space-4);
  }

  .suite-layer {
    position: relative;
    display: grid;
    gap: var(--space-3);
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .suite-layer::before,
  .suite-layer::after {
    position: absolute;
    width: 1px;
    height: var(--space-5);
    right: 50%;
    bottom: calc(-1 * var(--space-5));
    background: linear-gradient(var(--pc-blue), var(--pc-teal));
    content: "";
  }

  .suite-layer:last-child::before,
  .suite-layer:last-child::after {
    display: none;
  }

  .suite-layer::after {
    width: 0.45rem;
    height: 0.45rem;
    bottom: calc(-1 * var(--space-5) - 0.2rem);
    border-radius: 50%;
    transform: translateX(50%);
  }

  .suite-layer > span {
    color: var(--color-action);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .suite-layer p {
    max-width: 45rem;
    margin-inline: auto;
  }

  .suite-layer--workspace {
    width: 82%;
    margin-inline: auto;
    border-color: rgb(22 125 106 / 22%);
  }

  .suite-layer--apps {
    width: 92%;
    margin-inline: auto;
    background: var(--gradient-wash), var(--color-surface);
  }

  .suite-layer--graph {
    color: var(--color-surface);
    background: var(--gradient-night);
  }

  .suite-layer--graph h3 {
    color: var(--color-surface);
  }

  .suite-layer--graph p {
    color: rgb(255 255 255 / 68%);
  }

  .suite-layer__apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }

  .suite-layer__apps strong {
    min-width: 7rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    background: var(--color-surface);
    font-size: var(--text-sm);
  }

  .platform-tabs-section {
    background: var(--gradient-wash);
  }

  .platform-tabs {
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(var(--space-10), 7vw, var(--space-20));
  }

  .platform-tabs__intro {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-5);
  }

  .tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 78%);
  }

  .tab-list button {
    min-height: 2.7rem;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 0.65rem;
    color: var(--color-text-muted);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 750;
    cursor: pointer;
  }

  .tab-list button[aria-selected="true"] {
    color: var(--color-surface);
    background: var(--color-action);
    box-shadow: 0 8px 18px rgb(22 125 106 / 18%);
  }

  .tab-panels {
    min-width: 0;
  }

  .tab-panel {
    display: grid;
    min-height: 27rem;
    align-content: center;
    gap: var(--space-8);
    padding: clamp(var(--space-8), 5vw, var(--space-16));
    border: 1px solid rgb(22 125 106 / 18%);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(circle at 100% 0%, rgb(239 127 109 / 12%), transparent 18rem),
      var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .js .tab-panel[hidden] {
    display: none;
  }

  .no-js .tab-list {
    display: none;
  }

  .no-js .tab-panels {
    display: grid;
    gap: var(--space-5);
  }

  .tab-panel__number {
    color: var(--color-action);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
  }

  .tab-panel > div {
    display: grid;
    gap: var(--space-4);
  }

  .tab-panel ul,
  .solution-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
  }

  .tab-panel li,
  .solution-card li {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: var(--color-surface-soft);
    font-size: var(--text-xs);
    font-weight: 650;
  }

  .solution-grid {
    row-gap: var(--space-5);
  }

  .solution-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
  }

  .solution-card__number {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    color: var(--color-action);
    background: var(--color-surface-blue);
    font-size: var(--text-sm);
    font-weight: 800;
  }

  .solution-card > div {
    display: grid;
    gap: var(--space-4);
  }

  .solution-audience {
    display: grid;
    gap: var(--space-3);
  }

  .solution-audience article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: 1px solid rgb(200 217 111 / 16%);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 7%);
  }

  .solution-audience span {
    color: var(--pc-sky);
    font-size: var(--text-xs);
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .solution-audience strong {
    color: var(--color-surface);
    font-family: var(--font-heading);
    text-align: right;
  }

  .company-story {
    display: grid;
    grid-template-columns: minmax(19rem, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: clamp(var(--space-12), 8vw, var(--space-24));
  }

  .company-story__mark {
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--gradient-wash);
  }

  .company-story__copy {
    display: grid;
    gap: var(--space-5);
  }

  .company-story__copy p {
    font-size: var(--text-lg);
  }

  .attribute-grid {
    justify-content: center;
  }

  .attribute-dot {
    width: 2rem;
    height: 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--color-action);
  }

  .attribute-dot--teal { background: var(--color-accent); }
  .attribute-dot--sky { background: var(--pc-sky); }

  .brand-meaning {
    overflow: hidden;
  }

  .brand-meaning__grid {
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: clamp(var(--space-12), 8vw, var(--space-24));
  }

  .brand-meaning__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 28rem;
  }

  .brand-meaning__visual::before,
  .brand-meaning__visual::after {
    position: absolute;
    width: 25rem;
    height: 25rem;
    border: 1px solid rgb(200 217 111 / 16%);
    border-radius: 50%;
    content: "";
  }

  .brand-meaning__visual::after {
    width: 18rem;
    height: 18rem;
    border-color: rgb(239 127 109 / 20%);
  }

  .brand-meaning__visual img {
    z-index: 1;
    width: 12rem;
    border-radius: 2.5rem;
    box-shadow: 0 28px 60px rgb(0 0 0 / 28%);
  }

  .brand-meaning__copy {
    display: grid;
    gap: var(--space-6);
  }

  .brand-meaning__copy h2 {
    color: var(--color-surface);
  }

  .brand-meaning__items {
    display: grid;
    gap: var(--space-3);
  }

  .brand-meaning__items article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid rgb(255 255 255 / 10%);
  }

  .brand-meaning__items article > span {
    color: var(--pc-sky);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
  }

  .brand-meaning__items article > div {
    display: grid;
    gap: var(--space-2);
  }

  .brand-meaning__items h3 {
    color: var(--color-surface);
  }

  .brand-meaning__items p {
    color: rgb(255 255 255 / 65%);
  }

  .security-boundary {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
  }

  .security-boundary > div {
    display: grid;
    gap: var(--space-4);
  }

  .security-boundary h2 {
    color: var(--color-surface);
  }

  .security-boundary > p {
    color: rgb(255 255 255 / 70%);
    font-size: var(--text-lg);
  }

  @media (max-width: 60rem) {
    .platform-tabs,
    .company-story,
    .brand-meaning__grid,
    .security-boundary {
      grid-template-columns: 1fr;
    }

    .company-story__mark {
      max-width: 30rem;
    }

    .brand-meaning__visual {
      min-height: 22rem;
    }
  }

  @media (max-width: 44rem) {
    .suite-layer--workspace,
    .suite-layer--apps {
      width: 100%;
    }

    .suite-layer__apps strong {
      min-width: 0;
      flex: 1 1 40%;
    }

    .tab-list {
      width: 100%;
    }

    .tab-list button {
      flex: 1;
    }

    .tab-panel {
      min-height: 0;
      padding: var(--space-6);
    }

    .solution-card {
      grid-template-columns: 1fr;
    }

    .solution-audience article {
      display: grid;
      justify-content: stretch;
    }

    .solution-audience strong {
      text-align: left;
    }

    .brand-meaning__visual::before {
      width: 20rem;
      height: 20rem;
    }
  }
}