@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/pricing-cards/pricing-card.css.js

@@ -1,61 +1,71 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
   :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
+    /* no role: green-700 has no BORDER role, for the reason new-pricing.css.js
+       records at its own .highlight. Now that .highlight-banner takes the
+       -fill pair directly, .highlight's edge is this alias's only consumer and
+       the name finally matches what it does. */
     --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-500);
-    --text-color-white: var(--color-neutral-0);
-    --bd-accesibility-focus: var(--color-blue-500);
+    /* --badge-background and --text-color-white stood here and stood here in
+       termsOfUse/terms.css.js too, declared identically in both and read by
+       neither: grep finds each name exactly twice in the whole package, both
+       times as these declarations. Private aliases that never even became
+       indirection. */
   }
-  body {
-    font-family: "IBM Plex Mono", monospace;
-  }
-
   button {
     outline: none;
   }
 
   button:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
+    /* the one focus ring — see Design Tokens/Focus */
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
   }
   a:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
+    /* the one focus ring — see Design Tokens/Focus */
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    border-radius: var(--focus-outline-radius);
   }
   .card {
     padding-top: 2em;
-    background: var(--background-card-grey);
-    border: var(--spacing-2) solid var(--border-card-grey);
-    border-radius: var(--spacing-20);
-    padding: var(--spacing-32);
+    /* White on the brand band, with the 1px border/container edge the rule's
+       second clause names. This was surface/container with a 2px
+       --border-card-grey edge, and that edge measured 1.07:1 against its own
+       ground -- the least visible element in the whole surface system, two
+       pixels spent on nothing. It now reads 1.287:1 against the card and the
+       card reads 1.080:1 against the band. */
+    background: var(--color-surface-default);
+    border: var(--border-width-1) solid var(--color-border-container);
+    border-radius: var(--card-radius);
+    padding: var(--card-padding);
     text-align: center;
     max-width: 360px;
     position: relative;
     height: 100%;
   }
-  .bd-section-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-  }
-.icon-user-sharp-regular {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'><path d='M11 11C13.2091 11 15 9.20914 15 7C15 4.79086 13.2091 3 11 3C8.79086 3 7 4.79086 7 7C7 9.20914 8.79086 11 11 11Z' fill='%23000'/><path d='M4 19C4 15.6863 6.68629 13 10 13H12C15.3137 13 18 15.6863 18 19V20H4V19Z' fill='%23000'/></svg>")
-    no-repeat center center;
-  background-size: contain;
-}
-.icon-family-pants-sharp-regular {
-  display: inline-block;
-  width: 24px; /* dimensiunea dorită */
-  height: 24px;
-  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M24 25.1591V27H8V25.1591C8 23.3048 9.20796 21.6667 10.9795 21.1187L11.8455 20.8509C12.2644 20.7213 12.55 20.334 12.55 19.8955V19.7449C10.8538 18.295 10.1 16.0583 10.1 13.2778C10.1 10.8447 11.1289 9.23277 12.423 8.25708C13.6668 7.3193 15.1097 7 16 7C16.8903 7 18.3332 7.3193 19.577 8.25708C20.8711 9.23277 21.9 10.8447 21.9 13.2778C21.9 16.0583 21.1462 18.295 19.45 19.7449V19.8955C19.45 20.334 19.7356 20.7213 20.1545 20.8509L21.0205 21.1187C22.792 21.6667 24 23.3048 24 25.1591Z' fill='%23000'/><path d='M7.4663 23C8.03861 21.7386 9.10189 20.7276 10.4549 20.2401C10.103 19.7558 9.59938 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23C3.57036 23 7.4663 23 7.4663 23Z' fill='%23000'/><path d='M21.5451 20.2401C22.8981 20.7276 23.9614 21.7386 24.5337 23C24.5337 23 28.2313 23 31 23V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8653 19.152C28.7134 19.1044 28.5881 19.0057 28.506 18.8783C29.4184 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.307 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4066 11 24.4869 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5742 17.9112 23.4678 18.851L23.4612 18.8574L23.4892 18.8858C23.407 19.0095 23.2836 19.1053 23.1347 19.152L23.0009 19.1939C22.4006 19.382 21.897 19.7558 21.5451 20.2401Z' fill='%23000'/></svg>") no-repeat center center;
-  background-size: contain;
-}
+/* THE TOGGLE'S GLYPHS ARE GONE, and the history is worth one paragraph because
+   it ran through three shapes in a day. They began as empty spans carrying a
+   background-image data URI -- a 22x22 person and a 32x32 family, five
+   fill='%23000' between them, which is why five ".icon svg" rules written to
+   colour them per state could never match and the marks stayed black while
+   their own label went white on the active pill. They were migrated to
+   <bd-individual-icon> and <bd-family-icon>, which fixed that by inheriting
+   currentColor. Then the redesign removed the icons from the control
+   altogether: the Content Switcher is labels only, on the argument that the
+   label is the whole message and an icon beside it is decoration that has to
+   be translated too.
+   .
+   So the data URIs and the 4.63:1 black-on-blue defect are both retired, and
+   the atoms are no longer imported here. Nothing above needs the icon scale.
+   .
+   MARKUP CHANGES INSIDE PRODUCT_FROZEN, made on explicit instruction rather
+   than by drift. architecture.json's note is authoritative that the freeze
+   exempts the architecture mechanism only and keeps colour content in the
+   contract, but a template edit is the thing the freeze does cover. Flagged
+   for review rather than treated as settled. */
 
 
   .highlight {
@@ -63,8 +73,14 @@ export default css`
   }
 
   .highlight-banner {
-    background: var(--border-card-green);
-    color: white;
+    /* A saturated chip and its ink, which is what tokens.js calls the
+       -fill / -on-fill pair, and what bd-badge variant="fill" draws with the
+       same green-700-plus-white at 4.75:1 (badge.css.js:108-113). It used to
+       read --border-card-green: that alias serves a BORDER two rules up and a
+       BACKGROUND here, so its name described half its consumers. Both values
+       identical, #0e8532 and #ffffff. */
+    background: var(--status-success-fill);
+    color: var(--status-success-on-fill);
     font-size: 18px;
     padding: var(--spacing-16) var(--spacing-8);
     border-top-left-radius: var(--spacing-20);
@@ -76,8 +92,10 @@ export default css`
     width: 85%;
     font-family: var(--typography-fontFamily-sans);
     font-weight: 600;
-    line-height: 14px;
-    z-index: 1;
+    /* 18px text; was 14px (0.78) which clipped descenders and, at width:85%,
+       collided wrapped lines */
+    line-height: var(--typography-lineHeight-tight);
+    z-index: var(--z-base);
   }
   .pricing-cards .card:nth-child(2) .highlight-banner {
     top: -30px;
@@ -90,14 +108,33 @@ export default css`
     font-size: 2em;
     font-weight: 700;
     font-family: var(--typography-fontFamily-sans);
-    line-height: 34px;
+    /* 32px text; was 34px (1.06), too tight for a title that wraps */
     text-align: start;
     margin: 0px;
     max-width: 300px;
   }
-  .hr-line {
-    color: var(--color-neutral-200);
-  }
+  /* ".hr-line" stood here with a no role: marker recording why it could not be
+     migrated: composing <bd-divider-horizontal> is a markup change inside
+     PRODUCT_FROZEN, and the colour arrived via the color property driving the
+     UA's inset border on a real <hr>, so an explicit border-color would have
+     been a rendering change rather than a rename.
+     .
+     The markup objection was lifted by instruction, so the four <hr class=
+     "hr-line"> in pricing-card.js are now the atom -- which pricing-card-header
+     .js already rendered, so the unit no longer disagrees with itself. The
+     rendering objection is answered by that too: the atom draws its own line
+     rather than relying on <hr>'s inset shading, so neutral-200-as-color stops
+     being load-bearing and the rule goes with it.
+     .
+     The atom is passed color="subtle". Measured on the default story, its own
+     default is --color-border-default at neutral-400 (#88909b), two steps
+     darker than the neutral-200 these lines have shipped at, and subtle is
+     --color-border-subtle -- the same neutral-200. Composing the atom is the
+     fix that was asked for; silently darkening a shipped separator is not, so
+     the appearance is pinned and only the provenance changes.
+     .
+     The atom's own internal class is also .hr-line, which was always fair
+     evidence this rule had been copied from it rather than composed with it. */
 
   .pricing-info {
     display: inline-flex;
@@ -108,7 +145,16 @@ export default css`
     font-size: 16px !important;
     font-weight: 500;
     font-family: var(--typography-fontFamily-sans);
-    color: var(--color-neutral-950);
+    /* The ink role. This is a real change, not a like-for-like swap: the role is
+       neutral-900 and what stood here was neutral-950, one step darker, so
+       contrast on this card's own container surface goes 18.64:1 -> 17.22:1. At
+       CIE dE 4.19 between two near-blacks it is imperceptible, but it is a
+       change. Nothing was preserved by the darker step: neutral-950 is not an
+       ink in this system at all -- the ink ladder stops at neutral-900, and the
+       only roles carrying 950 are button fills. It stood here because this file
+       predates the role vocabulary. v2's counterpart already names the role, at
+       pricing-card-header.css.js:54. */
+    color: var(--color-text-primary);
     margin: var(--spacing-0);
     margin-top: var(--spacing-8);
   }
@@ -136,45 +182,74 @@ export default css`
   .original-price {
     font-family: var(--typography-fontFamily-sans);
     font-weight: 500;
-    line-height: var(--spacing-18);
+    /* was var(--spacing-18): a spacing token used as an absolute line-height */
     font-size: 16px;
     text-decoration: line-through;
-    color: var(--color-neutral-950);
+    /* The ink role, the same imperceptible darkening as .badge-subtitle above:
+       18.64:1 -> 17.22:1, dE 4.19. v2's counterpart is
+       pricing-card-pricing.css.js:18. */
+    color: var(--color-text-primary);
   }
 
   .discount {
-    background: var(--color-green-100);
+    /* -surface-strong, for the reason pricing-card-pricing.css.js records at
+       its own .discount: this is the badge-shade step and the ink on it is
+       already the matching role. Value-identical at #d1fadc. */
+    background: var(--status-success-surface-strong);
     font-family: var(--typography-fontFamily-sans);
     font-weight: 600;
     font-size: 16px;
     font-weight: bold;
-    border-radius: 22px;
-    // padding: var(--spacing-6) var(--spacing-12) var(--spacing-8) var(--spacing-12);
+    border-radius: var(--radius-full);
     gap: var(--spacing-10);
-    color: var(--color-green-800);
+    color: var(--color-text-success);
     margin: var(--spacing-0);
   }
 
   .price {
+    /* No colour here. This selector is a bd-h host, where color is INERT per
+       scripts/atom-inert-properties.json -- the atom sets it on its own inner
+       .bd-heading, so a host declaration cannot reach the text. A neutral-950
+       stood here and painted nothing; the heading renders the ink role, which
+       the atom supplies. Proved by sabotage in both story families: forcing all
+       five of this rule's declared properties on the host with !important left
+       the rendered heading byte-identical. The four declarations below are dead
+       by the same mechanism -- deleting the whole rule is a larger call, and is
+       an item in plans/foundation-plan.md rather than part of this change. */
     font-size: 40px;
     font-weight: 700;
-    color: var(--color-neutral-950);
     font-family: var(--typography-fontFamily-sans);
-    line-height: 34px;
+    /* 40px text; was 34px (0.85) — the line box was smaller than the text */
+    line-height: var(--typography-lineHeight-none);
   }
 
   .terms {
     font-family: var(--typography-fontFamily-sans);
     font-weight: 400;
     font-size: 12px;
-    color: var(--color-neutral-950);
-    line-height: var(--spacing-14);
+    /* The ink role, the same imperceptible darkening as .badge-subtitle:
+       18.64:1 -> 17.22:1, dE 4.19. v2's counterpart is
+       pricing-card-pricing.css.js:48. */
+    color: var(--color-text-primary);
+    /* four lines of small print; was var(--spacing-14) = 14px (1.17) */
     margin-top: 15px;
     max-width: 80%;
   }
 
   .terms a {
-    color: var(--color-blue-700);
+    /* The resting-link ink, matching bd-link. This is a visible change: blue-700
+       is what --color-action-primary-active carries, and in this system that step
+       means an interactive element in its ENGAGED state -- bd-link uses it for
+       :hover, annotation for :hover, anchor-nav for the active option. A resting
+       link wearing it reads as permanently pressed. Contrast goes 8.20:1 -> 5.92:1
+       on --color-surface-container, still comfortably over 4.5.
+       .
+       The "small text wants darker ink" hypothesis was tested package-wide and
+       rejected: no such principle is documented anywhere, the ladder is flat
+       across 12-18px and goes LIGHTER at 32px, and accordion.css.js:347 is a 12px
+       link on this same surface that already chose --color-text-brand with the
+       arithmetic in its comment. See plans/reports/phase-2-size-dependent-ink-check.md. */
+    color: var(--color-text-brand);
     text-decoration: underline;
   }
   .actions {
@@ -189,9 +264,9 @@ export default css`
   .features h4 {
     font-size: 16px;
     font-weight: 700;
-    color: var(--color-neutral-900);
+    color: var(--color-text-primary);
     font-family: var(--typography-fontFamily-sans);
-    line-height: var(--spacing-18);
+    line-height: var(--typography-lineHeight-tight);
   }
 
   .features ul {
@@ -209,10 +284,19 @@ export default css`
     text-align: start;
   }
   .additional-info li {
+    /* No colour here either, and for a DIFFERENT reason than .price above. This
+       li is a plain element, not an atom host: its text lives in a bd-p child,
+       and paragraph.css.js declares the ink on that atom's own :host. A direct
+       declaration on an element beats a value inherited into it, so a colour set
+       on this li is replaced before it can reach the inner p. Proved in reverse:
+       standing bd-p's own declaration down makes the li's value appear, so what
+       stood here was present and blocked rather than absent or overridden.
+       Note this INVERTS the atom-host case, where a colour on a bd-p host is
+       LIVE -- see the ancestorDeclarations note in
+       scripts/atom-inert-properties.json. */
     font-family: var(--typography-fontFamily-sans);
     font-weight: 400;
     font-size: 14px;
-    color: var(--color-neutral-950);
     margin-bottom: var(--spacing-10);
     display: flex;
     align-items: center;
@@ -247,12 +331,48 @@ export default css`
     margin-bottom: var(--spacing-24);
   }
 
+  /* The band the cards sit on.
+
+     Three adjacent plans need to be told apart from each OTHER, not just from
+     the page, and the ground cannot do that: surface/default, -container and
+     -subtle measure 1.000, 1.044 and 1.121 against the page, so two
+     surface/container cards with a gap between them are separated by about
+     nothing. Inverting solves it -- white cards on a tint get a tonal step AND
+     an edge, which is the pattern Trust Panel and Comparison Panel already
+     use and the second clause of CLAUDE.md's ground-and-edge rule.
+
+     status/brand/surface rather than a neutral tint: its luminance step is
+     the smaller one (1.080:1 against a white card, where surface/subtle gives
+     1.121) but it separates by HUE, and a blue band against a white card is
+     legible in a way two near-identical greys are not.
+
+     Contained, not full-bleed, and that is settled by the architecture record
+     rather than by taste: scripts/architecture.json has this unit at
+     column: false and it does not compose ensembleCSS, so a 100vw band would
+     be the component claiming a page-section responsibility it is recorded as
+     not having.
+
+     padding-top is the larger one because the highlight banner overhangs the
+     card by 2.67em -- about 48px -- and the band has to contain it.
+
+     RADIUS: --radius-2xl, the same step the cards take, not the --radius-xl
+     that every other panel in this package uses. That is a deliberate
+     override of the panel convention: this band is not a panel that happens to
+     contain cards, it is the group the cards belong to, and matching their
+     corner makes the set read as one family rather than as foreign objects
+     sitting inside a container. Design decision, recorded so the next person
+     sees a choice rather than an inconsistency -- revisit it if a second
+     card-group band turns up and wants the panel step instead. */
   .pricing-cards {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: var(--spacing-24);
     align-items: stretch;
+    background: var(--status-brand-surface);
+    border-radius: var(--radius-2xl);
+    padding: var(--spacing-64) var(--spacing-32) var(--spacing-48);
+    box-sizing: border-box;
   }
 
   .pricing-card {
@@ -272,114 +392,34 @@ export default css`
     padding-bottom: var(--spacing-32);
   }
 
-  .switchBox .switch {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    width: 302px;
-    height: 44px;
-    background-color: #016dff;
-    border-radius: 22px;
-  }
-
-  .switchBox .switch input {
-    display: none;
-  }
-
-  .switchBox .slider {
-    position: absolute;
-    content: "";
-    height: var(--spacing-40);
-    width: 150px;
-    left: var(--spacing-2);
-    bottom: var(--spacing-2);
-    background-color: white;
-    border-radius: var(--spacing-20);
-    transition: all 0.4s;
-  }
-
-  .switchBox .switch input:checked + .slider {
-    transform: translateX(149px);
-  }
-
-  .switchBox .label {
-    font-family: Arial, Helvetica, sans-serif;
-    width: 50%;
-    text-align: center;
-    font-weight: bold;
-    line-height: 34px;
-    font-size: var(--spacing-16);
-    color: white;
-    transition: color 0.4s;
-    cursor: pointer;
-  }
-.switchBox .label .icon {
-  vertical-align: middle;
-  position: relative;
-}
-
-.icon-user-sharp-regular,
-.icon-family-pants-sharp-regular {
-  vertical-align: middle;
-  position: relative;
-  top: -2px;
-}
-  .switchBox .label.right {
-    z-index: 10;
-    color: black;
-  }
-
-  .switchBox .label.left {
-    z-index: 10;
-  }
-
-  .switchBox .switch input:checked ~ .label.right {
-    transition: color 0.4s;
-    color: white !important;
-  }
-
-  .switchBox .switch input ~ .label .icon {
-    position: relative;
-    margin-right: var(--spacing-10);
-   }
-
-  .switchBox .switch input ~ .label .icon svg {
-    width: var(--spacing-24);
-    height: var(--spacing-20);
-  }
-  .badge-icon-family {
-    top: var(--spacing-4) !important;
-    position: relative;
-  }
-  .badge-icon-user {
-    top: var(--spacing-4) !important;
-    position: relative;
-  }
-  .switchBox .switch input ~ .label.right .icon svg {
-    fill: #026dff;
-  }
-
-  .switchBox .switch input:checked ~ .label.right .icon svg {
-    fill: white;
-  }
-
-  .switchBox .switch input:checked ~ .label.left {
-    transition: color 0.4s;
-    color: black;
-  }
-
-  .switchBox .switch input:checked ~ .label.left .icon svg {
-    fill: #026dff;
-  }
-
-  .prod-box.individual-box {
-    transition: all 0.4s;
-  }
-
-  .prod_box.family-box {
-    display: none;
-    transition: all 0.4s;
-  }
+  /* Everything the billing toggle owned stood here: the 302x44 track, the
+     150px sliding pill, four label state rules, the two data-URI glyph
+     classes, and the icon positioning around them. The control is now
+     <bd-tab-list appearance="switcher"> -- the Content Switcher designed in
+     Figma at node 311:931 -- so all of it is dead and removed rather than left
+     to be read as live.
+     .
+     What went with it, so the reasoning is not lost: the pill's radius had
+     been --radius-2xl on a 40px box where a full round needs 20px, the label
+     weight was the raw keyword bold at 700 against the buttons' 500, and the
+     pill travelled 149px where the geometry wanted 148, which put it 1px from
+     the right edge and 2px from the left. All three are moot now -- the
+     switcher has one radius, takes its weight from the action-label role, and
+     has no travelling pill at all. The reduced-motion block that used to name
+     .slider and the label rules went too; the switcher declares its own.
+     .
+     .switchBox stays: it is the wrapper that centres the control and holds the
+     section's margins, and it is still doing that job. */
+
+  /* Two ".prod-box" rules stood here. Neither class exists: a repo-wide search
+     for prod-box or prod_box finds no match outside this stylesheet -- no
+     template, no story, no schema, no blog page. The second also spells the
+     block with an underscore where the first uses a hyphen, so the pair could
+     not even have been two states of one thing.
+     .
+     One of them carried display: none, which is the reason to be sure before
+     deleting: had the class ever existed, removing this would reveal a hidden
+     box. It never existed. */
   .feature-item {
     position: relative;
     display: flex;
@@ -392,15 +432,22 @@ export default css`
     position: absolute;
     top: -70px;
     left: 0;
-    background-color: #f8f8f8;
-    color: #333;
+    background-color: var(--color-surface-container);
+    /* Tooltip copy: supporting, not primary. */
+    color: var(--color-text-secondary);
     padding: var(--spacing-8) var(--spacing-12);
-    border-radius: 5px;
+    border-radius: var(--radius-sm);
     font-size: 12px;
     max-width: 250px;
-    border: var(--spacing-1) solid #ccc;
+    /* -border-subtle IS neutral-200, and a tooltip's hairline is what that
+       role is for. Unlike .hr-line above, nothing here depends on the UA's
+       inset <hr> shading: this is already an explicit solid border, so the
+       substitution is a rename. The ::after arrow below must stay in step. */
+    border: var(--spacing-1) solid var(--color-border-subtle);
     box-shadow: 0 0 var(--spacing-10) rgba(0, 0, 0, 0.1);
-    z-index: 10;
+    /* A tooltip is the role, not a number. It has to clear the cards it
+       overhangs, including the highlight banner beneath it. */
+    z-index: var(--z-tooltip);
   }
 
   .feature-item .tooltip::after {
@@ -411,16 +458,17 @@ export default css`
     transform: translateX(-50%);
     border-left: var(--spacing-8) solid transparent;
     border-right: var(--spacing-8) solid transparent;
-    border-top: var(--spacing-8) solid #ccc;
+    /* the arrow, same role as the box above -- they are one shape */
+    border-top: var(--spacing-8) solid var(--color-border-subtle);
   }
 
   .feature-item:hover .tooltip {
     display: block;
   }
   .badge-feature {
-    background-color: #007bff;
-    color: white;
-    border-radius: var(--spacing-16);
+    background-color: var(--color-surface-brand);
+    color: var(--color-text-inverse);
+    border-radius: var(--radius-2xl);
     width: var(--spacing-36);
     height: var(--spacing-20);
     display: inline-flex;
@@ -459,7 +507,6 @@ export default css`
 
     .card-title {
       font-size: 1.5em;
-      line-height: 28px;
     }
 
     .price {
@@ -472,7 +519,7 @@ export default css`
     }
   }
 
-  @media (max-width: 768px) {
+  @media ${unsafeCSS(below('md'))} {
     .pricing-card {
       max-width: 90%;
       padding: var(--spacing-24);
@@ -481,11 +528,6 @@ export default css`
       text-align: center;
       padding-bottom: 30px;
     }
-    .bd-section-title {
-      text-align: center;
-      font-size: 2em;
-    }
-
     .card-title {
       font-size: 1.3em;
     }
@@ -551,13 +593,25 @@ export default css`
       gap: var(--spacing-6);
     }
   }
-  @media (min-width: 768px) and (max-width: 1024px) {
-    pricing-card {
-      margin-bottom: 100px;
-    }
-  }
+  /* A "pricing-card { margin-bottom: 100px }" rule stood here, inside this
+     media query, and could never match: pricing-card is this stylesheet's own
+     host, and a type selector inside a shadow root cannot select the element
+     that owns it -- only :host can.
+     .
+     Removed rather than repaired, and the distinction matters. Rewriting it as
+     :host would not be fixing a typo; it would add 100px of bottom margin
+     between 768 and 1024 that this component has never rendered, to a unit
+     whose architecture is PRODUCT_FROZEN. Nobody has seen that layout, so
+     turning it on is a design change wearing a cleanup's clothes. The 100px was
+     also a raw literal. If the gap is wanted, it should be asked for on its own
+     terms. */
  .text-left {
   text-align: left !important;
   padding-bottom: 15px;
 }
+
+  /* The reduced-motion block that stood here named .slider and three label
+     state rules, all of which went with the toggle. The switcher carries its
+     own prefers-reduced-motion rule in tab-list.css.js, next to the transition
+     it turns off, which is where it belongs. */
 `;