/* Inner pages (Get Started, About)
   Modeled on Palantir's inner pages, e.g. their Get Started page (checked 25 Sept 2026): white,
   a huge heading on the left with a short line of text on the right, then the content underneath.
   Get Started explains the free assessment (left) next to the booking calendar (right). */

/* Light pages: white background and dark text, like Palantir's inner pages */
.page-light {
  background: #fff;
  color: #1e1f2b;
}

.pg {
  padding: 120px 0 80px;
}
@media (min-width: 960px) { .pg { padding-top: 150px; } }

.pg-inner {
  box-sizing: content-box;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--h-spacing);
}

/* Shared 12-column grid (Palantir's) */
.pg-header,
.pg-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(10px, 1fr));
  column-gap: var(--gutter);
  row-gap: 30px;
}

/* ---------- Header: big heading + intro line ---------- */
.pg-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
@media (min-width: 560px) { .pg-title { font-size: 72px; } }
@media (min-width: 960px) { .pg-title { grid-column: 1 / 8; font-size: 100px; } }

.pg-intro {
  grid-column: 1 / -1;
  max-width: 460px;
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}
@media (min-width: 960px) {
  .pg-intro { grid-column: 9 / -1; font-size: 34px; line-height: 40px; }
}

.pg-body { margin-top: 80px; }
@media (min-width: 960px) { .pg-body { margin-top: 120px; } }

/* Tiny uppercase labels (Palantir's form labels) */
.pg-label {
  margin: 0 0 16px;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #666;
}

/* ---------- Left: what the assessment involves ---------- */
.pg-about { grid-column: 1 / -1; }
@media (min-width: 960px) { .pg-about { grid-column: 1 / 6; } }

.pg-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  padding: 16px 0 28px;
  border-top: 1px solid #ddd;
}
.pg-step h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.pg-step p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 18px;
  line-height: 25px;
}
.pg-num {
  grid-row: 1;
  grid-column: 2;
  color: #aaa;
  font-size: 16px;
  line-height: 1.5;
}

.pg-note {
  margin: 12px 0 0;
  padding-top: 16px;
  border-top: 1px solid #ddd;
  font-size: 18px;
  line-height: 25px;
}

/* ---------- Right: booking ---------- */
.pg-booking { grid-column: 1 / -1; }
@media (min-width: 960px) { .pg-booking { grid-column: 7 / -1; } }

/* Calendly's calendar loads into this box. js/calendar.js then sets the box's height to the
   calendar's full height (about 960–1050px for the dates), so nothing scrolls inside it.
   1000px is the starting guess. */
.pg-calendar {
  min-width: 320px;
  height: 1000px;
  border-top: 1px solid #ddd;
}
/* While the page opens, Calendly's frame waits invisibly inside the screen so its times load
   right away, then js/calendar.js moves it back into this box */
.pg-calendar.is-preloading iframe {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: var(--calendar-width, 100vw);
  height: 700px;
  opacity: 0;
  pointer-events: none;
}

.pg-fallback {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.5;
}
.pg-fallback a { color: inherit; }


/* ---------- Common questions (FAQ) ----------
   Rows in the style of Palantir's link lists: thin dividers, a question per row, and hovering one
   row dims the others. A thin plus turns into an × when a row is open. Opening glides where the
   browser supports it (Chrome 131+); elsewhere it simply opens. */
.pg-faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(10px, 1fr));
  column-gap: var(--gutter);
  row-gap: 30px;
  margin-top: 100px;
}
@media (min-width: 960px) { .pg-faq { margin-top: 140px; } }

.pg-faq-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 960px) { .pg-faq-title { grid-column: 1 / 5; font-size: 46px; } }

.pg-faq-list {
  grid-column: 1 / -1;
  border-bottom: 1px solid #ddd;
}
@media (min-width: 960px) { .pg-faq-list { grid-column: 5 / -1; } }

.faq-item { border-top: 1px solid #ddd; }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s ease-in-out;
}
.faq-item summary::-webkit-details-marker { display: none; }
@media (min-width: 560px) { .faq-item summary { font-size: 24px; } }

/* Hovering one question (or the resting Ask row) dims the others (Palantir's list behaviour).
   Once the Ask row is a text box, or while reading its answer, nothing dims. */
@media (hover: hover) and (pointer: fine) {
  .pg-faq-list:has(.faq-item:hover, .faq-ask:not(.is-active) .faq-ask-box:hover) summary { color: rgba(30, 31, 43, 0.33); }
  .pg-faq-list .faq-item:hover summary,
  .pg-faq-list .faq-item[open] summary { color: inherit; }
}

/* Thin plus that turns into an × */
.faq-icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease-in-out;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-answer p {
  max-width: 640px;
  margin: 0;
  padding: 0 40px 24px 0;
  font-size: 18px;
  line-height: 25px;
}

/* Smooth open/close where supported */
:root { interpolate-size: allow-keywords; }
.faq-item::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.3s cubic-bezier(0.5, 1, 0.89, 1), content-visibility 0.3s allow-discrete;
}
.faq-item[open]::details-content { height: auto; }

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content,
  .faq-icon,
  .faq-item summary { transition: none; }
}