/* Pricing cards: notched-tab cards (light) + a gold-striped dark featured card.
   Shared by the landing #pricing section (static markup, js/pricing-toggle.js) and the in-app
   upgrade modal (js/upgrade-modal.js). Colours come from css/tokens.css with fallbacks, so the
   app pages that don't load tokens.css still get the theme.

   Structure:
     .pc[.pc--featured][.is-current]          wrapper: drop shadow (featured: the striped frame)
       .pc-shell                              the card surface; a mask cuts the top-right notch
         .pc-tab                              label sitting in the notch ("Popular", "Save 15%")
         .pc-name / .pc-price / .pc-desc / .pc-rule / .pc-list / .pc-cta
   The notch is a CSS mask (not an overlay), so whatever is behind the card shows through it:
   the page on light cards, the gold stripes on the featured one. */

.pc {
  --pc-ink: var(--ink, #12241c);
  --pc-ink-2: var(--ink-2, #46584f);
  --pc-muted: var(--muted, #7c8b83);
  --pc-green: var(--aqua, #10794f);
  --pc-green-2: var(--aqua-2, #16a06a);
  --pc-gold: var(--gold, #c99a3f);
  --pc-dark: var(--sidebar, #0e241b);
  --pc-dark-2: var(--sidebar-2, #183a2c);
  --pc-radius: 28px;
  --pc-notch-w: 140px;     /* overall notch box incl. its curves */
  --pc-notch-h: 50px;      /* depth of the tab row */
  --pc-pad: 24px;
  position: relative;
  display: flex;
  min-width: 0;
  filter: drop-shadow(0 0 0.6px rgba(14, 36, 27, 0.32)) drop-shadow(0 18px 28px rgba(14, 36, 27, 0.10));
  font-family: var(--font-body, "Poppins", ui-sans-serif, system-ui, sans-serif);
  color: var(--pc-ink);
}

.pc-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pc-pad);
  border-radius: var(--pc-radius);
  background: linear-gradient(158deg, #ffffff 0%, #f6faf7 42%, #e3f2e9 100%);
  /* full card minus the notch shape (top-right) */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 72' preserveAspectRatio='none'%3E%3Cpath d='M0 0H140V72Q140 50 118 50H48Q28 50 28 30V20Q28 0 8 0Z'/%3E%3C/svg%3E") top right / var(--pc-notch-w) calc(var(--pc-notch-h) + 22px) no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 72' preserveAspectRatio='none'%3E%3Cpath d='M0 0H140V72Q140 50 118 50H48Q28 50 28 30V20Q28 0 8 0Z'/%3E%3C/svg%3E") top right / var(--pc-notch-w) calc(var(--pc-notch-h) + 22px) no-repeat,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* the tab label lives in the notch (outside the masked shell, so it is not cut) */
.pc-tab {
  position: absolute; top: 0; right: 0;
  width: calc(var(--pc-notch-w) - 28px); height: var(--pc-notch-h);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: var(--pc-ink-2);
  white-space: nowrap; z-index: 1; pointer-events: none;
}
.pc-tab::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pc-green-2); flex: none;
}
.pc-tab:empty { display: none; }

.pc-name {
  margin: 4px 0 0;
  max-width: calc(100% - var(--pc-notch-w) + var(--pc-pad) - 6px);
  min-height: calc(var(--pc-notch-h) - var(--pc-pad) - 2px);
  font-family: var(--font-display, "Poppins", sans-serif);
  font-size: 1.32rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
}

.pc-price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 18px 0 10px; }
.pc-amounts { display: inline-flex; align-items: baseline; gap: 10px; }
.pc-was {
  font-family: var(--font-display, "Poppins", sans-serif);
  font-size: 2.1rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  color: var(--pc-muted); text-decoration: line-through; text-decoration-thickness: 2px;
}
.pc-amt {
  font-family: var(--font-display, "Poppins", sans-serif);
  font-size: 2.85rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.pc-per { display: flex; flex-direction: column; gap: 1px; font-size: 0.86rem; line-height: 1.3; color: var(--pc-muted); }
.pc-per b { font-weight: 500; color: var(--pc-ink-2); }

.pc-desc { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--pc-ink-2); }

.pc-rule { border: 0; border-top: 2px dotted rgba(18, 36, 28, 0.16); margin: 20px 0 18px; }

.pc-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 13px; align-content: start; flex: 1; }
.pc-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9rem; line-height: 1.4; color: var(--pc-ink); }
.pc-list li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%;
  background: var(--pc-green-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.pc-list li.pc-no { color: var(--pc-muted); }
.pc-list li.pc-no::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa79f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.pc-cta { margin-top: auto; display: flex; justify-content: center; }
.pc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 62%; padding: 13px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.005em;
  background: #ffffff; color: var(--pc-ink);
  box-shadow: 0 0 0 1px rgba(18, 36, 28, 0.08), 0 10px 22px -10px rgba(14, 36, 27, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.pc-btn:hover { color: var(--pc-green); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(16, 121, 79, 0.35), 0 14px 26px -12px rgba(14, 36, 27, 0.4); }
.pc-btn:disabled, .pc-btn[aria-disabled="true"] { cursor: default; transform: none; color: var(--pc-muted); box-shadow: 0 0 0 1px rgba(18, 36, 28, 0.08); }
.pc-btn--solid { background: var(--pc-green); color: #fff; box-shadow: 0 12px 24px -12px rgba(16, 121, 79, 0.7); }
.pc-btn--solid:hover { background: var(--pc-green-2); color: #fff; }
.pc-btn--note { background: rgba(201, 154, 63, 0.14); color: #8a6a1f; box-shadow: 0 0 0 1px rgba(201, 154, 63, 0.4); }

/* ---- featured: dark card inside a gold diagonal-stripe frame ---- */
.pc--featured {
  padding: 9px;
  border-radius: calc(var(--pc-radius) + 8px);
  background: repeating-linear-gradient(-45deg, #e9c779 0 2px, #f6e3b3 2px 8px);
  filter: drop-shadow(0 22px 34px rgba(14, 36, 27, 0.22));
}
.pc--featured .pc-shell {
  color: #eef5f1;
  background: radial-gradient(120% 80% at 100% 0%, rgba(22, 160, 106, 0.18), transparent 60%),
              linear-gradient(160deg, var(--pc-dark-2) 0%, var(--pc-dark) 58%);
}
.pc--featured .pc-tab { top: 9px; right: 9px; color: var(--pc-dark); font-weight: 700; }
.pc--featured .pc-tab::after { background: var(--pc-dark); }
.pc--featured .pc-name { color: #ffffff; }
.pc--featured .pc-was { color: rgba(238, 245, 241, 0.42); }
.pc--featured .pc-amt { color: #f0c76a; }
.pc--featured .pc-per { color: #f0c76a; }
.pc--featured .pc-per b { color: #f0c76a; font-weight: 600; }
.pc--featured .pc-desc { color: rgba(238, 245, 241, 0.78); }
.pc--featured .pc-rule { border-top-color: rgba(255, 255, 255, 0.2); }
.pc--featured .pc-list li { color: #f2f7f4; }
.pc--featured .pc-list li.pc-no { color: rgba(238, 245, 241, 0.45); }
.pc--featured .pc-list li.pc-no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(238,245,241,0.5)' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.pc--featured .pc-btn { background: #ffffff; color: var(--pc-dark); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.55); }
.pc--featured .pc-btn:hover { color: var(--pc-green); }

/* the plan you're on: green notch dot + "Current plan" label (set by script) */
.pc.is-current .pc-tab { color: var(--pc-green); }

/* compact variant for the upgrade modal (narrower cards) */
.pc--compact { --pc-pad: 20px; --pc-notch-w: 118px; --pc-notch-h: 44px; --pc-radius: 24px; }
.pc--compact .pc-tab { font-size: 0.72rem; gap: 6px; }
.pc--compact .pc-name { font-size: 1.14rem; }
.pc--compact .pc-amt { font-size: 2.2rem; }
.pc--compact .pc-was { font-size: 1.55rem; }
.pc--compact .pc-per { font-size: 0.76rem; }
.pc--compact .pc-desc { font-size: 0.8rem; }
.pc--compact .pc-rule { margin: 14px 0 14px; }
.pc--compact .pc-list { gap: 10px; margin-bottom: 18px; }
.pc--compact .pc-list li { font-size: 0.78rem; gap: 9px; }
.pc--compact .pc-list li::before { width: 18px; height: 18px; background-size: 11px; }
.pc--compact .pc-list li.pc-no::before { background-size: 15px; }
.pc--compact .pc-btn { padding: 11px 18px; font-size: 0.84rem; min-width: 80%; }

/* landing: annual-only bits (state on .plans[data-interval], flipped by js/pricing-toggle.js) */
.plans[data-interval="month"] .pc-was { display: none; }

/* segmented Monthly | Annual toggle in the modal (landing keeps .interval-toggle) */
.pc-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(18, 36, 28, 0.08), 0 8px 18px -12px rgba(14, 36, 27, 0.3); }
.pc-seg button { border: 0; background: transparent; cursor: pointer; padding: 8px 16px; border-radius: 999px; font: 600 0.82rem/1.2 var(--font-body, "Poppins", sans-serif); color: var(--ink-2, #46584f); }
.pc-seg button.is-on { background: var(--sidebar, #0e241b); color: #fff; }
.pc-seg .save { margin-left: 6px; font-size: 0.68rem; font-weight: 700; color: var(--aqua, #10794f); }
.pc-seg button.is-on .save { color: #c7ead6; }

@media (max-width: 520px) {
  .pc { --pc-pad: 20px; --pc-notch-w: 124px; }
  .pc-amt { font-size: 2.4rem; }
}

/* "Remove the watermark" & ?upgrade= deep links point at a card: a short lift to draw the eye */
@keyframes pc-hl { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }
.pc.pc--hl { animation: pc-hl 0.9s ease 2; }