/* ============================================================
   Revspot · company pages (about.html, careers.html)
   Extends styles.css. Same tokens, hairlines, editorial rhythm.
   Self-contained: nothing here touches homepage or product CSS.
   ============================================================ */

/* ---------- shared page hero ---------- */
.pg-hero{
  max-width:1320px;margin:0 auto;
  padding:clamp(120px,15vh,172px) var(--pad) clamp(36px,4.5vw,60px);
}
/* editorial split: display heading left, lede (and CTAs) right, bottom-aligned.
   Kills the dead right half without filler. Collapses to a stack at 920px. */
.pg-hero-inner{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,88px);align-items:end;
}
.pg-hero h1{
  font-family:var(--display);font-weight:350;
  font-size:clamp(38px,4.2vw,64px);line-height:1.05;letter-spacing:-.027em;
  margin:0;
}
.pg-hero h1 em{font-style:normal;color:var(--amber-deep)}
.pg-lede{
  margin:22px 0 0;max-width:56ch;
  font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.65;color:var(--ink-3);
}
.pg-hero-side .pg-lede{margin-top:0;max-width:44ch}
/* CTA buttons inside the hero side column need clear air below the lede */
.pg-hero-side .cta-row{margin-top:30px}
.pg-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- nav active state (site-wide convention) ---------- */
.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber-deep);text-decoration-thickness:2px;text-underline-offset:7px;}

/* ---------- section scaffolding ---------- */
.pg-section{max-width:1320px;margin:0 auto;padding:clamp(56px,6.5vw,100px) var(--pad) 0}
/* first section directly after a text-only hero: close the double-padding void */
.pg-tight{padding-top:clamp(20px,2.6vw,40px)}
.pg-section.last{padding-bottom:clamp(72px,8vw,120px)}
.pg-head{max-width:720px;margin-bottom:clamp(30px,3.6vw,50px)}
.pg-h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,3vw,46px);line-height:1.08;letter-spacing:-.022em;
  margin-top:18px;
}
.pg-h2 em{font-style:normal;color:var(--amber-deep)}
.pg-sub{color:var(--ink-3);font-size:16px;line-height:1.62;margin-top:14px;max-width:56ch}

/* ---------- statement band (mission) ---------- */
.pg-statement{background:var(--paper-2);margin-top:clamp(56px,6vw,88px);padding:clamp(64px,7.5vw,108px) var(--pad)}
.pg-statement-inner{max-width:1240px;margin:0 auto}
.pg-statement blockquote{
  font-family:var(--display);font-weight:350;
  font-size:clamp(26px,2.8vw,44px);line-height:1.18;letter-spacing:-.02em;
  max-width:24ch;color:var(--ink);
}
.pg-statement blockquote em{font-style:normal;color:var(--amber-deep)}
.pg-statement p{margin-top:24px;max-width:60ch;color:var(--ink-3);font-size:16px;line-height:1.65}
/* two-column editorial variant (careers "Why here"): quote left, lede right, bottom-aligned */
.pg-statement-2col{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,96px);align-items:end;
}
.pg-statement-2col blockquote{max-width:18ch}
.pg-statement-2col p{margin-top:0;max-width:44ch}

/* ---------- dark band variant (homepage dark canvas on subpages) ----------
   Reuses the homepage .book-bg / .bb aurora markup from styles.css.
   Apply .pg-dark to a .pg-statement, or use .pg-dark-band as a full-bleed
   wrapper around .pg-dark-inner for row/section content. */
.pg-dark{position:relative;overflow:hidden;background:var(--d-bg)}
.pg-dark .pg-statement-inner,
.pg-dark .pg-dark-inner{position:relative;z-index:1}
.pg-statement.pg-dark blockquote{color:var(--d-ink)}
.pg-statement.pg-dark blockquote em{color:var(--d-amber)}
.pg-statement.pg-dark p{color:var(--d-ink-2)}
.pg-dark-band{margin-top:clamp(56px,6vw,88px);padding:clamp(64px,7.5vw,108px) var(--pad)}
.pg-dark-inner{max-width:1240px;margin:0 auto}
.pg-dark .pg-h2{color:var(--d-ink)}
.pg-dark .pg-h2 em{color:var(--d-amber)}
.pg-dark .pg-sub{color:var(--d-ink-2)}
.pg-dark .pg-row{border-top-color:var(--d-line)}
.pg-dark .pg-row:last-of-type{border-bottom-color:var(--d-line)}
.pg-dark .pg-row .rnum{color:var(--d-amber)}
.pg-dark .pg-row h3{color:var(--d-ink)}
.pg-dark .pg-row p{color:var(--d-ink-2)}
.pg-dark .pg-row p b{color:var(--d-ink)}

/* ---------- editorial spec rows (what we run / values) ---------- */
.pg-row{
  display:grid;grid-template-columns:64px minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,56px);align-items:baseline;
  padding:clamp(24px,2.8vw,38px) 0;border-top:1px solid var(--hairline);
}
.pg-row:last-of-type{border-bottom:1px solid var(--hairline)}
.pg-row .rnum{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--amber-deep)}
.pg-row h3{font-family:var(--display);font-weight:450;font-size:clamp(20px,1.8vw,25px);letter-spacing:-.015em;line-height:1.18}
.pg-row p{font-size:15.5px;line-height:1.65;color:var(--ink-3);max-width:56ch}
.pg-row p b{color:var(--ink);font-weight:600}
.pg-row .pg-body{max-width:56ch}
.pg-row .pg-body p{max-width:none}
.pg-row .pg-body p + p{margin-top:14px}
.pg-row .pg-body p.sub{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:13px;letter-spacing:.01em;margin-top:18px}
.pg-row .pg-body p.sub:first-child{margin-top:0}
.pg-row .pg-body ul,.pg-row .pg-body ol{margin:10px 0 0;padding-left:20px}
.pg-row .pg-body li{font-size:15.5px;line-height:1.6;color:var(--ink-3);margin:6px 0}
.pg-row .pg-body li::marker{color:var(--amber-deep)}
.pg-row .pg-body li b{color:var(--ink);font-weight:600}
.pg-dark .pg-row .pg-body p,.pg-dark .pg-row .pg-body li{color:var(--d-ink-2)}
.pg-dark .pg-row .pg-body p.sub,.pg-dark .pg-row .pg-body b{color:var(--d-ink)}

/* ---------- founders ---------- */
.pg-founders{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.4vw,52px);
}
.pg-founder{display:flex;flex-direction:column}
.pg-portrait{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 28px 60px -40px rgba(24,34,28,.45);
}
.pg-portrait .pg-init{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:300;
  font-size:clamp(52px,5.4vw,84px);letter-spacing:-.03em;
  color:rgba(18,18,16,.34);
}
.pg-portrait .pg-ph-note{
  position:absolute;left:14px;bottom:12px;
  font-size:11.5px;font-weight:500;color:rgba(18,18,16,.42);
  background:rgba(252,251,249,.62);border:1px solid rgba(255,255,255,.6);
  padding:4px 10px;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pg-portrait img,.pg-team-wide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* warm mesh fields for the placeholders, one per founder */
.pg-mesh-a{background:
  radial-gradient(90% 70% at 20% 16%, #F4E3C2 0%, transparent 58%),
  radial-gradient(80% 66% at 84% 30%, #EAD9C0 0%, transparent 60%),
  radial-gradient(110% 90% at 50% 96%, #E3D5BC 0%, transparent 66%),
  linear-gradient(160deg, #F6EFDF, #EFE4CC)}
.pg-mesh-b{background:
  radial-gradient(90% 70% at 78% 14%, #DDE8D6 0%, transparent 58%),
  radial-gradient(84% 70% at 16% 38%, #E9EEDF 0%, transparent 62%),
  radial-gradient(110% 90% at 52% 98%, #D8E2CF 0%, transparent 66%),
  linear-gradient(200deg, #F0F3E8, #DFE8D6)}
.pg-mesh-c{background:
  radial-gradient(90% 70% at 24% 18%, #D9E4EC 0%, transparent 58%),
  radial-gradient(84% 70% at 82% 42%, #E7EDF1 0%, transparent 62%),
  radial-gradient(110% 90% at 46% 96%, #CFDDE7 0%, transparent 66%),
  linear-gradient(150deg, #EDF2F5, #D9E4EC)}
.pg-mesh-wide{background:
  radial-gradient(70% 90% at 12% 20%, #F2E2C4 0%, transparent 55%),
  radial-gradient(60% 80% at 50% 0%, #EDE6D2 0%, transparent 60%),
  radial-gradient(70% 90% at 88% 60%, #DEE7D8 0%, transparent 58%),
  radial-gradient(90% 110% at 50% 110%, #E0D8C2 0%, transparent 66%),
  linear-gradient(170deg, #F5EFE0, #E7E0CC)}
.pg-founder h3{
  font-family:var(--display);font-weight:450;
  font-size:clamp(20px,1.7vw,24px);letter-spacing:-.014em;
  margin-top:22px;
}
.pg-founder .frole{
  display:block;margin-top:5px;
  font-size:13px;font-weight:600;color:var(--amber-deep);
}
.pg-founder p{margin-top:12px;font-size:14.5px;line-height:1.62;color:var(--ink-3)}
.pg-founder .flink{
  margin-top:12px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;
  transition:color .3s var(--ease);
}
.pg-founder .flink:hover{color:var(--ink)}
.pg-founder .flink .arr{transition:transform .45s var(--ease)}
.pg-founder .flink:hover .arr{transform:translateX(4px)}

/* ---------- team wide image ---------- */
.pg-team-wide{
  position:relative;overflow:hidden;
  aspect-ratio:21/9;border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 36px 80px -48px rgba(24,34,28,.5);
}
.pg-team-wide .pg-init{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:300;
  font-size:clamp(22px,2.2vw,32px);letter-spacing:-.015em;
  color:rgba(18,18,16,.38);text-align:center;padding:0 24px;
}
.pg-team-wide .pg-ph-note{
  position:absolute;left:16px;bottom:14px;
  font-size:11.5px;font-weight:500;color:rgba(18,18,16,.42);
  background:rgba(252,251,249,.62);border:1px solid rgba(255,255,255,.6);
  padding:4px 10px;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.pg-team-caption{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  margin-top:16px;color:var(--ink-3);font-size:13.5px;
}
.pg-team-caption b{color:var(--ink-2);font-weight:600}

/* ---------- facts strip (about) ---------- */
.pg-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);
}
.pg-fact{padding:26px 28px 28px;border-left:1px solid var(--hairline)}
.pg-fact:first-child{border-left:0}
.pg-fact b{
  display:block;font-family:var(--display);font-weight:450;
  font-size:clamp(19px,1.6vw,23px);letter-spacing:-.012em;color:var(--ink);
}
.pg-fact span{display:block;margin-top:8px;font-size:14px;line-height:1.58;color:var(--ink-3)}

/* ---------- hiring steps (careers) ---------- */
.pg-stepgrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);
}
.pg-step{padding:28px 26px 30px;border-left:1px solid var(--hairline)}
.pg-step:first-child{border-left:0}
.pg-step .n{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.005em;color:var(--amber-deep)}
.pg-step h3{font-family:var(--display);font-weight:450;font-size:19px;letter-spacing:-.012em;line-height:1.2;margin:14px 0 10px}
.pg-step p{font-size:14px;line-height:1.6;color:var(--ink-3)}

/* ---------- openings / keka slot (careers) ---------- */
.pg-keka{
  min-height:340px;
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--paper-2);
  display:grid;place-items:center;
  padding:clamp(28px,4vw,56px);
}
/* KEKA-injected jobs list: give it the slot's full width; KEKA's own styles stay scoped under .kh-main-container */
.pg-keka #khembedjobs{width:100%}
/* KEKA footer cosmetics, scoped to our slot only (attribution stays visible):
   1. KEKA's .kh-footer is position:absolute at 100vw, so its centered attribution
      lands right of the page axis; return it to flow at slot width.
   2. Kill the stray hairline .kh-footer-content draws under the "Revspot" label. */
#keka-openings .kh-footer{position:static !important;width:100% !important;max-width:100% !important;margin:0 !important;padding-left:0 !important;padding-right:0 !important}
#keka-openings .kh-footer-content{border-top:0 !important;justify-content:center !important;text-align:center !important}
.pg-keka-empty{text-align:center;max-width:44ch}
.pg-keka-empty .orb{width:34px;height:34px;margin:0 auto 18px}
.pg-keka-empty b{
  display:block;font-family:var(--display);font-weight:450;
  font-size:clamp(19px,1.7vw,24px);letter-spacing:-.014em;color:var(--ink);
}
.pg-keka-empty p{margin-top:10px;font-size:14.5px;line-height:1.62;color:var(--ink-3)}
.pg-keka-empty a{font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--hairline-2);transition:color .3s var(--ease),border-color .3s var(--ease)}
.pg-keka-empty a:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .pg-stepgrid{grid-template-columns:1fr 1fr}
  .pg-step{border-top:1px solid var(--hairline)}
  .pg-step:nth-child(-n+2){border-top:0}
  .pg-step:nth-child(odd){border-left:0}
  .pg-step:nth-child(even){border-left:1px solid var(--hairline)}
  .pg-founders{grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px)}
}
@media (max-width:920px){
  .pg-hero-inner{grid-template-columns:1fr;gap:0}
  .pg-hero-side .pg-lede{margin-top:22px;max-width:56ch}
  .pg-founders{grid-template-columns:1fr;max-width:440px}
  .pg-facts{grid-template-columns:1fr}
  .pg-fact{border-left:0;border-top:1px solid var(--hairline)}
  .pg-fact:first-child{border-top:0}
  .pg-team-wide{aspect-ratio:16/10}
  .pg-statement-2col{grid-template-columns:1fr;gap:26px}
  .pg-statement-2col p{max-width:60ch}
}
@media (max-width:640px){
  .pg-stepgrid{grid-template-columns:1fr}
  .pg-step{border-left:0 !important;border-top:1px solid var(--hairline)}
  /* undo the ≤1060 2-col top-row exception (nth-child(-n+2)) so every stacked
     step keeps its divider; only the true first one loses it */
  .pg-step:nth-child(-n+2){border-top:1px solid var(--hairline)}
  .pg-step:first-child{border-top:0 !important}
  .pg-row{grid-template-columns:1fr;gap:8px;align-items:start}
  .pg-row .rnum{margin-bottom:2px}
  .pg-cta .btn{width:100%;justify-content:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pg-founder .flink:hover .arr{transform:none}
}

/* ---------- mobile polish (≤640px) — tighter type + rhythm ---------- */
@media (max-width:640px){
  .pg-hero{padding:92px var(--pad) 26px}
  .pg-hero h1{font-size:36px}
  .pg-lede{font-size:15px;line-height:1.6}
  .pg-hero-side .pg-lede{margin-top:16px}
  .pg-hero-side .cta-row{margin-top:24px}
  .pg-cta{margin-top:20px;gap:10px}
  .pg-cta .btn{width:auto}
  .pg-section{padding:52px var(--pad) 0}
  .pg-section.last{padding-bottom:64px}
  .pg-head{margin-bottom:24px}
  .pg-h2{font-size:27px;margin-top:14px}
  .pg-sub{font-size:14.5px;margin-top:10px}
  .pg-statement{margin-top:48px;padding:56px var(--pad)}
  .pg-statement blockquote{font-size:23px}
  .pg-statement p{margin-top:16px;font-size:14.5px}
  .pg-dark-band{margin-top:48px;padding:56px var(--pad)}
  .pg-statement-2col{gap:18px}
  .pg-row{padding:18px 0;gap:6px}
  .pg-row h3{font-size:19px}
  .pg-row p{font-size:14.5px}
  .pg-founders{gap:22px}
  .pg-founder h3{margin-top:14px;font-size:19px}
  .pg-founder p{font-size:14px;margin-top:8px}
  .pg-fact{padding:18px 20px 20px}
  .pg-step{padding:20px 20px 22px}
  .pg-step h3{font-size:17px;margin:10px 0 8px}
  .pg-step p{font-size:13.5px}
  .pg-keka{min-height:260px;padding:24px 18px}
  .pg-team-caption{margin-top:12px;font-size:12.5px}
}