/* Drya — pricing page. Builds on conta.css. */

.pricing {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}

.intro { max-width: 680px; margin: 16px auto 32px; text-align: center; }
.intro h1 { margin: 0 0 12px; font-size: 38px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.intro p { margin: 0; color: var(--mid); font-size: 16.5px; line-height: 1.5; }

/* ---- coupon -------------------------------------------------------------- */

.coupon {
  max-width: 760px;
  margin: 0 auto 32px;
  background: var(--card);
  border: 1px dashed #b9dcd9;
  border-radius: var(--radius-card);
  padding: 18px 22px;
}
.coupon form { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; }
.coupon h2 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.coupon__text p { margin: 0; color: var(--mid); font-size: 13.5px; }
.coupon__row { display: flex; gap: 8px; }
.coupon__row input {
  font: inherit;
  width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.coupon__row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.coupon__apply { width: auto; padding: 10px 18px; }
.coupon__msg { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13.5px; }
.coupon__msg.is-ok { color: #0b6e68; }
.coupon__msg.is-bad { color: var(--error); }
.coupon__msg button {
  border: 0; background: none; padding: 0; margin-left: 8px;
  color: var(--mid); text-decoration: underline; font-size: 13px;
}

/* ---- plans --------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px 24px 24px;
}
.plan--featured { border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(14, 158, 150, .10); }
.plan__badge {
  position: absolute; top: -12px; left: 24px; margin: 0;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.plan h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.plan__for { margin: 0 0 16px; color: var(--mid); font-size: 13.5px; min-height: 2.6em; }
.plan__price { margin: 0 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__now { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.plan__per, .plan__from { color: var(--mid); font-size: 14px; }
.plan__was { color: var(--faint); font-size: 18px; }
.plan__deal { margin: 0 0 4px; color: #0b6e68; font-size: 13px; font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 22px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; flex: 1; }
.plan li { padding-left: 22px; position: relative; line-height: 1.4; }
.plan li::before {
  content: '';
  position: absolute; left: 2px; top: 5px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

/* ---- enterprise and notes ------------------------------------------------ */

.enterprise {
  margin: 20px 0 0;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 20px 24px;
}
.enterprise h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.enterprise p { margin: 0; color: var(--mid); font-size: 14px; }
.enterprise .btn { width: auto; flex: none; }

.notes { max-width: 760px; margin: 32px auto 0; color: var(--mid); font-size: 13.5px; line-height: 1.5; }
.notes p { margin: 0 0 8px; }
.notes strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan__for { min-height: 0; }
}
@media (max-width: 640px) {
  .pricing { padding: 16px 16px 40px; }
  .intro h1 { font-size: 30px; }
  .coupon form { grid-template-columns: 1fr; }
  .coupon__row input { flex: 1; width: auto; min-width: 0; }
  .enterprise { flex-direction: column; align-items: flex-start; }
}

.plan__limits {
  margin: 14px 0 0 !important;
  padding: 12px 14px !important;
  background: var(--bg);
  border-radius: 10px;
  gap: 6px !important;
  font-size: 13px !important;
  flex: none !important;
}
.plan__limits li { padding-left: 0 !important; }
.plan__limits li::before { display: none; }

/* ---- design review, 2026-09-28 (Monica: "Drya is too small and there is too
   much empty space"). The page was a 1,100px column: on a 1,920px screen that
   left ~400px of nothing on each side and small type in big white fields. It
   now widens to 1,360px, and the wordmark, the headline, the prices and the
   card type scale with the screen. Phones are unchanged (the 900/640px rules
   above still apply below those widths). ------------------------------------ */

.pricing { max-width: 1360px; padding: 12px clamp(20px, 3vw, 48px) 64px; }
.intro { max-width: 1120px; margin: clamp(8px, 2vh, 28px) auto clamp(28px, 3.5vh, 44px); }
.intro h1 { font-size: clamp(34px, 2.9vw, 56px); margin-bottom: 16px; text-wrap: balance; }
.intro p { font-size: clamp(16.5px, 1.2vw, 20px); max-width: 720px; margin: 0 auto; }

.coupon { max-width: 880px; padding: 20px 26px; margin-bottom: clamp(28px, 3.5vh, 44px); }
.coupon h2 { font-size: 16.5px; }
.coupon__text p { font-size: 14.5px; }

.plans { gap: clamp(20px, 1.8vw, 32px); }
.plan { padding: clamp(26px, 2vw, 36px) clamp(24px, 1.9vw, 34px) clamp(24px, 1.8vw, 32px); }
.plan__badge { font-size: 13px; padding: 5px 12px; top: -14px; }
.plan h2 { font-size: clamp(19px, 1.45vw, 25px); }
.plan__for { font-size: clamp(13.5px, 1vw, 16px); }
.plan__now { font-size: clamp(34px, 2.9vw, 50px); }
.plan__per, .plan__from { font-size: clamp(14px, 1vw, 16px); }
.plan ul { font-size: clamp(14px, 1.05vw, 16.5px); gap: 11px; }
.plan__limits { font-size: clamp(13px, .95vw, 15px) !important; padding: 14px 16px !important; gap: 8px !important; }
.plan .btn { padding: 14px 18px; font-size: clamp(15px, 1vw, 16.5px); }

.enterprise { padding: clamp(20px, 1.8vw, 30px) clamp(24px, 1.9vw, 34px); margin-top: clamp(20px, 1.8vw, 32px); }
.enterprise h2 { font-size: clamp(16px, 1.2vw, 20px); }
.enterprise p { font-size: clamp(14px, 1vw, 16px); }

.notes { max-width: 960px; font-size: clamp(13.5px, 1vw, 16px); margin-top: 40px; }

@media (max-width: 900px) {
  .plans { max-width: 520px; }
}
/* Pricing header spans the viewport; plan content keeps its centered width. */
.top { width: 100%; max-width: none; margin: 0; padding: 24px clamp(20px, 3vw, 64px); gap: 24px; }
.top .wordmark { flex-shrink: 0; }
.top nav { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) {
  .top { padding: 18px 16px; gap: 14px; flex-wrap: wrap; }
  .top nav { gap: 14px; font-size: 14px; }
}