/* ===========================================================================
   FOATT Planning — feature landing page.
   Self-contained `.pl-*` namespace under the .pl-page wrapper.
   Reuses some --foatt-* tokens but defines its own scoped tokens for slate /
   rose / emerald variants where the design diverges.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

.pl-page {
  --pl-paper:        #f0eee9;
  --pl-paper-soft:   #f6f4ef;
  --pl-surface:      #fbfaf7;
  --pl-ink:          #1a1d1a;
  --pl-ink-2:        #2a2d29;
  --pl-ink-3:        #5a5e58;
  --pl-ink-4:        #8a8e88;
  --pl-rule:         #e3ddd1;
  --pl-rule-soft:    #ece6da;
  --pl-forest:       #2f5d3d;
  --pl-forest-dark:  #244830;
  --pl-forest-soft:  rgba(47,93,61,.08);
  --pl-forest-edge:  rgba(47,93,61,.20);
  --pl-forest-softer: rgba(47,93,61,.04);
  --pl-slate:        #5e6b7a;
  --pl-slate-soft:   #eef0f3;
  --pl-slate-text:   #475264;
  --pl-amber:        #a26b1a;
  --pl-emerald:      #3a7a4f;
  --pl-rose:         #a4453a;
  --pl-mono:         "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  background: var(--pl-paper);
  color: var(--pl-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.pl-page *,
.pl-page *::before,
.pl-page *::after { box-sizing: border-box; }

.pl-container { max-width: 1240px; margin: 0 auto; }

/* ---------- Nav ---------------------------------------------------------- */
.pl-nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1240px; margin: 0 auto; padding: 20px 32px;
}
.pl-nav-left { display: flex; align-items: center; gap: 32px; }
.pl-nav-right { display: flex; align-items: center; gap: 12px; }
.pl-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.pl-brand-mark {
  width: 26px; height: 26px; border-radius: 5px;
  background: var(--pl-forest); color: var(--pl-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.pl-brand-name { font-size: 15px; font-weight: 700; color: var(--pl-ink); letter-spacing: -0.2px; }
.pl-nav-links { display: flex; gap: 22px; }
.pl-nav-link  { font-size: 13px; color: var(--pl-ink-3); font-weight: 500; text-decoration: none; }
.pl-nav-link[data-active="true"] { color: var(--pl-ink); font-weight: 600; }
.pl-nav-signin { font-size: 13px; color: var(--pl-ink-2); font-weight: 500; text-decoration: none; }
.pl-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; background: var(--pl-forest); color: var(--pl-surface);
  font-size: 13px; font-weight: 600; border-radius: 6; text-decoration: none; border: 0; cursor: pointer;
}
.pl-btn-primary-lg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 22px; background: var(--pl-forest); color: var(--pl-surface);
  font-size: 15px; font-weight: 600; border-radius: 7px; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 4px 0 -1px rgba(47,93,61,.35), 0 1px 0 rgba(255,255,255,.4) inset;
}
.pl-btn-secondary-lg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 18px; background: transparent; color: var(--pl-ink);
  font-size: 15px; font-weight: 600; border-radius: 7px; text-decoration: none;
  border: 1px solid var(--pl-rule);
}

/* ---------- Hero --------------------------------------------------------- */
.pl-hero {
  position: relative; padding: 48px 32px 80px; overflow: hidden;
}
.pl-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Tile each line in the middle of its tile, then anchor the tile pattern to
     center. That way the page midline always sits on a line — and partial
     tiles spill symmetrically left/right as the viewport changes width. */
  background-image:
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(47,93,61,.085) calc(50% - 0.5px), rgba(47,93,61,.085) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to right,  transparent calc(50% - 0.5px), rgba(47,93,61,.085) calc(50% - 0.5px), rgba(47,93,61,.085) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-size: 100% 48px, 96px 100%;
  background-position: center;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 45%, #000 0%, #000 25%, transparent 90%);
          mask-image: radial-gradient(ellipse 55% 65% at 50% 45%, #000 0%, #000 25%, transparent 90%);
}
.pl-hero-inner { position: relative; max-width: 1240px; margin: 0 auto; }
.pl-hero-text { text-align: center; max-width: 880px; margin: 0 auto 40px; }
.pl-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 7px;
  background: var(--pl-forest-soft); border-radius: 99px;
  font-size: 11.5px; font-weight: 600; color: var(--pl-forest-dark);
  margin-bottom: 22px;
}
.pl-pill-mark {
  width: 16px; height: 16px; border-radius: 99px;
  background: var(--pl-forest); color: var(--pl-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
}
.pl-h1 {
  font-size: 64px; line-height: 1.02; letter-spacing: -1.8px; font-weight: 700;
  color: var(--pl-ink); margin: 0; text-wrap: balance;
}
.pl-h1 em { font-style: normal; color: var(--pl-forest); }
.pl-sub {
  font-size: 18px; line-height: 1.55; color: var(--pl-ink-3);
  margin: 22px auto 0; max-width: 660px; text-wrap: pretty;
}
.pl-cta-row { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; }
.pl-trial-row {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 12.5px; color: var(--pl-ink-3); margin-top: 18px;
}
.pl-trial-row > span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Hero mock (app screen) -------------------------------------- */
.pl-mock {
  background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 12px; box-shadow: 0 30px 60px -22px rgba(14,14,12,.22), 0 1px 0 rgba(14,14,12,.04);
  overflow: hidden; display: flex; height: 480px;
}
.pl-mock-side {
  width: 158px; background: var(--pl-paper-soft); border-right: 1px solid var(--pl-rule);
  padding: 12px 8px; flex-shrink: 0;
}
.pl-mock-brand {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px 12px; border-bottom: 1px solid var(--pl-rule); margin-bottom: 10px;
}
.pl-mock-brand-mark {
  width: 18px; height: 18px; border-radius: 4px; background: var(--pl-forest);
  color: var(--pl-surface); display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.pl-mock-brand-name { font-size: 12px; font-weight: 700; color: var(--pl-ink); }
.pl-mock-eyebrow {
  font-size: 9px; font-weight: 700; color: var(--pl-ink-4);
  letter-spacing: 0.5px; padding: 0 6px 4px; text-transform: uppercase;
}
.pl-mock-eyebrow.pl-spaced { padding-top: 10px; }
.pl-mock-nav-item {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 4px;
  font-size: 11.5px; font-weight: 500; color: var(--pl-ink-2); margin-bottom: 1px;
}
.pl-mock-nav-item[data-active="true"] {
  background: var(--pl-forest-soft); color: var(--pl-forest-dark); font-weight: 600;
}
.pl-mock-plan-row {
  display: flex; align-items: center; gap: 7px; padding: 4px 7px; border-radius: 4px;
  font-size: 11px; color: var(--pl-ink-3); font-weight: 500;
}
.pl-mock-plan-row[data-active="true"] {
  color: var(--pl-forest-dark); font-weight: 600; background: rgba(47,93,61,.05);
}
.pl-mock-plan-dot { width: 4px; height: 4px; border-radius: 99px; background: var(--pl-ink-4); }
.pl-mock-plan-row[data-active="true"] .pl-mock-plan-dot { background: var(--pl-forest); }
.pl-mock-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.pl-mock-crumb {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--pl-rule);
  background: var(--pl-paper-soft); font-size: 11.5px; color: var(--pl-ink-3);
}
.pl-mock-crumb-strong { color: var(--pl-ink); font-weight: 600; }
.pl-mock-dim-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 4px; font-size: 11px; color: var(--pl-ink); font-weight: 500; cursor: pointer;
}
.pl-mock-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px;
}
.pl-mock-status-live { display: inline-flex; align-items: center; gap: 4px; }
.pl-mock-status-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--pl-emerald); }
.pl-mock-status-saved { color: var(--pl-ink-4); }

.pl-mock-fbar {
  display: flex; align-items: stretch; height: 30px;
  border-bottom: 1px solid var(--pl-rule); background: var(--pl-surface);
}
.pl-mock-fbar-cell {
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  border-right: 1px solid var(--pl-rule); background: var(--pl-paper-soft);
  font-family: var(--pl-mono); font-size: 11px; font-weight: 600; color: var(--pl-ink);
  min-width: 110px;
}
.pl-mock-fbar-fx {
  display: flex; align-items: center; justify-content: center;
  width: 28px; border-right: 1px solid var(--pl-rule);
  background: var(--pl-paper-soft); color: var(--pl-ink-3);
}
.pl-mock-fbar-formula {
  flex: 1; display: flex; align-items: center; padding: 0 10px;
  font-family: var(--pl-mono); font-size: 12px; color: var(--pl-ink);
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.pl-mock-fbar-formula .pl-eq { color: var(--pl-forest); font-weight: 700; }
.pl-mock-caret {
  display: inline-block; width: 1px; height: 13px;
  background: var(--pl-ink); margin-left: 2px; animation: plBlink 1s steps(2) infinite;
}
@keyframes plBlink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }

.pl-mock-grid { flex: 1; overflow: hidden; position: relative; }
.pl-mock-grid-head, .pl-mock-grid-row { display: flex; }
.pl-mock-grid-head {
  border-bottom: 1px solid var(--pl-rule); background: var(--pl-paper-soft);
}
.pl-mock-grid-row { border-bottom: 1px solid var(--pl-rule-soft); height: 32px; }
.pl-mock-grid-row[data-total="true"] { background: var(--pl-paper-soft); border-top: 1px solid var(--pl-rule); }

.pl-mock-grid-cell-account {
  width: 174px; padding: 5px 10px; border-right: 1px solid var(--pl-rule);
  font-size: 9px; font-weight: 700; color: var(--pl-ink-3);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.pl-mock-grid-row .pl-mock-grid-cell-account {
  height: 100%; padding: 0 10px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--pl-ink);
  letter-spacing: 0; text-transform: none; position: relative;
}
.pl-mock-grid-row[data-total="true"] .pl-mock-grid-cell-account { font-weight: 600; }
.pl-mock-grid-row[data-active-row="true"] .pl-mock-grid-cell-account {
  color: var(--pl-forest-dark); background: rgba(47,93,61,.04);
}
.pl-mock-grid-row[data-active-row="true"] .pl-mock-grid-cell-account::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px; background: var(--pl-forest);
}
.pl-mock-grid-code { font-family: var(--pl-mono); font-size: 10px; color: var(--pl-ink-4); font-weight: 500; min-width: 28px; }

.pl-mock-grid-cell-period {
  flex: 1; padding: 5px 8px; text-align: right; border-right: 1px solid var(--pl-rule);
  font-size: 9px; font-weight: 700; color: var(--pl-ink-3);
  letter-spacing: 0.4px; text-transform: uppercase; font-variant-numeric: tabular-nums;
  position: relative;
}
.pl-mock-grid-cell-period:last-child { border-right: 0; }
.pl-mock-grid-cell-period[data-actual="true"] {
  background: var(--pl-slate-soft); color: var(--pl-slate-text);
}
.pl-mock-grid-cell-period .pl-act-flag {
  font-size: 8px; color: var(--pl-ink-4); font-weight: 700;
}
.pl-mock-grid-cell-period[data-actual="true"] .pl-act-flag { color: var(--pl-slate); }
.pl-mock-grid-cell-period[data-active-col="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pl-forest);
}

.pl-mock-grid-cell {
  flex: 1; padding: 0 8px; display: flex; align-items: center; justify-content: flex-end;
  border-right: 1px solid var(--pl-rule-soft); font-family: var(--pl-mono);
  font-size: 11.5px; font-weight: 500; color: var(--pl-ink);
  font-variant-numeric: tabular-nums; position: relative;
  transition: background .25s;
}
.pl-mock-grid-cell:last-child { border-right: 0; }
.pl-mock-grid-cell[data-neg="true"] { color: var(--pl-rose); }
.pl-mock-grid-cell[data-actual="true"] { background: var(--pl-slate-soft); color: var(--pl-slate-text); }
.pl-mock-grid-cell[data-actual="true"][data-neg="true"] { color: var(--pl-slate-text); }
.pl-mock-grid-row[data-total="true"] .pl-mock-grid-cell { font-weight: 600; }
.pl-mock-grid-cell[data-active-col="true"]:not([data-active="true"]) { background: rgba(47,93,61,.03); }
.pl-mock-grid-row[data-active-row="true"] .pl-mock-grid-cell:not([data-actual="true"]):not([data-active="true"]) {
  background: rgba(47,93,61,.03);
}
.pl-mock-grid-cell[data-active="true"] {
  background: var(--pl-forest-soft); outline: 2px solid var(--pl-forest); outline-offset: -2px;
}
.pl-mock-grid-cell[data-active="true"]::after {
  content: ""; position: absolute; right: -3px; bottom: -3px;
  width: 6px; height: 6px; background: var(--pl-forest); border: 1px solid var(--pl-surface);
}

/* ---------- Trust strip -------------------------------------------------- */
.pl-trust {
  border-top: 1px solid var(--pl-rule); border-bottom: 1px solid var(--pl-rule);
  padding: 22px 32px; background: var(--pl-paper-soft);
}
.pl-trust-row {
  max-width: 1240px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; gap: 22px; flex-wrap: wrap; font-size: 12px; color: var(--pl-ink-3);
}
.pl-trust-label { font-weight: 600; color: var(--pl-ink-2); }
.pl-trust-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--pl-ink-2);
}
.pl-brand-tile {
  width: 20px; height: 20px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Inter", sans-serif; font-weight: 800; letter-spacing: -0.4px;
  font-size: 11px;
}
.pl-trust-item[data-soon="true"] { color: var(--pl-ink-3); }
.pl-trust-item[data-soon="true"] .pl-brand-tile { opacity: .55; filter: grayscale(.25); }
.pl-soon-pill {
  display: inline-flex; align-items: center;
  padding: 1px 6px; margin-left: 1px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--pl-amber); background: rgba(162,107,26,.10);
  border: 1px solid rgba(162,107,26,.25); border-radius: 99px;
}

.pl-brand-qb   { background: #2ca01c; color: #fff; }
.pl-brand-ns   { background: #0a294b; color: #fff; }
.pl-brand-x    { background: #13b5ea; color: #fff; font-family: Georgia, serif; font-size: 14px; }
.pl-brand-sage { background: #00d639; color: #06280f; }
.pl-brand-pl   { background: #000;    color: #fff; }
.pl-brand-xls  { background: #107c41; color: #fff; }
.pl-brand-gs   { background: #0f9d58; color: #fff; }

/* ---------- Section base ------------------------------------------------- */
.pl-section { padding: 100px 32px; }
.pl-section[data-bg="paper-soft"] {
  background: var(--pl-paper-soft);
  border-top: 1px solid var(--pl-rule);
  border-bottom: 1px solid var(--pl-rule);
}
.pl-section-head { text-align: center; margin-bottom: 48px; }
.pl-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--pl-forest);
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px;
}
.pl-h2 {
  font-size: 38px; font-weight: 700; color: var(--pl-ink);
  letter-spacing: -0.8px; margin: 0 0 14px; text-wrap: balance;
}
.pl-section-sub {
  font-size: 16px; color: var(--pl-ink-3); max-width: 640px;
  margin: 0 auto; line-height: 1.55; text-wrap: pretty;
}

/* ---------- Two-pane sections (pillar 1, 2) ------------------------------ */
.pl-pane { display: grid; gap: 56px; align-items: center; }
.pl-pane[data-split="left-narrow"]  { grid-template-columns: 0.85fr 1.4fr; }
.pl-pane[data-split="right-narrow"] { grid-template-columns: 1.4fr 0.85fr; }
.pl-pane-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--pl-forest);
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px;
}
.pl-pane-h2 {
  font-size: 38px; font-weight: 700; color: var(--pl-ink);
  letter-spacing: -0.8px; margin: 0 0 16px; text-wrap: balance;
}
.pl-pane-body {
  font-size: 15.5px; line-height: 1.6; color: var(--pl-ink-3);
  margin: 0 0 22px; text-wrap: pretty;
}
.pl-bullet-list { display: flex; flex-direction: column; gap: 10px; }
.pl-bullet { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--pl-ink-2); }
.pl-bullet-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--pl-forest-soft); color: var(--pl-forest);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Drag-drop canvas mock */
.pl-canvas {
  background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 50px -25px rgba(14,14,12,.18);
}
.pl-canvas-head {
  padding: 8px 14px; border-bottom: 1px solid var(--pl-rule);
  background: var(--pl-paper-soft); display: flex; align-items: center; gap: 10px;
}
.pl-canvas-head-title { font-size: 12px; font-weight: 600; color: var(--pl-ink); }
.pl-tag-unsaved {
  font-size: 10px; padding: 2px 6px; background: var(--pl-forest-soft);
  color: var(--pl-forest-dark); border-radius: 3px; font-weight: 600;
}
.pl-canvas-save {
  margin-left: auto; padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: var(--pl-forest); color: var(--pl-surface);
  border: 0; border-radius: 4px; cursor: pointer;
}
.pl-chip-strip {
  padding: 10px 14px; border-bottom: 1px solid var(--pl-rule); background: var(--pl-paper-soft);
}
.pl-chip-strip-label,
.pl-mini-eyebrow {
  font-size: 9.5px; font-weight: 700; color: var(--pl-ink-4);
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px;
}
.pl-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.pl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 6px; font-size: 11px; font-weight: 500;
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 99px;
  color: var(--pl-ink-2);
}
.pl-chip-code { font-family: var(--pl-mono); font-size: 9px; color: var(--pl-ink-4); }

.pl-dropzones {
  display: grid; grid-template-columns: 120px 1fr;
}
.pl-dropzone {
  padding: 10px 12px; border-bottom: 1px solid var(--pl-rule); background: var(--pl-paper-soft);
}
.pl-dropzone[data-axis="rows"] { border-right: 1px solid var(--pl-rule); }
.pl-chip-dropped {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 6px; font-size: 11px; font-weight: 600;
  background: var(--pl-forest-soft); color: var(--pl-forest-dark);
  border: 1px solid var(--pl-forest-edge); border-radius: 99px; align-self: flex-start;
  transition: all .25s;
}
.pl-chip-dropped[data-highlighted="true"] {
  background: var(--pl-forest); color: var(--pl-surface); border-color: var(--pl-forest);
}

.pl-pivot-stage {
  padding: 12px; background: var(--pl-surface); position: relative;
}
.pl-pivot-table {
  border: 1px solid var(--pl-rule); border-radius: 6px; overflow: hidden; background: var(--pl-surface);
}
.pl-pivot-head { display: flex; background: var(--pl-paper-soft); border-bottom: 1px solid var(--pl-rule); }
.pl-pivot-axis {
  width: 130px; padding: 5px 10px; border-right: 1px solid var(--pl-rule);
  font-size: 9.5px; font-weight: 700; color: var(--pl-ink-4);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.pl-pivot-axis[data-set="true"] { color: var(--pl-forest-dark); }
.pl-pivot-col {
  flex: 1; padding: 5px 8px; text-align: right; border-right: 1px solid var(--pl-rule);
  font-size: 9.5px; font-weight: 700; color: var(--pl-forest-dark);
  letter-spacing: 0.4px; font-variant-numeric: tabular-nums;
}
.pl-pivot-col:last-child { border-right: 0; }
.pl-pivot-empty-cols { flex: 1; padding: 5px 12px; font-size: 9.5px; color: var(--pl-ink-4); }
.pl-pivot-empty-rows { padding: 26px 14px; text-align: center; color: var(--pl-ink-4); font-size: 11.5px; }
.pl-pivot-row { display: flex; height: 26px; border-bottom: 1px solid var(--pl-rule-soft); }
.pl-pivot-row:last-child { border-bottom: 0; }
.pl-pivot-row > .pl-pivot-axis-cell {
  width: 130px; padding: 0 10px; display: flex; align-items: center;
  border-right: 1px solid var(--pl-rule); font-size: 12px; font-weight: 500; color: var(--pl-ink);
}
.pl-pivot-row > .pl-pivot-cell {
  flex: 1; padding: 0 8px; display: flex; align-items: center; justify-content: flex-end;
  border-right: 1px solid var(--pl-rule-soft); font-family: var(--pl-mono);
  font-size: 11px; color: var(--pl-ink); font-variant-numeric: tabular-nums;
  transition: opacity .35s;
}
.pl-pivot-row > .pl-pivot-cell:last-child { border-right: 0; }
.pl-pivot-row > .pl-pivot-cell[data-empty="true"] { opacity: .25; }

.pl-cursor {
  position: absolute; display: flex; align-items: center; gap: 4px;
  pointer-events: none;
}
.pl-cursor-chip {
  padding: 2px 7px 2px 5px; font-size: 10.5px; font-weight: 600;
  background: var(--pl-forest); color: var(--pl-surface); border-radius: 4px;
  display: inline-flex; align-items: center; gap: 3px;
}

/* Right-click menu mock */
.pl-ctx-mock {
  position: relative; background: var(--pl-surface);
  border: 1px solid var(--pl-rule); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 50px -25px rgba(14,14,12,.18); height: 420px;
}
.pl-ctx-grid-wrap { padding: 14px; }
.pl-ctx-grid {
  border: 1px solid var(--pl-rule); border-radius: 6px; overflow: hidden;
}
.pl-ctx-grid-head { display: flex; background: var(--pl-paper-soft); border-bottom: 1px solid var(--pl-rule); }
.pl-ctx-account-h {
  width: 170px; padding: 6px 10px; border-right: 1px solid var(--pl-rule);
  font-size: 9.5px; font-weight: 700; color: var(--pl-ink-3);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.pl-ctx-period-h {
  flex: 1; padding: 6px 8px; text-align: right; border-right: 1px solid var(--pl-rule);
  font-size: 9.5px; font-weight: 700; color: var(--pl-ink-3);
  letter-spacing: 0.4px; font-variant-numeric: tabular-nums;
}
.pl-ctx-period-h:last-child { border-right: 0; }
.pl-ctx-row { display: flex; height: 28px; border-bottom: 1px solid var(--pl-rule-soft); }
.pl-ctx-row:last-child { border-bottom: 0; }
.pl-ctx-row[data-active="true"] { background: rgba(47,93,61,.04); }
.pl-ctx-account {
  width: 170px; padding: 0 10px; display: flex; align-items: center; gap: 8px;
  border-right: 1px solid var(--pl-rule); font-size: 12px; font-weight: 500; color: var(--pl-ink);
}
.pl-ctx-cell {
  flex: 1; padding: 0 8px; display: flex; align-items: center; justify-content: flex-end;
  border-right: 1px solid var(--pl-rule-soft); font-family: var(--pl-mono);
  font-size: 11px; font-weight: 500; color: var(--pl-ink); font-variant-numeric: tabular-nums;
}
.pl-ctx-cell:last-child { border-right: 0; }
.pl-ctx-cell[data-neg="true"] { color: var(--pl-rose); }
.pl-ctx-cell[data-active="true"] {
  background: var(--pl-forest-soft); outline: 2px solid var(--pl-forest); outline-offset: -2px;
}
.pl-ctx-menu {
  position: absolute; top: 110px; left: 360px; width: 240px;
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 8px;
  box-shadow: 0 18px 36px -8px rgba(14,14,12,.28), 0 0 0 1px rgba(14,14,12,.04);
  padding: 4px; z-index: 10;
}
.pl-ctx-menu-head {
  padding: 6px 10px 4px; font-size: 9.5px; font-weight: 700; color: var(--pl-ink-4);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.pl-ctx-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px; cursor: pointer;
}
.pl-ctx-menu-item[data-highlight="true"] { background: var(--pl-forest-soft); }
.pl-ctx-menu-item[data-highlight="true"] .pl-ctx-menu-label { color: var(--pl-forest-dark); font-weight: 600; }
.pl-ctx-menu-icon { color: var(--pl-ink-3); flex-shrink: 0; }
.pl-ctx-menu-item[data-highlight="true"] .pl-ctx-menu-icon { color: var(--pl-forest); }
.pl-ctx-menu-label { font-size: 12px; color: var(--pl-ink); font-weight: 500; }
.pl-ctx-menu-kbd {
  margin-left: auto; font-family: var(--pl-mono); font-size: 10px; color: var(--pl-ink-4);
}
.pl-ctx-menu-divider { height: 1px; background: var(--pl-rule-soft); margin: 3px 4px; }
.pl-ctx-cursor-mark { position: absolute; top: 100px; left: 348px; }

/* Fluid navigation breadcrumb */
.pl-nav-board {
  background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 12px; padding: 32px 36px;
  box-shadow: 0 18px 40px -22px rgba(14,14,12,.16);
}
.pl-nav-crumb {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--pl-paper-soft);
  border-radius: 7px; border: 1px solid var(--pl-rule); margin-bottom: 24px; font-size: 13px;
}
.pl-nav-crumb-seg {
  padding: 2px 9px; border-radius: 4px;
  background: transparent; color: var(--pl-ink-3); font-weight: 500;
  border: 1px solid transparent; transition: all .35s;
}
.pl-nav-crumb-seg[data-current="true"] {
  background: var(--pl-forest-soft); color: var(--pl-forest-dark);
  font-weight: 600; border-color: var(--pl-forest-edge);
}
.pl-nav-crumb-tail {
  margin-left: auto; font-size: 11px; color: var(--pl-ink-4); font-family: var(--pl-mono);
}
.pl-nav-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.pl-nav-step {
  padding: 16px; background: var(--pl-paper-soft);
  border: 1px solid var(--pl-rule); border-radius: 8px; transition: all .35s;
}
.pl-nav-step[data-active="true"] {
  background: var(--pl-forest-soft); border-color: rgba(47,93,61,.25);
}
.pl-nav-step-title { font-size: 13px; font-weight: 700; color: var(--pl-ink); margin-bottom: 4px; }
.pl-nav-step[data-active="true"] .pl-nav-step-title { color: var(--pl-forest-dark); }
.pl-nav-step-body { font-size: 12px; line-height: 1.5; color: var(--pl-ink-3); }

/* How it works */
.pl-hiw-card {
  background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(14,14,12,.18);
}
.pl-hiw-grid { display: grid; grid-template-columns: 260px 1fr; min-height: 360px; }
.pl-hiw-list {
  border-right: 1px solid var(--pl-rule); background: var(--pl-paper-soft); padding: 14px;
}
.pl-hiw-step {
  display: block; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 6px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; cursor: pointer; transition: all .25s;
}
.pl-hiw-step[data-active="true"] {
  background: var(--pl-surface); border-color: var(--pl-forest-edge);
  box-shadow: 0 1px 0 rgba(14,14,12,.04);
}
.pl-hiw-step-num {
  font-family: var(--pl-mono); font-size: 10.5px; font-weight: 700;
  color: var(--pl-ink-4); margin-bottom: 3px;
}
.pl-hiw-step[data-active="true"] .pl-hiw-step-num { color: var(--pl-forest); }
.pl-hiw-step-title {
  font-size: 13.5px; font-weight: 600; color: var(--pl-ink-2);
  margin-bottom: 4px; letter-spacing: -0.2px;
}
.pl-hiw-step[data-active="true"] .pl-hiw-step-title { color: var(--pl-ink); }
.pl-hiw-step-body { font-size: 12px; line-height: 1.5; color: var(--pl-ink-3); }
.pl-hiw-stage {
  position: relative; background: var(--pl-surface); overflow: hidden;
}
.pl-hiw-stage > .pl-stage {
  position: absolute; inset: 0; padding: 24px;
  animation: plFade .5s ease-out;
}
.pl-hiw-stage > .pl-stage:not([data-current="true"]) { display: none; }
@keyframes plFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pl-stage-connect { display: grid; grid-template-columns: auto 80px 1fr; align-items: center; gap: 18px; height: 100%; }
.pl-stage-sources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 280px; }
.pl-stage-source {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 7px;
}
.pl-stage-source .pl-brand-tile { width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0; font-size: 13px; }
.pl-stage-source-name { font-size: 11.5px; font-weight: 600; color: var(--pl-ink); line-height: 1.2; }
.pl-stage-source-sub { font-size: 9.5px; color: var(--pl-ink-4); margin-top: 1px; }
.pl-stage-flow { display: flex; flex-direction: column; gap: 5px; align-items: center; justify-self: center; }
.pl-stage-flow-pulse {
  width: 50px; height: 2px; background: var(--pl-forest); border-radius: 1px; opacity: 0.18;
  animation: plFlow 1.6s infinite;
}
@keyframes plFlow { 0%,100% { opacity: 0.15; transform: translateX(0); } 50% { opacity: 1; transform: translateX(8px); } }
.pl-stage-dest {
  background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 9px; padding: 14px 16px; max-width: 220px; justify-self: start;
}
.pl-stage-dest-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.pl-stage-dest-mark {
  width: 22px; height: 22px; border-radius: 5px; background: var(--pl-forest); color: var(--pl-surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.pl-stage-dest-name { font-size: 12px; font-weight: 700; color: var(--pl-ink); }
.pl-stage-dest-eyebrow {
  font-size: 9.5px; font-weight: 700; color: var(--pl-ink-4);
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 5px;
}
.pl-stage-dest-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; font-size: 11px;
}
.pl-stage-dest-key { color: var(--pl-ink-2); }
.pl-stage-dest-val {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--pl-emerald); font-weight: 600; font-size: 10px;
}

.pl-stage-cells {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: 14px; max-width: 600px; margin: 0 auto;
}
.pl-stage-fbar {
  background: var(--pl-paper-soft); border: 1px solid var(--pl-rule); border-radius: 7px;
  padding: 8px 12px; display: flex; align-items: center; gap: 8px;
  font-family: var(--pl-mono); font-size: 13px; color: var(--pl-ink);
}
.pl-stage-fbar .pl-eq { color: var(--pl-forest); font-weight: 700; }
.pl-stage-cells-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.pl-stage-mini-cell {
  height: 38px; background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 5px;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;
  font-family: var(--pl-mono); font-size: 13px; color: var(--pl-rose); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pl-stage-mini-cell[data-active="true"] {
  background: var(--pl-forest-soft); border-color: var(--pl-forest); font-weight: 700;
}
.pl-stage-shortcuts { display: flex; gap: 12px; font-size: 11.5px; color: var(--pl-ink-3); margin-top: 8px; }
.pl-stage-shortcut { display: inline-flex; align-items: center; gap: 5px; }
.pl-kbd {
  font-family: var(--pl-mono); font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: var(--pl-surface); border: 1px solid var(--pl-rule); color: var(--pl-ink);
}

.pl-stage-drivers {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: 16px; max-width: 580px; margin: 0 auto;
}
.pl-stage-driver-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-stage-driver-card {
  background: var(--pl-forest-soft); border: 1px solid rgba(47,93,61,.25);
  border-radius: 7px; padding: 10px 12px;
}
.pl-stage-driver-head { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.pl-stage-driver-mark {
  width: 12px; height: 12px; border-radius: 2px; background: var(--pl-forest); color: var(--pl-surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700;
}
.pl-stage-driver-label { font-size: 11px; font-weight: 600; color: var(--pl-forest-dark); }
.pl-stage-driver-value { font-size: 18px; font-weight: 700; color: var(--pl-ink); font-variant-numeric: tabular-nums; }
.pl-stage-driver-delta { font-size: 10px; color: var(--pl-emerald); font-weight: 600; }
.pl-stage-driver-formula {
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 7px;
  padding: 10px 12px; font-family: var(--pl-mono); font-size: 12px; color: var(--pl-ink);
}
.pl-stage-driver-formula .pl-tag {
  background: var(--pl-forest-soft); color: var(--pl-forest-dark);
  padding: 1px 5px; border-radius: 3px; font-weight: 700;
}
.pl-stage-driver-foot { font-size: 11.5px; color: var(--pl-ink-3); line-height: 1.5; }

.pl-stage-pivot {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: 14px; max-width: 620px; margin: 0 auto;
}
.pl-stage-pivot-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--pl-ink-4);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.pl-stage-pivot-table {
  border: 1px solid var(--pl-rule); border-radius: 7px; overflow: hidden; background: var(--pl-surface);
}
.pl-stage-pivot-head { display: flex; background: var(--pl-paper-soft); border-bottom: 1px solid var(--pl-rule); }
.pl-stage-pivot-axis-h {
  width: 130px; padding: 6px 10px; border-right: 1px solid var(--pl-rule);
  font-size: 9.5px; font-weight: 700; color: var(--pl-forest-dark);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.pl-stage-pivot-col-h {
  flex: 1; padding: 6px 10px; text-align: right; border-right: 1px solid var(--pl-rule);
  font-size: 9.5px; font-weight: 700; color: var(--pl-forest-dark);
  letter-spacing: 0.4px; font-variant-numeric: tabular-nums;
}
.pl-stage-pivot-col-h:last-child { border-right: 0; }
.pl-stage-pivot-col-h[data-total="true"] { background: var(--pl-forest-soft); }
.pl-stage-pivot-row { display: flex; height: 28px; border-bottom: 1px solid var(--pl-rule-soft); }
.pl-stage-pivot-row:last-child { border-bottom: 0; }
.pl-stage-pivot-row > .pl-stage-pivot-axis {
  width: 130px; padding: 0 10px; display: flex; align-items: center;
  border-right: 1px solid var(--pl-rule); font-size: 12px; color: var(--pl-ink);
}
.pl-stage-pivot-row > .pl-stage-pivot-cell {
  flex: 1; padding: 0 10px; display: flex; align-items: center; justify-content: flex-end;
  border-right: 1px solid var(--pl-rule-soft); font-family: var(--pl-mono);
  font-size: 11.5px; color: var(--pl-ink); font-variant-numeric: tabular-nums;
}
.pl-stage-pivot-row > .pl-stage-pivot-cell:last-child { border-right: 0; }
.pl-stage-pivot-row > .pl-stage-pivot-cell[data-total="true"] {
  background: var(--pl-forest-softer); font-weight: 700;
}
.pl-stage-pivot-actions { display: flex; gap: 8px; font-size: 11px; color: var(--pl-ink-3); }
.pl-stage-pivot-actions span { display: inline-flex; align-items: center; gap: 5px; }

/* Capabilities bento */
.pl-bento {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 16px;
}
.pl-bento-card {
  background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 2px 0 rgba(14,14,12,.02);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}
.pl-bento-card[data-accent="true"] {
  grid-column: span 1; grid-row: span 2;
  box-shadow: 0 12px 26px -18px rgba(14,14,12,.18);
}
.pl-bento-card[data-accent="true"]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pl-forest);
}
.pl-bento-label {
  display: inline-flex; align-items: center; gap: 7px;
}
.pl-bento-label-num {
  font-family: var(--pl-mono); font-size: 10px; font-weight: 700;
  color: var(--pl-forest); letter-spacing: 0.5px;
}
.pl-bento-label-dot { width: 4px; height: 4px; border-radius: 99px; background: var(--pl-ink-4); }
.pl-bento-label-text {
  font-size: 10.5px; font-weight: 700; color: var(--pl-ink-3);
  letter-spacing: 0.6px; text-transform: uppercase;
}
.pl-bento-h {
  font-size: 18px; font-weight: 700; color: var(--pl-ink);
  margin: 8px 0 4px; letter-spacing: -0.3px;
}
.pl-bento-card[data-accent="true"] .pl-bento-h { font-size: 20px; }
.pl-bento-body { font-size: 12.5px; line-height: 1.5; color: var(--pl-ink-3); margin: 0; max-width: 320px; }
.pl-bento-card[data-accent="true"] .pl-bento-body { font-size: 13px; line-height: 1.55; }

.pl-bento-kbd-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-bento-kbd {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 7px 4px 5px; background: var(--pl-surface);
  border: 1px solid var(--pl-rule); border-radius: 4px;
}
.pl-bento-kbd-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 4px;
  background: var(--pl-paper-soft); border: 1px solid var(--pl-rule);
  border-bottom: 2px solid var(--pl-rule); border-radius: 3px;
  font-family: var(--pl-mono); font-size: 10px; font-weight: 600; color: var(--pl-ink);
}
.pl-bento-kbd-l { font-size: 10.5px; color: var(--pl-ink-3); }

.pl-bento-fbar-list { display: flex; flex-direction: column; gap: 5px; }
.pl-bento-fbar-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 9px;
  background: var(--pl-paper-soft); border: 1px solid var(--pl-rule); border-radius: 5px;
  font-family: var(--pl-mono); font-size: 11px; color: var(--pl-ink);
}
.pl-bento-fbar-row[data-highlight="true"] {
  background: var(--pl-forest-soft); border-color: var(--pl-forest-edge);
}
.pl-bento-fbar-row .pl-fx { color: var(--pl-ink-4); font-weight: 700; }
.pl-bento-fbar-row .pl-eq { color: var(--pl-forest); font-weight: 700; }
.pl-code-pill {
  font-family: var(--pl-mono); font-size: 11px; padding: 1px 5px;
  background: var(--pl-forest-soft); color: var(--pl-forest-dark);
  border-radius: 3px; font-weight: 600;
}

.pl-bento-drop-eyebrow {
  font-size: 9px; font-weight: 700; color: var(--pl-ink-4);
  letter-spacing: 0.5px; text-transform: uppercase; margin-top: 4px;
}
.pl-bento-dropbox {
  display: flex; gap: 4px; padding: 5px 6px;
  background: var(--pl-forest-soft); border: 1px dashed rgba(47,93,61,.35);
  border-radius: 5px; min-height: 28px; align-items: center;
}
.pl-bento-chip-on-forest {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 5px; background: var(--pl-forest); color: var(--pl-surface);
  border-radius: 99px; font-size: 10.5px; font-weight: 600;
}
.pl-bento-chip-pool { display: flex; gap: 4px; flex-wrap: wrap; }
.pl-bento-chip-pool > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 5px; background: var(--pl-surface);
  border: 1px solid var(--pl-rule); border-radius: 99px;
  font-size: 10.5px; font-weight: 500; color: var(--pl-ink-2);
}

.pl-bento-history { display: flex; flex-direction: column; gap: 7px; }
.pl-history-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pl-history-avatar {
  width: 22px; height: 22px; border-radius: 99px; color: var(--pl-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.pl-history-avatar[data-tone="forest"] { background: var(--pl-forest); }
.pl-history-avatar[data-tone="slate"]  { background: var(--pl-slate); }
.pl-history-avatar[data-tone="muted"]  { background: var(--pl-ink-4); }
.pl-history-val { font-family: var(--pl-mono); color: var(--pl-rose); font-weight: 600; min-width: 50px; }
.pl-history-note { color: var(--pl-ink-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-history-when { color: var(--pl-ink-4); font-size: 10px; }

.pl-bento-crumb { display: flex; flex-direction: column; gap: 4px; }
.pl-bento-crumb-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; padding: 4px 6px; border-radius: 4px;
  border: 1px solid transparent;
}
.pl-bento-crumb-row[data-current="true"] {
  background: var(--pl-forest-soft); border-color: var(--pl-forest-edge);
}
.pl-bento-crumb-seg { color: var(--pl-ink-3); font-weight: 500; }
.pl-bento-crumb-seg[data-last="true"] { color: var(--pl-ink); font-weight: 600; }
.pl-bento-crumb-row[data-current="true"] .pl-bento-crumb-seg[data-last="true"] {
  color: var(--pl-forest-dark);
}

.pl-bento-branch-list { display: flex; flex-direction: column; gap: 4px; }
.pl-bento-branch-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; background: var(--pl-paper-soft);
  border: 1px solid var(--pl-rule); border-radius: 5px; font-size: 11px;
}
.pl-bento-branch-name { color: var(--pl-ink); font-weight: 500; flex: 1; }
.pl-bento-branch-pct { font-family: var(--pl-mono); font-weight: 700; font-size: 10.5px; }

/* ---------- Pricing ------------------------------------------------------ */
.pl-pricing-toggle-wrap {
  display: inline-flex; padding: 3px;
  background: var(--pl-surface); border: 1px solid var(--pl-rule); border-radius: 8px;
  margin-top: 24px;
}
.pl-pricing-toggle {
  padding: 7px 16px; font-size: 12.5px; font-weight: 600;
  background: transparent; color: var(--pl-ink-2);
  border: 0; border-radius: 6px; cursor: pointer;
}
.pl-pricing-toggle[data-active="true"] {
  background: var(--pl-forest); color: var(--pl-surface);
}
.pl-pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.pl-tier {
  background: var(--pl-surface); color: var(--pl-ink);
  border: 1px solid var(--pl-rule); border-radius: 12px;
  padding: 32px 28px; position: relative;
}
.pl-tier[data-featured="true"] {
  background: var(--pl-ink); color: var(--pl-surface);
  border-color: var(--pl-ink);
  box-shadow: 0 22px 48px -22px rgba(14,14,12,.4);
}
.pl-tier-flag {
  position: absolute; top: -10px; left: 28px;
  padding: 3px 9px; background: var(--pl-forest); color: var(--pl-surface);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; border-radius: 4px;
}
.pl-tier-name {
  font-size: 13px; font-weight: 700; color: var(--pl-forest);
  letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 6px;
}
.pl-tier[data-featured="true"] .pl-tier-name { color: #9aa89a; }
.pl-tier-blurb { font-size: 13px; color: var(--pl-ink-3); margin: 0 0 18px; }
.pl-tier[data-featured="true"] .pl-tier-blurb { color: rgba(251,250,247,.7); }

.pl-tier-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 24px; }
.pl-tier-price {
  font-size: 44px; font-weight: 700; letter-spacing: -1.4px;
  font-variant-numeric: tabular-nums;
}
.pl-tier-suffix { font-size: 13px; color: var(--pl-ink-3); }
.pl-tier[data-featured="true"] .pl-tier-suffix { color: rgba(251,250,247,.7); }
.pl-tier-billed-flag {
  margin-left: auto; font-size: 11px; padding: 2px 7px; border-radius: 4px;
  background: var(--pl-forest-soft); color: var(--pl-forest-dark); font-weight: 600;
}
.pl-tier[data-featured="true"] .pl-tier-billed-flag {
  background: rgba(255,255,255,.12); color: #bbcebb;
}

.pl-tier-cta {
  display: block; text-align: center; padding: 11px 0;
  background: var(--pl-ink); color: var(--pl-surface);
  font-size: 13.5px; font-weight: 600; border-radius: 6px;
  margin-bottom: 24px; text-decoration: none;
}
.pl-tier[data-featured="true"] .pl-tier-cta { background: var(--pl-forest); }
.pl-tier-divider { height: 1px; background: var(--pl-rule-soft); margin-bottom: 16px; }
.pl-tier[data-featured="true"] .pl-tier-divider { background: rgba(255,255,255,.1); }
.pl-tier-features { display: flex; flex-direction: column; gap: 9px; }
.pl-tier-inherits {
  font-size: 12px; font-weight: 600; font-style: italic;
  color: var(--pl-ink-3);
  padding-bottom: 9px; margin-bottom: 4px;
  border-bottom: 1px dashed var(--pl-rule-soft);
}
.pl-tier[data-featured="true"] .pl-tier-inherits {
  color: rgba(251,250,247,.65); border-bottom-color: rgba(255,255,255,.10);
}
.pl-tier-feature {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.4; color: var(--pl-ink-2);
}
.pl-tier[data-featured="true"] .pl-tier-feature { color: rgba(251,250,247,.85); }
.pl-tier-feature-check { color: var(--pl-forest); flex-shrink: 0; margin-top: 2px; }
.pl-tier[data-featured="true"] .pl-tier-feature-check { color: #9bbfa5; }

/* Hidden / shown by toggle */
[data-cycle="annual"] .pl-price-monthly { display: none; }
[data-cycle="annual"] .pl-price-annual  { display: inline; }
[data-cycle="monthly"] .pl-price-annual { display: none; }
[data-cycle="monthly"] .pl-tier-billed-flag { visibility: hidden; }

/* ---------- FAQ ---------------------------------------------------------- */
.pl-faq-wrap {
  background: var(--pl-surface); border: 1px solid var(--pl-rule);
  border-radius: 10px; overflow: hidden;
}
.pl-faq-item:not(:last-child) { border-bottom: 1px solid var(--pl-rule-soft); }
.pl-faq-q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 22px; background: transparent; border: 0;
  cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 600; color: var(--pl-ink);
  letter-spacing: -0.1px;
}
.pl-faq-q-icon { color: var(--pl-ink-3); transition: transform .2s; }
.pl-faq-item[data-open="true"] .pl-faq-q-icon { transform: rotate(180deg); }
.pl-faq-a {
  padding: 0 22px 20px; font-size: 14px; line-height: 1.6;
  color: var(--pl-ink-3); text-wrap: pretty;
}
.pl-faq-item:not([data-open="true"]) .pl-faq-a { display: none; }

/* ---------- Closing CTA -------------------------------------------------- */
.pl-closing {
  padding: 120px 32px; background: var(--pl-ink); color: var(--pl-surface);
  position: relative; overflow: hidden;
}
.pl-closing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 47px, rgba(251,250,247,.025) 47px 48px);
}
.pl-closing-inner {
  position: relative; max-width: 760px; margin: 0 auto; text-align: center;
}
.pl-closing-h {
  font-size: 52px; font-weight: 700; letter-spacing: -1.4px;
  margin: 0 0 20px; line-height: 1.05; text-wrap: balance;
}
.pl-closing-h em { font-style: normal; color: #9bbfa5; }
.pl-closing-sub {
  font-size: 17px; line-height: 1.55; color: rgba(251,250,247,.75);
  margin: 0 auto 32px; max-width: 560px;
}
.pl-closing-cta-row { display: inline-flex; gap: 12px; }
.pl-closing-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 15px 26px; background: var(--pl-forest); color: var(--pl-surface);
  font-size: 16px; font-weight: 600; border-radius: 7px; text-decoration: none;
}
.pl-closing-secondary {
  display: inline-flex; align-items: center; padding: 15px 22px;
  background: transparent; color: var(--pl-surface);
  font-size: 16px; font-weight: 600; border-radius: 7px; text-decoration: none;
  border: 1px solid rgba(251,250,247,.2);
}

/* ---------- Footer ------------------------------------------------------- */
.pl-footer {
  background: var(--pl-paper); border-top: 1px solid var(--pl-rule);
  padding: 56px 32px 32px;
}
.pl-footer-inner {
  max-width: 1240px; margin: 0 auto;
}
.pl-footer-brand-row {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.pl-footer-brand-name { font-size: 15px; font-weight: 700; color: var(--pl-ink); }
.pl-footer-blurb {
  font-size: 13px; color: var(--pl-ink-3); line-height: 1.55;
  margin: 0 0 14px; max-width: 320px;
}
.pl-footer-copy { font-size: 11.5px; color: var(--pl-ink-4); margin: 0; }
.pl-footer-sep { margin: 0 6px; color: var(--pl-ink-4); }
.pl-footer-legal-link { color: var(--pl-ink-3); text-decoration: none; }
.pl-footer-legal-link:hover { color: var(--pl-ink); }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 920px) {
  .pl-pane { grid-template-columns: 1fr !important; gap: 36px; }
  .pl-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .pl-bento-card[data-accent="true"] { grid-row: auto; }
  .pl-pricing-grid { grid-template-columns: 1fr; }
  .pl-h1 { font-size: 44px; letter-spacing: -1.2px; }
  .pl-closing-h { font-size: 36px; letter-spacing: -1px; }
  .pl-section { padding: 64px 24px; }
  .pl-mock { height: auto; }
  .pl-nav-steps { grid-template-columns: 1fr 1fr; }
  .pl-hiw-grid { grid-template-columns: 1fr; }
  .pl-hiw-stage > .pl-stage { position: relative; padding: 16px; }
}