/* ==========================================================================
   pricing.css - page-specific styles for pages/pricing.html
   Figma frame "Pricing" 398:2762 (1920 x 10467).
   Shared blocks (.accent, .why, .cta, cards, chrome) live in components.css.
   ========================================================================== */

/* ==========================================================================
   Hero
   This page is the exception: its hero is midnight, not the blue gradient
   band every other page opens with. Glows are Ellipse 48/46/76 in Figma.
   ========================================================================== */

.price-hero {
  position: relative;
  padding-top: calc(var(--header-height) + 100px);
  padding-bottom: var(--sp-12);
  background: var(--g-midnight);
  color: var(--c-white);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.price-hero__inner {
  position: relative;
  z-index: var(--z-content);
}

.price-hero__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin-bottom: var(--sp-6);
}

.price-hero__lede {
  /* Figma: Inter Regular 29 / white, 974px wide */
  font-family: var(--ff-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  color: var(--c-white);
  max-width: 974px;
  margin-inline: auto;
}

/* Soft brand glows behind the headline. */
.price-hero__glow {
  position: absolute;
  border-radius: var(--r-circle);
  filter: blur(var(--blur-blob));
}

.price-hero__glow--blue {
  width: 233px; height: 233px;
  top: 242px; left: 117px;
  background: var(--c-blue-a14);
}

.price-hero__glow--pink {
  width: 237px; height: 237px;
  top: 308px; right: 180px;
  background: var(--c-pink-a11);
}

.price-hero__glow--violet {
  width: 242px; height: 242px;
  top: 794px; right: 60px;
  background: rgba(180, 65, 186, 0.2);
}

/* The dotted grid in the top-left corner. */
.price-hero__dots {
  position: absolute;
  top: 214px;
  left: 58px;
  width: 144px;
  height: 144px;
  background-image: radial-gradient(var(--c-white-a46) 2px, transparent 2px);
  background-size: 18px 18px;
  opacity: 0.65;
}

/* ---------- Trust chips ---------------------------------------------------- */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-10) 0 0;
  padding: 0;
  list-style: none;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-target);
  padding-inline: var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-white);
}

/* Tick drawn in CSS so the chips need no image. */
.trust-chip::before {
  content: "";
  width: 7px;
  height: 12px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) translateY(-2px);
}

.trust-chip--green  { background-color: var(--c-green-500); }
.trust-chip--pink   { background-color: var(--c-pink); }
.trust-chip--blue   { background-color: var(--c-blue-600); }
.trust-chip--orange { background-color: var(--c-orange); }

/* ==========================================================================
   Plans
   ========================================================================== */

.plans {
  position: relative;
  padding-bottom: var(--sp-15);
  background: var(--g-midnight);
  color: var(--c-white);
}

/* ---------- Billing toggle -------------------------------------------------- */
.billing {
  display: flex;
  gap: var(--sp-1);
  width: max-content;
  margin: 0 auto var(--sp-12);
  padding: var(--sp-1);
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.08);
  border: var(--bw-hairline) solid var(--c-white-a22);
}

.billing__option {
  min-height: var(--tap-target);
  padding-inline: var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.billing__option:hover {
  background-color: var(--c-white-a10);
}

.billing__option.is-active {
  background-color: var(--c-white);
  color: var(--c-ink-strong);
}

/* ---------- Plan cards ------------------------------------------------------ */
/* Figma: 414 x 948, r42, 45px column gap; Pro sits in a 424x1011 gradient frame. */
/* The four cards share row tracks via subgrid, so the price, description and
   CTA sit on the same baseline in every card no matter how the copy wraps.
   Without it the paid cards gain a line ("/ user / month" wraps while
   "R0 forever" does not) and their buttons drop ~38px below Free's. */
.plan-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: 31px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier {
  position: relative;
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  height: 100%;
  padding: var(--sp-9) var(--sp-8) var(--sp-8);
  /* every card carries the same 2px border so Pro's gradient frame does not
     make it 2px taller than its neighbours */
  border: var(--bw-base) solid transparent;
  border-radius: 42px;
  background-color: var(--c-white);
  background-clip: padding-box;
  color: var(--c-ink-strong);
}

/* Fallback for engines without subgrid: fixed minimums on the rows that vary. */
@supports not (grid-template-rows: subgrid) {
  .plan-row { grid-template-rows: none; }

  .tier {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .tier__price { min-height: 118px; }
  .tier__desc { min-height: 3.2em; }
}

/* Annual pill on the left, tier name on the right, on one line - but only
   while the card is wide enough for the worst pair. That is ENTERPRISE beside
   "Save R1,668 / year", which the pill shows once annual billing is selected,
   and it needs about 295px. Four columns only give that near the
   1920px design width:

     viewport  1920  1750  1600  1536  1200  1101
     content    334   304   267   251   172   147

   This used to be flex-wrap:wrap, which kept ENTERPRISE inside the card by
   dropping it to a second line - so it sat a line below TEAM and PRO while
   they stayed on the first. Below the threshold every card stacks instead, so
   the four names keep sharing a row and the pills line up underneath. */
.tier__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--sp-3);
  min-height: 34px;
  margin-bottom: var(--sp-7);
}

/* Blue outline pill showing the annual-equivalent price. */
.tier__annual {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: var(--sp-4);
  border: var(--bw-hairline) solid var(--c-blue-600);
  border-radius: var(--r-pill);
  font-family: var(--ff-ui);
  font-size: var(--fs-xs);
  color: var(--c-blue-600);
  white-space: nowrap;
}

.tier__name {
  /* Figma: Inter SemiBold 20 / #04aaf1, uppercase, wide tracking. */
  margin-left: auto;
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-blue-600);
  white-space: nowrap;
}

/* Below the width where the pair fits on one line, the name goes above the
   pill and both sit right. Order, not column-reverse: the Free card has no
   pill, and column-reverse would stack its lone name up from the bottom and
   drop FREE below the other three names. */
@media (max-width: 1820px) {
  .tier__head {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--sp-2);
  }

  .tier__name {
    order: -1;
  }
}

/* Narrower still and even a name on its own line overflows a four-column card
   (147px of content at 1101px), so the pair steps down a size. */
@media (max-width: 1300px) {
  .tier__name {
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
  }

  .tier__annual {
    font-size: var(--fs-2xs);
    padding-inline: var(--sp-3);
  }
}

/* Figma puts the unit on its own line under the amount in every card
   (R0 / forever, R199 / "/ user / month"). Forcing that keeps all four price
   blocks the same height instead of letting the short one stay inline. */
.tier__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.tier__amount {
  /* Figma: Inter SemiBold 70 */
  font-family: var(--ff-body);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
}

.tier__unit {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  color: var(--c-ink-400);
  white-space: nowrap;
}

/* "Billed Annually", under "/ user / month" and only while annual billing is
   selected - main.js empties it on monthly. The height is reserved in both
   states so flipping the toggle does not shift the cards. Brand blue to tie it
   to the savings pill on the same card; note that #04aaf1 on white is one of
   the sub-AA pairings the README already records. */
.tier__billed {
  min-height: 1.5em;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-blue-600);
}

.tier--featured .tier__billed {
  color: var(--c-blue-300);
}

.tier__desc {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-7);
  min-height: 3em;
}

.tier__cta {
  width: 100%;
  align-self: start;
  margin-bottom: var(--sp-7);
  background-color: transparent;
  border-color: var(--c-border);
  color: var(--c-ink-strong);
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
}

.tier__cta:hover {
  border-color: var(--c-blue-600);
  color: var(--c-blue-600);
}

.tier__cta--primary {
  background-color: var(--c-blue-600);
  border-color: var(--c-blue-600);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
}

.tier__cta--primary:hover {
  background-color: var(--c-blue-900);
  border-color: var(--c-blue-900);
  color: var(--c-white);
}

.tier__intro {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-5);
}

.tier__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier__features li {
  position: relative;
  padding-left: var(--sp-7);
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* Green tick before each feature. */
.tier__features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--c-green-500);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ---------- Featured (Pro) -------------------------------------------------- */
.tier--featured {
  background-color: var(--c-dark-slate);
  color: var(--c-white);
  /* the gradient frame from Figma, drawn as a padded border */
  border: var(--bw-base) solid transparent;
  background-image:
    linear-gradient(var(--c-dark-slate), var(--c-dark-slate)),
    var(--g-indigo);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 60px rgba(4, 170, 241, 0.35);
}

.tier--featured .tier__unit { color: var(--c-white); }

.tier--featured .tier__features li::before {
  border-color: var(--c-green-500);
}

.tier__badge {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 var(--sp-8);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background-image: var(--g-indigo);
  font-family: var(--ff-body);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  white-space: nowrap;
}

/* ==========================================================================
   Add-ons
   Figma: 485 x 374 cards, r49; the middle column is nudged down ~69px.
   ========================================================================== */

.addons__title {
  color: var(--c-ink-800);
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Figma: the row is 1529 wide inside the 1748 container, cards 485 + 37 gap */
  max-width: 1529px;
  margin-inline: auto;
  gap: var(--sp-9) 37px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.addon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  height: 100%;
  padding: var(--sp-7) var(--sp-8) var(--sp-8);
  border-radius: 49px;
  background-color: var(--c-white);
  box-shadow: var(--sh-xl);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.addon:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-drop);
}

/* Figma staggers the middle column downwards. */
.addon--offset {
  margin-top: 69px;
}

.addon__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.addon__title {
  /* Figma: Poppins SemiBold 25 */
  font-family: var(--ff-ui);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.addon__body {
  /* Figma: Poppins Light 20 / #7c7c7c, justified */
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-ink-500);
  text-align: justify;
}

/* "Read more" with the trailing rule from the design. */
.addon__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: auto;
  min-height: var(--tap-target);
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--link-ink, var(--c-primary));
}

.addon__link::after {
  content: "";
  width: 46px;
  height: 1px;
  background-color: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}

.addon__link:hover::after {
  width: 64px;
}

.addon__link--green { --link-ink: var(--c-green-400); }
.addon__link--pink  { --link-ink: var(--c-pink); }
.addon__link--blue  { --link-ink: var(--c-blue-600); }

/* ==========================================================================
   Comparison table
   ========================================================================== */

.compare {
  position: relative;
  padding-block: var(--sp-14);
  background: var(--g-midnight);
  color: var(--c-white);
}

.compare__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  text-align: center;
  margin-bottom: var(--sp-12);
}

/* Horizontal scroll container for narrow viewports. It is focusable so the
   table can be reached and scrolled by keyboard. */
.compare__scroll {
  overflow-x: auto;
  border-radius: 46px;
  border: var(--bw-hairline) solid var(--c-blue-600);
  -webkit-overflow-scrolling: touch;
}

.compare__scroll:focus-visible {
  outline: 3px solid var(--c-blue-300);
  outline-offset: 3px;
}

.cmp {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-family: var(--ff-ui);
  font-size: var(--fs-md);
  text-align: center;
}

.cmp th,
.cmp td {
  padding: var(--sp-4) var(--sp-5);
  font-weight: var(--fw-regular);
  color: var(--c-white);
  vertical-align: middle;
}

/* First column: feature names, left aligned. */
.cmp tbody th[scope="row"],
.cmp .cmp__feature {
  text-align: left;
  width: 26%;
  min-width: 300px;
}

/* Header and footer bars. */
.cmp thead th,
.cmp tfoot th,
.cmp tfoot td {
  background-color: var(--c-blue-800);
  font-weight: var(--fw-medium);
}

.cmp thead th {
  padding-block: var(--sp-6);
}

/* Group rows. */
.cmp__group th {
  text-align: left;
  padding-block: var(--sp-5);
  font-weight: var(--fw-medium);
  color: var(--c-blue-600);
  background-color: rgba(255, 255, 255, 0.03);
}

.cmp tbody tr:not(.cmp__group) + tr:not(.cmp__group) th,
.cmp tbody tr:not(.cmp__group) + tr:not(.cmp__group) td {
  border-top: var(--bw-hairline) solid rgba(255, 255, 255, 0.06);
}

/* The Pro column is washed in brand blue at 10% for its whole height. */
.cmp__pro {
  background-color: var(--c-blue-a11);
}

.cmp thead .cmp__pro,
.cmp tfoot .cmp__pro {
  background-color: var(--c-blue-700);
}

/* Tick cells. */
.cmp .is-yes::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  border: solid var(--c-blue-300);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.cmp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  font-weight: var(--fw-medium);
  color: var(--c-white);
  transition: background-color var(--dur-base) var(--ease-out);
}

.cmp__cta:hover {
  background-color: var(--c-white-a21);
}

.cmp__cta--accent {
  color: var(--c-blue-100);
}

/* ==========================================================================
   Start-free card
   Figma: white 1141x505 r61 panel overlapping the dark band above it.
   ========================================================================== */

.startfree {
  position: relative;
  padding-bottom: var(--sp-14);
  background: linear-gradient(
    to bottom,
    var(--c-dark-800) 0,
    var(--c-dark-800) 120px,
    var(--c-white) 120px,
    var(--c-white) 100%
  );
}

.startfree__card {
  max-width: 1141px;
  margin-inline: auto;
  padding: var(--sp-10) var(--sp-9);
  border-radius: 61px;
  background-color: var(--c-white);
  box-shadow: var(--sh-2xl);
  text-align: center;
}

.startfree__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-strong);
  margin-block: var(--sp-4) var(--sp-4);
}

.startfree__lede {
  font-family: var(--ff-body);
  font-size: var(--fs-lg);
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-8);
}

/* ==========================================================================
   Build your WorkFlow today
   ========================================================================== */

.flow-cta__media {
  margin: 0;
}

.flow-cta__media img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1400px) {
  .plan-row { gap: var(--sp-6); }
  .addon-grid { gap: var(--sp-8) var(--sp-6); }
  .addon { border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-7); }
}

@media (max-width: 1100px) {
  .plan-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  /* the badge would collide with the card above once wrapped */
  .tier__badge {
    top: -30px;
    border-radius: var(--r-pill);
  }

  .addon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .addon--offset { margin-top: 0; }
}

@media (max-width: 768px) {
  .price-hero {
    padding-top: calc(var(--header-height) + 48px);
  }

  .price-hero__dots { display: none; }

  .trust-row { gap: var(--sp-3); }

  .trust-chip {
    padding-inline: var(--sp-5);
    font-size: var(--fs-base);
  }

  .plans { padding-bottom: var(--sp-13); }

  .billing {
    width: 100%;
    flex-direction: column;
  }

  .billing__option { width: 100%; }

  .plan-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tier {
    border-radius: var(--r-xl);
    padding: var(--sp-8) var(--sp-6);
  }

  .tier__desc { min-height: 0; }

  .addon-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .addon__body { text-align: left; }

  .compare__title { margin-bottom: var(--sp-9); }

  .compare__scroll { border-radius: var(--r-md); }

  .cmp { font-size: var(--fs-base); }

  .startfree__card {
    padding: var(--sp-8) var(--sp-6);
    border-radius: var(--r-xl);
  }
}

@media (max-width: 480px) {
  .tier__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tier__name { margin-left: 0; }
}