/* ============================================================
   Ummeo — pricing
   ============================================================ */

.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  max-width: 62ch;
  margin-inline: auto;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  align-items: start;
}

@media (min-width: 1040px) {
  .pricing__grid { grid-template-columns: repeat(3, 1fr); }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--rule);
  background: var(--bg-raised);
  block-size: 100%;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.plan:hover { transform: translateY(-3px); box-shadow: var(--e-3); }

.plan--featured {
  background: var(--ink-950);
  color: var(--bone-200);
  border-color: transparent;
  box-shadow: var(--e-5);
}

.plan--featured:hover { box-shadow: var(--e-5); transform: translateY(-5px); }

/* The badge sits above the title in normal flow. It used to be absolutely
   positioned in the corner, where it printed straight over "Ummeo Growth". */
.plan__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

/* Reserves the badge's exact height on the unbadged cards so all three
   plans keep their prices on the same line. */
.plan__flag--ghost { visibility: hidden; }


.plan__flag {
  align-self: flex-start;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sap-300);
  background: color-mix(in srgb, var(--sap-500) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--sap-400) 34%, transparent);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* Centred once the three plans sit side by side. Must come after the
   base rule above, which otherwise wins on source order. Below this
   width the cards are full bleed and a centred badge would drift away
   from the left-aligned title it labels, so it stays flush left. */
@media (min-width: 1040px) {
  .plan__flag { align-self: center; }
}

.plan__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking-tight);
}

.plan__for {
  font-size: var(--step--1);
  color: var(--fg-muted);
  max-width: 32ch;
  margin-top: var(--sp-1);
}

.plan--featured .plan__for { color: var(--ink-200); }

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.plan--featured .plan__price { border-top-color: color-mix(in srgb, var(--bone-100) 14%, transparent); }

.plan__amount {
  font-family: var(--font-display);
  font-size: var(--step-5);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.plan__cadence { font-size: var(--step--1); color: var(--fg-muted); }
.plan--featured .plan__cadence { color: var(--ink-200); }

.plan__setup {
  width: 100%;
  font-size: var(--step--1);
  color: var(--fg-subtle);
}

.plan--featured .plan__setup { color: var(--ink-300); }

.plan__setup b {
  color: var(--fg);
  font-weight: 600;
}

.plan--featured .plan__setup b { color: var(--bone-100); }

.plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  flex: 1;
}

.plan--featured .plan__features { border-top-color: color-mix(in srgb, var(--bone-100) 14%, transparent); }

.plan__features li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--fg-muted);
}

.plan--featured .plan__features li { color: var(--ink-100); }

.plan__features svg { margin-top: 4px; color: var(--sap-600); flex: none; }
.plan--featured .plan__features svg { color: var(--sap-400); }

.plan__features li em {
  font-style: normal;
  color: var(--fg);
  font-weight: 550;
}

.plan--featured .plan__features li em { color: var(--bone-100); }

/* ---- Outright purchase panel ------------------------------------ */
.outright {
  margin-top: var(--sp-7);
  border-radius: var(--r-xl);
  border: 1px solid var(--rule-strong);
  background: var(--bg);
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 900px) {
  .outright { grid-template-columns: minmax(0, 1.3fr) auto; gap: var(--sp-8); }
}

.outright__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}

.outright__body {
  margin-top: var(--sp-3);
  color: var(--fg-muted);
  font-size: var(--step-0);
  max-width: 58ch;
}

.outright__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
}

.outright__points li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.outright__points svg { color: var(--accent); flex: none; }

.outright__actions { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---- Comparison note -------------------------------------------- */
.pricing__note {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--step--1);
  color: var(--fg-subtle);
}

.pricing__note a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Contact form ------------------------------------------------ */
.contact__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 940px) {
  .contact__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-9); }
}

.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--rule);
  background: var(--bg-raised);
  box-shadow: var(--e-2);
}

.contact__form .field--full { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .contact__form { grid-template-columns: 1fr; }
}

.contact__points { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6); }

.contact__point {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.contact__point-icon {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--sap-100);
  color: var(--sap-700);
}

.contact__point b { display: block; font-size: var(--step-0); font-weight: 600; letter-spacing: -0.01em; }
.contact__point span { display: block; font-size: var(--step--1); color: var(--fg-muted); margin-top: 2px; }

/* ---- Spam trap ---------------------------------------------------
   Off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Validation message ------------------------------------------ */
.form__error {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--clay-500) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--clay-600) 34%, transparent);
  color: var(--clay-600);
  font-size: var(--step--1);
  line-height: 1.5;
}

.form__error[hidden] { display: none; }

/* ---- Confirmation, shown in place of the form -------------------- */
.sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--sap-600) 30%, transparent);
  background: var(--bg-raised);
  box-shadow: var(--e-2);
}

.sent[hidden] { display: none; }
.sent:focus { outline: none; }
.sent:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sent__mark {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-pill);
  background: var(--sap-100);
  color: var(--sap-700);
}

.sent__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}

.sent__body {
  font-size: var(--step-0);
  color: var(--fg-muted);
  max-width: 52ch;
  line-height: 1.6;
}

.sent__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-1);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  inline-size: 100%;
}

.sent__meta dt {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.sent__meta dd {
  margin: var(--sp-2) 0 0;
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--fg);
}

.sent__foot {
  font-size: var(--step--2);
  color: var(--fg-subtle);
  max-width: 46ch;
  line-height: 1.55;
}