/* ==========================================================================
   getforj.com — Phase 1 landing page. Sections only; base system in forj.css
   ========================================================================== */

/* ---------- 1. hero ---------- */

.hero{ padding-block:clamp(56px, 8vw, 112px) 0; }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(180px, 25vw, 330px);
  gap:clamp(32px, 6vw, 96px);
  align-items:center;
}
.hero__kicker{
  max-width:34em;
  margin:24px 0 30px;
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.55;
  color:var(--ink-body);
}
.hero__kicker a{
  margin-left:.35em;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
  text-underline-offset:5px;
}
.hero h1{ max-width:12.5em; }
.hero .lede{ margin-top:30px; }
.hero__cta{ margin-top:40px; }
.hero__mark{ justify-self:end; width:100%; }

.stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:36px clamp(24px, 3vw, 44px);
  margin-top:clamp(56px, 7vw, 96px);
  padding-block:clamp(36px, 4vw, 48px) clamp(56px, 7vw, 96px);
  border-top:1px solid var(--paper-line);
}
.stat p{ font-size:15.5px; line-height:1.55; }
.stat .stat__k{
  margin-bottom:14px;
  font:300 clamp(30px, 3.2vw, 42px)/1 var(--forj-font-ui);
  letter-spacing:-.02em;
  color:var(--ink);
}
.stat .stat__k--partner{
  font:500 clamp(16px, 1.5vw, 19px)/1 var(--forj-font-ui);
  letter-spacing:.2em;
  text-transform:uppercase;
  padding-block:.6em .5em;
}

/* ---------- 1.5 value: two vantage points + moat ---------- */

.vantage{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border-block:1px solid var(--paper-line);
}
.vantage__col{ padding-block:clamp(32px, 4vw, 56px); }
.vantage__col:first-child{ padding-right:clamp(0px, 4vw, 56px); }
.vantage__col + .vantage__col{
  padding-left:clamp(24px, 4vw, 56px);
  border-left:1px solid var(--paper-line);
}
.vantage h3{
  margin:20px 0 26px;
  font-size:clamp(25px, 2.5vw, 33px);
  line-height:1.16;
}
.vantage li{ padding-block:10px; line-height:1.55; }
.vantage li::before{ top:calc(10px + .62em); }

.moat{
  margin-top:clamp(40px, 5vw, 64px);
  padding:clamp(32px, 5vw, 72px);
  background:var(--dark);
  border-radius:var(--radius);
  color:var(--on-dark-2);
}
.moat h3{
  margin-bottom:22px;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.1;
  color:var(--on-dark);
}
.moat p{ max-width:46em; font-size:clamp(17px, 1.5vw, 19px); }
.moat b{ color:var(--on-dark); }

/* ---------- 1.55 story ---------- */

.story{ padding-block:clamp(88px, 11vw, 168px); text-align:center; }
.story__text{
  max-width:24em;
  margin-inline:auto;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.42;
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--ink);
}
.story__text b{ font-weight:500; }
.story__tail{ margin-top:32px; font-size:18px; }

/* ---------- 1.6 pricing ---------- */

.price-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
  margin-top:clamp(36px, 4vw, 52px);
  padding:clamp(28px, 4vw, 60px);
  background:var(--dark-1);
  border:1px solid var(--dark-line);
  border-radius:var(--radius);
}
.price__amt{
  font:300 clamp(56px, 6.8vw, 92px)/1 var(--forj-font-ui);
  letter-spacing:-.035em;
  font-variant-numeric:lining-nums;
  color:var(--on-dark);
}
.price__per{ margin-top:14px; font-size:16px; color:var(--on-dark-2); }
.price__what{ margin-top:26px; font-size:17px; color:#C3C9CF; }
.price__cta{ margin-top:34px; }
.price__note{ margin-top:14px; font-size:13.5px; color:var(--on-dark-3); }

.incl .label{ margin-bottom:12px; }
.incl li{
  padding-block:13px;
  border-bottom:1px solid var(--dark-line);
  font-size:16px;
  line-height:1.5;
  color:#C3C9CF;
}
.incl li:last-child{ border-bottom:0; }
.incl li::before{ top:calc(13px + .6em); }

/* second group inside the same card: optional extras, hollow bullets */
.incl .incl__opt{ margin-top:clamp(28px, 3vw, 40px); }
.band--dark .incl .incl__opt-list li::before{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--slate);
}

.addon{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 32px;
  margin-top:20px;
  padding:clamp(24px, 3vw, 32px) clamp(24px, 4vw, 60px);
  border:1px solid var(--dark-line);
  border-radius:var(--radius);
}
.addon h4{ margin-bottom:8px; font-size:22px; font-weight:400; }
.addon p{ max-width:36em; font-size:15.5px; }
.addon .link{ color:var(--on-dark); font-weight:500; white-space:nowrap; }

/* ---------- 2. journey ---------- */

.steps{ border-top:1px solid var(--paper-line); }
.step{
  display:grid;
  grid-template-columns:clamp(72px, 9vw, 120px) minmax(220px, 320px) minmax(0, 1fr);
  gap:clamp(20px, 4vw, 52px);
  align-items:start;
  padding-block:clamp(32px, 4vw, 52px);
  border-bottom:1px solid var(--paper-line);
}
.step__n{
  font:400 clamp(44px, 5.5vw, 68px)/1 var(--forj-font-data);
  letter-spacing:-.045em;
  color:var(--ink);
}
.step__t h3{
  margin-bottom:16px;
  font:500 16px/1.35 var(--forj-font-ui);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.badge{
  display:inline-block;
  padding:6px 14px;
  border:1px solid var(--slate);
  background:rgba(127,163,182,.14);
  border-radius:999px;
  font:500 12px/1.35 var(--forj-font-data);
  letter-spacing:.03em;
  color:var(--ink-2);
}
.step__d b{
  display:block;
  margin-bottom:10px;
  font:400 clamp(21px, 2vw, 26px)/1.28 var(--forj-font-ui);
  letter-spacing:-.01em;
}
.step__d p{ max-width:36em; }

/* ---------- 3. faldo ---------- */

.faldo{
  display:grid;
  grid-template-columns:minmax(200px, 320px) minmax(0, 1fr);
  gap:clamp(40px, 7vw, 112px);
  align-items:center;
}
.reel{ width:100%; max-height:560px; aspect-ratio:9 / 16; }
.faldo .label{ margin-bottom:28px; }
.faldo blockquote{
  margin:0 0 40px;
  font-size:clamp(26px, 3.2vw, 42px);
  line-height:1.24;
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--on-dark);
  text-wrap:balance;
}
.faldo__who b{ display:block; margin-bottom:6px; font-size:21px; font-weight:500; }
.faldo__who span{ font-size:16px; }

/* ---------- 4. mid-page CTA ---------- */

.midcta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:32px 48px;
}
.midcta p{
  max-width:16em;
  font-size:clamp(26px, 3.2vw, 42px);
  line-height:1.18;
  font-weight:300;
  letter-spacing:-.02em;
  color:var(--ink);
}

/* ---------- 5. the fitter's command ---------- */

.command h2{ max-width:20em; }
.command__body{
  max-width:34em;
  margin-top:32px;
  font-size:clamp(18px, 1.8vw, 22px);
  line-height:1.62;
}

/* ---------- 6. screenshots ---------- */

.shots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(36px, 4vw, 56px) clamp(24px, 3.5vw, 48px);
}
.shot .ph{ aspect-ratio:16 / 10; margin-bottom:22px; }
.shot h4{
  margin-bottom:8px;
  font:500 18px/1.3 var(--forj-font-ui);
  letter-spacing:-.005em;
  color:var(--ink);
}
.shot p{ font-size:16px; }

/* ---------- 7. demo video ---------- */

.video{ text-align:center; }
.video .lede{ margin:24px auto 0; }
.video__frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:920px;
  aspect-ratio:16 / 9;
  margin:clamp(36px, 5vw, 60px) auto 0;
  background:var(--dark);
  border:1px solid var(--dark-line);
  border-radius:var(--radius);
}
.video__play{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(64px, 8vw, 88px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--on-dark);
}
.video__play::before{
  content:"";
  width:28%;
  aspect-ratio:.85;
  margin-left:8%;
  background:var(--ink);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.video__cap{
  position:absolute;
  left:clamp(16px, 2.4vw, 28px);
  bottom:clamp(14px, 2vw, 24px);
  color:var(--on-dark-3);
}
.micro{ text-align:center; }
.micro p{
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.3;
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--on-dark);
}
.micro a{ font-weight:500; margin-left:.3em; }

/* ---------- 8. testimonial strip ---------- */

.strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 24px);
}
.tile{ aspect-ratio:9 / 16; }
.tile--quote{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:clamp(20px, 2vw, 30px);
  background:var(--dark);
  border-radius:var(--radius);
  color:var(--on-dark-2);
}
.tile--quote p{
  font-size:clamp(16px, 1.45vw, 19px);
  line-height:1.5;
  font-weight:300;
  color:#E9ECEF;
}
.tile__who b{
  display:block;
  margin-bottom:6px;
  font:500 11px/1.3 var(--forj-font-data);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--on-dark);
}
.tile__photo{
  display:block;
  width:56px;
  height:56px;
  margin-bottom:14px;
  object-fit:cover;
  border-radius:var(--radius);
  background:var(--dark-2);
  box-shadow:0 0 0 1px var(--dark-edge);   /* dark photo on a dark tile needs an edge */
}
.tile__who span{ font-size:14px; color:var(--on-dark-3); }

/* ---------- 9. founders ---------- */

.founders{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2.4vw, 32px);
}
.fcard{
  display:flex;
  flex-direction:column;
  padding:clamp(24px, 2.8vw, 38px);
  background:var(--paper-raised);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
}
.fcard__photo{
  display:block;
  width:120px;
  height:120px;
  margin-bottom:28px;
  object-fit:cover;
  border-radius:var(--radius);
  background:var(--ink-2);   /* shown while the photo loads */
}
.fcard h4{ margin:12px 0 16px; font-size:28px; font-weight:400; line-height:1.15; }
.fcard p:not(.label){ margin-bottom:26px; font-size:16px; line-height:1.68; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.chip{
  padding:5px 12px;
  border:1px solid rgba(17,18,20,.24);
  border-radius:999px;
  font:400 12px/1.4 var(--forj-font-data);
  color:var(--ink-2);
}

/* ---------- 9.5 origin ---------- */

.origin h2{ margin-bottom:48px; }
.origin p{
  margin-bottom:28px;
  font-size:clamp(18px, 1.6vw, 20px);
  line-height:1.72;
}
.origin em{ font-style:normal; font-weight:500; color:var(--ink); }
.origin .lead-line,
.origin .close-line{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.36;
  font-weight:300;
  letter-spacing:-.015em;
  color:var(--ink);
}
.origin .close-line{ margin-top:12px; margin-bottom:0; }
.origin .btn{ margin-top:44px; }

/* ---------- 9.7 coming soon ---------- */

.soon__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2.4vw, 32px);
  margin-top:clamp(36px, 4vw, 52px);
}
.soon__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(24px, 2.8vw, 38px);
  background:var(--paper-raised);
  border:1px solid var(--paper-line);
  border-radius:var(--radius);
}
.soon__card h4{ margin:16px 0 12px; font-size:24px; font-weight:400; line-height:1.2; }
.soon__card p:not(.label){ font-size:16px; }
.soon__link{ margin-top:auto; padding-top:20px; font-size:15.5px; font-weight:500; color:var(--ink); }

/* ---------- 10. final CTA ---------- */

.final h2{ max-width:14em; font-size:clamp(36px, 5vw, 66px); line-height:1.05; }
.final .lede{ margin-top:26px; }
.cta-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
  margin-top:clamp(44px, 5vw, 64px);
}
.cta-col h3{ margin:16px 0 14px; font-size:clamp(26px, 2.6vw, 34px); line-height:1.2; }
.cta-col .blurb{ max-width:30em; font-size:16.5px; }
.cta-col .btn{ margin-top:30px; }
.cta-col--ent{
  padding-left:clamp(32px, 5vw, 72px);
  border-left:1px solid var(--dark-line);
}
.cta-fine{ margin-top:20px; font-size:14.5px; color:var(--on-dark-3); }
.cta-fine a{ color:var(--on-dark-2); }

/* ---------- responsive ---------- */

@media (max-width:980px){
  .stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .strip{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .founders,
  .soon__grid{ grid-template-columns:1fr; }
  .step{ grid-template-columns:clamp(64px, 12vw, 96px) minmax(0, 1fr); }
  .step__d{ grid-column:2; }
}

@media (max-width:820px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__mark{ order:-1; justify-self:start; width:clamp(96px, 28vw, 140px); }
  .vantage{ grid-template-columns:1fr; }
  .vantage__col:first-child{ padding-right:0; }
  .vantage__col + .vantage__col{
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--paper-line);
  }
  .price-card,
  .faldo,
  .shots,
  .cta-cols{ grid-template-columns:1fr; }
  .reel{ max-width:260px; }
  .cta-col--ent{
    padding-left:0;
    border-left:0;
    padding-top:40px;
    border-top:1px solid var(--dark-line);
  }
  .nav a:not(.btn){ display:none; }
}

@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:14px; }
  .step__d{ grid-column:auto; }
  .btn{ white-space:normal; text-align:center; padding-block:14px; }
  .strip{ gap:12px; }
}