@layer psv-page {
  .pricing-route {
    --pricing-border: rgb(var(--psv-line-rgb) / .22);
  }

  /* The opening keeps the canonical band. Pricing used to override the shell's
     height and drop, which is exactly what makes a first line land somewhere
     other than where it lands on every other page. It no longer does.

     The statement itself is set in Inter ExtraBold: this route's opening
     carries more weight than the rest of the site's openings. */

  /* Even ground. A diagonal wash lit the leftmost package more than the
     rightmost one, which is the one thing a page of three equal packages
     cannot afford to do. */
  .pricing-plans {
    background: transparent;
    border-top: 0;
  }

  .scene-shell--plans {
    grid-template-rows: minmax(0, 1fr);
  }

  /* The column's block breathing lives on the grid, not on the column: a
     subgrid item's own block padding would shift it off the shared row lines. */
  /* The packages begin where the second scene begins on Signals and Research.
     Measured per profile against signals.html and matched, rather than guessed:
     222 / 139 / 260 / 233 at the four profiles that have the room for it. */
  .plan-grid {
    --plans-lead: calc(150 * var(--psv-u));
    padding-block: clamp(14px, 1.8svh, 30px);
    padding-block-start: calc(clamp(14px, 1.8svh, 30px) + var(--plans-lead));
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-grid {
      padding-block: clamp((14 * var(--psv-u)), (13.14 * var(--psv-u)), (30 * var(--psv-u)));
      padding-block-start: calc(clamp((14 * var(--psv-u)), (13.14 * var(--psv-u)), (30 * var(--psv-u))) + var(--plans-lead));
    }
  }
  /* desktop-scale:end */

  /* Not three boxes on a shelf. Three columns of one specification, divided by
     a single rule — the language every other route on this site already speaks,
     where nothing is filled and hierarchy is carried by type and alignment. */
  .plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Six content rows shared by all three columns, then one slack row. The
       slack sits below the inclusions, so the columns run the full height of
       the scene while the reading, the button and the list stay together at
       the top. */
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
    min-block-size: 0;
    column-gap: clamp(14px, 1.6vw, 24px);
    row-gap: clamp(8px, 1.2svh, 18px);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-grid {
      column-gap: clamp((14 * var(--psv-u)), (24.576 * var(--psv-u)), (24 * var(--psv-u)));
      row-gap: clamp((8 * var(--psv-u)), (8.76 * var(--psv-u)), (18 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  /* The inclusions row is min-content at its floor, never smaller. A 1fr row
     that shrinks below its content lets the list paint over the button beneath
     it. The column grows instead, and the scene contract reports it. */
  /* The column ends at its inclusions. The slack row below carries no column
     and no rule: the three verticals stop where the reading stops. */
  .plan-card {
    display: grid;
    grid-row: 1 / 7;
    grid-template-rows: subgrid;
    min-width: 0;
    min-block-size: 0;
    padding-inline: clamp(18px, 2vw, 30px);
    padding-block: clamp(20px, 2.4svh, 30px) clamp(16px, 2svh, 26px);
    background: rgb(var(--psv-panel-deep-rgb) / .34);
    border: 1px solid var(--pricing-border);
    transition: background-color .2s ease;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-card {
      padding-inline: clamp((18 * var(--psv-u)), (30.72 * var(--psv-u)), (30 * var(--psv-u)));
      padding-block: clamp((20 * var(--psv-u)), (17.52 * var(--psv-u)), (30 * var(--psv-u))) clamp((16 * var(--psv-u)), (14.6 * var(--psv-u)), (26 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .plan-card:first-child {
    border-inline-start: 1px solid var(--pricing-border);
  }

  /* Pointing at a column lifts its ground evenly. No stripe, no edge, no side
     of the card brighter than the other. */
  @media (hover: hover) and (pointer: fine) {
    .plan-card:hover {
      background: rgb(var(--psv-panel-deep-rgb) / .6);
    }

    .plan-card:hover .plan-index {
      color: var(--psv-accent);
    }
  }

  .plan-card:focus-within {
    background: rgb(var(--psv-panel-deep-rgb) / .6);
  }

  /* The site's own register mark: an ordinal, then the name, quietly. */
  .plan-mark {
    display: flex;
    align-items: baseline;
    gap: calc(10 * var(--psv-u));
  }

  .plan-index {
    color: var(--psv-line-strong);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(10 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-label);
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
  }

  .plan-name {
    color: var(--psv-brand);
    font-family: var(--psv-font-sans);
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: var(--psv-weight-semibold);
    letter-spacing: .02em;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-name {
      font-size: clamp((16 * var(--psv-u)), (19.968 * var(--psv-u)), (20 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  /* The price is the statement, set in the display face on one shared baseline
     across the three columns, with tabular figures so the digits line up. */
  .plan-price {
    color: var(--psv-brand);
    font-family: var(--psv-font-display);
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: var(--psv-weight-bold);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-price {
      font-size: clamp((28 * var(--psv-u)), (39.936 * var(--psv-u)), (40 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .plan-price small {
    margin-inline-start: calc(8 * var(--psv-u));
    color: var(--psv-brand);
    font-family: var(--psv-font-mono);
    font-size: clamp(10px, .78vw, 12px);
    font-weight: var(--psv-weight-regular);
    letter-spacing: var(--psv-track-control);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-price small {
      font-size: max(var(--psv-text-floor), clamp((10 * max(var(--psv-u), var(--psv-label-floor))), (11.9808 * max(var(--psv-u), var(--psv-label-floor))), (12 * max(var(--psv-u), var(--psv-label-floor)))));
    }
  }
  /* desktop-scale:end */

  .plan-term {
    color: var(--psv-muted);
    font-family: var(--psv-font-mono);
    font-size: clamp(9px, .74vw, 11px);
    line-height: 1.4;
    letter-spacing: .035em;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-term {
      font-size: max(var(--psv-text-floor), clamp((9 * max(var(--psv-u), var(--psv-label-floor))), (11.3664 * max(var(--psv-u), var(--psv-label-floor))), (11 * max(var(--psv-u), var(--psv-label-floor)))));
    }
  }
  /* desktop-scale:end */

  /* Coverage is its own field, ruled off above and below: what the plan
     watches is a different kind of fact from what the plan includes. */
  .plan-coverage {
    display: grid;
    align-content: start;
    padding-block: clamp(8px, 1.1svh, 14px);
    gap: clamp(3px, .5svh, 6px);
    border-block: 1px solid var(--pricing-border);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-coverage {
      padding-block: clamp((8 * var(--psv-u)), (8.03 * var(--psv-u)), (14 * var(--psv-u)));
      gap: clamp((3 * var(--psv-u)), (3.65 * var(--psv-u)), (6 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  .plan-coverage__label {
    color: var(--psv-line-strong);
    font-family: var(--psv-font-mono);
    font-size: max(var(--psv-text-floor), calc(9 * max(var(--psv-u), var(--psv-label-floor))));
    letter-spacing: var(--psv-track-label);
    text-transform: uppercase;
  }

  /* Chips keep their own height when a wider column's chips wrap and the shared
     row grows: the row's extra height stays under them, not inside them. */
  .plan-coverage__value {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: calc(6 * var(--psv-u));
  }

  /* Each market a chip, the Terminal's own grammar for a symbol. */
  .plan-chip {
    padding: calc(4 * var(--psv-u)) calc(8 * var(--psv-u)) calc(3 * var(--psv-u));
    color: var(--psv-brand);
    font-family: var(--psv-font-mono);
    font-size: clamp(9px, .73vw, 11px);
    font-weight: var(--psv-weight-medium);
    line-height: 1.3;
    letter-spacing: .04em;
    border: 1px solid rgb(var(--psv-brand-rgb) / .34);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-chip {
      font-size: max(var(--psv-text-floor), clamp((9 * max(var(--psv-u), var(--psv-label-floor))), (11.2128 * max(var(--psv-u), var(--psv-label-floor))), (11 * max(var(--psv-u), var(--psv-label-floor)))));
    }
  }
  /* desktop-scale:end */

  /* Inclusions are read, not counted. No bullet, no dash, no plus sign: the
     line itself is the item. */
  .plan-list {
    display: grid;
    align-content: start;
    margin: calc(8 * var(--psv-u)) 0 0;
    padding: 0;
    gap: 0;
    list-style: none;
  }

  .plan-list li {
    padding-block: clamp(6px, .9svh, 9px);
    color: var(--psv-copy);
    font-size: clamp(10px, .84vw, 13px);
    line-height: 1.45;
    border-bottom: 1px solid var(--pricing-border);
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-list li {
      padding-block: clamp((6 * var(--psv-u)), (6.57 * var(--psv-u)), (9 * var(--psv-u)));
      font-size: max(var(--psv-text-floor), clamp((10 * var(--psv-u)), (12.9024 * var(--psv-u)), (13 * var(--psv-u))));
    }
  }
  /* desktop-scale:end */

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

  /* The action stands right under the price, term and coverage, the same in all
     three columns; the inclusions follow it. A shorter list then simply ends,
     instead of leaving air between the reading and the action (D-102). */
  .plan-select {
    margin-block-start: calc(10 * var(--psv-u));
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: max(44px, calc(44 * var(--psv-u)));
    width: 100%;
    padding: calc(9 * var(--psv-u)) calc(10 * var(--psv-u));
    color: var(--psv-bg);
    font-family: var(--psv-font-mono);
    font-size: clamp(9px, .74vw, 11px);
    font-weight: var(--psv-weight-medium);
    letter-spacing: var(--psv-track-control);
    text-align: center;
    background: var(--psv-brand);
    border: 1px solid var(--psv-brand);
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .plan-select {
      font-size: max(var(--psv-text-floor), clamp((9 * max(var(--psv-u), var(--psv-label-floor))), (11.3664 * max(var(--psv-u), var(--psv-label-floor))), (11 * max(var(--psv-u), var(--psv-label-floor)))));
    }
  }
  /* desktop-scale:end */

  @media (hover: hover) and (pointer: fine) {
    .plan-select:hover {
      color: var(--psv-bg);
      background-color: var(--psv-logo-blue);
      border-color: var(--psv-logo-blue);
    }
  }

  .plan-select:focus-visible {
    color: var(--psv-bg-deep);
    background-color: var(--psv-accent-pale);
    border-color: var(--psv-accent-pale);
    outline: 2px solid var(--psv-accent);
    outline-offset: 2px;
  }

  .plan-select:active {
    color: var(--psv-bg-deep);
    background-color: var(--psv-accent-pale);
    border-color: var(--psv-accent-pale);
  }

  /* A short viewport buys room from spacing, never from the package itself. */
  @media (max-height: 800px) {
    .pricing-plans {
      --psv-scene-pad-block: calc(14 * var(--psv-u));
    }

    .plan-grid {
      --plans-lead: calc(92 * var(--psv-u));
      row-gap: calc(9 * var(--psv-u));
    }

    .plan-card {
      padding-inline: calc(14 * var(--psv-u));
    }

    .plan-select {
      margin-block-start: calc(10 * var(--psv-u));
    }

    .plan-price {
      font-size: clamp(28px, 2.7vw, 40px);
    }
  }
  /* desktop-scale:generated */
  @media (min-width: 1051px) {
    .pricing-plans {
      --psv-scene-pad-block: calc(14 * var(--psv-u));
    }

    .plan-grid {
      --plans-lead: calc(92 * var(--psv-u));
      row-gap: calc(9 * var(--psv-u));
    }

    .plan-card {
      padding-inline: calc(14 * var(--psv-u));
    }

    .plan-select {
      margin-block-start: calc(10 * var(--psv-u));
    }

    .plan-price {
      font-size: clamp((28 * var(--psv-u)), (41.472 * var(--psv-u)), (40 * var(--psv-u)));
    }
  }
  /* desktop-scale:end */

  /* K7, the owner's screen-fit decision. The list no
     longer shrinks below its content (.plan-list lost min-block-size: 0), so
     where the packages do not fit a scene the deck sees it and reflows the page
     instead of letting the last lines run past the column. On the desktop the
     room comes from the list's own rhythm and the button's margin, not from
     moving the packages, which keep beginning where the second scene begins on
     Signals and Research. On a screen taller than the canvas they stand in the
     middle of the height the canvas does not use, as the opening does. */
  @media (min-width: 1051px) {
    .plan-list li {
      padding-block: calc(2 * var(--psv-u));
    }

    .plan-select {
      margin-block-start: calc(10 * var(--psv-u));
    }

    .plan-grid {
      --plans-lead: calc(92 * var(--psv-u) + var(--psv-canvas-extra) / 2);
    }
  }

  /* Three columns survive every width. A narrow screen sets each one tighter;
     it never removes one from view. */
  @media (max-width: 900px) {
    .plan-grid {
      --plans-lead: 184px;
      row-gap: 7px;
    }

    .plan-card {
      padding-inline: 8px;
    }

    .plan-mark {
      display: grid;
      gap: 1px;
    }

    .plan-price {
      font-size: clamp(21px, 5.6vw, 30px);
      letter-spacing: -.035em;
    }

    .plan-list li {
      font-size: 10px;
      line-height: 1.35;
    }

    .plan-select {
      padding: 6px 4px;
      font-size: 9px;
      letter-spacing: .04em;
    }
  }

  /* The narrowest supported screen: the last of the slack comes out of the
     spacing between lines, never out of a line. */
  @media (max-width: 360px) {
    .plan-grid {
      --plans-lead: 0px;
      padding-block: 8px;
      row-gap: 5px;
    }

    .plan-list {
      gap: 4px;
    }

    .plan-coverage {
      padding-block: 6px;
      gap: 2px;
    }

    .plan-select {
      margin-block-start: 0;
    }
  }

  @media (forced-colors: active) {
    .plan-card {
      border-inline-start: 1px solid CanvasText;
    }

    .plan-select {
      border: 1px solid CanvasText;
    }

    .plan-select:hover,
    .plan-select:focus-visible {
      color: HighlightText;
      background-color: Highlight;
      border-color: Highlight;
    }
  }
  /* A phone gets one package per row. Three 106px columns are what forced 9px
     type, wrapped every label onto three lines, pushed the grid 184px down the
     screen, and let Ultimate's inclusion list paint over its own button. The
     three-columns-at-every-width rule above is a pointer-screen rule; stacked,
     each package reads at the site's normal size and its action is a real
     target. Order still carries the hierarchy -- nothing is filled or boxed. */
  @media (max-width: 760px) {
    .plan-grid {
      --plans-lead: 0px;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      padding-block: 0;
      padding-block-start: 0;
      row-gap: 0;
    }

    .plan-card {
      grid-row: auto;
      grid-template-rows: auto;
      row-gap: 12px;
      padding-inline: 0;
      padding-block: 28px;
      border-inline-start: 0;
      border-block-start: 1px solid var(--pricing-border);
    }

    .plan-card:first-child {
      padding-block-start: 4px;
      border-block-start: 0;
    }

    .plan-price {
      font-size: clamp(32px, 9vw, 40px);
      letter-spacing: -.03em;
    }

    .plan-list {
      gap: 8px;
    }

    .plan-list li {
      font-size: var(--psv-ui-control);
      line-height: 1.5;
    }

    .plan-select {
      display: grid;
      place-items: center;
      min-block-size: 48px;
      padding: 12px 18px;
      font-size: var(--psv-ui-control);
      letter-spacing: .06em;
    }

    /* 9-10px was the price of three columns in 375px. Stacked, the card has
       the width for the site's normal label sizes. */
    .plan-index,
    .plan-name {
      font-size: var(--psv-ui-micro);
    }

    .plan-term,
    .plan-coverage__label,
    .plan-coverage__value,
    .plan-price small {
      font-size: var(--psv-ui-label);
    }
  }

}