/* ============================================================
   DM — Pricing page (design frame 31:176, 1440 x 1516)
   ============================================================ */

/* ---- Hero (warm-charcoal banner, letter-interlock display type) ---- */
.hero-pricing {
  position: relative;
  width: 1440px; height: 460px;
  background: #1C120D;
  overflow: hidden;
}
/* warm glow orb (brand collision accent) — top-right */
.hero-pricing .hero-deco {
  position: absolute;
  right: -160px; top: -200px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(255,138,61,0.42) 0%,
              rgba(245,65,62,0.22) 45%,
              rgba(255,194,60,0) 72%);
  filter: blur(8px);
  pointer-events: none;
}
/* small electric-cyan pop dot — bottom-right */
.hero-pricing .hero-dot {
  position: absolute; right: 200px; bottom: 60px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}
/* faint giant ghost word — depth, right side */
.hero-pricing .h-ghost {
  position: absolute; right: -30px; top: 56px;
  font-size: 300px; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.05);
  letter-spacing: -12px; pointer-events: none; user-select: none;
}
/* eyebrow pill */
.hero-pricing .h-eyebrow {
  position: absolute; left: 120px; top: 64px;
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--brand-orange-soft); color: var(--credit-text);
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
/* display title with letter-interlock */
.hero-pricing .h-title {
  position: absolute; left: 120px; top: 150px;
  width: 1000px; color: #fff;
}
.hero-pricing .t-simple {
  display: block; font-size: 72px; font-weight: 800; letter-spacing: -1.5px; line-height: 1;
}
.hero-pricing .t-pricing {
  display: block; font-size: 72px; font-weight: 800; letter-spacing: -1.5px; line-height: 1;
  margin-top: -34px; position: relative;
}
/* the giant "p" — overlaps up into "Simple" for the interlock feel */
.hero-pricing .t-pricing .giant {
  font-size: 168px; line-height: 0.7; font-weight: 800;
  background: linear-gradient(90deg, #FFC23C 0%, #FF8A3D 55%, #F5413E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  vertical-align: bottom; margin: 0 -6px 0 2px;
}
.hero-pricing .t-ns {
  display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.5px;
  color: #FFB366; margin-top: 6px;
}
/* subtitle */
.hero-pricing .h-sub {
  position: absolute; left: 120px; top: 398px;
  width: 620px;
  font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.7);
}

/* ---- Plan section ---- */
.plan-section {
  position: relative;
  width: 1440px; height: 673px;
  background: #fff;
}
.plan-section .sec-title {
  position: absolute; left: 120px; top: 392px;
  font-size: 32px; font-weight: 800; color: #1F2937; letter-spacing: -0.5px;
}
.plan-section .sec-desc {
  position: absolute; left: 120px; top: 459px;
  font-size: 16px; color: #6B7280;
}

.plan-card {
  position: absolute;
  width: 384px;
  background: #FFF9F4;
  border: 1px solid #EFE5DB;
  border-radius: 20px;
}
.plan-card.pro { border: 2px solid #F55C2E; }

/* card placement (relative to .plan-section, which begins at page y=320) */
.plan-card.free { left: 120px; top: 212px; height: 394px; }
.plan-card.pro  { left: 528px; top: 186px; height: 447px; }
.plan-card.team { left: 936px; top: 212px; height: 394px; }

.plan-card .p-name {
  position: absolute; left: 32px; top: 32px;
  font-size: 20px; font-weight: 800; color: #1F2937;
}
.plan-card.pro .p-name { left: 36px; top: 81px; }

.plan-card .p-price {
  position: absolute; left: 32px; top: 76px;
  font-size: 44px; font-weight: 800; color: #1F2937; line-height: 1;
}
.plan-card.pro .p-price { left: 36px; top: 125px; }
.plan-card .p-per {
  position: absolute; left: 95px; top: 110px;
  font-size: 16px; color: #9CA3AF;
}
.plan-card.pro .p-per { left: 115px; top: 159px; }
.plan-card.team .p-per { left: 123px; }

.plan-card .p-desc {
  position: absolute; left: 32px; top: 149px;
  width: 268px; font-size: 14px; color: #6B7280; line-height: 1.4;
}
.plan-card.pro .p-desc { left: 36px; top: 198px; width: 293px; }
.plan-card.team .p-desc { width: 332px; }

.plan-card .p-div {
  position: absolute; left: 32px; top: 186px;
  width: 320px; height: 1px; background: #E7D9CC;
}
.plan-card.pro .p-div { left: 36px; top: 235px; width: 312px; }

.plan-card .feat {
  position: absolute; left: 32px;
  display: flex; align-items: center; gap: 10px;
}
.plan-card.pro .feat { left: 36px; }
.plan-card .feat .chk {
  width: 18px; height: 18px; flex: 0 0 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M3 9.5 L7 13.5 L15 4.5' stroke='%23F55C2E' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 18px 18px;
}
.plan-card .feat .ftxt { font-size: 14px; color: #4B5563; }

.plan-card .p-cta {
  position: absolute; left: 32px; top: 321px;
  width: 123px; height: 41px; border-radius: 12px;
  background: #fff; border: 1.5px solid #E2D4C8;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #C2410C;
}
.plan-card.pro .p-cta {
  left: 36px; top: 370px; width: 143px; height: 41px;
  background: var(--brand-gradient); border: none; color: #fff; font-weight: 700;
}
.plan-card.team .p-cta { width: 140px; }

/* ---- "Most popular" badge on Pro ---- */
.plan-card .badge {
  position: absolute; left: 36px; top: 36px;
  width: 100px; height: 25px; border-radius: 13px;
  background: #FFE3CC;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #C2410C;
}

/* ---- Full-width CTA band (purple) — shared, defined in global.css ---- */