/* ==========================================================================
   NoteyDoc pricing — the landing page's system, applied to plans.
   Loaded after landing.css, which supplies the typefaces, the tokens, the
   header, the buttons, the feature lists and the footer skin. This file only
   adds what the pricing page has and the landing page does not: plan columns,
   the team panel, the team-request dialog and the toast.
   ========================================================================== */

/* --- Page head ------------------------------------------------------------ */

.pricing-head {
  padding-block: var(--s8) var(--s6);
}

@media (min-width: 900px) {
  .pricing-head {
    padding-block: var(--s9) var(--s7);
  }
}

.pricing-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}

.pricing-lead {
  margin-top: var(--s5);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}

/* --- Plans ----------------------------------------------------------------
   Three ruled columns rather than three boxes, the same way the landing page
   states its benefits. The plan being recommended is marked by weight in the
   rule and the accent on its label, not by a glow.
   -------------------------------------------------------------------------- */

.plans-section {
  padding-top: 0;
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: stretch;
}

@media (min-width: 900px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s7);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}

.plan--featured {
  border-top: 2px solid var(--accent);
  padding-top: calc(var(--s5) - 1px);
}

.plan-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.plan--featured .plan-eyebrow {
  color: var(--accent);
}

.plan-name {
  margin-top: var(--s3);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.plan-price {
  margin-top: var(--s3);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.plan-price span {
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
}

/* Set by the referral script, which replaces the price with the struck-out
   list price followed by the discounted one. Two classes deep so these win
   over the unit rule above. */
.plan-price .plan-price-original {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--ink-2);
  text-decoration: line-through;
  margin-right: 0.3em;
}

.plan-price .plan-price-discount {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--accent);
}

.plan-summary {
  margin-top: var(--s4);
  color: var(--ink-2);
}

.plan .feature-list {
  margin-top: var(--s4);
}

/* Pins every plan's button to the same baseline no matter how long its list
   of features runs. */
.plan-action {
  margin-top: auto;
  padding-top: var(--s5);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* --- Team plan -------------------------------------------------------------
   The one panel on the page, in the same frame the landing page gives the
   demo video and the product screenshot.
   -------------------------------------------------------------------------- */

.team-panel {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  padding: var(--s6);
}

@media (min-width: 900px) {
  .team-panel {
    padding: var(--s7);
  }
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}

@media (min-width: 900px) {
  .team-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
    gap: var(--s7);
    align-items: center;
  }
}

.team-title {
  margin-top: var(--s3);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.team-lead {
  margin-top: var(--s3);
  color: var(--ink-2);
  max-width: 34ch;
}

.team-action .btn {
  white-space: normal;
}

.team-note {
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .team-action {
    max-width: 240px;
  }
}

/* --- Legal note ----------------------------------------------------------- */

/* The rule runs the full content column, the way every other rule on the site
   does; the paragraph inside it keeps a readable measure. */
.legal-note {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}

.legal-note p {
  max-width: 74ch;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--ink-2);
}

.legal-note strong {
  color: var(--ink);
}

/* --- Referral banner ------------------------------------------------------
   Injected above <main> by referral-capture.js when a referral code is
   present, so it is styled here rather than in the markup.
   -------------------------------------------------------------------------- */

.referral-confirmation-banner {
  width: 100%;
  max-width: var(--wrap);
  margin: var(--s5) auto 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-wash);
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

@media (min-width: 900px) {
  .referral-confirmation-banner {
    /* Keeps the banner inside the same 1200px column as everything else. */
    max-width: calc(var(--wrap) - 2 * var(--gutter));
  }
}

/* --- Team request dialog --------------------------------------------------- */

.demo-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 20, 24, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  z-index: 2000;
}

.demo-modal-overlay.open {
  display: flex;
}

body.modal-open {
  overflow: hidden;
}

.demo-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: calc(100dvh - 2 * var(--s4));
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -20px rgba(17, 20, 24, 0.55);
  padding: var(--s6);
}

.demo-modal h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  padding-right: var(--s6);
}

.demo-modal-subtext {
  margin-top: var(--s2);
  margin-bottom: var(--s5);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.demo-modal-close {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.13s ease, border-color 0.13s ease;
}

.demo-modal-close:hover {
  color: var(--ink);
  border-color: var(--rule-strong);
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.demo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.demo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
}

.demo-field input,
.demo-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}

.demo-field input::placeholder,
.demo-field textarea::placeholder {
  color: #6b747e;
}

.demo-field input:focus,
.demo-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.demo-field textarea {
  resize: vertical;
  min-height: 104px;
  line-height: 1.55;
}

.demo-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s3);
}

.demo-modal-actions .btn {
  min-width: 160px;
}

.demo-form-status {
  min-height: 1.2rem;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}

@media (max-width: 639px) {
  .demo-modal-overlay {
    align-items: flex-start;
    padding: var(--s2);
  }

  .demo-modal {
    max-height: calc(100dvh - 2 * var(--s2));
    padding: var(--s5);
  }

  .demo-form-grid {
    grid-template-columns: 1fr;
  }

  .demo-modal-actions {
    flex-direction: column-reverse;
  }

  .demo-modal-actions .btn {
    width: 100%;
  }
}

/* --- Toast ----------------------------------------------------------------
   Same graphite-on-white treatment as the landing page's CTA tooltip.
   -------------------------------------------------------------------------- */

.success-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(320px, calc(100vw - 40px));
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  box-shadow: 0 14px 30px -12px rgba(17, 20, 24, 0.6);
  z-index: 3000;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.success-toast.show {
  opacity: 1;
  transform: translateY(0);
}