/* Sendible pricing page — styles
============================================================
DESIGN TOKENS — mirrored 1:1 from Figma variables
(source: get_variable_defs on frame 2815:123547 + card 2815:124821)
============================================================ */
:root {
  /* -- colors/palette -- */
  --gray-0:   #fafafa;
  --gray-50:  #eee;        /* colors/palette/gray/50 — hover fill */
  --gray-200: #c7c7c7;
  --gray-300: #ababab;
  --gray-400: #8f8f8f;
  --gray-500: #737373;
  --gray-600: #595959;
  --gray-900: #1c1c1c;
  --purple-0:   #f9f7ff;
  --purple-700: #3f32a1;
  --coral-0:   #fff6f4;
  --coral-300: #fe8d77;
  --coral-800: #690d00;

  /* -- colors/semantic & surface -- */
  --neutral-900: #1b1b20;
  --on-surface:  #1b1b20;
  --surface-2:   #dad9dd;   /* used as card border / divider */
  --brand-light: #ffffff;
  --brand-dark:  #201e24;

  /* -- button/* tokens -- */
  --btn-primary-bg:      #625afa;
  --btn-primary-fg:      #f9f7ff;
  --btn-outlined-fg:     #513dd9;
  --btn-outlined-bg:     #fafafa;
  --btn-outlined-border: rgba(81, 61, 217, .2);   /* #513dd933 */
  --btn-inverse-fg:      #513dd9;
  --btn-inverse-bg:      rgba(81, 61, 217, .1);    /* #513dd91a */
  --btn-text-fg:         #513dd9;
  --btn-neutral-text-fg: #585764;
  --btn-neutral-outlined-bg: #fafafa;          /* button/neutral/outlined/outlined-background */
  --btn-neutral-outlined-border: #58576433;    /* button/neutral/outlined/outlined-border (rgba(88,87,100,.2)) */

  /* -- spacings/* -- */
  --space-2: 0.125rem;  --space-4: 0.25rem;  --space-6: 0.375rem;  --space-8: 0.5rem;
  --space-12: 0.75rem; --space-16: 1rem; --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem;

  /* -- sizes/* (also used for radii) -- */
  --size-2: 0.125rem; --size-4: 0.25rem; --size-6: 0.375rem; --size-8: 0.5rem;
  --size-16: 1rem; --size-24: 1.5rem; --size-32: 2rem; --size-64: 4rem;

  /* -- typography tokens (family / weight / size / line-height / letter-spacing) --
  FLAG: "Base/48 - Display 3" reports style=Medium but weight=400 in Figma
  (contradiction in source). Using 500 to match the rendered Medium glyph. */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  --type-display48-size: 3rem;   --type-display48-lh: 3.15rem; --type-display48-ls: -0.0625rem;   --type-display48-wt: 500;
  --type-medium24-size: 1.5rem;    --type-medium24-lh: 1.875rem;    --type-medium24-ls: -0.0375rem;  --type-medium24-wt: 500;
  --type-sans16-size: 1rem;      --type-sans16-lh: 1.5rem;      --type-sans16-wt: 400;
  --type-sans14-size: 0.875rem;      --type-sans14-lh: 1.3125rem;      --type-sans14-wt: 400;
  --type-sans12-size: 0.75rem;      --type-sans12-lh: 1.125rem;      --type-sans12-wt: 400;
  --type-medium12-size: 0.75rem;    --type-medium12-lh: 1.125rem;    --type-medium12-wt: 500;
  --type-small12-size: 0.75rem;     --type-small12-lh: 1.0875rem;   --type-small12-ls: -0.00625rem;   --type-small12-wt: 400;

  /* -- radii / effects --
  FLAG: corner radii & shadows are not carried by get_variable_defs/get_metadata
  and get_design_context times out on this server, so these are read from
  high-res node screenshots (visually derived, ~±1px). */
  --r-card: 1rem;          /* visually derived */
  --r-pill: 62.4375rem;
  --shadow-card: 0 1px 0.125rem rgba(20, 20, 30, .04), 0 0.5rem 1.5rem rgba(20, 20, 30, .04); /* visually derived */

  /* -- semantic aliases used throughout the stylesheet -- */
  --brand: var(--btn-primary-bg);
  --brand-strong: var(--btn-outlined-fg);
  --brand-deep: var(--purple-700);
  --ink: var(--neutral-900);
  --line: var(--surface-2);
  --page: var(--brand-light);   /* white page bg — matches live site (nav keeps its own #fafafa) */
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 1rem;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ============ Icons (SVG sprite, currentColor) ============ */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; color: inherit; }

/* Stroke thickness is controlled here on the pricing page (sprite holds shapes only),
tuned to match the original icons' thickness at each display size (24px viewBox). */
.icon { stroke-width: 0.15625rem; }                                  /* header search (18px) */
.caret { stroke-width: 0.15625rem; }                                 /* nav carets (16px) */
.checkpoints .tick { stroke-width: 0.15625rem; }                     /* hero ticks (16px) */
.features .check,
.features .users-icon,
.features .plus-icon { stroke-width: 0.15625rem; }                   /* plan-card icons (14px) */
.stepper .step .step-icon { stroke-width: 0.125rem; }                /* stepper +/− (12px) */
.bd-cat-svg { stroke-width: 0.125rem; }                              /* breakdown category (20px) */
.bd-check { stroke-width: 0.15625rem; }                              /* breakdown cell check (16px) */
.bd-row-chev { stroke-width: 0.140625rem; }                          /* breakdown row chevron (16px) */
.faq-chev { stroke-width: 0.09375rem; }                              /* FAQ chevron (24px) — matches live */
.sp-arrow { stroke-width: 0.125rem; }                                /* social-proof arrow (24px) */

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 0.875rem;          /* Figma/live: leading-[14px] (tight) → 32px button height */
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;          /* button wrapper py spacings/8 */
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out,
    color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* button/primary/fill — live: .btn-trial → hover darkens #625afa to #513dd9 */
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: #513dd9; }

/* button/primary/outlined — live: .btn-demo → hover darkens border to #513dd9 */
.btn-outline {
  background: var(--btn-outlined-bg);
  color: var(--btn-outlined-fg);
  border-color: var(--btn-outlined-border);
}
.btn-outline:hover { border-color: #513dd9; }

/* button/primary/inverse — live: .pricing-table .button--primary → hover bg .1 → .2 */
a.btn.btn-soft{
  background: rgb(81 61 217 / 10%);
  color: #513dd9;
}
a.btn.btn-soft:hover { background: rgba(81, 61, 217, .2); 
  text-decoration:none;
}
.btn:hover {
  text-decoration:none;
}
button.cur:hover,
button.cur.active:hover{
  background: transparent;

}

.cur.active {
  color: var(--neutral-900);
}
/* ============ Header ============ */
.site-header {
  background: var(--gray-0);              /* Navigation bg = gray/0 #fafafa */
  border-bottom: 1px solid var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: transform .25s ease;
}
/* While the breakdown's plan header is pinned to the top, slide the nav away */
body.bd-pinned .site-header { transform: translateY(-100%); }
.header-inner {
  width: min(71rem, 100% - 4rem);   /* design content column = 1136px (x152→1288) */
  margin: 0 auto;
  height: 5.5rem;                       /* Navigation Hub = 1440×88 */
  display: flex;
  align-items: center;
  gap: var(--space-48);               /* logo ↔ nav (spacings/48) */
}
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 1.625rem; width: auto; }
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-24);              /* nav-link gap (spacings/24) */
  font-family: var(--font-sans);
  font-size: 0.875rem;                   /* Nav-Item text 14/21 Medium */
  font-weight: 500;
  color: var(--btn-neutral-text-fg); /* button/neutral/text #585764 */
}
.main-nav a { display: inline-flex; align-items: center; gap: 0.25rem; }
.main-nav a:hover { color: var(--ink); }
.main-nav a.active { color: var(--btn-neutral-text-fg); }  /* design: same colour as others */
/* chevron_down icon (exact SVG) */
.caret {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  color: var(--gray-900);                 /* chevron_down sprite, currentColor */
  transition: transform .15s ease;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-24);              /* CTA cluster spacing = 24px (matches live) */
}
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  display: inline-flex;
  border-radius: 0.5rem;
}
.icon-btn:hover { background: #f3f3f5; }
/* Header buttons — Text/Outline/Fill variants, all px-12 py-8, 14px Medium */
.header-actions .btn { padding: 0.5rem 0.75rem; }
.link-btn {                               /* Sign in — button/primary/text */
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--btn-text-fg);              /* #513dd9 */
  padding: 0.5rem 0.75rem;
}

/* ============ Hero ============ */
/* Live sendible.com/pricing uses a 1344px content container for the pricing
section (cards 256px + 16px gap = 5×256 + 4×16). The header keeps its
narrower container, matching the live site's intentional offset. */
/* ============ Modules (HubSpot-style: each section is a full-width band
with its own background; content is centred by .module-inner) ============ */
main { width: 100%; margin: 0; }
.module { width: 100%; }
.module-inner { width: min(84rem, 100% - 4rem); margin: 0 auto; }
.module-plans { background: var(--gray-0); padding-bottom: var(--space-48); }   /* #fafafa */
.module-faq { background: var(--brand-light); }                                 /* #fff */

.hero { padding: 3rem 0 0; }            /* header(88) → section.module.module-plans h1 = 48px */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
section.module.module-plans h1 {                                       /* Base/48 - Display 3 */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--type-display48-wt);   /* 500 (Medium) */
  font-size: var(--type-display48-size);   /* 48px */
  line-height: var(--type-display48-lh);   /* 50.4px */
  letter-spacing: var(--type-display48-ls);/* -1px */
  color: var(--gray-900);                  /* #1c1c1c */
}
section.module.module-plans h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Billing toggle — Monthly/Yearly Toggle component */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--purple-0);             /* purple/0 #f9f7ff */
  border-radius: var(--size-32);           /* sizes/32 = 32px */
  padding: var(--space-4) var(--space-6);  /* 4px 6px */
}
.period {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 2.875rem;
  padding: 0 1.3125rem;                         /* Yearly tab px-21 */
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;                        /* Medium */
  font-size: 1rem;
  letter-spacing: -0.01875rem;
  color: var(--gray-500);                  /* inactive #737373 */
  border-radius: var(--size-32);
}
.period[data-period="monthly"] { padding: 0 var(--space-48); } /* Monthly tab px-48 */
.period.active {
  background: var(--brand-light);          /* #fff */
  color: var(--gray-900);                  /* #1c1c1c */
  box-shadow: 0 0.125rem 0.25rem 0 rgba(49, 49, 49, .15), 0 1px 0.125rem 0 rgba(49, 49, 49, .15);
}
.save-pill {
  background: var(--purple-700);           /* #3f32a1 */
  color: var(--purple-0);                  /* #f9f7ff */
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--size-32);
  white-space: nowrap;                     /* keep "Save 15%" on one line (matches live) */
}

/* check-points — Sans/14 Regular #1c1c1c, 16px check icon, 8px item gap */
.checkpoints {
  margin-top: var(--space-24);          /* section.module.module-plans h1 → checkpoints = 24px */
  display: flex;
  gap: 0.75rem;                            /* between each checkpoint */
  flex-wrap: wrap;
  font-size: 0.875rem;
  line-height: 1.0875rem;
  letter-spacing: -0.007294rem;
  color: var(--gray-900);               /* #1c1c1c */
}
.checkpoints li { display: inline-flex; align-items: center; gap: var(--space-8); }
/* check sprite — 16px, #513DD9 */
.checkpoints .tick {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--brand-strong);            /* #513dd9 */
}

/* Currency row — own row, right-aligned, ~16px above the cards */
.currency-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 1.25rem;                    /* checkpoints → currency */
  margin-bottom: 0;
  padding-bottom: 0.5rem;                  /* currency → cards */
}
/* Currency Switch component — Base/12-Small, all Regular */
.currency-switch { display: inline-flex; gap: var(--space-12); align-items: center; }
.cur {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);                 /* flag ↔ label */
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.0875rem;
  letter-spacing: -0.00625rem;
  color: var(--gray-400);              /* inactive #8f8f8f */
  padding: 0;
  height: auto;
}
.cur.active { color: var(--neutral-900); }  /* active #1b1b20 */
/* flags: 12px circular; greyscale + dimmed when not selected (matches live) */
.cur .flag {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex: none;
  filter: grayscale(1);
  opacity: 0.8;
}
.cur.active .flag { filter: none; opacity: 1; }

/* ============ Plans ============ */
.plans {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  align-items: stretch;   /* all cards equal height (= tallest); slack falls at bottom */
}
/* 3-plan scenario: SOLO, PLUS, ENTERPRISE — fill the full width, TEAM & PRO hidden */
.plans.three-plans {
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;                 /* wider gutter → narrower cards in the 3-plan layout */
}
.plans.three-plans .plan:nth-child(2),
.plans.three-plans .plan:nth-child(4) { display: none; }

/* ============================================================
CONTENT MANAGER — live editor drawer (demo tool)
Font: Lexend Deca, scoped to the manager only (page stays IBM Plex).
============================================================ */
:root { --cm-font: "Lexend Deca", system-ui, -apple-system, sans-serif; }
.cm-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--neutral-900);          /* #1b1b20 */
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0.625rem 1rem;
  border-radius: 62.4375rem;
  box-shadow: 0 0.5rem 1.5rem rgba(16, 16, 24, .25);
  font-family: var(--cm-font);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: transform .12s ease, opacity .12s ease;
}
.cm-fab:hover { transform: translateY(-0.0625rem); }
.cm-fab svg { display: block; }
body.cm-open .cm-fab { opacity: 0; pointer-events: none; }

.cm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 320;
  width: 22.5rem;
  max-width: 92vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #eef1f6;                      /* HubSpot-style editor canvas */
  border-left: 1px solid #d6dbe3;
  box-shadow: -0.625rem 0 2.5rem rgba(16, 16, 24, .14);
  font-family: var(--cm-font);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
body.cm-open .cm-drawer { transform: translateX(0); }

.cm-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.125rem;
  background: #fff;
  border-bottom: 1px solid #d6dbe3;
}
.cm-title { font-size: 0.9375rem; font-weight: 600; color: #33475b; }
.cm-close {
  border: none;
  background: transparent;
  font-size: 1.375rem;
  line-height: 1;
  color: #7c98b6;
  cursor: pointer;
  padding: 0 0.25rem;
}
.cm-close:hover { color: #33475b; }

.cm-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem; }

/* collapsible group */
.cm-group {
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 0.375rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
}
.cm-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border: none;
  background: #f5f8fa;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #33475b;
  border-bottom: 1px solid #dfe3eb;
}
.cm-group-head.cm-accent { color: #00a4bd; }
.cm-chev { display: inline-flex; align-items: center; justify-content: center; color: #00a4bd; transition: transform .15s ease; transform: rotate(180deg); }
.cm-chev svg { display: block; width: 1rem; height: 1rem; }
.cm-group.collapsed .cm-group-head { border-bottom-color: transparent; }
.cm-group.collapsed .cm-chev { transform: rotate(0deg); }
.cm-group.collapsed .cm-group-body { display: none; }
.cm-group-body { padding: 1rem; background: #eaeef3; }

/* nested per-plan subgroup */
.cm-subgroup { margin: 0 0 0.5rem; border-color: #e1e6ee; }
.cm-subgroup > .cm-group-head { background: #fff; font-weight: 500; color: #33475b; }
.cm-subgroup > .cm-group-body { background: #f7f9fc; }

.cm-field { margin-bottom: 0.875rem; }
.cm-field:last-child { margin-bottom: 0; }
.cm-field-inline { display: flex; align-items: center; justify-content: space-between; }
.cm-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #33475b;
}
.cm-field-inline .cm-label { margin-bottom: 0; }
.cm-hint { margin: 0.375rem 0 0; font-size: 0.71875rem; color: #7c98b6; }

.cm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: #33475b;
  background: #fff;
  border: 1px solid #cbd6e2;
  border-radius: 0.1875rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cm-input:focus {
  outline: none;
  border-color: #7fd1de;
  box-shadow: 0 0 0 0.125rem rgba(0, 164, 189, .18);
}
.cm-textarea { resize: vertical; min-height: 3.5rem; line-height: 1.45; }
.cm-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 2.125rem;                       /* room for the chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2300a4bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;     /* 12px padding from the right edge */
}

.cm-subhead {
  margin: 1.125rem 0 0.625rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e1e6ee;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7c98b6;
}

/* labelled list: header row (label + "+ Add") above a bordered list */
.cm-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.cm-listhead .cm-label { margin-bottom: 0; }

/* repeatable list — bordered container, rows separated by borders (table-like) */
.cm-list {
  border: 1px solid #cbd6e2;
  border-radius: 0.25rem;
  background: #fff;
  overflow: hidden;
}
.cm-list-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #fff;
  border-bottom: 1px solid #dfe5eb;
}
.cm-list-row:last-child { border-bottom: none; }
.cm-list-row .cm-input { flex: 1 1 auto; border: none; padding: 0.25rem 0.125rem; }
.cm-list-row .cm-input:focus { box-shadow: none; }
.cm-handle { color: #b0bcca; cursor: grab; font-size: 0.8125rem; user-select: none; letter-spacing: -0.125rem; }
.cm-del {
  flex: 0 0 auto;
  width: 1.625rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: #b0bcca;
  border-radius: 0.1875rem;
  cursor: pointer;
  font-size: 1.0625rem;
  line-height: 1;
}
.cm-del:hover { color: #d94c4c; }
.cm-add {
  border: none;
  background: transparent;
  color: #00a4bd;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.cm-add:hover { text-decoration: underline; }
/* the checklist "+ Add" sits inside the list — give it proper left padding so it
lines up with the items above instead of hugging the container edge */
.cm-list > .cm-add { padding: 0.25rem 0.75rem 0.5rem; }

/* number input with a teal up/down stepper (HubSpot style) */
.cm-num { position: relative; }
.cm-num input[type="number"] { -moz-appearance: textfield; padding-right: 2.375rem; }
.cm-num input[type="number"]::-webkit-outer-spin-button,
.cm-num input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cm-num-spin {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 1.875rem;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #cbd6e2;
  overflow: hidden;
  border-radius: 0 0.1875rem 0.1875rem 0;
}
.cm-num-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #fff;
  color: #00a4bd;
  cursor: pointer;
  padding: 0;
}
.cm-num-btn:first-child { border-bottom: 1px solid #cbd6e2; }
.cm-num-btn:hover { background: #f5f8fa; }

/* checklist sub-item — each item is its own bordered sub-section with a New-tag toggle */
.cm-subitem {
  border: 1px solid #dfe5eb;
  border-radius: 0.25rem;
  background: #fff;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.cm-subitem-head { display: flex; align-items: center; gap: 0.375rem; }
.cm-subitem-head .cm-input { flex: 1 1 auto; }
.cm-subitem-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eef2f6;
}
.cm-subitem-label { font-size: 0.78125rem; color: #516f90; }

/* discount editor: Price + Percentage side by side per currency */
.cm-disc-row { display: flex; gap: 0.5rem; }
.cm-disc-row > .cm-field { flex: 1 1 0; }
.cm-disc-body[hidden] { display: none; }

/* segmented control */
.cm-seg {
  display: inline-flex;
  background: #e5eaf0;
  border-radius: 0.25rem;
  padding: 0.125rem;
}
.cm-seg button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.78125rem;
  font-weight: 600;
  color: #5c7080;
  padding: 0.375rem 0.875rem;
  border-radius: 0.1875rem;
  cursor: pointer;
}
.cm-seg button.active { background: #fff; color: #00a4bd; box-shadow: 0 1px 0.125rem rgba(16, 16, 24, .12); }

/* toggle switch */
.cm-toggle { position: relative; display: inline-block; width: 2.375rem; height: 1.375rem; }
.cm-toggle input { opacity: 0; width: 0; height: 0; }
.cm-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd6e2;
  border-radius: 62.4375rem;
  transition: background .14s ease;
}
.cm-toggle-slider::before {
  content: "";
  position: absolute;
  top: 0.125rem; left: 0.125rem;
  width: 1.125rem; height: 1.125rem;
  background: #fff;
  border-radius: 50%;
  transition: transform .14s ease;
}
.cm-toggle input:checked + .cm-toggle-slider { background: #00a4bd; }
.cm-toggle input:checked + .cm-toggle-slider::before { transform: translateX(1rem); }

/* plan list (Pricing Plan Item) — bordered container, rows split by borders */
.cm-planlist {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #cbd6e2;
  border-radius: 0.25rem;
  overflow: hidden;
}
.cm-plan-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: #fff;
  border-bottom: 1px solid #dfe5eb;
}
.cm-plan-row:last-child { border-bottom: none; }
.cm-plan-row .cm-handle { padding: 0 0.125rem 0 0.75rem; letter-spacing: -0.125rem; }
.cm-plan-open {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84375rem;
  color: #33475b;
  padding: 0.75rem 0.75rem 0.75rem 0.25rem;
}
.cm-plan-open:hover { color: #00a4bd; }
.cm-row-chev { color: #b0bcca; font-size: 1.125rem; line-height: 1; }
.cm-plan-open:hover .cm-row-chev { color: #00a4bd; }

/* drag state */
.cm-handle { cursor: grab; }
.cm-list-row.cm-dragging,
.cm-plan-row.cm-dragging { opacity: .5; outline: 1px dashed #7fd1de; }

/* drill-in detail view — slides over the whole drawer */
.cm-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #eef1f6;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.cm-drawer.cm-detail-open .cm-detail { transform: translateX(0); }
.cm-detail-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border-bottom: 1px solid #d6dbe3;
}
.cm-back {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #00a4bd;
  padding: 0.25rem 0.375rem;
  border-radius: 0.1875rem;
}
.cm-back:hover { background: #f0f6f8; }
.cm-back-arrow { font-size: 1rem; }
.cm-detail-title {
  flex: 1 1 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: #33475b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* pager — Previous / N of M / Next (HubSpot drill-in pattern) */
.cm-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: #fff;
  border-bottom: 1px solid #d6dbe3;
}
.cm-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #00a4bd;
  padding: 0;
}
.cm-pager-btn:hover:not(:disabled) { text-decoration: underline; }
.cm-pager-btn:disabled { color: #b8c4d0; cursor: default; }
.cm-pager-arrow { font-size: 1rem; line-height: 1; }
.cm-pager-count { font-size: 0.8125rem; font-weight: 600; color: #5c7080; }

.cm-detail-body { flex: 1 1 auto; overflow-y: auto; padding: 0.875rem; }
.cm-detail-top {
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 0.375rem;
  padding: 0.875rem;
  margin-bottom: 0.625rem;
}
.cm-detail-top .cm-field:last-child { margin-bottom: 0; }

/* accordion sections inside the plan detail */
.cm-acc { margin-bottom: 0.5rem; }
.cm-acc > .cm-group-head { font-size: 0.8125rem; }
.plan {
  position: relative;
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  /* height auto — the grid stretches all cards to the tallest; slack falls before Add-ons */
  background: var(--brand-light);
  border: 1px solid var(--surface-2);      /* surface/surface-2 #dad9dd */
  border-radius: var(--size-8);            /* sizes/8 = 8px */
}

.plan-featured {
  background: var(--coral-0);              /* coral/0 #fff6f4 */
  border: 1px solid var(--coral-300);      /* coral/300 #fe8d77 */
  box-shadow: var(--shadow-card);          /* visually derived */
}
/* "Most popular" badge (Discount node) */
.popular-badge {
  position: absolute;
  top: -0.6875rem;                              /* badge straddles top border */
  left: 50%;
  transform: translateX(-50%);
  background: #ffb7a8;                      /* rgba(255,183,168,1) */
  color: var(--coral-800);                 /* #690d00 */
  font-size: 0.75rem;
  font-weight: 400;                        /* Regular */
  line-height: 1.125rem;
  padding: var(--space-2) var(--space-6);  /* 2px 6px */
  border-radius: var(--size-4);            /* sizes/4 = 4px */
  white-space: nowrap;
}

.plan-head { min-height: 4.0625rem; }
.plan-name {                               /* Sans/14 Regular */
  margin: 0 0 var(--space-8);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3125rem;
  color: var(--gray-900);                  /* #1c1c1c */
}
.plan-desc {                               /* Sans/12 Regular */
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--gray-500);                  /* #737373 */
}

.price { margin: 1rem 0 0.25rem; display: flex; align-items: flex-end; }  /* desc → price = 16px */
.price .amount {                           /* IBM Plex Sans Medium */
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.05625rem;
  line-height: 2.8125rem;
  color: var(--gray-900);                  /* #1c1c1c */
}
.price .per {                              /* Sans/16 Regular */
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--gray-900);                  /* #1c1c1c */
}

.switch-note {                             /* Sans/12 Regular */
  margin: 0;                                /* gap to the stepper is owned by .ws-usage (16px) */
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--gray-500);                  /* #737373 */
}

/* ===== Discount: original (strikethrough) price + percentage ===== */
.price-orig { color: #de2600; text-decoration: line-through; }   /* coral/500 */
.price-pct { color: var(--gray-500); }                            /* #737373 */
/* Top: a row above the price showing "$29 (-35%)" */
.price-disc-top {
  display: flex; align-items: center; gap: var(--space-8);
  margin: 1rem 0 0;
  font-size: 0.875rem; line-height: 1.3125rem;
}
.price-disc-top + .price { margin-top: 0.125rem; }    /* price sits tight under the discount row */
/* Left: a small strikethrough sits inline, left of the amount (bottom-aligned) */
.price-orig-left {
  align-self: flex-end;
  margin: 0 var(--space-8) 0.5rem 0;
  font-size: 1rem; line-height: 1.5rem; font-weight: 400;
}

/* CTA sits below the usage/stepper section; 16px above, 16px down to the divider */
.plan-cta { width: 100%; margin: 1rem 0 0; padding: 0.5rem 2rem; }  /* py8 px32 */

/* ===== Workspace & social-profile section (Figma 2889:233657) =====
Stepper on the left, inline with the "workspaces" label; "N social profiles"
sits on the line below. No framing dividers. */
.ws-usage {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);            /* stepper → labels = 8px */
  margin: 1.25rem 0 0;               /* gap from switch-note */
}

/* ===== Usage lines (workspaces / profiles) — dashed-underline labels ===== */
.usage { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.usage li {                                  /* Sans-Medium/14 */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3125rem;
  color: var(--gray-900);
}

/* features fill the remaining height so Add-ons (when present) pins to the bottom.
A single full-bleed divider sits above them (below the CTA). */
.features {
  display: flex; flex-direction: column; gap: var(--space-12); flex: 1 1 auto;
  margin: 1rem calc(-1 * var(--space-16)) 0;       /* full-bleed divider */
  padding: var(--space-24) var(--space-16) 0;
  border-top: 1px solid var(--surface-2);
}
.plan-featured .features { border-top-color: rgba(254, 141, 119, .35); }
.features li {                             /* Sans/14 */
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--gray-900);                  /* #1c1c1c */
}
/* dashed underline + hover target sit on just the label text */
.has-tip .feat-label {
  text-decoration: underline dashed;
  text-decoration-color: var(--gray-200);  /* #c7c7c7 */
  text-underline-offset: 0.1875rem;
  cursor: help;
  transition: text-decoration-color .12s ease;
}
.has-tip .feat-label:hover { text-decoration-color: var(--gray-900); }  /* #1c1c1c */
/* check sprite — 14px, #1c1c1c */
.features .check {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  color: var(--gray-900);
}
/* reply arrow icon — exact SVG from Figma */
.features .arrow {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.25065 8.16683L2.33398 5.25016L5.25065 2.3335' stroke='%231C1C1C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.6673 11.6667V7.58333C11.6673 6.96449 11.4215 6.371 10.9839 5.93342C10.5463 5.49583 9.95282 5.25 9.33398 5.25H2.33398' stroke='%23201E24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 0.875rem 0.875rem;
}
.features .inherit { color: var(--gray-900); text-decoration: none; }  /* #1c1c1c, no underline */
.features .inherit strong { font-weight: 500; }                         /* plan name (Solo/Team/…) */
.features .plus-icon {                       /* + before "Everything in…" (plus sprite) */
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  color: var(--gray-900);
}
/* Option 2 checklist: "Unlimited users" people icon (users sprite) */
.features .users-icon {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  color: var(--gray-900);
}
/* 24px between "Unlimited users" and the next section (Figma: 12px gap + 12px).
Applies on every plan, whether the next row is the inherit label or a feature. */
.features-alt .feat-users { margin-bottom: var(--space-12); }

/* "New" tag pill on a checklist item (Figma: green/50 bg, green/700 text) */
.feat-tag {
  flex: none;
  display: inline-block;
  margin-left: var(--space-6);
  padding: 0.125rem 0.5rem;
  border-radius: 0.75rem;
  background: #d7f7c2;                      /* colors/palette/green/50 */
  color: #0b5019;                          /* colors/palette/green/700 */
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===== Hover tooltips on usage items (Glide-style, no info icon) ===== */
.features li.has-tip { position: relative; }
/* dark tooltip — appended to <body> (escapes the scroll box + its mask), JS-positioned */
.feature-tip {
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: 17.5rem;
  background: var(--gray-900);             /* #1c1c1c */
  color: var(--gray-0);                    /* #fafafa */
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.1875rem;
  letter-spacing: 0;
  text-decoration: none;
  text-align: left;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  box-shadow: 0 0.625rem 1.875rem rgba(16, 16, 24, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.feature-tip strong { font-weight: 500; color: #fff; }
.feature-tip.show { opacity: 1; visibility: visible; }

/* close (✕) control — hidden on hover-capable desktops, shown in tap mode.
pointer-events:auto re-enables clicks even though the tip itself is none. */
.feature-tip-close {
  display: none;
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--gray-0);                    /* #fafafa */
  cursor: pointer;
  pointer-events: auto;
}
.feature-tip-close:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 45rem), (hover: none) {
  .feature-tip { padding-right: 2.375rem; }    /* room for the ✕ */
  .feature-tip-close { display: flex; }
}

/* Add-ons row — chip text is Sans-Medium/12 #1c1c1c, chevron 14px.
Divider above is edge-to-edge (not part of the chip component spec). */
/* ===== Add-ons dropdown ===== */
/* ===== Add-ons — static block at the bottom (no longer an accordion) ===== */
.addons-block {
  margin: 1rem 0 0;
  padding: 0.75rem 0.625rem;                      /* Figma py-12 px-10 */
  background: var(--gray-0);               /* #fafafa rounded panel */
  border-radius: var(--size-6);            /* 6px */
}
.plan-featured .addons-block { background: #ffe9e5; }   /* coral/50 on the featured card */
.addons-title {                            /* Sans-Medium/12 #1c1c1c */
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  color: var(--gray-900);
}
.addon-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.addon-item { display: flex; align-items: center; gap: 0.375rem; }
.addon-label {                             /* Sans/14, dashed underline */
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: var(--gray-900);                  /* #1c1c1c */
  border-bottom: 1px dashed var(--gray-200);  /* #c7c7c7 */
  cursor: help;
  transition: border-bottom-color .12s ease;
}
.addon-label:hover { border-bottom-color: var(--gray-900); }  /* #1c1c1c */

/* ===== "What's included" accordion =====
Desktop: the wrapper is transparent (checklist + add-ons flow normally) and the
toggle is hidden. Mobile (≤720px) turns it into a collapsible footer accordion. */
.plan-included,
.plan-included-inner { display: contents; }
.plan-included-toggle { display: none; }

/* shared pill (button/neutral/outlined) — DEFAULT: #fafafa bg + #58576433 border */
.addon-add,
.stepper {
  flex: none;
  width: 4.375rem;
  height: 1.5rem;
  background-color: var(--btn-neutral-outlined-bg);       /* #fafafa */
  border: 1px solid var(--btn-neutral-outlined-border);   /* #58576433 */
  border-radius: 3rem;
  box-sizing: border-box;
  transition: background-color .12s ease, border-color .12s ease;
}

button.cur:hover, button.cur.active:hover {
  background: transparent;
  color: inherit;
  color: var(--gray-400);
}
button.active.cur:hover, button.active.cur.active:hover {
  color: var(--neutral-900);
}
/* + add button — HOVER: darker fill (gray/50) */
.addon-add:hover { background-color: var(--gray-50); }    /* #eee */
/* + add button — CLICKED/ADDED: purple inverse + checkmark, no border */
.addon-add.added {
  background-color: rgba(81, 61, 217, .1);                /* button/primary/inverse */
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2L4.8 8.6L9.5 3.6' stroke='%23513DD9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* "+" add button — exact 12px plus icon */
.addon-add {
  padding: 0;
  font-size: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 2.5V9.5M2.5 6H9.5' stroke='%231B1B20' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem 0.75rem;
}

/* stepper: (−) N (+) — two standalone circles + counter, no pill wrapper */
.stepper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  width: auto;                    /* override the shared pill width */
  height: 1.25rem;
  background: none;               /* override pill fill */
  border: none;                   /* override pill border */
  border-radius: 0;
  padding: 0;
}
.stepper .step {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200);             /* #c7c7c7 circle outline */
  border-radius: 50%;
  background-color: var(--btn-neutral-outlined-bg);  /* #fafafa fill */
  color: var(--neutral-900);                     /* plus/minus sprite icon — #1b1b20 */
  cursor: pointer;
  padding: 0;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.stepper .step .step-icon { width: 0.75rem; height: 0.75rem; display: block; }
.stepper .step:hover { background-color: var(--gray-50); }  /* gray #eee filled circle */
/* at the included (minimum) count the minus is disabled — grey just the icon, keep the fill */
.stepper .step:disabled { cursor: default; color: var(--gray-200); }   /* icon greys to #c7c7c7 */
.stepper .step:disabled:hover { background-color: var(--btn-neutral-outlined-bg); }
.stepper .num {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 0.9375rem;
  color: var(--gray-900);
}

/* ============ Tailored band (Frame 11198) ============ */
.tailored {
  margin-top: 1.5rem;
  border: 1px solid var(--surface-2);      /* #dad9dd */
  border-radius: var(--size-8);            /* 8px */
  background: var(--brand-light);
  padding: var(--space-24) 2.5rem;           /* py 24, px 40 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.tailored h3 {                             /* Sans-Medium/24 */
  margin: 0 0 var(--space-16);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.875rem;
  letter-spacing: -0.0375rem;
  color: var(--neutral-900);               /* #1b1b20 */
}
.tailored p {                              /* Sans/16 */
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--neutral-900);               /* #1b1b20 */
  max-width: 54.875rem;
}
.tailored .btn { padding: 0.5rem 0.75rem; }      /* Book a demo wrapper px-12 py-8 */

/* ================= BELOW THE FOLD ================= */

/* ---- Supported networks band ---- */
.supported {
  margin: 0;                                              /* flush module */
  padding: 3.5rem max(2rem, calc((100vw - 84rem) / 2));   /* live: 56px 32px band */
  background: #f2ebff;                                     /* live band bg */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.supported-label { font-size: 1.375rem; font-weight: 500; line-height: 1.65rem; letter-spacing: -0.008125rem; color: var(--brand-dark); }  /* live: 22px/500 #201e24 */
.net-icons { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.net {
  width: 1.875rem; height: 1.875rem;
  display: flex; align-items: center; justify-content: center;
}
.net img { width: 1.875rem; height: 1.875rem; display: block; }
.net-icon { width: 1.875rem; height: 1.875rem; display: block; }
.net-mono { color: var(--brand-dark); }   /* X / WordPress / Threads — monochrome, #201e24 */

/* ---- Features breakdown ---- */
/* full-bleed white band (matches live), content centred to the 1344 container */
.breakdown {
  --bd-pad: max(2rem, calc((100vw - 84rem) / 2));
  margin: 0;                                /* flush module */
  padding: 3.5rem var(--bd-pad);
  background: var(--brand-light);
  box-sizing: border-box;
}
.breakdown-title { font-size: 2.625rem; font-weight: 500; letter-spacing: -0.083125rem; line-height: 1.06; margin: 0 0 2.5rem; color: var(--ink); }
.breakdown-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.bd-table { font-family: var(--font-sans); background: var(--brand-light); }  /* white — matches live */
.bd-head {
  position: sticky; top: 0; z-index: 30;
  background: #fff;
  /* full-bleed: the pinned bar spans the viewport edge-to-edge, while the inner
  grid is pushed back by the same padding so columns still line up with rows */
  margin: 0 calc(-1 * var(--bd-pad));
  /* padding-top gives the "Most popular" badge room so it isn't clipped when pinned */
  padding: 1.25rem var(--bd-pad) 0;
  display: grid;
  grid-template-columns: minmax(17.5rem, 2.5fr) repeat(5, 1fr);  /* label 1/3, plans 2/3 (live) */
  align-items: end;
  /* no padding-bottom: lets the featured-column tint run straight into the body */
  border-bottom: 1px solid var(--surface-2);
}
.bd-controls {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  align-self: end;            /* sit at the bottom, aligned with the plan prices/CTAs */
  padding-bottom: 1rem;
}
/* don't stretch the toggle to the full column — keeps "Yearly Save 15%" on one line */
.bd-controls .billing-toggle { width: auto; }
.bd-controls .period { white-space: nowrap; }
.bd-controls .currency-switch { gap: var(--space-12); }
.bd-plans { display: contents; }
/* Plan header cell — Figma node 1585:39948 (FD Plan): py-16 px-22, gaps 8/16 */
.bd-plan { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; padding: 1rem 1.375rem; }
.bd-plan-featured { background: var(--coral-0); border-radius: 0.5rem 0.5rem 0 0; }
.bd-badge {
  position: absolute; top: -0.625rem; left: 50%; transform: translateX(-50%);
  background: #ffb7a8; color: var(--coral-800); font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; white-space: nowrap;
}
.bd-name { font-size: 0.75rem; font-weight: 400; line-height: 1.125rem; color: var(--gray-900); }   /* #1c1c1c, Regular */
/* "$35/mo" is one unit, centred as a block with the name and billed monthly */
.bd-price { display: flex; justify-content: center; align-items: flex-end; gap: 0.125rem; margin-top: var(--space-8); }
.bd-amount { font-size: 1.5rem; line-height: 1.875rem; font-weight: 500; letter-spacing: -0.0375rem; color: var(--gray-900); }
.bd-per { font-size: 0.75rem; line-height: 1.125rem; color: var(--gray-900); }                          /* #1c1c1c (dark) */
.bd-billed { font-size: 0.75rem; line-height: 1.125rem; color: var(--gray-500); }                       /* #737373 */
.bd-cta { width: 7.1875rem; margin-top: var(--space-16); padding: 0.375rem 0.5rem; font-size: 0.75rem; }        /* price → cta: 16px */

/* category subheaders + feature rows (same grid as header) */
.bd-cat, .bd-row {
  display: grid;
  grid-template-columns: minmax(17.5rem, 2.5fr) repeat(5, 1fr);  /* label 1/3, plans 2/3 (live) */
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.bd-cat { border-bottom: 0.09375rem solid var(--brand-dark); }   /* dark divider under each category */
.bd-cat .bd-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 1rem; letter-spacing: -0.00625rem; color: var(--neutral-900); padding: 1rem 0; }
.bd-cat-icon { display: inline-flex; align-items: center; }
.bd-cat-svg { width: 1.25rem; height: 1.25rem; display: block; color: var(--brand-strong); }  /* #513dd9 */
.bd-label { font-size: 1rem; font-weight: 400; color: var(--neutral-900); padding: 0.75rem 1rem; }
.bd-cell {
  text-align: center; font-size: 1rem; font-weight: 500; color: var(--neutral-900);
  padding: 0.75rem 0.375rem; align-self: stretch; display: flex; align-items: center; justify-content: center;
}
.bd-cell.featured, .bd-cat .featured { background: var(--coral-0); }  /* live featured-column tint */
.bd-check { width: 1rem; height: 1rem; color: var(--brand-strong); }   /* check sprite, #513dd9 */
.bd-cell .bd-na { color: var(--gray-300); }

/* feature-row accordion — each row's label opens a description */
.bd-label-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  cursor: pointer;
  user-select: none;
}
.bd-label-toggle:focus-visible { outline: 0.125rem solid var(--brand); outline-offset: -0.125rem; border-radius: 0.25rem; }
.bd-row-head { display: inline-flex; align-items: center; gap: 0.5rem; transition: color .12s ease; }
.bd-label-toggle:hover .bd-row-head { color: var(--brand-strong); }
.bd-row-chev {
  flex: none;
  width: 1rem; height: 1rem;
  color: var(--brand-dark);                /* chevron_down sprite, #201e24 */
  transition: transform .18s ease;
}
.bd-row.open .bd-row-chev { transform: rotate(90deg); }   /* right chevron → points down when open */
/* smooth open/close: animate the true height via grid-template-rows (0fr→1fr) */
.bd-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.bd-desc > p { overflow: hidden; min-height: 0; margin: 0; padding-top: 0.5rem; font-size: 0.875rem; line-height: 1.3125rem; color: var(--gray-600); max-width: 52ch; }
.bd-row.open .bd-desc { grid-template-rows: 1fr; }
/* live behaviour: cells stay vertically centred, so checks re-center (move down) as a row opens */


/* ---- Social proof — Figma 2422:102966 (centered stack on a #f2ebff band) ---- */
.social-proof {
  margin: 0;                                           /* flush module */
  background: #f2ebff;                                  /* purple/50 band */
  padding: 3.5rem max(2rem, calc((100vw - 84rem) / 2)) 4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.sp-text {
  font-size: 1.5rem; line-height: 1.875rem; font-weight: 500; letter-spacing: -0.0375rem;
  color: var(--neutral-900); text-align: center; max-width: 66rem; margin: 0;
}
.sp-logos {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 5rem; list-style: none; margin: 0; padding: 0;
}
.sp-logos li { display: inline-flex; align-items: center; }
.sp-logos img { display: block; }                      /* natural size, as in the design */
.sp-link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--brand-strong); font-size: 1rem; font-weight: 500; line-height: 1rem;
  text-decoration: none;
}
.sp-link .sp-arrow { display: block; transition: transform .15s ease; }
.sp-link:hover .sp-arrow { transform: translateX(0.1875rem); }

/* ---- FAQ — Figma node 2897:237717 (heading left, accordion list right) ---- */
.module-faq { padding: 5.5rem 0 1.5rem; }
.faq { display: flex; align-items: flex-start; gap: var(--space-16); max-width: 71rem; margin: 0 auto; }
.faq-title { flex: 0 0 32.625rem; width: 32.625rem; font-size: 3rem; font-weight: 500; letter-spacing: -0.0625rem; line-height: 3.125rem; margin: 0; color: var(--neutral-900); }
.faq-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.faq-grid { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-16); }
.faq-item { background: var(--brand-light); border: 1px solid #EEEEEE; border-radius: var(--size-8); padding: var(--space-16); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: var(--neutral-900);
  padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  transition: color .12s ease;
}
.faq-q:hover { color: var(--brand-strong); }
.faq-q-text { flex: 1 1 auto; }
.faq-chev {                                       /* right chevron → rotates down when open */
  flex: none; width: 1.5rem; height: 1.5rem;
  color: var(--gray-900);                         /* #1c1c1c */
  transition: transform .18s ease;
}
.faq-item.open .faq-chev { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 25rem; }
.faq-a p { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.3125rem; color: var(--gray-600); }

/* ============ Responsive ============ */
@media (max-width: 67.5rem) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  section.module.module-plans h1 { font-size: 2.375rem; line-height: 1.05; }
  /* narrower cards wrap taller — let them grow instead of scrolling */
  .plan { height: auto; }
  .feature-group { overflow: visible; }
  /* FAQ stacks: heading above the list */
  .faq { flex-direction: column; gap: 2rem; }
  .faq-title { flex: none; width: auto; }
}
/* No mobile frame exists in the Figma design (desktop-only, 1440).
Breakpoints below are a sensible responsive layer, not from the design. */
@media (max-width: 45rem) {
  .header-inner { gap: var(--space-16); }
  .main-nav,
  .icon-btn,
  .link-btn,
  .btn-outline { display: none; }              /* keep logo + primary CTA only */
  .plans { grid-template-columns: 1fr; }
  .hero-top, .tailored { flex-direction: column; align-items: flex-start; }
  /* tailored band becomes a card matching the plans: 16px padding, full-width CTA */
  .tailored { padding: var(--space-16); gap: var(--space-16); }
  .tailored .btn { width: 100%; padding: 0.5rem 2rem; }
  /* hero trust badges + currency switch are hidden on mobile (currency moves into
  the plan area in the mobile design) */
  .checkpoints,
  .currency-row { display: none; }
  /* …so restore the gap between the billing toggle and the first plan card */
  .plans { margin-top: var(--space-32, 2rem); }
  /* toggle fills the content column; the Monthly tab's desktop px-48 is trimmed so
  the two tabs share the width without overflowing (Yearly stays a touch wider
  for its pill) */
  .billing-toggle { display: flex; width: 100%; }
  .billing-toggle .period { flex: 1 1 auto; justify-content: center; }
  .billing-toggle .period[data-period="monthly"] { padding: 0 1.3125rem; }

  /* ===== Plan cards: full-width stacked, checklist behind a "What's included"
  accordion pinned to the card bottom (Figma 2915-338927 / 2915-339107). ===== */
  .plan { padding-bottom: 0; }
  .plan-desc, .switch-note { font-size: 0.875rem; line-height: 1.3125rem; }
  /* the "Most popular" badge overhangs the card top by ~10px; push the featured
  card down so the gap above the badge matches the 16px between other cards */
  .plan-featured { margin-top: 0.625rem; }

  /* collapsible region (checklist + add-ons), full-bleed to the card edges */
  .plan-included {
    display: grid;
    grid-template-rows: 0fr;
    margin: 1rem calc(-1 * var(--space-16)) 0;   /* 16px gap below the CTA */
    transition: grid-template-rows .3s ease;
  }
  .plan.is-open .plan-included { grid-template-rows: 1fr; }
  .plan-included-inner { display: block; overflow: hidden; min-height: 0; }

  /* checklist → bordered 38px rows, content inset 16px to align with the header */
  .plan-included .features {
    margin: 0; padding: 0; gap: 0; flex: none;
    border-top: 1px solid #dadada;               /* divider under the CTA when open */
  }
  .plan-featured .plan-included .features { border-top-color: #dadada; }
  .plan-included .features li {
    min-height: 2.375rem; align-items: center; gap: var(--space-8);
    margin: 0; padding: 0.5rem var(--space-16);
    line-height: 1.3125rem;
    border-bottom: 1px solid #dadada;
  }
  .plan-included .features-alt .feat-users { margin-bottom: 0; }
  /* avoid a 2px "double line" where the last row's border meets the toggle's
  border-top — only an issue when no Add-ons box sits between them */
  .plan-included-inner:not(:has(.addons-block)) .features li:last-child { border-bottom: 0; }

  /* add-ons box stays inset 16px from the card edge */
  .plan-included .addons-block { margin: 0.75rem var(--space-16) 1rem; }

  /* toggle row — pinned at the bottom of the card, full-bleed */
  .plan-included-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: auto; margin: 0 calc(-1 * var(--space-16)); padding: 0.75rem var(--space-16);
    background: none; border: 0; border-top: 1px solid #dadada;
    font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.3125rem;
    color: var(--gray-900); text-align: left; cursor: pointer;
    height: auto;
    border-radius: 0;
  }
  .plan-inc-chev {
    flex: none; width: 1.5rem; height: 1.5rem; color: var(--gray-900);
    stroke-width: 0.09375rem; transition: transform .25s ease;
  }
  .plan.is-open .plan-inc-chev { transform: rotate(180deg); }
}

.tailored .btn {
  padding: 0.5rem 0.75rem;
}
.btn-soft {
  background: rgb(81 61 217 / 10%);
  color: #513dd9;
}

.btn-soft:hover {
  background: rgba(81, 61, 217, .2);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 0.875rem;
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, box-shadow .15s ease-in-out;
}
section.module.module-plans section.tailored {
  padding: var(--space-24) 2.5rem;
}

section.module.module-plans section {
  padding: 0
}

section.module.module-plans section.hero {
  padding: 3rem 0 0
}

.module-inner {
  margin: 0 auto;
  width: min(84rem,100% - 4rem)
}

.module-plans {
  background: var(--gray-0);
  padding-bottom: var(--space-48)
}

.module-faq {
  background: var(--brand-light)
}

.hero {
  padding: 3rem 0 0
}

.hero-top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between
}

.hero-top section.module.module-plans h1 {
  color: var(--gray-900);
  font-family: var(--font-sans);
  font-family: inherit;
  font-size: var(--type-display48-size);
  font-weight: var(--type-display48-wt);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--type-display48-ls);
  line-height: var(--type-display48-lh);
  line-height: 1.2;
  margin: 0 0 .5em;
  word-break: normal
}

.period.active {
  background: var(--brand-light);
  box-shadow: 0 .125rem .25rem 0 rgba(49,49,49,.15),0 1px .125rem 0 rgba(49,49,49,.15);
  color: var(--gray-900)
}

.billing-toggle {
  align-items: center;
  background: var(--purple-0);
  border-radius: var(--size-32);
  display: inline-flex;
  padding: var(--space-4) var(--space-6);
}

.period[data-period=monthly] {
  padding: 0 var(--space-48)
}

.period {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--size-32);
  color: var(--gray-500);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  gap: var(--space-8);
  height: 2.875rem;
  letter-spacing: -.01875rem;
  padding: 0 1.3125rem
}

.checkpoints {
  color: var(--gray-900);
  display: flex;
  flex-wrap: wrap;
  font-size: .875rem;
  gap: .75rem;
  letter-spacing: -.007294rem;
  line-height: 1.0875rem;
  margin-top: var(--space-24)
}

.checkpoints li {
  align-items: center;
  display: inline-flex;
  gap: var(--space-8)
}

.checkpoints .tick {
  color: var(--brand-strong);
  flex: none;
  height: 1rem;
  width: 1rem
}

.currency-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
  margin-top: 0;
  padding-bottom: .5rem;
  padding-top: 1.25rem
}

.currency-switch {
  gap: var(--space-12)
}

.cur,.currency-switch {
  align-items: center;
  display: inline-flex
}

.cur {
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: .75rem;
  gap: var(--space-4);
  letter-spacing: -.00625rem;
  line-height: 1.0875rem;
  padding: 0;
  font-weight: normal;
}

.cur.active {
  color: var(--neutral-900)
}

.cur .flag {
  border-radius: 50%;
  display: block;
  filter: grayscale(1);
  flex: none;
  height: .75rem;
  opacity: .8;
  width: .75rem
}

.cur.active .flag {
  filter: none;
  opacity: 1
}

.plans {
  --gray-0: #fafafa;
  --gray-200: #c7c7c7;
  --gray-500: #737373;
  --gray-900: #1c1c1c;
  --neutral-900: #1b1b20;
  --surface-2: #dad9dd;
  --coral-0: #fff6f4;
  --coral-300: #fe8d77;
  --coral-800: #690d00;
  --coral-50: #ffe9e5;
  --btn-primary-bg: #625afa;
  --btn-primary-fg: #f9f7ff;
  --btn-soft-bg: rgba(81,61,217,.1);
  --btn-soft-fg: #513dd9;
  --font-sans: "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  align-items: stretch;
  display: grid;
  font-family: var(--font-sans);
  gap: 1rem;
  grid-template-columns: repeat(5,1fr)
}

.plans.three-plans {
  gap: 3rem;
  grid-template-columns: repeat(3,1fr)
}

.plans.three-plans .plan:nth-child(2),.plans.three-plans .plan:nth-child(4) {
  display: none
}

.plan {
  background: #fff;
  border: 1px solid var(--surface-2);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  position: relative
}

.plan-featured {
  background: var(--coral-0);
  border-color: var(--coral-300);
  box-shadow: 0 .0625rem .125rem rgba(20,20,30,.04),0 .5rem 1.5rem rgba(20,20,30,.04)
}

.popular-badge {
  background: #ffb7a8;
  border-radius: .25rem;
  color: var(--coral-800);
  font-size: .75rem;
  font-weight: 400;
  left: 50%;
  line-height: 1.125rem;
  padding: .125rem .375rem;
  position: absolute;
  top: -.6875rem;
  transform: translateX(-50%);
  white-space: nowrap
}

.plan-head {
  min-height: 4.0625rem
}

.plan-name {
  color: var(--gray-900);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.3125rem;
  margin: 0 0 .5rem
}

.plan-desc {
  color: var(--gray-500);
  font-size: .75rem;
  line-height: 1.125rem;
  margin: 0
}

.price {
  align-items: flex-end;
  display: flex;
  margin: 1rem 0 .25rem
}

.price .amount {
  color: var(--gray-900);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -.056rem;
  line-height: 2.8125rem
}

.price .per {
  color: var(--gray-900);
  font-size: 1rem;
  line-height: 1.5rem
}

.switch-note {
  color: var(--gray-500);
  font-size: .75rem;
  line-height: 1.125rem;
  margin: 0
}

.price-orig {
  color: #de2600;
  text-decoration: line-through
}

.price-pct {
  color: var(--gray-500)
}

.price-disc-top {
  align-items: center;
  display: flex;
  font-size: .875rem;
  gap: .5rem;
  line-height: 1.3125rem;
  margin: 1rem 0 0
}

.price-disc-top+.price {
  margin-top: .125rem
}

.price-orig-left {
  align-self: flex-end;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0 .5rem .5rem 0
}

.ws-usage {
  align-items: flex-start;
  display: flex;
  gap: .5rem;
  margin: 1.25rem 0 0
}

.usage {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  list-style: none;
  margin: 0;
  padding: 0
}

.usage li {
  color: var(--gray-900);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3125rem
}

.stepper {
  align-items: center;
  display: inline-flex;
  flex: none;
  gap: .5rem
}

.stepper .step {
  align-items: center;
  background: var(--gray-0);
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  color: var(--neutral-900);
  cursor: pointer;
  display: flex;
  height: 1.25rem;
  justify-content: center;
  padding: 0;
  width: 1.25rem
}

.stepper .step:disabled {
  color: var(--gray-200);
  cursor: default
}

.stepper .step .step-icon {
  display: block;
  height: .75rem;
  stroke-width: 2px;
  width: .75rem
}

.btn,.stepper .num {
  font-size: .875rem
}

.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: 500;
  gap: .375rem;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  transition: background-color .12s ease,color .12s ease
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg)
}

.btn-soft {
  background: var(--btn-soft-bg);
  color: var(--btn-soft-fg)
}

.plan-cta {
  margin: 1rem 0 0;
  padding: .5rem 2rem;
  width: 100%
}

.features {
  border-top: 1px solid var(--surface-2);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .75rem;
  list-style: none;
  margin: 1rem -1rem 0;
  padding: 1.5rem 1rem 0
}

.plan-featured .features {
  border-top-color: rgba(254,141,119,.35)
}

.features li {
  align-items: flex-start;
  color: var(--gray-900);
  display: flex;
  font-size: .875rem;
  gap: .5rem;
  line-height: 1rem
}

.features .check,.features .plus-icon,.features .users-icon {
  color: var(--gray-900);
  flex: none;
  height: .875rem;
  margin-top: .0625rem;
  stroke-width: 2.5px;
  width: .875rem
}

.features-alt .feat-users {
  margin-bottom: .75rem
}

.features .inherit {
  text-decoration: none
}

.feat-tag,.features .inherit strong {
  font-weight: 500
}

.feat-tag {
  background: #d7f7c2;
  border-radius: .75rem;
  color: #0b5019;
  display: inline-block;
  flex: none;
  font-size: .75rem;
  line-height: 1.125rem;
  margin-left: .375rem;
  padding: .125rem .5rem;
  text-transform: uppercase;
  white-space: nowrap
}

.addons-block {
  background: var(--gray-0);
  border-radius: .375rem;
  margin: 1rem 0 0;
  padding: .75rem .625rem
}

.plan-featured .addons-block {
  background: var(--coral-50)
}

.addons-title {
  color: var(--gray-900);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.125rem;
  margin: 0 0 .75rem
}

.addon-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0
}

.addon-label {
  border-bottom: 1px dashed var(--gray-200);
  color: var(--gray-900);
  font-size: .875rem;
  line-height: 1.3125rem
}

.plan-included,.plan-included-inner {
  display: contents
}

.plan-included-toggle {
  display: none
}

@media (max-width: 45rem) {
  .plans {
    grid-template-columns:1fr
  }

  .plan {
    padding-bottom: 0
  }

  .plan-featured {
    margin-top: .625rem
  }

  .plan-desc,.switch-note {
    font-size: .875rem;
    line-height: 1.3125rem
  }

  .plan-included {
    display: grid;
    grid-template-rows: 0fr;
    margin: 1rem -1rem 0;
    transition: grid-template-rows .3s ease
  }

  .plan.is-open .plan-included {
    grid-template-rows: 1fr
  }

  .plan-included-inner {
    display: block;
    min-height: 0;
    overflow: hidden
  }

  .plan-included .features {
    border-top: 1px solid #dadada;
    flex: none;
    gap: 0;
    margin: 0;
    padding: 0
  }

  .plan-included .features li {
    align-items: center;
    border-bottom: 1px solid #dadada;
    gap: .5rem;
    line-height: 1.3125rem;
    margin: 0;
    min-height: 2.375rem;
    padding: .5rem 1rem
  }

  .plan-included-inner:not(:has(.addons-block)) .features li:last-child {
    border-bottom: 0
  }

  .plan-included .features-alt .feat-users {
    margin-bottom: 0
  }

  .plan-included .addons-block {
    margin: .75rem 1rem 1rem
  }

  .plan-included-toggle {
    align-items: center;
    background: none;
    border: 0;
    border-top: 1px solid #dadada;
    color: var(--gray-900);
    cursor: pointer;
    display: flex;
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 500;
    justify-content: space-between;
    line-height: 1.3125rem;
    margin: 0 -1rem;
    padding: .75rem 1rem;
    text-align: left;
    width: auto
  }

  .plan-inc-chev {
    color: var(--gray-900);
    flex: none;
    height: 1.5rem;
    stroke-width: 1.5px;
    transition: transform .25s ease;
    width: 1.5rem
  }

  .plan.is-open .plan-inc-chev {
    transform: rotate(180deg)
  }
}

:root {
  --gray-0: #fafafa;
  --gray-50: #eee;
  --gray-200: #c7c7c7;
  --gray-300: #ababab;
  --gray-400: #8f8f8f;
  --gray-500: #737373;
  --gray-600: #595959;
  --gray-900: #1c1c1c;
  --purple-0: #f9f7ff;
  --purple-700: #3f32a1;
  --coral-0: #fff6f4;
  --coral-300: #fe8d77;
  --coral-800: #690d00;
  --neutral-900: #1b1b20;
  --on-surface: #1b1b20;
  --surface-2: #dad9dd;
  --brand-light: #fff;
  --brand-dark: #201e24;
  --btn-primary-bg: #625afa;
  --btn-primary-fg: #f9f7ff;
  --btn-outlined-fg: #513dd9;
  --btn-outlined-bg: #fafafa;
  --btn-outlined-border: rgba(81,61,217,.2);
  --btn-inverse-fg: #513dd9;
  --btn-inverse-bg: rgba(81,61,217,.1);
  --btn-text-fg: #513dd9;
  --btn-neutral-text-fg: #585764;
  --btn-neutral-outlined-bg: #fafafa;
  --btn-neutral-outlined-border: #58576433;
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --size-2: 0.125rem;
  --size-4: 0.25rem;
  --size-6: 0.375rem;
  --size-8: 0.5rem;
  --size-16: 1rem;
  --size-24: 1.5rem;
  --size-32: 2rem;
  --size-64: 4rem;
  --font-sans: "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --font-serif: "IBM Plex Serif",Georgia,serif;
  --type-display48-size: 3rem;
  --type-display48-lh: 3.15rem;
  --type-display48-ls: -0.0625rem;
  --type-display48-wt: 500;
  --type-medium24-size: 1.5rem;
  --type-medium24-lh: 1.875rem;
  --type-medium24-ls: -0.0375rem;
  --type-medium24-wt: 500;
  --type-sans16-size: 1rem;
  --type-sans16-lh: 1.5rem;
  --type-sans16-wt: 400;
  --type-sans14-size: 0.875rem;
  --type-sans14-lh: 1.3125rem;
  --type-sans14-wt: 400;
  --type-sans12-size: 0.75rem;
  --type-sans12-lh: 1.125rem;
  --type-sans12-wt: 400;
  --type-medium12-size: 0.75rem;
  --type-medium12-lh: 1.125rem;
  --type-medium12-wt: 500;
  --type-small12-size: 0.75rem;
  --type-small12-lh: 1.0875rem;
  --type-small12-ls: -0.00625rem;
  --type-small12-wt: 400;
  --r-card: 1rem;
  --r-pill: 62.4375rem;
  --shadow-card: 0 1px 0.125rem rgba(20,20,30,.04),0 0.5rem 1.5rem rgba(20,20,30,.04);
  --brand: var(--btn-primary-bg);
  --brand-strong: var(--btn-outlined-fg);
  --brand-deep: var(--purple-700);
  --ink: var(--neutral-900);
  --line: var(--surface-2);
  --page: var(--brand-light)
}

section.module.module-plans {
  padding: 5.4rem 0 0
}
.has-tip .feat-label {
  text-decoration: underline dashed;
  text-decoration-color: var(--gray-200);
  text-underline-offset: 0.1875rem;
  cursor: help;
  transition: text-decoration-color .12s ease;
}

.has-tip .feat-label:hover { text-decoration-color: var(--gray-900); }  /* #1c1c1c */
/* check sprite — 14px, #1c1c1c */
.features .check {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  color: var(--gray-900);
}
/* reply arrow icon — exact SVG from Figma */
.features .arrow {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.25065 8.16683L2.33398 5.25016L5.25065 2.3335' stroke='%231C1C1C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.6673 11.6667V7.58333C11.6673 6.96449 11.4215 6.371 10.9839 5.93342C10.5463 5.49583 9.95282 5.25 9.33398 5.25H2.33398' stroke='%23201E24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 0.875rem 0.875rem;
}
section.module.module-plans .hero-top section.module.module-plans h1 {
  font-size: 48px;
  letter-spacing: -1px;
  line-height: calc(1em + 1pt);
  margin-bottom: 1.5rem
}



.save-pill {
  background: var(--purple-700);
  border-radius: var(--size-32);
  color: var(--purple-0);
  font-size: .75rem;
  font-weight: 500;
  padding: .1875rem .5rem;
  white-space: nowrap
}

/* ===== Hover tooltips on usage items (Glide-style, no info icon) ===== */
.features li.has-tip { position: relative; }
/* dark tooltip — appended to <body> (escapes the scroll box + its mask), JS-positioned */
.feature-tip {
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: 17.5rem;
  background: var(--gray-900);             /* #1c1c1c */
  color: var(--gray-0);                    /* #fafafa */
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.1875rem;
  letter-spacing: 0;
  text-decoration: none;
  text-align: left;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  box-shadow: 0 0.625rem 1.875rem rgba(16, 16, 24, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.feature-tip strong { font-weight: 500; color: #fff; }
.feature-tip.show { opacity: 1; visibility: visible; }

/* close (✕) control — hidden on hover-capable desktops, shown in tap mode.
pointer-events:auto re-enables clicks even though the tip itself is none. */
.feature-tip-close {
  display: none;
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--gray-0);                    /* #fafafa */
  cursor: pointer;
  pointer-events: auto;
}
.feature-tip-close:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 45rem), (hover: none) {
  .feature-tip { padding-right: 2.375rem; }    /* room for the ✕ */
  .feature-tip-close { display: flex; }
}


/* Sendible pricing page — styles
============================================================
DESIGN TOKENS — mirrored 1:1 from Figma variables
(source: get_variable_defs on frame 2815:123547 + card 2815:124821)
============================================================ */
:root {
  /* -- colors/palette -- */
  --gray-0:   #fafafa;
  --gray-50:  #eee;        /* colors/palette/gray/50 — hover fill */
  --gray-200: #c7c7c7;
  --gray-300: #ababab;
  --gray-400: #8f8f8f;
  --gray-500: #737373;
  --gray-600: #595959;
  --gray-900: #1c1c1c;
  --purple-0:   #f9f7ff;
  --purple-700: #3f32a1;
  --coral-0:   #fff6f4;
  --coral-300: #fe8d77;
  --coral-800: #690d00;

  /* -- colors/semantic & surface -- */
  --neutral-900: #1b1b20;
  --on-surface:  #1b1b20;
  --surface-2:   #dad9dd;   /* used as card border / divider */
  --brand-light: #ffffff;
  --brand-dark:  #201e24;

  /* -- button/* tokens -- */
  --btn-primary-bg:      #625afa;
  --btn-primary-fg:      #f9f7ff;
  --btn-outlined-fg:     #513dd9;
  --btn-outlined-bg:     #fafafa;
  --btn-outlined-border: rgba(81, 61, 217, .2);   /* #513dd933 */
  --btn-inverse-fg:      #513dd9;
  --btn-inverse-bg:      rgba(81, 61, 217, .1);    /* #513dd91a */
  --btn-text-fg:         #513dd9;
  --btn-neutral-text-fg: #585764;
  --btn-neutral-outlined-bg: #fafafa;          /* button/neutral/outlined/outlined-background */
  --btn-neutral-outlined-border: #58576433;    /* button/neutral/outlined/outlined-border (rgba(88,87,100,.2)) */

  /* -- spacings/* -- */
  --space-2: 0.125rem;  --space-4: 0.25rem;  --space-6: 0.375rem;  --space-8: 0.5rem;
  --space-12: 0.75rem; --space-16: 1rem; --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem;

  /* -- sizes/* (also used for radii) -- */
  --size-2: 0.125rem; --size-4: 0.25rem; --size-6: 0.375rem; --size-8: 0.5rem;
  --size-16: 1rem; --size-24: 1.5rem; --size-32: 2rem; --size-64: 4rem;

  /* -- typography tokens (family / weight / size / line-height / letter-spacing) --
  FLAG: "Base/48 - Display 3" reports style=Medium but weight=400 in Figma
  (contradiction in source). Using 500 to match the rendered Medium glyph. */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  --type-display48-size: 3rem;   --type-display48-lh: 3.15rem; --type-display48-ls: -0.0625rem;   --type-display48-wt: 500;
  --type-medium24-size: 1.5rem;    --type-medium24-lh: 1.875rem;    --type-medium24-ls: -0.0375rem;  --type-medium24-wt: 500;
  --type-sans16-size: 1rem;      --type-sans16-lh: 1.5rem;      --type-sans16-wt: 400;
  --type-sans14-size: 0.875rem;      --type-sans14-lh: 1.3125rem;      --type-sans14-wt: 400;
  --type-sans12-size: 0.75rem;      --type-sans12-lh: 1.125rem;      --type-sans12-wt: 400;
  --type-medium12-size: 0.75rem;    --type-medium12-lh: 1.125rem;    --type-medium12-wt: 500;
  --type-small12-size: 0.75rem;     --type-small12-lh: 1.0875rem;   --type-small12-ls: -0.00625rem;   --type-small12-wt: 400;

  /* -- radii / effects --
  FLAG: corner radii & shadows are not carried by get_variable_defs/get_metadata
  and get_design_context times out on this server, so these are read from
  high-res node screenshots (visually derived, ~±1px). */
  --r-card: 1rem;          /* visually derived */
  --r-pill: 62.4375rem;
  --shadow-card: 0 1px 0.125rem rgba(20, 20, 30, .04), 0 0.5rem 1.5rem rgba(20, 20, 30, .04); /* visually derived */

  /* -- semantic aliases used throughout the stylesheet -- */
  --brand: var(--btn-primary-bg);
  --brand-strong: var(--btn-outlined-fg);
  --brand-deep: var(--purple-700);
  --ink: var(--neutral-900);
  --line: var(--surface-2);
  --page: var(--brand-light);   /* white page bg — matches live site (nav keeps its own #fafafa) */
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-size: 1rem;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ============ Icons (SVG sprite, currentColor) ============ */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; color: inherit; }

/* Stroke thickness is controlled here on the pricing page (sprite holds shapes only),
tuned to match the original icons' thickness at each display size (24px viewBox). */
.icon { stroke-width: 0.15625rem; }                                  /* header search (18px) */
.caret { stroke-width: 0.15625rem; }                                 /* nav carets (16px) */
.checkpoints .tick { stroke-width: 0.15625rem; }                     /* hero ticks (16px) */
.features .check,
.features .users-icon,
.features .plus-icon { stroke-width: 0.15625rem; }                   /* plan-card icons (14px) */
.stepper .step .step-icon { stroke-width: 0.125rem; }                /* stepper +/− (12px) */
.bd-cat-svg { stroke-width: 0.125rem; }                              /* breakdown category (20px) */
.bd-check { stroke-width: 0.15625rem; }                              /* breakdown cell check (16px) */
.bd-row-chev { stroke-width: 0.140625rem; }                          /* breakdown row chevron (16px) */
.faq-chev { stroke-width: 0.09375rem; }                              /* FAQ chevron (24px) — matches live */
.sp-arrow { stroke-width: 0.125rem; }                                /* social-proof arrow (24px) */

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 0.875rem;          /* Figma/live: leading-[14px] (tight) → 32px button height */
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;          /* button wrapper py spacings/8 */
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out,
    color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* button/primary/fill — live: .btn-trial → hover darkens #625afa to #513dd9 */
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: #513dd9; }

/* button/primary/outlined — live: .btn-demo → hover darkens border to #513dd9 */
.btn-outline {
  background: var(--btn-outlined-bg);
  color: var(--btn-outlined-fg);
  border-color: var(--btn-outlined-border);
}
.btn-outline:hover { border-color: #513dd9; }

/* button/primary/inverse — live: .pricing-table .button--primary → hover bg .1 → .2 */
.btn-soft {
  background: var(--btn-inverse-bg);
  color: var(--btn-inverse-fg);
}
.btn-soft:hover { background: rgba(81, 61, 217, .2); }

/* ============ Header ============ */
.site-header {
  background: var(--gray-0);              /* Navigation bg = gray/0 #fafafa */
  border-bottom: 1px solid var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: transform .25s ease;
}
/* While the breakdown's plan header is pinned to the top, slide the nav away */
body.bd-pinned .site-header { transform: translateY(-100%); }
.header-inner {
  width: min(71rem, 100% - 4rem);   /* design content column = 1136px (x152→1288) */
  margin: 0 auto;
  height: 5.5rem;                       /* Navigation Hub = 1440×88 */
  display: flex;
  align-items: center;
  gap: var(--space-48);               /* logo ↔ nav (spacings/48) */
}
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 1.625rem; width: auto; }
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-24);              /* nav-link gap (spacings/24) */
  font-family: var(--font-sans);
  font-size: 0.875rem;                   /* Nav-Item text 14/21 Medium */
  font-weight: 500;
  color: var(--btn-neutral-text-fg); /* button/neutral/text #585764 */
}
.main-nav a { display: inline-flex; align-items: center; gap: 0.25rem; }
.main-nav a:hover { color: var(--ink); }
.main-nav a.active { color: var(--btn-neutral-text-fg); }  /* design: same colour as others */
/* chevron_down icon (exact SVG) */
.caret {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  color: var(--gray-900);                 /* chevron_down sprite, currentColor */
  transition: transform .15s ease;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-24);              /* CTA cluster spacing = 24px (matches live) */
}
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  display: inline-flex;
  border-radius: 0.5rem;
}
.icon-btn:hover { background: #f3f3f5; }
/* Header buttons — Text/Outline/Fill variants, all px-12 py-8, 14px Medium */
.header-actions .btn { padding: 0.5rem 0.75rem; }
.link-btn {                               /* Sign in — button/primary/text */
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--btn-text-fg);              /* #513dd9 */
  padding: 0.5rem 0.75rem;
}

/* ============ Hero ============ */
/* Live sendible.com/pricing uses a 1344px content container for the pricing
section (cards 256px + 16px gap = 5×256 + 4×16). The header keeps its
narrower container, matching the live site's intentional offset. */
/* ============ Modules (HubSpot-style: each section is a full-width band
with its own background; content is centred by .module-inner) ============ */
main { width: 100%; margin: 0; }
.module { width: 100%; }
.module-inner { width: min(84rem, 100% - 4rem); margin: 0 auto; }
.module-plans { background: var(--gray-0); padding-bottom: var(--space-48); }   /* #fafafa */
.module-faq { background: var(--brand-light); }                                 /* #fff */

.hero { padding: 3rem 0 0; }            /* header(88) → section.module.module-plans h1 = 48px */
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
section.module.module-plans h1 {                                       /* Base/48 - Display 3 */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--type-display48-wt);   /* 500 (Medium) */
  font-size: var(--type-display48-size);   /* 48px */
  line-height: var(--type-display48-lh);   /* 50.4px */
  letter-spacing: var(--type-display48-ls);/* -1px */
  color: var(--gray-900);                  /* #1c1c1c */
}
section.module.module-plans h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Billing toggle — Monthly/Yearly Toggle component */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--purple-0);             /* purple/0 #f9f7ff */
  border-radius: var(--size-32);           /* sizes/32 = 32px */
  padding: var(--space-4) var(--space-6);  /* 4px 6px */
}
.period {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 2.875rem;
  padding: 0 1.3125rem;                         /* Yearly tab px-21 */
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;                        /* Medium */
  font-size: 1rem;
  letter-spacing: -0.01875rem;
  color: var(--gray-500);                  /* inactive #737373 */
  border-radius: var(--size-32);
}
.period[data-period="monthly"] { padding: 0 var(--space-48); } /* Monthly tab px-48 */
.period.active {
  background: var(--brand-light);          /* #fff */
  color: var(--gray-900);                  /* #1c1c1c */
  box-shadow: 0 0.125rem 0.25rem 0 rgba(49, 49, 49, .15), 0 1px 0.125rem 0 rgba(49, 49, 49, .15);
}
.save-pill {
  background: var(--purple-700);           /* #3f32a1 */
  color: var(--purple-0);                  /* #f9f7ff */
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--size-32);
  white-space: nowrap;                     /* keep "Save 15%" on one line (matches live) */
}

/* check-points — Sans/14 Regular #1c1c1c, 16px check icon, 8px item gap */
.checkpoints {
  margin-top: var(--space-24);          /* section.module.module-plans h1 → checkpoints = 24px */
  display: flex;
  gap: 0.75rem;                            /* between each checkpoint */
  flex-wrap: wrap;
  font-size: 0.875rem;
  line-height: 1.0875rem;
  letter-spacing: -0.007294rem;
  color: var(--gray-900);               /* #1c1c1c */
}
.checkpoints li { display: inline-flex; align-items: center; gap: var(--space-8); }
/* check sprite — 16px, #513DD9 */
.checkpoints .tick {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--brand-strong);            /* #513dd9 */
}

/* Currency row — own row, right-aligned, ~16px above the cards */
.currency-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0.rem;                    /* checkpoints → currency */
  margin-bottom: 0;
  padding-bottom: 0.5rem;                  /* currency → cards */
}
/* Currency Switch component — Base/12-Small, all Regular */
.currency-switch { display: inline-flex; gap: var(--space-12); align-items: center; }
.cur {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);                 /* flag ↔ label */
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.0875rem;
  letter-spacing: -0.00625rem;
  color: var(--gray-400);              /* inactive #8f8f8f */
  padding: 0;
}
.cur.active { color: var(--neutral-900); }  /* active #1b1b20 */
/* flags: 12px circular; greyscale + dimmed when not selected (matches live) */
.cur .flag {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex: none;
  filter: grayscale(1);
  opacity: 0.8;
}
.cur.active .flag { filter: none; opacity: 1; }

/* ============ Plans ============ */
.plans {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  align-items: stretch;   /* all cards equal height (= tallest); slack falls at bottom */
}
/* 3-plan scenario: SOLO, PLUS, ENTERPRISE — fill the full width, TEAM & PRO hidden */
.plans.three-plans {
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;                 /* wider gutter → narrower cards in the 3-plan layout */
}
.plans.three-plans .plan:nth-child(2),
.plans.three-plans .plan:nth-child(4) { display: none; }

/* ============================================================
CONTENT MANAGER — live editor drawer (demo tool)
Font: Lexend Deca, scoped to the manager only (page stays IBM Plex).
============================================================ */
:root { --cm-font: "Lexend Deca", system-ui, -apple-system, sans-serif; }
.cm-fab {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--neutral-900);          /* #1b1b20 */
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0.625rem 1rem;
  border-radius: 62.4375rem;
  box-shadow: 0 0.5rem 1.5rem rgba(16, 16, 24, .25);
  font-family: var(--cm-font);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: transform .12s ease, opacity .12s ease;
}
.cm-fab:hover { transform: translateY(-0.0625rem); }
.cm-fab svg { display: block; }
body.cm-open .cm-fab { opacity: 0; pointer-events: none; }

.cm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 320;
  width: 22.5rem;
  max-width: 92vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #eef1f6;                      /* HubSpot-style editor canvas */
  border-left: 1px solid #d6dbe3;
  box-shadow: -0.625rem 0 2.5rem rgba(16, 16, 24, .14);
  font-family: var(--cm-font);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
body.cm-open .cm-drawer { transform: translateX(0); }

.cm-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.125rem;
  background: #fff;
  border-bottom: 1px solid #d6dbe3;
}
.cm-title { font-size: 0.9375rem; font-weight: 600; color: #33475b; }
.cm-close {
  border: none;
  background: transparent;
  font-size: 1.375rem;
  line-height: 1;
  color: #7c98b6;
  cursor: pointer;
  padding: 0 0.25rem;
}
.cm-close:hover { color: #33475b; }

.cm-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem; }

/* collapsible group */
.cm-group {
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 0.375rem;
  margin-bottom: 0.625rem;
  overflow: hidden;
}
.cm-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border: none;
  background: #f5f8fa;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #33475b;
  border-bottom: 1px solid #dfe3eb;
}
.cm-group-head.cm-accent { color: #00a4bd; }
.cm-chev { display: inline-flex; align-items: center; justify-content: center; color: #00a4bd; transition: transform .15s ease; transform: rotate(180deg); }
.cm-chev svg { display: block; width: 1rem; height: 1rem; }
.cm-group.collapsed .cm-group-head { border-bottom-color: transparent; }
.cm-group.collapsed .cm-chev { transform: rotate(0deg); }
.cm-group.collapsed .cm-group-body { display: none; }
.cm-group-body { padding: 1rem; background: #eaeef3; }

/* nested per-plan subgroup */
.cm-subgroup { margin: 0 0 0.5rem; border-color: #e1e6ee; }
.cm-subgroup > .cm-group-head { background: #fff; font-weight: 500; color: #33475b; }
.cm-subgroup > .cm-group-body { background: #f7f9fc; }

.cm-field { margin-bottom: 0.875rem; }
.cm-field:last-child { margin-bottom: 0; }
.cm-field-inline { display: flex; align-items: center; justify-content: space-between; }
.cm-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #33475b;
}
.cm-field-inline .cm-label { margin-bottom: 0; }
.cm-hint { margin: 0.375rem 0 0; font-size: 0.71875rem; color: #7c98b6; }

.cm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: #33475b;
  background: #fff;
  border: 1px solid #cbd6e2;
  border-radius: 0.1875rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cm-input:focus {
  outline: none;
  border-color: #7fd1de;
  box-shadow: 0 0 0 0.125rem rgba(0, 164, 189, .18);
}
.cm-textarea { resize: vertical; min-height: 3.5rem; line-height: 1.45; }
.cm-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 2.125rem;                       /* room for the chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2300a4bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;     /* 12px padding from the right edge */
}

.cm-subhead {
  margin: 1.125rem 0 0.625rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e1e6ee;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7c98b6;
}

/* labelled list: header row (label + "+ Add") above a bordered list */
.cm-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.cm-listhead .cm-label { margin-bottom: 0; }

/* repeatable list — bordered container, rows separated by borders (table-like) */
.cm-list {
  border: 1px solid #cbd6e2;
  border-radius: 0.25rem;
  background: #fff;
  overflow: hidden;
}
.cm-list-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #fff;
  border-bottom: 1px solid #dfe5eb;
}
.cm-list-row:last-child { border-bottom: none; }
.cm-list-row .cm-input { flex: 1 1 auto; border: none; padding: 0.25rem 0.125rem; }
.cm-list-row .cm-input:focus { box-shadow: none; }
.cm-handle { color: #b0bcca; cursor: grab; font-size: 0.8125rem; user-select: none; letter-spacing: -0.125rem; }
.cm-del {
  flex: 0 0 auto;
  width: 1.625rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: #b0bcca;
  border-radius: 0.1875rem;
  cursor: pointer;
  font-size: 1.0625rem;
  line-height: 1;
}
.cm-del:hover { color: #d94c4c; }
.cm-add {
  border: none;
  background: transparent;
  color: #00a4bd;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.cm-add:hover { text-decoration: underline; }
/* the checklist "+ Add" sits inside the list — give it proper left padding so it
lines up with the items above instead of hugging the container edge */
.cm-list > .cm-add { padding: 0.25rem 0.75rem 0.5rem; }

/* number input with a teal up/down stepper (HubSpot style) */
.cm-num { position: relative; }
.cm-num input[type="number"] { -moz-appearance: textfield; padding-right: 2.375rem; }
.cm-num input[type="number"]::-webkit-outer-spin-button,
.cm-num input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cm-num-spin {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 1.875rem;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #cbd6e2;
  overflow: hidden;
  border-radius: 0 0.1875rem 0.1875rem 0;
}
.cm-num-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #fff;
  color: #00a4bd;
  cursor: pointer;
  padding: 0;
}
.cm-num-btn:first-child { border-bottom: 1px solid #cbd6e2; }
.cm-num-btn:hover { background: #f5f8fa; }

/* checklist sub-item — each item is its own bordered sub-section with a New-tag toggle */
.cm-subitem {
  border: 1px solid #dfe5eb;
  border-radius: 0.25rem;
  background: #fff;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.cm-subitem-head { display: flex; align-items: center; gap: 0.375rem; }
.cm-subitem-head .cm-input { flex: 1 1 auto; }
.cm-subitem-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eef2f6;
}
.cm-subitem-label { font-size: 0.78125rem; color: #516f90; }

/* discount editor: Price + Percentage side by side per currency */
.cm-disc-row { display: flex; gap: 0.5rem; }
.cm-disc-row > .cm-field { flex: 1 1 0; }
.cm-disc-body[hidden] { display: none; }

/* segmented control */
.cm-seg {
  display: inline-flex;
  background: #e5eaf0;
  border-radius: 0.25rem;
  padding: 0.125rem;
}
.cm-seg button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.78125rem;
  font-weight: 600;
  color: #5c7080;
  padding: 0.375rem 0.875rem;
  border-radius: 0.1875rem;
  cursor: pointer;
}
.cm-seg button.active { background: #fff; color: #00a4bd; box-shadow: 0 1px 0.125rem rgba(16, 16, 24, .12); }

/* toggle switch */
.cm-toggle { position: relative; display: inline-block; width: 2.375rem; height: 1.375rem; }
.cm-toggle input { opacity: 0; width: 0; height: 0; }
.cm-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd6e2;
  border-radius: 62.4375rem;
  transition: background .14s ease;
}
.cm-toggle-slider::before {
  content: "";
  position: absolute;
  top: 0.125rem; left: 0.125rem;
  width: 1.125rem; height: 1.125rem;
  background: #fff;
  border-radius: 50%;
  transition: transform .14s ease;
}
.cm-toggle input:checked + .cm-toggle-slider { background: #00a4bd; }
.cm-toggle input:checked + .cm-toggle-slider::before { transform: translateX(1rem); }

/* plan list (Pricing Plan Item) — bordered container, rows split by borders */
.cm-planlist {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #cbd6e2;
  border-radius: 0.25rem;
  overflow: hidden;
}
.cm-plan-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: #fff;
  border-bottom: 1px solid #dfe5eb;
}
.cm-plan-row:last-child { border-bottom: none; }
.cm-plan-row .cm-handle { padding: 0 0.125rem 0 0.75rem; letter-spacing: -0.125rem; }
.cm-plan-open {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84375rem;
  color: #33475b;
  padding: 0.75rem 0.75rem 0.75rem 0.25rem;
}
.cm-plan-open:hover { color: #00a4bd; }
.cm-row-chev { color: #b0bcca; font-size: 1.125rem; line-height: 1; }
.cm-plan-open:hover .cm-row-chev { color: #00a4bd; }

/* drag state */
.cm-handle { cursor: grab; }
.cm-list-row.cm-dragging,
.cm-plan-row.cm-dragging { opacity: .5; outline: 1px dashed #7fd1de; }

/* drill-in detail view — slides over the whole drawer */
.cm-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #eef1f6;
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.cm-drawer.cm-detail-open .cm-detail { transform: translateX(0); }
.cm-detail-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border-bottom: 1px solid #d6dbe3;
}
.cm-back {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #00a4bd;
  padding: 0.25rem 0.375rem;
  border-radius: 0.1875rem;
}
.cm-back:hover { background: #f0f6f8; }
.cm-back-arrow { font-size: 1rem; }
.cm-detail-title {
  flex: 1 1 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: #33475b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* pager — Previous / N of M / Next (HubSpot drill-in pattern) */
.cm-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: #fff;
  border-bottom: 1px solid #d6dbe3;
}
.cm-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #00a4bd;
  padding: 0;
}
.cm-pager-btn:hover:not(:disabled) { text-decoration: underline; }
.cm-pager-btn:disabled { color: #b8c4d0; cursor: default; }
.cm-pager-arrow { font-size: 1rem; line-height: 1; }
.cm-pager-count { font-size: 0.8125rem; font-weight: 600; color: #5c7080; }

.cm-detail-body { flex: 1 1 auto; overflow-y: auto; padding: 0.875rem; }
.cm-detail-top {
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 0.375rem;
  padding: 0.875rem;
  margin-bottom: 0.625rem;
}
.cm-detail-top .cm-field:last-child { margin-bottom: 0; }

/* accordion sections inside the plan detail */
.cm-acc { margin-bottom: 0.5rem; }
.cm-acc > .cm-group-head { font-size: 0.8125rem; }
.plan {
  position: relative;
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  /* height auto — the grid stretches all cards to the tallest; slack falls before Add-ons */
  background: var(--brand-light);
  border: 1px solid var(--surface-2);      /* surface/surface-2 #dad9dd */
  border-radius: var(--size-8);            /* sizes/8 = 8px */
}

.plan-featured {
  background: var(--coral-0);              /* coral/0 #fff6f4 */
  border: 1px solid var(--coral-300);      /* coral/300 #fe8d77 */
  box-shadow: var(--shadow-card);          /* visually derived */
}
/* "Most popular" badge (Discount node) */
.popular-badge {
  position: absolute;
  top: -0.6875rem;                              /* badge straddles top border */
  left: 50%;
  transform: translateX(-50%);
  background: #ffb7a8;                      /* rgba(255,183,168,1) */
  color: var(--coral-800);                 /* #690d00 */
  font-size: 0.75rem;
  font-weight: 400;                        /* Regular */
  line-height: 1.125rem;
  padding: var(--space-2) var(--space-6);  /* 2px 6px */
  border-radius: var(--size-4);            /* sizes/4 = 4px */
  white-space: nowrap;
}

.plan-head { min-height: 4.0625rem; }
.plan-name {                               /* Sans/14 Regular */
  margin: 0 0 var(--space-8);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3125rem;
  color: var(--gray-900);                  /* #1c1c1c */
}
.plan-desc {                               /* Sans/12 Regular */
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--gray-500);                  /* #737373 */
}

.price { margin: 1rem 0 0.25rem; display: flex; align-items: flex-end; }  /* desc → price = 16px */
.price .amount {                           /* IBM Plex Sans Medium */
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.05625rem;
  line-height: 2.8125rem;
  color: var(--gray-900);                  /* #1c1c1c */
}
.price .per {                              /* Sans/16 Regular */
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--gray-900);                  /* #1c1c1c */
}

.switch-note {                             /* Sans/12 Regular */
  margin: 0;                                /* gap to the stepper is owned by .ws-usage (16px) */
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: var(--gray-500);                  /* #737373 */
}

/* ===== Discount: original (strikethrough) price + percentage ===== */
.price-orig { color: #de2600; text-decoration: line-through; }   /* coral/500 */
.price-pct { color: var(--gray-500); }                            /* #737373 */
/* Top: a row above the price showing "$29 (-35%)" */
.price-disc-top {
  display: flex; align-items: center; gap: var(--space-8);
  margin: 1rem 0 0;
  font-size: 0.875rem; line-height: 1.3125rem;
}
.price-disc-top + .price { margin-top: 0.125rem; }    /* price sits tight under the discount row */
/* Left: a small strikethrough sits inline, left of the amount (bottom-aligned) */
.price-orig-left {
  align-self: flex-end;
  margin: 0 var(--space-8) 0.5rem 0;
  font-size: 1rem; line-height: 1.5rem; font-weight: 400;
}

/* CTA sits below the usage/stepper section; 16px above, 16px down to the divider */
.plan-cta { width: 100%; margin: 1rem 0 0; padding: 0.5rem 2rem; }  /* py8 px32 */

/* ===== Workspace & social-profile section (Figma 2889:233657) =====
Stepper on the left, inline with the "workspaces" label; "N social profiles"
sits on the line below. No framing dividers. */
.ws-usage {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);            /* stepper → labels = 8px */
  margin: 1.25rem 0 0;               /* gap from switch-note */
}

/* ===== Usage lines (workspaces / profiles) — dashed-underline labels ===== */
.usage { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.usage li {                                  /* Sans-Medium/14 */
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3125rem;
  color: var(--gray-900);
}

/* features fill the remaining height so Add-ons (when present) pins to the bottom.
A single full-bleed divider sits above them (below the CTA). */
.features {
  display: flex; flex-direction: column; gap: var(--space-12); flex: 1 1 auto;
  margin: 1rem calc(-1 * var(--space-16)) 0;       /* full-bleed divider */
  padding: var(--space-24) var(--space-16) 0;
  border-top: 1px solid var(--surface-2);
}
.plan-featured .features { border-top-color: rgba(254, 141, 119, .35); }
.features li {                             /* Sans/14 */
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--gray-900);                  /* #1c1c1c */
}
/* dashed underline + hover target sit on just the label text */
.has-tip .feat-label {
  text-decoration: underline dashed;
  text-decoration-color: var(--gray-200);  /* #c7c7c7 */
  text-underline-offset: 0.1875rem;
  cursor: help;
  transition: text-decoration-color .12s ease;
}
.has-tip .feat-label:hover { text-decoration-color: var(--gray-900); }  /* #1c1c1c */
/* check sprite — 14px, #1c1c1c */
.features .check {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  color: var(--gray-900);
}
/* reply arrow icon — exact SVG from Figma */
.features .arrow {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.25065 8.16683L2.33398 5.25016L5.25065 2.3335' stroke='%231C1C1C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.6673 11.6667V7.58333C11.6673 6.96449 11.4215 6.371 10.9839 5.93342C10.5463 5.49583 9.95282 5.25 9.33398 5.25H2.33398' stroke='%23201E24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 0.875rem 0.875rem;
}
.features .inherit { color: var(--gray-900); text-decoration: none; }  /* #1c1c1c, no underline */
.features .inherit strong { font-weight: 500; }                         /* plan name (Solo/Team/…) */
.features .plus-icon {                       /* + before "Everything in…" (plus sprite) */
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  color: var(--gray-900);
}
/* Option 2 checklist: "Unlimited users" people icon (users sprite) */
.features .users-icon {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 1px;
  color: var(--gray-900);
}
/* 24px between "Unlimited users" and the next section (Figma: 12px gap + 12px).
Applies on every plan, whether the next row is the inherit label or a feature. */
.features-alt .feat-users { margin-bottom: var(--space-12); }

/* "New" tag pill on a checklist item (Figma: green/50 bg, green/700 text) */
.feat-tag {
  flex: none;
  display: inline-block;
  margin-left: var(--space-6);
  padding: 0.125rem 0.5rem;
  border-radius: 0.75rem;
  background: #d7f7c2;                      /* colors/palette/green/50 */
  color: #0b5019;                          /* colors/palette/green/700 */
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ===== Hover tooltips on usage items (Glide-style, no info icon) ===== */
.features li.has-tip { position: relative; }
/* dark tooltip — appended to <body> (escapes the scroll box + its mask), JS-positioned */
.feature-tip {
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: 17.5rem;
  background: var(--gray-900);             /* #1c1c1c */
  color: var(--gray-0);                    /* #fafafa */
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.1875rem;
  letter-spacing: 0;
  text-decoration: none;
  text-align: left;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  box-shadow: 0 0.625rem 1.875rem rgba(16, 16, 24, .22);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.feature-tip strong { font-weight: 500; color: #fff; }
.feature-tip.show { opacity: 1; visibility: visible; }

/* close (✕) control — hidden on hover-capable desktops, shown in tap mode.
pointer-events:auto re-enables clicks even though the tip itself is none. */
.feature-tip-close {
  display: none;
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--gray-0);                    /* #fafafa */
  cursor: pointer;
  pointer-events: auto;
}
.feature-tip-close:hover { background: rgba(255, 255, 255, .2); }
@media (max-width: 45rem), (hover: none) {
  .feature-tip { padding-right: 2.375rem; }    /* room for the ✕ */
  .feature-tip-close { display: flex; }
}

/* Add-ons row — chip text is Sans-Medium/12 #1c1c1c, chevron 14px.
Divider above is edge-to-edge (not part of the chip component spec). */
/* ===== Add-ons dropdown ===== */
/* ===== Add-ons — static block at the bottom (no longer an accordion) ===== */
.addons-block {
  margin: 1rem 0 0;
  padding: 0.75rem 0.625rem;                      /* Figma py-12 px-10 */
  background: var(--gray-0);               /* #fafafa rounded panel */
  border-radius: var(--size-6);            /* 6px */
}
.plan-featured .addons-block { background: #ffe9e5; }   /* coral/50 on the featured card */
.addons-title {                            /* Sans-Medium/12 #1c1c1c */
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.125rem;
  color: var(--gray-900);
}
.addon-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.addon-item { display: flex; align-items: center; gap: 0.375rem; }
.addon-label {                             /* Sans/14, dashed underline */
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: var(--gray-900);                  /* #1c1c1c */
  border-bottom: 1px dashed var(--gray-200);  /* #c7c7c7 */
  cursor: help;
  transition: border-bottom-color .12s ease;
}
.addon-label:hover { border-bottom-color: var(--gray-900); }  /* #1c1c1c */

/* ===== "What's included" accordion =====
Desktop: the wrapper is transparent (checklist + add-ons flow normally) and the
toggle is hidden. Mobile (≤720px) turns it into a collapsible footer accordion. */
.plan-included,
.plan-included-inner { display: contents; }
.plan-included-toggle { display: none; }

/* shared pill (button/neutral/outlined) — DEFAULT: #fafafa bg + #58576433 border */
.addon-add,
.stepper {
  flex: none;
  width: 4.375rem;
  height: 1.5rem;
  background-color: var(--btn-neutral-outlined-bg);       /* #fafafa */
  border: 1px solid var(--btn-neutral-outlined-border);   /* #58576433 */
  border-radius: 3rem;
  box-sizing: border-box;
  transition: background-color .12s ease, border-color .12s ease;
}
/* + add button — HOVER: darker fill (gray/50) */
.addon-add:hover { background-color: var(--gray-50); }    /* #eee */
/* + add button — CLICKED/ADDED: purple inverse + checkmark, no border */
.addon-add.added {
  background-color: rgba(81, 61, 217, .1);                /* button/primary/inverse */
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2L4.8 8.6L9.5 3.6' stroke='%23513DD9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* "+" add button — exact 12px plus icon */
.addon-add {
  padding: 0;
  font-size: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 2.5V9.5M2.5 6H9.5' stroke='%231B1B20' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem 0.75rem;
}

/* stepper: (−) N (+) — two standalone circles + counter, no pill wrapper */
.stepper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  width: auto;                    /* override the shared pill width */
  height: 1.25rem;
  background: none;               /* override pill fill */
  border: none;                   /* override pill border */
  border-radius: 0;
  padding: 0;
}
.stepper .step {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200);             /* #c7c7c7 circle outline */
  border-radius: 50%;
  background-color: var(--btn-neutral-outlined-bg);  /* #fafafa fill */
  color: var(--neutral-900);                     /* plus/minus sprite icon — #1b1b20 */
  cursor: pointer;
  padding: 0;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.stepper .step .step-icon { width: 0.75rem; height: 0.75rem; display: block; }
.stepper .step:hover { background-color: var(--gray-50); }  /* gray #eee filled circle */
/* at the included (minimum) count the minus is disabled — grey just the icon, keep the fill */
.stepper .step:disabled { cursor: default; color: var(--gray-200); }   /* icon greys to #c7c7c7 */
.stepper .step:disabled:hover { background-color: var(--btn-neutral-outlined-bg); }
.stepper .num {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 0.9375rem;
  color: var(--gray-900);
}

/* ============ Tailored band (Frame 11198) ============ */
.tailored {
  margin-top: 1.5rem;
  border: 1px solid var(--surface-2);      /* #dad9dd */
  border-radius: var(--size-8);            /* 8px */
  background: var(--brand-light);
  padding: var(--space-24) 2.5rem;           /* py 24, px 40 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.tailored h3 {                             /* Sans-Medium/24 */
  margin: 0 0 var(--space-16);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.875rem;
  letter-spacing: -0.0375rem;
  color: var(--neutral-900);               /* #1b1b20 */
}
.tailored p {                              /* Sans/16 */
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--neutral-900);               /* #1b1b20 */
  max-width: 54.875rem;
}
.tailored .btn { padding: 0.5rem 0.75rem; }      /* Book a demo wrapper px-12 py-8 */

/* ================= BELOW THE FOLD ================= */

/* ---- Supported networks band ---- */
.supported {
  margin: 0;                                              /* flush module */
  padding: 3.5rem max(2rem, calc((100vw - 84rem) / 2));   /* live: 56px 32px band */
  background: #f2ebff;                                     /* live band bg */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.supported-label { font-size: 1.375rem; font-weight: 500; line-height: 1.65rem; letter-spacing: -0.008125rem; color: var(--brand-dark); }  /* live: 22px/500 #201e24 */
.net-icons { display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.net {
  width: 1.875rem; height: 1.875rem;
  display: flex; align-items: center; justify-content: center;
}
.net img { width: 1.875rem; height: 1.875rem; display: block; }
.net-icon { width: 1.875rem; height: 1.875rem; display: block; }
.net-mono { color: var(--brand-dark); }   /* X / WordPress / Threads — monochrome, #201e24 */

/* ---- Features breakdown ---- */
/* full-bleed white band (matches live), content centred to the 1344 container */
.breakdown {
  --bd-pad: max(2rem, calc((100vw - 84rem) / 2));
  margin: 0;                                /* flush module */
  padding: 3.5rem var(--bd-pad);
  background: var(--brand-light);
  box-sizing: border-box;
}
.breakdown-title { font-size: 2.625rem; font-weight: 500; letter-spacing: -0.083125rem; line-height: 1.06; margin: 0 0 2.5rem; color: var(--ink); }
.breakdown-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.bd-table { font-family: var(--font-sans); background: var(--brand-light); }  /* white — matches live */
.bd-head {
  position: sticky; top: 0; z-index: 30;
  background: #fff;
  /* full-bleed: the pinned bar spans the viewport edge-to-edge, while the inner
  grid is pushed back by the same padding so columns still line up with rows */
  margin: 0 calc(-1 * var(--bd-pad));
  /* padding-top gives the "Most popular" badge room so it isn't clipped when pinned */
  padding: 1.25rem var(--bd-pad) 0;
  display: grid;
  grid-template-columns: minmax(17.5rem, 2.5fr) repeat(5, 1fr);  /* label 1/3, plans 2/3 (live) */
  align-items: end;
  /* no padding-bottom: lets the featured-column tint run straight into the body */
  border-bottom: 1px solid var(--surface-2);
}
.bd-controls {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  align-self: end;            /* sit at the bottom, aligned with the plan prices/CTAs */
  padding-bottom: 1rem;
}
/* don't stretch the toggle to the full column — keeps "Yearly Save 15%" on one line */
.bd-controls .billing-toggle { width: auto; }
.bd-controls .period { white-space: nowrap; }
.bd-controls .currency-switch { gap: var(--space-12); }
.bd-plans { display: contents; }
/* Plan header cell — Figma node 1585:39948 (FD Plan): py-16 px-22, gaps 8/16 */
.bd-plan { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; padding: 1rem 1.375rem; }
.bd-plan-featured { background: var(--coral-0); border-radius: 0.5rem 0.5rem 0 0; }
.bd-badge {
  position: absolute; top: -0.625rem; left: 50%; transform: translateX(-50%);
  background: #ffb7a8; color: var(--coral-800); font-size: 0.6875rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; white-space: nowrap;
}
.bd-name { font-size: 0.75rem; font-weight: 400; line-height: 1.125rem; color: var(--gray-900); }   /* #1c1c1c, Regular */
/* "$35/mo" is one unit, centred as a block with the name and billed monthly */
.bd-price { display: flex; justify-content: center; align-items: flex-end; gap: 0.125rem; margin-top: var(--space-8); }
.bd-amount { font-size: 1.5rem; line-height: 1.875rem; font-weight: 500; letter-spacing: -0.0375rem; color: var(--gray-900); }
.bd-per { font-size: 0.75rem; line-height: 1.125rem; color: var(--gray-900); }                          /* #1c1c1c (dark) */
.bd-billed {font-size: 0.75rem;line-height: 1.125rem;color: #737373;}                       /* #737373 */
.bd-cta { width: 7.1875rem; margin-top: var(--space-16); padding: 0.375rem 0.5rem; font-size: 0.75rem; }        /* price → cta: 16px */

/* category subheaders + feature rows (same grid as header) */
.bd-cat, .bd-row {
  display: grid;
  grid-template-columns: minmax(17.5rem, 2.5fr) repeat(5, 1fr);  /* label 1/3, plans 2/3 (live) */
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.bd-cat { border-bottom: 0.09375rem solid var(--brand-dark); }   /* dark divider under each category */
.bd-cat .bd-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 1rem; letter-spacing: -0.00625rem; color: var(--neutral-900); padding: 1rem 0; }
.bd-cat-icon { display: inline-flex; align-items: center; }
.bd-cat-svg { width: 1.25rem; height: 1.25rem; display: block; color: var(--brand-strong); }  /* #513dd9 */
.bd-label { font-size: 1rem; font-weight: 400; color: var(--neutral-900); padding: 0.75rem 1rem; }
.bd-cell {
  text-align: center; font-size: 1rem; font-weight: 500; color: var(--neutral-900);
  padding: 0.75rem 0.375rem; align-self: stretch; display: flex; align-items: center; justify-content: center;
}
.bd-cell.featured, .bd-cat .featured { background: var(--coral-0); }  /* live featured-column tint */
.bd-check { width: 1rem; height: 1rem; color: var(--brand-strong); }   /* check sprite, #513dd9 */
.bd-cell .bd-na { color: var(--gray-300); }

/* feature-row accordion — each row's label opens a description */
.bd-label-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  cursor: pointer;
  user-select: none;
}
.bd-label-toggle:focus-visible { outline: 0.125rem solid var(--brand); outline-offset: -0.125rem; border-radius: 0.25rem; }
.bd-row-head { display: inline-flex; align-items: center; gap: 0.5rem; transition: color .12s ease; }
.bd-label-toggle:hover .bd-row-head { color: var(--brand-strong); }
.bd-row-chev {
  flex: none;
  width: 1rem; height: 1rem;
  color: var(--brand-dark);                /* chevron_down sprite, #201e24 */
  transition: transform .18s ease;
}
.bd-row.open .bd-row-chev { transform: rotate(90deg); }   /* right chevron → points down when open */
/* smooth open/close: animate the true height via grid-template-rows (0fr→1fr) */
.bd-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.bd-desc > p { overflow: hidden; min-height: 0; margin: 0; padding-top: 0.5rem; font-size: 0.875rem; line-height: 1.3125rem; color: var(--gray-600); max-width: 52ch; }
.bd-row.open .bd-desc { grid-template-rows: 1fr; }
/* live behaviour: cells stay vertically centred, so checks re-center (move down) as a row opens */
.feature-tip p {
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.1875rem;
  margin: 0;
}


/* ---- Social proof — Figma 2422:102966 (centered stack on a #f2ebff band) ---- */
.social-proof {
  margin: 0;                                           /* flush module */
  background: #f2ebff;                                  /* purple/50 band */
  padding: 3.5rem max(2rem, calc((100vw - 84rem) / 2)) 4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.sp-text {
  font-size: 1.5rem; line-height: 1.875rem; font-weight: 500; letter-spacing: -0.0375rem;
  color: var(--neutral-900); text-align: center; max-width: 66rem; margin: 0;
}
.sp-logos {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 5rem; list-style: none; margin: 0; padding: 0;
}
.sp-logos li { display: inline-flex; align-items: center; }
.sp-logos img { display: block; }                      /* natural size, as in the design */
.sp-link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--brand-strong); font-size: 1rem; font-weight: 500; line-height: 1rem;
  text-decoration: none;
}
.sp-link .sp-arrow { display: block; transition: transform .15s ease; }
.sp-link:hover .sp-arrow { transform: translateX(0.1875rem); }

/* ---- FAQ — Figma node 2897:237717 (heading left, accordion list right) ---- */
.module-faq { padding: 5.5rem 0 1.5rem; }
.faq { display: flex; align-items: flex-start; gap: var(--space-16); max-width: 71rem; margin: 0 auto; }
.faq-title { flex: 0 0 32.625rem; width: 32.625rem; font-size: 3rem; font-weight: 500; letter-spacing: -0.0625rem; line-height: 3.125rem; margin: 0; color: var(--neutral-900); }
.faq-title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.faq-grid { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-16); }
.faq-item { background: var(--brand-light); border: 1px solid #EEEEEE; border-radius: var(--size-8); padding: var(--space-16); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: var(--neutral-900);
  padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  transition: color .12s ease;
}
.faq-q:hover { color: var(--brand-strong); }
.faq-q-text { flex: 1 1 auto; }
.faq-chev {                                       /* right chevron → rotates down when open */
  flex: none; width: 1.5rem; height: 1.5rem;
  color: var(--gray-900);                         /* #1c1c1c */
  transition: transform .18s ease;
}
.faq-item.open .faq-chev { transform: rotate(90deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 25rem; }
.faq-a p { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.3125rem; color: var(--gray-600); }

/* ============ Responsive ============ */
@media (max-width: 67.5rem) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  section.module.module-plans h1 { font-size: 2.375rem; line-height: 1.05; }
  /* narrower cards wrap taller — let them grow instead of scrolling */
  .plan { height: auto; }
  .feature-group { overflow: visible; }
  /* FAQ stacks: heading above the list */
  .faq { flex-direction: column; gap: 2rem; }
  .faq-title { flex: none; width: auto; }
  section.module.module-plans section.tailored { padding: var(--space-16); }
}
/* No mobile frame exists in the Figma design (desktop-only, 1440).
Breakpoints below are a sensible responsive layer, not from the design. */
@media (max-width: 45rem) {
  .header-inner { gap: var(--space-16); }
  .main-nav,
  .icon-btn,
  .link-btn,
  .btn-outline { display: none; }              /* keep logo + primary CTA only */
  .plans { grid-template-columns: 1fr; }
  .hero-top, .tailored { flex-direction: column; align-items: flex-start; }
  .plans.three-plans {
    grid-template-columns: 1fr;
  }
  /* tailored band becomes a card matching the plans: 16px padding, full-width CTA */
  .tailored { padding: var(--space-16); gap: var(--space-16); }
  .tailored .btn { width: 100%; padding: 0.5rem 2rem; }
  /* hero trust badges + currency switch are hidden on mobile (currency moves into
  the plan area in the mobile design) */
  .checkpoints,
  .currency-row { display: none; }
  /* …so restore the gap between the billing toggle and the first plan card */
  .plans { margin-top: var(--space-32, 2rem); }
  /* toggle fills the content column; the Monthly tab's desktop px-48 is trimmed so
  the two tabs share the width without overflowing (Yearly stays a touch wider
  for its pill) */
  .billing-toggle { display: flex; width: 100%; }
  .billing-toggle .period { flex: 1 1 auto; justify-content: center; }
  .billing-toggle .period[data-period="monthly"] { padding: 0 1.3125rem; }

  /* ===== Plan cards: full-width stacked, checklist behind a "What's included"
  accordion pinned to the card bottom (Figma 2915-338927 / 2915-339107). ===== */
  .plan { padding-bottom: 0; }
  .plan-desc, .switch-note { font-size: 0.875rem; line-height: 1.3125rem; }
  /* the "Most popular" badge overhangs the card top by ~10px; push the featured
  card down so the gap above the badge matches the 16px between other cards */
  .plan-featured { margin-top: 0.625rem; }

  /* collapsible region (checklist + add-ons), full-bleed to the card edges */
  .plan-included {
    display: grid;
    grid-template-rows: 0fr;
    margin: 1rem calc(-1 * var(--space-16)) 0;   /* 16px gap below the CTA */
    transition: grid-template-rows .3s ease;
  }
  .plan.is-open .plan-included { grid-template-rows: 1fr; }
  .plan-included-inner { display: block; overflow: hidden; min-height: 0; }

  /* checklist → bordered 38px rows, content inset 16px to align with the header */
  .plan-included .features {
    margin: 0; padding: 0; gap: 0; flex: none;
    border-top: 1px solid #dadada;               /* divider under the CTA when open */
  }
  .plan-featured .plan-included .features { border-top-color: #dadada; }
  .plan-included .features li {
    min-height: 2.375rem; align-items: center; gap: var(--space-8);
    margin: 0; padding: 0.5rem var(--space-16);
    line-height: 1.3125rem;
    border-bottom: 1px solid #dadada;
  }
  .plan-included .features-alt .feat-users { margin-bottom: 0; }
  /* avoid a 2px "double line" where the last row's border meets the toggle's
  border-top — only an issue when no Add-ons box sits between them */
  .plan-included-inner:not(:has(.addons-block)) .features li:last-child { border-bottom: 0; }

  /* add-ons box stays inset 16px from the card edge */
  .plan-included .addons-block { margin: 0.75rem var(--space-16) 1rem; }

  /* toggle row — pinned at the bottom of the card, full-bleed */
  .plan-included-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: auto; margin: 0 calc(-1 * var(--space-16)); padding: 0.75rem var(--space-16);
    background: none; border: 0; border-top: 1px solid #dadada;
    font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.3125rem;
    color: var(--gray-900); text-align: left; cursor: pointer;
    height: auto;
    border-radius: 0;
  }
  .plan-inc-chev {
    flex: none; width: 1.5rem; height: 1.5rem; color: var(--gray-900);
    stroke-width: 0.09375rem; transition: transform .25s ease;
  }
  .plan.is-open .plan-inc-chev { transform: rotate(180deg); }
  .pricing-features-popup .feature-row .accordion h3 > span:not(.icon) {
    font-size: 0.85rem;
  }
  .pricing-features-popup .feature-row .accordion h3 .icon {
    margin-left: 0 !important;
  }
}