/* ==========================================================
   keeplee - the Pricing page: the price as the headline, a bill
   with a torn edge, a strip of months, a band of sums.
   ========================================================== */
.pr-hero { padding: calc(64px + var(--under, 0px)) 0 88px; background: linear-gradient(180deg, var(--brand-50) 0%, var(--bg-soft) 62%, #fff 100%); text-align: center; }
.pr-copy { max-width: 880px; }
.pr-kicker { margin: 0 0 6px; font-weight: 600; color: var(--brand); }
.pr-kicker a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pr-hero h1 { margin: 0 0 16px; line-height: 1.05; }
.pr-hero h1 b { display: block; color: var(--brand); font-size: clamp(4.4rem, 15vw, 9rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.pr-hero h1 span { display: block; margin-top: .3em; font-size: clamp(1.45rem, 3.6vw, 2.5rem); letter-spacing: -.02em; text-wrap: balance; }
.pr-hero .lead { max-width: 34em; margin: 0 auto 28px; text-wrap: balance; }

/* The bill */
.pr-bill { max-width: 620px; margin: 52px auto 0; filter: drop-shadow(0 18px 34px rgba(12, 29, 69, .16)); }
.pr-paper { position: relative; padding: 30px clamp(20px, 5vw, 40px) 24px; border-radius: 14px 14px 0 0; background: #fff; text-align: left; }
.pr-paper::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(to top right, transparent 50%, #fff 50%) 0 0 / 16px 10px repeat-x; }
.pr-bill-head { display: grid; gap: 2px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 2px solid var(--navy); text-align: center; }
.pr-bill-head strong { color: var(--navy); font-size: 1.25rem; }
.pr-bill-head span { color: var(--muted); font-size: .9rem; }
.pr-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pr-lines li { display: flex; align-items: baseline; gap: 8px; font-size: .96rem; }
.pr-lines a, .pr-lines b { color: var(--navy); font-weight: 600; text-decoration: none; }
.pr-lines a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.pr-lines i { flex: 1 1 12px; min-width: 12px; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.pr-lines span { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--muted); font-size: .9rem; }
.pr-lines span .ico { width: 15px; height: 15px; color: var(--ok); }
.pr-lines-more { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pr-total { margin: 18px 0 0; padding-top: 14px; border-top: 2px solid var(--navy); }
.pr-total div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; }
.pr-total dt { color: var(--navy); font-weight: 600; }
.pr-total small { display: block; color: var(--muted); font-weight: 500; font-size: .84rem; }
.pr-total dd { margin: 0; color: var(--navy); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.pr-total .pr-free { color: var(--ok); font-size: 1.15rem; letter-spacing: 0; }

.pr-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.pr-head h2 { margin: 8px 0 14px; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.16; text-wrap: balance; }
.pr-head .lead { margin: 0 auto; }
.pr-head .lead a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* The months */
.pr-months { padding: 84px 0; background: #fff; }
.pr-strip { list-style: none; max-width: 980px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.pr-strip li { display: grid; gap: 3px; padding: 18px 8px; border-radius: 12px; background: var(--brand-50); color: var(--navy); }
.pr-strip b { color: var(--muted); font-size: .8rem; font-weight: 600; }
.pr-strip span { font-size: 1.1rem; font-weight: 600; }
.pr-strip .on { background: var(--navy); color: #fff; }
.pr-strip .on b { color: #cfccc2; }
.pr-strip .on span { color: #7ee2b8; }
.pr-strip-note { max-width: 40em; margin: 24px auto 0; color: var(--muted); text-align: center; }
@media (min-width: 720px) { .pr-strip { grid-template-columns: 1.3fr repeat(5, 1fr); } }

/* The sums */
.pr-sums { padding: 72px 0; background: var(--brand); color: #fff; text-align: center; }
.pr-sums h2 { margin: 0 0 32px; color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.pr-sums ul { list-style: none; max-width: 980px; margin: 0 auto; padding: 0; display: grid; gap: 28px; }
.pr-sums li > b { display: block; font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.pr-sums strong { display: block; margin-top: 2px; font-size: 1.05rem; }
.pr-sums p { margin: 6px auto 0; max-width: 20em; color: #dbe6ff; font-size: .94rem; }
@media (min-width: 720px) { .pr-sums ul { grid-template-columns: repeat(3, 1fr); } }

/* Growing */
.pr-grow { padding: 84px 0; background: #fff; }
.pr-people { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pr-people span { display: grid; place-items: center; width: 44px; height: 44px; border: 2px dashed #ecd9cc; border-radius: 50%; color: #9db6f2; }
.pr-people .in { border: 0; background: var(--brand); color: #fff; }
.pr-people .ico { width: 20px; height: 20px; }
.pr-grow .pr-head { margin-bottom: 0; }

@media (max-width: 639px) {
  .pr-hero { padding-top: calc(44px + var(--under, 0px)); padding-bottom: 68px; }
  .pr-months, .pr-grow { padding-top: 60px; padding-bottom: 60px; }
  .pr-sums { padding-top: 56px; padding-bottom: 56px; }
  .pr-people { gap: 6px; }
  .pr-people span { width: 32px; height: 32px; }
  .pr-people .ico { width: 16px; height: 16px; }
  .pr-lines li { font-size: .9rem; }
  .pr-lines span { font-size: .84rem; }
}
.pr-hero h1 b { font-size: clamp(3.2rem, 9vw, 5.5rem); }

/* Every product, as cards */
.pc-grid-all { margin: 48px auto 0; max-width: 1140px; }
.pc-grow-all { max-width: 1140px; }
.pr-ship-title { margin: 72px auto 24px; text-align: center; }
.pr-hero .pc-card { text-align: left; }