/* Early Access Program page — extends site.css with a few page-specific components */

/* ---------- Program facts strip (static, mono) ---------- */
.eap-facts { padding: 52px 0; border-top: 0.5px solid var(--pf-border); }
.eap-facts .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .eap-facts .wrap { grid-template-columns: 1fr; gap: var(--pf-space-8); } }
.eap-fact { padding: 4px 34px; border-left: 0.5px solid var(--pf-border); }
.eap-fact:first-child { border-left: none; padding-left: 0; }
@media (max-width: 720px) { .eap-fact { border-left: none; padding-left: 0; } }
.eap-fact .ef-value {
  font-family: var(--pf-mono); font-weight: 500; font-size: 34px; line-height: 1;
  color: var(--pf-cyan); font-variant-numeric: tabular-nums; margin-bottom: 12px;
  display: flex; align-items: baseline; gap: 6px;
}
.eap-fact .ef-value .ef-unit { font-size: 15px; color: var(--pf-text-s); font-weight: 400; }
.eap-fact .ef-label { font-size: 13px; color: var(--pf-text-s); }

/* ---------- Benefit / founder card grids (2x2) ---------- */
.eap-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pf-card-gap); }
@media (max-width: 760px) { .eap-grid-2 { grid-template-columns: 1fr; } }

.eap-card {
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-8) var(--pf-space-6);
}
.eap-card .icon {
  width: 36px; height: 36px; border-radius: var(--pf-radius-btn);
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-cyan-dim); color: var(--pf-cyan);
  margin-bottom: var(--pf-space-4);
}
.eap-card h3 { font-size: var(--t-h4); margin-bottom: var(--pf-space-2); }
.eap-card p { color: var(--pf-text-s); font-size: var(--t-body); }

/* ---------- Numbered next-steps ---------- */
.eap-steps { list-style: none; display: grid; gap: var(--pf-space-4); max-width: 760px; }
.eap-steps li {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--pf-space-5); align-items: start;
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-6);
  color: var(--pf-text-s); font-size: var(--t-body-lg);
}
.eap-steps .step-n {
  font-family: var(--pf-mono); font-size: 17px; font-weight: 500;
  color: var(--pf-cyan);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-cyan-dim); border: 1px solid var(--pf-cyan-border);
}

/* ---------- Pricing block ---------- */
.pricing { max-width: 680px; }
.pricing .price-caption { color: var(--pf-text-s); font-size: 17px; margin-bottom: var(--pf-space-4); }
.pricing .price-figure {
  font-family: var(--pf-mono); font-weight: 500; font-size: clamp(48px, 8vw, 88px);
  line-height: 1; color: var(--pf-text-p); letter-spacing: -0.02em;
  display: inline-block; padding-bottom: 6px; white-space: nowrap;
  border-bottom: 2px dashed var(--pf-cyan-border);
}
.pricing .price-note { color: var(--pf-text-s); font-size: var(--t-body-lg); margin-top: var(--pf-space-6); max-width: 560px; }
.pricing .price-note strong { color: var(--pf-text-p); font-weight: 500; }

/* ---------- Terms list ---------- */
.terms { list-style: none; display: grid; gap: var(--pf-space-4); max-width: 720px; }
.terms li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--pf-space-4); align-items: start;
  color: var(--pf-text-s); font-size: var(--t-body-lg);
}
.terms li svg { color: var(--pf-cyan); margin-top: 3px; flex: none; }
.terms li strong { color: var(--pf-text-p); font-weight: 500; }

/* ---------- Founders ---------- */
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pf-card-gap); }
@media (max-width: 760px) { .founders { grid-template-columns: 1fr; } }
.fcard {
  background: var(--pf-bg-card);
  border: 0.5px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-6);
  display: grid; grid-template-columns: 64px 1fr; gap: var(--pf-space-5); align-items: start;
}
.fcard .avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pf-mono); font-size: 20px; font-weight: 500;
  color: var(--pf-cyan); letter-spacing: .02em;
  background: var(--pf-cyan-dim);
  border: 4px solid var(--pf-cyan);
  overflow: hidden; flex: none;
}
.fcard .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Program pillars (icon-free, divided columns) ---------- */
.eap-pillars { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar { padding: 4px 30px; border-left: 0.5px solid var(--pf-border); }
.pillar:first-child { border-left: none; padding-left: 0; }
.pillar .pn {
  font-family: var(--pf-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em;
  color: var(--pf-cyan); display: block; margin-bottom: var(--pf-space-4);
}
.pillar h3 { font-size: var(--t-h4); font-weight: 500; margin-bottom: var(--pf-space-3); line-height: 1.25; }
.pillar p { color: var(--pf-text-s); font-size: var(--t-body); }
@media (max-width: 860px) {
  .eap-pillars { grid-template-columns: 1fr 1fr; gap: var(--pf-space-8) 0; }
  .pillar:nth-child(odd) { border-left: none; padding-left: 0; }
  .pillar:nth-child(2) { border-left: 0.5px solid var(--pf-border); padding-left: 30px; }
}
@media (max-width: 560px) {
  .eap-pillars { grid-template-columns: 1fr; gap: var(--pf-space-8) 0; }
  .pillar, .pillar:nth-child(2) { border-left: none; padding-left: 0; }
}
.fcard h3 { font-size: var(--t-h4); margin-bottom: 3px; }
.fcard .frole {
  display: inline-block;
  font-family: var(--pf-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pf-cyan); margin-bottom: var(--pf-space-3);
}
.fcard p { color: var(--pf-text-s); font-size: var(--t-body-sm); }

/* ---------- Apply block ---------- */
.apply { text-align: center; }
.apply .lede { margin: var(--pf-space-4) auto 0; }
.apply-form { display: flex; gap: var(--pf-space-3); justify-content: center; margin-top: var(--pf-space-8); flex-wrap: wrap; }
.apply-form input {
  width: 340px; max-width: 70vw;
  font-family: var(--pf-sans); font-size: var(--t-body);
  color: var(--pf-text-p);
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-input-border);
  border-radius: var(--pf-radius-btn);
  padding: 10px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.apply-form input:focus { outline: none; border-color: var(--pf-cyan); box-shadow: 0 0 0 3px var(--pf-cyan-dim); }
.apply-fineprint { margin-top: var(--pf-space-5); color: var(--pf-text-t); font-size: var(--t-body-sm); }

/* ---------- Homepage EAP teaser section ---------- */
.eap-teaser .wrap {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--pf-space-16); align-items: center;
}
@media (max-width: 860px) { .eap-teaser .wrap { grid-template-columns: 1fr; gap: var(--pf-space-8); } }
.eap-teaser .lede { margin-top: var(--pf-space-4); }
.eap-teaser .eap-teaser-cta { margin-top: var(--pf-space-8); display: flex; gap: var(--pf-space-3); flex-wrap: wrap; }
.eap-teaser-list { list-style: none; display: grid; gap: var(--pf-space-3); }
.eap-teaser-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--pf-space-4); align-items: start;
  color: var(--pf-text-s); font-size: var(--t-body-lg);
}
.eap-teaser-list li svg { color: var(--pf-cyan); margin-top: 3px; flex: none; }
.eap-teaser-list li strong { color: var(--pf-text-p); font-weight: 500; }

/* ---------- Problem framings (numbered editorial list) ---------- */
.eap-framings { display: flex; flex-direction: column; max-width: 940px; }
.framing {
  display: grid; grid-template-columns: 132px 1fr; gap: var(--pf-space-8);
  padding: var(--pf-space-12) 0; align-items: start;
  border-top: 0.5px solid var(--pf-border);
  transition: border-color .18s ease;
}
.framing:last-child { border-bottom: 0.5px solid var(--pf-border); }
.framing:hover { border-top-color: var(--pf-cyan-border); }
.framing-index {
  font-family: var(--pf-mono); font-size: 68px; font-weight: 500; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--pf-cyan-border); letter-spacing: -0.02em;
  transition: -webkit-text-stroke-color .18s ease;
}
.framing:hover .framing-index { -webkit-text-stroke-color: var(--pf-cyan); }
.framing-tag {
  display: inline-block;
  font-family: var(--pf-mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pf-cyan); margin-bottom: var(--pf-space-3);
}
.framing h3 { font-size: var(--t-h3); font-weight: 500; margin-bottom: var(--pf-space-3); line-height: 1.2; max-width: 20em; }
.framing p { color: var(--pf-text-s); font-size: var(--t-body-lg); max-width: 40em; }
.framing ul { list-style: none; display: grid; gap: var(--pf-space-2); margin: 0; max-width: 40em; }
.framing ul li {
  position: relative; padding-left: 22px;
  color: var(--pf-text-s); font-size: var(--t-body-lg);
}
.framing ul li::before {
  content: ""; position: absolute; left: 3px; top: 10px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--pf-cyan); transform: rotate(45deg);
}
.framing .framing-closer { margin-top: var(--pf-space-4); color: var(--pf-cyan); font-size: var(--t-body-lg); max-width: 40em; }
@media (max-width: 640px) {
  .framing { grid-template-columns: 1fr; gap: var(--pf-space-4); padding: var(--pf-space-8) 0; }
  .framing-index { font-size: 44px; }
}

/* ---------- Editorial rows (What Positron Flux does) ---------- */
.eap-tarows { display: flex; flex-direction: column; max-width: 940px; }
.eap-tarow {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--pf-space-12);
  padding: var(--pf-space-6) 0; border-top: 0.5px solid var(--pf-border); align-items: baseline;
}
.eap-tarow .ta-label { font-size: var(--t-h3); font-weight: 300; color: var(--pf-text-p); letter-spacing: -0.01em; }
.eap-tarow .ta-label .ta-num {
  font-family: var(--pf-mono); font-size: 13px; font-weight: 500; color: var(--pf-cyan);
  letter-spacing: .1em; margin-right: 14px; vertical-align: 3px;
}
.eap-tarow .ta-text { color: var(--pf-text-s); font-size: var(--t-body-lg); }
@media (max-width: 760px) { .eap-tarow { grid-template-columns: 1fr; gap: var(--pf-space-3); } }

/* ---------- Placeholder shot (proof assets still to build) ---------- */
.eap-ph {
  border: 1px dashed var(--pf-cyan-border); border-radius: var(--pf-radius-card);
  background: var(--pf-cyan-dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--pf-space-4); padding: var(--pf-space-12) var(--pf-space-8); min-height: 300px;
}
.eap-ph svg { color: var(--pf-cyan); }
.eap-ph .ph-label {
  font-family: var(--pf-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-cyan);
}
.eap-ph .ph-text { color: var(--pf-text-s); font-size: var(--t-body); max-width: 22em; }

/* ---------- Closing / contact ---------- */
.closing { text-align: center; }
.closing .flux-mark { height: 48px; width: auto; margin: 0 auto var(--pf-space-6); display: block; }
.closing h2 { margin-bottom: var(--pf-space-6); }
.closing .contact { color: var(--pf-text-s); font-size: var(--t-body-lg); }
.closing .contact a { color: var(--pf-cyan); text-decoration: none; }
.closing .contact .mono { font-family: var(--pf-mono); font-size: var(--t-body); }

/* ---------- Feature rows (proof screenshots) ---------- */
.fr-shot {
  border: 0.5px solid var(--pf-border-md);
  border-radius: var(--pf-radius-card);
  overflow: hidden;
  background: var(--pf-bg-card);
}
.fr-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.fr:hover .fr-shot {
  border-color: var(--pf-cyan-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.3);
}
.fr:hover .fr-shot img { transform: scale(1.025); }
@media (max-width: 760px) {
  .fr, .fr.flip {
    grid-template-columns: 1fr !important;
    gap: var(--pf-space-8) !important;
  }
  .fr.flip > div[style*="order: 2"] { order: 0 !important; }
  .fr.flip > div[style*="order: 1"] { order: 0 !important; }
}