/* ══════════════════════════════════════════════════════════════════════════
   THE UNIFORM PLAN BLOCK — the one plan component, shared by every surface.

   Marketing (#pricing in index.html), the website dashboard (account.html)
   and the app dashboard replica (app.html) all render the SAME markup and the
   SAME copy. A host changes exactly two things:
     · the PALETTE  — .pc-dark or .pc-light on the block wrapper
     · the HEADER   — .pc-inline drops the title/toggle row to section scale
                      (title left, toggle right) for hosts that already have
                      their own page H1 above the block

   EVERY rule is scoped under .pc-block on purpose. The site already ships
   bare .price-grid and .price-trust rules in styles.css, a bare .price-grid
   in overrides.css and a bare .price-num in pages.css — all of which
   account.html loads. Unscoped selectors here would collide with those; the
   .pc-block prefix both isolates the component and wins on specificity.

   index.html keeps its own inline copy of these rules (that page inlines all
   of its CSS and is where the design originated) — it does NOT load this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── palette: dark (the marketing site's own values, unchanged) ─────────── */
.pc-block.pc-dark {
  --pc-font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --pc-title: #ffffff;
  --pc-lede: #b9bec9;

  --pc-card: linear-gradient(180deg, #17181c, #131417);
  --pc-card-hover: linear-gradient(180deg, #191a1f, #141518);
  --pc-line: rgba(255,255,255,0.13);
  --pc-line-hover: rgba(255,255,255,0.22);

  --pc-ink: #ffffff;
  --pc-desc: rgba(255,255,255,0.68);
  --pc-desc-featured: rgba(255,255,255,0.72);
  --pc-feat: rgba(255,255,255,0.80);
  --pc-label: rgba(255,255,255,0.58);
  --pc-per: rgba(255,255,255,0.55);
  --pc-dot: #5b93ff;

  --pc-feat-line: rgba(88,140,255,0.5);
  --pc-feat-line-hover: rgba(110,158,255,0.72);
  --pc-feat-wash: linear-gradient(180deg, rgba(46,86,170,0.16), rgba(24,44,92,0.10));

  --pc-badge-bg: #2f6fe0;
  --pc-badge-ink: #ffffff;

  --pc-btn: #2f6fe0;
  --pc-btn-hover: #2760cc;
  --pc-btn-active: #21529f;
  --pc-btn-ink: #ffffff;
  --pc-btn-cur-bg: rgba(59,130,246,0.15);
  --pc-btn-cur-ink: #cfe0ff;

  --pc-seg-bg: rgba(255,255,255,0.045);
  --pc-seg-line: rgba(255,255,255,0.13);
  --pc-seg-ink: #b9bec9;
  --pc-seg-ink-hover: #ffffff;
  --pc-seg-ink-on: #16181d;
  --pc-seg-thumb: #ffffff;
  --pc-save-ink: #56cf89;
  --pc-save-bg: #16281d;
  --pc-save-ink-on: #14713c;
  --pc-save-bg-on: #d6f4e2;

  --pc-trust: #d6d9e0;
  --pc-check: #56cf89;
}

/* ── palette: light — the SAME component, retuned for the light hosts
      (the website dashboard and the app's first-run gate). Every metric,
      weight and piece of copy is identical; only these values differ. ──── */
.pc-block.pc-light {
  --pc-font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --pc-title: #0b1020;
  --pc-lede: #5c6579;

  --pc-card: linear-gradient(180deg, #ffffff, #fbfcfe);
  --pc-card-hover: linear-gradient(180deg, #ffffff, #f7f9fd);
  --pc-line: rgba(11,16,32,0.12);
  --pc-line-hover: rgba(11,16,32,0.22);

  --pc-ink: #0b1020;
  --pc-desc: #5c6579;
  --pc-desc-featured: #4c566b;
  --pc-feat: #343c4e;
  --pc-label: rgba(11,16,32,0.50);
  --pc-per: #6e7686;
  --pc-dot: #3b82f6;

  --pc-feat-line: rgba(59,130,246,0.55);
  --pc-feat-line-hover: rgba(59,130,246,0.80);
  --pc-feat-wash: linear-gradient(180deg, rgba(59,130,246,0.075), rgba(59,130,246,0.02));

  --pc-badge-bg: #2f6fe0;
  --pc-badge-ink: #ffffff;

  --pc-btn: #2f6fe0;
  --pc-btn-hover: #2760cc;
  --pc-btn-active: #21529f;
  --pc-btn-ink: #ffffff;
  --pc-btn-cur-bg: rgba(59,130,246,0.12);
  --pc-btn-cur-ink: #2b62b8;

  --pc-seg-bg: #eef1f6;
  --pc-seg-line: rgba(11,16,32,0.10);
  --pc-seg-ink: #5c6579;
  --pc-seg-ink-hover: #0b1020;
  --pc-seg-ink-on: #16181d;
  --pc-seg-thumb: #ffffff;
  --pc-save-ink: #14713c;
  --pc-save-bg: #d6f4e2;
  --pc-save-ink-on: #14713c;
  --pc-save-bg-on: #d6f4e2;

  --pc-trust: #4c566b;
  --pc-check: #1e9e5a;
}

/* ═══ the block itself — geometry identical in both palettes ════════════ */
.pc-block { --live-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--pc-font); }
.pc-block *, .pc-block *::before, .pc-block *::after { box-sizing: border-box; }

/* header: title + subtitle centred, billing segmented control centred BENEATH */
.pc-block .pricing-head { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px; margin-bottom: 51px; }
.pc-block .pricing-title { margin: 0 0 13px;
  font: 700 clamp(1.6rem, 2.6vw, 2.1rem)/1.05 var(--pc-font);
  letter-spacing: -0.032em; color: var(--pc-title); }
.pc-block .pricing-sub { margin: 0 auto; max-width: 56ch; color: var(--pc-lede);
  font-size: 15px; line-height: 1.6; }

/* Dashboard hosts sit the block inside a panel that already has a page H1 above
   it, so the site's 2.1rem centred title outranks the page it lives on. .pc-inline
   keeps every word and every card identical and only drops the header to section
   scale, title left / toggle right — the shape a settings section expects. */
.pc-block.pc-inline .pricing-head { flex-direction: row; align-items: flex-end; text-align: left;
  justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 26px; }
.pc-block.pc-inline .pricing-title { margin: 0 0 4px; font: 700 1.05rem/1.3 var(--pc-font);
  letter-spacing: -0.015em; }
.pc-block.pc-inline .pricing-sub { margin: 0; max-width: 66ch; font-size: 0.84rem; line-height: 1.5; }
.pc-block.pc-inline .bill-seg { padding: 3px; }
.pc-block.pc-inline .bill-seg-thumb { top: 3px; height: 32px; }
.pc-block.pc-inline .bill-seg-opt { height: 32px; padding: 0 14px; font-size: 13px; }
.pc-block.pc-inline .bill-save { font-size: 11px; padding: 3px 5px; }

/* Segmented Monthly | Yearly — one white pill that SLIDES between options. */
.pc-block .bill-seg { position: relative; flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 4px;
  border: 1px solid var(--pc-seg-line); border-radius: 999px; background: var(--pc-seg-bg);
  -webkit-user-select: none; user-select: none; }
.pc-block .bill-seg-thumb { position: absolute; left: 0; top: 4px; height: 40px; width: var(--tw, 0px);
  transform: translateX(var(--tx, 4px)); border-radius: 999px; background: var(--pc-seg-thumb);
  box-shadow: 0 1px 2px rgba(24,44,96,0.14), 0 2px 6px rgba(24,44,96,0.08);
  opacity: 0; pointer-events: none; will-change: transform, width;
  transition: transform .38s var(--live-ease), width .38s var(--live-ease); }
.pc-block .bill-seg.is-ready .bill-seg-thumb { opacity: 1; }
.pc-block .bill-seg-opt { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 17px;
  border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--pc-seg-ink);
  font: 600 14.5px var(--pc-font); -webkit-tap-highlight-color: transparent;
  transition: color .38s var(--live-ease); }
.pc-block .bill-seg-opt:hover { color: var(--pc-seg-ink-hover); }
.pc-block .bill-seg-opt.is-on { color: var(--pc-seg-ink-on); }
.pc-block .bill-seg-opt:focus-visible { outline: 2px solid #5b6ef0; outline-offset: 3px; }
/* no-JS / pre-measure fallback: the active option wears the pill itself, so the
   control never renders as two unstyled words while the thumb is still at 0 width */
.pc-block .bill-seg:not(.is-ready) .bill-seg-opt.is-on { background: var(--pc-seg-thumb);
  box-shadow: 0 1px 2px rgba(24,44,96,0.14), 0 2px 6px rgba(24,44,96,0.08); }
@media (prefers-reduced-motion: reduce) { .pc-block .bill-seg-thumb { transition: none; } }

/* border/box-shadow/letter-spacing are RESET, not merely unset. styles.css — which account.html
   loads alongside this file — ships a bare `.bill-save` for the marketing site's own chip:
   a blue vertical gradient, a blue 1px border, and a six-layer shadow with inset gloss and inset
   bottom shading. Scoping wins the properties this rule SETS (background, colour, padding…) but
   says nothing about the ones it doesn't, so the dashboard chip inherited that blue border and
   the whole bevel-and-gloss stack — a skeuomorphic sticker sitting in an otherwise flat control.
   Anything a bare site rule might inject has to be answered here explicitly. */
.pc-block .bill-save { font: 700 12px/1 var(--pc-font);
  color: var(--pc-save-ink); background: var(--pc-save-bg); padding: 4px 6px; border-radius: 10px;
  border: 0; box-shadow: none; letter-spacing: normal;
  transition: color .38s var(--live-ease), background-color .38s var(--live-ease); }
.pc-block .bill-seg-opt.is-on .bill-save { color: var(--pc-save-ink-on); background: var(--pc-save-bg-on); }

/* ── grid + cards ──────────────────────────────────────────────────────── */
.pc-block .price-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  gap: clamp(14px, 1.5vw, 20px); align-items: stretch; }
.pc-block .price-card.featured { margin-block: -20px; }
.pc-block .price-card { position: relative; display: flex; flex-direction: column;
  padding: 20px 22px 18px;
  border: 1px solid var(--pc-line); border-radius: 18px;
  background: var(--pc-card);
  transition: border-color .2s ease, background .2s ease; }
.pc-block .price-card:hover { border-color: var(--pc-line-hover); background: var(--pc-card-hover); }
.pc-block .price-card.featured { border-color: var(--pc-feat-line);
  background: var(--pc-feat-wash), var(--pc-card);
  padding: 32px 26px 18px; border-radius: 20px; }
.pc-block .price-card.featured:hover { border-color: var(--pc-feat-line-hover); }

.pc-block .price-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 6px 14px; border-radius: 999px; background: var(--pc-badge-bg); color: var(--pc-badge-ink);
  font: 700 10.5px/1 var(--pc-font);
  letter-spacing: 0.085em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 2px 8px -2px rgba(24,60,140,0.45);
  -webkit-user-select: none; user-select: none; }
.pc-block .price-card.featured .price-plan { font-size: clamp(23px, 2vw, 27px); }
.pc-block .price-card.featured .price-num { font-size: clamp(26px, 2.15vw, 30px); }

.pc-block .price-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pc-block .price-id { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
  -webkit-user-select: none; user-select: none; }
.pc-block .price-plan { margin: 0; font: 700 clamp(21px, 1.8vw, 25px)/1.15 var(--pc-font);
  letter-spacing: -0.025em; color: var(--pc-ink); }

.pc-block .price-money { flex: 0 1 auto; min-width: 0; text-align: right; }
.pc-block .price-amount { display: flex; align-items: baseline; justify-content: flex-end; gap: 1px; }
.pc-block .price-cur { font: 700 17px/1 var(--pc-font); color: var(--pc-ink); }
.pc-block .price-num { font: 800 clamp(24px, 1.95vw, 27px)/1 var(--pc-font);
  letter-spacing: -0.03em; color: var(--pc-ink); }
.pc-block .price-per { margin-left: 3px; color: var(--pc-per); font: 500 13.5px var(--pc-font); }

/* ── the 3-day free trial, on the recommended card ─────────────────────────
   Three additions and one rule. Nothing here restyles the price row: the $, the
   number and the unit keep the exact type they have on every other card.

   The line covers the AMOUNT only. Not the $ — the currency has not changed — and
   not /mo, because the plan does still cost that much a MONTH; a rule through
   either would be saying something untrue. It is declared on .price-num rather
   than on a wrapper round the pair, because a line-through is positioned from the
   font metrics of the element it is DECLARED on, not of the text it crosses: on
   the number it computes against the number's own clamp and lands mid-digit, and
   .price-card.featured's larger step is inherited for free. */
.pc-block .price-card.is-trial .price-num { text-decoration: line-through;
  text-decoration-thickness: 2px; text-decoration-color: var(--pc-per); }
/* SIZE says what the plan costs, COLOUR says what you are paying. Left both in full
   ink, the largest, boldest thing on the card would be the price you do NOT pay. */
.pc-block .price-card.is-trial .price-cur,
.pc-block .price-card.is-trial .price-num { color: var(--pc-per); }

/* What is actually charged. A sibling of .price-top, not a third line inside
   .price-money — that is what gives it the card's own left edge and leaves the head
   row as the single price line it is everywhere else. */
.pc-block .price-today { margin-top: 3px; font: 700 17px/1.3 var(--pc-font);
  letter-spacing: -0.015em; color: var(--pc-ink); }

/* …and the commitment, restated at the click. The struck price is the anchor; this
   is what the button actually signs you up for, so it names the figure and the date. */
.pc-block .price-trial-note { margin: 9px 0 0; text-align: center;
  font: 500 12.5px/1.45 var(--pc-font); color: var(--pc-per); }
/* Two stacked lines: the charge, then the terms behind it. The second is set smaller
   because it is the reference, not the commitment — but it is not hidden away either,
   which is the entire point of putting it at the click rather than in a footer. */
.pc-block .price-trial-note span { display: block; }
.pc-block .price-trial-note .ptn-legal { margin-top: 2px; font-size: 11.5px; }
/* UNDERLINED, not merely recoloured. At 11.5px against muted text a colour shift alone
   is not a reliable signal that this is a link — and for anyone who cannot separate
   those two colours it is no signal at all. */
.pc-block .price-trial-note a { color: inherit; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color 120ms ease; }
.pc-block .price-trial-note a:hover { color: var(--pc-ink); }
.pc-block .price-trial-note a:focus-visible { outline: 2px solid var(--pc-btn);
  outline-offset: 2px; border-radius: 3px; }

/* This carried min-height: 46px — two lines' worth of room whether the copy needed one or
   two, so "Includes:" started on the same line across all three cards. The featured card is
   the WIDEST, so its one-line description sat in a box holding room for a line that never
   arrived, and the trial's "$0 today" above it makes that reserved gap plain. The floor was
   guessing at a line count; letting the text set its own height is what brings the three
   "Includes:" rows back level now the middle card carries an extra line. The slack it was
   absorbing goes to .price-cta's margin-top:auto, where the cards already gather their
   differences and keep one button baseline. */
.pc-block .price-desc { margin: 14px 0 0; color: var(--pc-desc);
  font-size: 14.5px; line-height: 1.55; }
.pc-block .price-card.featured .price-desc { color: var(--pc-desc-featured); }

.pc-block .price-sub { margin-top: 18px; font: 700 12px/1.35 var(--pc-font);
  letter-spacing: 0.085em; text-transform: uppercase; color: var(--pc-label);
  -webkit-user-select: none; user-select: none; }
.pc-block .price-feats { list-style: none; display: grid; gap: 11px; margin: 12px 0 0; padding: 0; }
.pc-block .price-feats li { position: relative; padding-left: 17px;
  color: var(--pc-feat); font: 500 14.5px/1.5 var(--pc-font); }
.pc-block .price-feats li b { font-weight: 700; color: var(--pc-ink); }
.pc-block .price-feats li::before { content: ''; position: absolute; left: 3px; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--pc-dot); }

.pc-block .price-cta { margin-top: auto; padding-top: 30px; }
.pc-block .price-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px;
  border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  background: var(--pc-btn); color: var(--pc-btn-ink);
  font: 600 15px var(--pc-font); text-decoration: none;
  -webkit-user-select: none; user-select: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease; }
.pc-block .price-btn:hover { background: var(--pc-btn-hover); }
.pc-block .price-btn:active { background: var(--pc-btn-active); }
.pc-block .price-btn:focus-visible { outline: 2px solid #5b6ef0; outline-offset: 3px; }
/* the plan you are already on — same blue, faded back, inert, and with no
   outline so it reads as one flat inert surface rather than a second button */
.pc-block .price-btn.is-current,
.pc-block .price-btn.is-current:hover,
.pc-block .price-btn.is-current:active {
  background: var(--pc-btn-cur-bg); border-color: transparent; color: var(--pc-btn-cur-ink);
  cursor: default; }

/* transform:none for the same reason as .bill-save — styles.css's bare .price-trust carries a
   translateY(11px) tuned for the marketing page, which was silently nudging the dashboard's
   reassurance row 11px out of position. */
.pc-block .price-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 34px;
  transform: none; }
.pc-block .price-trust span { display: inline-flex; align-items: center; gap: 8px; color: var(--pc-trust);
  font: 500 14.5px/1 var(--pc-font); }
.pc-block .price-trust svg { width: 15px; height: 15px; flex: none; color: var(--pc-check); }

@media (max-width: 880px) {
  .pc-block .price-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; gap: 20px;
    align-items: stretch; }
  .pc-block .price-card.featured { order: -1; padding: 30px 26px 24px; margin-block: 0; }

  /* .pc-inline shrinks the billing control to 32px so it can sit on a section-header row.
     That is fine under a mouse and too small under a thumb — it lands below the 44px touch
     minimum. Every host is single-column by this width and has the room back, so the
     control returns to full size. Desktop is untouched. */
  .pc-block.pc-inline .bill-seg { padding: 4px; }
  .pc-block.pc-inline .bill-seg-opt { height: 44px; padding: 0 17px; font-size: 14.5px; }
  .pc-block.pc-inline .bill-seg-thumb { top: 4px; height: 44px; }
  .pc-block.pc-inline .bill-save { font-size: 12px; padding: 4px 6px; }
}