:host {
  --neutral-white-raw: 255 255 255; /* #FFFFFF */
  --neutral-50-raw: 247 247 247; /* #F7F7F7 */
  --neutral-100-raw: 242 242 242; /* #F2F2F2 */
  --neutral-150-raw: 237 237 237; /* #EDEDED */
  --neutral-200-raw: 217 217 217; /* #D9D9D9 */
  --neutral-300-raw: 189 189 189; /* #BDBDBD */
  --neutral-400-raw: 159 159 159; /* #9F9F9F */
  --neutral-500-raw: 133 133 133; /* #858585 */
  --neutral-550-raw: 99 99 99; /* #636363 */
  --neutral-600-raw: 80 80 80; /* #505050 */
  --neutral-700-raw: 51 51 51; /* #333333 */
  --neutral-800-raw: 26 26 26; /* #1A1A1A */
  --neutral-900-raw: 13 13 13; /* #0D0D0D */
  --neutral-black-raw: 0 0 0; /* #000000 */

  --mint-100-raw: 198 239 254; /* #C6EFFE */
  --mint-200-raw: 153 210 255; /* #80DBF6 */

  --blueprint-100-raw: 153 190 255; /* #99BEFF */
  --blueprint-200-raw: 110 161 255; /* #6EA1FF */
  --blueprint-300-raw: 72 132 255; /* #4884FF */
  --blueprint-400-raw: 46 104 255; /* #2E68FF */
  --blueprint-500-raw: 29 78 255; /* #1D4EFF */
  --blueprint-600-raw: 10 48 211; /* #0A30D3 */
  --blueprint-700-raw: 0 25 153; /* #001999 */

  --yellow-100-raw: 255 204 145; /* #FFCC91 */
  --yellow-200-raw: 255 186 107; /* #FFBA6B */
  --yellow-300-raw: 250 168 75; /* #FAA84B */
  --yellow-400-raw: 242 151 24; /* #F29718 */
  --yellow-500-raw: 191 115 0; /* #BF7300 */
  --yellow-600-raw: 128 77 26; /* #804D1A */
  --yellow-700-raw: 89 56 22; /* #593816 */

  --red-100-raw: 253 182 192; /* #FDB6C0 */
  --red-200-raw: 253 144 159; /* #FD909F */
  --red-300-raw: 250 108 127; /* #FA6C7F */
  --red-400-raw: 232 72 93; /* #E8485D */
  --red-500-raw: 202 25 48; /* #CA1930 */
  --red-600-raw: 140 20 36; /* #8C1424 */
  --red-700-raw: 106 14 27; /* #6A0E1B */

  --peach-100-raw: 253 176 138; /* #FDB08A */
  --peach-200-raw: 255 152 102; /* #FF9866 */

  --green-100-raw: 236 255 235; /* #ECFFEB */
  --green-200-raw: 202 233 205; /* #CAE9CD */
  --green-300-raw: 158 203 171; /* #9ECBAB */
  --green-400-raw: 120 182 138; /* #78B68A */
  --green-500-raw: 69 146 93; /* #45925D */
  --green-600-raw: 23 98 50; /* #176232 */
  --green-700-raw: 0 51 21; /* #003315 */

  --neutral-white: rgb(var(--neutral-white-raw));
  --neutral-white-filter: filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(0%)
    hue-rotate(50deg) brightness(101%) contrast(104%);
  --neutral-50: rgb(var(--neutral-50-raw));
  --neutral-100: rgb(var(--neutral-100-raw));
  --neutral-150: rgb(var(--neutral-150-raw));
  --neutral-200: rgb(var(--neutral-200-raw));
  --neutral-300: rgb(var(--neutral-300-raw));
  --neutral-400: rgb(var(--neutral-400-raw));
  --neutral-500: rgb(var(--neutral-500-raw));
  --neutral-550: rgb(var(--neutral-550-raw));
  --neutral-600: rgb(var(--neutral-600-raw));
  --neutral-700: rgb(var(--neutral-700-raw));
  --neutral-700-filter: brightness(0) saturate(100%) invert(33%) sepia(0%) saturate(37%)
    hue-rotate(138deg) brightness(89%) contrast(89%);
  --neutral-800: rgb(var(--neutral-800-raw));
  --neutral-900: rgb(var(--neutral-900-raw));
  --neutral-black: rgb(var(--neutral-black-raw));

  --mint-100: rgb(var(--mint-100-raw));
  --mint-200: rgb(var(--mint-200-raw));

  --blueprint-100: rgb(var(--blueprint-100-raw));
  --blueprint-200: rgb(var(--blueprint-200-raw));
  --blueprint-300: rgb(var(--blueprint-300-raw));
  --blueprint-400: rgb(var(--blueprint-400-raw));
  --blueprint-400-filter: brightness(0) saturate(100%) invert(26%) sepia(92%) saturate(1900%)
    hue-rotate(217deg) brightness(107%) contrast(101%);

  --blueprint-500: rgb(var(--blueprint-500-raw));
  --blueprint-500-filter: brightness(0) saturate(100%) invert(21%) sepia(63%) saturate(5886%)
    hue-rotate(230deg) brightness(101%) contrast(101%);
  --blueprint-600: rgb(var(--blueprint-600-raw));
  --blueprint-700: rgb(var(--blueprint-700-raw));

  --yellow-100: rgb(var(--yellow-100-raw));
  --yellow-200: rgb(var(--yellow-200-raw));
  --yellow-300: rgb(var(--yellow-300-raw));
  --yellow-400: rgb(var(--yellow-400-raw));
  --yellow-500: rgb(var(--yellow-500-raw));
  --yellow-600: rgb(var(--yellow-600-raw));
  --yellow-700: rgb(var(--yellow-700-raw));

  --red-100: rgb(var(--red-100-raw));
  --red-200: rgb(var(--red-200-raw));
  --red-300: rgb(var(--red-300-raw));
  --red-400: rgb(var(--red-400-raw));
  --red-500: rgb(var(--red-500-raw));
  --red-600: rgb(var(--red-600-raw));
  --red-700: rgb(var(--red-700-raw));

  --green-100: rgb(var(--green-100-raw));
  --green-200: rgb(var(--green-200-raw));
  --green-300: rgb(var(--green-300-raw));
  --green-400: rgb(var(--green-400-raw));
  --green-500: rgb(var(--green-500-raw));
  --green-600: rgb(var(--green-600-raw));
  --green-700: rgb(var(--green-700-raw));

  --material-glass-background: rgb(var(--neutral-100-raw) / 0.9);
  --material-glass-filter: blur(14px);

  --text-header-label: initial;
  --text-primary-label: initial;
  --text-primary-label-filter: initial;
  --text-primary-label-disabled: initial;
  --text-secondary-label: initial;
  --text-tertiary-label: initial;
  --text-accent-primary-label: initial;
  --text-accent-primary-label-filter: initial;
  --text-accent-secondary-label: initial;
  --text-on-accent-primary-label: initial;
  --text-on-avatar: initial;
  --text-on-tooltip: initial;
  --warning-text-fill-color: initial;
  --error-text-fill-color: initial;
  --success-text-fill-color: initial;

  --control-background: initial;
  --control-hover-background: initial;
  --control-pressed-background: initial;
  --control-background-secondary: initial;
  --control-background-secondary-hover: initial;
  --control-border: initial;
  --control-accent-background: initial;
  --control-attention-background: initial;
  --control-accent-hover-background: initial;
  --control-accent-pressed-background: initial;
  --control-focus-highlight-stroke-color: initial;
  --control-error-highlight-stroke-color: initial;

  --information-icon-fill-color: initial;
  --success-icon-fill-color: initial;
  --warning-icon-fill-color: initial;
  --error-icon-fill-color: initial;
  --primary-icon-fill-color: initial;
  --primary-background: initial;
  --logo-fill-color: initial;

  --page-primary-background: initial;
  --page-secondary-background: initial;
  --page-tertiary-background: initial;
  --dialog-background: initial;
  --popover-background: initial;
  --avatar-background-gray: initial;
  --avatar-background-mint: initial;
  --avatar-background-yellow: initial;
  --avatar-background-peach: initial;
  --avatar-background-green: initial;
  --information-background: initial;
  --attention-background: initial;
  --warning-background: initial;
  --critical-background: initial;
  --success-background: initial;
  --field-background: initial;
  --field-background-secondary: initial;
  --snackbar-background: initial;
  --tooltip-background: initial;

  --separator-opaque: initial;
  --separator: initial;

  --backdrop: initial;

  --field-stroke: initial;

  --shadow-xs-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05), 0 1px 2px 0 rgb(var(--neutral-black-raw) / 0.1);
  --shadow-sm-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05),
    0 4px 12px -4px rgb(var(--neutral-black-raw) / 0.2);
  --shadow-md-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05),
    0 8px 24px -4px rgb(var(--neutral-black-raw) / 0.2);
  --shadow-lg-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05),
    0 16px 32px -4px rgb(var(--neutral-black-raw) / 0.2);

  --shadow-xs-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2), 0 1px 4px 0 rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;
  --shadow-sm-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2),
    0 4px 12px -2px rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;
  --shadow-md-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2),
    0 8px 16px -4px rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;
  --shadow-lg-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2),
    0 12px 24px -2px rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;

  --shadow-xs: initial;
  --shadow-sm: initial;
  --shadow-md: initial;
  --shadow-lg: initial;

  --forms-width: 320px;
  --popover-width: 240px;
  --float-header-height: 44px;
  --sidebar-width: 320px;
  --breadcrumbs-width: 200px;

  --font-size: 14px;
  --line-height: calc(20 / 14);

  --layer-base: 100;
  --layer-overlay: 200;
  --layer-sidebar: 300;
  --layer-fullscreen-card: 400;
  --layer-header: 500;
  --layer-modal: 600;
  --layer-video: 10000; /* Wistia built in z-index, this line act as a documentation, we don't need to set this manually */

  --sublayer-menu: 100;
  --sublayer-tooltip: 200;

  --spacing-05x: 4px;
  --spacing-1x: 8px;
  --spacing-2x: 16px;
  --spacing-3x: 24px;
  --spacing-4x: 32px;
  --spacing-5x: 40px;
  --spacing-6x: 48px;
  --spacing-7x: 56px;
  --spacing-8x: 64px;
  --spacing-9x: 72px;
  --spacing-10x: 80px;

  --radius: var(--spacing-05x);
  --radius-control: var(--spacing-1x);
  --radius-list-item: var(--spacing-05x);
  --radius-menu-list-item: var(--spacing-05x);
  --radius-context-menu-container: var(--spacing-1x);
  --radius-sidebar-list-item: var(--spacing-1x);
  --radius-info-bar-container: var(--spacing-1x);
  --radius-dialog-container: 12px;

  --size-height-large-control: var(--spacing-5x);

  --padding-sx: var(--spacing-05x);
  --padding-sm: var(--spacing-1x);
  --padding-lg: var(--spacing-2x);
  --padding-xl: var(--spacing-3x);
  --padding-xxl: var(--spacing-4x);
  --padding-3xl: var(--spacing-5x);

  --margin-sx: var(--spacing-05x);
  --margin-sm: var(--spacing-1x);
  --margin-lg: var(--spacing-2x);
  --margin-xl: var(--spacing-3x);
  --margin-xxl: var(--spacing-4x);
  --margin-3xl: var(--spacing-5x);

  --fraktion-sans: "Fraktion Sans", Arial, Helvetica Neue, Helvetica, sans-serif;
  --fraktion-mono: "Fraktion Mono", monospace;
  --inter:
    "Inter", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--inter);
  color: var(--text-primary-label);
  background: var(--dialog-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--line-height);
  font-weight: 500;
  font-size: var(--font-size);
}

@font-face {
  font-family: Inter;
  src: url("./fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400 600;
}

@font-face {
  font-family: "Fraktion Mono";
  src:
    url("./fonts/PPFraktionMono-Regular.woff2") format("woff2"),
    url("./fonts/PPFraktionMono-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Fraktion Sans";
  src:
    url("./fonts/PPFraktionSans-Bold.woff2") format("woff2"),
    url("./fonts/PPFraktionSans-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Fraktion Sans";
  src:
    url("./fonts/PPFraktionSans-Black.woff2") format("woff2"),
    url("./fonts/PPFraktionSans-Black.ttf") format("truetype");
  font-weight: 800;
}

@keyframes RzLRNjq_q_f8tO5V65HZ {
  to {
    transform: rotate(360deg);
  }
}

.b2wpJUhj8PCdLklF4sZ0 {
  --size: initoal;
  --sticks: initial;
  --color: initial;

  position: relative;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  margin-left: auto;
  margin-right: auto;
  animation: RzLRNjq_q_f8tO5V65HZ 0.6s steps(var(--sticks), end) infinite;
  animation-play-state: inherit;
}

.b2wpJUhj8PCdLklF4sZ0 > div {
  --rotation: initial;
  --opacity: initial;

  --width: calc(var(--size) / 11);
  --height: calc(var(--size) / 3.5);
  width: var(--width);
  height: var(--height);
  position: absolute;
  top: 0;
  border-radius: calc(var(--width) / 2);
  left: calc(50% - (var(--width) / 2));
  transform-origin: calc(var(--width) / 2) calc(var(--height) * 1.75);
  transform: rotate(var(--rotation));
  background-color: var(--color);
  opacity: var(--opacity);
}

/* ============================================================
   PricingPage — CSS Grid layout for the 4-plan pricing table.
   Each card occupies one column and uses CSS subgrid so that
   every semantic row (badge, price, CTA, tagline, each feature
   section, seat types) aligns perfectly across all four cards.
   ============================================================ */

/* 13 named row bands:
   1  badge
   2  pricing
   3  cta
   4  tagline
   5  feature: projects
   6  feature: storage
   7  feature: import
   8  feature: export
   9  feature: generativeTools
   10 feature: collaborationDocumentation
   11 feature: supportTraining
   12 feature: securityCompliance  (children slot renders here when section is absent)
   13 seatTypes                                              */

.CKN0Mw2to4XoWZSQoNtO {
  container-type: inline-size;
  container-name: pricing-page;
  width: 100%;
  margin-inline: auto;
}

.zVAgg6RRyoG9sb7UnDmN {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(13, auto);
  border: 1px solid var(--separator-opaque);
  border-radius: 8px;
  overflow: hidden;
  font-family: inherit;
  font-weight: 400;
  color: var(--text-primary-label);
  box-sizing: border-box;
  /* Fill the parent regardless of its align-items setting */
  width: 100%;
}

/* Column count follows the number of cards actually rendered. */
.zVAgg6RRyoG9sb7UnDmN[data-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.zVAgg6RRyoG9sb7UnDmN[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- Cards ---- */

.aSa5EOXU_efbFLLoGgSi {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 13;
  padding: var(--spacing-3x) var(--spacing-4x) var(--spacing-4x);
  box-sizing: border-box;
  background: var(--page-primary-background);
  border-right: 1px solid var(--separator-opaque);
}

.aSa5EOXU_efbFLLoGgSi:last-child {
  border-right: none;
}

.nbytnjaz6tvvNf9fQ9mV {
  box-shadow: inset 0 0 0 4px var(--control-accent-background);
  position: relative;
  z-index: 1;
}

.yQR4UAkeIW0lrgb8i2_Y {
  background: var(--page-secondary-background);
}

/* ---- Row 1: Badge ---- */

.xKw2kw3f1SW5DjMlEEIO {
  padding-bottom: var(--spacing-1x);
}

.FsikjgCvBfl3_Xdhvcuu {
  display: inline-block;
  padding: 3px var(--spacing-1x);
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--fraktion-mono, inherit);
  width: fit-content;
}

.FsikjgCvBfl3_Xdhvcuu.xBNiSAPZvsQd9wNpHJq5 {
  background: var(--information-background);
  color: var(--text-secondary-label);
}

.FsikjgCvBfl3_Xdhvcuu.JEhno1r9nby7b3fMSdNz {
  background: var(--text-primary-label);
  color: var(--page-primary-background);
}

.FsikjgCvBfl3_Xdhvcuu.QOvQGyP4VWmxuMa9HAwd {
  background: var(--control-accent-background);
  color: var(--text-on-accent-primary-label);
}

/* ---- Row 2: Pricing ---- */

.r_q9W2x8O38ZfMO_6vFA {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05x);
  padding: var(--spacing-1x) 0;
}

.EM0d3JH7kUZ06RBLdXBg {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}

.M9iKH4N5o762e8YIOdgO {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-primary-label);
  align-self: flex-start;
}

.yMy50yVnsKDtFwuDFPsr {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: var(--fraktion-sans, inherit);
}

.UHdKgi54AxrBqADFZpf5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-label);
  font-family: var(--fraktion-sans, inherit);
}

.YV1BUMi380UyU4M_QzOz {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary-label);
}

.NJfCGUmy8dQ0EVdDKK0Y {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-tertiary-label);
}

/* ---- Row 3: CTA ---- */

.ZVbdvhzrZJWt3T8kz2k6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-1x) 0;
}

/* ---- Row 4: Tagline ---- */

.MoBdgR0lPWzfAXcIWC8E {
  padding-top: var(--spacing-3x);
  padding-bottom: var(--spacing-3x);
}

.Q8aQubohJQGPuICW6kuN {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary-label);
}

/* ---- Rows 5–12: Feature sections ---- */

.btfp0_vjiFwUdQbO0Nwd {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
  padding: var(--spacing-2x) 0;
  border-top: 1px solid var(--separator-opaque);
}

/* Empty slot — keeps the row alive for subgrid alignment */
.TcFvRWUmTYYY80AELo4Q {
  border-top: 1px solid var(--separator-opaque);
}

/* No separator above the first feature section (projects row) */
.MoBdgR0lPWzfAXcIWC8E + .btfp0_vjiFwUdQbO0Nwd,
.MoBdgR0lPWzfAXcIWC8E + .TcFvRWUmTYYY80AELo4Q {
  border-top: none;
}

.PWlXPoeQaRHEakAQhkRQ {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary-label);
}

.bnbf0wp9Tkm_MyJbJraA {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
}

.sVfmmqDFLOi8qHvKQs5D {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-1x);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-primary-label);
}

.FflfQyOzntK6iVw3OqCB {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-secondary-label);
}

.QjmPj0Yt2K07YGK_qLwp {
  color: var(--control-accent-background);
}

.xj5AAXUdbaco8dhmsAYg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05x);
}

.L8K_SV4YxMdAMXsPDr26 {
  list-style: disc;
  margin: 0 0 0 var(--spacing-05x);
  padding-left: var(--spacing-2x);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.FJZubO5tzh44sBQx15zX {
  font-size: 0.8125rem;
  color: var(--text-secondary-label);
  line-height: 1.4;
}

/* ---- Row 13: Seat types ---- */

.vgBGKKZerN0qgEKZVciK {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
  padding-top: var(--spacing-2x);
  border-top: 1px solid var(--separator-opaque);
}

.ida8o5pHF9YZAwfHerz8 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05x);
}

.l5eporX2_pUlQirQ8ehQ {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary-label);
}

.bOEyLl2gEGNCjYHD7znw > mark {
  color: var(--text-primary-label);
  display: inline-block;
  padding: 0 2px;
  font-weight: 600;
}

.n8zQeiscl1ZpFRcEyFXb > mark {
  background: var(--mint-100);
}

.oyWE_ymOY0a0QuZ62W88 > mark {
  background: var(--yellow-200);
}

/* ================================================================
   Responsive — 2 columns
   Free + Solo share rows 1–13, Studio + Enterprise rows 14–26.
   ================================================================ */

@container pricing-page (max-width: 899px) {
  /* [data-columns] matches the specificity of the column-count rules above so this
     collapse to 2 columns wins on source order regardless of the card count. */
  .zVAgg6RRyoG9sb7UnDmN[data-columns] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(26, auto);
  }

  .aggRTtOv3jTNMQX6uIqI {
    grid-column: 1;
    grid-row: 1 / 14;
    border-bottom: 1px solid var(--separator-opaque);
  }

  .Xc2vU5QQRDBrlZyxhi6R {
    grid-column: 2;
    grid-row: 1 / 14;
    border-right: none;
    border-bottom: 1px solid var(--separator-opaque);
  }

  .q4fIAsdgmQfFEen0YVhI {
    grid-column: 1;
    grid-row: 14 / 27;
  }

  .yQR4UAkeIW0lrgb8i2_Y {
    grid-column: 2;
    grid-row: 14 / 27;
    border-right: none;
  }

  /* 3 cards: the trailing card wraps to the start of the second band. */
  .zVAgg6RRyoG9sb7UnDmN[data-columns="3"] .yQR4UAkeIW0lrgb8i2_Y {
    grid-column: 1;
  }

  /* 2 cards already fit the 2-column band — keep them on one row. */
  .zVAgg6RRyoG9sb7UnDmN[data-columns="2"] .aggRTtOv3jTNMQX6uIqI {
    grid-row: 1 / 14;
    border-bottom: none;
  }

  .zVAgg6RRyoG9sb7UnDmN[data-columns="2"] .yQR4UAkeIW0lrgb8i2_Y {
    grid-column: 2;
    grid-row: 1 / 14;
  }
}

/* ================================================================
   Responsive — 1 column (mobile)
   Cards stack as individual flex columns; subgrid disabled.
   Empty feature sections are hidden so there are no blank rows.
   ================================================================ */

@container pricing-page (max-width: 499px) {
  .zVAgg6RRyoG9sb7UnDmN[data-columns] {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  /* Reset grid placement and switch to flex for all card variants.
     Selectors are scoped through .grid[data-columns] so they match the specificity
     of the column-count overrides in the 2-column block above — otherwise those
     would outrank this reset and the cards would not stack. */
  .zVAgg6RRyoG9sb7UnDmN[data-columns] .aSa5EOXU_efbFLLoGgSi {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-column: auto;
    border-right: none;
    border-bottom: 1px solid var(--separator-opaque);
  }

  .zVAgg6RRyoG9sb7UnDmN[data-columns] .yQR4UAkeIW0lrgb8i2_Y {
    border-bottom: none;
  }

  .TcFvRWUmTYYY80AELo4Q {
    display: none;
  }
}