@layer components {
  .ed-act__media .illustration {
    --ill-size: min(100%, 22rem);
    margin-inline: auto;
  }
  .editorial {
    --ed-bleed: 9vw;

    overflow-x: clip;
  }

  .ed-kicker {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-primary-soft);
  }


  .ed-hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    padding-block: clamp(2.75rem, 6vw, 5.75rem) 2.5rem;
  }
  .ed-hero__head {
    grid-column: 2 / 12;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }
  .ed-hero__title {
    margin: 0;
    font-size: clamp(3.4rem, 7.5vw, 6.4rem);
    line-height: 1;


    & em {
      font-style: normal;
      font-weight: inherit;
      color: var(--pw-primary-soft);
    }
  }
  .ed-hero__lead {
    grid-column: 2 / 7;
    margin-block-start: 1.25rem;
    font-size: var(--pw-fs-lead);
    font-weight: 300;
    line-height: 1.7;
    color: var(--pw-fg-subtle);

    & em {
      font-style: normal;
      font-weight: 400;
      color: var(--pw-primary-muted);
    }
  }
  .ed-hero__actions {
    grid-column: 2 / 7;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-block-start: 1.35rem;
  }
  .ed-hero__ghost {
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
  }
  .ed-hero__ghost:hover {
    color: var(--pw-fg-strong);
  }
  .ed-hero--show {
    row-gap: clamp(1.75rem, 4vw, 3rem);
  }
  .ed-hero__copy {
    grid-column: 2 / 7;
    display: flex;
    flex-direction: column;
    align-self: center;
  }
  .ed-hero__copy :is(.ed-hero__head, .ed-hero__lead, .ed-hero__actions) {
    grid-column: auto;
  }
  .ed-hero__media {
    grid-column: 7 / 12;
    display: grid;
    place-items: center;
    min-inline-size: 12.5rem;
  }
  .ed-hero__media :is(.scene, .illustration) {
    inline-size: min(100%, 28rem);
    block-size: auto;
  }
  .ed-hero__features {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: clamp(3.5rem, 7vw, 6rem) 0 0;
    padding: 0;
    list-style: none;
  }
  .ed-hero__feature {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    align-items: flex-start;
    padding-inline: 1rem;
    border-inline-start: 1px solid var(--pw-border-soft);
  }
  .ed-hero__feature:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .ed-hero__feature-kicker {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-primary-soft);
  }
  .ed-hero__feature-title {
    color: var(--pw-fg-subtle);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.35;
  }


  .ed-act {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding-block: clamp(2.5rem, 5vw, 4.375rem);
    scroll-margin-top: calc(var(--pw-header-h) + 1.5rem);
  }

  .ed-act__text {
    grid-column: 2 / 7;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
  }
  .ed-act__text > .eyebrow { margin-block-end: -.5rem; }
  .ed-act__media {
    grid-column: 7 / 12;
    margin-inline-end: 0;
  }
  .ed-act__media .terminal {
    inline-size: min(100%, 26rem);
    min-block-size: 12rem;
    display: grid;
    align-content: center;
    justify-self: center;
  }
  .ed-act__proof {
    margin: 0;

    & .terminal pre {
      font-size: var(--pw-fs-xs);
      line-height: 1.75;
    }

    & figcaption {
      margin-block-end: .75rem;
      font-family: var(--pw-font-mono);
      font-size: var(--pw-fs-2xs);
      letter-spacing: var(--pw-track-eyebrow);
      text-transform: uppercase;
      color: var(--pw-fg-faint);
    }
  }


  .ed-act--flip {
    & .ed-act__text { grid-column: 7 / 12; }
    & .ed-act__media {
      grid-column: 2 / 7;
      grid-row: 1;
      margin-inline: 0;
    }
  }

  .ed-act:nth-of-type(odd) {
    & .ed-act__text,
    & .ed-act__media { transform: none; }
  }
  .ed-act:nth-of-type(even) {
    & .ed-act__text,
    & .ed-act__media { transform: none; }
  }

  .ed-act__eyebrow { display: flex; align-items: baseline; gap: 1rem; }

  .ed-act__title {
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.08;
  }

  .ed-act__title-link {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease-out;

    &:hover,
    &:focus-visible { color: var(--pw-primary-soft); }
  }
  .ed-act__lead {
    margin: 0;
    font-size: var(--pw-fs-md);
    font-weight: 300;
    line-height: 1.75;
    color: var(--pw-fg-subtle);

    & em { font-style: normal; color: var(--pw-primary-muted); }
  }
  .ed-act__link {
    align-self: start;
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    font-size: var(--pw-fs-sm);
    color: var(--pw-primary-soft);
    &:hover { color: var(--pw-fg-strong); }
  }
  .ed-act__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem 1.75rem;
  }


  .ed-cta { border-block-start: 1px solid var(--pw-border); margin-block-start: clamp(3rem, 8vw, 6rem); }
  .ed-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 3rem;
    align-items: center;
    padding-block: clamp(4rem, 9vw, 8.75rem);
  }
  .ed-cta__text { display: flex; flex-direction: column; gap: 1.375rem; }
  .ed-cta__title {
    margin: 0;
    font-size: clamp(2.6rem, 5.5vw, 4.6rem);
    line-height: 1.02;
    & em { font-style: normal; font-weight: inherit; color: var(--pw-primary-soft); }
  }
  .ed-cta__lead {
    margin: 0;
    max-inline-size: 42ch;
    font-size: var(--pw-fs-lead);
    font-weight: 300;
    line-height: 1.65;
    color: var(--pw-fg-subtle);
  }
  .ed-cta__actions {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex-wrap: wrap;
    justify-self: end;
  }
  .ed-cta__ghost {
    padding: .9rem .6rem;
    font-size: var(--pw-fs-sm);
    color: var(--pw-fg-meta);
    &:hover { color: var(--pw-fg-strong); }
  }


  .scene { inline-size: 100%; block-size: auto; }
  .scene__line {
    fill: none;
    stroke: var(--pw-ill);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .scene__accent { stroke: var(--pw-primary-soft); }
  .scene__warn { stroke: var(--pw-secondary); }
  .scene__check { stroke: var(--pw-success); stroke-width: 1.4; }
  .scene__cursor { fill: var(--pw-bg-panel); stroke: var(--pw-primary-soft); }
  .scene__panel { fill: var(--pw-bg-panel); }

  .scene__target {
    stroke: var(--pw-secondary);
    transform-box: fill-box;
    transform-origin: center;
    animation: pw-target 1.8s ease-in-out infinite;
  }
  .scene__ping {
    stroke: var(--pw-primary-soft);
    transform-box: fill-box;
    transform-origin: center;
    animation: pw-ping 1.8s ease-out infinite;
  }
  .scene__ping--tap { animation-duration: 1.6s; }
  .scene__check--draw { animation: pw-draw 2.4s ease-out infinite; }
  .scene__playhead { fill: color-mix(in oklch, var(--pw-primary) 14%, transparent); }


  .scene__scrub {
    transform-box: view-box;

    animation: pw-scrub 6s cubic-bezier(.65, 0, .35, 1) infinite;
  }
  @keyframes pw-scrub {
    0%,  14% { translate: -168px 0; }
    25%, 39% { translate: -84px 0; }
    50%, 64% { translate: 0 0; }
    75%, 89% { translate: 84px 0; }
    100%     { translate: -168px 0; }
  }


  .scene__hop {
    fill: var(--pw-primary-soft);
    stroke: none;
    transform-box: view-box;
    animation: pw-hop 3.6s ease-in-out infinite;
  }

  .scene__hop--ask   { --from: 186px; --to: 244px; }
  .scene__hop--reply { --from: 244px; --to: 186px; fill: var(--pw-success); animation-delay: 1.8s; }

  @keyframes pw-hop {
    0%        { translate: var(--from) 140px; opacity: 0; }
    14%       { translate: var(--from) 140px; opacity: 1; }
    46%       { translate: var(--to)   140px; opacity: 1; }
    56%, 100% { translate: var(--to)   140px; opacity: 0; }
  }


  .scene__emit {
    fill: none;
    transform-box: view-box;
    animation: pw-emit 3.9s linear infinite;
  }
  .scene__emit rect { stroke: currentColor; }

  .scene__tagged {
    fill: currentColor;
    stroke: none;
    font-family: var(--pw-font-mono);
    font-size: 10px;
    text-anchor: middle;
  }
  .scene__emit--a { color: var(--pw-primary-soft); }
  .scene__emit--b { color: var(--pw-secondary); animation-delay: 1.3s; }
  .scene__emit--c { color: var(--pw-success); animation-delay: 2.6s; }

  .scene__listen { animation: pw-listen 1.3s ease-out infinite; }

  @keyframes pw-emit {
    0%        { translate: 186px 140px; opacity: 0; }
    10%       { translate: 186px 140px; opacity: 1; }
    82%       { translate: 452px 140px; opacity: 1; }
    92%, 100% { translate: 452px 140px; opacity: 0; }
  }
  @keyframes pw-listen {
    0%, 72%  { opacity: .35; scale: 1; }
    84%      { opacity: 1;   scale: 1.5; }
    100%     { opacity: .35; scale: 1; }
  }


  .scene__tok {
    fill: var(--pw-primary-soft);
    stroke: none;

    animation: pw-tok 4s ease-in-out infinite;
  }
  .scene__tok--page { offset-path: path('M124 140C210 140 250 78 368 78'); }
  .scene__tok--api  { offset-path: path('M124 140C210 140 250 208 368 208'); animation-delay: .5s; }
  .scene__ok { fill: var(--pw-success); stroke: none; }

  @keyframes pw-tok {
    0%        { offset-distance: 0%;   opacity: 0; }
    12%       { offset-distance: 4%;   opacity: 1; }
    76%       { offset-distance: 100%; opacity: 1; }
    88%, 100% { offset-distance: 100%; opacity: 0; }
  }


  .scene__pierce {
    stroke-dashoffset: 214;
    animation: pw-pierce 3.4s ease-in-out infinite;
  }
  @keyframes pw-pierce {
    0%        { stroke-dashoffset: 214; }
    45%, 75%  { stroke-dashoffset: 0; }
    100%      { stroke-dashoffset: 0; opacity: 0; }
  }


  .scene__ship {
    transform-box: view-box;
    animation: pw-ship 4.4s ease-in-out infinite;
  }

  .scene__ship--in  { --from: 118px; --to: 190px; }
  .scene__ship--out { --from: 372px; --to: 450px; animation-delay: 2.2s; }

  @keyframes pw-ship {
    0%        { translate: var(--from) 140px; scale: 0; opacity: 0; }
    16%       { translate: var(--from) 140px; scale: 1; opacity: 1; }
    54%       { translate: var(--to)   140px; scale: 1; opacity: 1; }
    70%, 100% { translate: var(--to)   140px; scale: 0; opacity: 0; }
  }


  .scene__carry {
    transform-box: view-box;
    animation: pw-carry 4s ease-in-out infinite;
  }

  .scene__seal { fill: var(--pw-fg-faint); stroke: none; animation: pw-seal 4s ease-in-out infinite; }
  .scene__seal--on { fill: var(--pw-success); animation: none; }

  @keyframes pw-carry {
    0%        { translate: 190px 120px; scale: 0;   opacity: 0; }
    18%       { translate: 190px 120px; scale: 1;   opacity: 1; }
    52%       { translate: 270px 120px; scale: 1;   opacity: 1; }
    68%, 100% { translate: 270px 120px; scale: 0;   opacity: 0; }
  }
  @keyframes pw-seal {
    0%, 62%   { fill: var(--pw-fg-faint); }
    72%, 100% { fill: var(--pw-success); }
  }


  .scene__hand {

    transform-box: view-box;
    transform-origin: 230px 150px;
    animation: pw-warp 4.5s cubic-bezier(.4, 0, .2, 1) infinite;
  }

  .scene__label.scene__skip {
    fill: var(--pw-secondary);
    animation: pw-skip 4.5s cubic-bezier(.4, 0, .2, 1) infinite;
  }

  @keyframes pw-warp {
    0%        { rotate: 0deg;   opacity: 1; }
    38%       { rotate: 180deg; opacity: 1; }
    44%       { rotate: 180deg; opacity: 0; }
    56%       { rotate: 300deg; opacity: 0; }
    62%       { rotate: 300deg; opacity: 1; }
    100%      { rotate: 360deg; opacity: 1; }
  }
  @keyframes pw-skip {
    0%, 40%   { opacity: 0; }
    50%, 60%  { opacity: 1; }
    70%, 100% { opacity: 0; }
  }


  .scene__label {
    fill: var(--pw-fg-meta);
    stroke: none;
    font-family: var(--pw-font-mono);
    font-size: 13px;
    text-anchor: middle;
  }
  .scene__label--strong { fill: var(--pw-fg-strong); font-size: 17px; }
  .scene__label--tiny { fill: var(--pw-fg-faint); font-size: 11px; }
  .scene__label.scene__muted { fill: var(--pw-fg-faint); opacity: .55; }

  .scene__flow { stroke: none; }
  .scene__packet {
    fill: var(--pw-primary-soft);


    animation: pw-packet 2.6s linear infinite backwards;
  }
  .scene__packet--back { fill: var(--pw-success); animation-delay: 1.3s; }
  .scene__packet--dot { animation-duration: 2s; }
  .scene__packet--dot.scene__packet--back { animation-delay: 1s; }

  @keyframes pw-packet {
    0%        { transform: translateX(var(--from)); opacity: 0; }
    12%, 88%  { opacity: 1; }
    100%      { transform: translateX(var(--to)); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {

    .scene__scrub { animation: none; translate: 0 0; }
    .scene__hop { animation: none; translate: var(--to) 140px; opacity: 1; }
    .scene__emit { animation: none; translate: 452px 140px; opacity: 1; }
    .scene__listen { animation: none; opacity: 1; }
    .scene__tok { animation: none; offset-distance: 100%; opacity: 1; }
    .scene__pierce { animation: none; stroke-dashoffset: 0; }


    .scene__ship { animation: none; translate: var(--to) 140px; }


    .scene__carry { animation: none; translate: 270px 120px; }
    .scene__seal { animation: none; fill: var(--pw-success); }


    .scene__hand { animation: none; rotate: 300deg; }
    .scene__label.scene__skip { animation: none; opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {

    .scene__packet {
      animation: none;
      transform: translateX(calc((var(--from) + var(--to)) / 2));
      opacity: .85;
    }
  }


  @media (width <= 58rem) {
    .editorial { --ed-bleed: 0px; }

    :is(.ed-hero, .ed-act, .ed-cta__inner) { grid-template-columns: minmax(0, 1fr); }
    :is(.ed-hero__head, .ed-hero__copy, .ed-hero__lead, .ed-hero__actions, .ed-hero__media, .ed-hero__features, .ed-act__text, .ed-act__media) { grid-column: 1; }

    .ed-act--flip :is(.ed-act__text, .ed-act__media) { grid-column: 1; }
    .ed-act--flip .ed-act__media { grid-row: auto; }

    .ed-act { gap: 2rem; padding-block: 2.5rem; }
    .ed-hero__title em { margin-inline-start: 0; }
    .ed-hero__lead { margin-block-start: 1.25rem; }


    :is(.ed-act:nth-of-type(odd), .ed-act:nth-of-type(even)) {
      & :is(.ed-act__text, .ed-act__media) { transform: none; }
    }
    .ed-cta__actions { justify-self: start; }

    .feature-resource,
    .feature-related-card { min-block-size: 0; }
  }


  @media (40rem < width <= 58rem) {
    .ed-hero--show,
    .ed-act {
      grid-template-columns: minmax(0, 1.15fr) minmax(12.5rem, .85fr);
      column-gap: clamp(1.5rem, 4vw, 2.5rem);
    }
    .ed-hero--show .ed-hero__copy,
    .ed-act .ed-act__text {
      grid-column: 1;
    }
    .ed-hero--show .ed-hero__media,
    .ed-act .ed-act__media {
      grid-column: 2;
      grid-row: 1;
    }
    .ed-hero--show .ed-hero__features {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .ed-act--flip .ed-act__text {
      grid-column: 2;
    }
    .ed-act--flip .ed-act__media {
      grid-column: 1;
      grid-row: 1;
    }
  }

  @media (width <= 40rem) {
    .ed-hero--show .ed-hero__media {
      grid-row: 1;
      inline-size: min(100%, 18rem);
      margin-inline: auto;
    }
    .ed-hero--show .ed-hero__copy {
      grid-row: 2;
      align-items: center;
      text-align: center;
    }
    .ed-hero--show .ed-hero__head { align-items: center; }
    .ed-hero--show .ed-hero__actions { justify-content: center; }
    .ed-hero--show .ed-hero__features {
      grid-row: 3;
      grid-template-columns: minmax(0, 1fr);
      gap: .65rem;
    }
    .ed-hero__feature,
    .ed-hero__feature:first-child {
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
    }
    .ed-act .ed-act__media,
    .ed-act--flip .ed-act__media {
      grid-row: 1;
      inline-size: min(100%, 20rem);
      margin-inline: auto;
    }
    .ed-act .ed-act__text,
    .ed-act--flip .ed-act__text {
      grid-row: 2;
      align-items: center;
      text-align: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :is(.scene__target, .scene__ping, .scene__check--draw) { animation: none; }
  }
}

@keyframes pw-ping {
  0% { transform: scale(.25); opacity: .9; }
  75%, 100% { transform: scale(1.6); opacity: 0; }
}
@keyframes pw-draw {
  0% { stroke-dashoffset: 34; }
  45%, 100% { stroke-dashoffset: 0; }
}

@layer components {
  .ed-more {
    padding-block: clamp(3rem, 6vw, 5rem) 0;

    container-type: inline-size;
  }
  .ed-more__title {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 300;
    letter-spacing: var(--pw-track-snug);
  }
  .feature-mini {
    gap: .75rem;
    min-block-size: 10rem;
  }
  .feature-mini__name {
    color: var(--pw-primary-muted);
    font-size: var(--pw-fs-md);
    font-weight: 500;
    line-height: 1.25;
  }
  .feature-mini__desc {
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.45;
  }

  .feature-deeper,
  .feature-faq,
  .feature-related {
    padding-block: clamp(3.25rem, 6vw, 5.5rem) 0;
  }

  .feature-deeper__title,
  .feature-faq__title,
  .feature-related__title {
    margin: 0;
    max-inline-size: 18ch;
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: var(--pw-track-snug);
  }

  .feature-resource-grid {
    display: grid;
    gap: .875rem;
    margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  }
  @media (width >= 58rem) {
    .feature-resource-grid,
    .feature-related .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .feature-resource {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    min-block-size: 12rem;
    padding: clamp(1.125rem, 2.6vw, 1.65rem);
    border-radius: var(--pw-r-md);
    background: var(--pw-card-flat);
    color: inherit;
    transition: transform .18s var(--pw-ease-scene), background-color .18s var(--pw-ease-scene);

    &:hover {
      transform: translateY(-.125rem);
      background: color-mix(in oklch, var(--pw-card-flat) 88%, var(--pw-primary));
    }
  }

  .feature-resource__body {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: .45rem;
  }
  .feature-resource__eyebrow {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
  }
  .feature-resource__title {
    color: var(--pw-primary-muted);
    font-size: var(--pw-fs-lg);
    font-weight: 500;
    line-height: 1.18;
  }
  .feature-resource__desc {
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.55;
  }
  .feature-resource__arrow {
    color: var(--pw-primary-soft);
    font-size: var(--pw-fs-lg);
    line-height: 1;
  }

  .feature-faq {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    padding-block: clamp(6.5rem, 11vw, 10rem);
  }
  .feature-faq__head {
    grid-column: 2 / 6;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .feature-faq > .faq {
    grid-column: 6 / 12;
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
  }

  .feature-deeper .section-head,
  .feature-related .section-head {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
    margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
  }
  .feature-related {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.25rem, 6vw, 5.5rem);
  }
  .feature-related::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline: calc(50% - 50vw);
    background: color-mix(in oklch, var(--pw-primary) 7%, var(--pw-bg-panel));
  }
  .feature-related__title {
    margin-inline: auto;
  }
  .feature-related-card {
    gap: .7rem;
    min-block-size: 12rem;
  }
  .feature-related-card__eyebrow {
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    letter-spacing: var(--pw-track-eyebrow);
    text-transform: uppercase;
    color: var(--pw-fg-faint);
  }
  .feature-related-card__title {
    color: var(--pw-primary-muted);
    font-size: var(--pw-fs-lg);
    font-weight: 500;
    line-height: 1.2;
  }
  .feature-related-card__desc {
    color: var(--pw-fg-meta);
    font-size: var(--pw-fs-sm);
    font-weight: 300;
    line-height: 1.5;
  }

  @media (width <= 58rem) {
    .feature-faq {
      grid-template-columns: minmax(0, 1fr);
    }
    .feature-faq__head,
    .feature-faq > .faq {
      grid-column: 1;
    }
  }
}