@layer modules {
  .analytics-chapter {
    scroll-margin-top: var(--header-height);
    overflow-x: clip;
  }
  .analytics-chapter__header {
    position: relative;
    z-index: 2;
    max-width: 22rem;
    margin-inline: auto;
    margin-block-end: var(--space-10);
    text-align: center;
  }
  .analytics-chapter__eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-ink) 42%, transparent);
  }
  .analytics-chapter__title {
    margin-block-start: var(--space-3);
    margin-block-end: 0;
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    letter-spacing: var(--letter-spacing-tighter);
    line-height: var(--line-height-tight);
  }
  .analytics-chapter__report {
    display: grid;
    gap: var(--space-4);
  }
  .analytics-chapter__kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 768px) {
    .analytics-chapter__kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-4);
    }
  }
  .analytics-chapter__kpis > li {
    display: flex;
    min-width: 0;
    min-height: 0;
  }
  .analytics-chapter__kpi {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 10rem;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--bento-edge);
    border-radius: 1.25rem;
    background: var(--hero-bento-surface);
    box-shadow: var(--bento-lift);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
  }
  .analytics-chapter__kpi.is-open {
    border-color: var(--bento-edge-hover);
    box-shadow: var(--bento-lift-hover);
  }
  .analytics-chapter__kpi-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-ink) 42%, transparent);
  }
  .analytics-chapter__kpi-value {
    margin: var(--space-2) 0 0;
    min-height: 1.5em;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-height-tight);
    white-space: nowrap;
  }
  .analytics-chapter__kpi-delta {
    margin: var(--space-1) 0 0;
    min-height: 1.125rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    line-height: 1.125rem;
  }
  .analytics-chapter__kpi--down .analytics-chapter__kpi-delta {
    color: var(--color-negative);
  }
  .analytics-chapter__kpi--up .analytics-chapter__kpi-delta {
    color: var(--color-positive);
  }
  .analytics-chapter__spark {
    display: block;
    width: 100%;
    height: 3.25rem;
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    color: var(--color-ink);
    pointer-events: none;
  }
  .analytics-chapter__mid {
    display: grid;
    gap: var(--space-4);
  }
  @media (min-width: 768px) {
    .analytics-chapter__mid {
      grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.9fr);
      align-items: stretch;
    }
  }
  .analytics-chapter__trend,
  .analytics-chapter__devices {
    padding: var(--space-5);
    border: 1px solid var(--bento-edge);
    border-radius: 1.25rem;
    background: var(--hero-bento-surface);
    box-shadow: var(--bento-lift);
  }
  .analytics-chapter__panel-kicker {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-ink) 42%, transparent);
  }
  .analytics-chapter__panel-title {
    margin: var(--space-1) 0 0;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
  }
  .analytics-chapter__chart {
    display: block;
    width: 100%;
    height: auto;
    margin-block-start: var(--space-4);
    overflow: visible;
  }
  .analytics-chapter__chart-grid line {
    stroke: color-mix(in srgb, var(--color-ink) 10%, transparent);
    stroke-width: 1;
  }
  .analytics-chapter__chart-fill {
    fill: color-mix(in srgb, var(--color-ink) 10%, transparent);
  }
  .analytics-chapter__chart-line {
    fill: none;
    stroke: var(--color-ink);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .analytics-chapter__chart-compare {
    fill: none;
    stroke: color-mix(in srgb, var(--color-ink) 28%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
  }
  .analytics-chapter__chart-axis {
    display: flex;
    justify-content: space-between;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--color-ink) 38%, transparent);
  }
  .analytics-chapter__devices-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-5);
  }
  .analytics-chapter__donut-wrap {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    flex: 0 0 auto;
  }
  .analytics-chapter__donut {
    display: block;
    width: 100%;
    height: 100%;
  }
  .analytics-chapter__donut-track,
  .analytics-chapter__donut-arc {
    fill: none;
    stroke-width: 8;
  }
  .analytics-chapter__donut-track {
    stroke: color-mix(in srgb, var(--color-ink) 10%, transparent);
  }
  .analytics-chapter__donut-arc {
    stroke: var(--color-ink);
  }
  .analytics-chapter__donut-arc--mobile {
    opacity: 1;
  }
  .analytics-chapter__donut-arc--desktop {
    opacity: 0.42;
  }
  .analytics-chapter__donut-arc--tablet {
    opacity: 0.18;
  }
  .analytics-chapter__donut-total {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-ink) 46%, transparent);
    pointer-events: none;
  }
  .analytics-chapter__donut-total span {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    text-transform: none;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
  }
  .analytics-chapter__device-list {
    display: grid;
    gap: var(--space-2);
    flex: 1 1 10rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .analytics-chapter__device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-canvas-alt);
  }
  .analytics-chapter__device-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .analytics-chapter__device-name::before {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-ink);
  }
  .analytics-chapter__device--desktop .analytics-chapter__device-name::before {
    opacity: 0.42;
  }
  .analytics-chapter__device--tablet .analytics-chapter__device-name::before {
    opacity: 0.18;
  }
  .analytics-chapter__device-share {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--color-ink) 55%, transparent);
  }
  .analytics-chapter__stage {
    --funnel-progress: 1;
    position: relative;
    isolation: isolate;
    max-width: 36rem;
    margin-inline: auto;
    margin-block-start: var(--space-10);
  }
  .js .analytics-chapter__stage:not(.is-ready) .analytics-chapter__ribbon {
    opacity: 0;
  }
  .analytics-chapter__funnel {
    display: block;
    width: 100%;
    height: auto;
    color: var(--color-ink);
    overflow: visible;
  }
  .analytics-chapter__guides line {
    stroke: color-mix(in srgb, var(--color-ink) 10%, transparent);
    stroke-width: 1;
    stroke-dasharray: 2 6;
  }
  .analytics-chapter__ribbon {
    stroke: none;
  }
  .analytics-chapter__ribbon--sessions {
    fill: color-mix(in srgb, var(--color-ink) 10%, transparent);
  }
  .analytics-chapter__ribbon--event {
    fill: color-mix(in srgb, var(--color-ink) 18%, transparent);
  }
  .analytics-chapter__ribbon--checkout {
    fill: color-mix(in srgb, var(--color-ink) 38%, transparent);
  }
  .analytics-chapter__ribbon--converting {
    fill: var(--color-ink);
    filter: url(#analytics-funnel-glow);
  }
  .analytics-chapter__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 768px) {
    .analytics-chapter__steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-block-start: var(--space-4);
    }
  }
  .analytics-chapter__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    opacity: calc(0.35 + var(--funnel-progress) * 0.65);
  }
  .analytics-chapter__share {
    font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-height-tight);
  }
  .analytics-chapter__step-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-ink) 46%, transparent);
  }
  .analytics-chapter__expand {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    padding: var(--space-6);
    border: 0;
    background: transparent;
  }
  .analytics-chapter__expand[open] {
    display: flex;
  }
  .analytics-chapter__expand::backdrop {
    background: color-mix(in srgb, var(--color-canvas) 72%, transparent);
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out);
  }
  .analytics-chapter__expand.is-in::backdrop {
    opacity: 1;
  }
  .analytics-chapter__expand-panel {
    width: min(44rem, 100%);
    max-height: calc(100dvh - 3rem);
    overflow: auto;
    padding: var(--space-6);
    border: 1px solid var(--bento-edge);
    border-radius: 1.25rem;
    background: var(--hero-bento-surface);
    box-shadow: var(--bento-lift-hover);
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0) scale(0.98);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
  }
  .analytics-chapter__expand.is-in .analytics-chapter__expand-panel {
    opacity: 1;
    transform: none;
  }
  .analytics-chapter__expand-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-5);
  }
  .analytics-chapter__expand-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-ink) 42%, transparent);
  }
  .analytics-chapter__expand-value {
    margin: var(--space-2) 0 0;
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-height-tight);
  }
  .analytics-chapter__expand-change {
    margin: var(--space-1) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }
  .analytics-chapter__expand-change.is-up {
    color: var(--color-positive);
  }
  .analytics-chapter__expand-change.is-down {
    color: var(--color-negative);
  }
  .analytics-chapter__expand-close {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bento-edge);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  .analytics-chapter__expand-chart {
    display: block;
    width: 100%;
    height: auto;
    min-height: 14rem;
    overflow: hidden;
  }
  .analytics-chapter__expand .analytics-chapter__chart-axis {
    display: flex;
    justify-content: space-between;
    gap: var(--space-1);
    margin-block-start: var(--space-3);
    padding-inline: 7.8%;
  }
  .analytics-chapter__expand .analytics-chapter__chart-axis li {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
  .analytics-chapter__expand .analytics-chapter__chart-axis li:first-child {
    text-align: left;
  }
  .analytics-chapter__expand .analytics-chapter__chart-axis li:last-child {
    text-align: right;
  }
  @media (hover: hover) and (pointer: fine) {
    .analytics-chapter__ribbon--sessions,
    .analytics-chapter__ribbon--event,
    .analytics-chapter__ribbon--checkout,
    .analytics-chapter__ribbon--converting {
      transition: fill var(--duration-normal) var(--ease-out);
    }
    .analytics-chapter__stage:hover .analytics-chapter__ribbon--sessions {
      fill: color-mix(in srgb, var(--color-ink) 16%, transparent);
    }
    .analytics-chapter__stage:hover .analytics-chapter__ribbon--event {
      fill: color-mix(in srgb, var(--color-ink) 26%, transparent);
    }
    .analytics-chapter__stage:hover .analytics-chapter__ribbon--checkout {
      fill: color-mix(in srgb, var(--color-ink) 50%, transparent);
    }
    .analytics-chapter__kpi,
    .analytics-chapter__trend,
    .analytics-chapter__devices {
      transition: border-color var(--duration-normal) var(--ease-out);
    }
    .analytics-chapter__kpi:hover,
    .analytics-chapter__trend:hover,
    .analytics-chapter__devices:hover {
      border-color: var(--bento-edge-hover);
      box-shadow: var(--bento-lift-hover);
    }
    .analytics-chapter__expand-close:hover {
      border-color: var(--bento-edge-hover);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .js .analytics-chapter__stage:not(.is-ready) .analytics-chapter__ribbon {
      opacity: 1;
    }
    .analytics-chapter__stage {
      --funnel-progress: 1;
    }
    .analytics-chapter__step {
      opacity: 1;
    }
    .analytics-chapter__expand-panel,
    .analytics-chapter__expand::backdrop {
      transition: none;
      transform: none;
      opacity: 1;
    }
  }
}