/* Pricing page (pricing.html), linked after hub.css. One bordered box holds the plan cards and the
   comparison under them on the same four columns (a label column, then Free, Full access and Done
   for you), with the Full access column on light blue all the way down. Then what full access
   includes as a card grid, the value line, the pricing questions and the closing band. */

.p-hero { padding: 56px 0 40px; text-align: center; background: linear-gradient(180deg, var(--sky-soft) 0%, #fff 100%); }
.p-hero h1 { margin: 0 auto 14px; max-width: 820px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.p-hero .lead { margin: 0 auto; max-width: 60ch; font-size: clamp(17px, 2vw, 19px); color: var(--muted); }

.p-table { padding-bottom: 24px; }
.pbox { --cols: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 20px; background: var(--bg); overflow: clip; box-shadow: 0 1px 2px rgb(22 22 22 / 6%), 0 24px 60px rgb(22 22 22 / 8%); }

/* Plan cards: name, one line, the price, a note, the button. The middle one is the recommended plan. */
.p-plans { display: grid; grid-template-columns: var(--cols); }
.p-plans > * { padding: 28px 20px; border-left: 1px solid var(--line); }
.p-plans > :first-child { border-left: 0; }
.p-intro h2 { margin: 0 0 14px; font-size: 18px; letter-spacing: -0.01em; }
.p-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.4; }
.p-ticks li::before, .ct .yes { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.p-ticks li::before { margin-top: 1px; }
/* Room above every name for the badge, so the names, prices and buttons line up across the cards. */
.p-plans > .plan-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto auto; justify-items: center; text-align: center; padding-top: 48px; }
.plan-card.best { background: var(--sky-soft); }
.plan-card h3 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.p-desc { margin: 6px 0 0; max-width: 30ch; min-height: calc(3 * 1.55em); font-size: 16px; color: var(--muted); }
.p-price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 0; }
.p-price b { font-size: 44px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.plan-card.best .p-price b { color: var(--cta-text); }
.p-price span { font-size: 16px; font-weight: 600; color: var(--muted); }
.p-note { display: grid; align-content: start; gap: 2px; margin: 8px 0 18px; font-size: 16px; color: var(--muted); }
.p-later { display: grid; margin-top: 4px; }
.p-later b { color: var(--ink); }
.p-later[hidden] { display: none; }
.plan-card .btn { width: 100%; }
.p-badge { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--cta); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.3; }
.p-badge[hidden] { display: none; }
.p-safe { display: inline-grid; grid-template-columns: auto auto; align-items: start; column-gap: 6px; margin: 12px 0 0; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); }
.p-help { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.p-safe svg { width: 18px; height: 18px; margin-top: 3px; color: var(--good); }

/* The comparison: a heading row that stays under the site header while the rows scroll, group rows
   on grey, then one row per feature (icon, name and a short line, then a value per plan). */
.ct-row { display: grid; grid-template-columns: var(--cols); border-top: 1px solid var(--line); }
.ct-row > * { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 16px; border-left: 1px solid var(--line); text-align: center; font-size: 16px; }
.ct-row > :first-child { justify-content: flex-start; gap: 12px; padding-left: 24px; border-left: 0; text-align: left; }
.ct-row > :nth-child(3) { background: var(--sky-soft); }
.ct-head { position: sticky; top: 64px; z-index: 2; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.ct-head > * { min-height: 48px; font-size: 16px; font-weight: 800; }
.ct-head > :first-child { font-size: 18px; letter-spacing: -0.01em; }
.ct-group > * { grid-column: 1 / -1; justify-content: flex-start; min-height: 0; padding: 10px 24px; background: var(--soft) !important; font-size: 16px; font-weight: 800; color: var(--muted); }
.ct [role="rowheader"] svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct [role="rowheader"] > span { display: grid; font-weight: 600; line-height: 1.35; }
.ct small { font-size: 16px; font-weight: 400; color: var(--muted); }
.ct b { font-size: 17px; font-weight: 800; }
.ct i { display: inline-block; }
.ct .no { width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' fill='none' stroke='%239a9aa4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.pill { padding: 3px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: 16px; font-weight: 600; }

/* What full access includes: a grid of small cards, an icon, a counted title and one or two lines. */
.p-inside { padding-top: 48px; }
.p-inside h2 { text-align: center; }
.p-inside p.sub { margin-inline: auto; text-align: center; }
.p-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.p-cards li { display: grid; align-content: start; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.p-cards svg { width: 28px; height: 28px; padding: 6px; box-sizing: content-box; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--sky); fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-cards h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.p-cards p { margin: 0; font-size: 16px; color: var(--muted); }

/* The value line: what one designed dashboard costs elsewhere, beside the buy button. */
.p-value { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 24px; padding: 24px 28px; border: 1px solid var(--sky-line); border-radius: var(--radius); background: var(--sky-soft); }
.p-value p { margin: 0; max-width: 60ch; font-size: 18px; color: var(--muted); }
.p-value b { color: var(--ink); }
.p-foot { margin: 12px 0 0; font-size: 16px; color: var(--faint); }

/* Under 900px the plan cards stack and each comparison row puts the feature on its own line with
   the three values under it; the heading row keeps just the three plan names. */
@media (max-width: 900px) {
  .p-plans { grid-template-columns: minmax(0, 1fr); }
  .p-plans > * { border-left: 0; border-top: 1px solid var(--line); }
  .p-plans > :first-child { border-top: 0; }
  .ct-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-row > :first-child { grid-column: 1 / -1; padding: 14px 16px 4px; min-height: 0; }
  .ct-row > :nth-child(2) { border-left: 0; }
  .ct-row > :not(:first-child) { min-height: 44px; padding: 6px 8px 12px; }
  .ct-head > :first-child { display: none; }
  .ct-head > * { min-height: 48px !important; padding: 8px !important; font-size: 16px; }
  .ct-head > :nth-child(2) { border-left: 0; }
  .ct-group > * { padding: 10px 16px; }
}
@media (max-width: 640px) {
  .p-hero { padding: 40px 0 28px; }
  .p-plans > .plan-card { padding: 24px 16px; }
  .p-plans > .plan-card.best { padding-top: 48px; }
  .p-desc { min-height: 0; }
  .p-intro { padding: 22px 16px; }
  .p-value { padding: 20px 16px; }
  .p-value .btn { flex: 1 1 100%; }
}