/* =========================================================================
   plan-suggester.css — Plan Suggester page only.
   Depends on cr-home.css for tokens (--cr-green, --cr-serif, …), the header,
   the .hero shell, .gradient-section/.dome, the CTA and the footer, and on
   about-page.css for .ab-container / .ab-h2 / .ab-sub / .ab-pill / .ab-trust.
   Every new class is `ps-` scoped; nothing here overrides a shared component.
   ========================================================================= */

.ps-page {
  --ps-ink: var(--cr-ink);
  --ps-muted: var(--cr-muted);
  --ps-line: var(--cr-line);
  --ps-tint: rgba(28, 147, 35, 0.06);
  --ps-band: rgba(59, 163, 65, 0.05);
  --ps-dark-line: rgba(255, 255, 255, 0.10);
  --ps-dark-copy: rgba(255, 255, 255, 0.62);
}

/* ---------- hero (plan-suggester variant of the shared .hero shell) ------ */
/* subject sits right of frame — anchor there so the headline keeps clear ground */
.hero--ps .hero-img { object-position: 78% center; }
@media (max-width: 991.98px) { .hero--ps .hero-img { object-position: 70% center; } }
.hero--ps .hero-title { max-width: 14em; }
.hero--ps .hero-desc { max-width: 460px; }
.ps-hero-trust {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.ps-hero-trust span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-green-2);
}
.ps-hero-trust strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.86);
}

/* =========================================================================
   PLAN TIERS — white, four equal cards
   ========================================================================= */
.ps-tiers { background: #fff; padding: 96px 0 100px; }
.ps-tiers .ab-h2, .ps-tiers .ab-sub { max-width: 820px; margin-inline: auto; }
.ps-tier-grid { --bs-gutter-x: 24px; --bs-gutter-y: 24px; margin-top: 60px; }
.ps-tier {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: 20px;
  padding: 30px 26px 32px;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.ps-tier:hover {
  border-color: rgba(28, 147, 35, 0.32);
  box-shadow: 0 24px 48px -28px rgba(28, 147, 35, 0.28);
  transform: translateY(-4px);
}
.ps-tier-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--cr-green);
  margin-bottom: 18px;
}
.ps-tier h3 {
  font-family: var(--cr-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
  margin: 0 0 16px;
}
.ps-tier hr {
  height: 1px;
  border: 0;
  background: var(--ps-line);
  margin: 0 0 18px;
  opacity: 1;
}
.ps-tier p {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.01em;
  color: var(--ps-muted);
  text-wrap: pretty;
}

/* =========================================================================
   THE TOOL — dark, restyled frame around the existing suggester
   ========================================================================= */
.ps-tool {
  background: #000;
  padding: 100px 0 110px;
  position: relative;
  overflow: hidden;
}
.ps-tool-glow {
  position: absolute;
  left: 50%;
  top: 120px;
  width: 900px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(63, 209, 95, 0.20), transparent 70%);
  pointer-events: none;
}
.ps-tool > .ab-container { position: relative; z-index: 2; }
.ps-tool .ab-h2 { color: #fff; max-width: 900px; margin-inline: auto; }
.ps-tool .ab-pill { color: var(--cr-green-2); border-color: rgba(63, 209, 95, 0.45); }
.ps-frame {
  margin-top: 46px;
  background: #fff;
  border: 1px solid rgba(63, 209, 95, 0.28);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(63, 209, 95, 0.35);
}
.ps-frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(63, 209, 95, 0.22);
}
.ps-frame-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-block;
}
.ps-frame-bar i:first-child { background: var(--cr-green-2); }
.ps-frame-bar span {
  margin-left: 6px;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
}
.ps-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
}
/* Magnific Popup — size the video lightbox to 16:9 */
.mfp-iframe-holder .mfp-content { max-width: 1100px; }

/* =========================================================================
   BENEFITS — white, three cards over a stat rail
   ========================================================================= */
.ps-benefits { background: #fff; padding: 96px 0 100px; }
.ps-benefits .ab-h2 { max-width: 780px; margin-inline: auto; }
.ps-benefits .ab-pill { color: var(--cr-green); border-color: rgba(28, 147, 35, 0.35); }
.ps-ben-grid { --bs-gutter-x: 24px; --bs-gutter-y: 24px; margin-top: 56px; }
.ps-ben {
  height: 100%;
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: 20px;
  padding: 30px 26px 32px;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.ps-ben:hover {
  border-color: rgba(28, 147, 35, 0.32);
  box-shadow: 0 24px 48px -28px rgba(28, 147, 35, 0.24);
}
.ps-ben-ic {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--ps-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.ps-ben-ic img { width: 28px; height: 28px; display: block; }
.ps-ben h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
  margin: 0 0 14px;
}
.ps-ben p {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: -0.01em;
  color: var(--ps-muted);
  text-wrap: pretty;
}
.ps-ben p + p { margin-top: 12px; }
.ps-rail {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ps-line);
  border-radius: 18px;
  background: var(--ps-band);
  overflow: hidden;
}
.ps-rail h5 {
  margin: 0;
  padding: 28px 26px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
  text-align: center;
}
.ps-rail h5 + h5 { border-left: 1px solid var(--ps-line); }

/* =========================================================================
   ADD-ONS — dark bento, uneven cells
   ========================================================================= */
.ps-addons { background: #000; padding: 100px 0 110px; }
.ps-addons .ab-h2 { color: #fff; }
.ps-addons .ab-sub { color: var(--ps-dark-copy); max-width: 760px; margin-inline: auto; }
.ps-bento {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.ps-cell {
  background: #0a0a0a;
  border: 1px solid var(--ps-dark-line);
  border-radius: 18px;
  padding: 30px 28px 32px;
  transition: border-color 300ms ease, background 300ms ease;
}
.ps-cell:hover {
  border-color: rgba(63, 209, 95, 0.38);
  background: #0d100d;
}
.ps-cell--5 { grid-column: span 5; }
.ps-cell--4 { grid-column: span 4; }
.ps-cell--3 { grid-column: span 3; }
.ps-cell-ic {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: rgba(63, 209, 95, 0.10);
  border: 1px solid rgba(63, 209, 95, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.ps-cell-ic img { width: 26px; height: 26px; display: block; }
.ps-cell h5 {
  font-size: 19px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 12px;
}
.ps-cell p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--ps-dark-copy);
  text-wrap: pretty;
}

/* =========================================================================
   VIDEO — white, framed player
   ========================================================================= */
.ps-video { background: #fff; padding: 96px 0 100px; }
.ps-video .ab-h2 { max-width: 700px; margin-inline: auto; }
.ps-player {
  position: relative;
  aspect-ratio: 16 / 9;
  display: block;
  max-width: 940px;
  margin: 48px auto 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  box-shadow: 0 40px 80px -40px rgba(15, 23, 42, 0.35);
}
.ps-player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-player-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.42));
  transition: background 300ms ease;
}
.ps-player:hover .ps-player-scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.32)); }
.ps-player-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--cr-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.ps-player:hover .ps-player-play { transform: translate(-50%, -50%) scale(1.08); }
.ps-player-play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fff; }

/* =========================================================================
   TESTIMONIALS — white, three quotes
   ========================================================================= */
.ps-testi { background: #fff; padding: 96px 0 100px; }
.ps-testi .ab-h2 { max-width: 760px; margin-inline: auto; }
.ps-testi-grid { --bs-gutter-x: 24px; --bs-gutter-y: 24px; margin-top: 56px; }
.ps-quote {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ps-line);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: left;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.ps-quote:hover {
  border-color: rgba(28, 147, 35, 0.32);
  box-shadow: 0 24px 48px -28px rgba(28, 147, 35, 0.24);
}
.ps-quote-mark {
  font-family: var(--cr-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--cr-green);
  margin-bottom: 14px;
}
.ps-quote p {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 27px;
  letter-spacing: -0.011em;
  color: var(--ps-ink);
  text-wrap: pretty;
}
.ps-quote-who { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--ps-line); }
.ps-quote-who h6 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
}
.ps-quote-who span { font-size: 14px; letter-spacing: -0.01em; color: var(--ps-muted); }

/* =========================================================================
   COMPLIANCE — reuses .ab-trust from about-page.css, tinted ground here
   ========================================================================= */
.ps-page .ab-trust { background: var(--ps-band); }

/* =========================================================================
   BLOGS — dark, three cards
   ========================================================================= */
.ps-blogs { background: #000; padding: 96px 0 100px; }
.ps-blogs .ab-h2 { color: #fff; }
.ps-blog-grid { --bs-gutter-x: 24px; --bs-gutter-y: 24px; margin-top: 56px; }
.ps-blog {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  border: 1px solid var(--ps-dark-line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 300ms ease, transform 300ms ease;
}
.ps-blog:hover { border-color: rgba(63, 209, 95, 0.38); transform: translateY(-4px); }
.ps-blog-media { margin: 0; overflow: hidden; }
.ps-blog-media img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}
.ps-blog:hover .ps-blog-media img { transform: scale(1.05); }
.ps-blog-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.ps-blog-body a {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  text-wrap: pretty;
}
.ps-blog-body a:hover { color: var(--cr-green-2); }
.ps-blog-more {
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cr-green-2);
}

/* =========================================================================
   FAQ — white, native <details> accordion (no JS)
   ========================================================================= */
.ps-faq { background: #fff; padding: 96px 0 104px; }
.ps-faq-list { max-width: 900px; margin: 52px auto 0; }
.ps-faq-item {
  border: 1px solid var(--ps-line);
  border-radius: 16px;
  background: #fff;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.ps-faq-item + .ps-faq-item { margin-top: 14px; }
.ps-faq-item[open] {
  border-color: rgba(28, 147, 35, 0.32);
  box-shadow: 0 24px 48px -28px rgba(28, 147, 35, 0.22);
}
.ps-faq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  cursor: pointer;
  list-style: none;
}
.ps-faq-item summary::-webkit-details-marker { display: none; }
.ps-faq-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ps-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-faq-ic img { width: 24px; height: 24px; display: block; }
.ps-faq-item summary h3 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
  text-wrap: pretty;
}
.ps-faq-sign {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
}
.ps-faq-sign::before,
.ps-faq-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--cr-green);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.ps-faq-sign::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.ps-faq-sign::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.ps-faq-item[open] .ps-faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.ps-faq-item p {
  margin: 0;
  padding: 0 26px 26px;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--ps-muted);
  text-wrap: pretty;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1199.98px) {
  .ps-cell--5, .ps-cell--4, .ps-cell--3 { grid-column: span 6; }
}

@media (max-width: 991.98px) {
  .ps-tiers, .ps-benefits, .ps-video, .ps-testi, .ps-blogs { padding: 72px 0 76px; }
  .ps-tool, .ps-addons { padding: 76px 0 84px; }
  .ps-faq { padding: 72px 0 80px; }
  .ps-tier-grid, .ps-ben-grid, .ps-testi-grid, .ps-blog-grid { margin-top: 40px; }
  .ps-bento { margin-top: 40px; gap: 16px; }
  .ps-rail { grid-template-columns: 1fr; }
  .ps-rail h5 + h5 { border-left: 0; border-top: 1px solid var(--ps-line); }
}

@media (max-width: 767.98px) {
  .ps-cell--5, .ps-cell--4, .ps-cell--3 { grid-column: span 12; }
  .ps-tier h3 { font-size: 24px; line-height: 30px; }
  .ps-quote p { font-size: 16px; line-height: 25px; }
  .ps-frame-bar span { display: none; }
  .ps-player-play { width: 62px; height: 62px; }
  .ps-player-play svg { width: 20px; height: 20px; }
  .ps-faq-item summary { padding: 20px; gap: 14px; }
  .ps-faq-item summary h3 { font-size: 16px; line-height: 24px; }
  .ps-faq-item p { padding: 0 20px 22px 20px; }
  .ps-blog-media img { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-tier, .ps-ben, .ps-cell, .ps-quote, .ps-blog,
  .ps-blog-media img, .ps-player-play, .ps-player-scrim,
  .ps-faq-item, .ps-faq-sign::before, .ps-faq-sign::after { transition: none; }
  .ps-tier:hover, .ps-blog:hover { transform: none; }
  .ps-blog:hover .ps-blog-media img { transform: none; }
  .ps-player:hover .ps-player-play { transform: translate(-50%, -50%); }
}