/* PCS marketing site — shared styles for every page.
   Loaded after the design-system token stylesheets. */

html, body { margin: 0; background: var(--surface-page); }
* { box-sizing: border-box; }
::selection { background: var(--pcs-blue-tint); }
html { scroll-behavior: smooth; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: 6px;
}

/* Skip link */
.pcs-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--pcs-ink); color: #fff;
  padding: 10px 16px; border-radius: 10px; font: 700 14px var(--font-sans); text-decoration: none; transition: top .2s; }
.pcs-skip:focus { top: 12px; }

/* Hero title (homepage three-verb) */
.pcs-hero-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.6vw, 60px);
  line-height: 1.04; letter-spacing: -.02em; }

/* Interior page hero title */
.pcs-page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.06; letter-spacing: -.02em; color: var(--pcs-ink); margin: 16px 0 0; }

/* Section heading */
.pcs-h2 { font-family: var(--font-display); }

/* Hover affordances */
.pcs-nav-btn:hover { background: var(--surface-sunken); color: var(--pcs-blue) !important; }
.pcs-mega-link:hover { background: var(--surface-sunken); }
.pcs-nav-phone:hover { color: var(--pcs-blue) !important; }
.pcs-foot-link:hover { color: #fff !important; }
.pcs-social:hover { border-color: rgba(255,255,255,.5) !important; color: #fff !important; }
.pcs-path-card { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s; }
.pcs-path-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--pcs-blue) !important; }
.pcs-link-row { transition: color .15s, gap .2s var(--ease-out); }
.pcs-link-row:hover { gap: 10px; }

/* Subtle micro-interactions */
.pcs-nav-btn { position: relative; }
.pcs-nav-btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  background: var(--pcs-blue); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease-out); }
.pcs-nav-btn:hover::after, .pcs-nav-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.pcs-mega-link svg { transition: transform .2s var(--ease-out); }
.pcs-mega-link:hover svg { transform: translateX(3px); }
.pcs-foot-link { display: inline-block; transition: color .2s var(--ease-out), transform .2s var(--ease-out); }
.pcs-foot-link:hover { transform: translateX(3px); }
.pcs-social { transition: border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out); }
.pcs-social:hover { transform: translateY(-2px); }
.faq summary { transition: background .2s var(--ease-out); }
.faq summary:hover { background: var(--surface-sunken); }
.pcs-img-zoom img { transition: transform .6s var(--ease-out); }
.pcs-img-zoom:hover img { transform: scale(1.05); }
.pcs-story-card { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.pcs-story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Eyebrow label */
.pcs-eyebrow { font: 700 12px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }

/* Marquee */
.pcs-marquee { display: flex; width: max-content; animation: pcs-scroll 32s linear infinite; }
.pcs-marquee-row { display: flex; align-items: center; }
@keyframes pcs-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Announcement bar — scrolls by itself */
.pcs-annmarquee { animation: pcs-scroll 30s linear infinite; }
.pcs-annmarquee:hover { animation-play-state: paused; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.reveal--in { opacity: 1; transform: none; }

/* Staggered card reveals — cards in a grid cascade in once their section reveals */
.reveal .pcs-grid-2 > *, .reveal .pcs-grid-3 > *, .reveal .pcs-grid-4 > *, .reveal .pcs-why-points > * {
  opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal.reveal--in .pcs-grid-2 > *, .reveal.reveal--in .pcs-grid-3 > *, .reveal.reveal--in .pcs-grid-4 > *, .reveal.reveal--in .pcs-why-points > * {
  opacity: 1; transform: none; }
.pcs-grid-2 > *:nth-child(2), .pcs-grid-3 > *:nth-child(2), .pcs-grid-4 > *:nth-child(2), .pcs-why-points > *:nth-child(2) { transition-delay: .07s; }
.pcs-grid-2 > *:nth-child(3), .pcs-grid-3 > *:nth-child(3), .pcs-grid-4 > *:nth-child(3), .pcs-why-points > *:nth-child(3) { transition-delay: .14s; }
.pcs-grid-2 > *:nth-child(4), .pcs-grid-3 > *:nth-child(4), .pcs-grid-4 > *:nth-child(4), .pcs-why-points > *:nth-child(4) { transition-delay: .21s; }
.pcs-grid-3 > *:nth-child(5), .pcs-grid-4 > *:nth-child(5), .pcs-why-points > *:nth-child(5) { transition-delay: .28s; }
.pcs-grid-3 > *:nth-child(6), .pcs-grid-4 > *:nth-child(6) { transition-delay: .35s; }

/* Self-drawing timeline rule */
.pcs-timeline-rule { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out) .15s; }
.reveal--in .pcs-timeline-rule { transform: scaleX(1); }

/* Stat count-up "pop" when it lands */
@keyframes pcs-pop { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }
.pcs-count-pop { animation: pcs-pop .38s var(--ease-out); }
.pcs-spotlight { transition: background-image .2s var(--ease-out); }

/* Marquee pauses on hover */
.pcs-marquee:hover { animation-play-state: paused; }

/* FAQ accordion (CSS-only details/summary) */
.faq { border: 1px solid var(--border-subtle); border-radius: 14px; background: #fff; overflow: hidden; }
.faq + .faq { margin-top: 10px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font: 700 17px var(--font-sans); color: var(--pcs-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 24px; height: 24px; transition: transform .2s var(--ease-out); color: var(--pcs-blue); }
.faq[open] summary .chev { transform: rotate(180deg); }
.faq .faq-body { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .22s var(--ease-out), padding .22s var(--ease-out); }
.faq[open] .faq-body { max-height: 460px; padding: 0 22px 22px; }
.faq .faq-body p { margin: 0; font: 400 15.5px/1.65 var(--font-sans); color: var(--text-body); }

/* Comparison table */
.pcs-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; }
.pcs-table th, .pcs-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
  font: 400 15px/1.5 var(--font-sans); color: var(--text-body); vertical-align: top; }
.pcs-table thead th { background: var(--surface-sunken); font: 700 13px var(--font-sans); letter-spacing: .04em;
  text-transform: uppercase; color: var(--pcs-ink); }
.pcs-table tbody tr:last-child td { border-bottom: none; }
.pcs-table td:first-child, .pcs-table th:first-child { font-weight: 700; color: var(--pcs-ink); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .reveal .pcs-grid-2 > *, .reveal .pcs-grid-3 > *, .reveal .pcs-grid-4 > *, .reveal .pcs-why-points > * { opacity: 1 !important; transform: none !important; transition: none; }
  .pcs-timeline-rule { transform: none !important; transition: none; }
  .pcs-mega-link svg, .pcs-foot-link, .pcs-social, .pcs-img-zoom img, .pcs-story-card { transition: none !important; transform: none !important; }
  .pcs-nav-btn::after { transition: none !important; }
  .pcs-marquee { animation: none; }
  .pcs-annmarquee { animation: none; }
  .faq .faq-body { transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .pcs-nav, .pcs-mega, .pcs-nav-phone, .pcs-book-btn { display: none !important; }
  .pcs-burger { display: inline-flex !important; }
  .pcs-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .pcs-grid-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 920px) {
  .pcs-hero-grid, .pcs-why-grid, .pcs-edu-grid, .pcs-cta-grid, .pcs-split-grid { grid-template-columns: 1fr !important; }
  .pcs-why-head { position: static !important; }
}
@media (max-width: 860px) {
  .pcs-grid-3 { grid-template-columns: 1fr !important; }
  .pcs-grid-2 { grid-template-columns: 1fr !important; }
  .pcs-timeline { grid-template-columns: 1fr !important; }
  .pcs-timeline-rule { display: none !important; }
  .pcs-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }
  .pcs-calc-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .pcs-grid-4 { grid-template-columns: 1fr !important; }
  .pcs-why-points { grid-template-columns: 1fr !important; }
  .pcs-edu-list { grid-template-columns: 1fr !important; }
  .pcs-footer-grid { grid-template-columns: 1fr !important; }
  .pcs-trust-strip { gap: 10px 18px !important; }
  .pcs-announce-meta { display: none; }
  .pcs-speakers { grid-template-columns: 1fr !important; }
  .pcs-truststrip { display: none !important; }
}

/* Long button labels wrap instead of overflowing the screen on small phones */
@media (max-width: 480px) {
  .pcs-btn { white-space: normal !important; text-align: center; }
  .pcs-calc-cta { width: 100%; }
}